Skip to content

Migrate to Vue 3#50

Merged
plutov merged 5 commits intomainfrom
vue-ui
Aug 28, 2025
Merged

Migrate to Vue 3#50
plutov merged 5 commits intomainfrom
vue-ui

Conversation

@plutov
Copy link
Owner

@plutov plutov commented Aug 28, 2025

Summary by CodeRabbit

  • New Features

    • Rebuilt UI in Vue 3 with client-side routing.
    • Surveys list with per-survey rows and status/actions.
    • Survey view with intro, dynamic questions, and completion footer.
    • Responses management: pagination, sorting, detail modal, delete, and “Export as JSON”.
    • Consistent error alerts and refreshed styles/background.
  • Refactor

    • Migrated from Next.js/React to Vue 3 + Vite.
    • Switched UI env variable to VITE_API_ADDR.
  • Documentation

    • Added local runtime URLs for API and UI.
    • Updated tech stack to Vue 3.
  • Chores

    • Updated linting/formatting, build tooling, and Tailwind configuration.

@plutov plutov merged commit 9d45136 into main Aug 28, 2025
2 of 3 checks passed
@coderabbitai
Copy link

coderabbitai bot commented Aug 28, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

UI migrated from Next.js/React to Vue 3 + Vite. Introduces Vue components, router, Vite/Tailwind/eslint configs, and updated env vars. Removes Next.js pages/config/middleware and React components. Adds views for App, Survey, and Survey Responses, plus supporting Vue UI components and styles. README and .gitignore updated.

Changes

Cohort / File(s) Summary
Docs & Repo Meta
README.md, .gitignore
Added runtime URLs, changed tech stack to Vue 3; broadened ignore rules and added ui/dist.
Env Vars
ui/.env.example, ui/env.d.ts
Switched NEXT_PUBLIC_API_ADDRVITE_API_ADDR; removed session/auth secrets; added Vite client typings.
Lint/Format/Node Version
ui/eslint.config.ts, ui/.eslintrc.json, ui/.prettierrc.json, ui/.nvmrc
Replaced Next/TS ESLint with Vue flat config; updated Prettier schema/options; removed legacy ESLint and Node version pin.
Build Tooling & Config
ui/vite.config.ts, ui/postcss.config.js, ui/tailwind.config.js, ui/package.json
Added Vite + Vue plugins; switched PostCSS/Tailwind to ESM; simplified Tailwind content/plugins; migrated dependencies/scripts to Vue/Vite stack.
TypeScript Config
ui/tsconfig.json, ui/tsconfig.app.json, ui/tsconfig.node.json
Introduced project references and separate app/node configs; added @/* alias.
Bootstrapping & Routing
ui/index.html, ui/src/main.ts, ui/src/router/index.ts
Added Vue app entry, mount point, and router with routes for app, survey, responses, and root redirect.
Next.js Removal
ui/next.config.js, ui/next-env.d.ts, ui/src/app/**, ui/src/middleware.ts, ui/src/app/... (manifest, robots, sitemap, pages)
Removed Next.js config, types, middleware, app router pages (app/survey/responses), and metadata routes.
Views (Vue)
ui/src/views/AppView.vue, ui/src/views/SurveyView.vue, ui/src/views/SurveyResponsesView.vue
New views for listing surveys, displaying a survey by slug, and managing survey responses with pagination/sorting/export/delete.
Layouts & App Shell (Vue)
ui/src/App.vue, ui/src/components/app/AppLayout.vue
Added basic app shell and layout container.
Survey Flow (React → Vue)
Added: ui/src/components/app/survey/SurveyLayout.vue, SurveyForm.vue, SurveyIntro.vue, SurveyQuestions.vue, SurveyFooter.vue, SurveyNotFound.vue
Removed: ui/src/components/app/survey/*.tsx
Ported survey layout, intro/session creation, questions/answers flow, footer, and not-found from React to Vue; preserved session localStorage handling and API interactions.
Surveys List & Rows (React → Vue)
Added: ui/src/components/app/SurveysPage.vue, SurveyRow.vue
Removed: ui/src/components/app/SurveysPage.tsx, SurveyRow.tsx
Ported surveys table and row actions (start/stop, links, status display).
UI Components (React → Vue)
Added: ui/src/components/ui/BgPattern.vue, ErrCode.vue, LogoIcon.vue, AppIcon.vue
Removed: ui/src/components/ui/BgPattern.tsx, ErrCode.tsx, themes.ts
Replaced basic UI parts with Vue SFCs; removed Flowbite theme.
Styles
Added: ui/src/assets/base.css, ui/src/assets/main.css
Removed: ui/src/styles/* (global.css, app.css, survey/*.css)
Introduced new base and Tailwind-driven styles; removed prior global/survey styles.
API & Libs
ui/src/lib/api.ts, ui/src/lib/questions.ts, ui/src/lib/siteConfig.ts, ui/src/lib/types.ts
Switched API base to import.meta.env.VITE_API_ADDR; type-only import cleanup; minor formatting; no API signature changes.
Public Assets
ui/public/site.webmanifest
Removed PWA manifest.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Router
  participant SurveyView
  participant API as API Server
  participant Storage as localStorage
  participant Form as SurveyForm
  participant Questions as SurveyQuestions

  User->>Router: Navigate /survey/:urlSlug
  Router->>SurveyView: mount()
  SurveyView->>API: GET /surveys/:urlSlug
  API-->>SurveyView: Survey | Error
  alt Survey found
    SurveyView->>Form: render(survey)
    Form->>Storage: get survey_session_id:<slug>
    alt Session exists
      Form->>API: GET /surveys/:slug/sessions/:uuid
      API-->>Form: Session | Error
      alt Valid session
        Form->>Questions: render(survey, session)
      else Invalid
        Form->>Storage: remove key
        Form->>Questions: render intro flow
      end
    else No session
      Form->>Form: show intro
      User->>Form: Click Start
      Form->>API: POST /surveys/:slug/sessions
      API-->>Form: { uuid }
      Form->>Storage: set survey_session_id:<slug>
      Form->>Questions: render(survey, session)
    end
    loop Answer each question
      User->>Questions: Submit answer
      Questions->>API: POST /surveys/:slug/answers
      API-->>Questions: Updated session | Error
      alt Success
        Questions->>Questions: Move to next or complete
        opt Completed
          Questions->>Storage: remove survey_session_id:<slug>
        end
      else Error
        Questions->>Questions: Show ErrCode
      end
    end
  else Not found
    SurveyView->>SurveyView: Show SurveyNotFound
  end
Loading
sequenceDiagram
  autonumber
  actor User
  participant Router
  participant Resp as SurveyResponsesView
  participant API as API Server
  participant Modal

  User->>Router: Navigate /app/surveys/:uuid/responses
  Router->>Resp: mount()
  Resp->>API: GET /surveys
  API-->>Resp: [surveys]
  Resp->>Resp: find survey by uuid
  Resp->>API: GET /surveys/:uuid/sessions?limit&offset&sort
  API-->>Resp: { sessions, pages_count }
  User->>Resp: Change page/sort
  Resp->>API: GET sessions with params
  API-->>Resp: Page data
  User->>Resp: Export JSON
  Resp->>API: GET sessions?limit=all
  API-->>Resp: JSON blob
  Resp->>User: Trigger download
  User->>Resp: View session
  Resp->>Modal: Open with details
  User->>Resp: Delete session
  Resp->>API: DELETE /surveys/:uuid/sessions/:sessionUuid
  API-->>Resp: OK
  Resp->>API: GET sessions (page 1)
  API-->>Resp: Updated data
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60–90 minutes

Possibly related PRs

  • client-only #49 — Similar migration from Next.js/React to Vue/Vite, including env var rename to VITE_API_ADDR and removal of Next-specific files.

Poem

A hop, a skip, a Vite-quick flight,
From React-y burrow to Vue-lit night.
I nibble routes and chew on state,
With Tailwind breezes—builds feel light.
Surveys bloom, responses sing—
Thump! goes my paw: ship this thing. 🥕✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.


📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8c2e3d7 and 403591d.

⛔ Files ignored due to path filters (1)
  • ui/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (70)
  • .gitignore (1 hunks)
  • README.md (3 hunks)
  • ui/.env.example (1 hunks)
  • ui/.eslintrc.json (0 hunks)
  • ui/.nvmrc (0 hunks)
  • ui/.prettierrc.json (1 hunks)
  • ui/env.d.ts (1 hunks)
  • ui/eslint.config.ts (1 hunks)
  • ui/index.html (1 hunks)
  • ui/next-env.d.ts (0 hunks)
  • ui/next.config.js (0 hunks)
  • ui/package.json (1 hunks)
  • ui/postcss.config.js (1 hunks)
  • ui/public/site.webmanifest (0 hunks)
  • ui/src/App.vue (1 hunks)
  • ui/src/app/app/page.tsx (0 hunks)
  • ui/src/app/app/surveys/[survey_uuid]/responses/page.tsx (0 hunks)
  • ui/src/app/layout.tsx (0 hunks)
  • ui/src/app/manifest.ts (0 hunks)
  • ui/src/app/not-found.tsx (0 hunks)
  • ui/src/app/robots.ts (0 hunks)
  • ui/src/app/sitemap.ts (0 hunks)
  • ui/src/app/survey/[url_slug]/page.tsx (0 hunks)
  • ui/src/assets/base.css (1 hunks)
  • ui/src/assets/main.css (1 hunks)
  • ui/src/components/app/AppLayout.tsx (0 hunks)
  • ui/src/components/app/AppLayout.vue (1 hunks)
  • ui/src/components/app/SurveyResponsesPage.tsx (0 hunks)
  • ui/src/components/app/SurveyRow.tsx (0 hunks)
  • ui/src/components/app/SurveyRow.vue (1 hunks)
  • ui/src/components/app/SurveysPage.tsx (0 hunks)
  • ui/src/components/app/SurveysPage.vue (1 hunks)
  • ui/src/components/app/survey/SurveyFooter.tsx (0 hunks)
  • ui/src/components/app/survey/SurveyFooter.vue (1 hunks)
  • ui/src/components/app/survey/SurveyForm.tsx (0 hunks)
  • ui/src/components/app/survey/SurveyForm.vue (1 hunks)
  • ui/src/components/app/survey/SurveyIntro.tsx (0 hunks)
  • ui/src/components/app/survey/SurveyIntro.vue (1 hunks)
  • ui/src/components/app/survey/SurveyLayout.tsx (0 hunks)
  • ui/src/components/app/survey/SurveyLayout.vue (1 hunks)
  • ui/src/components/app/survey/SurveyNotFound.tsx (0 hunks)
  • ui/src/components/app/survey/SurveyNotFound.vue (1 hunks)
  • ui/src/components/app/survey/SurveyQuestions.tsx (0 hunks)
  • ui/src/components/app/survey/SurveyQuestions.vue (1 hunks)
  • ui/src/components/ui/AppIcon.vue (1 hunks)
  • ui/src/components/ui/BgPattern.tsx (0 hunks)
  • ui/src/components/ui/BgPattern.vue (1 hunks)
  • ui/src/components/ui/ErrCode.tsx (0 hunks)
  • ui/src/components/ui/ErrCode.vue (1 hunks)
  • ui/src/components/ui/LogoIcon.vue (2 hunks)
  • ui/src/components/ui/themes.ts (0 hunks)
  • ui/src/lib/api.ts (2 hunks)
  • ui/src/lib/questions.ts (2 hunks)
  • ui/src/lib/siteConfig.ts (1 hunks)
  • ui/src/lib/types.ts (1 hunks)
  • ui/src/main.ts (1 hunks)
  • ui/src/middleware.ts (0 hunks)
  • ui/src/router/index.ts (1 hunks)
  • ui/src/styles/app.css (0 hunks)
  • ui/src/styles/global.css (0 hunks)
  • ui/src/styles/survey/custom.css (0 hunks)
  • ui/src/styles/survey/default.css (0 hunks)
  • ui/src/views/AppView.vue (1 hunks)
  • ui/src/views/SurveyResponsesView.vue (1 hunks)
  • ui/src/views/SurveyView.vue (1 hunks)
  • ui/tailwind.config.js (1 hunks)
  • ui/tsconfig.app.json (1 hunks)
  • ui/tsconfig.json (1 hunks)
  • ui/tsconfig.node.json (1 hunks)
  • ui/vite.config.ts (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch vue-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbit in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbit in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbit read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbit help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbit ignore or @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbit summary or @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbit or @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@plutov plutov deleted the vue-ui branch August 28, 2025 10:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant