mirror of
https://github.com/FranP-code/Reflecto.git
synced 2025-10-13 00:43:31 +00:00
feat: add DeleteSpaceDialog and EditSpaceDialog components for space management
This commit is contained in:
58
apps/web/src/components/delete-space-dialog.tsx
Normal file
58
apps/web/src/components/delete-space-dialog.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
93
apps/web/src/components/edit-space-dialog.tsx
Normal file
93
apps/web/src/components/edit-space-dialog.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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" />
|
||||
|
||||
162
apps/web/src/components/space-actions.tsx
Normal file
162
apps/web/src/components/space-actions.tsx
Normal file
@@ -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";
|
||||
}
|
||||
@@ -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
|
||||
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>
|
||||
<SpaceActions
|
||||
onDeleted={() => spacesQuery.refetch()}
|
||||
onUpdated={() => spacesQuery.refetch()}
|
||||
space={space}
|
||||
userId={session?.$id}
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -257,3 +257,5 @@ export function SpacesGrid() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Inlined action/dialog components moved to dedicated files for reuse
|
||||
|
||||
@@ -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 { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
|
||||
import type * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Root>) {
|
||||
return <BaseMenu.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
);
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Portal>) {
|
||||
return <BaseMenu.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Trigger>) {
|
||||
return <BaseMenu.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,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
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",
|
||||
className
|
||||
)}
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
);
|
||||
className,
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Popup> & {
|
||||
align?: BaseMenu.Positioner.Props["align"]
|
||||
sideOffset?: BaseMenu.Positioner.Props["sideOffset"]
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuPositioner
|
||||
className="max-h-[var(--available-height)]"
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
>
|
||||
<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
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
);
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Group>) {
|
||||
return <BaseMenu.Group data-slot="dropdown-menu-group" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
className={cn(
|
||||
"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",
|
||||
className
|
||||
)}
|
||||
data-inset={inset}
|
||||
data-slot="dropdown-menu-item"
|
||||
data-variant={variant}
|
||||
{...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}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<BaseMenu.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"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",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-muted-foreground text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...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
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.SubmenuRoot>) {
|
||||
return (
|
||||
<BaseMenu.SubmenuRoot
|
||||
closeDelay={0}
|
||||
delay={0}
|
||||
data-slot="dropdown-menu-sub"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
className={cn(
|
||||
"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",
|
||||
className
|
||||
)}
|
||||
data-inset={inset}
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
return (
|
||||
<BaseMenu.SubmenuTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
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",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</BaseMenu.SubmenuTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
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 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",
|
||||
className
|
||||
)}
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
className,
|
||||
sideOffset = 0,
|
||||
align = "start",
|
||||
...props
|
||||
}: React.ComponentProps<typeof BaseMenu.Popup> & {
|
||||
align?: BaseMenu.Positioner.Props["align"]
|
||||
sideOffset?: BaseMenu.Positioner.Props["sideOffset"]
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPortal>
|
||||
<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,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
};
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={async () => {
|
||||
await authClient.signOut();
|
||||
// Immediately reflect logout in UI
|
||||
queryClient.setQueryData(["session", "me"], null);
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["session", "me"],
|
||||
});
|
||||
navigate({ to: "/" });
|
||||
}}
|
||||
variant="destructive"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
await authClient.signOut();
|
||||
// Immediately reflect logout in UI
|
||||
queryClient.setQueryData(["session", "me"], null);
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["session", "me"],
|
||||
});
|
||||
navigate({ to: "/" });
|
||||
}}
|
||||
variant="destructive"
|
||||
>
|
||||
Sign Out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user