@cryptiklemur/lattice 4.0.2 → 5.0.1

package/src/client/components/sidebar/SettingsSidebar.tsx

@@ -1,139 +0,0 @@
-import { ArrowLeft, Palette, FileText, Terminal, Plug, Puzzle, Blocks, Network, Settings, ScrollText, Shield, Brain, MonitorCog, Bell, Wallet } from "lucide-react";
-import { useSidebar } from "../../hooks/useSidebar";
-import type { SettingsSection, ProjectSettingsSection } from "../../stores/sidebar";
-
-interface SettingsSidebarProps {
-  projectName: string;
-  onBack: () => void;
-}
-
-var SETTINGS_NAV = [
-  {
-    group: "",
-    items: [
-      { id: "appearance" as SettingsSection, label: "Appearance", icon: <Palette size={14} /> },
-      { id: "notifications" as SettingsSection, label: "Notifications", icon: <Bell size={14} /> },
-    ],
-  },
-  {
-    group: "CLAUDE",
-    items: [
-      { id: "claude" as SettingsSection, label: "Model & Prompts", icon: <FileText size={14} /> },
-      { id: "budget" as SettingsSection, label: "Budget", icon: <Wallet size={14} /> },
-      { id: "environment" as SettingsSection, label: "Environment", icon: <Terminal size={14} /> },
-      { id: "editor" as SettingsSection, label: "Editor", icon: <MonitorCog size={14} /> },
-    ],
-  },
-  {
-    group: "EXTENSIONS",
-    items: [
-      { id: "plugins" as SettingsSection, label: "Plugins", icon: <Blocks size={14} /> },
-      { id: "skills" as SettingsSection, label: "Skills", icon: <Puzzle size={14} /> },
-      { id: "mcp" as SettingsSection, label: "MCP Servers", icon: <Plug size={14} /> },
-      { id: "rules" as SettingsSection, label: "Rules", icon: <ScrollText size={14} /> },
-      { id: "memory" as SettingsSection, label: "Memory", icon: <Brain size={14} /> },
-    ],
-  },
-  {
-    group: "MESH",
-    items: [
-      { id: "nodes" as SettingsSection, label: "Nodes", icon: <Network size={14} /> },
-    ],
-  },
-];
-
-var PROJECT_SETTINGS_NAV = [
-  {
-    group: "",
-    items: [
-      { id: "general" as ProjectSettingsSection, label: "General", icon: <Settings size={14} /> },
-      { id: "notifications" as ProjectSettingsSection, label: "Notifications", icon: <Bell size={14} /> },
-      { id: "claude" as ProjectSettingsSection, label: "Claude", icon: <FileText size={14} /> },
-      { id: "environment" as ProjectSettingsSection, label: "Environment", icon: <Terminal size={14} /> },
-    ],
-  },
-  {
-    group: "EXTENSIONS",
-    items: [
-      { id: "plugins" as ProjectSettingsSection, label: "Plugins", icon: <Blocks size={14} /> },
-      { id: "skills" as ProjectSettingsSection, label: "Skills", icon: <Puzzle size={14} /> },
-      { id: "mcp" as ProjectSettingsSection, label: "MCP Servers", icon: <Plug size={14} /> },
-      { id: "rules" as ProjectSettingsSection, label: "Rules", icon: <ScrollText size={14} /> },
-      { id: "permissions" as ProjectSettingsSection, label: "Permissions", icon: <Shield size={14} /> },
-      { id: "memory" as ProjectSettingsSection, label: "Memory", icon: <Brain size={14} /> },
-    ],
-  },
-];
-
-export function SettingsSidebar({ projectName, onBack }: SettingsSidebarProps) {
-  var { activeView, setSettingsSection, setProjectSettingsSection } = useSidebar();
-  var isProjectSettings = activeView.type === "project-settings";
-  var activeSection = activeView.type === "settings"
-    ? activeView.section
-    : activeView.type === "project-settings"
-    ? activeView.section
-    : null;
-
-  var nav = isProjectSettings ? PROJECT_SETTINGS_NAV : SETTINGS_NAV;
-  var headerLabel = isProjectSettings ? "Project Settings" : "Settings";
-
-  function handleItemClick(id: string) {
-    if (isProjectSettings) {
-      setProjectSettingsSection(id as ProjectSettingsSection);
-    } else {
-      setSettingsSection(id as SettingsSection);
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full w-full overflow-hidden bg-base-200">
-      <div className="px-4 h-12 border-b border-base-300 flex-shrink-0 flex items-center">
-        <span className="text-[13px] font-mono font-bold text-base-content">{headerLabel}</span>
-      </div>
-
-      <div className="flex flex-col flex-1 overflow-y-auto min-h-0 py-2 pb-16">
-        {nav.map(function (group) {
-          return (
-            <div key={group.group || "ungrouped"} className="mb-2">
-              {group.group && (
-                <div className="px-4 pt-3 pb-1">
-                  <span className="text-[10px] font-bold tracking-wider uppercase text-base-content/40">
-                    {group.group}
-                  </span>
-                </div>
-              )}
-              {group.items.map(function (item) {
-                var isActive = activeSection === item.id;
-                return (
-                  <button
-                    key={item.id}
-                    onClick={function () { handleItemClick(item.id); }}
-                    className={
-                      "w-full flex items-center gap-2.5 px-4 py-2.5 sm:py-1.5 text-[13px] transition-colors duration-[100ms] text-left " +
-                      (isActive
-                        ? "bg-base-content/8 text-base-content font-medium"
-                        : "text-base-content/55 hover:bg-base-content/5 hover:text-base-content")
-                    }
-                  >
-                    {item.icon}
-                    {item.label}
-                  </button>
-                );
-              })}
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="border-t border-base-300 flex-shrink-0">
-        <button
-          onClick={onBack}
-          className="w-full flex items-center gap-2 px-4 py-3.5 sm:py-3 text-[12px] text-base-content/50 hover:text-base-content transition-colors duration-[100ms]"
-        >
-          <ArrowLeft size={13} />
-          Back to {projectName}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/client/components/sidebar/Sidebar.tsx

@@ -1,469 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar, BarChart3, Bookmark, Settings, Network } from "lucide-react";
-import { LatticeLogomark } from "../ui/LatticeLogomark";
-import type { SessionSummary, ServerMessage, SettingsDataMessage } from "#shared";
-import type { DateRange } from "./SessionList";
-import { useProjects } from "../../hooks/useProjects";
-import { useMesh } from "../../hooks/useMesh";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useSidebar } from "../../hooks/useSidebar";
-import { useSession } from "../../hooks/useSession";
-import { clearSession } from "../../stores/session";
-import { useOnline } from "../../hooks/useOnline";
-import { openTab, openSessionTab, closeTab, getWorkspaceStore } from "../../stores/workspace";
-import { getSidebarStore, goToAnalytics, openSettings } from "../../stores/sidebar";
-import { ProjectRail } from "./ProjectRail";
-import { SessionList } from "./SessionList";
-import { UserIsland } from "./UserIsland";
-import { UserMenu } from "./UserMenu";
-import { SearchFilter } from "./SearchFilter";
-import { ProjectDropdown } from "./ProjectDropdown";
-import { SettingsSidebar } from "./SettingsSidebar";
-
-type DatePreset = "all" | "today" | "yesterday" | "week" | "month" | "custom";
-
-var DATE_PRESET_LABELS: Record<DatePreset, string> = {
-  all: "All time",
-  today: "Today",
-  yesterday: "Yesterday",
-  week: "This week",
-  month: "This month",
-  custom: "Custom",
-};
-
-function computeDateRange(preset: DatePreset, customFrom?: string, customTo?: string): DateRange {
-  if (preset === "all") return {};
-  var now = new Date();
-  var todayStart = new Date(now);
-  todayStart.setHours(0, 0, 0, 0);
-
-  if (preset === "today") {
-    return { from: todayStart.getTime() };
-  }
-  if (preset === "yesterday") {
-    var yesterdayStart = new Date(todayStart);
-    yesterdayStart.setDate(yesterdayStart.getDate() - 1);
-    return { from: yesterdayStart.getTime(), to: todayStart.getTime() };
-  }
-  if (preset === "week") {
-    var weekStart = new Date(todayStart);
-    weekStart.setDate(weekStart.getDate() - weekStart.getDay());
-    return { from: weekStart.getTime() };
-  }
-  if (preset === "month") {
-    var monthStart = new Date(todayStart.getFullYear(), todayStart.getMonth(), 1);
-    return { from: monthStart.getTime() };
-  }
-  if (preset === "custom") {
-    var range: DateRange = {};
-    if (customFrom) {
-      range.from = new Date(customFrom + "T00:00:00").getTime();
-    }
-    if (customTo) {
-      var toDate = new Date(customTo + "T23:59:59");
-      range.to = toDate.getTime() + 999;
-    }
-    return range;
-  }
-  return {};
-}
-
-function DateRangeDropdown({ dateRange, onChange }: { dateRange: DateRange; onChange: (r: DateRange, preset: DatePreset) => void }) {
-  var [open, setOpen] = useState(false);
-  var [preset, setPreset] = useState<DatePreset>("all");
-  var [customFrom, setCustomFrom] = useState("");
-  var [customTo, setCustomTo] = useState("");
-  var dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(function () {
-    if (!open) return;
-    function dismiss(e: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", dismiss);
-    return function () { document.removeEventListener("mousedown", dismiss); };
-  }, [open]);
-
-  function handlePreset(p: DatePreset) {
-    setPreset(p);
-    if (p !== "custom") {
-      onChange(computeDateRange(p), p);
-      setOpen(false);
-    }
-  }
-
-  function handleCustomApply() {
-    onChange(computeDateRange("custom", customFrom, customTo), "custom");
-    setOpen(false);
-  }
-
-  var hasFilter = preset !== "all";
-
-  return (
-    <div ref={dropdownRef} className="relative">
-      <button
-        type="button"
-        onClick={function () { setOpen(function (v) { return !v; }); }}
-        className={"btn btn-ghost btn-xs btn-square " + (hasFilter ? "text-primary" : "text-base-content/40 hover:text-base-content")}
-        aria-label="Filter by date"
-        title={DATE_PRESET_LABELS[preset]}
-      >
-        <Calendar size={13} />
-      </button>
-      {open && (
-        <div className="absolute top-full right-0 mt-1 z-[9999] bg-base-300 border border-base-content/15 rounded-lg shadow-xl min-w-[180px] py-1">
-          {(["all", "today", "yesterday", "week", "month", "custom"] as DatePreset[]).map(function (p) {
-            return (
-              <button
-                key={p}
-                type="button"
-                onClick={function () { handlePreset(p); }}
-                className={
-                  "block w-full text-left px-3 py-1.5 text-[12px] transition-colors duration-75 " +
-                  (preset === p ? "text-primary bg-primary/10" : "text-base-content/70 hover:bg-base-content/5 hover:text-base-content")
-                }
-              >
-                {DATE_PRESET_LABELS[p]}
-              </button>
-            );
-          })}
-          {preset === "custom" && (
-            <div className="px-3 py-2 border-t border-base-content/10 flex flex-col gap-1.5">
-              <label className="text-[10px] text-base-content/40 uppercase tracking-wider">From</label>
-              <input
-                type="date"
-                value={customFrom}
-                onChange={function (e) { setCustomFrom(e.target.value); }}
-                className="h-7 px-2 bg-base-200 border border-base-content/15 rounded text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors [color-scheme:dark]"
-              />
-              <label className="text-[10px] text-base-content/40 uppercase tracking-wider">To</label>
-              <input
-                type="date"
-                value={customTo}
-                onChange={function (e) { setCustomTo(e.target.value); }}
-                className="h-7 px-2 bg-base-200 border border-base-content/15 rounded text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors [color-scheme:dark]"
-              />
-              <button
-                type="button"
-                onClick={handleCustomApply}
-                className="btn btn-xs btn-primary mt-1"
-              >
-                Apply
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function SectionLabel({ label, actions }: { label: string; actions?: React.ReactNode }) {
-  return (
-    <div className="px-4 pt-4 pb-2 flex items-center justify-between flex-shrink-0 select-none">
-      <h2 className="text-xs font-bold tracking-wider uppercase text-base-content/40">
-        {label}
-      </h2>
-      {actions && (
-        <div className="flex items-center gap-0.5">
-          {actions}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
-  var { projects, activeProject } = useProjects();
-  var { nodes } = useMesh();
-  var ws = useWebSocket();
-  var online = useOnline();
-  var sidebar = useSidebar();
-  var session = useSession();
-  var [sessionSearch, setSessionSearch] = useState<string>("");
-  var [sessionSearchOpen, setSessionSearchOpen] = useState<boolean>(false);
-  var [sessionDateRange, setSessionDateRange] = useState<DateRange>({});
-  var userIslandRef = useRef<HTMLElement | null>(null);
-  var projectHeaderRef = useRef<HTMLElement | null>(null);
-
-  var localNode = nodes.find(function (n) { return n.isLocal; });
-  var [configNodeName, setConfigNodeName] = useState("");
-
-  useEffect(function () {
-    function handleSettingsData(msg: ServerMessage) {
-      if (msg.type !== "settings:data") return;
-      var data = msg as SettingsDataMessage;
-      if (data.config.name) {
-        setConfigNodeName(data.config.name);
-      }
-    }
-    ws.subscribe("settings:data", handleSettingsData);
-    ws.send({ type: "settings:get" });
-    return function () {
-      ws.unsubscribe("settings:data", handleSettingsData);
-    };
-  }, []);
-
-  var localNodeName = localNode ? localNode.name : configNodeName;
-  var initialActivatedRef = useRef<boolean>(false);
-
-  useEffect(function () {
-    if (initialActivatedRef.current) return;
-    if (!sidebar.activeProjectSlug || !sidebar.activeSessionId) return;
-    if (!activeProject) return;
-    initialActivatedRef.current = true;
-    const wsState = getWorkspaceStore().state;
-    const alreadyHasTab = wsState.tabs.some(function (t) {
-      return t.type === "chat" && t.sessionId === sidebar.activeSessionId;
-    });
-    if (!alreadyHasTab) {
-      openSessionTab(sidebar.activeSessionId, sidebar.activeProjectSlug, "Session");
-    }
-    session.activateSession(sidebar.activeProjectSlug, sidebar.activeSessionId);
-  }, [sidebar.activeProjectSlug, sidebar.activeSessionId, activeProject]);
-
-  // Ctrl/Cmd+K is handled by the global CommandPalette
-
-  function handleSessionActivate(s: SessionSummary) {
-    if (activeProject) {
-      openSessionTab(s.id, activeProject.slug, s.title);
-      session.activateSession(activeProject.slug, s.id);
-    }
-    sidebar.closeMenus();
-    if (onSessionSelect) {
-      onSessionSelect();
-    }
-  }
-
-  function handleNewSession() {
-    if (!activeProject?.slug) {
-      return;
-    }
-    ws.send({ type: "session:create", projectSlug: activeProject.slug });
-  }
-
-  return (
-    <div className="flex flex-row h-full w-full overflow-hidden relative">
-      <ProjectRail
-        projects={projects}
-        nodes={nodes}
-        activeProjectSlug={sidebar.activeProjectSlug}
-        onSelectProject={sidebar.setActiveProjectSlug}
-        onDashboardClick={sidebar.goToDashboard}
-        isDashboardActive={sidebar.activeView.type === "dashboard"}
-        dimmed={sidebar.sidebarMode === "settings"}
-      />
-      <div className="flex flex-col flex-1 overflow-hidden min-h-0 bg-base-200 border-r border-base-300">
-        {sidebar.sidebarMode === "project" ? (
-          <>
-            {(sidebar.activeView.type === "dashboard" || (sidebar.activeView.type === "analytics" && !sidebar.activeProjectSlug)) ? (
-              <>
-                <div className="px-4 h-12 border-b border-base-300 flex-shrink-0 flex items-center gap-2">
-                  <LatticeLogomark size={18} />
-                  <span className="text-[13px] font-mono font-bold text-base-content/90">
-                    Lattice
-                  </span>
-                </div>
-                <div className="flex-1 overflow-auto px-4 py-3 pb-16">
-                  <div className="flex flex-col gap-0.5 mb-3">
-                    <button
-                      type="button"
-                      onClick={function () {
-                        var store = getWorkspaceStore();
-                        var state = store.state;
-                        var activePane = state.panes.find(function (p) { return p.id === state.activePaneId; });
-                        var activeTab = activePane ? state.tabs.find(function (t) { return t.id === activePane!.activeTabId; }) : null;
-                        if (activeTab && activeTab.id !== "chat") {
-                          closeTab(activeTab.id);
-                        }
-                      }}
-                      className="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
-                    >
-                      <LayoutDashboard size={12} />
-                      <span className="font-mono tracking-wide">Dashboard</span>
-                    </button>
-                    <button
-                      type="button"
-                      onClick={goToAnalytics}
-                      className="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
-                    >
-                      <BarChart3 size={12} />
-                      <span className="font-mono tracking-wide">Global Analytics</span>
-                    </button>
-                    <button
-                      type="button"
-                      onClick={function () { openSettings("nodes"); }}
-                      className="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
-                    >
-                      <Network size={12} />
-                      <span className="font-mono tracking-wide">Nodes</span>
-                    </button>
-                    <button
-                      type="button"
-                      onClick={function () { openSettings("appearance"); }}
-                      className="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
-                    >
-                      <Settings size={12} />
-                      <span className="font-mono tracking-wide">Settings</span>
-                    </button>
-                  </div>
-                  <SectionLabel label="Projects" />
-                  {projects.length === 0 && nodes.some(function (n) { return !n.isLocal && n.online; }) ? (
-                    <div className="flex items-center gap-2 text-[12px] text-base-content/25 px-4">
-                      <span className="w-1.5 h-1.5 rounded-full bg-base-content/30 animate-pulse flex-shrink-0" />
-                      Syncing remote projects...
-                    </div>
-                  ) : (
-                    <div className="text-[12px] text-base-content/25 px-4">
-                      Select a project from the rail to view sessions.
-                    </div>
-                  )}
-                </div>
-              </>
-            ) : (
-              <>
-                <button
-                  type="button"
-                  ref={function (el) { projectHeaderRef.current = el; }}
-                  onClick={sidebar.toggleProjectDropdown}
-                  aria-label="Switch project"
-                  aria-expanded={sidebar.projectDropdownOpen}
-                  className={"w-full px-4 border-b border-base-300 flex-shrink-0 flex items-center justify-between cursor-pointer hover:bg-base-300/30 transition-colors text-left " + (activeProject?.isRemote ? "h-14 py-2" : "h-12 py-2.5")}
-                >
-                  <div className="min-w-0">
-                    <div className="text-[13px] font-mono font-bold text-base-content/90 truncate">
-                      {activeProject?.title ?? (projects.length === 0 ? "Loading..." : "No Project")}
-                    </div>
-                    {activeProject?.isRemote && (
-                      <div className="text-[10px] text-base-content/30 font-mono">
-                        on {activeProject.nodeName}
-                      </div>
-                    )}
-                  </div>
-                  <ChevronDown size={14} className="text-base-content/30 flex-shrink-0" />
-                </button>
-
-                <button
-                  type="button"
-                  onClick={function () { sidebar.goToProjectDashboard(); }}
-                  className="flex items-center gap-2 mx-3 mt-2 px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
-                >
-                  <LayoutDashboard size={12} />
-                  <span className="font-mono tracking-wide">Dashboard</span>
-                </button>
-
-                <div className="flex flex-col gap-0.5 mx-3 mt-1">
-                  {[
-                    { type: "files" as const, icon: FolderOpen, label: "Files", localOnly: true },
-                    { type: "terminal" as const, icon: TerminalSquare, label: "Terminal", localOnly: true },
-                    { type: "notes" as const, icon: StickyNote, label: "Notes", localOnly: false },
-                  ].map(function (item) {
-                    var isDisabled = item.localOnly && activeProject?.isRemote;
-                    return (
-                      <button
-                        key={item.type}
-                        type="button"
-                        disabled={!!isDisabled}
-                        onClick={function () {
-                          if (isDisabled) return;
-                          openTab(item.type);
-                          var state = getSidebarStore().state;
-                          if (state.activeView.type !== "chat") {
-                            getSidebarStore().setState(function (s) {
-                              return { ...s, activeView: { type: "chat" } };
-                            });
-                          }
-                        }}
-                        className={
-                          "flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] transition-colors " +
-                          (isDisabled
-                            ? "text-base-content/15 cursor-not-allowed"
-                            : "text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30")
-                        }
-                        title={isDisabled ? "Not available for remote projects" : undefined}
-                      >
-                        <item.icon size={12} />
-                        <span className="font-mono tracking-wide">{item.label}</span>
-                      </button>
-                    );
-                  })}
-                  <button
-                    type="button"
-                    onClick={function () { openTab("analytics"); }}
-                    className="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
-                  >
-                    <BarChart3 size={12} />
-                    <span className="font-mono tracking-wide">Analytics</span>
-                  </button>
-                </div>
-
-                <SectionLabel
-                  label="Sessions"
-                  actions={
-                    <>
-                      <button onClick={function () { setSessionSearchOpen(function (v) { return !v; }); }} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="Search sessions">
-                        <Search size={13} />
-                      </button>
-                      <DateRangeDropdown
-                        dateRange={sessionDateRange}
-                        onChange={function (r) { setSessionDateRange(r); }}
-                      />
-                      <button onClick={handleNewSession} disabled={!online} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="New session">
-                        <Plus size={13} />
-                      </button>
-                    </>
-                  }
-                />
-                {sessionSearchOpen && (
-                  <SearchFilter
-                    value={sessionSearch}
-                    onChange={setSessionSearch}
-                    onClose={function () { setSessionSearchOpen(false); setSessionSearch(""); }}
-                    placeholder="Filter sessions..."
-                  />
-                )}
-                <SessionList
-                  projectSlug={activeProject?.slug ?? null}
-                  activeSessionId={session.activeSessionId}
-                  onSessionActivate={handleSessionActivate}
-                  onSessionDeactivate={clearSession}
-                  filter={sessionSearch}
-                  dateRange={sessionDateRange}
-                />
-              </>
-            )}
-
-          </>
-        ) : (
-          <SettingsSidebar
-            projectName={activeProject?.title ?? "Dashboard"}
-            onBack={sidebar.exitSettings}
-          />
-        )}
-      </div>
-
-      <div
-        ref={function (el) { userIslandRef.current = el; }}
-        className="absolute bottom-2 left-2 right-2 z-10 bg-base-300 border border-base-content/15 rounded-xl shadow-lg"
-      >
-        <UserIsland nodeName={localNodeName} onClick={sidebar.toggleUserMenu} />
-      </div>
-
-      {sidebar.userMenuOpen && (
-        <UserMenu
-          anchorRef={userIslandRef}
-          onClose={sidebar.closeMenus}
-          onOpenNodeSettings={sidebar.openNodeSettings}
-        />
-      )}
-      {sidebar.projectDropdownOpen && (
-        <ProjectDropdown
-          anchorRef={projectHeaderRef}
-          onClose={sidebar.closeMenus}
-        />
-      )}
-    </div>
-  );
-}