LyAhn
827e1a8ecf
Mechanical one-shot pass of pnpm format over src/, tests/, tools/, and root configs. No functional changes; build and type-check verified.
61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import { useGalleryStore } from '../store'
|
|
import { Tooltip } from './Tooltip'
|
|
import { PlusIcon } from './icons'
|
|
import { AlbumSection } from './sidebar/AlbumSection'
|
|
import { LibrarySection } from './sidebar/LibrarySection'
|
|
import { NavItem } from './sidebar/NavItem'
|
|
|
|
export function Sidebar() {
|
|
const setFolderPickerOpen = useGalleryStore((state) => state.setFolderPickerOpen)
|
|
const selectedFolderId = useGalleryStore((state) => state.selectedFolderId)
|
|
const selectFolder = useGalleryStore((state) => state.selectFolder)
|
|
const activeView = useGalleryStore((state) => state.activeView)
|
|
const setView = useGalleryStore((state) => state.setView)
|
|
|
|
return (
|
|
<aside className="flex w-52 shrink-0 flex-col border-r border-white/[0.06] bg-gray-950 lg:w-60">
|
|
<div className="flex h-12 shrink-0 items-center justify-between border-b border-white/[0.06] px-4">
|
|
<span className="text-[13px] font-semibold tracking-wide text-white/80">Phokus</span>
|
|
<Tooltip label="Add Media Folder" anchorToCursor>
|
|
<button
|
|
onClick={() => setFolderPickerOpen(true)}
|
|
className="rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-white/8 hover:text-gray-200"
|
|
>
|
|
<PlusIcon className="h-4 w-4" />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<div className="space-y-px px-2 pt-2 pb-1">
|
|
<NavItem
|
|
label="All Media"
|
|
active={activeView === 'gallery' && selectedFolderId === null}
|
|
onClick={() => selectFolder(null)}
|
|
iconPath="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
<NavItem
|
|
label="Explore"
|
|
active={activeView === 'explore'}
|
|
onClick={() => setView('explore')}
|
|
iconPath="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
|
|
/>
|
|
<NavItem
|
|
label="Timeline"
|
|
active={activeView === 'timeline'}
|
|
onClick={() => setView('timeline')}
|
|
iconPath="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
<NavItem
|
|
label="Duplicates"
|
|
active={activeView === 'duplicates'}
|
|
onClick={() => setView('duplicates')}
|
|
iconPath="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
|
|
/>
|
|
</div>
|
|
|
|
<LibrarySection />
|
|
<AlbumSection />
|
|
</aside>
|
|
)
|
|
}
|