From 3381ca38057a21bceb74663ec5291ca99b9bf3ce Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 19 Jun 2026 17:41:04 +0300
Subject: [PATCH] refactor: re-design simple mode toggle.

---
 FAQ.md                                 |   25 +-
 app/features/ytdlp/utils.py            |    5 +-
 app/routes/api/_static.py              |   12 +-
 ui/app/components/AppRoot.vue          |  159 +++
 ui/app/components/ConnectionBanner.vue |   43 +
 ui/app/components/Markdown.vue         |    4 +
 ui/app/components/SettingsPanel.vue    |   97 +-
 ui/app/components/Simple.vue           | 1576 ------------------------
 ui/app/components/ThemeButton.vue      |   66 +
 ui/app/composables/useMode.ts          |  130 ++
 ui/app/layouts/default.vue             | 1126 +++++++----------
 ui/app/middleware/mode.global.ts       |   35 +
 ui/app/pages/index.vue                 |   10 -
 ui/app/pages/simple.vue                | 1471 +++++++++++++++++++++-
 ui/tests/composables/useMode.test.ts   |   44 +
 15 files changed, 2459 insertions(+), 2344 deletions(-)
 create mode 100644 ui/app/components/AppRoot.vue
 create mode 100644 ui/app/components/ConnectionBanner.vue
 delete mode 100644 ui/app/components/Simple.vue
 create mode 100644 ui/app/components/ThemeButton.vue
 create mode 100644 ui/app/composables/useMode.ts
 create mode 100644 ui/app/middleware/mode.global.ts
 create mode 100644 ui/tests/composables/useMode.test.ts

diff --git a/FAQ.md b/FAQ.md
index 31a68061..6b7bee3a 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -3,6 +3,9 @@
 Certain configuration values can be set via environment variables, using the `-e` parameter on the docker command line, 
 or the `environment:` section in `compose.yaml` file.
 
+<details>
+<summary>Click to expand</summary>
+
 | Environment Variable            | Description                                                         | Default               |
 | ------------------------------- | ------------------------------------------------------------------- | --------------------- |
 | TZ                              | The timezone to use for the application                             | `(not_set)`           |
@@ -61,19 +64,19 @@ or the `environment:` section in `compose.yaml` file.
 | YTP_THUMB_GENERATE              | Enable ffmpeg thumbnail generation when no local thumbnail exists.  | `true`                |
 | YTP_THUMB_SIDECAR               | Save generated thumbnails next to media instead of temp cache.      | `false`               |
 | YTP_DISABLE_EXEC                | Strip some dangerous yt-dlp options.                                | `false`               |
+</details>
 
 > [!NOTE]
-> To raise the maximum workers for specific extractor, you need to add a ENV variable that follows the pattern `YTP_MAX_WORKERS_FOR_<EXTRACTOR_NAME>`.
-> The extractor name must be in uppercase, to know the extractor name, check the log for the specific extractor used for the download.
-> The limit should not exceed the `YTP_MAX_WORKERS` value as it will be ignored.
-
-> [!IMPORTANT]
-> The env variable `YTP_SIMPLE_MODE` only control what being displayed for first time visitor, the users can still switch between the two modes via the WebUI settings page.
-
-## Notes about YTP_AUTO_CLEAR_HISTORY_DAYS
-
-- `0` days means no automatic clearing of the download history. lowest value that will trigger the clearing is `1` day.
-- This setting will **NOT** delete the downloaded files, it will only clear the history from the database.
+> To raise the worker limit for a specific extractor, set an env variable using this format: `YTP_MAX_WORKERS_FOR_<EXTRACTOR_NAME>`
+> The extractor name must be uppercase. You can find the extractor name in the download logs. This value cannot be 
+> higher than `YTP_MAX_WORKERS`; higher values are ignored.
+>
+> `YTP_SIMPLE_MODE=true` only applies when the browser has no saved layout choice yet. Users can still choose a layout in 
+> WebUI Settings. `/?simple=1` forces and saves Simple for that browser.
+> 
+> `YTP_AUTO_CLEAR_HISTORY_DAYS`  `0` days means no automatic clearing of the download history. lowest value that will 
+> trigger the clearing is `1` day. This setting will **NOT** delete the downloaded files, it will only clear the 
+> history from the database.
 
 # Browser extensions & bookmarklets
 
diff --git a/app/features/ytdlp/utils.py b/app/features/ytdlp/utils.py
index dd64c0f4..1751069c 100644
--- a/app/features/ytdlp/utils.py
+++ b/app/features/ytdlp/utils.py
@@ -131,10 +131,9 @@ class LogWrapper:
             if level < target.level:
                 continue
 
-            if target.logger:
-                log_kwargs = {**kwargs}
-                log_kwargs.setdefault("stacklevel", 3)
             if isinstance(target.target, logging.Logger):
+                log_kwargs: dict[str, Any] = {**kwargs}
+                log_kwargs.setdefault("stacklevel", 3)
                 target.target.log(level, msg, *args, **log_kwargs)
             elif callable(target.target):
                 target.target(level, msg, *args, **kwargs)
diff --git a/app/routes/api/_static.py b/app/routes/api/_static.py
index 6ea4a0f0..ed807402 100644
--- a/app/routes/api/_static.py
+++ b/app/routes/api/_static.py
@@ -144,7 +144,7 @@ async def serve_static_file(request: Request, config: Config) -> StreamResponse:
         else:
             return web.json_response({"error": "File not found.", "file": path}, status=web.HTTPNotFound.status_code)
 
-    return web.FileResponse(
+    response = web.FileResponse(
         path=file_path,
         headers={
             "Pragma": "public",
@@ -154,6 +154,16 @@ async def serve_static_file(request: Request, config: Config) -> StreamResponse:
         status=web.HTTPOk.status_code,
     )
 
+    if STATIC_STATE.index_file is not None and file_path == STATIC_STATE.index_file:
+        response.set_cookie(
+            name="simple_mode",
+            value="true" if config.simple_mode else "false",
+            path=config.base_path if "/" != config.base_path else "/",
+            samesite="Lax",
+        )
+
+    return response
+
 
 def setup_static_routes(root_path: Path, config: Config) -> None:
     """
diff --git a/ui/app/components/AppRoot.vue b/ui/app/components/AppRoot.vue
new file mode 100644
index 00000000..912498eb
--- /dev/null
+++ b/ui/app/components/AppRoot.vue
@@ -0,0 +1,159 @@
+<template>
+  <UApp :toaster="toaster">
+    <slot :openSettings="open" :reloadBg="loadBg" :bgLoading="bgLoading" />
+
+    <SettingsPanel
+      :isOpen="settings"
+      :isLoading="bgLoading"
+      direction="right"
+      @close="settings = false"
+      @reload_bg="loadBg(true)"
+    />
+  </UApp>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useStorage } from '@vueuse/core';
+import SettingsPanel from '~/components/SettingsPanel.vue';
+import type { toastPosition } from '~/composables/useNotification';
+import type { YTDLPOption } from '~/types/ytdlp';
+import { request, syncOpacity } from '~/utils';
+
+const props = withDefaults(
+  defineProps<{
+    mode?: 'regular' | 'simple';
+    loadOpts?: boolean;
+  }>(),
+  {
+    mode: 'regular',
+    loadOpts: false,
+  },
+);
+
+const emit = defineEmits<{ ready: [] }>();
+
+const cfg = useYtpConfig();
+const sock = useAppSocket();
+const bgOn = useStorage<boolean>('random_bg', true);
+const bgOpacity = useStorage<number>('random_bg_opacity', 0.95);
+const anim = useStorage<boolean>('page_anims', true);
+const toastPos = useStorage<toastPosition>('toast_position', 'top-right');
+const settings = ref(false);
+const bg = ref('');
+const bgLoading = ref(false);
+
+const toaster = computed(() => ({
+  position: toastPos.value,
+  max: 5,
+  expand: true,
+  progress: true,
+}));
+
+const open = (): void => {
+  settings.value = true;
+};
+
+const setMode = (): void => {
+  document.documentElement.classList.toggle('simple-mode', props.mode === 'simple');
+};
+
+const clearBg = (): void => {
+  const html = document.documentElement;
+  const body = document.querySelector('body');
+
+  html.classList.remove('bg-fanart');
+  html.removeAttribute('style');
+  body?.removeAttribute('style');
+  bg.value = '';
+};
+
+const loadBg = async (force = false): Promise<void> => {
+  if (bgLoading.value) {
+    return;
+  }
+
+  try {
+    bgLoading.value = true;
+    const resp = await request(`/api/random/background${force ? '?force=true' : ''}`);
+    if (resp.status === 200) {
+      bg.value = URL.createObjectURL(await resp.blob());
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    bgLoading.value = false;
+  }
+};
+
+defineExpose({ open, loadBg });
+
+const syncBg = async (): Promise<void> => {
+  if (!bgOn.value) {
+    clearBg();
+    return;
+  }
+
+  if (!bg.value) {
+    await loadBg();
+  }
+};
+
+const loadOptions = async (): Promise<void> => {
+  try {
+    const resp = await request('/api/yt-dlp/options');
+    if (resp.ok) {
+      cfg.ytdlp_options = (await resp.json()) as Array<YTDLPOption>;
+    }
+  } catch {}
+};
+
+onMounted(async () => {
+  setMode();
+
+  try {
+    await cfg.loadConfig();
+  } catch {}
+
+  if (props.loadOpts) {
+    await loadOptions();
+  }
+
+  try {
+    sock.connect();
+  } catch {}
+
+  await syncBg();
+  emit('ready');
+});
+
+onBeforeUnmount(() => {
+  if (props.mode === 'simple') {
+    document.documentElement.classList.remove('simple-mode');
+  }
+});
+
+watch(bgOn, () => void syncBg());
+watch(bgOpacity, () => bgOn.value && syncOpacity());
+watch(anim, (on) => document.documentElement.classList.toggle('no-page-anim', !on), {
+  immediate: true,
+});
+watch(bg, () => {
+  if (!bgOn.value || !bg.value) {
+    return;
+  }
+
+  document.documentElement.setAttribute(
+    'style',
+    [
+      'background-color: unset',
+      'display: block',
+      'min-height: 100%',
+      'min-width: 100%',
+      `background-image: url(${bg.value})`,
+    ].join('; '),
+  );
+  document.documentElement.classList.add('bg-fanart');
+  syncOpacity();
+});
+</script>
diff --git a/ui/app/components/ConnectionBanner.vue b/ui/app/components/ConnectionBanner.vue
new file mode 100644
index 00000000..5f28f83b
--- /dev/null
+++ b/ui/app/components/ConnectionBanner.vue
@@ -0,0 +1,43 @@
+<template>
+  <UAlert
+    v-if="sock.connectionStatus !== 'connected'"
+    color="warning"
+    variant="soft"
+    orientation="horizontal"
+    :title="title"
+  >
+    <template #leading>
+      <UIcon
+        :name="icon"
+        :class="[
+          'size-4 shrink-0 text-warning',
+          sock.connectionStatus === 'connecting' ? 'animate-spin' : '',
+        ]"
+      />
+    </template>
+
+    <template v-if="sock.connectionStatus === 'disconnected'" #actions>
+      <UButton color="neutral" variant="link" size="sm" class="px-0" @click="sock.reconnect()">
+        Reconnect
+      </UButton>
+    </template>
+  </UAlert>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const sock = useAppSocket();
+
+const title = computed(() => {
+  if (sock.connectionStatus === 'connecting') {
+    return 'Connecting to websocket server...';
+  }
+
+  return 'Websocket connection lost.';
+});
+
+const icon = computed(() =>
+  sock.connectionStatus === 'connecting' ? 'i-lucide-loader-circle' : 'i-lucide-info',
+);
+</script>
diff --git a/ui/app/components/Markdown.vue b/ui/app/components/Markdown.vue
index 06f8cb45..06ff4a57 100644
--- a/ui/app/components/Markdown.vue
+++ b/ui/app/components/Markdown.vue
@@ -264,6 +264,10 @@
 .markdown-alert-caution {
   --markdown-alert-accent: var(--ui-error);
 }
+.docs-markdown details summary {
+  cursor: pointer;
+  user-select: none;
+}
 </style>
 
 <template>
diff --git a/ui/app/components/SettingsPanel.vue b/ui/app/components/SettingsPanel.vue
index b94ff349..1b08f4e0 100644
--- a/ui/app/components/SettingsPanel.vue
+++ b/ui/app/components/SettingsPanel.vue
@@ -20,7 +20,9 @@
           size="sm"
           square
           icon="i-lucide-x"
-          class="ml-auto shrink-0 sm:hidden"
+          aria-label="Close settings"
+          title="Close settings"
+          class="ml-auto shrink-0"
           @click="emitter('close')"
         />
       </div>
@@ -37,14 +39,31 @@
           </template>
 
           <template #body>
-            <USwitch
-              v-model="simpleMode"
-              class="w-full"
-              size="lg"
-              :ui="settingsSwitchUi"
-              :label="simpleMode ? 'Simple View' : 'Regular View'"
-              description="The simple view is ideal for non-technical users and mobile devices."
-            />
+            <UFormField label="" class="w-full" :ui="settingsFieldUi">
+              <USelect
+                v-model="draftMode"
+                :items="modeItems"
+                value-key="value"
+                label-key="label"
+                size="lg"
+                class="w-full"
+                :ui="{ base: 'w-full' }"
+              />
+
+              <div class="mt-3 flex justify-end">
+                <UButton
+                  color="primary"
+                  variant="soft"
+                  size="sm"
+                  icon="i-lucide-save"
+                  :disabled="!modeChanged || savingMode"
+                  :loading="savingMode"
+                  @click="saveMode"
+                >
+                  Save layout
+                </UButton>
+              </div>
+            </UFormField>
 
             <USwitch
               v-model="page_anims"
@@ -91,12 +110,12 @@
               class="w-full"
               v-if="bg_enable"
               label="Background visibility"
-              :hint="String(parseFloat(String(1.0 - bg_opacity)).toFixed(2))"
+              :hint="`${Math.round(bgVisibilityModel * 100)}%`"
             >
               <USlider
-                v-model="bgOpacityModel"
-                :min="0.5"
-                :max="1"
+                v-model="bgVisibilityModel"
+                :min="0"
+                :max="0.5"
                 :step="0.01"
                 size="lg"
                 class="w-full"
@@ -114,12 +133,7 @@
           </template>
 
           <template #body>
-            <UFormField
-              v-if="!simpleMode"
-              label="URL Separator"
-              class="w-full"
-              :ui="settingsFieldUi"
-            >
+            <UFormField v-if="!modeOn" label="URL Separator" class="w-full" :ui="settingsFieldUi">
               <USelect
                 v-model="separator"
                 :items="separatorItems"
@@ -286,6 +300,7 @@ import { watch, onMounted, onBeforeUnmount, ref, computed } from 'vue';
 import { useStorage } from '@vueuse/core';
 import { useNotification } from '~/composables/useNotification';
 import type { notificationTarget, toastPosition } from '~/composables/useNotification';
+import { useMode, type Mode } from '~/composables/useMode';
 
 const props = withDefaults(
   defineProps<{
@@ -302,7 +317,6 @@ const props = withDefaults(
 
 const emitter = defineEmits<{ (e: 'close' | 'reload_bg'): void }>();
 
-const config = useYtpConfig();
 const notification = useNotification();
 
 const bg_enable = useStorage<boolean>('random_bg', true);
@@ -315,7 +329,9 @@ const show_thumbnail = useStorage<boolean>('show_thumbnail', true);
 const show_popover = useStorage<boolean>('show_popover', true);
 const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1');
 const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',');
-const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false);
+const { mode, on: modeOn, save: applyMode } = useMode();
+const draftMode = ref<Mode>(mode.value);
+const savingMode = ref(false);
 const page_anims = useStorage<boolean>('page_anims', true);
 const queue_auto_refresh = useStorage<boolean>('queue_auto_refresh', true);
 const queue_auto_refresh_delay = useStorage<number>('queue_auto_refresh_delay', 10000);
@@ -338,10 +354,10 @@ const settingsSwitchUi = {
   wrapper: 'ms-0 flex-1 text-sm',
 };
 
-const bgOpacityModel = computed<number>({
-  get: () => Number(bg_opacity.value),
+const bgVisibilityModel = computed<number>({
+  get: () => Number((1 - Number(bg_opacity.value)).toFixed(2)),
   set: (value) => {
-    bg_opacity.value = Number(value);
+    bg_opacity.value = Number((1 - Number(value)).toFixed(2));
   },
 });
 
@@ -356,6 +372,30 @@ const separatorItems = computed(() =>
   separators.map((sep) => ({ label: `${sep.name} (${sep.value})`, value: sep.value })),
 );
 
+const modeItems = computed<Array<{ label: string; value: Mode }>>(() => [
+  {
+    label: `Default`,
+    value: 'default',
+  },
+  { label: 'Simple', value: 'simple' },
+  { label: 'Regular', value: 'regular' },
+]);
+
+const modeChanged = computed(() => draftMode.value !== mode.value);
+
+const saveMode = async (): Promise<void> => {
+  if (!modeChanged.value || savingMode.value) {
+    return;
+  }
+
+  savingMode.value = true;
+  try {
+    await applyMode(draftMode.value);
+  } finally {
+    savingMode.value = false;
+  }
+};
+
 const thumbnailRatioItems = [
   { label: '16:9', value: 'is-16by9' },
   { label: '3:1', value: 'is-3by1' },
@@ -412,12 +452,21 @@ watch(
   () => props.isOpen,
   (isOpen) => {
     if (isOpen) {
+      draftMode.value = mode.value;
       document.body.classList.add('settings-panel-open');
     } else {
       document.body.classList.remove('settings-panel-open');
     }
   },
 );
+
+watch(mode, (value) => {
+  if (props.isOpen && modeChanged.value) {
+    return;
+  }
+
+  draftMode.value = value;
+});
 </script>
 
 <style scoped>
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
deleted file mode 100644
index a4f5f88d..00000000
--- a/ui/app/components/Simple.vue
+++ /dev/null
@@ -1,1576 +0,0 @@
-<template>
-  <div
-    class="mx-auto flex min-h-0 w-full max-w-6xl flex-1 flex-col gap-4 px-3 py-4 sm:px-4 sm:py-5"
-  >
-    <div
-      class="pointer-events-none fixed inset-0 z-20 bg-black/45 backdrop-blur-[1px] transition-all duration-500 ease-out"
-      :class="lightsOut ? 'opacity-100' : 'opacity-0'"
-      aria-hidden="true"
-    />
-
-    <div
-      class="transition-transform duration-300"
-      :class="{
-        'lg:-translate-x-72': settingsOpen,
-      }"
-    >
-      <div class="mx-auto w-full transition-all duration-300" :class="formContainerClass">
-        <UPageCard variant="outline" :ui="formCardUi">
-          <template #body>
-            <form autocomplete="off" class="space-y-4" @submit.prevent="addDownload">
-              <div class="flex items-start justify-between gap-3">
-                <div class="min-w-0 space-y-1">
-                  <div class="flex items-center gap-2 text-base font-semibold text-highlighted">
-                    <UIcon name="i-lucide-link" class="size-4 text-toned" />
-                    <span>{{
-                      isMobile ? 'What would you like to download?' : greetingMessage
-                    }}</span>
-                  </div>
-                </div>
-
-                <div class="flex shrink-0 items-center gap-1 sm:gap-2">
-                  <UTooltip v-if="!socketStore.isConnected" text="Reload queue">
-                    <UButton
-                      color="info"
-                      variant="ghost"
-                      size="sm"
-                      icon="i-lucide-refresh-cw"
-                      :loading="isRefreshing"
-                      :disabled="isRefreshing"
-                      :square="isMobile"
-                      @click="() => refreshQueue()"
-                    >
-                      <span v-if="!isMobile">Reload Queue</span>
-                    </UButton>
-                  </UTooltip>
-
-                  <UTooltip :text="colorModeButtonTitle">
-                    <UButton
-                      color="neutral"
-                      variant="ghost"
-                      size="sm"
-                      :icon="colorModeButtonIcon"
-                      :square="isMobile"
-                      :aria-label="colorModeButtonTitle"
-                      :title="colorModeButtonTitle"
-                      @click="colorMode.preference = nextColorModePreference"
-                    >
-                      <span v-if="!isMobile">{{ colorModeButtonTitle }}</span>
-                    </UButton>
-                  </UTooltip>
-
-                  <UTooltip text="WebUI Settings">
-                    <UButton
-                      color="neutral"
-                      variant="ghost"
-                      size="sm"
-                      icon="i-lucide-settings-2"
-                      :square="isMobile"
-                      @click="$emit('show_settings')"
-                    >
-                      <span v-if="!isMobile">WebUI Settings</span>
-                    </UButton>
-                  </UTooltip>
-                </div>
-              </div>
-
-              <div class="flex items-stretch gap-2">
-                <UTooltip :text="showExtras ? 'Hide extra options' : 'Show extra options'">
-                  <UButton
-                    type="button"
-                    color="info"
-                    variant="outline"
-                    size="lg"
-                    :icon="showExtras ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-                    class="shrink-0 justify-center w-12"
-                    :disabled="addInProgress"
-                    @click="showExtras = !showExtras"
-                  />
-                </UTooltip>
-
-                <UInput
-                  id="download-url"
-                  v-model="formUrl"
-                  type="url"
-                  placeholder="https://..."
-                  size="lg"
-                  required
-                  :disabled="isFormDisabled"
-                  class="min-w-0 flex-1"
-                  :ui="urlInputUi"
-                />
-
-                <UButton
-                  type="submit"
-                  color="primary"
-                  size="lg"
-                  icon="i-lucide-plus"
-                  :loading="addInProgress"
-                  :disabled="isFormDisabled || !formUrl.trim()"
-                  class="shrink-0 justify-center min-w-20 sm:min-w-28"
-                >
-                  Add
-                </UButton>
-              </div>
-
-              <div v-if="showExtras" class="space-y-3 border-t border-default pt-4">
-                <UFormField label="Preset" :ui="fieldUi" class="w-full">
-                  <template #label>
-                    <span class="inline-flex items-center gap-2 font-semibold">
-                      <UIcon name="i-lucide-sliders-horizontal" class="size-4 text-toned" />
-                      <span>Preset</span>
-                    </span>
-                  </template>
-
-                  <USelectMenu
-                    id="preset"
-                    v-model="formPreset"
-                    :items="presetItems"
-                    value-key="value"
-                    label-key="label"
-                    color="neutral"
-                    size="lg"
-                    class="w-full"
-                    :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
-                    :search-input="{ placeholder: 'Search presets' }"
-                    :disabled="isFormDisabled"
-                    placeholder="Select preset"
-                  />
-                </UFormField>
-
-                <div
-                  v-if="configStore.dl_fields.length > 0"
-                  class="grid gap-3 md:grid-cols-2 xl:grid-cols-3"
-                >
-                  <DLInput
-                    id="force_download"
-                    v-model="dlFields['--no-download-archive']"
-                    type="bool"
-                    label="Force download"
-                    icon="i-lucide-download"
-                    :disabled="isFormDisabled"
-                    description="Ignore archive and re-download."
-                    compact
-                  />
-
-                  <DLInput
-                    v-for="(fi, index) in sortedDLFields"
-                    :id="fi?.id || `dlf-${index}`"
-                    :key="fi.id || `dlf-${index}`"
-                    v-model="dlFields[fi.field]"
-                    :type="fi.kind"
-                    :description="fi.description"
-                    :label="fi.name"
-                    :icon="fi.icon"
-                    :field="fi.field"
-                    :disabled="isFormDisabled"
-                    compact
-                  />
-                </div>
-              </div>
-            </form>
-          </template>
-        </UPageCard>
-      </div>
-    </div>
-
-    <Transition name="queue-fade">
-      <section v-if="showSections" class="w-full space-y-6">
-        <section class="space-y-3">
-          <div class="flex flex-wrap items-center justify-between gap-3">
-            <button
-              type="button"
-              class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted transition-colors hover:text-default"
-              :aria-expanded="!queueCollapsed"
-              aria-controls="simple-queue-section"
-              @click="queueCollapsed = !queueCollapsed"
-            >
-              <UIcon
-                :name="queueCollapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
-                class="size-3.5 text-toned"
-              />
-              <UIcon name="i-lucide-list-video" class="size-4 text-toned" />
-              <span>Queue</span>
-            </button>
-
-            <div class="flex flex-wrap items-center gap-2">
-              <UBadge color="info" variant="soft" size="sm">{{ queueCountLabel }}</UBadge>
-
-              <UButton
-                v-if="stateStore.hasMore()"
-                color="neutral"
-                variant="outline"
-                size="xs"
-                :loading="isRefreshing"
-                @click="() => loadMoreQueue()"
-              >
-                Show more
-              </UButton>
-            </div>
-          </div>
-
-          <Transition name="section-collapse">
-            <div v-if="!queueCollapsed" id="simple-queue-section" class="overflow-hidden">
-              <TransitionGroup
-                v-if="queueItems.length > 0"
-                name="queue-card"
-                tag="div"
-                class="grid grid-cols-1 gap-3 lg:grid-cols-2"
-              >
-                <UCard
-                  v-for="item in queueItems"
-                  :key="`queue-${item._id}`"
-                  class="w-full min-w-0 max-w-full overflow-hidden"
-                  :ui="queueCardUi"
-                >
-                  <template #header>
-                    <div
-                      v-if="downloadingStatuses.has(item.status) || item.status === null"
-                      class="queue-progress rounded-md border border-default bg-muted/20"
-                    >
-                      <div
-                        class="queue-progress__bar bg-success/35"
-                        :style="{ width: progressWidth(item) }"
-                      ></div>
-                      <div class="queue-progress__label">
-                        <template v-if="progressIcon(item)">
-                          <UIcon
-                            :name="progressIcon(item)"
-                            :class="[
-                              'mr-1 size-4',
-                              ['i-lucide-settings-2', 'i-lucide-loader-circle'].includes(
-                                progressIcon(item),
-                              )
-                                ? 'animate-spin'
-                                : '',
-                            ]"
-                          />
-                        </template>
-                        <span>{{ updateProgress(item) }}</span>
-                      </div>
-                    </div>
-                  </template>
-
-                  <div class="flex min-w-0 flex-col gap-4 sm:flex-row">
-                    <figure
-                      class="relative w-full shrink-0 overflow-hidden rounded-lg border border-default bg-muted/20 sm:w-52"
-                    >
-                      <span
-                        v-if="item.filename || isEmbedable(item.url)"
-                        class="play-overlay"
-                        @click="openPlayer(item)"
-                      >
-                        <span
-                          :class="[
-                            'play-icon',
-                            isEmbedable(item.url) && !item.filename ? 'embed-icon' : '',
-                          ]"
-                          aria-hidden="true"
-                        >
-                          <UIcon name="i-lucide-play" class="size-6 translate-x-px text-white" />
-                        </span>
-                        <img
-                          :src="resolveThumbnail(item)"
-                          :alt="item.title || 'Video thumbnail'"
-                          loading="lazy"
-                          class="aspect-video h-full w-full object-cover"
-                          @error="onImgError($event, item)"
-                        />
-                      </span>
-
-                      <img
-                        v-else
-                        :src="resolveThumbnail(item)"
-                        :alt="item.title || 'Video thumbnail'"
-                        loading="lazy"
-                        class="aspect-video h-full w-full object-cover"
-                        @error="onImgError($event, item)"
-                      />
-
-                      <span
-                        v-if="getDurationLabel(item)"
-                        class="absolute top-2 right-2 rounded-full bg-black/70 px-2 py-0.5 text-[11px] font-medium text-white"
-                      >
-                        {{ getDurationLabel(item) }}
-                      </span>
-                    </figure>
-
-                    <div class="min-w-0 flex-1 space-y-3">
-                      <div class="space-y-2">
-                        <UTooltip :text="item.title">
-                          <a
-                            :href="item.url"
-                            target="_blank"
-                            rel="noreferrer"
-                            class="block truncate text-sm font-semibold text-highlighted hover:underline"
-                          >
-                            {{ item.title || 'Untitled' }}
-                          </a>
-                        </UTooltip>
-
-                        <div class="flex flex-wrap items-center gap-2 text-xs">
-                          <UBadge
-                            :color="downloadingStatuses.has(item.status) ? 'info' : 'warning'"
-                            variant="soft"
-                            size="sm"
-                          >
-                            {{ downloadingStatuses.has(item.status) ? 'Active' : 'Queued' }}
-                          </UBadge>
-
-                          <UBadge :color="getStatusColor(item)" variant="soft" size="sm">
-                            {{ getStatusLabel(item) }}
-                          </UBadge>
-
-                          <span
-                            class="inline-flex items-center rounded-full border border-default px-2 py-0.5 text-toned"
-                            :date-datetime="item.datetime"
-                            v-rtime="item.datetime"
-                          />
-                        </div>
-                      </div>
-
-                      <p class="line-clamp-3 text-xs leading-5 text-toned wrap-break-word">
-                        <template v-if="item.error || showMessage(item)">
-                          <template v-if="item.error">
-                            <span class="text-error">{{ item.error }}</span>
-                          </template>
-                          <template v-if="showMessage(item)">
-                            <span class="text-error">{{ item.msg }}</span>
-                          </template>
-                        </template>
-                        <template v-else>
-                          {{ getDescription(item) || 'No description available.' }}
-                        </template>
-                      </p>
-
-                      <div class="mt-auto flex flex-wrap items-center justify-end gap-2 pt-1">
-                        <UButton
-                          v-if="!item.status && item.auto_start === false"
-                          color="success"
-                          variant="soft"
-                          size="xs"
-                          icon="i-lucide-play-circle"
-                          @click="() => stateStore.startItems([item._id])"
-                        >
-                          Start
-                        </UButton>
-
-                        <UButton
-                          v-if="!item.status && item.auto_start === true"
-                          color="warning"
-                          variant="soft"
-                          size="xs"
-                          icon="i-lucide-pause"
-                          @click="() => stateStore.pauseItems([item._id])"
-                        >
-                          Pause
-                        </UButton>
-
-                        <UButton
-                          color="error"
-                          variant="outline"
-                          size="xs"
-                          icon="i-lucide-x"
-                          @click="() => stateStore.cancelItems([item._id])"
-                        >
-                          {{ item.is_live ? 'Stop' : 'Cancel' }}
-                        </UButton>
-                      </div>
-                    </div>
-                  </div>
-                </UCard>
-              </TransitionGroup>
-
-              <UAlert
-                v-else
-                color="neutral"
-                variant="soft"
-                icon="i-lucide-inbox"
-                title="Queue is empty"
-              />
-            </div>
-          </Transition>
-        </section>
-
-        <section class="space-y-3">
-          <div class="flex flex-wrap items-center justify-between gap-3">
-            <button
-              type="button"
-              class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted transition-colors hover:text-default"
-              :aria-expanded="!historyCollapsed"
-              aria-controls="simple-history-section"
-              @click="historyCollapsed = !historyCollapsed"
-            >
-              <UIcon
-                :name="historyCollapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
-                class="size-3.5 text-toned"
-              />
-              <UIcon name="i-lucide-history" class="size-4 text-toned" />
-              <span>History</span>
-            </button>
-
-            <div v-if="!historyCollapsed" class="flex flex-wrap items-center gap-2">
-              <UPagination
-                v-if="historyPagination.total_pages > 1"
-                :page="historyPagination.page"
-                :total="historyPagination.total"
-                :items-per-page="historyPagination.per_page"
-                :disabled="historyIsLoading"
-                show-edges
-                size="sm"
-                :sibling-count="0"
-                @update:page="
-                  (page) =>
-                    load(page, {
-                      order: 'DESC',
-                      perPage: configStore.app.default_pagination,
-                    })
-                "
-              />
-
-              <UButton
-                color="neutral"
-                variant="outline"
-                size="xs"
-                icon="i-lucide-refresh-cw"
-                :loading="historyIsLoading"
-                :disabled="historyIsLoading"
-                @click="
-                  () => reload({ order: 'DESC', perPage: configStore.app.default_pagination })
-                "
-              >
-                Reload
-              </UButton>
-            </div>
-          </div>
-
-          <Transition name="section-collapse">
-            <div
-              v-if="!historyCollapsed"
-              id="simple-history-section"
-              class="space-y-3 overflow-hidden"
-            >
-              <div v-if="historyEntries.length > 0" class="grid grid-cols-1 gap-3 lg:grid-cols-2">
-                <UCard
-                  v-for="item in historyEntries"
-                  :key="`history-${historyPagination.page}-${item._id}`"
-                  class="w-full min-w-0 max-w-full overflow-hidden"
-                  :ui="queueCardUi"
-                >
-                  <div class="flex min-w-0 flex-col gap-4 sm:flex-row">
-                    <figure
-                      class="relative w-full shrink-0 overflow-hidden rounded-lg border border-default bg-muted/20 sm:w-52"
-                    >
-                      <span
-                        v-if="item.filename || isEmbedable(item.url)"
-                        class="play-overlay"
-                        @click="openPlayer(item)"
-                      >
-                        <span
-                          :class="[
-                            'play-icon',
-                            isEmbedable(item.url) && !item.filename ? 'embed-icon' : '',
-                          ]"
-                          aria-hidden="true"
-                        >
-                          <UIcon name="i-lucide-play" class="size-6 translate-x-px text-white" />
-                        </span>
-                        <img
-                          :src="resolveThumbnail(item)"
-                          :alt="item.title || 'Video thumbnail'"
-                          loading="lazy"
-                          class="aspect-video h-full w-full object-cover"
-                          @error="onImgError($event, item)"
-                        />
-                      </span>
-
-                      <img
-                        v-else
-                        :src="resolveThumbnail(item)"
-                        :alt="item.title || 'Video thumbnail'"
-                        loading="lazy"
-                        class="aspect-video h-full w-full object-cover"
-                        @error="onImgError($event, item)"
-                      />
-
-                      <span
-                        v-if="getDurationLabel(item)"
-                        class="absolute top-2 right-2 rounded-full bg-black/70 px-2 py-0.5 text-[11px] font-medium text-white"
-                      >
-                        {{ getDurationLabel(item) }}
-                      </span>
-                    </figure>
-
-                    <div class="min-w-0 flex-1 space-y-3">
-                      <div class="space-y-2">
-                        <UTooltip :text="item.title">
-                          <a
-                            :href="item.url"
-                            target="_blank"
-                            rel="noreferrer"
-                            class="block truncate text-sm font-semibold text-highlighted hover:underline"
-                          >
-                            {{ item.title || 'Untitled' }}
-                          </a>
-                        </UTooltip>
-
-                        <div class="flex flex-wrap items-center gap-2 text-xs">
-                          <UBadge color="neutral" variant="soft" size="sm">History</UBadge>
-
-                          <UBadge :color="getStatusColor(item)" variant="soft" size="sm">
-                            {{ getStatusLabel(item) }}
-                          </UBadge>
-
-                          <span
-                            class="inline-flex items-center rounded-full border border-default px-2 py-0.5 text-toned"
-                            :date-datetime="item.datetime"
-                            v-rtime="item.datetime"
-                          />
-                        </div>
-                      </div>
-
-                      <p class="line-clamp-3 text-xs leading-5 text-toned wrap-break-word">
-                        <template v-if="item.error || showMessage(item)">
-                          <template v-if="item.error">
-                            <span class="text-error">{{ item.error }}</span>
-                          </template>
-                          <template v-if="showMessage(item)">
-                            <span class="text-error">{{ item.msg }}</span>
-                          </template>
-                        </template>
-                        <template v-else>
-                          {{ getDescription(item) || 'No description available.' }}
-                        </template>
-                      </p>
-
-                      <div class="mt-auto flex flex-wrap items-center justify-end gap-2 pt-1">
-                        <UButton
-                          v-if="getDownloadLink(item)"
-                          color="primary"
-                          variant="soft"
-                          size="xs"
-                          icon="i-lucide-download"
-                          external
-                          :href="getDownloadLink(item)"
-                          :download="getDownloadName(item)"
-                        >
-                          Download
-                        </UButton>
-
-                        <UButton
-                          v-if="!item.filename"
-                          color="info"
-                          variant="soft"
-                          size="xs"
-                          icon="i-lucide-rotate-cw"
-                          @click="() => requeueItem(item)"
-                        >
-                          Requeue
-                        </UButton>
-
-                        <UButton
-                          color="error"
-                          variant="outline"
-                          size="xs"
-                          icon="i-lucide-trash"
-                          @click="() => deleteHistoryItem(item)"
-                        >
-                          Delete
-                        </UButton>
-                      </div>
-                    </div>
-                  </div>
-                </UCard>
-              </div>
-
-              <UAlert
-                v-else-if="historyIsLoading"
-                color="info"
-                variant="soft"
-                icon="i-lucide-loader-circle"
-                title="Loading history..."
-              />
-
-              <UAlert
-                v-else
-                color="neutral"
-                variant="soft"
-                icon="i-lucide-history"
-                title="History is empty"
-              />
-
-              <div v-if="historyPagination.total_pages > 1" class="flex justify-end py-2">
-                <UPagination
-                  :page="historyPagination.page"
-                  :total="historyPagination.total"
-                  :items-per-page="historyPagination.per_page"
-                  :disabled="historyIsLoading"
-                  show-edges
-                  size="sm"
-                  :sibling-count="0"
-                  @update:page="
-                    (page) =>
-                      load(page, {
-                        order: 'DESC',
-                        perPage: configStore.app.default_pagination,
-                      })
-                  "
-                />
-              </div>
-            </div>
-          </Transition>
-        </section>
-      </section>
-    </Transition>
-
-    <UModal
-      v-if="videoItem"
-      :open="videoOpen"
-      title="Video"
-      :dismissible="true"
-      :ui="{
-        content: lightsOut ? 'w-full sm:max-w-5xl shadow-2xl' : 'w-full sm:max-w-5xl',
-        body: 'p-0',
-      }"
-      @update:open="handleVideoOpenChange"
-    >
-      <template #body>
-        <VideoPlayer
-          type="default"
-          :isMuted="false"
-          autoplay="true"
-          :isControls="true"
-          :item="videoItem"
-          class="w-full"
-          @closeModel="() => requestCloseVideo()"
-          @error="async (error: string) => await box.alert(error)"
-          @playback-state-change="(playing: boolean) => (playingNow = playing)"
-        />
-      </template>
-    </UModal>
-
-    <UModal
-      v-if="embedUrl"
-      :open="Boolean(embedUrl)"
-      title="Embed"
-      :dismissible="true"
-      :ui="{ content: 'w-full sm:max-w-5xl', body: 'p-0' }"
-      @update:open="(open) => !open && closePlayer()"
-    >
-      <template #body>
-        <EmbedPlayer :url="embedUrl" @closeModel="closePlayer" />
-      </template>
-    </UModal>
-
-    <ClientOnly>
-      <Dialog />
-    </ClientOnly>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue';
-import { useStorage } from '@vueuse/core';
-import type { item_request } from '~/types/item';
-import type { ItemStatus, StoreItem } from '~/types/store';
-import { useConfirm } from '~/composables/useConfirm';
-import { useDirtyCloseGuard } from '~/composables/useDirtyCloseGuard';
-import { useHistoryState } from '~/composables/useHistoryState';
-import { useMediaQuery } from '~/composables/useMediaQuery';
-import { usePresetOptions } from '~/composables/usePresetOptions';
-import { useNotification } from '~/composables/useNotification';
-import EmbedPlayer from '~/components/EmbedPlayer.vue';
-import { getEmbedable, isEmbedable } from '~/utils/embedable';
-import {
-  ag,
-  formatTime,
-  getHistoryImage,
-  getImage,
-  getRemoteImage,
-  isDownloadSkipped,
-  makeDownload,
-  request,
-  ucFirst,
-} from '~/utils';
-
-defineEmits<{ (e: 'show_settings'): void }>();
-
-withDefaults(
-  defineProps<{
-    settingsOpen?: boolean;
-  }>(),
-  {
-    settingsOpen: false,
-  },
-);
-
-type ColorModePreference = 'system' | 'light' | 'dark';
-
-const configStore = useYtpConfig();
-const stateStore = useQueueState();
-const socketStore = useAppSocket();
-const route = useRoute();
-const colorMode = useColorMode();
-const simpleMode = useStorage<boolean>('simple_mode', configStore.app.simple_mode || false);
-const toast = useNotification();
-const dlFields = useStorage<Record<string, any>>('dl_fields', {});
-const show_thumbnail = useStorage<boolean>('show_thumbnail', true);
-const autoRefreshEnabled = useStorage<boolean>('queue_auto_refresh', true);
-const autoRefreshDelay = useStorage<number>('queue_auto_refresh_delay', 10000);
-const queueCollapsed = useStorage<boolean>('simple_queue_collapsed', false);
-const historyCollapsed = useStorage<boolean>('simple_history_collapsed', false);
-const isMobile = useMediaQuery({ maxWidth: 1024 });
-const box = useConfirm();
-const colorModePreferences: Array<ColorModePreference> = ['system', 'light', 'dark'];
-
-const app = toRef(configStore, 'app');
-const paused = toRef(configStore, 'paused');
-const presets = toRef(configStore, 'presets');
-const { selectItems: presetItems } = usePresetOptions(presets);
-const {
-  items: historyItems,
-  pagination,
-  isLoading,
-  load,
-  reload,
-  remove,
-  moveHandler,
-} = useHistoryState();
-
-const embedUrl = ref('');
-const videoItem = ref<StoreItem | null>(null);
-const playingNow = ref(false);
-const autoRefreshInterval = ref<ReturnType<typeof setInterval> | null>(null);
-const hadSocketDisconnect = ref(false);
-const videoOpen = computed<boolean>({
-  get: () => Boolean(videoItem.value),
-  set: (value: boolean) => {
-    if (value) {
-      return;
-    }
-
-    closePlayer();
-  },
-});
-
-const formUrl = ref('');
-const formPreset = ref(app.value.default_preset || '');
-const addInProgress = ref(false);
-const showExtras = ref(false);
-const isRefreshing = ref(false);
-const historyInitialized = ref(false);
-
-const downloadingStatuses: ReadonlySet<ItemStatus | null> = new Set([
-  'downloading',
-  'postprocessing',
-  'preparing',
-]);
-
-const fieldUi = {
-  label: 'font-semibold text-default',
-  container: 'space-y-2',
-};
-
-const formCardUi = {
-  root: 'w-full border border-default bg-default',
-  container: 'w-full p-4 sm:p-5',
-  wrapper: 'w-full items-stretch',
-  body: 'w-full',
-};
-
-const queueCardUi = {
-  root: 'w-full border border-default bg-default',
-  header: 'p-4 pb-0',
-  body: 'p-4',
-};
-
-const urlInputUi = {
-  root: 'w-full',
-  base: 'bg-elevated/60 ring-default focus-visible:ring-primary',
-};
-
-const historyPagination = computed(() => pagination.value);
-const historyIsLoading = computed(() => isLoading.value);
-const queueItems = computed<StoreItem[]>(() => Object.values(stateStore.queue));
-const queueCountLabel = computed(() => {
-  if (stateStore.hasMore()) {
-    return `${stateStore.shown()} displayed / ${stateStore.count()} queued`;
-  }
-
-  return `${stateStore.count()} queued`;
-});
-const historyEntries = computed<StoreItem[]>(() => historyItems.value);
-const hasAnyItems = computed(() => queueItems.value.length > 0 || historyEntries.value.length > 0);
-const showSections = computed(() => hasAnyItems.value || historyIsLoading.value);
-const isFormDisabled = computed(() => addInProgress.value);
-const lightsOut = computed(() => Boolean(videoItem.value && playingNow.value));
-const formContainerClass = computed(() => {
-  if (showSections.value) {
-    return 'max-w-full';
-  }
-
-  return 'max-w-2xl simple-form-center';
-});
-const greetingMessage = computed(() => {
-  const hour = new Date().getHours();
-
-  if (hour >= 5 && hour < 12) {
-    return 'Good morning, what would you like to download?';
-  }
-
-  if (hour >= 12 && hour < 17) {
-    return 'Good afternoon, what would you like to download?';
-  }
-
-  if (hour >= 17 && hour < 21) {
-    return 'Good evening, what would you like to download?';
-  }
-
-  return 'Hello, what would you like to download?';
-});
-const sortedDLFields = computed(() =>
-  [...configStore.dl_fields].sort((left, right) => (left.order || 0) - (right.order || 0)),
-);
-
-const colorModePreference = computed<ColorModePreference>(() => {
-  const preference = colorMode.preference;
-
-  return colorModePreferences.includes(preference as ColorModePreference)
-    ? (preference as ColorModePreference)
-    : 'system';
-});
-
-const colorModeButtonIcon = computed(() => {
-  switch (colorModePreference.value) {
-    case 'light':
-      return 'i-lucide-sun';
-    case 'dark':
-      return 'i-lucide-moon';
-    default:
-      return 'i-lucide-monitor';
-  }
-});
-
-const nextColorModePreference = computed<ColorModePreference>(() => {
-  const currentIndex = colorModePreferences.indexOf(colorModePreference.value);
-  return colorModePreferences[(currentIndex + 1) % colorModePreferences.length] ?? 'system';
-});
-
-const colorModeButtonTitle = computed(() => {
-  switch (colorModePreference.value) {
-    case 'light':
-      return 'Light';
-    case 'dark':
-      return 'Dark';
-    default:
-      return 'System';
-  }
-});
-
-const refreshQueue = async (): Promise<void> => {
-  if (isRefreshing.value) {
-    return;
-  }
-
-  isRefreshing.value = true;
-
-  try {
-    await stateStore.loadQueue();
-  } catch (error) {
-    console.error('Failed to refresh queue:', error);
-    toast.error('Failed to refresh queue');
-  } finally {
-    isRefreshing.value = false;
-  }
-};
-
-const loadMoreQueue = async (): Promise<void> => {
-  if (isRefreshing.value) {
-    return;
-  }
-
-  isRefreshing.value = true;
-
-  try {
-    await stateStore.loadMore();
-  } catch (error) {
-    console.error('Failed to load more queue items:', error);
-    toast.error('Failed to load more queue items');
-  } finally {
-    isRefreshing.value = false;
-  }
-};
-
-const startAutoRefresh = (): void => {
-  if (autoRefreshInterval.value) {
-    clearInterval(autoRefreshInterval.value);
-  }
-
-  if (!autoRefreshEnabled.value || socketStore.isConnected) {
-    return;
-  }
-
-  autoRefreshInterval.value = setInterval(async () => {
-    if (!socketStore.isConnected && autoRefreshEnabled.value) {
-      await refreshQueue();
-    }
-  }, autoRefreshDelay.value);
-};
-
-const stopAutoRefresh = (): void => {
-  if (!autoRefreshInterval.value) {
-    return;
-  }
-
-  clearInterval(autoRefreshInterval.value);
-  autoRefreshInterval.value = null;
-};
-
-const applySimpleQuery = async (): Promise<void> => {
-  if (route.query?.simple === undefined) {
-    return;
-  }
-
-  simpleMode.value = ['true', '1', 'yes', 'on'].includes(route.query.simple as string);
-  await nextTick();
-
-  const url = new URL(window.location.href);
-  url.searchParams.delete('simple');
-  window.history.replaceState({}, '', url.toString());
-};
-
-const normalizeSimpleRoute = async (): Promise<void> => {
-  if ('/' === route.path) {
-    return;
-  }
-
-  await navigateTo('/', { replace: true });
-};
-
-const addDownload = async (): Promise<void> => {
-  const url = formUrl.value.trim();
-
-  if (!url) {
-    toast.error('Please enter a valid URL.');
-    return;
-  }
-
-  let cli = '';
-  const dlFieldsExtra = ['--no-download-archive'];
-
-  const is_valid = (dl_field: string): boolean => {
-    if (dlFieldsExtra.includes(dl_field)) {
-      return true;
-    }
-
-    if (configStore.dl_fields && configStore.dl_fields.length > 0) {
-      return configStore.dl_fields.some((field) => dl_field === field.field);
-    }
-
-    return false;
-  };
-
-  if (dlFields.value && Object.keys(dlFields.value).length > 0) {
-    const joined = [];
-
-    for (const [key, value] of Object.entries(dlFields.value)) {
-      if (false === is_valid(key)) {
-        continue;
-      }
-
-      if ([undefined, null, '', false].includes(value as any)) {
-        continue;
-      }
-
-      const keyRegex = new RegExp(`(^|\\s)${key}(\\s|$)`);
-
-      if (cli && keyRegex.test(cli)) {
-        continue;
-      }
-
-      joined.push(true === value ? `${key}` : `${key} ${value}`);
-    }
-
-    if (joined.length > 0) {
-      cli = joined.join(' ');
-    }
-  }
-
-  const payload: item_request[] = [
-    {
-      url,
-      preset: formPreset.value || app.value.default_preset,
-      cli: cli || '',
-      auto_start: true,
-    },
-  ];
-
-  try {
-    addInProgress.value = true;
-
-    const response = await request('/api/history', {
-      method: 'POST',
-      body: JSON.stringify(payload),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      toast.error(`Error: ${data?.error || 'Failed to add download.'}`);
-      return;
-    }
-
-    let had_errors = false;
-
-    if (200 === response.status && Array.isArray(data)) {
-      data.forEach((item: Record<string, any>) => {
-        if (false !== item.status) {
-          return;
-        }
-
-        had_errors = true;
-
-        if (item?.hidden) {
-          return;
-        }
-
-        toast.error(`Error: ${item.msg || 'Failed to add download.'}`);
-      });
-    }
-
-    if (202 === response.status) {
-      toast.success(data.message, { timeout: 2000 });
-    }
-
-    if (false === had_errors) {
-      formUrl.value = '';
-      formPreset.value = app.value.default_preset || '';
-      dlFields.value = {};
-    }
-  } catch (error) {
-    const message = error instanceof Error ? error.message : 'Failed to add download.';
-    toast.error(`Error: ${message}`);
-  } finally {
-    addInProgress.value = false;
-  }
-};
-
-const resolveThumbnail = (item: StoreItem): string => {
-  if (!show_thumbnail.value) {
-    return '/images/placeholder.png';
-  }
-
-  if (historyEntries.value.some((entry) => entry._id === item._id)) {
-    return getHistoryImage(item);
-  }
-
-  return getImage(configStore.app.download_path, item);
-};
-
-const openPlayer = (item: StoreItem): void => {
-  if (item.filename) {
-    videoItem.value = item;
-    return;
-  }
-
-  if (!isEmbedable(item.url)) {
-    return;
-  }
-
-  const embed = getEmbedable(item.url);
-  if (embed) {
-    embedUrl.value = embed;
-  }
-};
-
-const closePlayer = (): void => {
-  playingNow.value = false;
-  embedUrl.value = '';
-  videoItem.value = null;
-};
-
-const { handleOpenChange: handleVideoOpenChange, requestClose: requestCloseVideo } =
-  useDirtyCloseGuard(videoOpen, {
-    dirty: playingNow,
-    title: 'Close player?',
-    message: 'Playback is active. Do you want to close the player?',
-    confirmText: 'Close player',
-    cancelText: 'Keep playing',
-    onDiscard: async () => {
-      closePlayer();
-    },
-  });
-
-const getDescription = (item: StoreItem): string => {
-  const direct = (item.description ?? '').toString().trim();
-  if (direct) {
-    return direct;
-  }
-
-  const extrasDescription = ag<string | null>(item, 'extras.description', null)?.toString().trim();
-  if (extrasDescription) {
-    return extrasDescription;
-  }
-
-  const errorDescription = item.error?.trim();
-  if (errorDescription) {
-    return errorDescription;
-  }
-
-  const message = ag<string | null>(item, 'msg', null)?.toString().trim();
-  if (message) {
-    return message;
-  }
-
-  return '';
-};
-
-const getDurationLabel = (item: StoreItem): string | null => {
-  const duration = ag<number | null>(item, 'extras.duration', null);
-  if (duration == null || Number.isNaN(duration) || duration <= 0) {
-    return null;
-  }
-
-  return formatTime(duration);
-};
-
-const statusOverrides: Record<string, string> = {
-  downloading: 'Downloading',
-  postprocessing: 'Post-processing',
-  preparing: 'Preparing',
-  finished: 'Completed',
-  error: 'Error',
-  cancelled: 'Cancelled',
-  not_live: 'Not live yet',
-  skip: 'Skipped',
-};
-
-const getStatusLabel = (item: StoreItem): string => {
-  if (item.status === null) {
-    return 'Queued';
-  }
-
-  if (isDownloadSkipped(item)) {
-    return 'Download skipped';
-  }
-
-  if (item.status === 'error' && item.filename) {
-    return 'Partial Error';
-  }
-
-  return statusOverrides[item.status] ?? ucFirst(item.status.replace(/_/g, ' '));
-};
-
-const getStatusColor = (item: StoreItem): 'neutral' | 'info' | 'success' | 'error' | 'warning' => {
-  if (item.status === null) {
-    return 'neutral';
-  }
-
-  if (isDownloadSkipped(item)) {
-    return 'info';
-  }
-
-  if (item.status === 'error' && item.filename) {
-    return 'warning';
-  }
-
-  const map: Record<string, 'neutral' | 'info' | 'success' | 'error' | 'warning'> = {
-    downloading: 'info',
-    postprocessing: 'info',
-    preparing: 'info',
-    finished: 'success',
-    error: 'error',
-    cancelled: 'neutral',
-    not_live: 'warning',
-    skip: 'neutral',
-  };
-
-  return map[item.status] ?? 'info';
-};
-
-const percentPipe = (value: number | null): string => {
-  if (value === null || Number.isNaN(value)) {
-    return '00.00';
-  }
-
-  return parseFloat(String(value)).toFixed(2);
-};
-
-const ETAPipe = (value: number | null): string => {
-  if (value === null || value === 0) {
-    return 'Live';
-  }
-
-  if (value < 60) {
-    return `${Math.round(value)}s`;
-  }
-
-  if (value < 3600) {
-    return `${Math.floor(value / 60)}m ${Math.round(value % 60)}s`;
-  }
-
-  const hours = Math.floor(value / 3600);
-  const minutes = value % 3600;
-  return `${hours}h ${Math.floor(minutes / 60)}m ${Math.round(minutes % 60)}s`;
-};
-
-const speedPipe = (value: number | null): string => {
-  if (value === null || value === 0) {
-    return '0KB/s';
-  }
-
-  const k = 1024;
-  const dm = 2;
-  const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'];
-  const i = Math.floor(Math.log(value) / Math.log(k));
-  return `${parseFloat((value / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};
-
-const updateProgress = (item: StoreItem): string => {
-  let text = '';
-
-  if (!item.auto_start) {
-    return 'Manual start';
-  }
-
-  if (item.status === null && paused.value === true) {
-    return 'Global Pause';
-  }
-
-  if (item.status === 'postprocessing') {
-    return 'Post-processors are running.';
-  }
-
-  if (item.status === 'preparing') {
-    return ag(item, 'extras.external_downloader') ? 'External downloader.' : 'Preparing';
-  }
-
-  if (item.status !== null && item.is_live && !item.speed) {
-    return 'Recording live stream';
-  }
-
-  if (item.status !== null) {
-    text += item.percent && !item.is_live ? `${percentPipe(item.percent)}%` : 'Live';
-  }
-
-  text += item.speed ? ` - ${speedPipe(item.speed)}` : ' - Waiting..';
-
-  if (item.status !== null && item.eta) {
-    text += ` - ${ETAPipe(item.eta)}`;
-  }
-
-  return text;
-};
-
-const progressWidth = (item: StoreItem): string => {
-  if (!item.auto_start || (null === item.status && true === paused.value)) {
-    return '0%';
-  }
-
-  if (
-    'postprocessing' === item.status ||
-    'started' === item.status ||
-    'preparing' === item.status
-  ) {
-    return '100%';
-  }
-
-  if (!item.percent || item.is_live) {
-    return '100%';
-  }
-
-  return `${percentPipe(item.percent)}%`;
-};
-
-const progressIcon = (item: StoreItem): string => {
-  if (null != item.status && item.is_live && !item.speed) {
-    return 'i-lucide-loader-circle';
-  }
-
-  if ('postprocessing' === item.status) {
-    return 'i-lucide-settings-2';
-  }
-
-  return '';
-};
-
-const getDownloadLink = (item: StoreItem): string => {
-  if (!item.filename) {
-    return '';
-  }
-
-  return makeDownload(app.value, item);
-};
-
-const getDownloadName = (item: StoreItem): string => {
-  if (!item.filename) {
-    return 'download';
-  }
-
-  const segments = item.filename.split('/');
-  return segments[segments.length - 1] || 'download';
-};
-
-const requeueItem = async (item: StoreItem): Promise<void> => {
-  if (!item.url) {
-    toast.error('Unable to requeue item; missing URL.');
-    return;
-  }
-
-  const payload: item_request = {
-    url: item.url,
-    preset: item.preset || app.value.default_preset,
-    folder: item.folder,
-    template: item.template,
-    cookies: item.cookies,
-    cli: item.cli,
-    auto_start: item.auto_start ?? true,
-  };
-
-  if (item.extras && Object.keys(item.extras).length > 0) {
-    payload.extras = JSON.parse(JSON.stringify(item.extras));
-  }
-
-  await remove({ ids: [item._id], removeFile: false });
-  await reload({ order: 'DESC', perPage: configStore.app.default_pagination });
-  await stateStore.addDownload(payload);
-};
-
-const deleteHistoryItem = async (item: StoreItem): Promise<void> => {
-  await remove({ ids: [item._id], removeFile: app.value.remove_files });
-  await reload({ order: 'DESC', perPage: configStore.app.default_pagination });
-  toast.info('Removed from history queue.');
-};
-
-const handleHistoryItemMoved = moveHandler(() => simpleMode.value && historyInitialized.value);
-
-const showMessage = (item: StoreItem): boolean => {
-  if (!item?.msg || item.msg === item?.error) {
-    return false;
-  }
-
-  return (item.msg?.length || 0) > 0;
-};
-
-const onImgError = (event: Event, item: StoreItem): void => {
-  const target = event.target as HTMLImageElement;
-  const currentSrc = target.getAttribute('src') || '';
-
-  if (target.src.endsWith('/images/placeholder.png')) {
-    return;
-  }
-
-  if (item) {
-    const fallback = getRemoteImage(item, false);
-    if (fallback && currentSrc !== fallback) {
-      target.src = fallback;
-      return;
-    }
-  }
-
-  target.src = '/images/placeholder.png';
-};
-
-onMounted(async () => {
-  await applySimpleQuery();
-
-  if (!simpleMode.value) {
-    return;
-  }
-
-  await normalizeSimpleRoute();
-  historyInitialized.value = true;
-  socketStore.on('item_moved', handleHistoryItemMoved);
-  await Promise.allSettled([
-    refreshQueue(),
-    load(1, { order: 'DESC', perPage: configStore.app.default_pagination }),
-  ]);
-
-  if (!socketStore.isConnected && autoRefreshEnabled.value) {
-    startAutoRefresh();
-  }
-});
-
-onBeforeUnmount(() => {
-  socketStore.off('item_moved', handleHistoryItemMoved);
-  stopAutoRefresh();
-});
-
-watch(
-  () => route.query.simple,
-  async (value, oldValue) => {
-    if (value === undefined || value === oldValue) {
-      return;
-    }
-
-    await applySimpleQuery();
-
-    if (simpleMode.value) {
-      await normalizeSimpleRoute();
-    }
-  },
-);
-
-watch(
-  () => route.path,
-  () => {
-    if (simpleMode.value) {
-      normalizeSimpleRoute();
-    }
-  },
-);
-
-watch(
-  () => socketStore.isConnected,
-  (connected) => {
-    if (connected) {
-      stopAutoRefresh();
-
-      if (hadSocketDisconnect.value) {
-        hadSocketDisconnect.value = false;
-        refreshQueue();
-      }
-
-      return;
-    }
-
-    hadSocketDisconnect.value = true;
-
-    if (autoRefreshEnabled.value) {
-      startAutoRefresh();
-    }
-  },
-);
-
-watch(autoRefreshEnabled, (enabled) => {
-  if (enabled && !socketStore.isConnected) {
-    startAutoRefresh();
-    return;
-  }
-
-  stopAutoRefresh();
-});
-
-watch(autoRefreshDelay, () => {
-  if (autoRefreshEnabled.value && !socketStore.isConnected) {
-    startAutoRefresh();
-  }
-});
-
-watch(
-  () => app.value.default_preset,
-  (value) => {
-    if (!formPreset.value) {
-      formPreset.value = value || '';
-    }
-  },
-);
-
-watch(
-  () => app.value.default_pagination,
-  (value, oldValue) => {
-    if (
-      !simpleMode.value ||
-      !configStore.is_loaded ||
-      value === oldValue ||
-      !historyInitialized.value
-    ) {
-      return;
-    }
-
-    load(1, { order: 'DESC', perPage: configStore.app.default_pagination });
-  },
-);
-</script>
-
-<style scoped>
-.simple-form-center {
-  transform: translateY(24vh);
-}
-
-.queue-fade-enter-active,
-.queue-fade-leave-active {
-  transition:
-    opacity 0.28s ease,
-    transform 0.32s ease;
-}
-
-.queue-fade-enter-from,
-.queue-fade-leave-to {
-  opacity: 0;
-  transform: translateY(14px);
-}
-
-.section-collapse-enter-active,
-.section-collapse-leave-active {
-  transition:
-    opacity 0.22s ease,
-    transform 0.24s ease,
-    max-height 0.28s ease;
-}
-
-.section-collapse-enter-from,
-.section-collapse-leave-to {
-  opacity: 0;
-  transform: translateY(-6px);
-  max-height: 0;
-}
-
-.section-collapse-enter-to,
-.section-collapse-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-  max-height: 2000px;
-}
-
-.queue-card-enter-active,
-.queue-card-leave-active {
-  transition:
-    opacity 0.24s ease,
-    transform 0.28s ease;
-}
-
-.queue-card-enter-from,
-.queue-card-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.queue-card-leave-active {
-  position: absolute;
-}
-
-.queue-progress {
-  position: relative;
-  min-height: 2.25rem;
-  overflow: hidden;
-}
-
-.queue-progress__bar {
-  position: absolute;
-  inset: 0 auto 0 0;
-}
-
-.queue-progress__label {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  min-height: 2.25rem;
-  min-width: 0;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  padding: 0.5rem 0.75rem;
-  text-align: center;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--ui-text-highlighted);
-  white-space: nowrap;
-}
-
-@media (max-width: 768px) {
-  .simple-form-center {
-    transform: translateY(16vh);
-  }
-}
-</style>
diff --git a/ui/app/components/ThemeButton.vue b/ui/app/components/ThemeButton.vue
new file mode 100644
index 00000000..e4ccbef8
--- /dev/null
+++ b/ui/app/components/ThemeButton.vue
@@ -0,0 +1,66 @@
+<template>
+  <UTooltip :text="title">
+    <UButton
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      :icon="icon"
+      :square="square"
+      :aria-label="title"
+      :title="title"
+      @click="color.preference = next"
+    >
+      <span v-if="showLabel" :class="labelClass">{{ title }}</span>
+    </UButton>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+withDefaults(
+  defineProps<{
+    square?: boolean;
+    showLabel?: boolean;
+    labelClass?: string;
+  }>(),
+  {
+    square: false,
+    showLabel: true,
+    labelClass: '',
+  },
+);
+
+type Choice = 'system' | 'light' | 'dark';
+
+const opts: Array<Choice> = ['system', 'light', 'dark'];
+const color = useColorMode();
+const current = computed<Choice>(() =>
+  opts.includes(color.preference as Choice) ? (color.preference as Choice) : 'system',
+);
+const next = computed<Choice>(
+  () => opts[(opts.indexOf(current.value) + 1) % opts.length] ?? 'system',
+);
+const icon = computed(() => {
+  if (current.value === 'light') {
+    return 'i-lucide-sun';
+  }
+
+  if (current.value === 'dark') {
+    return 'i-lucide-moon';
+  }
+
+  return 'i-lucide-monitor';
+});
+const title = computed(() => {
+  if (current.value === 'light') {
+    return 'Light';
+  }
+
+  if (current.value === 'dark') {
+    return 'Dark';
+  }
+
+  return 'System';
+});
+</script>
diff --git a/ui/app/composables/useMode.ts b/ui/app/composables/useMode.ts
new file mode 100644
index 00000000..f164d1d6
--- /dev/null
+++ b/ui/app/composables/useMode.ts
@@ -0,0 +1,130 @@
+import { computed, nextTick, type ComputedRef, type WritableComputedRef } from 'vue';
+import { useStorage, type RemovableRef } from '@vueuse/core';
+
+export type Mode = 'default' | 'simple' | 'regular';
+type Pref = boolean | null;
+
+export const MODE_KEY = 'simple_mode';
+export const SIMPLE_PATH = '/simple';
+
+const YES = new Set(['1', 'true', 'yes', 'on']);
+const NO = new Set(['0', 'false', 'no', 'off']);
+
+let prefRef: RemovableRef<Pref> | null = null;
+
+export const parseMode = (value: unknown): Pref => {
+  if (Array.isArray(value)) {
+    return parseMode(value[0]);
+  }
+
+  if ('boolean' === typeof value) {
+    return value;
+  }
+
+  if ('number' === typeof value) {
+    return value === 1 ? true : value === 0 ? false : null;
+  }
+
+  if ('string' !== typeof value) {
+    return null;
+  }
+
+  const item = value.trim().toLowerCase();
+
+  if (YES.has(item)) {
+    return true;
+  }
+
+  if (NO.has(item)) {
+    return false;
+  }
+
+  return null;
+};
+
+export const modeFromPref = (pref: Pref): Mode => {
+  if (pref === null) {
+    return 'default';
+  }
+
+  return pref ? 'simple' : 'regular';
+};
+
+export const prefFromMode = (mode: Mode): Pref => {
+  if (mode === 'default') {
+    return null;
+  }
+
+  return mode === 'simple';
+};
+
+export const isSimple = (pref: Pref, fallback: boolean): boolean => pref ?? fallback;
+
+export const cleanPath = (path: string): string => path.replace(/\/+$/, '') || '/';
+
+export const usePref = (): RemovableRef<Pref> => {
+  if (prefRef === null) {
+    prefRef = useStorage<Pref>(MODE_KEY, null, undefined, {
+      serializer: {
+        read: parseMode,
+        write: (value) => (value === null ? 'null' : String(value)),
+      },
+      writeDefaults: false,
+    });
+  }
+
+  return prefRef;
+};
+
+export const cookieDefault = (): Pref => parseMode(useCookie<string | null>(MODE_KEY).value);
+
+export const savePref = (value: Pref): void => {
+  const pref = usePref();
+  pref.value = value;
+};
+
+export const useMode = (): {
+  mode: WritableComputedRef<Mode>;
+  on: ComputedRef<boolean>;
+  def: ComputedRef<boolean>;
+  save: (mode: Mode) => Promise<void>;
+} => {
+  const cfg = useYtpConfig();
+  const route = useRoute();
+  const pref = usePref();
+  const def = computed(() => Boolean(cfg.is_loaded ? cfg.app.simple_mode : cookieDefault()));
+  const on = computed(() => isSimple(pref.value, def.value));
+
+  const save = async (value: Mode): Promise<void> => {
+    savePref(prefFromMode(value));
+    await nextTick();
+
+    const simpleRoute = cleanPath(route.path) === SIMPLE_PATH;
+
+    if (on.value && !simpleRoute) {
+      await navigateTo(SIMPLE_PATH);
+      return;
+    }
+
+    if (!on.value && simpleRoute) {
+      await navigateTo('/');
+    }
+  };
+
+  const mode = computed<Mode>({
+    get: () => modeFromPref(pref.value),
+    set: (value) => {
+      void save(value);
+    },
+  });
+
+  return { mode, on, def, save };
+};
+
+export const routeTarget = (path: string, pref: Pref, fallback: boolean): string | null => {
+  if (cleanPath(path) !== '/') {
+    return null;
+  }
+
+  return isSimple(pref, fallback) ? SIMPLE_PATH : null;
+};
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index a23a84d5..b0b5b7de 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -1,544 +1,453 @@
 <template>
-  <UApp :toaster="toasterConfig">
-    <Transition name="shell-mode" mode="out-in">
-      <div
-        v-if="simpleMode"
-        key="simple"
-        class="shell-stage flex flex-col bg-default/95 backdrop-blur-sm"
-      >
+  <AppRoot ref="root" mode="regular" load-opts v-slot="{ reloadBg, bgLoading }">
+    <div class="shell-stage shell-surface flex flex-col">
+      <Shutdown v-if="app_shutdown" />
+
+      <div id="main_container" class="shell-root flex flex-col" v-else>
         <UAlert
-          v-if="showConnectionBanner"
-          color="warning"
+          v-if="newVersionIsAvailable"
+          color="success"
           variant="soft"
           orientation="horizontal"
-          :title="connectionBannerTitle"
+          title="A new WebUI version is installed."
         >
           <template #leading>
-            <UIcon
-              :name="connectionBannerIcon"
-              :class="[
-                'size-4 shrink-0 text-warning',
-                socket.connectionStatus === 'connecting' ? 'animate-spin' : '',
-              ]"
-            />
+            <UIcon name="i-lucide-info" class="size-4 shrink-0 text-success" />
           </template>
 
-          <template v-if="socket.connectionStatus === 'disconnected'" #actions>
-            <UButton
-              color="neutral"
-              variant="link"
-              size="sm"
-              class="px-0"
-              @click="socket.reconnect()"
-            >
-              Reconnect
-            </UButton>
+          <template #actions>
+            <div class="flex items-center gap-3">
+              <UButton to="/changelog" color="neutral" variant="link" size="sm" class="px-0">
+                View changelog
+              </UButton>
+
+              <UButton color="neutral" variant="link" size="sm" class="px-0" @click="reloadPage">
+                Reload app
+              </UButton>
+            </div>
           </template>
         </UAlert>
 
-        <Simple @show_settings="show_settings = true" />
-      </div>
-
-      <div v-else key="regular" class="shell-stage shell-surface flex flex-col">
-        <Shutdown v-if="app_shutdown" />
-
-        <div id="main_container" class="shell-root flex flex-col" v-else>
-          <UAlert
-            v-if="newVersionIsAvailable"
-            color="success"
-            variant="soft"
-            orientation="horizontal"
-            title="A new WebUI version is installed."
+        <UDashboardGroup
+          storage="local"
+          storage-key="ytptube-shell"
+          class="shell-dashboard flex-1"
+          :ui="{ base: 'relative flex min-h-full overflow-visible' }"
+        >
+          <UDashboardSidebar
+            v-model:open="showSidebar"
+            side="left"
+            collapsible
+            resizable
+            :default-size="15"
+            :min-size="10"
+            :max-size="20"
+            :collapsed-size="4"
+            :ui="dashboardSidebarUi"
           >
-            <template #leading>
-              <UIcon name="i-lucide-info" class="size-4 shrink-0 text-success" />
+            <template #header="{ collapsed }">
+              <UTooltip :text="connectionStatusLabel">
+                <NuxtLink
+                  to="/"
+                  class="flex w-full min-w-0 items-center gap-2 rounded-xl transition-colors hover:bg-elevated/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                  :class="collapsed ? 'justify-center p-1' : 'px-1.5 py-1'"
+                  aria-label="Go to home"
+                >
+                  <span
+                    class="relative inline-flex shrink-0 items-center justify-center transition-all duration-200"
+                    :class="
+                      collapsed
+                        ? 'size-10 rounded-xl bg-elevated/80 ring ring-default shadow-xs'
+                        : 'size-9 rounded-lg'
+                    "
+                  >
+                    <img
+                      :src="uri('/images/favicon.png')"
+                      alt="YTPTube"
+                      class="rounded-lg object-contain"
+                      :class="collapsed ? 'size-6' : 'size-5'"
+                    />
+                    <span
+                      aria-hidden="true"
+                      class="absolute right-0 bottom-0 size-2.5 rounded-full ring-2 ring-default"
+                      :class="connectionStatusDotClass"
+                    />
+                  </span>
+
+                  <div v-if="false === collapsed" class="min-w-0">
+                    <p class="truncate text-sm font-semibold" :class="connectionStatusColor">
+                      YTPTube
+                    </p>
+                    <p v-if="config?.app?.instance_title" class="truncate text-xs text-toned">
+                      {{ config.app.instance_title }}
+                    </p>
+                  </div>
+                </NuxtLink>
+              </UTooltip>
             </template>
 
-            <template #actions>
-              <div class="flex items-center gap-3">
-                <UButton to="/changelog" color="neutral" variant="link" size="sm" class="px-0">
-                  View changelog
-                </UButton>
+            <template #default="{ collapsed }">
+              <div class="flex h-full flex-col gap-6 px-1 py-1">
+                <div v-for="section in sidebarSections" :key="section.id" class="space-y-2">
+                  <p
+                    v-if="false === collapsed && section.label"
+                    class="px-2 text-[11px] font-semibold tracking-[0.22em] text-toned uppercase"
+                  >
+                    {{ section.label }}
+                  </p>
 
-                <UButton color="neutral" variant="link" size="sm" class="px-0" @click="reloadPage">
-                  Reload app
-                </UButton>
+                  <UNavigationMenu
+                    orientation="vertical"
+                    :collapsed="collapsed"
+                    :items="section.items"
+                    :tooltip="true"
+                    :ui="navigationUi(collapsed)"
+                  />
+                </div>
               </div>
             </template>
-          </UAlert>
 
-          <UDashboardGroup
-            storage="local"
-            storage-key="ytptube-shell"
-            class="shell-dashboard flex-1"
-            :ui="{ base: 'relative flex min-h-full overflow-visible' }"
-          >
-            <UDashboardSidebar
-              v-model:open="showSidebar"
-              side="left"
-              collapsible
-              resizable
-              :default-size="15"
-              :min-size="10"
-              :max-size="20"
-              :collapsed-size="4"
-              :ui="dashboardSidebarUi"
-            >
-              <template #header="{ collapsed }">
-                <UTooltip :text="connectionStatusLabel">
-                  <NuxtLink
-                    to="/"
-                    class="flex w-full min-w-0 items-center gap-2 rounded-xl transition-colors hover:bg-elevated/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-                    :class="collapsed ? 'justify-center p-1' : 'px-1.5 py-1'"
-                    aria-label="Go to home"
-                  >
-                    <span
-                      class="relative inline-flex shrink-0 items-center justify-center transition-all duration-200"
-                      :class="
-                        collapsed
-                          ? 'size-10 rounded-xl bg-elevated/80 ring ring-default shadow-xs'
-                          : 'size-9 rounded-lg'
+            <template #footer="{ collapsed }">
+              <div v-if="false === collapsed" class="w-full"></div>
+            </template>
+          </UDashboardSidebar>
+
+          <UDashboardPanel class="min-w-0 bg-transparent" :ui="dashboardPanelUi">
+            <template #header>
+              <UDashboardNavbar :toggle="false" :title="pageTitle" :ui="dashboardNavbarUi">
+                <template #left>
+                  <div class="flex items-center gap-2">
+                    <UDashboardSidebarToggle class="lg:hidden" />
+                    <UButton
+                      to="/"
+                      color="neutral"
+                      variant="ghost"
+                      size="sm"
+                      icon="i-lucide-house"
+                      class="lg:hidden"
+                    >
+                      Home
+                    </UButton>
+                    <UDashboardSidebarCollapse class="hidden lg:inline-flex" />
+                  </div>
+                </template>
+
+                <template #right>
+                  <div class="flex items-center gap-1 sm:gap-2">
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      size="sm"
+                      icon="i-lucide-gauge"
+                      @click="showLimits = true"
+                    >
+                      <span class="hidden xl:inline">Limits</span>
+                    </UButton>
+
+                    <NotifyDropdown />
+
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      size="sm"
+                      icon="i-lucide-search"
+                      aria-label="Search routes and actions"
+                      title="Search routes and actions"
+                      class="shrink-0 lg:hidden"
+                      @click="showRouteSearch = true"
+                    />
+
+                    <UDashboardSearchButton class="hidden shrink-0 lg:inline-flex" />
+
+                    <ThemeButton label-class="hidden xl:inline" />
+
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      size="sm"
+                      icon="i-lucide-refresh-cw"
+                      @click="$router.go(0)"
+                    >
+                      <span class="hidden xl:inline">Reload</span>
+                    </UButton>
+
+                    <UButton
+                      color="neutral"
+                      variant="ghost"
+                      size="sm"
+                      icon="i-lucide-settings-2"
+                      @click="root?.open()"
+                    >
+                      <span class="hidden xl:inline">WebUI Settings</span>
+                    </UButton>
+
+                    <UButton
+                      v-if="true === config.app.is_native"
+                      color="error"
+                      variant="ghost"
+                      size="sm"
+                      icon="i-lucide-power"
+                      @click="shutdownApp"
+                    >
+                      <span class="hidden xl:inline">Shutdown</span>
+                    </UButton>
+                  </div>
+                </template>
+              </UDashboardNavbar>
+            </template>
+
+            <template #body>
+              <div class="relative flex min-h-full min-w-0 max-w-full flex-1 flex-col">
+                <NuxtLoadingIndicator />
+
+                <div
+                  class="flex min-h-0 min-w-0 max-w-full flex-1 flex-col px-4 py-4 sm:px-5 sm:py-5 lg:px-6"
+                >
+                  <div class="flex min-h-0 min-w-0 max-w-full flex-1 flex-col gap-4">
+                    <UAlert
+                      v-if="!config.is_loaded"
+                      :color="config.is_loading ? 'info' : 'error'"
+                      variant="soft"
+                      :title="
+                        config.is_loading
+                          ? 'Loading configuration...'
+                          : 'Failed to load configuration'
                       "
                     >
-                      <img
-                        :src="uri('/images/favicon.png')"
-                        alt="YTPTube"
-                        class="rounded-lg object-contain"
-                        :class="collapsed ? 'size-6' : 'size-5'"
-                      />
-                      <span
-                        aria-hidden="true"
-                        class="absolute right-0 bottom-0 size-2.5 rounded-full ring-2 ring-default"
-                        :class="connectionStatusDotClass"
-                      />
-                    </span>
+                      <template #leading>
+                        <UIcon
+                          :name="
+                            config.is_loading ? 'i-lucide-loader-circle' : 'i-lucide-triangle-alert'
+                          "
+                          :class="[
+                            'size-4 shrink-0',
+                            config.is_loading ? 'animate-spin text-info' : 'text-error',
+                          ]"
+                        />
+                      </template>
 
-                    <div v-if="false === collapsed" class="min-w-0">
-                      <p class="truncate text-sm font-semibold" :class="connectionStatusColor">
-                        YTPTube
-                      </p>
-                      <p v-if="config?.app?.instance_title" class="truncate text-xs text-toned">
-                        {{ config.app.instance_title }}
-                      </p>
-                    </div>
-                  </NuxtLink>
-                </UTooltip>
-              </template>
+                      <template #description>
+                        <div class="space-y-3">
+                          <p v-if="config.is_loading" class="text-sm text-default">
+                            This usually takes less than a few seconds. If this is taking too long,
+                            <button
+                              type="button"
+                              class="font-semibold text-highlighted underline-offset-2 hover:underline"
+                              @click="$router.go(0)"
+                            >
+                              click here
+                            </button>
+                            to reload the page.
+                          </p>
 
-              <template #default="{ collapsed }">
-                <div class="flex h-full flex-col gap-6 px-1 py-1">
-                  <div v-for="section in sidebarSections" :key="section.id" class="space-y-2">
-                    <p
-                      v-if="false === collapsed && section.label"
-                      class="px-2 text-[11px] font-semibold tracking-[0.22em] text-toned uppercase"
+                          <p v-else class="text-sm text-default">
+                            Failed to load the application configuration. This likely indicates a
+                            problem with the backend. Try to
+                            <button
+                              type="button"
+                              class="font-semibold text-highlighted underline-offset-2 hover:underline"
+                              @click="config.loadConfig(true)"
+                            >
+                              reload configuration
+                            </button>
+                            or
+                            <button
+                              type="button"
+                              class="font-semibold text-highlighted underline-offset-2 hover:underline"
+                              @click="$router.go(0)"
+                            >
+                              reload the page
+                            </button>
+                            .
+                          </p>
+
+                          <div
+                            v-if="socket.error"
+                            class="flex flex-wrap items-center gap-2 border-t border-default pt-3 text-error"
+                          >
+                            <UIcon name="i-lucide-triangle-alert" class="size-4" />
+                            <span
+                              class="inline-flex min-w-6 items-center justify-center rounded-full bg-error px-2 py-0.5 text-xs font-semibold text-white"
+                            >
+                              {{ socket.error_count }}
+                            </span>
+                            <span>
+                              {{ socket.error }}. Check the developer console for more information.
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                    </UAlert>
+
+                    <ConnectionBanner />
+
+                    <div
+                      v-if="config.is_loaded"
+                      class="flex min-h-0 min-w-0 max-w-full flex-1 flex-col"
                     >
-                      {{ section.label }}
-                    </p>
-
-                    <UNavigationMenu
-                      orientation="vertical"
-                      :collapsed="collapsed"
-                      :items="section.items"
-                      :tooltip="true"
-                      :ui="navigationUi(collapsed)"
-                    />
+                      <NuxtPage :isLoading="bgLoading" @reload_bg="reloadBg(true)" />
+                    </div>
                   </div>
-                </div>
-              </template>
 
-              <template #footer="{ collapsed }">
-                <div v-if="false === collapsed" class="w-full"></div>
-              </template>
-            </UDashboardSidebar>
-
-            <UDashboardPanel class="min-w-0 bg-transparent" :ui="dashboardPanelUi">
-              <template #header>
-                <UDashboardNavbar :toggle="false" :title="pageTitle" :ui="dashboardNavbarUi">
-                  <template #left>
-                    <div class="flex items-center gap-2">
-                      <UDashboardSidebarToggle class="lg:hidden" />
-                      <UButton
-                        to="/"
-                        color="neutral"
-                        variant="ghost"
-                        size="sm"
-                        icon="i-lucide-house"
-                        class="lg:hidden"
-                      >
-                        Home
-                      </UButton>
-                      <UDashboardSidebarCollapse class="hidden lg:inline-flex" />
-                    </div>
-                  </template>
-
-                  <template #right>
-                    <div class="flex items-center gap-1 sm:gap-2">
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        size="sm"
-                        icon="i-lucide-gauge"
-                        @click="showLimits = true"
-                      >
-                        <span class="hidden xl:inline">Limits</span>
-                      </UButton>
-
-                      <NotifyDropdown />
-
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        size="sm"
-                        icon="i-lucide-search"
-                        aria-label="Search routes and actions"
-                        title="Search routes and actions"
-                        class="shrink-0 lg:hidden"
-                        @click="showRouteSearch = true"
-                      />
-
-                      <UDashboardSearchButton class="hidden shrink-0 lg:inline-flex" />
-
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        size="sm"
-                        :icon="colorModeButtonIcon"
-                        :aria-label="colorModeButtonTitle"
-                        :title="colorModeButtonTitle"
-                        @click="colorMode.preference = nextColorModePreference"
-                      >
-                        <span class="hidden xl:inline">{{ colorModeButtonTitle }}</span>
-                      </UButton>
-
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        size="sm"
-                        icon="i-lucide-refresh-cw"
-                        @click="$router.go(0)"
-                      >
-                        <span class="hidden xl:inline">Reload</span>
-                      </UButton>
-
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        size="sm"
-                        icon="i-lucide-settings-2"
-                        @click="show_settings = !show_settings"
-                      >
-                        <span class="hidden xl:inline">WebUI Settings</span>
-                      </UButton>
-
-                      <UButton
-                        v-if="true === config.app.is_native"
-                        color="error"
-                        variant="ghost"
-                        size="sm"
-                        icon="i-lucide-power"
-                        @click="shutdownApp"
-                      >
-                        <span class="hidden xl:inline">Shutdown</span>
-                      </UButton>
-                    </div>
-                  </template>
-                </UDashboardNavbar>
-              </template>
-
-              <template #body>
-                <div class="relative flex min-h-full min-w-0 max-w-full flex-1 flex-col">
-                  <NuxtLoadingIndicator />
-
-                  <div
-                    class="flex min-h-0 min-w-0 max-w-full flex-1 flex-col px-4 py-4 sm:px-5 sm:py-5 lg:px-6"
+                  <footer
+                    v-if="config.is_loaded"
+                    class="shell-footer mt-auto border-t border-default pt-6 text-sm text-toned"
                   >
-                    <div class="flex min-h-0 min-w-0 max-w-full flex-1 flex-col gap-4">
-                      <UAlert
-                        v-if="!config.is_loaded"
-                        :color="config.is_loading ? 'info' : 'error'"
-                        variant="soft"
-                        :title="
-                          config.is_loading
-                            ? 'Loading configuration...'
-                            : 'Failed to load configuration'
-                        "
-                      >
-                        <template #leading>
+                    <div class="grid gap-6 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
+                      <div class="space-y-3">
+                        <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
+                          <NuxtLink
+                            href="https://github.com/ArabCoders/ytptube"
+                            target="_blank"
+                            class="inline-flex items-center gap-2 font-semibold text-highlighted"
+                          >
+                            <UIcon name="i-lucide-github" class="size-4" />
+                            <span>YTPTube</span>
+                          </NuxtLink>
+
+                          <UTooltip :text="buildTooltip">
+                            <span class="text-xs has-tooltip">
+                              {{ config?.app?.app_version || 'unknown' }}
+                            </span>
+                          </UTooltip>
+                        </div>
+
+                        <p
+                          v-if="config.app?.new_version"
+                          class="flex flex-wrap items-center gap-2 text-xs"
+                        >
+                          <UIcon name="i-lucide-info" class="size-4 text-warning" />
+                          <span>Update available:</span>
+                          <NuxtLink to="/changelog" class="font-semibold text-highlighted">
+                            {{ config.app.new_version }}
+                          </NuxtLink>
+                        </p>
+
+                        <button
+                          v-else
+                          type="button"
+                          class="inline-flex items-center gap-2 text-xs text-left transition-colors hover:text-highlighted disabled:opacity-60"
+                          :disabled="checkingUpdates"
+                          @click="checkForUpdates"
+                        >
                           <UIcon
                             :name="
-                              config.is_loading
+                              checkingUpdates
                                 ? 'i-lucide-loader-circle'
-                                : 'i-lucide-triangle-alert'
+                                : 'i-lucide-circle-check-big'
                             "
-                            :class="[
-                              'size-4 shrink-0',
-                              config.is_loading ? 'animate-spin text-info' : 'text-error',
-                            ]"
+                            :class="['size-4', checkingUpdates ? 'animate-spin' : '']"
                           />
-                        </template>
+                          <span>{{ updateCheckMessage }}</span>
+                        </button>
 
-                        <template #description>
-                          <div class="space-y-3">
-                            <p v-if="config.is_loading" class="text-sm text-default">
-                              This usually takes less than a few seconds. If this is taking too
-                              long,
-                              <button
-                                type="button"
-                                class="font-semibold text-highlighted underline-offset-2 hover:underline"
-                                @click="$router.go(0)"
-                              >
-                                click here
-                              </button>
-                              to reload the page.
-                            </p>
-
-                            <p v-else class="text-sm text-default">
-                              Failed to load the application configuration. This likely indicates a
-                              problem with the backend. Try to
-                              <button
-                                type="button"
-                                class="font-semibold text-highlighted underline-offset-2 hover:underline"
-                                @click="config.loadConfig(true)"
-                              >
-                                reload configuration
-                              </button>
-                              or
-                              <button
-                                type="button"
-                                class="font-semibold text-highlighted underline-offset-2 hover:underline"
-                                @click="$router.go(0)"
-                              >
-                                reload the page
-                              </button>
-                              .
-                            </p>
-
-                            <div
-                              v-if="socket.error"
-                              class="flex flex-wrap items-center gap-2 border-t border-default pt-3 text-error"
-                            >
-                              <UIcon name="i-lucide-triangle-alert" class="size-4" />
-                              <span
-                                class="inline-flex min-w-6 items-center justify-center rounded-full bg-error px-2 py-0.5 text-xs font-semibold text-white"
-                              >
-                                {{ socket.error_count }}
-                              </span>
-                              <span>
-                                {{ socket.error }}. Check the developer console for more
-                                information.
-                              </span>
-                            </div>
-                          </div>
-                        </template>
-                      </UAlert>
-
-                      <UAlert
-                        v-if="showConnectionBanner"
-                        color="warning"
-                        variant="soft"
-                        orientation="horizontal"
-                        :title="connectionBannerTitle"
-                      >
-                        <template #leading>
-                          <UIcon
-                            :name="connectionBannerIcon"
-                            :class="[
-                              'size-4 shrink-0 text-warning',
-                              socket.connectionStatus === 'connecting' ? 'animate-spin' : '',
-                            ]"
-                          />
-                        </template>
-
-                        <template v-if="socket.connectionStatus === 'disconnected'" #actions>
-                          <UButton
-                            color="neutral"
-                            variant="link"
-                            size="sm"
-                            class="px-0"
-                            @click="socket.reconnect()"
+                        <p v-if="config.app?.started" class="flex items-center gap-2 text-xs">
+                          <UIcon name="i-lucide-clock-3" class="size-4" />
+                          <UTooltip
+                            :text="
+                              'Started: ' +
+                              moment.unix(config.app?.started).format('YYYY-MM-DD HH:mm Z')
+                            "
                           >
-                            Reconnect
-                          </UButton>
-                        </template>
-                      </UAlert>
+                            <span class="has-tooltip">
+                              {{ moment.unix(config.app?.started).fromNow() }}
+                            </span>
+                          </UTooltip>
+                        </p>
+                      </div>
 
                       <div
-                        v-if="config.is_loaded"
-                        class="flex min-h-0 min-w-0 max-w-full flex-1 flex-col"
+                        class="space-y-3 border-t border-default pt-4 lg:border-t-0 lg:border-l lg:pl-6 lg:pt-0"
                       >
-                        <NuxtPage :isLoading="loadingImage" @reload_bg="loadImage(true)" />
-                      </div>
-                    </div>
+                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-toned">
+                          Powered by
+                        </p>
 
-                    <footer
-                      v-if="config.is_loaded"
-                      class="shell-footer mt-auto border-t border-default pt-6 text-sm text-toned"
-                    >
-                      <div class="grid gap-6 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
-                        <div class="space-y-3">
-                          <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
+                        <div class="space-y-2">
+                          <div class="flex flex-wrap items-center gap-2">
                             <NuxtLink
-                              href="https://github.com/ArabCoders/ytptube"
+                              href="https://github.com/yt-dlp/yt-dlp"
                               target="_blank"
                               class="inline-flex items-center gap-2 font-semibold text-highlighted"
                             >
                               <UIcon name="i-lucide-github" class="size-4" />
-                              <span>YTPTube</span>
+                              <span>yt-dlp</span>
                             </NuxtLink>
 
-                            <UTooltip :text="buildTooltip">
-                              <span class="text-xs has-tooltip">
-                                {{ config?.app?.app_version || 'unknown' }}
-                              </span>
-                            </UTooltip>
+                            <span class="text-xs">{{
+                              config?.app?.ytdlp_version || 'unknown'
+                            }}</span>
                           </div>
 
                           <p
-                            v-if="config.app?.new_version"
+                            v-if="config.app?.yt_new_version"
                             class="flex flex-wrap items-center gap-2 text-xs"
                           >
-                            <UIcon name="i-lucide-info" class="size-4 text-warning" />
-                            <span>Update available:</span>
-                            <NuxtLink to="/changelog" class="font-semibold text-highlighted">
-                              {{ config.app.new_version }}
-                            </NuxtLink>
-                          </p>
-
-                          <button
-                            v-else
-                            type="button"
-                            class="inline-flex items-center gap-2 text-xs text-left transition-colors hover:text-highlighted disabled:opacity-60"
-                            :disabled="checkingUpdates"
-                            @click="checkForUpdates"
-                          >
-                            <UIcon
-                              :name="
-                                checkingUpdates
-                                  ? 'i-lucide-loader-circle'
-                                  : 'i-lucide-circle-check-big'
-                              "
-                              :class="['size-4', checkingUpdates ? 'animate-spin' : '']"
-                            />
-                            <span>{{ updateCheckMessage }}</span>
-                          </button>
-
-                          <p v-if="config.app?.started" class="flex items-center gap-2 text-xs">
-                            <UIcon name="i-lucide-clock-3" class="size-4" />
-                            <UTooltip
-                              :text="
-                                'Started: ' +
-                                moment.unix(config.app?.started).format('YYYY-MM-DD HH:mm Z')
-                              "
-                            >
+                            <UTooltip text="Restart container to update yt-dlp">
                               <span class="has-tooltip">
-                                {{ moment.unix(config.app?.started).fromNow() }}
+                                <UIcon name="i-lucide-info" class="size-4 text-warning" />
                               </span>
                             </UTooltip>
-                          </p>
-                        </div>
-
-                        <div
-                          class="space-y-3 border-t border-default pt-4 lg:border-t-0 lg:border-l lg:pl-6 lg:pt-0"
-                        >
-                          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-toned">
-                            Powered by
-                          </p>
-
-                          <div class="space-y-2">
-                            <div class="flex flex-wrap items-center gap-2">
-                              <NuxtLink
-                                href="https://github.com/yt-dlp/yt-dlp"
-                                target="_blank"
-                                class="inline-flex items-center gap-2 font-semibold text-highlighted"
-                              >
-                                <UIcon name="i-lucide-github" class="size-4" />
-                                <span>yt-dlp</span>
-                              </NuxtLink>
-
-                              <span class="text-xs">{{
-                                config?.app?.ytdlp_version || 'unknown'
-                              }}</span>
-                            </div>
-
-                            <p
-                              v-if="config.app?.yt_new_version"
-                              class="flex flex-wrap items-center gap-2 text-xs"
+                            <span>Update available:</span>
+                            <NuxtLink
+                              :href="`https://github.com/yt-dlp/yt-dlp/releases/tag/${config.app.yt_new_version}`"
+                              target="_blank"
+                              class="font-semibold text-highlighted"
                             >
-                              <UTooltip text="Restart container to update yt-dlp">
-                                <span class="has-tooltip">
-                                  <UIcon name="i-lucide-info" class="size-4 text-warning" />
-                                </span>
-                              </UTooltip>
-                              <span>Update available:</span>
-                              <NuxtLink
-                                :href="`https://github.com/yt-dlp/yt-dlp/releases/tag/${config.app.yt_new_version}`"
-                                target="_blank"
-                                class="font-semibold text-highlighted"
-                              >
-                                {{ config.app.yt_new_version }}
-                              </NuxtLink>
-                            </p>
-                          </div>
+                              {{ config.app.yt_new_version }}
+                            </NuxtLink>
+                          </p>
                         </div>
                       </div>
-                    </footer>
-                  </div>
-
-                  <ClientOnly>
-                    <Dialog />
-                  </ClientOnly>
+                    </div>
+                  </footer>
                 </div>
-              </template>
-            </UDashboardPanel>
 
-            <UDashboardSearch
-              v-model:open="showRouteSearch"
-              :groups="routeSearchGroups"
-              shortcut="meta_k"
-              placeholder="Search routes and actions"
-              :ui="{ modal: 'sm:max-w-3xl h-full sm:h-[28rem]' }"
-            />
+                <ClientOnly>
+                  <Dialog />
+                </ClientOnly>
+              </div>
+            </template>
+          </UDashboardPanel>
 
-            <UModal
-              v-if="showLimits"
-              :open="showLimits"
-              title="Download Limits"
-              :ui="{ content: 'sm:max-w-4xl', body: 'p-0' }"
-              @update:open="(open) => !open && (showLimits = false)"
-            >
-              <template #body>
-                <LimitsPage />
-              </template>
-            </UModal>
-          </UDashboardGroup>
-        </div>
+          <UDashboardSearch
+            v-model:open="showRouteSearch"
+            :groups="routeSearchGroups"
+            shortcut="meta_k"
+            placeholder="Search routes and actions"
+            :ui="{ modal: 'sm:max-w-3xl h-full sm:h-[28rem]' }"
+          />
+
+          <UModal
+            v-if="showLimits"
+            :open="showLimits"
+            title="Download Limits"
+            :ui="{ content: 'sm:max-w-4xl', body: 'p-0' }"
+            @update:open="(open) => !open && (showLimits = false)"
+          >
+            <template #body>
+              <LimitsPage />
+            </template>
+          </UModal>
+        </UDashboardGroup>
       </div>
-    </Transition>
-
-    <SettingsPanel
-      :isOpen="show_settings"
-      :isLoading="loadingImage"
-      @close="show_settings = false"
-      @reload_bg="loadImage(true)"
-      direction="right"
-    />
-  </UApp>
+    </div>
+  </AppRoot>
 </template>
 
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 import { ref, onBeforeUnmount, onMounted, readonly } from 'vue';
-import { useStorage } from '@vueuse/core';
 import moment from 'moment';
 import { useMediaQuery } from '~/composables/useMediaQuery';
-import type { toastPosition } from '~/composables/useNotification';
+import AppRoot from '~/components/AppRoot.vue';
+import ConnectionBanner from '~/components/ConnectionBanner.vue';
 import LimitsPage from '~/components/LimitsPage.vue';
-import { formatPageTitle, parse_api_response, request, syncOpacity, uri } from '~/utils';
+import ThemeButton from '~/components/ThemeButton.vue';
+import { formatPageTitle, parse_api_response, request, uri } from '~/utils';
 import { getSidebarSwipeMode } from '~/utils/sidebarSwipe';
-import type { YTDLPOption } from '~/types/ytdlp';
 import { useDialog } from '~/composables/useDialog';
 import Dialog from '~/components/Dialog.vue';
-import Simple from '~/components/Simple.vue';
 import Shutdown from '~/components/shutdown.vue';
 import type { version_check } from '~/types';
 import {
@@ -555,7 +464,6 @@ type SidebarSection = {
   items: Array<Array<NavigationMenuItem>>;
 };
 
-type ColorModePreference = 'system' | 'light' | 'dark';
 type SwipeMode = 'open' | 'close';
 
 const MOBILE_SIDEBAR_MIN_SWIPE_DISTANCE = 64;
@@ -563,15 +471,8 @@ const MOBILE_SIDEBAR_MIN_SWIPE_DISTANCE = 64;
 const socket = useAppSocket();
 const config = useYtpConfig();
 const route = useRoute();
-const colorMode = useColorMode();
-const loadedImage = ref();
-const loadingImage = ref(false);
-const bg_enable = useStorage('random_bg', true);
-const bg_opacity = useStorage('random_bg_opacity', 0.95);
-const page_anims = useStorage<boolean>('page_anims', true);
+const root = ref<InstanceType<typeof AppRoot> | null>(null);
 const app_shutdown = ref<boolean>(false);
-const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false);
-const show_settings = ref(false);
 const checkingUpdates = ref(false);
 const updateCheckMessage = ref('Up to date - Check now');
 const showRouteSearch = ref(false);
@@ -589,42 +490,6 @@ const SwipeState = {
   endY: 0,
 };
 
-const colorModePreferences: Array<ColorModePreference> = ['system', 'light', 'dark'];
-
-const colorModePreference = computed<ColorModePreference>(() => {
-  const preference = colorMode.preference;
-  return colorModePreferences.includes(preference as ColorModePreference)
-    ? (preference as ColorModePreference)
-    : 'system';
-});
-
-const colorModeButtonIcon = computed(() => {
-  switch (colorModePreference.value) {
-    case 'light':
-      return 'i-lucide-sun';
-    case 'dark':
-      return 'i-lucide-moon';
-    default:
-      return 'i-lucide-monitor';
-  }
-});
-
-const nextColorModePreference = computed<ColorModePreference>(() => {
-  const currentIndex = colorModePreferences.indexOf(colorModePreference.value);
-  return colorModePreferences[(currentIndex + 1) % colorModePreferences.length] ?? 'system';
-});
-
-const colorModeButtonTitle = computed(() => {
-  switch (colorModePreference.value) {
-    case 'light':
-      return 'Light';
-    case 'dark':
-      return 'Dark';
-    default:
-      return 'System';
-  }
-});
-
 const resetSwipe = (): void => {
   SwipeState.mode = null;
   SwipeState.tracking = false;
@@ -806,21 +671,41 @@ const buildTooltip = computed(
     `Build: ${config.app?.app_build_date}, Branch: ${config.app?.app_branch}, SHA: ${config.app?.app_commit_sha}`,
 );
 
-const showConnectionBanner = computed(() => socket.connectionStatus !== 'connected');
-
-const connectionBannerTitle = computed(() => {
-  switch (socket.connectionStatus) {
-    case 'connecting':
-      return 'Connecting to websocket server...';
-    case 'disconnected':
-    default:
-      return 'Websocket connection lost.';
+const connectionStatusColor = computed(() => {
+  if (socket.connectionStatus === 'connected') {
+    return 'text-success';
   }
+
+  if (socket.connectionStatus === 'connecting') {
+    return 'text-warning';
+  }
+
+  return 'text-error';
 });
 
-const connectionBannerIcon = computed(() =>
-  socket.connectionStatus === 'connecting' ? 'i-lucide-loader-circle' : 'i-lucide-info',
-);
+const connectionStatusDotClass = computed(() => {
+  if (socket.connectionStatus === 'connected') {
+    return 'bg-success';
+  }
+
+  if (socket.connectionStatus === 'connecting') {
+    return 'bg-warning';
+  }
+
+  return 'bg-error';
+});
+
+const connectionStatusLabel = computed(() => {
+  if (socket.connectionStatus === 'connected') {
+    return 'Connected';
+  }
+
+  if (socket.connectionStatus === 'connecting') {
+    return 'Connecting...';
+  }
+
+  return 'Disconnected';
+});
 
 const sidebarSections = computed<Array<SidebarSection>>(() =>
   sidebarItems.value.map((section) => ({
@@ -900,12 +785,7 @@ const resumeDownloads = async (): Promise<void> => {
 
 const openSettings = async (): Promise<void> => {
   await closeRouteSearch();
-  show_settings.value = true;
-};
-
-const syncShellModeClass = () => {
-  const html = document.documentElement;
-  html.classList.toggle('simple-mode', simpleMode.value);
+  root.value?.open();
 };
 
 const handleRouteSelect = async (item: NavItem) => {
@@ -983,26 +863,6 @@ onMounted(async () => {
     passive: true,
     capture: true,
   });
-  syncShellModeClass();
-
-  try {
-    await config.loadConfig();
-  } catch {}
-
-  try {
-    const opts = await request('/api/yt-dlp/options');
-    if (opts.ok) {
-      config.ytdlp_options = (await opts.json()) as Array<YTDLPOption>;
-    }
-  } catch {}
-
-  try {
-    socket.connect();
-  } catch {}
-
-  try {
-    await handleImage(bg_enable.value);
-  } catch {}
 });
 
 onBeforeUnmount(() => {
@@ -1012,8 +872,6 @@ onBeforeUnmount(() => {
   document.removeEventListener('touchcancel', handleSwipeCancel, true);
 });
 
-watch(bg_enable, async (v) => await handleImage(v));
-watch(simpleMode, () => syncShellModeClass());
 watch(isMobile, (v) => {
   if (v) {
     return;
@@ -1022,103 +880,6 @@ watch(isMobile, (v) => {
   showSidebar.value = false;
   resetSwipe();
 });
-watch(bg_opacity, () => {
-  if (false === bg_enable.value) {
-    return;
-  }
-
-  syncOpacity();
-});
-
-watch(
-  page_anims,
-  (val) => {
-    if (val) {
-      document.documentElement.classList.remove('no-page-anim');
-    } else {
-      document.documentElement.classList.add('no-page-anim');
-    }
-  },
-  { immediate: true },
-);
-
-watch(loadedImage, () => {
-  if (false === bg_enable.value) {
-    return;
-  }
-
-  const html = document.documentElement;
-
-  const style = {
-    'background-color': 'unset',
-    display: 'block',
-    'min-height': '100%',
-    'min-width': '100%',
-    'background-image': `url(${loadedImage.value})`,
-  } as any;
-
-  html.setAttribute(
-    'style',
-    Object.keys(style)
-      .map((k) => `${k}: ${style[k]}`)
-      .join('; ')
-      .trim(),
-  );
-  html.classList.add('bg-fanart');
-  syncOpacity();
-});
-
-const handleImage = async (enabled: boolean) => {
-  if (false === enabled) {
-    const html = document.documentElement;
-    const body = document.querySelector('body');
-
-    html.classList.remove('bg-fanart');
-
-    if (html.getAttribute('style')) {
-      html.removeAttribute('style');
-    }
-
-    if (body?.getAttribute('style')) {
-      body.removeAttribute('style');
-    }
-
-    loadedImage.value = '';
-    return;
-  }
-
-  if (loadedImage.value) {
-    return;
-  }
-
-  await loadImage();
-};
-
-const loadImage = async (force = false) => {
-  if (loadingImage.value) {
-    return;
-  }
-
-  try {
-    loadingImage.value = true;
-
-    let url = '/api/random/background';
-    if (force) {
-      url += '?force=true';
-    }
-
-    const imgRequest = await request(url);
-    if (200 !== imgRequest.status) {
-      return;
-    }
-
-    loadedImage.value = URL.createObjectURL(await imgRequest.blob());
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loadingImage.value = false;
-  }
-};
 
 const useVersionUpdate = () => {
   const newVersionIsAvailable = ref(false);
@@ -1174,51 +935,6 @@ const shutdownApp = async () => {
   }
 };
 
-const connectionStatusColor = computed(() => {
-  switch (socket.connectionStatus) {
-    case 'connected':
-      return 'text-success';
-    case 'connecting':
-      return 'text-warning';
-    case 'disconnected':
-    default:
-      return 'text-error';
-  }
-});
-
-const connectionStatusDotClass = computed(() => {
-  switch (socket.connectionStatus) {
-    case 'connected':
-      return 'bg-success';
-    case 'connecting':
-      return 'bg-warning';
-    case 'disconnected':
-    default:
-      return 'bg-error';
-  }
-});
-
-const connectionStatusLabel = computed(() => {
-  switch (socket.connectionStatus) {
-    case 'connected':
-      return 'Connected';
-    case 'connecting':
-      return 'Connecting...';
-    case 'disconnected':
-    default:
-      return 'Disconnected';
-  }
-});
-
-const toastPosition = useStorage<toastPosition>('toast_position', 'top-right');
-
-const toasterConfig = computed(() => ({
-  position: toastPosition.value,
-  max: 5,
-  expand: true,
-  progress: true,
-}));
-
 const reloadPage = () => window.location.reload();
 </script>
 
@@ -1228,20 +944,6 @@ const reloadPage = () => window.location.reload();
   min-height: 100dvh;
 }
 
-.shell-mode-enter-active,
-.shell-mode-leave-active {
-  transition:
-    opacity 0.28s ease,
-    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: opacity, transform;
-}
-
-.shell-mode-enter-from,
-.shell-mode-leave-to {
-  opacity: 0;
-  transform: translateY(18px) scale(0.985);
-}
-
 .shell-root {
   min-height: 100vh;
   min-height: 100dvh;
diff --git a/ui/app/middleware/mode.global.ts b/ui/app/middleware/mode.global.ts
new file mode 100644
index 00000000..bb29cf31
--- /dev/null
+++ b/ui/app/middleware/mode.global.ts
@@ -0,0 +1,35 @@
+import { cookieDefault, parseMode, routeTarget, savePref, usePref } from '~/composables/useMode';
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const path = to.path.replace(/\/+$/, '') || '/';
+  const pref = usePref();
+
+  if (to.query.simple !== undefined) {
+    const value = parseMode(to.query.simple);
+    if (value !== null) {
+      savePref(value);
+    }
+
+    const query = { ...to.query };
+    delete query.simple;
+    const target = value === true ? '/simple' : value === false ? '/' : to.path;
+
+    return navigateTo({ path: target, query, hash: to.hash }, { replace: true });
+  }
+
+  if (path !== '/') {
+    return;
+  }
+
+  let def = cookieDefault();
+  if (pref.value === null && def === null) {
+    const cfg = useYtpConfig();
+    await cfg.loadConfig();
+    def = Boolean(cfg.app.simple_mode);
+  }
+
+  const target = routeTarget(path, pref.value, Boolean(def));
+  if (target) {
+    return navigateTo(target, { replace: true });
+  }
+});
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 799254ac..cf077eab 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -754,7 +754,6 @@ import { requirePageShell } from '~/utils/topLevelNavigation';
 const config = useYtpConfig();
 const stateStore = useQueueState();
 const socket = useAppSocket();
-const route = useRoute();
 const toast = useNotification();
 const box = useConfirm();
 const { confirmDialog } = useDialog();
@@ -889,15 +888,6 @@ const stopAutoRefresh = (): void => {
 };
 
 onMounted(async () => {
-  if (route.query?.simple !== undefined) {
-    const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false);
-    simpleMode.value = ['true', '1', 'yes', 'on'].includes(route.query.simple as string);
-    await nextTick();
-    const url = new URL(window.location.href);
-    url.searchParams.delete('simple');
-    window.history.replaceState({}, '', url.toString());
-  }
-
   if (Object.keys(pendingDownloadFormItem.value).length > 0) {
     await toNewDownload(pendingDownloadFormItem.value);
     pendingDownloadFormItem.value = {};
diff --git a/ui/app/pages/simple.vue b/ui/app/pages/simple.vue
index a7651a37..7407867e 100644
--- a/ui/app/pages/simple.vue
+++ b/ui/app/pages/simple.vue
@@ -1,12 +1,1469 @@
-<template></template>
+<template>
+  <AppRoot mode="simple" @ready="init" v-slot="{ openSettings }">
+    <div class="shell-stage flex min-h-screen flex-col bg-default/95 backdrop-blur-sm">
+      <ConnectionBanner />
 
-<script lang="ts" setup>
+      <div
+        class="mx-auto flex min-h-0 w-full max-w-6xl flex-1 flex-col gap-4 px-3 py-4 sm:px-4 sm:py-5"
+      >
+        <div
+          class="pointer-events-none fixed inset-0 z-20 bg-black/45 backdrop-blur-[1px] transition-all duration-500 ease-out"
+          :class="lightsOut ? 'opacity-100' : 'opacity-0'"
+          aria-hidden="true"
+        />
+
+        <div class="transition-transform duration-300">
+          <div class="mx-auto w-full transition-all duration-300" :class="formContainerClass">
+            <UPageCard variant="outline" :ui="formCardUi">
+              <template #body>
+                <form autocomplete="off" class="space-y-4" @submit.prevent="addDownload">
+                  <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0 space-y-1">
+                      <div class="flex items-center gap-2 text-base font-semibold text-highlighted">
+                        <UIcon name="i-lucide-link" class="size-4 text-toned" />
+                        <span>{{
+                          isMobile ? 'What would you like to download?' : greetingMessage
+                        }}</span>
+                      </div>
+                    </div>
+
+                    <div class="flex shrink-0 items-center gap-1 sm:gap-2">
+                      <UTooltip v-if="!socketStore.isConnected" text="Reload queue">
+                        <UButton
+                          color="info"
+                          variant="ghost"
+                          size="sm"
+                          icon="i-lucide-refresh-cw"
+                          :loading="isRefreshing"
+                          :disabled="isRefreshing"
+                          :square="isMobile"
+                          @click="() => refreshQueue()"
+                        >
+                          <span v-if="!isMobile">Reload Queue</span>
+                        </UButton>
+                      </UTooltip>
+
+                      <ThemeButton :square="isMobile" :show-label="!isMobile" />
+
+                      <UTooltip text="WebUI Settings">
+                        <UButton
+                          color="neutral"
+                          variant="ghost"
+                          size="sm"
+                          icon="i-lucide-settings-2"
+                          :square="isMobile"
+                          @click="openSettings"
+                        >
+                          <span v-if="!isMobile">WebUI Settings</span>
+                        </UButton>
+                      </UTooltip>
+                    </div>
+                  </div>
+
+                  <div class="flex items-stretch gap-2">
+                    <UTooltip :text="showExtras ? 'Hide extra options' : 'Show extra options'">
+                      <UButton
+                        type="button"
+                        color="info"
+                        variant="outline"
+                        size="lg"
+                        :icon="showExtras ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+                        class="shrink-0 justify-center w-12"
+                        :disabled="addInProgress"
+                        @click="showExtras = !showExtras"
+                      />
+                    </UTooltip>
+
+                    <UInput
+                      id="download-url"
+                      v-model="formUrl"
+                      type="url"
+                      placeholder="https://..."
+                      size="lg"
+                      required
+                      :disabled="isFormDisabled"
+                      class="min-w-0 flex-1"
+                      :ui="urlInputUi"
+                    />
+
+                    <UButton
+                      type="submit"
+                      color="primary"
+                      size="lg"
+                      icon="i-lucide-plus"
+                      :loading="addInProgress"
+                      :disabled="isFormDisabled || !formUrl.trim()"
+                      class="shrink-0 justify-center min-w-20 sm:min-w-28"
+                    >
+                      Add
+                    </UButton>
+                  </div>
+
+                  <div v-if="showExtras" class="space-y-3 border-t border-default pt-4">
+                    <UFormField label="Preset" :ui="fieldUi" class="w-full">
+                      <template #label>
+                        <span class="inline-flex items-center gap-2 font-semibold">
+                          <UIcon name="i-lucide-sliders-horizontal" class="size-4 text-toned" />
+                          <span>Preset</span>
+                        </span>
+                      </template>
+
+                      <USelectMenu
+                        id="preset"
+                        v-model="formPreset"
+                        :items="presetItems"
+                        value-key="value"
+                        label-key="label"
+                        color="neutral"
+                        size="lg"
+                        class="w-full"
+                        :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
+                        :search-input="{ placeholder: 'Search presets' }"
+                        :disabled="isFormDisabled"
+                        placeholder="Select preset"
+                      />
+                    </UFormField>
+
+                    <div
+                      v-if="configStore.dl_fields.length > 0"
+                      class="grid gap-3 md:grid-cols-2 xl:grid-cols-3"
+                    >
+                      <DLInput
+                        id="force_download"
+                        v-model="dlFields['--no-download-archive']"
+                        type="bool"
+                        label="Force download"
+                        icon="i-lucide-download"
+                        :disabled="isFormDisabled"
+                        description="Ignore archive and re-download."
+                        compact
+                      />
+
+                      <DLInput
+                        v-for="(fi, index) in sortedDLFields"
+                        :id="fi?.id || `dlf-${index}`"
+                        :key="fi.id || `dlf-${index}`"
+                        v-model="dlFields[fi.field]"
+                        :type="fi.kind"
+                        :description="fi.description"
+                        :label="fi.name"
+                        :icon="fi.icon"
+                        :field="fi.field"
+                        :disabled="isFormDisabled"
+                        compact
+                      />
+                    </div>
+                  </div>
+                </form>
+              </template>
+            </UPageCard>
+          </div>
+        </div>
+
+        <Transition name="queue-fade">
+          <section v-if="showSections" class="w-full space-y-6">
+            <section class="space-y-3">
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted transition-colors hover:text-default"
+                  :aria-expanded="!queueCollapsed"
+                  aria-controls="simple-queue-section"
+                  @click="queueCollapsed = !queueCollapsed"
+                >
+                  <UIcon
+                    :name="queueCollapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+                    class="size-3.5 text-toned"
+                  />
+                  <UIcon name="i-lucide-list-video" class="size-4 text-toned" />
+                  <span>Queue</span>
+                </button>
+
+                <div class="flex flex-wrap items-center gap-2">
+                  <UBadge color="info" variant="soft" size="sm">{{ queueCountLabel }}</UBadge>
+
+                  <UButton
+                    v-if="stateStore.hasMore()"
+                    color="neutral"
+                    variant="outline"
+                    size="xs"
+                    :loading="isRefreshing"
+                    @click="() => loadMoreQueue()"
+                  >
+                    Show more
+                  </UButton>
+                </div>
+              </div>
+
+              <Transition name="section-collapse">
+                <div v-if="!queueCollapsed" id="simple-queue-section" class="overflow-hidden">
+                  <TransitionGroup
+                    v-if="queueItems.length > 0"
+                    name="queue-card"
+                    tag="div"
+                    class="grid grid-cols-1 gap-3 lg:grid-cols-2"
+                  >
+                    <UCard
+                      v-for="item in queueItems"
+                      :key="`queue-${item._id}`"
+                      class="w-full min-w-0 max-w-full overflow-hidden"
+                      :ui="queueCardUi"
+                    >
+                      <template #header>
+                        <div
+                          v-if="downloadingStatuses.has(item.status) || item.status === null"
+                          class="queue-progress rounded-md border border-default bg-muted/20"
+                        >
+                          <div
+                            class="queue-progress__bar bg-success/35"
+                            :style="{ width: progressWidth(item) }"
+                          ></div>
+                          <div class="queue-progress__label">
+                            <template v-if="progressIcon(item)">
+                              <UIcon
+                                :name="progressIcon(item)"
+                                :class="[
+                                  'mr-1 size-4',
+                                  ['i-lucide-settings-2', 'i-lucide-loader-circle'].includes(
+                                    progressIcon(item),
+                                  )
+                                    ? 'animate-spin'
+                                    : '',
+                                ]"
+                              />
+                            </template>
+                            <span>{{ updateProgress(item) }}</span>
+                          </div>
+                        </div>
+                      </template>
+
+                      <div class="flex min-w-0 flex-col gap-4 sm:flex-row">
+                        <figure
+                          class="relative w-full shrink-0 overflow-hidden rounded-lg border border-default bg-muted/20 sm:w-52"
+                        >
+                          <span
+                            v-if="item.filename || isEmbedable(item.url)"
+                            class="play-overlay"
+                            @click="openPlayer(item)"
+                          >
+                            <span
+                              :class="[
+                                'play-icon',
+                                isEmbedable(item.url) && !item.filename ? 'embed-icon' : '',
+                              ]"
+                              aria-hidden="true"
+                            >
+                              <UIcon
+                                name="i-lucide-play"
+                                class="size-6 translate-x-px text-white"
+                              />
+                            </span>
+                            <img
+                              :src="resolveThumbnail(item)"
+                              :alt="item.title || 'Video thumbnail'"
+                              loading="lazy"
+                              class="aspect-video h-full w-full object-cover"
+                              @error="onImgError($event, item)"
+                            />
+                          </span>
+
+                          <img
+                            v-else
+                            :src="resolveThumbnail(item)"
+                            :alt="item.title || 'Video thumbnail'"
+                            loading="lazy"
+                            class="aspect-video h-full w-full object-cover"
+                            @error="onImgError($event, item)"
+                          />
+
+                          <span
+                            v-if="getDurationLabel(item)"
+                            class="absolute top-2 right-2 rounded-full bg-black/70 px-2 py-0.5 text-[11px] font-medium text-white"
+                          >
+                            {{ getDurationLabel(item) }}
+                          </span>
+                        </figure>
+
+                        <div class="min-w-0 flex-1 space-y-3">
+                          <div class="space-y-2">
+                            <UTooltip :text="item.title">
+                              <a
+                                :href="item.url"
+                                target="_blank"
+                                rel="noreferrer"
+                                class="block truncate text-sm font-semibold text-highlighted hover:underline"
+                              >
+                                {{ item.title || 'Untitled' }}
+                              </a>
+                            </UTooltip>
+
+                            <div class="flex flex-wrap items-center gap-2 text-xs">
+                              <UBadge
+                                :color="downloadingStatuses.has(item.status) ? 'info' : 'warning'"
+                                variant="soft"
+                                size="sm"
+                              >
+                                {{ downloadingStatuses.has(item.status) ? 'Active' : 'Queued' }}
+                              </UBadge>
+
+                              <UBadge :color="getStatusColor(item)" variant="soft" size="sm">
+                                {{ getStatusLabel(item) }}
+                              </UBadge>
+
+                              <span
+                                class="inline-flex items-center rounded-full border border-default px-2 py-0.5 text-toned"
+                                :date-datetime="item.datetime"
+                                v-rtime="item.datetime"
+                              />
+                            </div>
+                          </div>
+
+                          <p class="line-clamp-3 text-xs leading-5 text-toned wrap-break-word">
+                            <template v-if="item.error || showMessage(item)">
+                              <template v-if="item.error">
+                                <span class="text-error">{{ item.error }}</span>
+                              </template>
+                              <template v-if="showMessage(item)">
+                                <span class="text-error">{{ item.msg }}</span>
+                              </template>
+                            </template>
+                            <template v-else>
+                              {{ getDescription(item) || 'No description available.' }}
+                            </template>
+                          </p>
+
+                          <div class="mt-auto flex flex-wrap items-center justify-end gap-2 pt-1">
+                            <UButton
+                              v-if="!item.status && item.auto_start === false"
+                              color="success"
+                              variant="soft"
+                              size="xs"
+                              icon="i-lucide-play-circle"
+                              @click="() => stateStore.startItems([item._id])"
+                            >
+                              Start
+                            </UButton>
+
+                            <UButton
+                              v-if="!item.status && item.auto_start === true"
+                              color="warning"
+                              variant="soft"
+                              size="xs"
+                              icon="i-lucide-pause"
+                              @click="() => stateStore.pauseItems([item._id])"
+                            >
+                              Pause
+                            </UButton>
+
+                            <UButton
+                              color="error"
+                              variant="outline"
+                              size="xs"
+                              icon="i-lucide-x"
+                              @click="() => stateStore.cancelItems([item._id])"
+                            >
+                              {{ item.is_live ? 'Stop' : 'Cancel' }}
+                            </UButton>
+                          </div>
+                        </div>
+                      </div>
+                    </UCard>
+                  </TransitionGroup>
+
+                  <UAlert
+                    v-else
+                    color="neutral"
+                    variant="soft"
+                    icon="i-lucide-inbox"
+                    title="Queue is empty"
+                  />
+                </div>
+              </Transition>
+            </section>
+
+            <section class="space-y-3">
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted transition-colors hover:text-default"
+                  :aria-expanded="!historyCollapsed"
+                  aria-controls="simple-history-section"
+                  @click="historyCollapsed = !historyCollapsed"
+                >
+                  <UIcon
+                    :name="historyCollapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'"
+                    class="size-3.5 text-toned"
+                  />
+                  <UIcon name="i-lucide-history" class="size-4 text-toned" />
+                  <span>History</span>
+                </button>
+
+                <div v-if="!historyCollapsed" class="flex flex-wrap items-center gap-2">
+                  <UPagination
+                    v-if="historyPagination.total_pages > 1"
+                    :page="historyPagination.page"
+                    :total="historyPagination.total"
+                    :items-per-page="historyPagination.per_page"
+                    :disabled="historyIsLoading"
+                    show-edges
+                    size="sm"
+                    :sibling-count="0"
+                    @update:page="
+                      (page) =>
+                        load(page, {
+                          order: 'DESC',
+                          perPage: configStore.app.default_pagination,
+                        })
+                    "
+                  />
+
+                  <UButton
+                    color="neutral"
+                    variant="outline"
+                    size="xs"
+                    icon="i-lucide-refresh-cw"
+                    :loading="historyIsLoading"
+                    :disabled="historyIsLoading"
+                    @click="
+                      () => reload({ order: 'DESC', perPage: configStore.app.default_pagination })
+                    "
+                  >
+                    Reload
+                  </UButton>
+                </div>
+              </div>
+
+              <Transition name="section-collapse">
+                <div
+                  v-if="!historyCollapsed"
+                  id="simple-history-section"
+                  class="space-y-3 overflow-hidden"
+                >
+                  <div
+                    v-if="historyEntries.length > 0"
+                    class="grid grid-cols-1 gap-3 lg:grid-cols-2"
+                  >
+                    <UCard
+                      v-for="item in historyEntries"
+                      :key="`history-${historyPagination.page}-${item._id}`"
+                      class="w-full min-w-0 max-w-full overflow-hidden"
+                      :ui="queueCardUi"
+                    >
+                      <div class="flex min-w-0 flex-col gap-4 sm:flex-row">
+                        <figure
+                          class="relative w-full shrink-0 overflow-hidden rounded-lg border border-default bg-muted/20 sm:w-52"
+                        >
+                          <span
+                            v-if="item.filename || isEmbedable(item.url)"
+                            class="play-overlay"
+                            @click="openPlayer(item)"
+                          >
+                            <span
+                              :class="[
+                                'play-icon',
+                                isEmbedable(item.url) && !item.filename ? 'embed-icon' : '',
+                              ]"
+                              aria-hidden="true"
+                            >
+                              <UIcon
+                                name="i-lucide-play"
+                                class="size-6 translate-x-px text-white"
+                              />
+                            </span>
+                            <img
+                              :src="resolveThumbnail(item)"
+                              :alt="item.title || 'Video thumbnail'"
+                              loading="lazy"
+                              class="aspect-video h-full w-full object-cover"
+                              @error="onImgError($event, item)"
+                            />
+                          </span>
+
+                          <img
+                            v-else
+                            :src="resolveThumbnail(item)"
+                            :alt="item.title || 'Video thumbnail'"
+                            loading="lazy"
+                            class="aspect-video h-full w-full object-cover"
+                            @error="onImgError($event, item)"
+                          />
+
+                          <span
+                            v-if="getDurationLabel(item)"
+                            class="absolute top-2 right-2 rounded-full bg-black/70 px-2 py-0.5 text-[11px] font-medium text-white"
+                          >
+                            {{ getDurationLabel(item) }}
+                          </span>
+                        </figure>
+
+                        <div class="min-w-0 flex-1 space-y-3">
+                          <div class="space-y-2">
+                            <UTooltip :text="item.title">
+                              <a
+                                :href="item.url"
+                                target="_blank"
+                                rel="noreferrer"
+                                class="block truncate text-sm font-semibold text-highlighted hover:underline"
+                              >
+                                {{ item.title || 'Untitled' }}
+                              </a>
+                            </UTooltip>
+
+                            <div class="flex flex-wrap items-center gap-2 text-xs">
+                              <UBadge color="neutral" variant="soft" size="sm">History</UBadge>
+
+                              <UBadge :color="getStatusColor(item)" variant="soft" size="sm">
+                                {{ getStatusLabel(item) }}
+                              </UBadge>
+
+                              <span
+                                class="inline-flex items-center rounded-full border border-default px-2 py-0.5 text-toned"
+                                :date-datetime="item.datetime"
+                                v-rtime="item.datetime"
+                              />
+                            </div>
+                          </div>
+
+                          <p class="line-clamp-3 text-xs leading-5 text-toned wrap-break-word">
+                            <template v-if="item.error || showMessage(item)">
+                              <template v-if="item.error">
+                                <span class="text-error">{{ item.error }}</span>
+                              </template>
+                              <template v-if="showMessage(item)">
+                                <span class="text-error">{{ item.msg }}</span>
+                              </template>
+                            </template>
+                            <template v-else>
+                              {{ getDescription(item) || 'No description available.' }}
+                            </template>
+                          </p>
+
+                          <div class="mt-auto flex flex-wrap items-center justify-end gap-2 pt-1">
+                            <UButton
+                              v-if="getDownloadLink(item)"
+                              color="primary"
+                              variant="soft"
+                              size="xs"
+                              icon="i-lucide-download"
+                              external
+                              :href="getDownloadLink(item)"
+                              :download="getDownloadName(item)"
+                            >
+                              Download
+                            </UButton>
+
+                            <UButton
+                              v-if="!item.filename"
+                              color="info"
+                              variant="soft"
+                              size="xs"
+                              icon="i-lucide-rotate-cw"
+                              @click="() => requeueItem(item)"
+                            >
+                              Requeue
+                            </UButton>
+
+                            <UButton
+                              color="error"
+                              variant="outline"
+                              size="xs"
+                              icon="i-lucide-trash"
+                              @click="() => deleteHistoryItem(item)"
+                            >
+                              Delete
+                            </UButton>
+                          </div>
+                        </div>
+                      </div>
+                    </UCard>
+                  </div>
+
+                  <UAlert
+                    v-else-if="historyIsLoading"
+                    color="info"
+                    variant="soft"
+                    icon="i-lucide-loader-circle"
+                    title="Loading history..."
+                  />
+
+                  <UAlert
+                    v-else
+                    color="neutral"
+                    variant="soft"
+                    icon="i-lucide-history"
+                    title="History is empty"
+                  />
+
+                  <div v-if="historyPagination.total_pages > 1" class="flex justify-end py-2">
+                    <UPagination
+                      :page="historyPagination.page"
+                      :total="historyPagination.total"
+                      :items-per-page="historyPagination.per_page"
+                      :disabled="historyIsLoading"
+                      show-edges
+                      size="sm"
+                      :sibling-count="0"
+                      @update:page="
+                        (page) =>
+                          load(page, {
+                            order: 'DESC',
+                            perPage: configStore.app.default_pagination,
+                          })
+                      "
+                    />
+                  </div>
+                </div>
+              </Transition>
+            </section>
+          </section>
+        </Transition>
+
+        <UModal
+          v-if="videoItem"
+          :open="videoOpen"
+          title="Video"
+          :dismissible="true"
+          :ui="{
+            content: lightsOut ? 'w-full sm:max-w-5xl shadow-2xl' : 'w-full sm:max-w-5xl',
+            body: 'p-0',
+          }"
+          @update:open="handleVideoOpenChange"
+        >
+          <template #body>
+            <VideoPlayer
+              type="default"
+              :isMuted="false"
+              autoplay="true"
+              :isControls="true"
+              :item="videoItem"
+              class="w-full"
+              @closeModel="() => requestCloseVideo()"
+              @error="async (error: string) => await box.alert(error)"
+              @playback-state-change="(playing: boolean) => (playingNow = playing)"
+            />
+          </template>
+        </UModal>
+
+        <UModal
+          v-if="embedUrl"
+          :open="Boolean(embedUrl)"
+          title="Embed"
+          :dismissible="true"
+          :ui="{ content: 'w-full sm:max-w-5xl', body: 'p-0' }"
+          @update:open="(open) => !open && closePlayer()"
+        >
+          <template #body>
+            <EmbedPlayer :url="embedUrl" @closeModel="closePlayer" />
+          </template>
+        </UModal>
+
+        <ClientOnly>
+          <Dialog />
+        </ClientOnly>
+      </div>
+    </div>
+  </AppRoot>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue';
 import { useStorage } from '@vueuse/core';
-const simpleMode = useStorage<boolean>('simple_mode', true);
+import type { item_request } from '~/types/item';
+import type { ItemStatus, StoreItem } from '~/types/store';
+import AppRoot from '~/components/AppRoot.vue';
+import ConnectionBanner from '~/components/ConnectionBanner.vue';
+import ThemeButton from '~/components/ThemeButton.vue';
+import { useConfirm } from '~/composables/useConfirm';
+import { useDirtyCloseGuard } from '~/composables/useDirtyCloseGuard';
+import { useHistoryState } from '~/composables/useHistoryState';
+import { useMediaQuery } from '~/composables/useMediaQuery';
+import { usePresetOptions } from '~/composables/usePresetOptions';
+import { useNotification } from '~/composables/useNotification';
+import EmbedPlayer from '~/components/EmbedPlayer.vue';
+import { getEmbedable, isEmbedable } from '~/utils/embedable';
+import {
+  ag,
+  formatTime,
+  getHistoryImage,
+  getImage,
+  getRemoteImage,
+  isDownloadSkipped,
+  makeDownload,
+  request,
+  ucFirst,
+} from '~/utils';
 
-onMounted(async () => {
-  simpleMode.value = true;
-  await nextTick();
-  await navigateTo('/');
+definePageMeta({ layout: 'empty' });
+
+const configStore = useYtpConfig();
+const stateStore = useQueueState();
+const socketStore = useAppSocket();
+const toast = useNotification();
+const dlFields = useStorage<Record<string, any>>('dl_fields', {});
+const show_thumbnail = useStorage<boolean>('show_thumbnail', true);
+const autoRefreshEnabled = useStorage<boolean>('queue_auto_refresh', true);
+const autoRefreshDelay = useStorage<number>('queue_auto_refresh_delay', 10000);
+const queueCollapsed = useStorage<boolean>('simple_queue_collapsed', false);
+const historyCollapsed = useStorage<boolean>('simple_history_collapsed', false);
+const isMobile = useMediaQuery({ maxWidth: 1024 });
+const box = useConfirm();
+
+const app = toRef(configStore, 'app');
+const paused = toRef(configStore, 'paused');
+const presets = toRef(configStore, 'presets');
+const { selectItems: presetItems } = usePresetOptions(presets);
+const {
+  items: historyItems,
+  pagination,
+  isLoading,
+  load,
+  reload,
+  remove,
+  moveHandler,
+} = useHistoryState();
+
+const embedUrl = ref('');
+const videoItem = ref<StoreItem | null>(null);
+const playingNow = ref(false);
+const autoRefreshInterval = ref<ReturnType<typeof setInterval> | null>(null);
+const hadSocketDisconnect = ref(false);
+const videoOpen = computed<boolean>({
+  get: () => Boolean(videoItem.value),
+  set: (value: boolean) => {
+    if (value) {
+      return;
+    }
+
+    closePlayer();
+  },
 });
+
+const formUrl = ref('');
+const formPreset = ref(app.value.default_preset || '');
+const addInProgress = ref(false);
+const showExtras = ref(false);
+const isRefreshing = ref(false);
+const historyInitialized = ref(false);
+
+const downloadingStatuses: ReadonlySet<ItemStatus | null> = new Set([
+  'downloading',
+  'postprocessing',
+  'preparing',
+]);
+
+const fieldUi = {
+  label: 'font-semibold text-default',
+  container: 'space-y-2',
+};
+
+const formCardUi = {
+  root: 'w-full border border-default bg-default',
+  container: 'w-full p-4 sm:p-5',
+  wrapper: 'w-full items-stretch',
+  body: 'w-full',
+};
+
+const queueCardUi = {
+  root: 'w-full border border-default bg-default',
+  header: 'p-4 pb-0',
+  body: 'p-4',
+};
+
+const urlInputUi = {
+  root: 'w-full',
+  base: 'bg-elevated/60 ring-default focus-visible:ring-primary',
+};
+
+const historyPagination = computed(() => pagination.value);
+const historyIsLoading = computed(() => isLoading.value);
+const queueItems = computed<StoreItem[]>(() => Object.values(stateStore.queue));
+const queueCountLabel = computed(() => {
+  if (stateStore.hasMore()) {
+    return `${stateStore.shown()} displayed / ${stateStore.count()} queued`;
+  }
+
+  return `${stateStore.count()} queued`;
+});
+const historyEntries = computed<StoreItem[]>(() => historyItems.value);
+const hasAnyItems = computed(() => queueItems.value.length > 0 || historyEntries.value.length > 0);
+const showSections = computed(() => hasAnyItems.value || historyIsLoading.value);
+const isFormDisabled = computed(() => addInProgress.value);
+const lightsOut = computed(() => Boolean(videoItem.value && playingNow.value));
+const formContainerClass = computed(() => {
+  if (showSections.value) {
+    return 'max-w-full';
+  }
+
+  return 'max-w-2xl simple-form-center';
+});
+const greetingMessage = computed(() => {
+  const hour = new Date().getHours();
+
+  if (hour >= 5 && hour < 12) {
+    return 'Good morning, what would you like to download?';
+  }
+
+  if (hour >= 12 && hour < 17) {
+    return 'Good afternoon, what would you like to download?';
+  }
+
+  if (hour >= 17 && hour < 21) {
+    return 'Good evening, what would you like to download?';
+  }
+
+  return 'Hello, what would you like to download?';
+});
+const sortedDLFields = computed(() =>
+  [...configStore.dl_fields].sort((left, right) => (left.order || 0) - (right.order || 0)),
+);
+
+const refreshQueue = async (): Promise<void> => {
+  if (isRefreshing.value) {
+    return;
+  }
+
+  isRefreshing.value = true;
+
+  try {
+    await stateStore.loadQueue();
+  } catch (error) {
+    console.error('Failed to refresh queue:', error);
+    toast.error('Failed to refresh queue');
+  } finally {
+    isRefreshing.value = false;
+  }
+};
+
+const loadMoreQueue = async (): Promise<void> => {
+  if (isRefreshing.value) {
+    return;
+  }
+
+  isRefreshing.value = true;
+
+  try {
+    await stateStore.loadMore();
+  } catch (error) {
+    console.error('Failed to load more queue items:', error);
+    toast.error('Failed to load more queue items');
+  } finally {
+    isRefreshing.value = false;
+  }
+};
+
+const startAutoRefresh = (): void => {
+  if (autoRefreshInterval.value) {
+    clearInterval(autoRefreshInterval.value);
+  }
+
+  if (!autoRefreshEnabled.value || socketStore.isConnected) {
+    return;
+  }
+
+  autoRefreshInterval.value = setInterval(async () => {
+    if (!socketStore.isConnected && autoRefreshEnabled.value) {
+      await refreshQueue();
+    }
+  }, autoRefreshDelay.value);
+};
+
+const stopAutoRefresh = (): void => {
+  if (!autoRefreshInterval.value) {
+    return;
+  }
+
+  clearInterval(autoRefreshInterval.value);
+  autoRefreshInterval.value = null;
+};
+
+const addDownload = async (): Promise<void> => {
+  const url = formUrl.value.trim();
+
+  if (!url) {
+    toast.error('Please enter a valid URL.');
+    return;
+  }
+
+  let cli = '';
+  const dlFieldsExtra = ['--no-download-archive'];
+
+  const is_valid = (dl_field: string): boolean => {
+    if (dlFieldsExtra.includes(dl_field)) {
+      return true;
+    }
+
+    if (configStore.dl_fields && configStore.dl_fields.length > 0) {
+      return configStore.dl_fields.some((field) => dl_field === field.field);
+    }
+
+    return false;
+  };
+
+  if (dlFields.value && Object.keys(dlFields.value).length > 0) {
+    const joined = [];
+
+    for (const [key, value] of Object.entries(dlFields.value)) {
+      if (false === is_valid(key)) {
+        continue;
+      }
+
+      if ([undefined, null, '', false].includes(value as any)) {
+        continue;
+      }
+
+      const keyRegex = new RegExp(`(^|\\s)${key}(\\s|$)`);
+
+      if (cli && keyRegex.test(cli)) {
+        continue;
+      }
+
+      joined.push(true === value ? `${key}` : `${key} ${value}`);
+    }
+
+    if (joined.length > 0) {
+      cli = joined.join(' ');
+    }
+  }
+
+  const payload: item_request[] = [
+    {
+      url,
+      preset: formPreset.value || app.value.default_preset,
+      cli: cli || '',
+      auto_start: true,
+    },
+  ];
+
+  try {
+    addInProgress.value = true;
+
+    const response = await request('/api/history', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      toast.error(`Error: ${data?.error || 'Failed to add download.'}`);
+      return;
+    }
+
+    let had_errors = false;
+
+    if (200 === response.status && Array.isArray(data)) {
+      data.forEach((item: Record<string, any>) => {
+        if (false !== item.status) {
+          return;
+        }
+
+        had_errors = true;
+
+        if (item?.hidden) {
+          return;
+        }
+
+        toast.error(`Error: ${item.msg || 'Failed to add download.'}`);
+      });
+    }
+
+    if (202 === response.status) {
+      toast.success(data.message, { timeout: 2000 });
+    }
+
+    if (false === had_errors) {
+      formUrl.value = '';
+      formPreset.value = app.value.default_preset || '';
+      dlFields.value = {};
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to add download.';
+    toast.error(`Error: ${message}`);
+  } finally {
+    addInProgress.value = false;
+  }
+};
+
+const resolveThumbnail = (item: StoreItem): string => {
+  if (!show_thumbnail.value) {
+    return '/images/placeholder.png';
+  }
+
+  if (historyEntries.value.some((entry) => entry._id === item._id)) {
+    return getHistoryImage(item);
+  }
+
+  return getImage(configStore.app.download_path, item);
+};
+
+const openPlayer = (item: StoreItem): void => {
+  if (item.filename) {
+    videoItem.value = item;
+    return;
+  }
+
+  if (!isEmbedable(item.url)) {
+    return;
+  }
+
+  const embed = getEmbedable(item.url);
+  if (embed) {
+    embedUrl.value = embed;
+  }
+};
+
+const closePlayer = (): void => {
+  playingNow.value = false;
+  embedUrl.value = '';
+  videoItem.value = null;
+};
+
+const { handleOpenChange: handleVideoOpenChange, requestClose: requestCloseVideo } =
+  useDirtyCloseGuard(videoOpen, {
+    dirty: playingNow,
+    title: 'Close player?',
+    message: 'Playback is active. Do you want to close the player?',
+    confirmText: 'Close player',
+    cancelText: 'Keep playing',
+    onDiscard: async () => {
+      closePlayer();
+    },
+  });
+
+const getDescription = (item: StoreItem): string => {
+  const direct = (item.description ?? '').toString().trim();
+  if (direct) {
+    return direct;
+  }
+
+  const extrasDescription = ag<string | null>(item, 'extras.description', null)?.toString().trim();
+  if (extrasDescription) {
+    return extrasDescription;
+  }
+
+  const errorDescription = item.error?.trim();
+  if (errorDescription) {
+    return errorDescription;
+  }
+
+  const message = ag<string | null>(item, 'msg', null)?.toString().trim();
+  if (message) {
+    return message;
+  }
+
+  return '';
+};
+
+const getDurationLabel = (item: StoreItem): string | null => {
+  const duration = ag<number | null>(item, 'extras.duration', null);
+  if (duration == null || Number.isNaN(duration) || duration <= 0) {
+    return null;
+  }
+
+  return formatTime(duration);
+};
+
+const statusOverrides: Record<string, string> = {
+  downloading: 'Downloading',
+  postprocessing: 'Post-processing',
+  preparing: 'Preparing',
+  finished: 'Completed',
+  error: 'Error',
+  cancelled: 'Cancelled',
+  not_live: 'Not live yet',
+  skip: 'Skipped',
+};
+
+const getStatusLabel = (item: StoreItem): string => {
+  if (item.status === null) {
+    return 'Queued';
+  }
+
+  if (isDownloadSkipped(item)) {
+    return 'Download skipped';
+  }
+
+  if (item.status === 'error' && item.filename) {
+    return 'Partial Error';
+  }
+
+  return statusOverrides[item.status] ?? ucFirst(item.status.replace(/_/g, ' '));
+};
+
+const getStatusColor = (item: StoreItem): 'neutral' | 'info' | 'success' | 'error' | 'warning' => {
+  if (item.status === null) {
+    return 'neutral';
+  }
+
+  if (isDownloadSkipped(item)) {
+    return 'info';
+  }
+
+  if (item.status === 'error' && item.filename) {
+    return 'warning';
+  }
+
+  const map: Record<string, 'neutral' | 'info' | 'success' | 'error' | 'warning'> = {
+    downloading: 'info',
+    postprocessing: 'info',
+    preparing: 'info',
+    finished: 'success',
+    error: 'error',
+    cancelled: 'neutral',
+    not_live: 'warning',
+    skip: 'neutral',
+  };
+
+  return map[item.status] ?? 'info';
+};
+
+const percentPipe = (value: number | null): string => {
+  if (value === null || Number.isNaN(value)) {
+    return '00.00';
+  }
+
+  return parseFloat(String(value)).toFixed(2);
+};
+
+const ETAPipe = (value: number | null): string => {
+  if (value === null || value === 0) {
+    return 'Live';
+  }
+
+  if (value < 60) {
+    return `${Math.round(value)}s`;
+  }
+
+  if (value < 3600) {
+    return `${Math.floor(value / 60)}m ${Math.round(value % 60)}s`;
+  }
+
+  const hours = Math.floor(value / 3600);
+  const minutes = value % 3600;
+  return `${hours}h ${Math.floor(minutes / 60)}m ${Math.round(minutes % 60)}s`;
+};
+
+const speedPipe = (value: number | null): string => {
+  if (value === null || value === 0) {
+    return '0KB/s';
+  }
+
+  const k = 1024;
+  const dm = 2;
+  const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'];
+  const i = Math.floor(Math.log(value) / Math.log(k));
+  return `${parseFloat((value / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+
+const updateProgress = (item: StoreItem): string => {
+  let text = '';
+
+  if (!item.auto_start) {
+    return 'Manual start';
+  }
+
+  if (item.status === null && paused.value === true) {
+    return 'Global Pause';
+  }
+
+  if (item.status === 'postprocessing') {
+    return 'Post-processors are running.';
+  }
+
+  if (item.status === 'preparing') {
+    return ag(item, 'extras.external_downloader') ? 'External downloader.' : 'Preparing';
+  }
+
+  if (item.status !== null && item.is_live && !item.speed) {
+    return 'Recording live stream';
+  }
+
+  if (item.status !== null) {
+    text += item.percent && !item.is_live ? `${percentPipe(item.percent)}%` : 'Live';
+  }
+
+  text += item.speed ? ` - ${speedPipe(item.speed)}` : ' - Waiting..';
+
+  if (item.status !== null && item.eta) {
+    text += ` - ${ETAPipe(item.eta)}`;
+  }
+
+  return text;
+};
+
+const progressWidth = (item: StoreItem): string => {
+  if (!item.auto_start || (null === item.status && true === paused.value)) {
+    return '0%';
+  }
+
+  if (
+    'postprocessing' === item.status ||
+    'started' === item.status ||
+    'preparing' === item.status
+  ) {
+    return '100%';
+  }
+
+  if (!item.percent || item.is_live) {
+    return '100%';
+  }
+
+  return `${percentPipe(item.percent)}%`;
+};
+
+const progressIcon = (item: StoreItem): string => {
+  if (null != item.status && item.is_live && !item.speed) {
+    return 'i-lucide-loader-circle';
+  }
+
+  if ('postprocessing' === item.status) {
+    return 'i-lucide-settings-2';
+  }
+
+  return '';
+};
+
+const getDownloadLink = (item: StoreItem): string => {
+  if (!item.filename) {
+    return '';
+  }
+
+  return makeDownload(app.value, item);
+};
+
+const getDownloadName = (item: StoreItem): string => {
+  if (!item.filename) {
+    return 'download';
+  }
+
+  const segments = item.filename.split('/');
+  return segments[segments.length - 1] || 'download';
+};
+
+const requeueItem = async (item: StoreItem): Promise<void> => {
+  if (!item.url) {
+    toast.error('Unable to requeue item; missing URL.');
+    return;
+  }
+
+  const payload: item_request = {
+    url: item.url,
+    preset: item.preset || app.value.default_preset,
+    folder: item.folder,
+    template: item.template,
+    cookies: item.cookies,
+    cli: item.cli,
+    auto_start: item.auto_start ?? true,
+  };
+
+  if (item.extras && Object.keys(item.extras).length > 0) {
+    payload.extras = JSON.parse(JSON.stringify(item.extras));
+  }
+
+  await remove({ ids: [item._id], removeFile: false });
+  await reload({ order: 'DESC', perPage: configStore.app.default_pagination });
+  await stateStore.addDownload(payload);
+};
+
+const deleteHistoryItem = async (item: StoreItem): Promise<void> => {
+  await remove({ ids: [item._id], removeFile: app.value.remove_files });
+  await reload({ order: 'DESC', perPage: configStore.app.default_pagination });
+  toast.info('Removed from history queue.');
+};
+
+const handleHistoryItemMoved = moveHandler(() => historyInitialized.value);
+
+const showMessage = (item: StoreItem): boolean => {
+  if (!item?.msg || item.msg === item?.error) {
+    return false;
+  }
+
+  return (item.msg?.length || 0) > 0;
+};
+
+const onImgError = (event: Event, item: StoreItem): void => {
+  const target = event.target as HTMLImageElement;
+  const currentSrc = target.getAttribute('src') || '';
+
+  if (target.src.endsWith('/images/placeholder.png')) {
+    return;
+  }
+
+  if (item) {
+    const fallback = getRemoteImage(item, false);
+    if (fallback && currentSrc !== fallback) {
+      target.src = fallback;
+      return;
+    }
+  }
+
+  target.src = '/images/placeholder.png';
+};
+
+const init = async (): Promise<void> => {
+  historyInitialized.value = true;
+  socketStore.on('item_moved', handleHistoryItemMoved);
+  await Promise.allSettled([
+    refreshQueue(),
+    load(1, { order: 'DESC', perPage: configStore.app.default_pagination }),
+  ]);
+
+  if (!socketStore.isConnected && autoRefreshEnabled.value) {
+    startAutoRefresh();
+  }
+};
+
+onBeforeUnmount(() => {
+  socketStore.off('item_moved', handleHistoryItemMoved);
+  stopAutoRefresh();
+});
+
+watch(
+  () => socketStore.isConnected,
+  (connected) => {
+    if (connected) {
+      stopAutoRefresh();
+
+      if (hadSocketDisconnect.value) {
+        hadSocketDisconnect.value = false;
+        refreshQueue();
+      }
+
+      return;
+    }
+
+    hadSocketDisconnect.value = true;
+
+    if (autoRefreshEnabled.value) {
+      startAutoRefresh();
+    }
+  },
+);
+
+watch(autoRefreshEnabled, (enabled) => {
+  if (enabled && !socketStore.isConnected) {
+    startAutoRefresh();
+    return;
+  }
+
+  stopAutoRefresh();
+});
+
+watch(autoRefreshDelay, () => {
+  if (autoRefreshEnabled.value && !socketStore.isConnected) {
+    startAutoRefresh();
+  }
+});
+
+watch(
+  () => app.value.default_preset,
+  (value) => {
+    if (!formPreset.value) {
+      formPreset.value = value || '';
+    }
+  },
+);
+
+watch(
+  () => app.value.default_pagination,
+  (value, oldValue) => {
+    if (!configStore.is_loaded || value === oldValue || !historyInitialized.value) {
+      return;
+    }
+
+    load(1, { order: 'DESC', perPage: configStore.app.default_pagination });
+  },
+);
 </script>
+
+<style scoped>
+.simple-form-center {
+  transform: translateY(24vh);
+}
+
+.queue-fade-enter-active,
+.queue-fade-leave-active {
+  transition:
+    opacity 0.28s ease,
+    transform 0.32s ease;
+}
+
+.queue-fade-enter-from,
+.queue-fade-leave-to {
+  opacity: 0;
+  transform: translateY(14px);
+}
+
+.section-collapse-enter-active,
+.section-collapse-leave-active {
+  transition:
+    opacity 0.22s ease,
+    transform 0.24s ease,
+    max-height 0.28s ease;
+}
+
+.section-collapse-enter-from,
+.section-collapse-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+  max-height: 0;
+}
+
+.section-collapse-enter-to,
+.section-collapse-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+  max-height: 2000px;
+}
+
+.queue-card-enter-active,
+.queue-card-leave-active {
+  transition:
+    opacity 0.24s ease,
+    transform 0.28s ease;
+}
+
+.queue-card-enter-from,
+.queue-card-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.queue-card-leave-active {
+  position: absolute;
+}
+
+.queue-progress {
+  position: relative;
+  min-height: 2.25rem;
+  overflow: hidden;
+}
+
+.queue-progress__bar {
+  position: absolute;
+  inset: 0 auto 0 0;
+}
+
+.queue-progress__label {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: 2.25rem;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  padding: 0.5rem 0.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ui-text-highlighted);
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .simple-form-center {
+    transform: translateY(16vh);
+  }
+}
+</style>
diff --git a/ui/tests/composables/useMode.test.ts b/ui/tests/composables/useMode.test.ts
new file mode 100644
index 00000000..e3344e31
--- /dev/null
+++ b/ui/tests/composables/useMode.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'bun:test';
+
+import {
+  SIMPLE_PATH,
+  isSimple,
+  modeFromPref,
+  parseMode,
+  prefFromMode,
+  routeTarget,
+} from '~/composables/useMode';
+
+describe('useMode', () => {
+  it('parse', () => {
+    expect(parseMode('true')).toBe(true);
+    expect(parseMode('false')).toBe(false);
+    expect(parseMode(true)).toBe(true);
+    expect(parseMode(false)).toBe(false);
+    expect(parseMode('null')).toBeNull();
+    expect(parseMode('')).toBeNull();
+  });
+
+  it('resolve', () => {
+    expect(isSimple(null, true)).toBe(true);
+    expect(isSimple(null, false)).toBe(false);
+    expect(isSimple(false, true)).toBe(false);
+    expect(isSimple(true, false)).toBe(true);
+  });
+
+  it('map', () => {
+    expect(modeFromPref(null)).toBe('default');
+    expect(modeFromPref(true)).toBe('simple');
+    expect(modeFromPref(false)).toBe('regular');
+    expect(prefFromMode('default')).toBeNull();
+    expect(prefFromMode('simple')).toBe(true);
+    expect(prefFromMode('regular')).toBe(false);
+  });
+
+  it('route', () => {
+    expect(routeTarget('/', null, true)).toBe(SIMPLE_PATH);
+    expect(routeTarget('/', false, true)).toBeNull();
+    expect(routeTarget('/history', null, true)).toBeNull();
+    expect(routeTarget(SIMPLE_PATH, null, false)).toBeNull();
+  });
+});