UX Polish & Builder Improvements

Implementation Progress

1. Survey Preview = Respondent View

Current problem: When an admin clicks "Preview Survey", they see something different from what the respondent sees.

Expected behavior: Preview renders the exact same UI as the respondent take page (SurveyTakePage), but in read-only/preview mode. No data is saved. The admin sees exactly what a respondent would see: the intro screen, the question flow, section headers, progress bar, and result visualization.

Implementation:

• Preview route should render SurveyTakePage with a preview=true flag
• When preview=true: skip email collection, skip session creation, skip response submission
• Show a banner at top: "Preview Mode: responses will not be saved"
• Use the same layout, fonts, spacing, and section grouping as the real take page

2. Survey Builder Auto-Save

Current problem: The survey builder has a "Save" button. Chip wants every change saved automatically.

Expected behavior:

• Every field change (title, description, settings, questions, groups) triggers an auto-save after a short debounce (500ms)
• Show a subtle status indicator: "Saving...", "Saved", "Error saving"
• Remove the Save/Save Draft button entirely
• Keep only the Publish button (transitions DRAFT to PUBLISHED)
• For already published surveys, changes are saved immediately (no separate publish step)

Implementation:

• Add a useAutoSave hook that debounces and calls PUT /surveys/{id} and question CRUD endpoints
• Show save status in the header (small text like "All changes saved" or a checkmark icon)
• Publish button only appears when status === 'DRAFT'

3. Drag-and-Drop for Groups and Questions

Current problem: Groups and questions in the builder can only be reordered by changing the order field manually. The left panel shows sections and questions but they are not draggable.

Expected behavior:

• Groups (sections) can be dragged up/down to reorder
• Questions within a group can be dragged up/down to reorder
• Questions can be dragged between groups
• Visual drag handle (the grip dots icon already shown in the screenshot) is the drag target
• Smooth animation during drag

Implementation:

• Use @dnd-kit/core + @dnd-kit/sortable (lightweight, React-native, accessible)
• Wrap the question list in a SortableContext
• Wrap the group list in a SortableContext
• On drag end, update the order field and re-sort
• Auto-save triggers after reorder

4. Question Text Visibility

Current problem: Long question text like "How would you rate your access to..." is truncated in the left panel and unreadable.

Expected behavior:

• Show truncated text by default (single line with ellipsis)
• On hover: show a tooltip with the full question text
• The tooltip should appear after a brief delay (200ms) and disappear on mouse leave

Implementation:

• Add title attribute on the question text span (native browser tooltip), or
• Use a custom tooltip component for a styled tooltip
• Ensure the question type badge ("Rating (0-5)") stays visible and is not pushed off screen

5. Group Colors from Style Guide

Current problem: The color picker in "Edit Group" shows hardcoded colors (red, orange, yellow, green, blue, purple, pink, gray) that don't match the application's "Gentle Glow" design system.

Expected behavior: Color picker options should use the style guide palette:

Implementation:

• Update COLOR_OPTIONS in SurveyBuilderPage.tsx to use these hex values
• The color swatches in the picker should reflect the actual palette
• Group color indicators in the left panel should use these same colors

6. Navigation Cleanup

Current problem: Navigation is confusing. Some back buttons are at the top, some actions are at the bottom, and it is not always clear how to return to the previous page. For example, "list organizations" button placement is inconsistent.

Expected behavior:

• Every page has a back button/link at the top left (below the nav bar)
• Back button always goes to the logical parent: Survey detail -> Organization, Question editor -> Builder, etc.
• Action buttons (Publish, Delete) are at the top right, not at the bottom
• Breadcrumb-style navigation where it makes sense: Dashboard > Organization > Survey > Edit
• Remove duplicate navigation (e.g., if "Organizations" is in the nav bar, don't also have it as a button in the page content)

Specific pages to fix:

• Dashboard: "Create Organization" and "Organizations" links should be in a consistent location
• Organization detail: tabs (Surveys, Members, Invitations) should have clear active state
• Survey builder: back should go to the survey share/detail page or organization
• Survey edit: same as builder
• Compliance page: back to dashboard link is at the top (good), keep this pattern everywhere

7. Public Survey Access (Link-Only Taking)

Current problem: Surveys already work via public link, but the flow for anonymous respondents could be smoother.

Expected behavior:

• Anyone with the public link can take the survey (no login required). This already works.
• When a respondent enters their email to start, the system silently creates a user record and adds them to the organization as a "RESPONDENT" role (not a full member).
• Each page of the survey is auto-saved to the server (tied to the email/user).
• If the respondent returns later with the same email, they see: "You have a survey in progress. Continue?"
• After completing the survey, the respondent sees: "Create an account to track your progress" with Google or email/password options.
• If they create an account, the existing user record is upgraded (password set, verified).
• If they don't, the user record stays as a lightweight "email-only" record for tracking.

Implementation notes:

• New user role: RESPONDENT (can take surveys, view own results, no org admin access)
• On email entry + survey start: POST /auth/auto-enroll creates user if not exists, returns a temporary token
• Session is tied to user_id (not just email), enabling server-side auto-save
• Account upgrade: POST /auth/upgrade sets password on an existing email-only user