Frontend Design

Layout

• Three-panel layout: Sidebar (w-60) | Editor (flex-1) | AI Panel (w-80).
• Sidebar and AI panel are flex-shrink-0 with border-r/border-l border-zinc-800.
• AI panel is toggleable (hidden/shown). Sidebar is always visible.
• All panels fill viewport height: h-screen on the root flex container.
• Scrolling is per-panel (overflow-y-auto), never on the body.

Component Patterns

• All components are "use client" unless they are pure layout with no hooks.
• Use Convex hooks (useQuery, useMutation, useAction) for data — never fetch() or API routes.
• Prefer controlled inputs with local state + debounced saves to avoid real-time sync jitter.
• Fonts: font-sans (Geist Sans) for UI, font-mono (Geist Mono) for code.

Animations

• Use Framer Motion for panel transitions, modals, AI result reveals, and command palette.
• Keep animations subtle: 150-200ms duration, ease-out easing.
• Use AnimatePresence for mount/unmount animations (AI panel toggle, modals).
• No animations on text input or editor content — only structural UI changes.

Component Scaffolding

When creating a new component:

1. Place it in the correct directory:

   • components/editor/ — TipTap editor, toolbar, selection menu
   • components/ai/ — Chat panel, inline suggestions, command palette
   • components/sidebar/ — Note list, folder tree
   • components/shared/ — Reusable primitives (buttons, modals, tooltips)

2. Use this template:

"use client";

// External imports
// Internal imports (convex, components)

interface MyComponentProps {
  // typed props
}

export default function MyComponent({ ...props }: MyComponentProps) {
  // hooks first, then handlers, then render
  return (
    <div className="...">
      {/* content */}
    </div>
  );
}

3. Export as default. One component per file. Name the file the same as the component.

Checklist

When reviewing frontend code, verify:

• No inline styles — Tailwind classes only
• Dark theme colors from the zinc palette
• Correct panel in the three-panel layout
• Interactive elements have hover/focus states
• Inputs use local state + debounced saves (not directly bound to server state)
• Framer Motion for structural animations (not CSS @keyframes)
• Component is in the right directory
• No fetch() calls — Convex hooks only