From ed166310c7d72d6932d8d7921c4df4837e507068 Mon Sep 17 00:00:00 2001 From: myung03 Date: Tue, 13 Aug 2024 16:40:44 -0700 Subject: [PATCH] added device info to "Libraries" in settings --- .../settings/node/libraries/DeviceItem.tsx | 48 ++++++ .../settings/node/libraries/ListItem.tsx | 159 +++++++++++++----- interface/locales/en/common.json | 19 ++- 3 files changed, 172 insertions(+), 54 deletions(-) create mode 100644 interface/app/$libraryId/settings/node/libraries/DeviceItem.tsx diff --git a/interface/app/$libraryId/settings/node/libraries/DeviceItem.tsx b/interface/app/$libraryId/settings/node/libraries/DeviceItem.tsx new file mode 100644 index 000000000..0cb27984e --- /dev/null +++ b/interface/app/$libraryId/settings/node/libraries/DeviceItem.tsx @@ -0,0 +1,48 @@ +import { Trash } from '@phosphor-icons/react'; +import { humanizeSize } from '@sd/client'; +import { Button, Card, Tooltip } from '@sd/ui'; +import { Icon } from '~/components'; +import { useLocale } from '~/hooks'; + +interface DeviceItemProps { + pub_id: Key | null | undefined; + name: string; + os: string; + storage_size: number; + created_at: string; +} + +// unsure where to put pub_id/if this information is important for a user? +export default (props: DeviceItemProps) => { + const { t } = useLocale(); + + return ( + + +
+

{props.name}

+

+ {props.os}, {`${t('added')}`} {new Date(props.created_at).toLocaleDateString()} +

+

+
+
{`${humanizeSize(props.storage_size)}`}
+ + + ); +}; diff --git a/interface/app/$libraryId/settings/node/libraries/ListItem.tsx b/interface/app/$libraryId/settings/node/libraries/ListItem.tsx index 06a95d443..f48ac9669 100644 --- a/interface/app/$libraryId/settings/node/libraries/ListItem.tsx +++ b/interface/app/$libraryId/settings/node/libraries/ListItem.tsx @@ -1,10 +1,13 @@ -import { Pencil, Trash } from '@phosphor-icons/react'; -import { LibraryConfigWrapped } from '@sd/client'; +import { CaretDown, CaretRight, Pencil, Trash } from '@phosphor-icons/react'; +import { AnimatePresence, motion } from 'framer-motion'; +import { Key, useState } from 'react'; +import { LibraryConfigWrapped, useBridgeQuery } from '@sd/client'; import { Button, ButtonLink, Card, dialogManager, Tooltip } from '@sd/ui'; import { Icon } from '~/components'; import { useLocale } from '~/hooks'; import DeleteDialog from './DeleteDialog'; +import DeviceItem from './DeviceItem'; interface Props { library: LibraryConfigWrapped; @@ -13,51 +16,115 @@ interface Props { export default (props: Props) => { const { t } = useLocale(); + const [isExpanded, setIsExpanded] = useState(false); + + const cloudDevicesList = useBridgeQuery(['cloud.devices.list'], { + suspense: true, + retry: false + }); + + const toggleExpansion = () => { + setIsExpanded((prev) => !prev); + }; return ( - - {/* */} - -
-

- {props.library.config.name} - {props.current && ( - - {t('current')} - - )} -

-

{props.library.uuid}

-
-
- {/* */} - - - - - - -
- +
+ +
+ +
+

+ {props.library.config.name} + {props.current && ( + + {t('current')} + + )} +

+

{props.library.uuid}

+
+
+
+ + + + + + + +
+ + + + {isExpanded && ( + +
+ + {cloudDevicesList.data?.map( + ( + device: { + pub_id: Key | null | undefined; + name: string; + os: string; + storage_size: number; + created_at: string; + }, + index: number + ) => ( +
+ +
+
+ +
+ +
+ ) + )} + + )} + +
); }; diff --git a/interface/locales/en/common.json b/interface/locales/en/common.json index 3a9a0c514..4769085af 100644 --- a/interface/locales/en/common.json +++ b/interface/locales/en/common.json @@ -1,4 +1,8 @@ { + "Add Device Description": "Scan the QR code or authenticate your device UUID to add a device.", + "Connect": "Connect", + "Connecting": "Connecting", + "Delete device": "Remove this device from library", "about": "About", "about_vision_text": "Many of us have multiple cloud accounts, drives that aren’t backed up and data at risk of loss. We depend on cloud services like Google Photos and iCloud, but are locked in with limited capacity and almost zero interoperability between services and operating systems. Photo albums shouldn’t be stuck in a device ecosystem, or harvested for advertising data. They should be OS agnostic, permanent and personally owned. Data we create is our legacy, that will long outlive us—open source technology is the only way to ensure we retain absolute control over the data that defines our lives, at unlimited scale.", "about_vision_title": "Vision", @@ -8,7 +12,6 @@ "account": "Account", "actions": "Actions", "add": "Add", - "Add Device Description": "Scan the QR code or authenticate your device UUID to add a device.", "add_device": "Add Device", "add_file_extension_rule": "Add a file extension to the current rule", "add_filter": "Add Filter", @@ -19,6 +22,7 @@ "add_location_tooltip": "Add path as an indexed location", "add_locations": "Add Locations", "add_tag": "Add Tag", + "added": "added to library on", "added_location": "Added Location {{name}}", "adding_location": "Adding Location {{name}}", "advanced": "Advanced", @@ -102,14 +106,12 @@ "config_other": "Configs", "configure_location": "Configure Location", "confirm": "Confirm", - "Connect": "Connect", "connect_cloud": "Connect a cloud", "connect_cloud_description": "Connect your cloud accounts to Spacedrive.", "connect_device": "Connect a device", "connect_device_description": "Spacedrive works best on all your devices.", "connect_library_to_cloud": "Connect library to Spacedrive Cloud", "connected": "Connected", - "Connecting": "Connecting", "connecting_library_to_cloud": "Connecting library to Spacedrive Cloud...", "contacts": "Contacts", "contacts_description": "Manage your contacts in Spacedrive.", @@ -169,7 +171,7 @@ "delete_forever": "Delete Forever", "delete_info": "This will not delete the actual folder on disk. Preview media will be deleted.", "delete_library": "Delete Library", - "delete_library_description": "This is permanent, your files will not be deleted, only the Spacedrive library.", + "delete_library_description": "This is permanent! Original files will not be deleted, only the Spacedrive library.", "delete_location": "Delete Location", "delete_location_description": "Deleting a location will also remove all files associated with it from the Spacedrive database, the files themselves will not be deleted.", "delete_object": "Delete object", @@ -226,7 +228,7 @@ "encrypt": "Encrypt", "encrypt_library": "Encrypt Library", "encrypt_library_coming_soon": "Library encryption coming soon", - "encrypt_library_description": "Enable encryption for this library, this will only encrypt the Spacedrive database, not the files themselves.", + "encrypt_library_description": "Enable encryption for this library. This will only encrypt the Spacedrive database, not the files themselves.", "encrypted": "Encrypted", "encrypted_one": "Encrypted", "encrypted_other": "Encrypted", @@ -323,8 +325,8 @@ "general_settings": "General Settings", "general_settings_description": "General settings related to this client.", "general_shortcut_description": "General usage shortcuts", - "generate_checksums": "Generate Checksums", "generatePreviewMedia_label": "Generate preview media for this Location", + "generate_checksums": "Generate Checksums", "gitignore": "Git Ignore", "glob_description": "Glob (e.g., **/.git)", "go_back": "Go Back", @@ -712,10 +714,10 @@ "switch_to_next_tab": "Switch to next tab", "switch_to_previous_tab": "Switch to previous tab", "sync": "Sync", + "syncPreviewMedia_label": "Sync preview media for this Location with your devices", "sync_description": "Manage how Spacedrive syncs.", "sync_with_library": "Sync with Library", "sync_with_library_description": "If enabled, your keybinds will be synced with library, otherwise they will apply only to this client.", - "syncPreviewMedia_label": "Sync preview media for this Location with your devices", "system": "System", "tag": "Tag", "tag_one": "Tag", @@ -744,6 +746,7 @@ "thumbnailer_cpu_usage": "Thumbnailer CPU usage", "thumbnailer_cpu_usage_description": "Limit how much CPU the thumbnailer can use for background processing.", "to": "to", + "toggle devices": "Toggle Library Devices", "toggle_all": "Toggle All", "toggle_command_palette": "Toggle command palette", "toggle_hidden_files": "Toggle hidden files", @@ -803,4 +806,4 @@ "zoom": "Zoom", "zoom_in": "Zoom In", "zoom_out": "Zoom Out" -} \ No newline at end of file +}