a508ece6e7
Complete architecture for a ClickUp/Notion/Miro-class project management app: - Turborepo monorepo with Next.js 15, TypeScript, PostgreSQL (Drizzle ORM) - Object-centered database schema (everything is an Object: tasks, projects, docs, whiteboards) - NextAuth v5 authentication with credentials + OAuth providers - tRPC v11 API layer with full CRUD for objects, properties, relations, templates, search - Three-panel UI: collapsible sidebar, center content area, push-in right panel - Purple/teal theme with light/dark mode via Shadcn/ui + Tailwind CSS - Multiple views: List, Kanban board (dnd-kit), Table (spreadsheet), Embedded iframe - TipTap rich text editor with slash commands, custom blocks (callout, toggle, mention, embed, divider), AI block - Real-time collaboration via Yjs + Hocuspocus with presence/cursors - tldraw whiteboard with custom shape cards (task, document, project) - MCP server exposing all app data/tools for AI agents - AI chat panel, editor AI slash commands, Cmd+K command palette - Template system with built-in templates (Bug Report, Meeting Notes, Sprint) - Full-text search with result highlighting - Docker Compose for full-stack deployment (web + collab + postgres + redis) Made-with: Cursor
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import * as Tabs from "@radix-ui/react-tabs";
|
|
import { LayoutGrid, List, Table2 } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { type ActiveViewType, useViewStore } from "@/lib/stores/view-store";
|
|
|
|
const tabs: { id: ActiveViewType; label: string; icon: typeof List }[] = [
|
|
{ id: "list", label: "List", icon: List },
|
|
{ id: "board", label: "Board", icon: LayoutGrid },
|
|
{ id: "table", label: "Table", icon: Table2 },
|
|
];
|
|
|
|
export function ViewSwitcher() {
|
|
const activeView = useViewStore((s) => s.activeView);
|
|
const setActiveView = useViewStore((s) => s.setActiveView);
|
|
|
|
const tabValue = tabs.some((t) => t.id === activeView) ? activeView : "list";
|
|
|
|
return (
|
|
<Tabs.Root value={tabValue} onValueChange={(v) => setActiveView(v as ActiveViewType)}>
|
|
<Tabs.List
|
|
className="inline-flex h-8 items-stretch gap-1 border-b border-border"
|
|
aria-label="View type"
|
|
>
|
|
{tabs.map(({ id, label, icon: Icon }) => (
|
|
<Tabs.Trigger
|
|
key={id}
|
|
value={id}
|
|
className={cn(
|
|
"relative inline-flex items-center gap-1.5 px-2.5 text-xs font-medium text-muted-foreground transition-colors",
|
|
"hover:text-foreground",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
"data-[state=active]:text-primary",
|
|
"after:pointer-events-none after:absolute after:bottom-0 after:left-1 after:right-1 after:h-0.5 after:rounded-full after:bg-primary after:opacity-0 after:transition-opacity",
|
|
"data-[state=active]:after:opacity-100",
|
|
)}
|
|
>
|
|
<Icon className="size-3.5 shrink-0" aria-hidden />
|
|
<span>{label}</span>
|
|
</Tabs.Trigger>
|
|
))}
|
|
</Tabs.List>
|
|
</Tabs.Root>
|
|
);
|
|
}
|