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
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Check, ChevronsUpDown, Layers } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useViewStore } from "@/lib/stores/view-store";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const GROUP_OPTIONS: { label: string; value: string | null }[] = [
|
|
{ label: "None", value: null },
|
|
{ label: "Status", value: "status" },
|
|
{ label: "Type", value: "type" },
|
|
{ label: "Priority", value: "priority" },
|
|
{ label: "Assignee", value: "assignee" },
|
|
];
|
|
|
|
function labelForValue(value: string | null): string {
|
|
return GROUP_OPTIONS.find((o) => o.value === value)?.label ?? "None";
|
|
}
|
|
|
|
export function GroupConfig() {
|
|
const groupBy = useViewStore((s) => s.config.groupBy);
|
|
const setGroupBy = useViewStore((s) => s.setGroupBy);
|
|
|
|
const selectedLabel = labelForValue(groupBy);
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 max-w-[11rem] gap-1.5 px-2 text-xs"
|
|
>
|
|
<Layers className="size-3.5 shrink-0" />
|
|
<span className="truncate">
|
|
Group by{" "}
|
|
<span className="font-medium text-foreground">{selectedLabel}</span>
|
|
</span>
|
|
<ChevronsUpDown className="size-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-48">
|
|
{GROUP_OPTIONS.map((opt) => (
|
|
<DropdownMenuItem
|
|
key={opt.label}
|
|
className="gap-2 text-xs"
|
|
onClick={() => setGroupBy(opt.value)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"flex size-4 items-center justify-center",
|
|
groupBy === opt.value ? "opacity-100" : "opacity-0",
|
|
)}
|
|
>
|
|
<Check className="size-3.5" />
|
|
</span>
|
|
{opt.label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|