mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-25 08:57:33 -04:00
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import clsx from 'clsx';
|
|
import { Gear, Lock, Plus } from 'phosphor-react';
|
|
import { useClientContext } from '@sd/client';
|
|
import { Dropdown, DropdownMenu, dialogManager } from '@sd/ui';
|
|
import CreateDialog from '../../settings/node/libraries/CreateDialog';
|
|
|
|
export default () => {
|
|
const { library, libraries, currentLibraryId } = useClientContext();
|
|
return (
|
|
<DropdownMenu.Root
|
|
trigger={
|
|
<Dropdown.Button
|
|
variant="gray"
|
|
className={clsx(
|
|
`w-full text-ink`,
|
|
// these classname overrides are messy
|
|
// but they work
|
|
`!border-sidebar-line/50 !bg-sidebar-box ring-offset-sidebar active:!border-sidebar-line active:!bg-sidebar-button ui-open:!border-sidebar-line ui-open:!bg-sidebar-button`,
|
|
(library === null || libraries.isLoading) && '!text-ink-faint'
|
|
)}
|
|
>
|
|
<span className="truncate">
|
|
{libraries.isLoading ? 'Loading...' : library ? library.config.name : ' '}
|
|
</span>
|
|
</Dropdown.Button>
|
|
}
|
|
// we override the sidebar dropdown item's hover styles
|
|
// because the dark style clashes with the sidebar
|
|
className="mt-1 shadow-none data-[side=bottom]:slide-in-from-top-2 dark:divide-menu-selected/30 dark:border-sidebar-line dark:bg-sidebar-box"
|
|
alignToTrigger
|
|
>
|
|
{libraries.data?.map((lib) => (
|
|
<DropdownMenu.Item
|
|
to={`/${lib.uuid}/overview`}
|
|
key={lib.uuid}
|
|
selected={lib.uuid === currentLibraryId}
|
|
>
|
|
{lib.config.name}
|
|
</DropdownMenu.Item>
|
|
))}
|
|
<DropdownMenu.Separator className="mx-0" />
|
|
<DropdownMenu.Item
|
|
label=" New Library"
|
|
icon={Plus}
|
|
iconProps={{ weight: 'bold', size: 16 }}
|
|
onClick={() => dialogManager.create((dp) => <CreateDialog {...dp} />)}
|
|
className="font-medium"
|
|
/>
|
|
<DropdownMenu.Item
|
|
label="Manage Library"
|
|
icon={Gear}
|
|
iconProps={{ weight: 'bold', size: 16 }}
|
|
to="settings/library/general"
|
|
className="font-medium"
|
|
/>
|
|
<DropdownMenu.Item
|
|
label="Lock"
|
|
icon={Lock}
|
|
iconProps={{ weight: 'bold', size: 16 }}
|
|
onClick={() => alert('TODO: Not implemented yet!')}
|
|
className="font-medium"
|
|
/>
|
|
</DropdownMenu.Root>
|
|
);
|
|
};
|