From e2d00dc3464f9663062ac759a8aad85e61804b91 Mon Sep 17 00:00:00 2001
From: Zack Spear <zackspear@users.noreply.github.com>
Date: Tue, 1 Apr 2025 14:13:42 -0700
Subject: [PATCH] feat: add webgui theme switcher component (#1304)

For now just used in Dev Mode to help assist in testing webgui CSS
changes.

- Introduced a new `UnraidThemeSwitcher` component to allow users to
change themes dynamically.
- Updated `nuxt.config.ts` to register the new component.
- Created `ThemeSwitcher.ce.vue` with functionality to handle theme
changes and update the UI accordingly.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a theme switcher, allowing users to easily swap between
available application themes.
- Expanded the configuration to register the new theme switcher as a
custom element for seamless integration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 web/components/ThemeSwitcher.ce.vue | 96 +++++++++++++++++++++++++++++
 web/nuxt.config.ts                  |  4 ++
 2 files changed, 100 insertions(+)
 create mode 100644 web/components/ThemeSwitcher.ce.vue

diff --git a/web/components/ThemeSwitcher.ce.vue b/web/components/ThemeSwitcher.ce.vue
new file mode 100644
index 000000000..687d2ee1d
--- /dev/null
+++ b/web/components/ThemeSwitcher.ce.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+/**
+ * Add to webgui via DefaultPageLayout.php
+ * Find the footer and the PHP that builds it. Search for `annotate('Footer');` for the start of the footer.
+ * 
+ * At the of the footer end replace this PHP
+ * ```
+ * echo "</span></div>";
+ * ```
+ * with the following PHP
+ * ```
+ * echo "</span>"; //
+ * echo "<unraid-theme-switcher current='$theme' themes='".htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')."'></unraid-theme-switcher>";
+ * echo "</div>";
+ * ```
+ * 
+ * @todo unraid-theme-switcher usage should pull theme files to determine what themes are available instead of being hardcoded.
+ */
+import { ref, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { WebguiUpdate } from '~/composables/services/webgui';
+import { useServerStore } from '~/store/server';
+
+const props = defineProps<{
+  current: string;
+  themes?: string | string[]; // when string it'll be JSON encoded array that's been run thru htmlspecialchars in PHP
+}>();
+
+const computedThemes = computed(() => {
+  if (props.themes) {
+    return typeof props.themes === 'string' ? JSON.parse(props.themes) : props.themes;
+  }
+  return ['azure', 'black', 'gray', 'white'];
+});
+
+const { csrf } = storeToRefs(useServerStore());
+const devModeEnabled = import.meta.env.VITE_ALLOW_CONSOLE_LOGS;
+const submitting = ref<boolean>(false);
+
+const handleThemeChange = (event: Event) => {
+  const newTheme = (event.target as HTMLSelectElement).value;
+  
+  if (newTheme === props.current) {
+    console.debug('[ThemeSwitcher.setTheme] Theme is already set');
+    return;
+  }
+
+  console.debug('[ThemeSwitcher.setTheme] Submitting form');
+  submitting.value = true;
+
+  try {
+    WebguiUpdate
+      .formUrl({
+        csrf_token: csrf.value,
+        '#file': 'dynamix/dynamix.cfg',
+        '#section': 'display',
+        theme: newTheme,
+      })
+      .post()
+      .res(() => {
+        console.log('[ThemeSwitcher.setTheme] Theme updated, reloading…');
+        // without this timeout, the page refresh happens before emhttp has a chance to update the theme
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      });
+  } catch (error) {
+    console.error('[ThemeSwitcher.setTheme] Failed to update theme', error);
+    throw new Error('[ThemeSwitcher.setTheme] Failed to update theme');
+  }
+};
+</script>
+
+<template>
+  <select
+    v-if="devModeEnabled"
+    :disabled="submitting"
+    :value="props.current"
+    class="text-xs relative float-left mr-2 text-white bg-black"
+    @change="handleThemeChange"
+  >
+    <option
+      v-for="theme in computedThemes"
+      :key="theme"
+      :value="theme"
+    >
+      {{ theme }}
+    </option>
+  </select>
+</template>
+
+<style lang="postcss">
+/* Import unraid-ui globals first */
+@import '@unraid/ui/styles';
+@import '~/assets/main.css';
+</style>
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
index 4dd3fb5be..ac42aa249 100644
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -138,6 +138,10 @@ export default defineNuxtConfig({
             name: 'UnraidLogViewer',
             path: '@/components/Logs/LogViewer.ce',
           },
+          {
+            name: 'UnraidThemeSwitcher',
+            path: '@/components/ThemeSwitcher.ce',
+          },
         ],
       },
     ],