feat: display device uuid on general setting item

src/pages/Settings.tsx

@@ -20,6 +20,7 @@ import { SponsorBlockSettings } from "../components/SponsorBlockSettings";
 import { SwitchPlausibleAnalytics } from "../components/SwitchPlausibleAnalytics";
 import { SwitchVideoMode } from "../components/SwitchVideoMode";
 import { useStorage } from "../hooks/useStorage";
+import { useSettings } from "../providers/Settings";
 
 export const SettingsPage = memo(() => {
   const { t } = useTranslation();
@@ -54,6 +55,8 @@ const GeneralItem = memo(() => {
         </Group>
       </Accordion.Control>
       <Accordion.Panel>
+        <DeviceUuid />
+        <Divider mt="md" mb="lg" />
         <Text mb="md">{t("invidious.description")}</Text>
         <SelectInvidiousInstance />
         <Divider mt="md" mb="lg" />
@@ -68,6 +71,20 @@ const GeneralItem = memo(() => {
   );
 });
 
+const DeviceUuid = memo(() => {
+  const settings = useSettings();
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Text>{t("settings.general.device.uuid")}</Text>
+      <Text>
+        <strong>{settings.deviceId}</strong>
+      </Text>
+    </>
+  );
+});
+
 const AnalyticsItem = memo(() => {
   if (process.env.REACT_APP_PLAUSIBLE_ANALYTICS !== "true") {
     return null;

src/translations/en.json

@@ -1,6 +1,7 @@
 {
   "settings.general.title": "General",
   "settings.general.description": "Invidious instance, locale and dark mode",
+  "settings.general.device.uuid": "Device Uuid",
   "settings.general.invidious.description": "Edit the Invidious instance settings and add your custom instance",
   "settings.general.invidious.domain": "Domain",
   "settings.general.invidious.type": "Type",

src/translations/fr.json

@@ -1,6 +1,7 @@
 {
   "settings.general.title": "General",
   "settings.general.description": "Instance Invidious, langage et mode sombre",
+  "settings.general.device.uuid": "Identifiant de l'appareil (uuid)",
   "settings.general.invidious.description": "Modifier les paramètres d'instances Invidious et ajouter des instances personnaliser",
   "settings.general.invidious.domain": "Domaine",
   "settings.general.invidious.type": "Type",