Skip to content

Add space management UI: rename and delete #2626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shomix merged 7 commits into from
Aug 5, 2026
Merged

Add space management UI: rename and delete #2626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ad837a9
Add space management UI: rename and delete
Aug 4, 2026
1973e2f
fix
Aug 4, 2026
69143a7
feedback
Aug 5, 2026
3d008cc
merge main
Aug 5, 2026
1f1f6a4
fmtg
Aug 5, 2026
11e26c1
add translations
Aug 5, 2026
9f0049f
update
Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 95 additions & 17 deletions templates/clips/app/components/library/library-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@ import {
IconShare,
IconSettings,
IconSearch,
IconDots,
IconEdit,
} from "@tabler/icons-react";
import { ReactNode, useEffect, useMemo, useState } from "react";
import { NavLink, useLocation, useParams } from "react-router";
import { NavLink, useLocation, useNavigate, useParams } from "react-router";
import { toast } from "sonner";

import {
Expand All @@ -52,6 +54,12 @@ import {
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Tooltip,
TooltipContent,
Expand All @@ -73,6 +81,7 @@ import { CreateSpaceDialog } from "./create-space-dialog";
import { FolderTree, type FolderNode } from "./folder-tree";
import { PageHeaderSlotProvider } from "./page-header";
import { SearchBar } from "./search-bar";
import { SpaceDialogs } from "./space-dialogs";

interface LibraryLayoutProps {
children: ReactNode;
Expand All @@ -98,6 +107,7 @@ function ClipsAgentToggleButton() {

export function LibraryLayout({ children }: LibraryLayoutProps) {
const location = useLocation();
const navigate = useNavigate();
const t = useT();
// Bind chat to the currently-open recording (`/r/:id`). Library, spaces,
// meetings, dictate, and settings stay unscoped — those are list-y views
Expand All @@ -123,9 +133,12 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
const currentOrganizationId =
organizations?.currentId ?? organizations?.organizations?.[0]?.id;

const { data: spaces } = useSpaces(currentOrganizationId, {
enabled: hasActiveOrg && Boolean(currentOrganizationId),
});
const { data: spaces, refetch: refetchSpaces } = useSpaces(
currentOrganizationId,
{
enabled: hasActiveOrg && Boolean(currentOrganizationId),
},
);
const { data: libFolders } = useFolders(
{
organizationId: currentOrganizationId,
Expand Down Expand Up @@ -240,6 +253,10 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
const [newFolderOpen, setNewFolderOpen] = useState(false);
const [newFolderName, setNewFolderName] = useState("");
const [newSpaceOpen, setNewSpaceOpen] = useState(false);
const [deleteSpaceId, setDeleteSpaceId] = useState<string | null>(null);
const [deleteSpaceName, setDeleteSpaceName] = useState("");
const [renameSpaceId, setRenameSpaceId] = useState<string | null>(null);
const [renameSpaceValue, setRenameSpaceValue] = useState("");
const createFolder = useCreateFolder();

const navItems: {
Expand Down Expand Up @@ -540,26 +557,70 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
const active = spaceId === s.id;
return (
<li key={s.id}>
<NavLink
to={`/spaces/${s.id}`}
<div
className={cn(
"flex items-center gap-2 rounded px-2 py-1 text-xs",
"group flex items-center gap-2 rounded px-2 py-1 text-xs",
active
? "bg-primary/10 text-primary"
: "text-foreground hover:bg-accent/60",
)}
>
<div
className="flex h-4 w-4 items-center justify-center rounded text-[10px]"
style={{
background: s.color ?? "hsl(var(--primary))",
color: "white",
}}
<NavLink
to={`/spaces/${s.id}`}
className="flex min-w-0 flex-1 items-center gap-2"
>
{s.iconEmoji ?? s.name.slice(0, 1).toUpperCase()}
</div>
<span className="truncate">{s.name}</span>
</NavLink>
<div
className="flex h-4 w-4 items-center justify-center rounded text-[10px] shrink-0"
style={{
background: s.color ?? "hsl(var(--primary))",
color: "white",
}}
>
{s.iconEmoji ??
s.name.slice(0, 1).toUpperCase()}
</div>
<span className="truncate">{s.name}</span>
</NavLink>
{canManageOrg && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
aria-label={`${s.name}: ${t("root.commandActions")}`}
title={`${s.name}: ${t("root.commandActions")}`}
className="rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
>
<IconDots className="h-3.5 w-3.5" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" side="right">
<DropdownMenuItem
onSelect={() => {
setTimeout(() => {
setRenameSpaceValue(s.name);
setRenameSpaceId(s.id);
}, 0);
}}
>
<IconEdit className="h-3.5 w-3.5 me-2" />
{t("spaceDialog.renameSpace")}
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
setTimeout(() => {
setDeleteSpaceId(s.id);
setDeleteSpaceName(s.name);
}, 0);
}}
className="text-destructive"
>
<IconTrash className="h-3.5 w-3.5 me-2" />
{t("spaceDialog.deleteSpace")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
</li>
);
})}
Expand Down Expand Up @@ -781,6 +842,23 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
onOpenChange={setNewSpaceOpen}
organizationId={currentOrganizationId}
/>

<SpaceDialogs
renameSpaceId={renameSpaceId}
renameSpaceName=""
setRenameSpaceId={setRenameSpaceId}
renameValue={renameSpaceValue}
setRenameValue={setRenameSpaceValue}
deleteSpaceId={deleteSpaceId}
deleteSpaceName={deleteSpaceName}
setDeleteSpaceId={setDeleteSpaceId}
onMutationSuccess={(deletedSpaceId) => {
if (deletedSpaceId && spaceId === deletedSpaceId) {
navigate("/spaces");
}
refetchSpaces?.();
}}
/>
</div>
);
}
Loading
Loading