From e5d8629ba3117562b6d2e88f116edc75b52a91f9 Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Tue, 11 Nov 2025 22:27:25 +0800
Subject: [PATCH] feat(ui): make sidebar a draggable title bar and opt out
 buttons from drag region (#24)

---
 src/renderer/src/components/ui/sidebar.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/ui/sidebar.tsx b/src/renderer/src/components/ui/sidebar.tsx
index e447492..7972159 100644
--- a/src/renderer/src/components/ui/sidebar.tsx
+++ b/src/renderer/src/components/ui/sidebar.tsx
@@ -11,6 +11,7 @@ import { type LanguageCode, languageList, normalizeLanguageCode } from '@shared/
 import { useSetAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
+import '../../assets/title-bar.css'
 import MingcuteCheckCircleFill from '~icons/mingcute/check-circle-fill'
 import MingcuteCheckCircleLine from '~icons/mingcute/check-circle-line'
 import MingcuteDownload3Fill from '~icons/mingcute/download-3-fill'
@@ -107,7 +108,7 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
               variant="ghost"
               size="icon"
               onClick={() => onPageChange(item.id)}
-              className={`w-12 h-12 ${isActive ? 'bg-primary/10' : ''}`}
+              className={`no-drag w-12 h-12 ${isActive ? 'bg-primary/10' : ''}`}
             >
               <IconComponent className={`h-5! w-5! ${isActive ? 'text-primary' : ''}`} />
             </Button>
@@ -126,9 +127,9 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
   }
 
   return (
-    <aside className="w-20 max-w-20 min-w-20 border-r border-border/60 bg-background/77 flex flex-col items-center py-4 gap-2">
+    <aside className="drag-region w-20 max-w-20 min-w-20 border-r border-border/60 bg-background/77 flex flex-col items-center py-4 gap-2">
       {/* App Logo */}
-      <div className="flex flex-col items-center gap-1 py-4 mb-1">
+      <div className="flex flex-col items-center gap-1 py-4 mt-2">
         <div className="w-12 h-12 flex items-center justify-center">
           <img src="./app-icon.png" alt="VidBee" className="w-10 h-10" />
         </div>
@@ -148,7 +149,7 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
           <Tooltip>
             <TooltipTrigger asChild>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="w-12 h-12">
+                <Button variant="ghost" size="icon" className="no-drag w-12 h-12">
                   <MingcuteGlobeLine className="h-5! w-5!" />
                 </Button>
               </DropdownMenuTrigger>
@@ -192,7 +193,7 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
                   variant="ghost"
                   size="icon"
                   onClick={() => onPageChange(item.id)}
-                  className={`w-12 h-12 ${isActive ? 'bg-primary/10' : ''}`}
+                  className={`no-drag w-12 h-12 ${isActive ? 'bg-primary/10' : ''}`}
                 >
                   <IconComponent className={`h-5! w-5! ${isActive ? 'text-primary' : ''}`} />
                 </Button>