feat: add DeleteSpaceDialog and EditSpaceDialog components for space management

apps/web/src/components/delete-space-dialog.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export type DeleteSpaceDialogProps = {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  isDeleting: boolean;
+  onConfirm: () => void;
+  spaceName: string;
+};
+
+export function DeleteSpaceDialog({
+  open,
+  onOpenChange,
+  isDeleting,
+  onConfirm,
+  spaceName,
+}: DeleteSpaceDialogProps) {
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent
+        className="sm:max-w-md"
+        onClick={(e) => e.stopPropagation()}
+        style={{ zIndex: 201 }}
+      >
+        <DialogHeader>
+          <DialogTitle>Delete Space</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete the space
+            "{spaceName}" for your account.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="gap-2">
+          <DialogClose>
+            <Button disabled={isDeleting} variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button
+            disabled={isDeleting}
+            onClick={onConfirm}
+            variant="destructive"
+          >
+            {isDeleting ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/edit-space-dialog.tsx

@@ -0,0 +1,93 @@
+import { Button } from "@/components/ui/button";
+import { ColorPicker, type ColorValue } from "@/components/ui/color-picker";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+export type EditSpaceDialogProps = {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  title: string;
+  color: ColorValue;
+  isSaving: boolean;
+  onChangeTitle: (v: string) => void;
+  onChangeColor: (v: ColorValue) => void;
+  onSave: () => void;
+};
+
+export function EditSpaceDialog({
+  open,
+  onOpenChange,
+  title,
+  color,
+  isSaving,
+  onChangeTitle,
+  onChangeColor,
+  onSave,
+}: EditSpaceDialogProps) {
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent
+        className="sm:max-w-md"
+        onClick={(e) => e.stopPropagation()}
+        style={{ zIndex: 201 }}
+      >
+        <DialogHeader>
+          <DialogTitle>Edit Space</DialogTitle>
+          <DialogDescription>
+            Update the title and color of your space.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          <div className="space-y-2">
+            <label
+              className="font-medium text-foreground text-sm"
+              htmlFor="edit-space-title"
+            >
+              Title
+            </label>
+            <Input
+              id="edit-space-title"
+              onChange={(e) => onChangeTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && title.trim()) {
+                  onSave();
+                }
+              }}
+              placeholder="Enter space title..."
+              value={title}
+            />
+          </div>
+
+          <div className="flex flex-col space-y-1">
+            <span className="font-medium text-foreground text-sm">Color</span>
+            <ColorPicker
+              name="edit-space-color"
+              onChange={onChangeColor}
+              value={color}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <DialogClose>
+            <Button disabled={isSaving} variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button disabled={!title.trim() || isSaving} onClick={onSave}>
+            {isSaving ? "Saving..." : "Save Changes"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/mode-toggle.tsx

@@ -13,7 +13,7 @@ export function ModeToggle() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <Button size="icon" variant="outline">
           <Sun className="dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

apps/web/src/components/space-actions.tsx

@@ -0,0 +1,162 @@
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { DeleteSpaceDialog } from "@/components/delete-space-dialog";
+import { EditSpaceDialog } from "@/components/edit-space-dialog";
+import { Button } from "@/components/ui/button";
+import type { ColorValue } from "@/components/ui/color-picker";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { deleteSpace, updateSpace } from "@/lib/appwrite-db";
+
+export type SpaceActionsProps = {
+  space: { id: string; name: string; color: string };
+  userId?: string;
+  onUpdated?: () => void;
+  onDeleted?: () => void;
+};
+
+export function SpaceActions({
+  space,
+  userId,
+  onUpdated,
+  onDeleted,
+}: SpaceActionsProps) {
+  const [openEdit, setOpenEdit] = useState(false);
+  const [openDelete, setOpenDelete] = useState(false);
+  const [title, setTitle] = useState(space.name);
+  const [color, setColor] = useState<ColorValue>(normalizeColor(space.color));
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  useEffect(() => {
+    setTitle(space.name);
+    setColor(normalizeColor(space.color));
+  }, [space.name, space.color]);
+
+  const handleSave = async () => {
+    if (!userId) {
+      return;
+    }
+    if (!title.trim()) {
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await updateSpace({
+        spaceId: space.id,
+        title: title.trim(),
+        color: color as string,
+        userId,
+      });
+      setOpenEdit(false);
+      onUpdated?.();
+    } catch {
+      // TODO: add toast
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!userId) {
+      return;
+    }
+    setIsDeleting(true);
+    try {
+      await deleteSpace({ spaceId: space.id, userId });
+      setOpenDelete(false);
+      onDeleted?.();
+    } catch {
+      // TODO: add toast
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        onKeyDown={(e) => {
+          // Prevent bubbling to card
+          e.stopPropagation();
+        }}
+      >
+        <Button
+          aria-label="Open space actions"
+          className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
+          size="sm"
+          variant="ghost"
+        >
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" sideOffset={6}>
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpenEdit(true);
+          }}
+        >
+          <Pencil className="h-4 w-4" /> Edit
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpenDelete(true);
+          }}
+          variant="destructive"
+        >
+          <Trash2 className="h-4 w-4" /> Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+
+      <EditSpaceDialog
+        color={color}
+        isSaving={isSaving}
+        onChangeColor={setColor}
+        onChangeTitle={setTitle}
+        onOpenChange={setOpenEdit}
+        onSave={handleSave}
+        open={openEdit}
+        title={title}
+      />
+
+      <DeleteSpaceDialog
+        isDeleting={isDeleting}
+        onConfirm={handleDelete}
+        onOpenChange={setOpenDelete}
+        open={openDelete}
+        spaceName={space.name}
+      />
+    </DropdownMenu>
+  );
+}
+
+// Color helpers constrained to the allowed palette from ColorPicker
+const allowedColors = new Set<ColorValue>([
+  "#3b82f6",
+  "#22c55e",
+  "#a855f7",
+  "#f59e0b",
+  "#ec4899",
+  "#06b6d4",
+  "#ef4444",
+  "#10b981",
+]);
+
+function normalizeColor(value?: string): ColorValue {
+  if (value && (allowedColors as Set<string>).has(value)) {
+    return value as ColorValue;
+  }
+  return "#3b82f6";
+}

apps/web/src/components/spaces-grid.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
-import { MoreHorizontal, Plus, Search } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Tldraw } from "tldraw";
 import { NewSpaceDialog } from "@/components/new-space-dialog";
+import { SpaceActions } from "@/components/space-actions";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -170,13 +171,12 @@ export function SpacesGrid() {
                       {space.name}
                     </h3>
                   </div>
-                  <Button
+                  <SpaceActions
-                    className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
+                    onDeleted={() => spacesQuery.refetch()}
-                    size="sm"
+                    onUpdated={() => spacesQuery.refetch()}
-                    variant="ghost"
+                    space={space}
-                  >
+                    userId={session?.$id}
-                    <MoreHorizontal className="h-4 w-4" />
+                  />
-                  </Button>
                 </div>
               </CardHeader>
 
@@ -257,3 +257,5 @@ export function SpacesGrid() {
     </div>
   );
 }
+
+// Inlined action/dialog components moved to dedicated files for reuse

apps/web/src/components/ui/dropdown-menu.tsx

@@ -1,257 +1,278 @@
-"use client";
+import * as React from "react"
+import { Menu as BaseMenu } from "@base-ui-components/react/menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { cn } from "@/lib/utils"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
 
 function DropdownMenu({
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+}: React.ComponentProps<typeof BaseMenu.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+	return <BaseMenu.Root data-slot="dropdown-menu" {...props} />
 }
 
 function DropdownMenuPortal({
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+}: React.ComponentProps<typeof BaseMenu.Portal>) {
-  return (
+	return <BaseMenu.Portal data-slot="dropdown-menu-portal" {...props} />
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
 }
 
 function DropdownMenuTrigger({
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+}: React.ComponentProps<typeof BaseMenu.Trigger>) {
-  return (
+	return <BaseMenu.Trigger data-slot="dropdown-menu-trigger" {...props} />
-    <DropdownMenuPrimitive.Trigger
+}
-      data-slot="dropdown-menu-trigger"
+
-      {...props}
+function DropdownMenuPositioner({
-    />
+	...props
-  );
+}: React.ComponentProps<typeof BaseMenu.Positioner>) {
+	return <BaseMenu.Positioner data-slot="dropdown-menu-positioner" {...props} />
 }
 
 function DropdownMenuContent({
-  className,
+	className,
-  sideOffset = 4,
+	sideOffset = 4,
-  ...props
+	align = "center",
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	...props
-  return (
+}: React.ComponentProps<typeof BaseMenu.Popup> & {
-    <DropdownMenuPrimitive.Portal>
+	align?: BaseMenu.Positioner.Props["align"]
-      <DropdownMenuPrimitive.Content
+	sideOffset?: BaseMenu.Positioner.Props["sideOffset"]
-        className={cn(
+}) {
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
+	return (
-          className
+		<DropdownMenuPortal>
-        )}
+			<DropdownMenuPositioner
-        data-slot="dropdown-menu-content"
+				className="max-h-[var(--available-height)]"
-        sideOffset={sideOffset}
+				sideOffset={sideOffset}
-        {...props}
+				align={align}
-      />
+			>
-    </DropdownMenuPrimitive.Portal>
+				<BaseMenu.Popup
-  );
+					data-slot="dropdown-menu-content"
+					className={cn(
+						"bg-popover data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-[var(--transform-origin)] overflow-hidden rounded-md border p-1 shadow-md",
+						className
+					)}
+					{...props}
+				/>
+			</DropdownMenuPositioner>
+		</DropdownMenuPortal>
+	)
 }
 
 function DropdownMenuGroup({
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+}: React.ComponentProps<typeof BaseMenu.Group>) {
-  return (
+	return <BaseMenu.Group data-slot="dropdown-menu-group" {...props} />
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
 }
 
 function DropdownMenuItem({
-  className,
+	className,
-  inset,
+	inset,
-  variant = "default",
+	variant = "default",
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+}: React.ComponentProps<typeof BaseMenu.Item> & {
-  inset?: boolean;
+	inset?: boolean
-  variant?: "default" | "destructive";
+	variant?: "default" | "destructive"
 }) {
-  return (
+	return (
-    <DropdownMenuPrimitive.Item
+		<BaseMenu.Item
-      className={cn(
+			data-slot="dropdown-menu-item"
-        "data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+			data-inset={inset}
-        className
+			data-variant={variant}
-      )}
+			className={cn(
-      data-inset={inset}
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive focus:data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-all select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-all [&_svg:not([class*='size-'])]:size-4",
-      data-slot="dropdown-menu-item"
+				className
-      data-variant={variant}
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  );
+	)
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      checked={checked}
-      className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      data-slot="dropdown-menu-checkbox-item"
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  );
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      data-slot="dropdown-menu-radio-item"
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      className={cn(
-        "px-2 py-1.5 font-medium text-sm data-[inset]:pl-8",
-        className
-      )}
-      data-inset={inset}
-      data-slot="dropdown-menu-label"
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      data-slot="dropdown-menu-separator"
-      {...props}
-    />
-  );
 }
 
 function DropdownMenuShortcut({
-  className,
+	className,
-  ...props
+	...props
 }: React.ComponentProps<"span">) {
-  return (
+	return (
-    <span
+		<span
-      className={cn(
+			data-slot="dropdown-menu-shortcut"
-        "ml-auto text-muted-foreground text-xs tracking-widest",
+			className={cn(
-        className
+				"text-muted-foreground ml-auto text-xs tracking-widest",
-      )}
+				className
-      data-slot="dropdown-menu-shortcut"
+			)}
-      {...props}
+			{...props}
-    />
+		/>
-  );
+	)
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof BaseMenu.Separator>) {
+	return (
+		<BaseMenu.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	)
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof BaseMenu.GroupLabel> & {
+	inset?: boolean
+}) {
+	return (
+		<BaseMenu.GroupLabel
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-xs font-medium data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof BaseMenu.CheckboxItem>) {
+	return (
+		<BaseMenu.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<BaseMenu.CheckboxItemIndicator>
+					<CheckIcon className="size-4" />
+				</BaseMenu.CheckboxItemIndicator>
+			</span>
+			{children}
+		</BaseMenu.CheckboxItem>
+	)
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof BaseMenu.RadioGroup>) {
+	return (
+		<BaseMenu.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+	)
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof BaseMenu.RadioItem>) {
+	return (
+		<BaseMenu.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<BaseMenu.RadioItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</BaseMenu.RadioItemIndicator>
+			</span>
+			{children}
+		</BaseMenu.RadioItem>
+	)
 }
 
 function DropdownMenuSub({
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+}: React.ComponentProps<typeof BaseMenu.SubmenuRoot>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+	return (
+		<BaseMenu.SubmenuRoot
+			closeDelay={0}
+			delay={0}
+			data-slot="dropdown-menu-sub"
+			{...props}
+		/>
+	)
 }
 
 function DropdownMenuSubTrigger({
-  className,
+	className,
-  inset,
+	inset,
-  children,
+	children,
-  ...props
+	...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+}: React.ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
-  inset?: boolean;
+	inset?: boolean
 }) {
-  return (
+	return (
-    <DropdownMenuPrimitive.SubTrigger
+		<BaseMenu.SubmenuTrigger
-      className={cn(
+			data-slot="dropdown-menu-sub-trigger"
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground",
+			data-inset={inset}
-        className
+			className={cn(
-      )}
+				"focus:bg-accent focus:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-      data-inset={inset}
+				className
-      data-slot="dropdown-menu-sub-trigger"
+			)}
-      {...props}
+			{...props}
-    >
+		>
-      {children}
+			{children}
-      <ChevronRightIcon className="ml-auto size-4" />
+			<ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
+		</BaseMenu.SubmenuTrigger>
-  );
+	)
 }
 
 function DropdownMenuSubContent({
-  className,
+	className,
-  ...props
+	sideOffset = 0,
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	align = "start",
-  return (
+	...props
-    <DropdownMenuPrimitive.SubContent
+}: React.ComponentProps<typeof BaseMenu.Popup> & {
-      className={cn(
+	align?: BaseMenu.Positioner.Props["align"]
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
+	sideOffset?: BaseMenu.Positioner.Props["sideOffset"]
-        className
+}) {
-      )}
+	return (
-      data-slot="dropdown-menu-sub-content"
+		<DropdownMenuPortal>
-      {...props}
+			<DropdownMenuPositioner
-    />
+				className="max-h-[var(--available-height)]"
-  );
+				sideOffset={sideOffset}
+				align={align}
+			>
+				<BaseMenu.Popup
+					data-slot="dropdown-menu-content"
+					className={cn(
+						"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-[var(--transform-origin)] overflow-hidden rounded-md border p-1 shadow-md",
+						className
+					)}
+					{...props}
+				/>
+			</DropdownMenuPositioner>
+		</DropdownMenuPortal>
+	)
 }
 
 export {
-  DropdownMenu,
+	DropdownMenu,
-  DropdownMenuPortal,
+	DropdownMenuPortal,
-  DropdownMenuTrigger,
+	DropdownMenuTrigger,
-  DropdownMenuContent,
+	DropdownMenuContent,
-  DropdownMenuGroup,
+	DropdownMenuGroup,
-  DropdownMenuLabel,
+	DropdownMenuLabel,
-  DropdownMenuItem,
+	DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+	DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
+	DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
+	DropdownMenuRadioItem,
-  DropdownMenuSeparator,
+	DropdownMenuSeparator,
-  DropdownMenuShortcut,
+	DropdownMenuShortcut,
-  DropdownMenuSub,
+	DropdownMenuSub,
-  DropdownMenuSubTrigger,
+	DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
+	DropdownMenuSubContent,
-};
+}

apps/web/src/components/user-menu.tsx

@@ -31,29 +31,26 @@ export default function UserMenu() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <Button variant="outline">{session.name ?? session.email}</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="bg-card">
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem>{session.email}</DropdownMenuItem>
-        <DropdownMenuItem asChild>
+        <DropdownMenuItem
-          <Button
+          onClick={async () => {
-            className="w-full"
+            await authClient.signOut();
-            onClick={async () => {
+            // Immediately reflect logout in UI
-              await authClient.signOut();
+            queryClient.setQueryData(["session", "me"], null);
-              // Immediately reflect logout in UI
+            await queryClient.invalidateQueries({
-              queryClient.setQueryData(["session", "me"], null);
+              queryKey: ["session", "me"],
-              await queryClient.invalidateQueries({
+            });
-                queryKey: ["session", "me"],
+            navigate({ to: "/" });
-              });
+          }}
-              navigate({ to: "/" });
+          variant="destructive"
-            }}
+        >
-            variant="destructive"
+          Sign Out
-          >
-            Sign Out
-          </Button>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

apps/web/src/index.css

@@ -122,10 +122,13 @@ body {
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-button {
+button,
+[role="menuitem"] {
   @apply transition-colors disabled:opacity-50 disabled:pointer-events-none cursor-pointer;
 }
 
+/* role="menuitem" selector */
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

apps/web/src/lib/appwrite-db.ts

@@ -196,3 +196,74 @@ export async function listUserSpaceSnapshots(
     return { row, snapshot: parsed };
   });
 }
+
+/**
+ * Update a space's metadata (title/color) identified by spaceId for the current (or provided) user.
+ */
+export async function updateSpace(args: {
+  spaceId: string;
+  title?: string;
+  color?: string;
+  userId?: string;
+}): Promise<void> {
+  ensureEnv();
+  const uid = args.userId ?? (await getCurrentUserId());
+  if (!uid) {
+    throw new Error("Not authenticated");
+  }
+
+  const res = (await databases.listDocuments(DATABASE_ID, COLLECTION_ID, [
+    Query.equal("spaceId", args.spaceId),
+    Query.equal("userId", uid),
+  ])) as Models.DocumentList<Models.Document>;
+
+  const existing = res.documents?.[0] as Models.Document | undefined;
+  if (!existing) {
+    throw new Error("Space not found");
+  }
+
+  const patch: Record<string, unknown> = {};
+  if (typeof args.title === "string") {
+    patch.title = args.title;
+  }
+  if (typeof args.color === "string") {
+    patch.color = args.color;
+  }
+
+  if (Object.keys(patch).length === 0) {
+    return; // nothing to update
+  }
+
+  await databases.updateDocument(
+    DATABASE_ID,
+    COLLECTION_ID,
+    existing.$id,
+    patch
+  );
+}
+
+/**
+ * Delete a space (document) identified by spaceId for the current (or provided) user.
+ */
+export async function deleteSpace(args: {
+  spaceId: string;
+  userId?: string;
+}): Promise<void> {
+  ensureEnv();
+  const uid = args.userId ?? (await getCurrentUserId());
+  if (!uid) {
+    throw new Error("Not authenticated");
+  }
+
+  const res = (await databases.listDocuments(DATABASE_ID, COLLECTION_ID, [
+    Query.equal("spaceId", args.spaceId),
+    Query.equal("userId", uid),
+  ])) as Models.DocumentList<Models.Document>;
+
+  const existing = res.documents?.[0] as Models.Document | undefined;
+  if (!existing) {
+    throw new Error("Space not found");
+  }
+
+  await databases.deleteDocument(DATABASE_ID, COLLECTION_ID, existing.$id);
+}