From 74336037bf518d8921e82bfc6fc6e48caf754522 Mon Sep 17 00:00:00 2001
From: Haileyesus <something@gmail.com>
Date: Tue, 7 Apr 2026 19:07:27 +0300
Subject: [PATCH] refactor: implement SidebarCollapsed component for improved
 collapsed view handling

---
 .../refactored/sidebar/view/Sidebar.tsx       | 20 ++---
 .../sidebar/view/SidebarCollapsed.tsx         | 75 +++++++++++++++++++
 2 files changed, 82 insertions(+), 13 deletions(-)
 create mode 100644 src/components/refactored/sidebar/view/SidebarCollapsed.tsx

diff --git a/src/components/refactored/sidebar/view/Sidebar.tsx b/src/components/refactored/sidebar/view/Sidebar.tsx
index 4691a78d..171089e9 100644
--- a/src/components/refactored/sidebar/view/Sidebar.tsx
+++ b/src/components/refactored/sidebar/view/Sidebar.tsx
@@ -1,4 +1,3 @@
-import { PanelRightOpen } from 'lucide-react';
 import SidebarFooter from './SidebarFooter';
 import { useSidebarSettings } from '@/components/refactored/sidebar/hooks/useSidebarSettings';
 import { useSidebarModals } from '@/components/refactored/sidebar/hooks/useSidebarModals';
@@ -6,8 +5,8 @@ import { useWorkspaces } from '@/components/refactored/sidebar/hooks/useWorkspac
 import SidebarHeader from '@/components/refactored/sidebar/view/SidebarHeader';
 import { SidebarDeleteModals } from '@/components/refactored/sidebar/view/SidebarDeleteModals';
 import { SidebarWorkspaceList } from '@/components/refactored/sidebar/view/SidebarWorkspaceList';
+import { SidebarCollapsed } from '@/components/refactored/sidebar/view/SidebarCollapsed';
 import { cn } from '@/lib/utils';
-import { Button } from '@/shared/view/ui';
 import ProjectCreationWizard from '@/components/project-creation-wizard';
 import VersionUpgradeModal from '@/components/version-upgrade/view';
 import Settings from '@/components/settings/view/Settings';
@@ -149,18 +148,13 @@ export function Sidebar() {
           )}
         </aside>
 
-        {/* Collapsed view handle - Only show on desktop since mobile hides it completely behind a toggle usually, but let's keep it consistent or standard. */}
         {isCollapsed && (
-          <aside className="fixed inset-y-0 left-0 z-40 flex h-full flex-col items-center border-r border-border bg-background/80 px-2 py-4 md:relative">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-9 w-9 rounded-lg p-0 text-muted-foreground hover:bg-accent/80 hover:text-foreground"
-              onClick={() => setCollapsed(false)}
-              title="Show Sidebar"
-            >
-              <PanelRightOpen className="h-4 w-4" />
-            </Button>
+          <aside className="fixed inset-y-0 left-0 z-40 h-full border-r border-border md:relative">
+            <SidebarCollapsed
+              onExpand={() => setCollapsed(false)}
+              onShowSettings={openSettingsModal}
+              onShowVersionModal={openVersionModal}
+            />
           </aside>
         )}
       </>
diff --git a/src/components/refactored/sidebar/view/SidebarCollapsed.tsx b/src/components/refactored/sidebar/view/SidebarCollapsed.tsx
new file mode 100644
index 00000000..16d7ad7a
--- /dev/null
+++ b/src/components/refactored/sidebar/view/SidebarCollapsed.tsx
@@ -0,0 +1,75 @@
+import { PanelLeftOpen, Settings, Sparkles } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useVersionCheck } from '@/hooks/useVersionCheck';
+
+const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';
+
+function DiscordIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  );
+}
+
+type SidebarCollapsedProps = {
+  onExpand: () => void;
+  onShowSettings: () => void;
+  onShowVersionModal: () => void;
+};
+
+export function SidebarCollapsed({
+  onExpand,
+  onShowSettings,
+  onShowVersionModal,
+}: SidebarCollapsedProps) {
+  const { t } = useTranslation(['sidebar', 'common']);
+  const { updateAvailable } = useVersionCheck('siteboon', 'claudecodeui');
+
+  return (
+    <div className="flex h-full w-12 flex-col items-center gap-1 bg-background/80 py-3 backdrop-blur-sm">
+      <button
+        onClick={onExpand}
+        className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
+        aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
+        title={t('common:versionUpdate.ariaLabels.showSidebar')}
+      >
+        <PanelLeftOpen className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+      </button>
+
+      <div className="nav-divider my-1 w-6" />
+
+      <button
+        onClick={onShowSettings}
+        className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
+        aria-label={t('actions.settings')}
+        title={t('actions.settings')}
+      >
+        <Settings className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+      </button>
+
+      <a
+        href={DISCORD_INVITE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
+        aria-label={t('actions.joinCommunity')}
+        title={t('actions.joinCommunity')}
+      >
+        <DiscordIcon className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+      </a>
+
+      {updateAvailable && (
+        <button
+          onClick={onShowVersionModal}
+          className="relative flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
+          aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
+          title={t('common:versionUpdate.ariaLabels.updateAvailable')}
+        >
+          <Sparkles className="h-4 w-4 text-blue-500" />
+          <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
+        </button>
+      )}
+    </div>
+  );
+}