Skip to content

Commit 3a684ea

Browse files
Che-ZhuChe-Zhu
authored
feat(ui): refine sidebars, terminal tabs, and home page (#121)
* feat(ui): update primary sidebar to persistent collapsed state - Remove hover expansion interaction and text labels - Replace 'Home' icon with 'LayoutGrid' for better semantic meaning - Standardize sidebar width to w-12 * feat(ui): refactor project sidebar toggle and style - Delete unused project-sidebar.tsx - Relocate toggle button to vertical center of right border - Style toggle button as vertical rectangle (h-10 w-4) - Fully collapse sidebar to 0 width with no border * feat(ui): align terminal toolbar height with sidebars - Increase terminal toolbar height from h-9 to h-12 (48px) - Ensure visual consistency across the top header row * feat(ui): redesign terminal tabs to VS Code style - Use full-height tabs with sharp edges - Add top accent border for active tab - Remove gaps and rounded corners - Update colors for seamless integration with terminal background * feat(home): add beta badge to landing page title - Add 'Beta' badge next to the main 'Fulling' heading - Style badge with blue border and text - Position badge relative to the title with absolute positioning
1 parent 2a901dd commit 3a684ea

5 files changed

Lines changed: 47 additions & 202 deletions

File tree

‎components/home-page.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,14 @@ export function HomePage() {
100100
height={80}
101101
className="w-16 h-16 md:w-20 md:h-20"
102102
/>
103-
<h1 className="md:text-6xl lg:text-8xl font-bold bg-linear-to-r from-foreground to-muted-foreground bg-clip-text leading-normal text-transparent">
104-
Fulling
105-
</h1>
103+
<div className="relative">
104+
<h1 className="md:text-6xl lg:text-8xl font-bold bg-linear-to-r from-foreground to-muted-foreground bg-clip-text leading-normal text-transparent">
105+
Fulling
106+
</h1>
107+
<span className="absolute top-2 -right-10 md:-right-14 text-blue-500 border border-blue-500 rounded px-1.5 py-0.5 text-xs md:text-sm font-medium tracking-wide">
108+
Beta
109+
</span>
110+
</div>
106111
</div>
107112

108113
{/* Subtitle and Description */}

‎components/sidebars/primary-sidebar.tsx‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useState } from 'react';
44
import { useQuery } from '@tanstack/react-query';
5-
import { Circle, FolderOpen, GitBranch, Home, Plus, Settings } from 'lucide-react';
5+
import { Circle, FolderOpen, GitBranch, LayoutGrid, Plus, Settings } from 'lucide-react';
66
import Link from 'next/link';
77

88
import CreateProjectDialog from '@/components/dialog/create-project-dialog';
@@ -37,45 +37,34 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
3737
staleTime: 4000, // Data is fresh for 4 seconds
3838
retry: 2,
3939
});
40-
const [isExpanded, setIsExpanded] = useState(false);
4140
const [showSettings, setShowSettings] = useState(false);
4241
const [showCreateProject, setShowCreateProject] = useState(false);
4342

4443
return (
4544
<div
46-
className={cn(
47-
'bg-sidebar-background border-r border-sidebar-border flex flex-col transition-all duration-200',
48-
isExpanded ? 'w-52' : 'w-12'
49-
)}
50-
onMouseEnter={() => setIsExpanded(true)}
51-
onMouseLeave={() => setIsExpanded(false)}
45+
className="bg-sidebar-background border-r border-sidebar-border flex flex-col w-12 transition-all duration-200"
5246
>
5347
{/* Header */}
54-
<div className="h-12 flex items-center justify-center border-b border-sidebar-border">
48+
<div className="h-12 flex items-center justify-center border-b border-border">
5549
<FolderOpen className="h-5 w-5 text-muted-foreground" />
56-
{isExpanded && <span className="ml-2 text-sm font-medium text-foreground">Projects</span>}
5750
</div>
5851

5952
{/* Navigation Items */}
6053
<div className="flex-1 py-2 overflow-y-auto">
6154
{/* Home Link */}
6255
<Link
6356
href="/projects"
64-
className="group flex items-center h-8 px-3 hover:bg-sidebar-accent/10 transition-colors"
57+
className="group flex items-center justify-center h-8 px-3 hover:bg-sidebar-accent/10 transition-colors"
6558
>
66-
<Home className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
67-
{isExpanded && (
68-
<span className="ml-3 text-sm text-foreground truncate">All Projects</span>
69-
)}
59+
<LayoutGrid className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
7060
</Link>
7161

7262
{/* New Project */}
7363
<button
7464
onClick={() => setShowCreateProject(true)}
75-
className="group flex items-center h-8 px-3 hover:bg-sidebar-accent transition-colors mb-2 w-full"
65+
className="group flex items-center justify-center h-8 px-3 hover:bg-sidebar-accent transition-colors mb-2 w-full"
7666
>
7767
<Plus className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
78-
{isExpanded && <span className="ml-3 text-sm text-foreground truncate">New Project</span>}
7968
</button>
8069

8170
<div className="border-t border-border my-2" />
@@ -87,20 +76,17 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
8776
key={project.id}
8877
href={`/projects/${project.id}`}
8978
className={cn(
90-
'group flex items-center h-8 px-3 hover:bg-sidebar-accent transition-colors',
79+
'group flex items-center justify-center h-8 px-3 hover:bg-sidebar-accent transition-colors',
9180
currentProjectId === project.id && 'bg-sidebar-accent'
9281
)}
9382
>
94-
<div className="flex items-center shrink-0">
83+
<div className="flex items-center justify-center shrink-0">
9584
<Circle
9685
className={cn('h-2 w-2 mr-2', getStatusTextClasses(project.status))}
9786
fill="currentColor"
9887
/>
9988
<GitBranch className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground transition-colors" />
10089
</div>
101-
{isExpanded && (
102-
<span className="ml-3 text-sm text-foreground truncate">{project.name}</span>
103-
)}
10490
</Link>
10591
))}
10692
</div>
@@ -110,10 +96,9 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
11096
<div className="p-2">
11197
<button
11298
onClick={() => setShowSettings(true)}
113-
className="group flex items-center h-8 px-2 hover:bg-sidebar-accent rounded transition-colors w-full"
99+
className="group flex items-center justify-center h-8 px-2 hover:bg-sidebar-accent rounded transition-colors w-full"
114100
>
115101
<Settings className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
116-
{isExpanded && <span className="ml-3 text-sm text-foreground">Settings</span>}
117102
</button>
118103
</div>
119104

‎components/sidebars/project-sidebar-new.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,21 +68,23 @@ export default function ProjectSidebar({ projectId }: ProjectSidebarProps) {
6868
return (
6969
<div
7070
className={cn(
71-
'bg-sidebar-project-background border-r border-border flex flex-col transition-all duration-200',
72-
isCollapsed ? 'w-10' : 'w-72'
71+
'bg-sidebar-project-background flex flex-col transition-all duration-200 relative',
72+
isCollapsed ? 'w-0' : 'w-72 border-r border-border'
7373
)}
7474
>
75+
{/* Toggle Button */}
76+
<button
77+
onClick={() => setIsCollapsed(!isCollapsed)}
78+
className="absolute -right-2 top-1/2 -translate-y-1/2 z-20 h-10 w-4 rounded-md border border-border bg-sidebar-project-background flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors shadow-sm"
79+
>
80+
{isCollapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
81+
</button>
82+
7583
{/* Header */}
76-
<div className="h-12 flex items-center justify-between px-3 border-b border-border">
84+
<div className="h-12 flex items-center px-3 border-b border-border min-w-0 overflow-hidden">
7785
{!isCollapsed && (
78-
<span className="text-sm font-medium text-foreground">Project {project?.name ?? 'Loading...'}</span>
86+
<span className="text-sm font-medium text-foreground truncate">Project {project?.name ?? 'Loading...'}</span>
7987
)}
80-
<button
81-
onClick={() => setIsCollapsed(!isCollapsed)}
82-
className="text-muted-foreground hover:text-foreground transition-colors"
83-
>
84-
{isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
85-
</button>
8688
</div>
8789

8890
{!isCollapsed && (

‎components/sidebars/project-sidebar.tsx‎

Lines changed: 0 additions & 155 deletions
This file was deleted.

‎components/terminal/terminal-toolbar.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -101,41 +101,49 @@ export function TerminalToolbar({
101101

102102
return (
103103
<>
104-
<div className="h-9 bg-[#2d2d30] border-b border-[#3e3e42] flex items-center justify-between px-2">
104+
<div className="h-12 bg-[#2d2d30] border-b border-[#3e3e42] flex items-center justify-between">
105105
{/* Terminal Tabs */}
106-
<div className="flex items-center gap-1 flex-1 min-w-0">
106+
<div className="flex items-center flex-1 min-w-0 h-full overflow-x-auto overflow-y-hidden">
107107
{tabs.map((tab) => (
108108
<div
109109
key={tab.id}
110110
className={cn(
111-
'flex items-center gap-1 px-2 py-1 rounded text-xs cursor-pointer transition-colors',
111+
'flex items-center gap-2 px-4 h-full text-xs cursor-pointer transition-colors border-r border-[#3e3e42] relative group min-w-[120px] max-w-[200px]',
112112
activeTabId === tab.id
113113
? 'bg-[#1e1e1e] text-white'
114-
: 'text-gray-400 hover:bg-[#37373d]'
114+
: 'bg-[#2d2d30] text-[#969696] hover:bg-[#2d2d30] hover:text-white'
115115
)}
116116
onClick={() => onTabSelect(tab.id)}
117117
>
118-
<TerminalIcon className="h-3 w-3" />
119-
<span className="truncate max-w-[100px]">{tab.name}</span>
118+
{/* Top Accent Line for Active Tab */}
119+
{activeTabId === tab.id && (
120+
<div className="absolute top-0 left-0 right-0 h-[2px] bg-[#007fd4]" />
121+
)}
122+
123+
<TerminalIcon className={cn("h-3.5 w-3.5 shrink-0", activeTabId === tab.id ? "text-white" : "text-[#007fd4]")} />
124+
<span className="truncate flex-1">{tab.name}</span>
120125
{tabs.length > 1 && (
121126
<button
122127
onClick={(e) => {
123128
e.stopPropagation();
124129
onTabClose(tab.id);
125130
}}
126-
className="ml-1 hover:text-white"
131+
className={cn(
132+
"p-0.5 rounded-sm opacity-0 group-hover:opacity-100 transition-all",
133+
activeTabId === tab.id ? "hover:bg-[#37373d]" : "hover:bg-[#454549]"
134+
)}
127135
>
128-
<X className="h-3 w-3" />
136+
<X className="h-3.5 w-3.5" />
129137
</button>
130138
)}
131139
</div>
132140
))}
133141
<button
134142
onClick={onTabAdd}
135-
className="p-1 text-gray-400 hover:text-white hover:bg-[#37373d] rounded transition-colors"
143+
className="h-full aspect-square flex items-center justify-center text-[#c5c5c5] hover:bg-[#37373d] transition-colors border-r border-transparent"
136144
title="Add new terminal"
137145
>
138-
<Plus className="h-3 w-3" />
146+
<Plus className="h-4 w-4" />
139147
</button>
140148
</div>
141149

0 commit comments

Comments
 (0)