From 6fe26d4900c974f54e425ecfb80bd070945ea82e Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Tue, 9 Apr 2024 15:45:17 +0200
Subject: [PATCH] finish generator, cleanup css, add date picker, style alert,
 add shadow to elements

---
 assets/fonts/DigitalNumbers-Regular.woff  | Bin 0 -> 8876 bytes
 assets/fonts/DigitalNumbers-Regular.woff2 | Bin 5796 -> 0 bytes
 assets/scss/_variables.scss               |  48 ---
 assets/scss/main.scss                     | 118 +-------
 components/Alert.vue                      |  97 +++++-
 components/ConfigGui.vue                  |  10 +-
 components/ConfigPlayout.vue              |   4 +-
 components/ConfigUser.vue                 |  16 +-
 components/Control.vue                    |  14 +-
 components/Menu.vue                       |   2 +-
 components/Modal.vue                      |  21 +-
 components/PlaylistGenerator.vue          | 343 +++++++++++-----------
 components/SystemStats.vue                |   2 +-
 layouts/default.vue                       |   9 +-
 nuxt.config.ts                            |   7 -
 package-lock.json                         |  24 ++
 package.json                              |   1 +
 pages/index.vue                           |  29 +-
 pages/logging.vue                         |  43 ++-
 pages/media.vue                           |  49 ++--
 pages/message.vue                         |  12 +-
 pages/player.vue                          | 235 +++++----------
 plugins/dayjs.ts                          |   8 +
 plugins/vue-datepicker.client.ts          |   6 +
 stores/config.ts                          |   4 +-
 stores/index.ts                           |   6 +-
 stores/media.ts                           |  18 +-
 stores/playlist.ts                        |   1 +
 tailwind.config.ts                        |   2 +-
 29 files changed, 515 insertions(+), 614 deletions(-)
 create mode 100644 assets/fonts/DigitalNumbers-Regular.woff
 delete mode 100644 assets/fonts/DigitalNumbers-Regular.woff2
 delete mode 100644 assets/scss/_variables.scss
 create mode 100644 plugins/vue-datepicker.client.ts

diff --git a/assets/fonts/DigitalNumbers-Regular.woff b/assets/fonts/DigitalNumbers-Regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..7111cec8147832171245b40967da07e6bcfc7ff7
GIT binary patch
literal 8876
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

literal 0
HcmV?d00001

diff --git a/assets/fonts/DigitalNumbers-Regular.woff2 b/assets/fonts/DigitalNumbers-Regular.woff2
deleted file mode 100644
index 1a66c7671c35ae1a596807b62c254087d7c7605e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5796
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

diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
deleted file mode 100644
index 59d3da97..00000000
--- a/assets/scss/_variables.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-$gray-800: #3a3f44 !default;
-$gray-900: #262a2c !default;
-
-$primary: $gray-800 !default;
-$secondary: $gray-900 !default;
-
-$accent: #ff9c36;
-$bg-primary: #212529;
-$bg-secondary: #1d2024;
-$link-color: #c4c4c4;
-$link-color-hover: #e7e7e7;
-$item-hover: rgba(31, 31, 31, 0.8);
-$border-color: black;
-$overlay-bg: rgba(61, 61, 61, 0.534);
-
-$success: #438d3c;
-$danger: #972929;
-$warning: #a78c14;
-$alert-color: #ffffff;
-
-$control-button-play: #43c32e;
-$control-button-play-hover: #339924;
-$control-button-stop: #d01111;
-$control-button-stop-hover: #a70e0e;
-$control-button-restart: #d1c410;
-$control-button-restart-hover: #b4a90e;
-$control-button-control: #06aad3;
-$control-button-control-hover: #068bac;
-
-$log-time: #666864;
-$log-number: #e2c317;
-$log-addr: #ad7fa8;
-$log-cmd: #6c95c2;
-$log-content: #ececec;
-$log-info: #8ae234;
-$log-warning: #ff8700;
-$log-error: #d32828;
-$log-debug: #6e99c7;
-$log-decoder: #56efff;
-$log-encoder: #45ccee;
-$log-server: #23cbdd;
-
-$theme-colors: (
-    'primary': $primary,
-    'secondary': $secondary,
-);
-
-$b-radius: 3px;
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 8f2783d3..057abcc6 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,4 +1,3 @@
-@import '_variables.scss';
 @import 'bootstrap-icons/font/bootstrap-icons.css';
 
 #__nuxt,
@@ -10,101 +9,12 @@ main > div {
 }
 
 @font-face {
-    font-family: 'DigitalNumbers-Regular';
-    src: url('@/assets/fonts/DigitalNumbers-Regular.woff2') format('woff2');
+    font-family: 'DigitalNumbers';
+    src: url('@/assets/fonts/DigitalNumbers-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 
-.media-alert {
-    position: absolute;
-    top: 80px;
-    right: 12px;
-    max-width: 400px;
-    max-height: 60px;
-    z-index: 11;
-}
-
-.bg-warning {
-    background-color: $warning;
-}
-
-.date-div {
-    width: 250px;
-    height: 37px;
-    float: right;
-    margin-right: 12px;
-}
-
-.browser-item {
-    background: none;
-    border: none;
-    margin: 0;
-    padding: 0 0 0 .5em;
-    min-height: 26px;
-    min-height: 26px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.browser-div {
-    background-color: $gray-900;
-    border: 1px solid $border-color;
-    border-radius: 3px;
-}
-
-.media-browser-scroll {
-    height: calc(100% - 3px);
-    overflow: auto;
-    scrollbar-width: medium;
-}
-
-.browser-container .player-browser-scroll {
-    position: relative;
-    height: calc(100% - 50px);
-    min-height: 400px;
-}
-
-.browser-icons {
-    margin-right: 0.5em;
-}
-
-.browser-icons-col {
-    max-width: 10px;
-}
-
-.browser-play-col {
-    max-width: 30px;
-    text-align: center;
-    margin: 0;
-    padding: 0;
-}
-
-.browser-dur-col {
-    min-width: 95px;
-    margin: 0;
-    padding: 0 10px 0 0;
-}
-
-.browser-item-text {
-    display: inline-block;
-    max-width: 95%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.media-button {
-    float: right;
-    margin: 1em 0.8em 0 0;
-}
-
-.splitpanes__pane {
-    background-color: rgba(34, 34, 34, 0.233);
-    position: relative;
-}
-
 .splitpanes--horizontal > .splitpanes__splitter {
     position: relative;
     border-top: 1px solid var(--my-gray);
@@ -144,27 +54,3 @@ main > div {
     transition: background-color 0.3s;
     margin-left: -1px;
 }
-
-.list-row .grabbing {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-}
-
-.loading-overlay {
-    background-color: $overlay-bg;
-    z-index: 11;
-    position: absolute;
-    width: calc(100% - 25px);
-    height: calc(100% - 36px);
-
-    .spinner-border {
-        position: absolute;
-        margin: auto;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 3rem;
-        height: 3rem;
-    }
-}
diff --git a/components/Alert.vue b/components/Alert.vue
index 6e2c6762..8b5d1697 100644
--- a/components/Alert.vue
+++ b/components/Alert.vue
@@ -1,15 +1,94 @@
 <template>
-        <div
-            v-if="indexStore.showAlert"
-            class="alert show alert-dismissible fade media-alert position-fixed"
-            :class="indexStore.alertVariant"
-            role="alert"
-        >
-            {{ indexStore.alertMsg }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="indexStore.showAlert=false"></button>
-        </div>
+    <div
+        v-if="indexStore.showAlert"
+        role="alert"
+        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)" />
+        {{ 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')" />
+        <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')" />
+        <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')" />
+        <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')" />
+        <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/ConfigGui.vue b/components/ConfigGui.vue
index 39690609..e169bb76 100644
--- a/components/ConfigGui.vue
+++ b/components/ConfigGui.vue
@@ -114,9 +114,9 @@ async function onSubmitGui() {
     const update = await configStore.setGuiConfig(configStore.configGui[configStore.configID])
 
     if (update.status) {
-        indexStore.msgAlert('alert-success', 'Update GUI config success!', 2)
+        indexStore.msgAlert('success', 'Update GUI config success!', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Update GUI config failed!', 2)
+        indexStore.msgAlert('error', 'Update GUI config failed!', 2)
     }
 }
 
@@ -125,7 +125,7 @@ async function deleteChannel() {
     const id = config[configStore.configID].id
 
     if (id === 1) {
-        indexStore.msgAlert('alert-warning', 'First channel can not be deleted!', 2)
+        indexStore.msgAlert('warning', 'First channel can not be deleted!', 2)
         return
     }
 
@@ -140,9 +140,9 @@ async function deleteChannel() {
     await configStore.getPlayoutConfig()
 
     if (response.status === 200) {
-        indexStore.msgAlert('alert-success', 'Delete GUI config success!', 2)
+        indexStore.msgAlert('success', 'Delete GUI config success!', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Delete GUI config failed!', 2)
+        indexStore.msgAlert('error', 'Delete GUI config failed!', 2)
     }
 }
 </script>
diff --git a/components/ConfigPlayout.vue b/components/ConfigPlayout.vue
index 179de8d7..4ddc2181 100644
--- a/components/ConfigPlayout.vue
+++ b/components/ConfigPlayout.vue
@@ -99,7 +99,7 @@ async function onSubmitPlayout() {
     const update = await configStore.setPlayoutConfig(configStore.configPlayout)
 
     if (update.status === 200) {
-        indexStore.msgAlert('alert-success', 'Update playout config success!', 2)
+        indexStore.msgAlert('success', 'Update playout config success!', 2)
 
         const channel = configStore.configGui[configStore.configID].id
 
@@ -113,7 +113,7 @@ async function onSubmitPlayout() {
             }
         })
     } else {
-        indexStore.msgAlert('alert-error', 'Update playout config failed!', 2)
+        indexStore.msgAlert('error', 'Update playout config failed!', 2)
     }
 }
 
diff --git a/components/ConfigUser.vue b/components/ConfigUser.vue
index aac813ed..2ee869f7 100644
--- a/components/ConfigUser.vue
+++ b/components/ConfigUser.vue
@@ -183,20 +183,20 @@ async function getUserConfig() {
 
 async function deleteUser() {
     if (configStore.configUser.username === configStore.currentUser) {
-        indexStore.msgAlert('alert-error', 'Delete current user not possible!', 2)
+        indexStore.msgAlert('error', 'Delete current user not possible!', 2)
     } else {
         await fetch(`/api/user/${configStore.configUser.username}`, {
             method: 'DELETE',
             headers: authStore.authHeader,
         })
             .then(async () => {
-                indexStore.msgAlert('alert-success', 'Delete user done!', 2)
+                indexStore.msgAlert('success', 'Delete user done!', 2)
 
                 await configStore.getUserConfig()
                 await getUsers()
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete user error: ${e}`, 2)
+                indexStore.msgAlert('error', `Delete user error: ${e}`, 2)
             })
     }
 }
@@ -226,17 +226,17 @@ async function addUser(add: boolean) {
             showUserModal.value = false
 
             if (update.status === 200) {
-                indexStore.msgAlert('alert-success', 'Add user success!', 2)
+                indexStore.msgAlert('success', 'Add user success!', 2)
 
                 await getUsers()
                 await getUserConfig()
             } else {
-                indexStore.msgAlert('alert-error', 'Add user failed!', 2)
+                indexStore.msgAlert('error', 'Add user failed!', 2)
             }
 
             clearUser()
         } else {
-            indexStore.msgAlert('alert-error', 'Password mismatch!', 2)
+            indexStore.msgAlert('error', 'Password mismatch!', 2)
         }
     } else {
         showUserModal.value = false
@@ -253,9 +253,9 @@ async function onSubmitUser() {
     const update = await configStore.setUserConfig(configStore.configUser)
 
     if (update.status === 200) {
-        indexStore.msgAlert('alert-success', 'Update user profile success!', 2)
+        indexStore.msgAlert('success', 'Update user profile success!', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Update user profile failed!', 2)
+        indexStore.msgAlert('error', 'Update user profile failed!', 2)
     }
 
     newPass.value = ''
diff --git a/components/Control.vue b/components/Control.vue
index 07a56001..8ac14407 100644
--- a/components/Control.vue
+++ b/components/Control.vue
@@ -2,7 +2,7 @@
     <div class="w-full">
         <div class="grid grid-cols-1 md:grid-cols-[auto_512px] xl:grid-cols-[512px_auto_450px]">
             <div class="order-1 p-1">
-                <div class="bg-base-100 w-full h-full rounded">
+                <div class="bg-base-100 w-full h-full rounded shadow">
                     <div class="w-full h-full p-2">
                         <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
                         <VideoPlayer
@@ -33,7 +33,7 @@
             >
                 <div class="col-span-1 p-1">
                     <div
-                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
+                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center shadow"
                     >
                         {{ timeStr }}
                     </div>
@@ -41,14 +41,14 @@
 
                 <div class="col-span-1 p-1 min-h-[50%]">
                     <div
-                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
+                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center shadow"
                     >
                         {{ secToHMS(playlistStore.remainingSec >= 0 ? playlistStore.remainingSec : 0) }}
                     </div>
                 </div>
 
                 <div class="col-span-1 xs:col-span-2 p-1">
-                    <div class="w-full h-full bg-base-100 rounded flex items-center p-3">
+                    <div class="w-full h-full bg-base-100 rounded flex items-center p-3 shadow">
                         <div class="w-full h-full flex flex-col">
                             <div v-if="playlistStore.ingestRuns" class="h-1/3 font-bold truncate" title="Live Ingest">
                                 Live Ingest
@@ -78,7 +78,7 @@
             </div>
 
             <div class="order-2 xl:order-3 p-1">
-                <div class="bg-base-100 h-full flex justify-center rounded">
+                <div class="bg-base-100 h-full flex justify-center rounded shadow">
                     <div class="w-full h-full grid grid-cols-3">
                         <div class="text-center">
                             <div class="w-full h-1/2 aspect-square p-2">
@@ -116,7 +116,7 @@
                             <div class="w-full h-1/2 aspect-square p-2">
                                 <button
                                     title="Reset Playout State"
-                                    class="btn btn-primary h-full w-full text-7xl text-cyan-600"
+                                    class="btn btn-primary h-full w-full text-6xl text-cyan-600"
                                     @click="controlPlayout('reset')"
                                 >
                                     <i class="bi-arrow-repeat" />
@@ -128,7 +128,7 @@
                             <div class="w-full h-1/2 aspect-square p-2">
                                 <button
                                     title="Restart Playout Service"
-                                    class="btn btn-primary h-full w-full text-7xl text-yellow-500"
+                                    class="btn btn-primary h-full w-full text-6xl text-yellow-500"
                                     @click="controlProcess('restart')"
                                 >
                                     <i class="bi-arrow-clockwise" />
diff --git a/components/Menu.vue b/components/Menu.vue
index 7db66e69..a6f4d477 100644
--- a/components/Menu.vue
+++ b/components/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="navbar bg-base-100 min-h-[52px] p-0">
+    <div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
         <NuxtLink class="navbar-brand p-2" href="/">
             <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
         </NuxtLink>
diff --git a/components/Modal.vue b/components/Modal.vue
index fa4b0124..1f7ad4e4 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -1,15 +1,20 @@
 <template>
     <div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
         <div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
-            <div class="font-bold text-lg">{{ title }}</div>
+            <div class="inline-block">
+                <div class="flex gap-2">
+                    <div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
+                    <button v-if="hideButtons" class="btn btn-sm w-8 h-8 rounded-full" @click="modalAction(false)"><i class="bi bi-x-lg"></i></button>
+                </div>
 
-            <div class="grow mt-3">
-                <slot>
-                    <div v-html="text" />
-                </slot>
+                <div class="grow mt-3">
+                    <slot>
+                        <div v-html="text" />
+                    </slot>
+                </div>
             </div>
 
-            <div class="flex justify-end mt-3">
+            <div v-if="!hideButtons" class="flex justify-end mt-3">
                 <div class="join">
                     <button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
                         Cancel
@@ -42,5 +47,9 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    hideButtons: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue
index e04040c4..d92c92e2 100644
--- a/components/PlaylistGenerator.vue
+++ b/components/PlaylistGenerator.vue
@@ -1,12 +1,10 @@
 <template>
-    <div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
-        <div
-            class="flex flex-col bg-base-100 w-[800px] min-w-[400px] max-w-[90%] h-auto min-h-[600px] max-h-[80%] rounded-md p-5 shadow-xl"
-        >
+    <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="font-bold text-lg">Generate Program</div>
 
-            <div class="h-[600px] mt-3">
-                <div role="tablist" class="tabs tabs-lifted h-full">
+            <div class="h-[calc(100%-95px)] mt-3">
+                <div role="tablist" class="tabs tabs-bordered">
                     <input
                         type="radio"
                         name="my_tabs_2"
@@ -16,14 +14,17 @@
                         @change="advancedGenerator = false"
                         checked
                     />
-                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4">
-                        <div class="h-full">
-                            <nav class="breadcrumbs px-3">
+                    <div role="tabpanel" class="tab-content pt-3">
+                        <div class="w-full">
+                            <nav class="breadcrumbs px-3 pt-0">
                                 <ul>
-                                    <li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
+                                    <li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
                                         <button
-                                            v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
-                                            @click="mediaStore.getTree(crumb.path)"
+                                            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 }}
@@ -32,32 +33,31 @@
                                     </li>
                                 </ul>
                             </nav>
-                            <ul class="bg-base-300 h-[500px] overflow-auto m-1 py-1">
+                            <ul class="h-[475px] border border-my-gray rounded overflow-auto bg-base-300 m-1 py-1">
                                 <li
-                                    class="list-group-item browser-item even:bg-base-200 px-2"
+                                    class="even:bg-base-200 px-2 w-full"
                                     v-for="folder in mediaStore.folderList.folders"
                                     :key="folder.uid"
                                 >
-                                    <div class="grid grid-cols-[auto_40px]">
-                                        <div class="col browser-item-text">
-                                            <button
-                                                @click="
-                                                    ;[
-                                                        (selectedFolders = []),
-                                                        mediaStore.getTree(
-                                                            `/${mediaStore.folderList.source}/${folder.name}`.replace(
-                                                                /\/[/]+/g,
-                                                                '/'
-                                                            ),
-                                                            true
+                                    <div class="grid grid-cols-[auto_24px]">
+                                        <button
+                                            class="truncate text-left"
+                                            @click="
+                                                ;[
+                                                    (selectedFolders = []),
+                                                    mediaStore.getTree(
+                                                        `/${mediaStore.folderList.source}/${folder.name}`.replace(
+                                                            /\/[/]+/g,
+                                                            '/'
                                                         ),
-                                                    ]
-                                                "
-                                            >
-                                                <i class="bi-folder-fill" />
-                                                {{ folder.name }}
-                                            </button>
-                                        </div>
+                                                        true
+                                                    ),
+                                                ]
+                                            "
+                                        >
+                                            <i class="bi-folder-fill" />
+                                            {{ folder.name }}
+                                        </button>
                                         <div v-if="!generateFromAll" class="text-center">
                                             <input
                                                 class="checkbox checkbox-xs rounded"
@@ -87,145 +87,138 @@
                         aria-label="Advanced"
                         @change=";(advancedGenerator = true), resetCheckboxes()"
                     />
-                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
-                        <div>
-                            <div class="row">
-                                <div class="col col-10">
-                                    <nav aria-label="breadcrumb">
-                                        <ol class="breadcrumb border-0">
-                                            <li
-                                                class="breadcrumb-item"
-                                                v-for="(crumb, index) in mediaStore.folderCrumbs"
-                                                :key="index"
-                                                :active="index === mediaStore.folderCrumbs.length - 1"
-                                                @click.prevent="mediaStore.getTree(crumb.path, true)"
+                    <div role="tabpanel" class="tab-content pt-3">
+                        <div class="w-full">
+                            <div class="grid grid-cols-2 px-3 pt-0">
+                                <nav class="breadcrumbs 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)"
                                             >
-                                                <a
-                                                    v-if="
-                                                        mediaStore.folderCrumbs.length > 1 &&
-                                                        mediaStore.folderCrumbs.length - 1 > index
-                                                    "
-                                                    href="#"
-                                                >
-                                                    {{ crumb.text }}
-                                                </a>
-                                                <span v-else>{{ crumb.text }}</span>
-                                            </li>
-                                        </ol>
-                                    </nav>
-                                </div>
-                                <div class="col d-flex justify-content-end">
-                                    <button type="button" class="btn btn-primary p-2 py-0 m-1" @click="addTemplate()">
+                                                <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="flex justify-end">
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-primary"
+                                        title="Add time block"
+                                        @click="addTemplate()"
+                                    >
                                         <i class="bi bi-folder-plus"></i>
                                     </button>
                                 </div>
                             </div>
-                            <div class="row">
-                                <div class="col col-5 browser-col">
-                                    <Sortable
-                                        :list="mediaStore.folderList.folders"
-                                        :options="templateBrowserSortOptions"
-                                        item-key="uid"
-                                        class="list-group media-browser-scroll browser-div"
-                                        tag="ul"
-                                    >
-                                        <template #item="{ element, index }">
-                                            <li
-                                                :id="`adv_folder_${index}`"
-                                                class="draggable list-group-item browser-item"
-                                                :key="element.uid"
+                            <div
+                                class="h-[475px] border border-my-gray rounded grid grid-cols-[300px_auto] bg-base-300 m-1"
+                            >
+                                <Sortable
+                                    :list="mediaStore.folderList.folders"
+                                    :options="templateBrowserSortOptions"
+                                    item-key="uid"
+                                    class="overflow-auto border-e border-my-gray py-1"
+                                    tag="ul"
+                                >
+                                    <template #item="{ element, index }">
+                                        <li
+                                            :id="`adv_folder_${index}`"
+                                            class="even:bg-base-200 draggable px-2 w-full"
+                                            :key="element.uid"
+                                        >
+                                            <button
+                                                class="w-full truncate text-left"
+                                                @click="
+                                                    ;[
+                                                        (selectedFolders = []),
+                                                        mediaStore.getTree(
+                                                            `/${mediaStore.folderList.source}/${element.name}`.replace(
+                                                                /\/[/]+/g,
+                                                                '/'
+                                                            ),
+                                                            true
+                                                        ),
+                                                    ]
+                                                "
                                             >
-                                                <div class="row">
-                                                    <div class="col-1 browser-icons-col">
-                                                        <i class="bi-folder-fill browser-icons" />
-                                                    </div>
-                                                    <div class="col browser-item-text">
-                                                        <a
-                                                            class="link-light"
-                                                            href="#"
-                                                            @click="
-                                                                ;[
-                                                                    (selectedFolders = []),
-                                                                    mediaStore.getTree(
-                                                                        `/${mediaStore.folderList.source}/${element.name}`.replace(
-                                                                            /\/[/]+/g,
-                                                                            '/'
-                                                                        ),
-                                                                        true
-                                                                    ),
-                                                                ]
-                                                            "
-                                                        >
-                                                            {{ element.name }}
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                        </template>
-                                    </Sortable>
-                                </div>
-                                <div class="col template-col">
-                                    <ul class="list-group media-browser-scroll">
-                                        <li v-for="item in template.sources" :key="item.start" class="list-group-item">
-                                            <div class="input-group mb-3">
-                                                <span class="input-group-text">Start</span>
-                                                <input
-                                                    type="test"
-                                                    class="form-control"
-                                                    aria-label="Start"
-                                                    v-model="item.start"
-                                                />
-                                                <span class="input-group-text">Duration</span>
-                                                <input
-                                                    type="test"
-                                                    class="form-control"
-                                                    aria-label="Duration"
-                                                    v-model="item.duration"
-                                                />
-                                                <input
-                                                    type="checkbox"
-                                                    class="btn-check"
-                                                    :id="`shuffle-${item.start}`"
-                                                    autocomplete="off"
-                                                    v-model="item.shuffle"
-                                                />
-                                                <label class="btn btn-outline-primary" :for="`shuffle-${item.start}`">
-                                                    Shuffle
-                                                </label>
-                                            </div>
-
-                                            <Sortable
-                                                :list="item.paths"
-                                                item-key="index"
-                                                class="list-group w-100 border"
-                                                :style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
-                                                tag="ul"
-                                                :options="templateTargetSortOptions"
-                                                @add="addFolderToTemplate($event, item)"
-                                            >
-                                                <template #item="{ element, index }">
-                                                    <li
-                                                        :id="`path_${index}`"
-                                                        class="draggable grabbing list-group-item py-0"
-                                                        :key="index"
-                                                    >
-                                                        {{ element.split(/[\\/]+/).pop() }}
-                                                    </li>
-                                                </template>
-                                            </Sortable>
-
-                                            <div class="col d-flex justify-content-end">
-                                                <button
-                                                    type="button"
-                                                    class="btn btn-primary p-2 py-0 m-1"
-                                                    @click="removeTemplate(item)"
-                                                >
-                                                    <i class="bi-trash" />
-                                                </button>
-                                            </div>
+                                                <i class="bi-folder-fill" />
+                                                {{ element.name }}
+                                            </button>
                                         </li>
-                                    </ul>
-                                </div>
+                                    </template>
+                                </Sortable>
+                                <ul class="overflow-auto p-2">
+                                    <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"
+                                    >
+                                        <div class="grid grid-cols-[50px_67px_70px_67px_50px] join">
+                                            <div
+                                                class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
+                                            >
+                                                Start:
+                                            </div>
+                                            <input
+                                                type="text"
+                                                class="input input-sm input-bordered join-item px-2 text-center"
+                                                v-model="item.start"
+                                            />
+                                            <div
+                                                class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
+                                            >
+                                                Duration:
+                                            </div>
+                                            <input
+                                                type="text"
+                                                class="input input-sm input-bordered join-item px-2 text-center"
+                                                v-model="item.duration"
+                                            />
+                                            <button
+                                                class="btn btn-sm input-bordered join-item"
+                                                :class="item.shuffle ? 'bg-base-100' : 'bg-base-300'"
+                                                @click="item.shuffle = !item.shuffle"
+                                            >
+                                                {{ item.shuffle ? 'Shuffle' : 'Sorted' }}
+                                            </button>
+                                        </div>
+
+                                        <Sortable
+                                            :list="item.paths"
+                                            item-key="index"
+                                            class="w-full border border-my-gray rounded"
+                                            :style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
+                                            tag="ul"
+                                            :options="templateTargetSortOptions"
+                                            @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">
+                                                    <i class="bi-folder-fill" />
+                                                    {{ element.split(/[\\/]+/).pop() }}
+                                                </li>
+                                            </template>
+                                        </Sortable>
+
+                                        <div class="w-full flex justify-end">
+                                            <button
+                                                type="button"
+                                                class="btn btn-sm bg-base-100"
+                                                @click="removeTemplate(item)"
+                                            >
+                                                <i class="bi-trash" />
+                                            </button>
+                                        </div>
+                                    </li>
+                                </ul>
                             </div>
                         </div>
                     </div>
@@ -236,14 +229,18 @@
                 <div v-if="!advancedGenerator" class="form-control">
                     <label class="label cursor-pointer w-12">
                         <span class="label-text">All</span>
-                        <input type="checkbox" v-model="generateFromAll" class="checkbox checkbox-xs rounded" @change="resetCheckboxes()" />
+                        <input
+                            type="checkbox"
+                            v-model="generateFromAll"
+                            class="checkbox checkbox-xs rounded"
+                            @change="resetCheckboxes()"
+                        />
                     </label>
                 </div>
                 <div class="join ms-2">
                     <button
                         type="button"
                         class="btn btn-sm btn-primary join-item"
-                        data-bs-dismiss="modal"
                         @click="resetCheckboxes(), resetTemplate(), close()"
                     >
                         Cancel
@@ -251,7 +248,6 @@
                     <button
                         type="button"
                         class="btn btn-sm btn-primary join-item"
-                        data-bs-dismiss="modal"
                         @click="generatePlaylist(), close()"
                     >
                         Ok
@@ -262,6 +258,8 @@
     </div>
 </template>
 <script setup lang="ts">
+const { $dayjs } = useNuxtApp()
+
 const authStore = useAuth()
 const configStore = useConfig()
 const indexStore = useIndex()
@@ -281,7 +279,6 @@ defineProps({
 })
 
 const advancedGenerator = ref(false)
-const playlistIsLoading = ref(false)
 const selectedFolders = ref([] as string[])
 const generateFromAll = ref(false)
 const template = ref({
@@ -299,7 +296,7 @@ const templateTargetSortOptions = {
 }
 
 async function generatePlaylist() {
-    playlistIsLoading.value = true
+    playlistStore.isLoading = true
     let body = null as BodyObject | null
 
     if (selectedFolders.value.length > 0 && !generateFromAll.value) {
@@ -326,17 +323,17 @@ async function generatePlaylist() {
                 response.program,
                 false
             )
-            indexStore.msgAlert('alert-success', 'Generate Playlist done...', 2)
+            indexStore.msgAlert('success', 'Generate Playlist done...', 2)
         })
         .catch((e: any) => {
-            indexStore.msgAlert('alert-error', e.data ? e.data : e, 4)
+            indexStore.msgAlert('error', e.data ? e.data : e, 4)
         })
 
     // reset selections
     resetCheckboxes()
     resetTemplate()
 
-    playlistIsLoading.value = false
+    playlistStore.isLoading = false
 }
 
 function setSelectedFolder(event: any, folder: string) {
diff --git a/components/SystemStats.vue b/components/SystemStats.vue
index 9ab2610e..43a8d03f 100644
--- a/components/SystemStats.vue
+++ b/components/SystemStats.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left">
+    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow">
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
diff --git a/layouts/default.vue b/layouts/default.vue
index 4f27636b..05f1a58f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="min-h-screen bg-base-200">
-        <div v-if="authStore.isLogin && route.name !== 'index'">
+        <div v-if="authStore.isLogin && route.name !== 'index'" class="sticky top-0 z-10">
             <Menu />
         </div>
 
@@ -18,12 +18,5 @@ const authStore = useAuth()
 
 const route = useRoute()
 
-onMounted(() => {
-    // @ts-ignore
-    // new $bootstrap.Tooltip(document.body, {
-    //     selector: "[data-tooltip=tooltip]",
-    //     container: "body"
-    // })
-})
 await configStore.nuxtClientInit()
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 35277947..404d4d2b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -61,13 +61,6 @@ export default defineNuxtConfig({
     },
 
     vite: {
-        css: {
-            preprocessorOptions: {
-                scss: {
-                    additionalData: '@import "@/assets/scss/_variables.scss";',
-                },
-            },
-        },
         build: {
             chunkSizeWarningLimit: 800000,
         },
diff --git a/package-lock.json b/package-lock.json
index a58ee488..4dd869e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@nuxtjs/color-mode": "^3.3.3",
         "@pinia/nuxt": "^0.5.1",
         "@popperjs/core": "^2.11.8",
+        "@vuepic/vue-datepicker": "^8.4.0",
         "@vueuse/nuxt": "^10.9.0",
         "bootstrap-icons": "^1.11.3",
         "cookie-universal-nuxt": "^2.2.2",
@@ -4801,6 +4802,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
       "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz",
+      "integrity": "sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@vueuse/components": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
@@ -6711,6 +6726,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
diff --git a/package.json b/package.json
index df3fea48..177bb27c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@nuxtjs/color-mode": "^3.3.3",
     "@pinia/nuxt": "^0.5.1",
     "@popperjs/core": "^2.11.8",
+    "@vuepic/vue-datepicker": "^8.4.0",
     "@vueuse/nuxt": "^10.9.0",
     "bootstrap-icons": "^1.11.3",
     "cookie-universal-nuxt": "^2.2.2",
diff --git a/pages/index.vue b/pages/index.vue
index 65fef5b6..f9e36976 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,6 +15,21 @@
                     Configure
                 </NuxtLink>
                 <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>
+                </label>
             </div>
         </div>
         <div v-else class="w-96 min-w-full flex flex-col justify-center items-center px-4">
@@ -45,7 +60,7 @@
                         <div
                             v-if="showLoginError"
                             role="alert"
-                            class="alert alert-error w-auto rounded z-2 h-12 p-[0.7rem]"
+                            class="alert error w-auto rounded z-2 h-12 p-[0.7rem]"
                         >
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -70,8 +85,10 @@
 </template>
 
 <script setup lang="ts">
+const colorMode = useColorMode()
 const authStore = useAuth()
 const configStore = useConfig()
+const indexStore = useIndex()
 
 const formError = ref('')
 const showLoginError = ref(false)
@@ -103,6 +120,16 @@ async function login() {
     }
 }
 
+function toggleDarkTheme() {
+    indexStore.darkMode = !indexStore.darkMode
+
+    if (indexStore.darkMode) {
+        colorMode.preference = 'dark'
+    } else {
+        colorMode.preference = 'light'
+    }
+}
+
 async function logout() {
     try {
         authStore.removeToken()
diff --git a/pages/logging.vue b/pages/logging.vue
index 0bdb0a27..da29e4cb 100644
--- a/pages/logging.vue
+++ b/pages/logging.vue
@@ -1,7 +1,18 @@
 <template>
     <div class="flex justify-end p-3 h-14">
         <div>
-            <input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
+            <VueDatePicker
+                    v-model="listDate"
+                    :clearable="false"
+                    :hide-navigation="['time']"
+                    :action-row="{ showCancel: false, showSelect: false, showPreview: false }"
+                    :format="calendarFormat"
+                    model-type="yyyy-MM-dd"
+                    auto-apply
+                    :dark="colorMode.value === 'dark'"
+                    input-class-name="input input-sm !input-bordered !w-[230px] text-right !pe-3"
+                    required
+                />
         </div>
     </div>
     <div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
@@ -12,6 +23,8 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
+const colorMode = useColorMode()
+
 useHead({
     title: 'Logging | ffplayout',
 })
@@ -33,6 +46,10 @@ watch([listDate, configID], () => {
     getLog()
 })
 
+const calendarFormat = (date: Date) => {
+    return $dayjs(date).format('dddd DD. MMM YYYY')
+}
+
 async function getLog() {
     let date = listDate.value
 
@@ -54,49 +71,49 @@ async function getLog() {
 }
 </script>
 
-<style lang="scss">
+<style>
 .log-time {
-    color: $log-time;
+    color: #666864;
 }
 
 .log-number {
-    color: $log-number;
+    color: #e2c317;
 }
 
 .log-addr {
-    color: $log-addr;
+    color: #ad7fa8;
     font-weight: 500;
 }
 
 .log-cmd {
-    color: $log-cmd;
+    color: #6c95c2;
 }
 
 .log-info {
-    color: $log-info;
+    color: #8ae234;
 }
 
 .log-warning {
-    color: $log-warning;
+    color: #ff8700;
 }
 
 .log-error {
-    color: $log-error;
+    color: #d32828;
 }
 
 .log-debug {
-    color: $log-debug;
+    color: #6e99c7;
 }
 
 .log-decoder {
-    color: $log-decoder;
+    color: #56efff;
 }
 
 .log-encoder {
-    color: $log-encoder;
+    color: #45ccee;
 }
 
 .log-server {
-    color: $log-server;
+    color: #23cbdd;
 }
 </style>
diff --git a/pages/media.vue b/pages/media.vue
index 9804b0cf..37e03fc2 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -21,15 +21,15 @@
             </ul>
         </nav>
 
-        <div class="h-[calc(100%-34px)] bg-base-100">
+        <div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
             <div
                 v-if="mediaStore.isLoading"
-                class="w-[calc(100%-16px)] h-[calc(100%-174px)] absolute z-10 flex justify-center bg-base-100/70"
+                class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
             >
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
-            <splitpanes :horizontal="horizontal" class="border border-my-gray rounded">
-                <pane min-size="14" max-size="80" size="24" class="h-full pb-1">
+            <splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
+                <pane min-size="14" max-size="80" size="20" class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-t' : 'rounded-s'">
                     <ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
                         <li
                             v-if="mediaStore.folderTree.parent_folders.length > 0"
@@ -69,7 +69,7 @@
                         </li>
                     </ul>
                 </pane>
-                <pane class="h-full pb-1">
+                <pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
                     <ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
                         <li
                             class="grid grid-cols-[auto_28px] px-2 gap-1"
@@ -155,15 +155,16 @@
                 </pane>
             </splitpanes>
         </div>
-    </div>
-    <div class="flex justify-end pe-10 mt-7">
-        <div class="join">
-            <button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
-                <i class="bi-folder-plus" />
-            </button>
-            <button class="btn btn-sm btn-primary join-item" title="Upload File" @click="showUploadModal = true">
-                <i class="bi-upload" />
-            </button>
+
+        <div class="flex justify-end py-4 pe-2">
+            <div class="join">
+                <button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
+                    <i class="bi-folder-plus" />
+                </button>
+                <button class="btn btn-sm btn-primary join-item" title="Upload File" @click="showUploadModal = true">
+                    <i class="bi-upload" />
+                </button>
+            </div>
         </div>
     </div>
 
@@ -366,7 +367,7 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
                 mediaStore.getTree(mediaStore.folderTree.source)
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
+                indexStore.msgAlert('error', `Delete error: ${e}`, 3)
             })
     }
 }
@@ -428,12 +429,12 @@ async function deleteFileOrFolder(del: boolean) {
         })
             .then(async (response) => {
                 if (response.status !== 200) {
-                    indexStore.msgAlert('alert-error', `${await response.text()}`, 5)
+                    indexStore.msgAlert('error', `${await response.text()}`, 5)
                 }
                 mediaStore.getTree(mediaStore.folderTree.source)
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete error: ${e}`, 5)
+                indexStore.msgAlert('error', `Delete error: ${e}`, 5)
             })
     }
 
@@ -461,7 +462,7 @@ async function renameFile(ren: boolean) {
                 mediaStore.getTree(mediaStore.folderTree.source)
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
+                indexStore.msgAlert('error', `Delete error: ${e}`, 3)
             })
     }
 
@@ -482,7 +483,7 @@ async function createFolder(create: boolean) {
         lastPath.value = mediaStore.folderTree.source
 
         if (mediaStore.folderTree.folders.includes(folderName.value)) {
-            indexStore.msgAlert('alert-warning', `Folder "${folderName.value.name}" exists already!`, 2)
+            indexStore.msgAlert('warning', `Folder "${folderName.value.name}" exists already!`, 2)
 
             return
         }
@@ -493,11 +494,11 @@ async function createFolder(create: boolean) {
             body: JSON.stringify({ source: path }),
         })
             .then(() => {
-                indexStore.msgAlert('alert-success', 'Folder create done...', 2)
+                indexStore.msgAlert('success', 'Folder create done...', 2)
             })
             .catch((e: string) => {
-                indexStore.msgAlert('alert-error', `Folder create error: ${e}`, 3)
-                indexStore.alertVariant = 'alert-error'
+                indexStore.msgAlert('error', `Folder create error: ${e}`, 3)
+                indexStore.alertVariant = 'error'
             })
 
         mediaStore.getTree(lastPath.value)
@@ -536,7 +537,7 @@ async function upload(file: any): Promise<null | undefined> {
         }
 
         xhr.value.upload.onerror = () => {
-            indexStore.msgAlert('alert-error', `Upload error: ${xhr.value.status}`, 3)
+            indexStore.msgAlert('error', `Upload error: ${xhr.value.status}`, 3)
 
             resolve(undefined)
         }
@@ -563,7 +564,7 @@ async function uploadFiles(upl: boolean) {
             currentNumber.value = i + 1
 
             if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
-                indexStore.msgAlert('alert-warning', 'File exists already!', 3)
+                indexStore.msgAlert('warning', 'File exists already!', 3)
             } else {
                 await upload(file)
             }
diff --git a/pages/message.vue b/pages/message.vue
index f351d4c0..6e8d17c4 100644
--- a/pages/message.vue
+++ b/pages/message.vue
@@ -352,9 +352,9 @@ async function savePreset() {
         })
 
         if (response.status === 200) {
-            indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
+            indexStore.msgAlert('success', 'Save Preset done!', 2)
         } else {
-            indexStore.msgAlert('alert-error', 'Save Preset failed!', 2)
+            indexStore.msgAlert('error', 'Save Preset failed!', 2)
         }
     }
 }
@@ -390,10 +390,10 @@ async function createNewPreset() {
     })
 
     if (response.status === 200) {
-        indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
+        indexStore.msgAlert('success', 'Save Preset done!', 2)
         getPreset(-1)
     } else {
-        indexStore.msgAlert('alert-error', 'Save Preset failed!', 2)
+        indexStore.msgAlert('error', 'Save Preset failed!', 2)
     }
 }
 
@@ -431,9 +431,9 @@ async function submitMessage() {
     })
 
     if (response.status === 200) {
-        indexStore.msgAlert('alert-success', 'Sending success...', 2)
+        indexStore.msgAlert('success', 'Sending success...', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Sending failed...', 2)
+        indexStore.msgAlert('error', 'Sending failed...', 2)
     }
 }
 </script>
diff --git a/pages/player.vue b/pages/player.vue
index fdaa8f0b..64221253 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -3,15 +3,31 @@
         <Control />
         <div class="flex justify-end p-1">
             <div>
-                <input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
+                <VueDatePicker
+                    v-model="listDate"
+                    :clearable="false"
+                    :hide-navigation="['time']"
+                    :action-row="{ showCancel: false, showSelect: false, showPreview: false }"
+                    :format="calendarFormat"
+                    model-type="yyyy-MM-dd"
+                    auto-apply
+                    :dark="colorMode.value === 'dark'"
+                    input-class-name="input input-sm !input-bordered !w-[230px] text-right !pe-3"
+                    required
+                />
             </div>
         </div>
-        <div class="p-1 min-h-[500px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
-            <splitpanes class="border border-my-gray rounded">
-                <pane class="h-full" min-size="0" max-size="80" size="20">
+        <div class="p-1 min-h-[260px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
+            <splitpanes class="border border-my-gray rounded shadow">
+                <pane
+                    class="relative h-full !bg-base-300 rounded-s"
+                    min-size="0"
+                    max-size="80"
+                    :size="width > 768 ? '20' : '0'"
+                >
                     <div
                         v-if="mediaStore.isLoading"
-                        class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
+                        class="h-full w-full absolute z-10 flex justify-center bg-base-100/70"
                     >
                         <span class="loading loading-spinner loading-lg" />
                     </div>
@@ -34,7 +50,7 @@
                         </div>
                     </div>
 
-                    <ul class="h-[calc(100%-40px)] overflow-auto m-1">
+                    <ul class="h-[calc(100%-48px)] overflow-auto m-1">
                         <li class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
                             <button
                                 class="truncate"
@@ -48,10 +64,11 @@
                             <template #item="{ element, index }">
                                 <li
                                     :id="`file_${index}`"
-                                    class="draggable px-1 grid grid-cols-[auto_110px]"
+                                    class="px-1 grid grid-cols-[auto_110px]"
+                                    :class="{ 'grabbing cursor-grab': width > 768 }"
                                     :key="element.name"
                                 >
-                                    <div class="truncate cursor-grab">
+                                    <div class="truncate">
                                         <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
                                         <i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
                                         <i
@@ -77,9 +94,15 @@
                     </ul>
                 </pane>
                 <pane>
-                    <div class="w-full h-full">
+                    <div class="relative w-full h-full !bg-base-300 rounded-e">
                         <div
-                            class="grid grid-cols-[70px_auto_50px_70px_70px_70px_30px_60px_80px] bg-base-100 py-2 px-3 border-b border-my-gray"
+                            v-if="playlistStore.isLoading"
+                            class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
+                        >
+                            <span class="loading loading-spinner loading-lg" />
+                        </div>
+                        <div
+                            class="grid grid-cols-[70px_auto_50px_70px_45px] md:grid-cols-[70px_auto_50px_70px_70px_70px_30px_45px_50px] bg-base-100 rounded-tr-lg py-2 px-3 border-b border-my-gray"
                         >
                             <div>Start</div>
                             <div>File</div>
@@ -91,19 +114,12 @@
                             <div class="text-center">Edit</div>
                             <div class="hidden md:flex justify-center">Delete</div>
                         </div>
-                        <div
-                            v-if="playlistIsLoading"
-                            class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
-                        >
-                            <span class="loading loading-spinner loading-lg" />
-                        </div>
-                        <div id="scroll-container" class="h-full overflow-auto">
+                        <div id="scroll-container" class="h-[calc(100%-44px)] overflow-auto">
                             <Sortable
                                 :list="playlistStore.playlist"
                                 item-key="uid"
-                                class=""
                                 :style="`height: ${
-                                    playlistStore.playlist ? playlistStore.playlist.length * 38 + 76 : 300
+                                    playlistStore.playlist ? playlistStore.playlist.length * 38 + 38 : 300
                                 }px`"
                                 tag="ul"
                                 :options="playlistSortOptions"
@@ -113,16 +129,18 @@
                                 <template #item="{ element, index }">
                                     <li
                                         :id="`clip_${index}`"
-                                        class="draggable bg-base-300 even:bg-base-100 grid grid-cols-[70px_auto_50px_70px_70px_70px_30px_60px_80px] h-[38px] px-3 py-[8px]"
+                                        class="draggable grid grid-cols-[70px_auto_50px_70px_45px] md:grid-cols-[70px_auto_50px_70px_70px_70px_30px_45px_50px] h-[38px] px-3 py-[8px]"
                                         :class="
                                             index === playlistStore.currentClipIndex && listDate === todayDate
-                                                ? 'active-playlist-clip'
-                                                : ''
+                                                ? 'bg-lime-500/30'
+                                                : 'bg-base-300 even:bg-base-100'
                                         "
                                         :key="element.uid"
                                     >
                                         <div>{{ secondsToTime(element.begin) }}</div>
-                                        <div class="grabbing truncate cursor-grab">{{ filename(element.source) }}</div>
+                                        <div class="truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
+                                            {{ filename(element.source) }}
+                                        </div>
                                         <div class="text-center">
                                             <button @click=";(showPreviewModal = true), setPreviewData(element.source)">
                                                 <i class="bi-play-fill" />
@@ -148,7 +166,9 @@
                                                 <i class="bi-pencil-square" />
                                             </button>
                                         </div>
-                                        <div class="text-center hidden md:flex justify-center">
+                                        <div
+                                            class="text-center hidden md:flex justify-center hover:text-base-content/70"
+                                        >
                                             <button @click="deletePlaylistItem(index)">
                                                 <i class="bi-x-circle-fill" />
                                             </button>
@@ -162,7 +182,7 @@
             </splitpanes>
         </div>
 
-        <div class="join flex justify-end m-3">
+        <div class="h-16 join flex justify-end p-3">
             <button class="btn btn-sm btn-primary join-item" title="Copy Playlist" @click="showCopyModal = true">
                 <i class="bi-files" />
             </button>
@@ -209,7 +229,12 @@
             </button>
         </div>
 
-        <Modal :show="showPreviewModal" :title="`Preview: ${previewName}`" :modal-action="closePlayer">
+        <Modal
+            :show="showPreviewModal"
+            :title="`Preview: ${previewName}`"
+            :hide-buttons="true"
+            :modal-action="closePlayer"
+        >
             <div class="w-[1024px] max-w-full aspect-video">
                 <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
                 <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
@@ -300,7 +325,9 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
+const colorMode = useColorMode()
 const { $_, $dayjs } = useNuxtApp()
+const { width } = useWindowSize({ initialWidth: 800 })
 const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
 const { processPlaylist, genUID } = playlistOperations()
 const contentType = { 'content-type': 'application/json;charset=UTF-8' }
@@ -319,7 +346,6 @@ const { configID } = storeToRefs(useConfig())
 const { listDate } = storeToRefs(usePlaylist())
 
 const fileImport = ref()
-const playlistIsLoading = ref(false)
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const targetDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const editId = ref(-1)
@@ -339,6 +365,7 @@ const isVideo = ref(false)
 
 const browserSortOptions = {
     group: { name: 'playlist', pull: 'clone', put: false },
+    handle: '.grabbing',
     sort: false,
 }
 const playlistSortOptions = {
@@ -382,10 +409,14 @@ function scrollTo(index: number) {
     }
 }
 
+const calendarFormat = (date: Date) => {
+    return $dayjs(date).format('dddd DD. MMM YYYY')
+}
+
 async function getPlaylist() {
-    playlistIsLoading.value = true
+    playlistStore.isLoading = true
     await playlistStore.getPlaylist(listDate.value)
-    playlistIsLoading.value = false
+    playlistStore.isLoading = false
 
     if (listDate.value === todayDate.value) {
         scrollTo(playlistStore.currentClipIndex)
@@ -607,11 +638,11 @@ async function importPlaylist(imp: boolean) {
         const formData = new FormData()
         formData.append(textFile.value[0].name, textFile.value[0])
 
-        playlistIsLoading.value = true
+        playlistStore.isLoading = true
         await $fetch(
             `/api/file/${configStore.configGui[configStore.configID].id}/import/?file=${
                 textFile.value[0].name
-            }&date=${listDate}`,
+            }&date=${listDate.value}`,
             {
                 method: 'PUT',
                 headers: authStore.authHeader,
@@ -619,15 +650,15 @@ async function importPlaylist(imp: boolean) {
             }
         )
             .then(() => {
-                indexStore.msgAlert('alert-success', 'Import success!', 2)
+                indexStore.msgAlert('success', 'Import success!', 2)
                 playlistStore.getPlaylist(listDate.value)
             })
             .catch((e: string) => {
-                indexStore.msgAlert('alert-error', e, 4)
+                indexStore.msgAlert('error', e, 4)
             })
     }
 
-    playlistIsLoading.value = false
+    playlistStore.isLoading = false
     textFile.value = null
     fileImport.value.value = null
 }
@@ -658,13 +689,13 @@ async function savePlaylist(save: boolean) {
             }),
         })
             .then((response: any) => {
-                indexStore.msgAlert('alert-success', response, 2)
+                indexStore.msgAlert('success', response, 2)
             })
             .catch((e: any) => {
                 if (e.status === 409) {
-                    indexStore.msgAlert('alert-warning', e.data, 2)
+                    indexStore.msgAlert('warning', e.data, 2)
                 } else {
-                    indexStore.msgAlert('alert-error', e, 4)
+                    indexStore.msgAlert('error', e, 4)
                 }
             })
     }
@@ -674,140 +705,14 @@ async function deletePlaylist(del: boolean) {
     showDeleteModal.value = false
 
     if (del) {
-        await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate}`, {
+        await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate.value}`, {
             method: 'DELETE',
             headers: { ...contentType, ...authStore.authHeader },
         }).then(() => {
             playlistStore.playlist = []
 
-            indexStore.msgAlert('alert-warning', 'Playlist deleted...', 2)
+            indexStore.msgAlert('warning', 'Playlist deleted...', 2)
         })
     }
 }
 </script>
-
-<style lang="scss" scoped>
-.filename,
-.browser-item {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.loading-overlay {
-    width: 100%;
-    height: 100%;
-}
-
-.player-container {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-    height: calc(100% - 140px);
-}
-
-.playlist-container {
-    height: 100%;
-    border: 1px solid $border-color;
-    border-top: none;
-    border-left: none;
-    border-radius: $b-radius;
-}
-
-.player-container .media-browser-scroll {
-    height: calc(100% - 39px);
-}
-
-.active-playlist-clip {
-    background-color: #565e6a !important;
-}
-
-.list-row {
-    height: calc(100% - 480px);
-    min-height: 300px;
-}
-
-.pane-row {
-    margin: 0;
-}
-
-.playlist-container {
-    width: 100%;
-    height: 100%;
-}
-
-.timecode {
-    min-width: 65px;
-    max-width: 90px;
-}
-
-.playlist-input {
-    min-width: 42px;
-    max-width: 60px;
-}
-
-.playlist-list-group,
-#playlist-group {
-    height: 100%;
-}
-
-.playlist-item {
-    height: 38px;
-}
-
-.playlist-item:nth-of-type(odd) {
-    background-color: #3b424a;
-}
-
-.playlist-item:hover {
-    background-color: #1c1e22;
-}
-
-.overLength {
-    background-color: #ed890641 !important;
-}
-
-#generateModal .modal-body {
-    height: 600px;
-}
-
-.browser-col,
-.template-col {
-    height: 532px;
-}
-
-#generateModal {
-    --bs-modal-width: 800px;
-}
-
-#generateModal .media-browser-scroll {
-    height: calc(100% - 35px);
-}
-
-#generateModal .browser-div li:nth-of-type(odd) {
-    background-color: #3b424a;
-}
-
-.select-all-div {
-    margin-right: 20px;
-}
-
-.active-playlist-clip {
-    background-color: #405f51 !important;
-}
-</style>
-<style>
-@media (max-width: 575px) {
-    .mobile-hidden {
-        display: none;
-    }
-
-    /*.splitpanes__splitter {
-        display: none !important;
-    }*/
-
-    .playlist-pane {
-        width: 100% !important;
-    }
-}
-</style>
diff --git a/plugins/dayjs.ts b/plugins/dayjs.ts
index 43e06fef..d4deaf02 100644
--- a/plugins/dayjs.ts
+++ b/plugins/dayjs.ts
@@ -1,8 +1,15 @@
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+import LocalizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import utc from 'dayjs/plugin/utc.js'
 
+// import 'dayjs/locale/de'
+// import 'dayjs/locale/en'
+// import 'dayjs/locale/es'
+// import 'dayjs/locale/pt'
+// import 'dayjs/locale/ru'
+
 declare module '#app' {
     interface NuxtApp {
         $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
@@ -16,6 +23,7 @@ declare module '@vue/runtime-core' {
 
 export default defineNuxtPlugin((nuxtApp) => {
     dayjs.extend(customParseFormat)
+    dayjs.extend(LocalizedFormat)
     dayjs.extend(timezone)
     dayjs.extend(utc)
 
diff --git a/plugins/vue-datepicker.client.ts b/plugins/vue-datepicker.client.ts
new file mode 100644
index 00000000..c549371b
--- /dev/null
+++ b/plugins/vue-datepicker.client.ts
@@ -0,0 +1,6 @@
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.component('VueDatePicker', VueDatePicker)
+})
diff --git a/stores/config.ts b/stores/config.ts
index 8a795627..a733b2fc 100644
--- a/stores/config.ts
+++ b/stores/config.ts
@@ -74,7 +74,7 @@ export const useConfig = defineStore('config', {
                         },
                     ]
 
-                    indexStore.msgAlert('alert-error', e, 3)
+                    indexStore.msgAlert('error', e, 3)
                 })
         },
 
@@ -143,7 +143,7 @@ export const useConfig = defineStore('config', {
                     this.configPlayout = data
                 })
                 .catch(() => {
-                    indexStore.msgAlert('alert-error', 'No playout config found!', 3)
+                    indexStore.msgAlert('error', 'No playout config found!', 3)
                 })
         },
 
diff --git a/stores/index.ts b/stores/index.ts
index 6c65562a..4668783b 100644
--- a/stores/index.ts
+++ b/stores/index.ts
@@ -4,7 +4,7 @@ export const useIndex = defineStore('index', {
     state: () => ({
         darkMode: false,
         showAlert: false,
-        alertVariant: 'alert-success',
+        alertVariant: 'success',
         alertMsg: '',
     }),
 
@@ -17,9 +17,9 @@ export const useIndex = defineStore('index', {
 
             setTimeout(() => {
                 this.showAlert = false
-                this.alertVariant = 'alert-success'
+                this.alertVariant = 'success'
                 this.alertMsg = ''
-            }, seconds * 1000);
+            }, seconds * 1000)
         },
     },
 })
diff --git a/stores/media.ts b/stores/media.ts
index bcaf9957..0e78c52f 100644
--- a/stores/media.ts
+++ b/stores/media.ts
@@ -15,7 +15,10 @@ export const useMedia = defineStore('media', {
     getters: {},
     actions: {
         async getTree(path: string, foldersOnly: boolean = false) {
-            this.isLoading = true
+            if (!foldersOnly) {
+                this.isLoading = true
+            }
+
             const authStore = useAuth()
             const configStore = useConfig()
             const indexStore = useIndex()
@@ -30,11 +33,10 @@ export const useMedia = defineStore('media', {
                 body: JSON.stringify({ source: path, folders_only: foldersOnly }),
             })
                 .then((response) => {
-
                     if (response.status === 200) {
                         return response.json()
                     } else {
-                        indexStore.msgAlert('alert-error', 'Storage not exist!', 3)
+                        indexStore.msgAlert('error', 'Storage not exist!', 3)
 
                         return {
                             source: '',
@@ -63,19 +65,19 @@ export const useMedia = defineStore('media', {
 
                     if (foldersOnly) {
                         this.folderCrumbs = crumbs
-                        data.parent_folders = data.parent_folders.map((i: any) => ({uid: genUID(), name: i}))
-                        data.folders = data.folders.map((i: any) => ({uid: genUID(), name: i}))
+                        data.parent_folders = data.parent_folders.map((i: any) => ({ uid: genUID(), name: i }))
+                        data.folders = data.folders.map((i: any) => ({ uid: genUID(), name: i }))
                         this.folderList = data
                     } else {
                         this.currentPath = path
                         this.crumbs = crumbs
-                        data.parent_folders = data.parent_folders.map((i: any) => ({uid: genUID(), name: i}))
-                        data.folders = data.folders.map((i: any) => ({uid: genUID(), name: i}))
+                        data.parent_folders = data.parent_folders.map((i: any) => ({ uid: genUID(), name: i }))
+                        data.folders = data.folders.map((i: any) => ({ uid: genUID(), name: i }))
                         this.folderTree = data
                     }
                 })
 
-                this.isLoading = false
+            this.isLoading = false
         },
     },
 })
diff --git a/stores/playlist.ts b/stores/playlist.ts
index 52c6e34b..e8f8e684 100644
--- a/stores/playlist.ts
+++ b/stores/playlist.ts
@@ -13,6 +13,7 @@ const { processPlaylist } = playlistOperations()
 export const usePlaylist = defineStore('playlist', {
     state: () => ({
         playlist: [] as PlaylistItem[],
+        isLoading: false,
         listDate: dayjs().format('YYYY-MM-DD'),
         progressValue: 0,
         currentClip: 'No clip is playing',
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 67be6251..d8a25964 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,7 @@ module.exports = {
             },
             boxShadow: {
                 '3xl': '0 1em 5em rgba(0, 0, 0, 0.3)',
-                'glow': '0 0 20px rgba(0, 0, 0, 0.3)',
+                'glow': '0 0 10px rgba(0, 0, 0, 0.3)',
             },
             colors: {
                 'my-gray': 'var(--my-gray)',