From 58956a5d20a3487a787224f0116c95d1825e2dfd Mon Sep 17 00:00:00 2001
From: Stephane Richin <contact@stephane-richin.fr>
Date: Fri, 12 Jan 2024 17:19:29 +0100
Subject: [PATCH] feat(devices): add type for display device type icon

---
 src/components/ButtonAddOrEditDevice.tsx  | 27 ++++++++++++++++--
 src/components/ButtonDevicesAvailable.tsx |  5 ++--
 src/components/DeviceList.tsx             | 34 ++++++++++++++++++++---
 src/translations/en.json                  |  1 +
 src/translations/fr.json                  |  1 +
 src/types/interfaces/Settings.ts          |  3 ++
 6 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/src/components/ButtonAddOrEditDevice.tsx b/src/components/ButtonAddOrEditDevice.tsx
index e89d3aa..6d0fdf3 100644
--- a/src/components/ButtonAddOrEditDevice.tsx
+++ b/src/components/ButtonAddOrEditDevice.tsx
@@ -1,4 +1,11 @@
-import { ActionIcon, Button, Flex, Space, TextInput } from "@mantine/core";
+import {
+  ActionIcon,
+  Button,
+  Flex,
+  Select,
+  Space,
+  TextInput,
+} from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
 import { IconEdit, IconPlus } from "@tabler/icons-react";
@@ -7,7 +14,11 @@ import { useTranslation } from "react-i18next";
 
 import { db } from "../database";
 import { useSetSettings, useSettings } from "../providers/Settings";
-import type { RemoteDevice, Settings } from "../types/interfaces/Settings";
+import type {
+  RemoteDevice,
+  RemoteDeviceType,
+  Settings,
+} from "../types/interfaces/Settings";
 import { Form } from "./Form";
 import { Modal } from "./Modal";
 
@@ -15,19 +26,24 @@ interface ButtonAddOrEditDeviceProps {
   initialValues?: {
     id: string;
     name: string;
+    type: RemoteDeviceType;
   };
 }
 
 interface FormData {
   id: string;
   name: string;
+  type: RemoteDeviceType;
 }
 
 const INITIAL_VALUES = {
   id: "",
   name: "",
+  type: "desktop",
 } as FormData;
 
+const REMOTE_DEVICES_ICONS_LABEL = ["desktop", "tablet", "mobile"];
+
 export const ButtonAddOrEditDevice: FC<ButtonAddOrEditDeviceProps> = memo(
   ({ initialValues }) => {
     const [opened, setOpened] = useState(false);
@@ -79,7 +95,6 @@ export const ButtonAddOrEditDevice: FC<ButtonAddOrEditDeviceProps> = memo(
         color: "green",
       });
 
-      form.reset();
       setOpened(false);
     };
 
@@ -133,6 +148,12 @@ export const ButtonAddOrEditDevice: FC<ButtonAddOrEditDeviceProps> = memo(
               label={t("modal.device.add.input.name.label")}
               {...form.getInputProps("name")}
             />
+            <Space h="sm" />
+            <Select
+              label={t("modal.device.add.select.type.label")}
+              data={REMOTE_DEVICES_ICONS_LABEL}
+              {...form.getInputProps("type")}
+            />
             <Flex gap={8} justify="flex-end" mt="xl">
               <Button onClick={() => setOpened(false)} color="gray">
                 {t("cancel")}
diff --git a/src/components/ButtonDevicesAvailable.tsx b/src/components/ButtonDevicesAvailable.tsx
index 60aa047..055e3ee 100644
--- a/src/components/ButtonDevicesAvailable.tsx
+++ b/src/components/ButtonDevicesAvailable.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Box, Button, Menu, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconDeviceDesktop, IconPlayerPlay } from "@tabler/icons-react";
+import { IconDeviceDesktop } from "@tabler/icons-react";
 import { type FC, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -8,6 +8,7 @@ import { usePlayerAudio, usePlayerVideo } from "../providers/Player";
 import { useRemoteDevices } from "../providers/Settings";
 import { sendToRemoteDevice } from "../services/remotePlay";
 import type { RemoteDevice } from "../types/interfaces/Settings";
+import { DeviceIcon } from "./DeviceList";
 
 interface ButtonDevicesAvailableProps {
   variant: "icon" | "text";
@@ -65,7 +66,7 @@ export const ButtonDevicesAvailable: FC<ButtonDevicesAvailableProps> = memo(
           <Menu.Dropdown>
             {remoteDevices.map((device) => (
               <Menu.Item
-                leftSection={<IconPlayerPlay size={14} />}
+                leftSection={<DeviceIcon type={device.type} size={16} />}
                 onClick={() => handleRemotePlay(device)}
               >
                 <Text size="sm" lineClamp={1}>
diff --git a/src/components/DeviceList.tsx b/src/components/DeviceList.tsx
index 2702b7c..aff193e 100644
--- a/src/components/DeviceList.tsx
+++ b/src/components/DeviceList.tsx
@@ -1,9 +1,17 @@
 import { Alert, Flex, Table, Text } from "@mantine/core";
+import {
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconDeviceTablet,
+} from "@tabler/icons-react";
 import { type FC, memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useSettings } from "../providers/Settings";
-import type { RemoteDevice } from "../types/interfaces/Settings";
+import type {
+  RemoteDevice,
+  RemoteDeviceType,
+} from "../types/interfaces/Settings";
 import { ButtonAddOrEditDevice } from "./ButtonAddOrEditDevice";
 import { ButtonDeleteDevice } from "./ButtonDeleteDevice";
 
@@ -28,8 +36,8 @@ export const DevicesList = memo(() => {
       <Table role="list" aria-label="Devices list" highlightOnHover mb="md">
         <Table.Thead>
           <Table.Tr>
-            <Table.Th w="30%">Name</Table.Th>
-            <Table.Th w="50%">ID</Table.Th>
+            <Table.Th w="20%">Name</Table.Th>
+            <Table.Th w="60%">UUID</Table.Th>
             <Table.Th w="20%" style={{ textAlign: "right" }}>
               Actions
             </Table.Th>
@@ -46,6 +54,19 @@ export const DevicesList = memo(() => {
   );
 });
 
+const DeviceTypeIcon = {
+  desktop: IconDeviceDesktop,
+  tablet: IconDeviceTablet,
+  mobile: IconDeviceMobile,
+};
+
+export const DeviceIcon = memo(
+  ({ type, size }: { type: RemoteDeviceType; size?: number }) => {
+    const Icon = DeviceTypeIcon[type];
+    return <Icon size={size} />;
+  },
+);
+
 interface DeviceItemProps {
   device: RemoteDevice;
 }
@@ -54,7 +75,12 @@ const DeviceItem: FC<DeviceItemProps> = memo(({ device }) => {
   return (
     <Table.Tr>
       <Table.Td>
-        <strong>{device.name}</strong>
+        <strong>
+          <Flex align="center" gap="sm">
+            <DeviceIcon type={device.type} />
+            {device.name}
+          </Flex>
+        </strong>
       </Table.Td>
       <Table.Td>
         <strong>{device.id}</strong>
diff --git a/src/translations/en.json b/src/translations/en.json
index 17213c8..25b1fca 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -268,6 +268,7 @@
   "modal.device.add.input.id.description": "The Device identifier (uuid) is available in the settings (General tab) of the application on the device you wish to add",
   "modal.device.add.input.name.label": "Name",
   "modal.device.add.input.name.placeholder": "Device name",
+  "modal.device.add.select.type.label": "Device type",
   "modal.device.add.notification.message": "Device added",
   "modal.device.edit.title": "Update device",
   "modal.device.edit.notification.message": "Device updated",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 3ee03f7..9036bc1 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -268,6 +268,7 @@
   "modal.device.add.input.id.description": "L'identifiant de l'appareil (uuid) est disponible dans les paramètres (onglet Général) de l'application sur l'appareil que vous souhaitez ajouter",
   "modal.device.add.input.name.label": "Nom",
   "modal.device.add.input.name.placeholder": "Nom de l'appareil",
+  "modal.device.add.select.type.label": "Type d'appareil",
   "modal.device.add.notification.message": "Appareil ajouté",
   "modal.device.edit.title": "Modifier l'appareil",
   "modal.device.edit.notification.message": "Appareil modifié",
diff --git a/src/types/interfaces/Settings.ts b/src/types/interfaces/Settings.ts
index d92be66..4284fb4 100644
--- a/src/types/interfaces/Settings.ts
+++ b/src/types/interfaces/Settings.ts
@@ -1,8 +1,11 @@
 import type { Instance } from "./Instance";
 
+export type RemoteDeviceType = "desktop" | "tablet" | "mobile";
+
 export interface RemoteDevice {
   id: string;
   name: string;
+  type: "desktop" | "tablet" | "mobile";
   createdAt: string;
   updatedAt: string;
 }