From 9b1f764ab868701358eec5af1813cf91acb0a37b Mon Sep 17 00:00:00 2001
From: zhenyi <434836402@qq.com>
Date: Sat, 30 May 2026 15:07:42 +0800
Subject: [PATCH] feat: update shell components (rail, settings-sidebar,
 workspace-sidebar)

---
 src/components/shell/rail.tsx              | 34 ++++++-------
 src/components/shell/settings-sidebar.tsx  |  6 +--
 src/components/shell/workspace-sidebar.tsx | 58 +++++++++++-----------
 3 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/components/shell/rail.tsx b/src/components/shell/rail.tsx
index ccf62cd..ad09a47 100644
--- a/src/components/shell/rail.tsx
+++ b/src/components/shell/rail.tsx
@@ -18,21 +18,21 @@ function WorkspaceIcon({
   return (
     <Link
       aria-label={workspace.name}
-      className="group relative grid size-11 place-items-center"
+      className="group relative grid size-10 place-items-center"
       title={workspace.name}
       to={`/${workspace.name}/repos`}
     >
       <span
         className={cn(
-          "absolute -left-3 h-2 w-1 rounded-r-full bg-foreground opacity-0 transition-all group-hover:h-5 group-hover:opacity-100",
-          active && "h-8 opacity-100",
+          "absolute -left-[11px] h-2 w-[3px] rounded-r-full bg-foreground opacity-0 transition-all group-hover:h-4 group-hover:opacity-60",
+          active && "h-6 opacity-100",
         )}
       />
       <span
         className={cn(
-          "grid size-10 place-items-center overflow-hidden rounded-2xl bg-gradient-to-br text-sm font-semibold text-white shadow-sm ring-1 ring-black/5 transition-all group-hover:rounded-xl",
+          "grid size-9 place-items-center overflow-hidden rounded-xl bg-gradient-to-br text-[12px] font-bold text-white ring-1 ring-black/[0.06] transition-all",
           workspaceColor(workspace.name),
-          active && "rounded-xl ring-2 ring-primary/30",
+          active && "rounded-lg ring-2 ring-primary/20",
         )}
       >
         {workspace.avatar_url ? (
@@ -61,7 +61,7 @@ function RailButton({
   return (
     <Link
       aria-label={label}
-      className="inline-flex size-10 shrink-0 items-center justify-center rounded-2xl border border-border bg-card text-muted-foreground shadow-sm transition-all hover:rounded-xl hover:bg-accent hover:text-primary"
+      className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground transition-all hover:bg-accent hover:text-foreground"
       title={label}
       to={to}
     >
@@ -72,10 +72,10 @@ function RailButton({
 
 function WorkspaceSkeleton() {
   return (
-    <div className="grid gap-3">
+    <div className="grid gap-2">
       {Array.from({ length: 4 }).map((_, index) => (
         <div
-          className="size-10 animate-pulse rounded-2xl bg-muted"
+          className="size-9 animate-pulse rounded-xl bg-muted"
           key={index}
         />
       ))}
@@ -95,16 +95,16 @@ export function WorkspaceRail() {
   });
 
   return (
-    <aside className="flex h-svh w-[72px] shrink-0 flex-col items-center bg-muted py-4">
+    <aside className="flex h-svh w-[72px] shrink-0 flex-col items-center border-r border-border bg-background py-5">
       <RailButton label="Home" to="/">
-        <Home className="size-5" />
+        <Home className="size-[18px]" />
       </RailButton>
 
-      <div className="my-4 h-px w-8 bg-border" />
+      <div className="my-3 h-px w-7 bg-border" />
 
       <nav
         aria-label="Workspaces"
-        className="flex min-h-0 flex-1 flex-col items-center gap-3 overflow-y-auto overscroll-contain px-3"
+        className="flex min-h-0 flex-1 flex-col items-center gap-2.5 overflow-y-auto overscroll-contain px-2"
       >
         {isLoading ? (
           <WorkspaceSkeleton />
@@ -121,18 +121,18 @@ export function WorkspaceRail() {
         <CreateWorkspaceDialog>
           <Button
             aria-label="Create workspace"
-            className="size-10 rounded-2xl border-border bg-card text-muted-foreground shadow-sm transition-all hover:rounded-xl hover:bg-accent hover:text-primary"
+            className="size-9 rounded-xl border-border bg-card text-muted-foreground transition-all hover:bg-accent hover:text-foreground"
             size="icon"
             variant="outline"
           >
-            <Plus className="size-5" />
+            <Plus className="size-[18px]" />
           </Button>
         </CreateWorkspaceDialog>
       </nav>
 
-      <div className="mt-4">
+      <div className="mt-3">
         <RailButton label="Settings" to="/settings">
-          <Settings className="size-5" />
+          <Settings className="size-[18px]" />
         </RailButton>
       </div>
     </aside>
@@ -146,4 +146,4 @@ export default function NavShell({ children }: { children?: React.ReactNode }) {
       <div className="min-w-0 flex-1">{children}</div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/shell/settings-sidebar.tsx b/src/components/shell/settings-sidebar.tsx
index c2a3dea..3926474 100644
--- a/src/components/shell/settings-sidebar.tsx
+++ b/src/components/shell/settings-sidebar.tsx
@@ -73,8 +73,8 @@ function SettingsSidebar() {
   ];
 
   return (
-    <aside className="flex h-full w-[248px] shrink-0 flex-col overflow-hidden bg-card">
-      <header className="flex h-14 shrink-0 items-center gap-3 border-b border-border px-4 shadow-sm">
+    <aside className="flex h-full w-[240px] shrink-0 flex-col overflow-hidden border-r border-border bg-sidebar">
+      <header className="flex h-[48px] shrink-0 items-center gap-3 border-b border-border px-4">
         <SettingsAvatar />
         <button className="flex min-w-0 flex-1 items-center gap-2 text-left text-base font-semibold text-foreground">
           <span className="truncate">Settings</span>
@@ -141,7 +141,7 @@ export function SettingsShell() {
       <div className="flex h-full overflow-hidden">
         <SettingsSidebar />
         <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-background">
-          <div className="flex h-14 shrink-0 items-center border-b border-border px-6" />
+          <div className="flex h-[48px] shrink-0 items-center border-b border-border px-6" />
           <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
             <Outlet />
           </div>
diff --git a/src/components/shell/workspace-sidebar.tsx b/src/components/shell/workspace-sidebar.tsx
index 0cd0734..bde258b 100644
--- a/src/components/shell/workspace-sidebar.tsx
+++ b/src/components/shell/workspace-sidebar.tsx
@@ -101,24 +101,24 @@ function ChannelLink({
   return (
     <Link
       className={cn(
-        "flex h-[30px] items-center gap-2 rounded-md px-2 text-[13px] transition-all duration-150",
+        "group flex h-[32px] items-center gap-2 rounded-lg px-2.5 text-[13px] transition-all duration-150",
         active
-          ? "bg-primary/[0.06] font-medium text-foreground"
-          : "text-muted-foreground/70 hover:bg-accent/[0.35] hover:text-foreground",
+          ? "bg-primary/[0.08] font-semibold text-foreground shadow-[inset_0_0_0_1px_rgba(var(--color-primary),0.06)]"
+          : "text-muted-foreground/70 hover:bg-accent/50 hover:text-foreground",
       )}
       to={to}
     >
       <span
         className={cn(
           "shrink-0 transition-colors duration-150",
-          active ? "text-primary/60" : "text-muted-foreground/40",
+          active ? "text-primary/70" : "text-muted-foreground/50 group-hover:text-muted-foreground/70",
         )}
       >
         <Hash className="size-[15px]" />
       </span>
       <span className="min-w-0 flex-1 truncate">{channel.name}</span>
       {channel.is_private && (
-        <Lock className="size-3 shrink-0 text-muted-foreground/25" />
+        <Lock className="size-3 shrink-0 text-muted-foreground/30" />
       )}
     </Link>
   );
@@ -144,7 +144,7 @@ function ChannelCategoryGroup({
   return (
     <div className="mb-0.5">
       <button
-        className="flex h-7 w-full items-center gap-1.5 rounded-md px-1.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-muted-foreground/35 transition-colors hover:text-muted-foreground/65"
+        className="flex h-7 w-full items-center gap-1.5 rounded-md px-1.5 text-[11px] font-semibold uppercase tracking-[0.06em] text-muted-foreground/50 transition-colors hover:text-muted-foreground/80 hover:bg-accent/40"
         onClick={() => setOpen((v) => !v)}
         type="button"
       >
@@ -155,7 +155,7 @@ function ChannelCategoryGroup({
           )}
         />
         <span className="flex-1 truncate text-left">{name}</span>
-        <span className="text-[10px] tabular-nums text-muted-foreground/25">
+        <span className="text-[10px] tabular-nums text-muted-foreground/40">
           {channels.length}
         </span>
       </button>
@@ -252,9 +252,9 @@ function WorkspaceSidebar() {
     location.pathname.startsWith(`/${projectName}/chat/`);
 
   return (
-    <aside className="flex h-full w-[252px] shrink-0 flex-col overflow-hidden border-r border-border/30 bg-card">
+    <aside className="flex h-full w-[240px] shrink-0 flex-col overflow-hidden border-r border-border bg-sidebar">
       {/* Header */}
-      <header className="flex h-[52px] shrink-0 items-center gap-2.5 border-b border-border/40 px-4">
+      <header className="flex h-[48px] shrink-0 items-center gap-2.5 border-b border-border px-4">
         <WorkspaceAvatar workspace={currentWorkspace} />
         <button className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
           <span className="truncate text-sm font-semibold text-foreground">
@@ -279,8 +279,8 @@ function WorkspaceSidebar() {
         {showChannel ? (
           <section className="mb-5">
             {/* Channel list header */}
-            <div className="mb-1 flex items-center justify-between px-1.5">
-              <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/35">
+            <div className="mb-2 flex items-center justify-between px-1.5">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/50">
                 Channels
               </span>
             </div>
@@ -315,7 +315,7 @@ function WorkspaceSidebar() {
               onCreated={refreshChannels}
               workspaceId={workspaceId}
             >
-              <div className="mt-1 flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-md px-2 text-[13px] text-muted-foreground/40 transition-all duration-150 hover:bg-accent/[0.35] hover:text-muted-foreground/70">
+              <div className="mt-1.5 flex h-[32px] w-full cursor-pointer items-center gap-2 rounded-md px-2 text-[13px] text-muted-foreground/60 transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground">
                 <Plus className="size-[15px] shrink-0" />
                 <span>Add channel</span>
               </div>
@@ -414,62 +414,62 @@ function TopBar() {
   const repoName = isRepo ? segments[2] : null;
 
   return (
-    <header className="flex h-[52px] shrink-0 items-center justify-between border-b border-border/40 bg-background/70 px-5 backdrop-blur-sm">
-      <div className="flex min-w-0 items-center gap-2 text-sm">
+    <header className="flex h-[44px] shrink-0 items-center justify-between border-b border-border bg-background px-5">
+      <div className="flex min-w-0 items-center gap-1.5 text-[13px]">
         <Link
-          className="shrink-0 text-muted-foreground/50 transition-colors hover:text-foreground"
+          className="shrink-0 text-muted-foreground/40 transition-colors hover:text-foreground"
           to="/"
         >
-          <Home className="size-[18px]" />
+          <Home className="size-[16px]" />
         </Link>
-        <span className="shrink-0 text-muted-foreground/20">/</span>
+        <span className="shrink-0 text-muted-foreground/15">/</span>
         <Link
-          className="shrink-0 truncate text-muted-foreground/60 transition-colors hover:text-foreground"
+          className="shrink-0 truncate text-muted-foreground/50 transition-colors hover:text-foreground"
           to={`/${projectName}/repos`}
         >
           {projectName}
         </Link>
         {repoName && (
           <>
-            <span className="shrink-0 text-muted-foreground/20">/</span>
-            <span className="shrink-0 truncate text-foreground/50">
+            <span className="shrink-0 text-muted-foreground/15">/</span>
+            <span className="shrink-0 truncate text-muted-foreground/40">
               {repoName}
             </span>
           </>
         )}
-        <span className="shrink-0 text-muted-foreground/20">/</span>
+        <span className="shrink-0 text-muted-foreground/15">/</span>
         <span className="shrink-0 font-semibold text-foreground">
           {title}
         </span>
       </div>
 
-      <div className="flex items-center gap-0.5 text-muted-foreground/40">
+      <div className="flex items-center gap-1 text-muted-foreground/30">
         <CommandPalette />
         <button
           className={cn(
-            "grid size-8 place-items-center rounded-lg transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground",
+            "grid size-8 place-items-center rounded-xl transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground/70",
             panel.showSearch && "bg-accent/50 text-foreground",
           )}
           onClick={panel.toggleSearch}
           title="Search"
         >
-          <Search className="size-[15px]" />
+          <Search className="size-[14px]" />
         </button>
         <button
           className={cn(
-            "grid size-8 place-items-center rounded-lg transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground",
+            "grid size-8 place-items-center rounded-xl transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground/70",
             panel.showMembers && "bg-accent/50 text-foreground",
           )}
           onClick={panel.toggleMembers}
           title="Members"
         >
-          <Users className="size-[15px]" />
+          <Users className="size-[14px]" />
         </button>
         <button
-          className="grid size-8 place-items-center rounded-lg transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground"
+          className="grid size-8 place-items-center rounded-xl transition-all duration-150 hover:bg-accent/50 hover:text-muted-foreground/70"
           title="Notifications"
         >
-          <Bell className="size-[15px]" />
+          <Bell className="size-[14px]" />
         </button>
       </div>
     </header>
@@ -524,7 +524,7 @@ function MembersPanel() {
           <div className="space-y-[1px]">
             {panel.members.map((member) => (
               <div
-                className="flex items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors hover:bg-accent/[0.03]"
+                className="flex items-center gap-2.5 rounded-xl px-3 py-2 transition-colors hover:bg-accent/[0.04]"
                 key={member.id}
               >
                 <span className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5 text-xs font-semibold text-muted-foreground/60">