boocode/apps/web/src/pages/Home.tsx

import { useEffect, useState } from 'react';
import { ChevronDown, ChevronRight, Folder, FolderTree, Menu, RotateCcw } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { AddProjectModal } from '@/components/AddProjectModal';
import { CreateProjectModal } from '@/components/CreateProjectModal';
import { api } from '@/api/client';
import type { Project } from '@/api/types';
import { sessionEvents } from '@/hooks/sessionEvents';
import { useSidebar } from '@/hooks/useSidebar';
import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
import { useRightRailDrawer } from '@/hooks/useRightRailDrawer';
import { useViewport } from '@/hooks/useViewport';

export function Home() {
  const { data } = useSidebar();
  const [addOpen, setAddOpen] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [archived, setArchived] = useState<Project[] | null>(null);
  const [showArchived, setShowArchived] = useState(false);
  const { setOpen: setSidebarOpen } = useSidebarDrawer();
  const { toggle: toggleRightRail } = useRightRailDrawer();
  const { isMobile } = useViewport();

  const empty = data ? data.projects.length === 0 : false;

  useEffect(() => {
    api.projects.list({ status: 'archived' })
      .then(setArchived)
      .catch(() => {});
  }, []);

  useEffect(() => {
    return sessionEvents.subscribe((event) => {
      if (event.type === 'project_archived') {
        setArchived((prev) => {
          if (!prev) return prev;
          if (prev.some((p) => p.id === event.project_id)) return prev;
          const fromSidebar = data?.projects.find((p) => p.id === event.project_id);
          if (!fromSidebar) return prev;
          return [
            {
              id: fromSidebar.id,
              name: fromSidebar.name,
              path: fromSidebar.path,
              added_at: new Date().toISOString(),
              last_session_id: null,
              status: 'archived' as const,
              gitea_remote: fromSidebar.gitea_remote,
            },
            ...prev,
          ];
        });
      }
      if (event.type === 'project_unarchived') {
        setArchived((prev) => prev ? prev.filter((p) => p.id !== event.project.id) : prev);
      }
      if (event.type === 'project_deleted') {
        setArchived((prev) => prev ? prev.filter((p) => p.id !== event.project_id) : prev);
      }
      if (event.type === 'project_updated') {
        setArchived((prev) =>
          prev ? prev.map((p) => p.id === event.project_id ? { ...p, name: event.name } : p) : prev
        );
      }
    });
  }, [data]);

  async function handleUnarchive(id: string) {
    try {
      await api.projects.unarchive(id);
      // Server publishes project_unarchived; useUserEvents delivers it.
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'failed to restore project');
    }
  }

  return (
    <div className="flex-1 flex flex-col min-h-0">
      {isMobile && (
        <header
          className="border-b px-3 sm:px-4 py-2 flex items-center gap-1.5 shrink-0 text-sm"
          style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
        >
          <button
            type="button"
            onClick={() => setSidebarOpen(true)}
            className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
            aria-label="Open sidebar"
          >
            <Menu className="size-5" />
          </button>
          <button
            type="button"
            onClick={toggleRightRail}
            className="inline-flex items-center justify-center -mr-1 ml-auto min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
            aria-label="Toggle file browser"
          >
            <FolderTree className="size-5" />
          </button>
        </header>
      )}
      <div className="flex-1 flex flex-col items-center px-6 py-12 overflow-y-auto">
        <div className="w-full max-w-md space-y-6">
        <div className="text-center space-y-3">
          {empty ? (
            <>
              <h1 className="text-2xl font-semibold tracking-tight">No projects yet</h1>
              <p className="text-sm text-muted-foreground">
                Add a project from /opt or create a new one.
              </p>
            </>
          ) : (
            <>
              <h1 className="text-2xl font-semibold tracking-tight">BooCode</h1>
              <p className="text-sm text-muted-foreground">
                Pick a project from the sidebar, or add another.
              </p>
            </>
          )}
          <div className="flex gap-2 justify-center pt-2">
            <Button variant="outline" onClick={() => setAddOpen(true)}>Add existing project</Button>
            <Button onClick={() => setCreateOpen(true)}>Create new project</Button>
          </div>
        </div>

        {archived && archived.length > 0 && (
          <div className="border-t pt-6">
            <button
              type="button"
              onClick={() => setShowArchived(!showArchived)}
              className="flex items-center gap-1 text-xs font-medium text-muted-foreground mb-2 hover:text-foreground"
            >
              {showArchived ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
              Archived Projects ({archived.length})
            </button>
            {showArchived && (
              <ul className="divide-y rounded-md border">
                {archived.map((p) => (
                  <li key={p.id} className="flex items-center justify-between px-3 py-2 hover:bg-muted/50">
                    <div className="flex-1 flex items-center gap-2 min-w-0">
                      <Folder className="size-3.5 opacity-40 shrink-0" />
                      <span className="truncate text-sm text-muted-foreground" title={p.name}>{p.name}</span>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon-sm"
                      aria-label="Restore project"
                      title="Restore project"
                      onClick={() => void handleUnarchive(p.id)}
                    >
                      <RotateCcw size={14} />
                    </Button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
        </div>
        <AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />
        <CreateProjectModal open={createOpen} onOpenChange={setCreateOpen} />
      </div>
    </div>
  );
}