refactor: drop LeftSidebar header in favor of group rows
The "Views" header + MoreHorizontal kebab were vestigial — the Views/Folders group rows already label themselves, and the kebab was a no-op. Swap the group icons (Layers2 for Views, HardDrive for Folders) so the visual hierarchy stays clear without the header. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,11 +6,11 @@ import {
|
|||||||
Image,
|
Image,
|
||||||
Star,
|
Star,
|
||||||
Trash2,
|
Trash2,
|
||||||
MoreHorizontal,
|
|
||||||
HardDrive,
|
HardDrive,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
Copy,
|
Copy,
|
||||||
Tag as TagIcon,
|
Tag as TagIcon,
|
||||||
|
Layers2,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import { sourceFolders, library, photos as photosApi, type FolderTreeNode } from '../../services/api'
|
import { sourceFolders, library, photos as photosApi, type FolderTreeNode } from '../../services/api'
|
||||||
@@ -211,8 +211,8 @@ export function LeftSidebar() {
|
|||||||
const libraryTree: TreeItem[] = [
|
const libraryTree: TreeItem[] = [
|
||||||
{
|
{
|
||||||
id: 'library',
|
id: 'library',
|
||||||
label: 'Library',
|
label: 'Views',
|
||||||
icon: <HardDrive className="h-4 w-4" />,
|
icon: <Layers2 className="h-4 w-4" />,
|
||||||
children: [
|
children: [
|
||||||
{ id: 'all-photos', label: 'All Photos', icon: <Image className="h-4 w-4" />, count: 0 },
|
{ id: 'all-photos', label: 'All Photos', icon: <Image className="h-4 w-4" />, count: 0 },
|
||||||
{ id: 'rated', label: 'Rated', icon: <Star className="h-4 w-4" />, count: 0 },
|
{ id: 'rated', label: 'Rated', icon: <Star className="h-4 w-4" />, count: 0 },
|
||||||
@@ -224,7 +224,7 @@ export function LeftSidebar() {
|
|||||||
{
|
{
|
||||||
id: 'folders',
|
id: 'folders',
|
||||||
label: 'Folders',
|
label: 'Folders',
|
||||||
icon: <Folder className="h-4 w-4" />,
|
icon: <HardDrive className="h-4 w-4" />,
|
||||||
children: folderTree.map(folderNodeToTreeItem),
|
children: folderTree.map(folderNodeToTreeItem),
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@@ -403,14 +403,6 @@ export function LeftSidebar() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col bg-surface">
|
<div className="flex h-full flex-col bg-surface">
|
||||||
{/* Sidebar Header */}
|
|
||||||
<div className="flex items-center justify-between border-b border-border px-3 py-2">
|
|
||||||
<h2 className="text-sm font-semibold text-text">Views</h2>
|
|
||||||
<button className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text">
|
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tree View */}
|
{/* Tree View */}
|
||||||
<div className="flex-1 overflow-y-auto py-2">
|
<div className="flex-1 overflow-y-auto py-2">
|
||||||
{libraryTree.map((item) => renderTreeItem(item))}
|
{libraryTree.map((item) => renderTreeItem(item))}
|
||||||
|
|||||||
Reference in New Issue
Block a user