9d2fcd635c
- Removed rounded corners and excess padding for a compact, simple feel. - Added a collapsible sidebar to preserve space while keeping existing icons. - Re-architected XWorkmateWorkspacePage layout to put chat/action bar at the bottom with a flex-grow central space. - Added suggested chips (Slides, Video Gen, Deep Research, etc.) for quick tasks. - Abstracted `pickCopy` to use generics to fix type errors. - Added Next.js `force-dynamic` explicit rule to `/xworkmate` to allow `headers()` resolution statically conflicting with `dynamic = 'error'` in root layout. Co-authored-by: cloud-neutral <4133689+cloud-neutral@users.noreply.github.com>
115 lines
5.8 KiB
Diff
115 lines
5.8 KiB
Diff
--- src/components/xworkmate/XWorkmateWorkspacePage.tsx
|
|
+++ src/components/xworkmate/XWorkmateWorkspacePage.tsx
|
|
@@ -582,6 +582,7 @@
|
|
const [activeSection, setActiveSection] =
|
|
useState<WorkspaceDestination>("assistant");
|
|
const [composerValue, setComposerValue] = useState("");
|
|
+ const [sidebarExpanded, setSidebarExpanded] = useState(true);
|
|
|
|
const setScope = useOpenClawConsoleStore((state) => state.setScope);
|
|
const applyDefaults = useOpenClawConsoleStore((state) => state.applyDefaults);
|
|
@@ -663,20 +664,22 @@
|
|
<div className="relative h-full overflow-hidden bg-[linear-gradient(180deg,#f4f7fd_0%,#f6f8fb_32%,#f3f5f8_100%)] text-[var(--color-text)]">
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(51,102,255,0.10),_transparent_26%),radial-gradient(circle_at_bottom_right,_rgba(15,23,42,0.05),_transparent_24%)]" />
|
|
|
|
- <div className="relative flex h-full min-h-0 gap-3 p-3">
|
|
- <aside className="flex w-[76px] shrink-0 flex-col rounded-[26px] border border-white/80 bg-[rgba(255,255,255,0.74)] p-3 shadow-[0_20px_40px_rgba(15,23,42,0.06)] backdrop-blur">
|
|
- <div className="flex flex-col gap-2">
|
|
- {primarySections.map((section) => (
|
|
- <SidebarButton
|
|
- key={section.key}
|
|
- icon={section.icon}
|
|
- label={section.label}
|
|
- active={section.key === activeSection}
|
|
- onClick={() => setActiveSection(section.key)}
|
|
- />
|
|
- ))}
|
|
- </div>
|
|
-
|
|
+ <div className="relative flex h-full min-h-0">
|
|
+ {sidebarExpanded ? (
|
|
+ <aside className="flex w-[76px] shrink-0 flex-col border-r border-white/80 bg-[rgba(255,255,255,0.74)] p-3 shadow-[0_20px_40px_rgba(15,23,42,0.06)] backdrop-blur z-10 transition-all duration-300">
|
|
+ <div className="flex flex-col gap-2">
|
|
+ {primarySections.map((section) => (
|
|
+ <SidebarButton
|
|
+ key={section.key}
|
|
+ icon={section.icon}
|
|
+ label={section.label}
|
|
+ active={section.key === activeSection}
|
|
+ onClick={() => setActiveSection(section.key)}
|
|
+ />
|
|
+ ))}
|
|
+ </div>
|
|
+
|
|
+ <div className="my-4 h-px bg-[var(--color-divider)]" />
|
|
+
|
|
+ <div className="flex flex-col gap-2">
|
|
+ {workspaceSections.map((section) => (
|
|
+ <SidebarButton
|
|
+ key={section.key}
|
|
+ icon={section.icon}
|
|
+ label={section.label}
|
|
+ active={section.key === activeSection}
|
|
+ onClick={() => setActiveSection(section.key)}
|
|
+ />
|
|
+ ))}
|
|
+ </div>
|
|
+
|
|
+ <div className="my-4 h-px bg-[var(--color-divider)]" />
|
|
+
|
|
+ <div className="flex flex-col gap-2">
|
|
+ {toolSections.map((section) => (
|
|
+ <SidebarButton
|
|
+ key={section.key}
|
|
+ icon={section.icon}
|
|
+ label={section.label}
|
|
+ active={section.key === activeSection}
|
|
+ onClick={() => setActiveSection(section.key)}
|
|
+ />
|
|
+ ))}
|
|
+ </div>
|
|
+
|
|
+ <div className="mt-auto flex flex-col gap-2">
|
|
+ {footerSections.map((section) => (
|
|
+ <SidebarButton
|
|
+ key={section.key}
|
|
+ icon={section.icon}
|
|
+ label={section.label}
|
|
+ active={section.key === activeSection}
|
|
+ onClick={() => setActiveSection(section.key)}
|
|
+ />
|
|
+ ))}
|
|
+ <button
|
|
+ type="button"
|
|
+ onClick={() => setSidebarExpanded(false)}
|
|
+ className="mt-2 flex h-12 w-12 items-center justify-center rounded-[16px] border border-transparent bg-white/50 text-[var(--color-text-subtle)] transition hover:text-[var(--color-heading)]"
|
|
+ >
|
|
+ <ChevronsRight className="h-[18px] w-[18px] rotate-180" />
|
|
+ </button>
|
|
+ </div>
|
|
+ </aside>
|
|
+ ) : (
|
|
+ <div className="absolute left-0 top-4 z-20 px-2">
|
|
+ <button
|
|
+ type="button"
|
|
+ onClick={() => setSidebarExpanded(true)}
|
|
+ className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/80 bg-white/70 shadow-sm text-[var(--color-text-subtle)] transition hover:text-[var(--color-heading)] backdrop-blur"
|
|
+ >
|
|
+ <ListTodo className="h-[18px] w-[18px]" />
|
|
+ </button>
|
|
+ </div>
|
|
+ )}
|
|
+
|
|
- <main className="flex min-h-0 flex-1 flex-col rounded-[30px] border border-white/75 bg-[rgba(255,255,255,0.54)] p-3 shadow-[0_24px_64px_rgba(15,23,42,0.07)] backdrop-blur">
|
|
- <div className="min-h-0 flex-1 rounded-[28px] border border-white/80 bg-[rgba(248,250,252,0.78)] p-3">
|
|
+ <main className={cn(
|
|
+ "flex min-h-0 flex-1 flex-col bg-[rgba(255,255,255,0.54)] shadow-[0_24px_64px_rgba(15,23,42,0.07)] backdrop-blur transition-all duration-300",
|
|
+ !sidebarExpanded && "pl-14"
|
|
+ )}>
|
|
+ <div className="min-h-0 flex-1 bg-[rgba(248,250,252,0.78)]">
|
|
- <div className="mx-auto flex h-full max-w-[1680px] min-h-0 flex-col">
|
|
+ <div className="flex h-full min-h-0 flex-col">
|
|
{profile ? (
|
|
- <div className="mb-3 flex flex-wrap items-center gap-2 rounded-[22px] border border-[color:var(--color-surface-border)] bg-white/90 px-5 py-4 text-sm text-[var(--color-text-subtle)] shadow-[var(--shadow-sm)]">
|
|
+ <div className="flex flex-wrap items-center gap-2 border-b border-[color:var(--color-surface-border)] bg-white/90 px-5 py-3 text-sm text-[var(--color-text-subtle)] shadow-[var(--shadow-sm)]">
|