mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-22 07:28:43 -04:00
fdf31fc3a8
* init * changes * Now updating statistics once a minute * More robust statistics updater * Concurrency is hard * improvements to stats * refactor * adjust setting back/forward padding so it matches top bar * refactor sidebar * rename * setting up screens * some changes * Co-authored-by: Brendan Allan <Brendonovich@users.noreply.github.com> * yes * yes2 * refactored explorerItem.ts * important explorer code shouldn't be thrown away in a util moment * support for multiple thumbnails in ExplorerItem * clippy * move debug * yes * label filters * ts * comment out unconnected stuff * added .mid for midi files --------- Co-authored-by: Ericson Fogo Soares <ericson.ds999@gmail.com> Co-authored-by: Brendan Allan <brendonovich@outlook.com>
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { Gear, Lock, Plus } from '@phosphor-icons/react';
|
|
import clsx from 'clsx';
|
|
import { useClientContext } from '@sd/client';
|
|
import { dialogManager, Dropdown, DropdownMenu } from '@sd/ui';
|
|
import { useLocale } from '~/hooks';
|
|
|
|
import CreateDialog from '../../../settings/node/libraries/CreateDialog';
|
|
|
|
export default () => {
|
|
const { library, libraries, currentLibraryId } = useClientContext();
|
|
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<DropdownMenu.Root
|
|
trigger={
|
|
<Dropdown.Button
|
|
variant="gray"
|
|
className={clsx(
|
|
`w-full text-sidebar-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-sidebar-inkFaint'
|
|
)}
|
|
>
|
|
<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}`}
|
|
key={lib.uuid}
|
|
selected={lib.uuid === currentLibraryId}
|
|
>
|
|
<p className="truncate">{lib.config.name}</p>
|
|
</DropdownMenu.Item>
|
|
))}
|
|
<DropdownMenu.Separator className="mx-0" />
|
|
<DropdownMenu.Item
|
|
label={t('new_library')}
|
|
icon={Plus}
|
|
iconProps={{ weight: 'bold', size: 16 }}
|
|
onClick={() => dialogManager.create((dp) => <CreateDialog {...dp} />)}
|
|
className="font-medium"
|
|
/>
|
|
<DropdownMenu.Item
|
|
label={t('manage_library')}
|
|
icon={Gear}
|
|
iconProps={{ weight: 'bold', size: 16 }}
|
|
to="settings/library/general"
|
|
className="font-medium"
|
|
/>
|
|
<DropdownMenu.Item
|
|
label={t('lock')}
|
|
icon={Lock}
|
|
iconProps={{ weight: 'bold', size: 16 }}
|
|
onClick={() => alert('TODO: Not implemented yet!')}
|
|
className="font-medium"
|
|
/>
|
|
</DropdownMenu.Root>
|
|
);
|
|
};
|