From 8978297f50142d44ae3b289c53fd60ffcc0ef4e6 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Tue, 9 Apr 2024 21:08:25 +0200
Subject: [PATCH] fix responsive view, unify svg icons

---
 components/Alert.vue             |  71 ++------------------
 components/Menu.vue              |  61 ++++-------------
 components/PlaylistGenerator.vue |  79 +++++++++++++---------
 components/SvgIcon.vue           | 108 +++++++++++++++++++++++++++++++
 layouts/default.vue              |  10 ++-
 pages/index.vue                  |  32 ++-------
 6 files changed, 187 insertions(+), 174 deletions(-)
 create mode 100644 components/SvgIcon.vue

diff --git a/components/Alert.vue b/components/Alert.vue
index 8b5d1697..c7fa28cf 100644
--- a/components/Alert.vue
+++ b/components/Alert.vue
@@ -5,90 +5,29 @@
         class="alert fixed top-20 right-3 z-40 w-auto min-w-64 max-w-[90%] md:max-w-[50%] xl:max-w-[40%]"
         :class="`alert-${indexStore.alertVariant}`"
     >
-        <div v-html="alertIcon(indexStore.alertVariant)" />
+        <SvgIcon :name="indexStore.alertVariant" />
         {{ indexStore.alertMsg }}
     </div>
 
     <!-- HACK: init alerts to get the right colors, can be remove when bug is fixed -->
     <div class="alert alert-success w-auto max-w-[700px] justify-start py-2 rounded hidden">
-        <div v-html="alertIcon('success')" />
+        <SvgIcon name="success" />
         <span class="truncate w-full">bla bla bla</span>
     </div>
     <div class="alert alert-warning w-auto max-w-[700px] justify-start py-2 rounded hidden">
-        <div v-html="alertIcon('warning')" />
+        <SvgIcon name="warning" />
         <span class="truncate w-full">bla bla bla</span>
     </div>
     <div class="alert alert-info w-auto max-w-[700px] justify-start py-2 rounded hidden">
-        <div v-html="alertIcon('info')" />
+        <SvgIcon name="info" />
         <span class="truncate w-full">bla bla bla</span>
     </div>
     <div class="alert alert-error w-auto max-w-[700px] justify-start py-2 rounded hidden">
-        <div v-html="alertIcon('error')" />
+        <SvgIcon name="error" />
         <span class="truncate w-full">bla bla bla</span>
     </div>
 </template>
 
 <script setup lang="ts">
 const indexStore = useIndex()
-
-function alertIcon(variance: string) {
-    switch (variance) {
-        case 'error':
-            return `<svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>`
-        case 'success':
-            return ` <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>`
-        case 'warning':
-            return `<svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                    />
-                </svg>`
-        default:
-            return ` <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="stroke-current shrink-0 w-6 h-6"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>`
-    }
-}
 </script>
diff --git a/components/Menu.vue b/components/Menu.vue
index a6f4d477..fecabb88 100644
--- a/components/Menu.vue
+++ b/components/Menu.vue
@@ -6,35 +6,12 @@
         <div class="navbar-end w-1/5 grow">
             <label class="swap swap-rotate me-2 md:hidden">
                 <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
-
-                <svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-                    <path
-                        d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-                    />
-                </svg>
-
-                <svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-                    <path
-                        d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-                    />
-                </svg>
+                <SvgIcon name="swap-on" classes="w-5 h-5" />
+                <SvgIcon name="swap-off" classes="w-5 h-5" />
             </label>
             <div class="dropdown dropdown-end z-50">
                 <div tabindex="0" role="button" class="btn btn-ghost md:hidden">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M4 6h16M4 12h8m-8 6h16"
-                        />
-                    </svg>
+                    <SvgIcon name="burger" classes="w-5 h-5" />
                 </div>
                 <ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                     <li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
@@ -61,7 +38,9 @@
                         </details>
                     </li>
                     <li class="bg-base-100 rounded-md">
-                        <button class="h-[27px] text-base" exactActiveClass="is-active" @click="logout()">Logout</button>
+                        <button class="h-[27px] text-base" exactActiveClass="is-active" @click="logout()">
+                            Logout
+                        </button>
                     </li>
                 </ul>
             </div>
@@ -69,7 +48,11 @@
         <div class="navbar-end hidden md:flex w-4/5 min-w-[600px]">
             <ul class="menu menu-sm menu-horizontal px-1">
                 <li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
-                    <NuxtLink :to="item.link" class="px-2 h-[27px] relative text-base text-base-content" activeClass="is-active">
+                    <NuxtLink
+                        :to="item.link"
+                        class="px-2 h-[27px] relative text-base text-base-content"
+                        activeClass="is-active"
+                    >
                         <span>
                             {{ item.name }}
                         </span>
@@ -97,26 +80,8 @@
                 <li class="p-0">
                     <label class="swap swap-rotate">
                         <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
-
-                        <svg
-                            class="swap-on fill-current w-5 h-5"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 22 22"
-                        >
-                            <path
-                                d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-                            />
-                        </svg>
-
-                        <svg
-                            class="swap-off fill-current w-5 h-5"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 22 22"
-                        >
-                            <path
-                                d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-                            />
-                        </svg>
+                        <SvgIcon name="swap-on" classes="w-5 h-5" />
+                        <SvgIcon name="swap-off" classes="w-5 h-5" />
                     </label>
                 </li>
             </ul>
diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue
index d92c92e2..a324f4b3 100644
--- a/components/PlaylistGenerator.vue
+++ b/components/PlaylistGenerator.vue
@@ -1,6 +1,10 @@
 <template>
-    <div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30 overflow-y-auto">
-        <div class="flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90%] h-[680px] rounded-md p-5 shadow-xl">
+    <div
+        class="z-50 fixed top-0 bottom-0 w-full h-full left-0 right-0 flex justify-center items-center bg-black/30 overflow-y-auto"
+    >
+        <div
+            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] rounded-md p-5 shadow-xl"
+        >
             <div class="font-bold text-lg">Generate Program</div>
 
             <div class="h-[calc(100%-95px)] mt-3">
@@ -14,25 +18,28 @@
                         @change="advancedGenerator = false"
                         checked
                     />
-                    <div role="tabpanel" class="tab-content pt-3">
+                    <div role="tabpanel" class="tab-content w-full pt-3">
                         <div class="w-full">
-                            <nav class="breadcrumbs px-3 pt-0">
-                                <ul>
-                                    <li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
-                                        <button
-                                            v-if="
-                                                mediaStore.folderCrumbs.length > 1 &&
-                                                mediaStore.folderCrumbs.length - 1 > index
-                                            "
-                                            @click="mediaStore.getTree(crumb.path, true)"
-                                        >
-                                            <i class="bi-folder-fill me-1" />
-                                            {{ crumb.text }}
-                                        </button>
-                                        <span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
-                                    </li>
-                                </ul>
-                            </nav>
+                            <div class="grid">
+                                <nav class="breadcrumbs px-3 pt-0">
+                                    <ul>
+                                        <li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
+                                            <button
+                                                v-if="
+                                                    mediaStore.folderCrumbs.length > 1 &&
+                                                    mediaStore.folderCrumbs.length - 1 > index
+                                                "
+                                                @click="mediaStore.getTree(crumb.path, true)"
+                                            >
+                                                <i class="bi-folder-fill me-1" />
+                                                {{ crumb.text }}
+                                            </button>
+                                            <span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
+                                        </li>
+                                    </ul>
+                                </nav>
+                            </div>
+
                             <ul class="h-[475px] border border-my-gray rounded overflow-auto bg-base-300 m-1 py-1">
                                 <li
                                     class="even:bg-base-200 px-2 w-full"
@@ -89,7 +96,7 @@
                     />
                     <div role="tabpanel" class="tab-content pt-3">
                         <div class="w-full">
-                            <div class="grid grid-cols-2 px-3 pt-0">
+                            <div class="grid grid-cols-[auto_48px] px-3 pt-0">
                                 <nav class="breadcrumbs pt-0">
                                     <ul>
                                         <li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
@@ -119,13 +126,15 @@
                                 </div>
                             </div>
                             <div
-                                class="h-[475px] border border-my-gray rounded grid grid-cols-[300px_auto] bg-base-300 m-1"
+                                class="h-[475px] border border-my-gray rounded grid bg-base-300 m-1"
+                                :class="width < 740 ? 'grid-cols-1' : 'grid-cols-[300px_auto]'"
                             >
                                 <Sortable
                                     :list="mediaStore.folderList.folders"
                                     :options="templateBrowserSortOptions"
                                     item-key="uid"
-                                    class="overflow-auto border-e border-my-gray py-1"
+                                    class="overflow-auto py-1 border-my-gray"
+                                    :class="width < 740 ? 'h-[240px] border-b' : 'border-e'"
                                     tag="ul"
                                 >
                                     <template #item="{ element, index }">
@@ -155,11 +164,11 @@
                                         </li>
                                     </template>
                                 </Sortable>
-                                <ul class="overflow-auto p-2">
+                                <ul class="overflow-auto px-1 pb-1">
                                     <li
                                         v-for="item in template.sources"
                                         :key="item.start"
-                                        class="flex flex-col gap-1 justify-center items-center border border-my-gray rounded p-1"
+                                        class="flex flex-col gap-1 justify-center items-center border border-my-gray rounded mt-1 p-1"
                                     >
                                         <div class="grid grid-cols-[50px_67px_70px_67px_50px] join">
                                             <div
@@ -201,7 +210,11 @@
                                             @add="addFolderToTemplate($event, item)"
                                         >
                                             <template #item="{ element, index }">
-                                                <li :id="`path_${index}`" class="draggable grabbing py-0 even:bg-base-200 px-2" :key="index">
+                                                <li
+                                                    :id="`path_${index}`"
+                                                    class="draggable grabbing py-0 even:bg-base-200 px-2"
+                                                    :key="index"
+                                                >
                                                     <i class="bi-folder-fill" />
                                                     {{ element.split(/[\\/]+/).pop() }}
                                                 </li>
@@ -245,11 +258,7 @@
                     >
                         Cancel
                     </button>
-                    <button
-                        type="button"
-                        class="btn btn-sm btn-primary join-item"
-                        @click="generatePlaylist(), close()"
-                    >
+                    <button type="button" class="btn btn-sm btn-primary join-item" @click="generatePlaylist(), close()">
                         Ok
                     </button>
                 </div>
@@ -260,6 +269,7 @@
 <script setup lang="ts">
 const { $dayjs } = useNuxtApp()
 
+const { width } = useWindowSize({ initialWidth: 800 })
 const authStore = useAuth()
 const configStore = useConfig()
 const indexStore = useIndex()
@@ -282,7 +292,12 @@ const advancedGenerator = ref(false)
 const selectedFolders = ref([] as string[])
 const generateFromAll = ref(false)
 const template = ref({
-    sources: [],
+    sources: [{
+        start: configStore.configPlayout.playlist.day_start,
+        duration: '02:00:00',
+        shuffle: false,
+        paths: [],
+    }],
 } as Template)
 
 const templateBrowserSortOptions = {
diff --git a/components/SvgIcon.vue b/components/SvgIcon.vue
new file mode 100644
index 00000000..699f17fc
--- /dev/null
+++ b/components/SvgIcon.vue
@@ -0,0 +1,108 @@
+<template>
+    <svg
+        v-if="name === 'swap-on'"
+        class="swap-on fill-current"
+        :class="classes"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+    >
+        <path
+            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="name === 'swap-off'"
+        class="swap-off fill-current"
+        :class="classes"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+    >
+        <path
+            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="name === 'error'"
+        xmlns="http://www.w3.org/2000/svg"
+        class="stroke-current shrink-0 h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+    </svg>
+
+    <svg
+        v-if="name === 'success'"
+        xmlns="http://www.w3.org/2000/svg"
+        class="stroke-current shrink-0 h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+    </svg>
+
+    <svg
+        v-if="name === 'warning'"
+        xmlns="http://www.w3.org/2000/svg"
+        class="stroke-current shrink-0 h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+    </svg>
+
+    <svg
+        v-if="name === 'info'"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="stroke-current shrink-0 w-6 h-6"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="name === 'burger'"
+        xmlns="http://www.w3.org/2000/svg"
+        :class="classes"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+    >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+    </svg>
+</template>
+<script setup lang="ts">
+defineProps({
+    name: {
+        type: String,
+        default: '',
+    },
+    classes: {
+        type: String,
+        default: '',
+    },
+})
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 05f1a58f..b88b90b7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,7 +4,7 @@
             <Menu />
         </div>
 
-        <main :class="authStore.isLogin && route.name !== 'index' ? 'h-[calc(100%-52px)]': 'h-full'">
+        <main :class="authStore.isLogin && route.name !== 'index' ? 'h-[calc(100%-52px)]' : 'h-full'">
             <slot />
         </main>
 
@@ -13,10 +13,18 @@
 </template>
 
 <script setup lang="ts">
+const colorMode = useColorMode()
 const configStore = useConfig()
 const authStore = useAuth()
+const indexStore = useIndex()
 
 const route = useRoute()
 
 await configStore.nuxtClientInit()
+
+if (colorMode.value === 'dark') {
+    indexStore.darkMode = true
+} else {
+    indexStore.darkMode = false
+}
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index f9e36976..328fa482 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,7 +6,7 @@
                 <NuxtLink to="/player" class="btn join-item btn-primary">Player</NuxtLink>
                 <NuxtLink to="/media" class="btn join-item btn-primary">Media</NuxtLink>
                 <NuxtLink to="/message" class="btn join-item btn-primary">Message</NuxtLink>
-                <NuxtLink to="logging" class="btn join-item btn-primary">Logging</NuxtLink>
+                <NuxtLink to="/logging" class="btn join-item btn-primary">Logging</NuxtLink>
                 <NuxtLink
                     v-if="authStore.role.toLowerCase() == 'admin'"
                     to="/configure"
@@ -17,18 +17,8 @@
                 <button class="btn join-item btn-primary" @click="logout()">Logout</button>
                 <label class="join-item btn btn-primary swap swap-rotate me-2">
                     <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
-
-                    <svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-                        <path
-                            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-                        />
-                    </svg>
-
-                    <svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-                        <path
-                            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-                        />
-                    </svg>
+                    <SvgIcon name="swap-on" classes="w-5 h-5" />
+                    <SvgIcon name="swap-off" classes="w-5 h-5" />
                 </label>
             </div>
         </div>
@@ -60,21 +50,9 @@
                         <div
                             v-if="showLoginError"
                             role="alert"
-                            class="alert error w-auto rounded z-2 h-12 p-[0.7rem]"
+                            class="alert alert-error w-auto rounded z-2 h-12 p-[0.7rem]"
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="stroke-current shrink-0 h-6 w-6"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                                />
-                            </svg>
+                            <SvgIcon name="error" />
                             <span>{{ formError }}</span>
                         </div>
                     </div>