From c1f53577cfefebb87ec3e1c0dbfc99c733a45432 Mon Sep 17 00:00:00 2001
From: Matthew Yung <117509016+myung03@users.noreply.github.com>
Date: Thu, 6 Jun 2024 03:17:08 -0700
Subject: [PATCH] Add devices modal (#2540)

* add device modal changes

* cleanup

* tailwind typescript error fixes

* enabled modal only for dev mode

* no need for "any"

* i18n title

---------

Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>
---
 .../sections/Devices/AddDeviceDialog.tsx      | 49 ++++++++++++++
 .../Layout/Sidebar/sections/Devices/index.tsx | 64 +++++++++----------
 .../app/$libraryId/search/SearchOptions.tsx   |  2 +-
 interface/locales/en/common.json              |  1 +
 4 files changed, 83 insertions(+), 33 deletions(-)
 create mode 100644 interface/app/$libraryId/Layout/Sidebar/sections/Devices/AddDeviceDialog.tsx

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/AddDeviceDialog.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/AddDeviceDialog.tsx
new file mode 100644
index 000000000..590389f72
--- /dev/null
+++ b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/AddDeviceDialog.tsx
@@ -0,0 +1,49 @@
+import { HardwareModel, NodeState } from '@sd/client';
+import { Dialog, Divider, Input, UseDialogProps, useDialog } from '@sd/ui';
+import { Icon } from '~/components';
+import { hardwareModelToIcon } from '~/util/hardware';
+
+import { useForm } from 'react-hook-form';
+import { useLocale } from '~/hooks';
+
+interface Props extends UseDialogProps {
+	node?: NodeState
+}
+
+const AddDeviceDialog = ({node, ...dialogProps}: Props) => {
+
+	const form = useForm();
+	const { t } = useLocale();
+
+	return (
+		<Dialog
+		dialog={useDialog(dialogProps)}
+		form={form}
+		title={t("add_device")}
+		description={t("Add Device Description")}
+		icon={<Icon
+			name={hardwareModelToIcon(node?.device_model as HardwareModel)}
+			size={28}
+		/>}
+		ctaLabel="Add"
+		closeLabel="Close"
+		>
+			<div className="mt-4 flex flex-col items-center">
+				<div className="size-32 rounded-lg bg-gray-600 shadow-lg" />
+			</div>
+			<div className="my-5 flex items-center space-x-3">
+				<Divider className="grow" />
+				<span className="my-1 text-xs text-ink-faint">OR</span>
+				<Divider className="grow" />
+			</div>
+			<div className="space-y-2">
+				<label htmlFor="accessCode" className="block text-sm text-gray-400">
+					Enter and authenticate device UUID
+				</label>
+				<Input id="accessCode"/>
+			</div>
+	</Dialog>
+	);
+};
+
+export default AddDeviceDialog;
diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
index a8130c9e6..2c4a12726 100644
--- a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
@@ -1,46 +1,46 @@
 import { HardwareModel, useBridgeQuery } from '@sd/client';
-import { Button, toast, Tooltip } from '@sd/ui';
+import { Button, Tooltip, dialogManager } from '@sd/ui';
 import { Icon } from '~/components';
 import { useLocale } from '~/hooks';
 import { hardwareModelToIcon } from '~/util/hardware';
 
 import SidebarLink from '../../SidebarLayout/Link';
 import Section from '../../SidebarLayout/Section';
+import AddDeviceDialog from './AddDeviceDialog';
 
 export default function DevicesSection() {
-	const { data: node } = useBridgeQuery(['nodeState']);
+    const { data: node } = useBridgeQuery(['nodeState']);
+    const { t } = useLocale();
 
-	const { t } = useLocale();
-
-	return (
-		<Section name={t('devices')}>
-			{node && (
-				<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
-					{node.device_model ? (
-						<Icon
-							name={hardwareModelToIcon(node.device_model as HardwareModel)}
-							size={20}
-							className="mr-1"
-						/>
-					) : (
-						<Icon name="Laptop" className="mr-1" />
-					)}
-
-					<span className="truncate">{node.name}</span>
-				</SidebarLink>
-			)}
+    return (
+        <Section name={t('devices')}>
+            {node && (
+                <SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
+                    {node.device_model ? (
+                        <Icon
+                            name={hardwareModelToIcon(node.device_model as HardwareModel)}
+                            size={20}
+                            className="mr-1"
+                        />
+                    ) : (
+                        <Icon name="Laptop" className="mr-1" />
+                    )}
 
+                    <span className="truncate">{node.name}</span>
+                </SidebarLink>
+            )}
 			<Tooltip label={t('devices_coming_soon_tooltip')} position="right">
-				<Button
-					onClick={() => {
-						toast.info(t('coming_soon'));
-					}}
-					variant="dotted"
-					className="mt-1 w-full opacity-70"
-				>
-					{t('add_device')}
-				</Button>
+            <Button disabled={!import.meta.env.DEV}
+                onClick={() => dialogManager.create((dp) => (
+					<AddDeviceDialog {...dp} />
+				))}
+                variant="dotted"
+                className="mt-1 w-full opacity-70"
+            >
+                {t('add_device')}
+            </Button>
 			</Tooltip>
-		</Section>
-	);
+        </Section>
+
+    );
 }
diff --git a/interface/app/$libraryId/search/SearchOptions.tsx b/interface/app/$libraryId/search/SearchOptions.tsx
index 99275ef6c..930155315 100644
--- a/interface/app/$libraryId/search/SearchOptions.tsx
+++ b/interface/app/$libraryId/search/SearchOptions.tsx
@@ -78,7 +78,7 @@ export const SearchOptionSubMenu = (
 					<SearchOptionItemInternals {...props}>{props.name}</SearchOptionItemInternals>
 				</ContextMenuDivItem>
 			}
-			className={clsx(MENU_STYLES, 'max-h-80 explorer-scroll -mt-1.5', props.className)}
+			className={clsx(MENU_STYLES, 'explorer-scroll -mt-1.5 max-h-80', props.className)}
 		>
 			{props.children}
 		</DropdownMenu.SubMenu>
diff --git a/interface/locales/en/common.json b/interface/locales/en/common.json
index 5fd043d38..5d0b0c7f3 100644
--- a/interface/locales/en/common.json
+++ b/interface/locales/en/common.json
@@ -1,4 +1,5 @@
 {
+  "Add Device Description": "Scan the QR code or authenticate your device UUID to add a device.",
   "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",