diff --git a/interface/app/$libraryId/ephemeral.tsx b/interface/app/$libraryId/ephemeral.tsx index aedd01c63..5efbda73d 100644 --- a/interface/app/$libraryId/ephemeral.tsx +++ b/interface/app/$libraryId/ephemeral.tsx @@ -1,3 +1,7 @@ +import { ArrowLeft, ArrowRight, Info } from '@phosphor-icons/react'; +import * as Dialog from '@radix-ui/react-dialog'; +import { iconNames } from '@sd/assets/util'; +import clsx from 'clsx'; import { memo, Suspense, useDeferredValue, useMemo } from 'react'; import { ExplorerItem, @@ -5,9 +9,16 @@ import { useLibraryQuery, type EphemeralPathOrder } from '@sd/client'; -import { Tooltip } from '@sd/ui'; +import { Button, Tooltip } from '@sd/ui'; import { PathParamsSchema, type PathParams } from '~/app/route-schemas'; -import { useOperatingSystem, useZodSearchParams } from '~/hooks'; +import { Icon } from '~/components'; +import { + getDismissibleNoticeStore, + useDismissibleNoticeStore, + useIsDark, + useOperatingSystem, + useZodSearchParams +} from '~/hooks'; import Explorer from './Explorer'; import { ExplorerContextProvider } from './Explorer/Context'; @@ -19,7 +30,125 @@ import { import { DefaultTopBarOptions } from './Explorer/TopBarOptions'; import { useExplorer, useExplorerSettings } from './Explorer/useExplorer'; import { AddLocationButton } from './settings/library/locations/AddLocationButton'; +import { TOP_BAR_HEIGHT } from './TopBar'; import { TopBarPortal } from './TopBar/Portal'; +import TopBarButton from './TopBar/TopBarButton'; + +const NOTICE_ITEMS: { icon: keyof typeof iconNames; name: string }[] = [ + { + icon: 'Folder', + name: 'Documents' + }, + { + icon: 'Archive', + name: 'Keep-Safe' + }, + { + icon: 'Executable', + name: 'Spacedrive' + }, + { + icon: 'Folder', + name: 'Music' + } +]; + +const EphemeralNotice = ({ path }: { path: string }) => { + const isDark = useIsDark(); + const { ephemeral: dismissed } = useDismissibleNoticeStore(); + + const dismiss = () => (getDismissibleNoticeStore().ephemeral = true); + + return ( + (getDismissibleNoticeStore().ephemeral = !open)} + > + + + +
+
+
+ +
+
+ + + + + + + +
+ + + + +
+ +
+
+ {NOTICE_ITEMS.map((item) => ( +
+ + + {item.name} + +
+ ))} +
+
+
+ +
+
+ +
+
+

Local Locations

+

+ Browse your files and folders directly from your device. +

+
+ +
+ +

+ Consider indexing your local locations for a faster and more + efficient exploration. +

+
+ + +
+ + + + ); +}; const EphemeralExplorer = memo((props: { args: PathParams }) => { const os = useOperatingSystem(); @@ -106,6 +235,7 @@ export const Component = () => { return ( + ); diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx index 958cd96a5..8735553f6 100644 --- a/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx +++ b/interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx @@ -11,9 +11,10 @@ import { openDirectoryPickerDialog } from './openDirectoryPickerDialog'; interface AddLocationButton extends ButtonProps { path?: string; + onClick?: () => void; } -export const AddLocationButton = ({ path, className, ...props }: AddLocationButton) => { +export const AddLocationButton = ({ path, className, onClick, ...props }: AddLocationButton) => { const platform = usePlatform(); const transition = { type: 'keyframes', @@ -50,6 +51,8 @@ export const AddLocationButton = ({ path, className, ...props }: AddLocationButt dialogManager.create((dp) => ( )); + + onClick?.(); }} {...props} > diff --git a/interface/hooks/useDismissibleNoticeStore.tsx b/interface/hooks/useDismissibleNoticeStore.tsx index 59fb9d069..4d0cbf32f 100644 --- a/interface/hooks/useDismissibleNoticeStore.tsx +++ b/interface/hooks/useDismissibleNoticeStore.tsx @@ -4,7 +4,8 @@ import { valtioPersist } from '@sd/client'; export const dismissibleNoticeStore = valtioPersist('dismissible-notice', { mediaView: false, gridView: false, - listView: false + listView: false, + ephemeral: false }); export function useDismissibleNoticeStore() {