feat(web-ui): UI consistency / layout uplifts

src_assets/common/assets/web/ThemeToggle.vue

@@ -4,17 +4,25 @@ import { onMounted } from 'vue'
 import {
   CloudMoon,
   CloudRain,
+  Coffee,
   Contrast,
+  Droplet,
   Flame,
   Flower,
   Flower2,
+  Ghost,
   Layers,
+  Milk,
   MonitorSmartphone,
   Moon,
   Mountain,
+  Shuffle,
   Sparkles,
+  Sprout,
   Sun,
   Sunrise,
+  Sunset,
+  TreePine,
   Trees,
   Waves,
 } from '@lucide/vue'
@@ -38,96 +46,104 @@ onMounted(() => {
       </span>
       <span id="bd-theme-text">{{ $t('navbar.toggle_theme') }}</span>
     </a>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-      <li>
+    <ul class="dropdown-menu dropdown-menu-end theme-menu" aria-labelledby="bd-theme-text">
+      <li class="theme-menu-full">
         <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
           <MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
           {{ $t('navbar.theme_auto') }}
         </button>
+        <button type="button" id="bd-theme-random" class="dropdown-item d-flex align-items-center">
+          <Shuffle :size="18" class="theme-icon icon"></Shuffle>
+          {{ $t('navbar.theme_random') }}
+        </button>
       </li>
-      <li><hr class="dropdown-divider"></li>
       <!-- Dark Themes -->
-      <li>
+      <li class="theme-menu-group">
+        <h6 class="dropdown-header">{{ $t('navbar.theme_group_dark') }}</h6>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
           <Moon :size="18" class="theme-icon icon"></Moon>
           {{ $t('navbar.theme_dark') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
-          <Layers :size="18" class="theme-icon icon"></Layers>
-          {{ $t('navbar.theme_slate') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula" aria-pressed="false">
+          <Ghost :size="18" class="theme-icon icon"></Ghost>
+          {{ $t('navbar.theme_dracula') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha" aria-pressed="false">
+          <Coffee :size="18" class="theme-icon icon"></Coffee>
+          {{ $t('navbar.theme_mocha') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
+          <Flame :size="18" class="theme-icon icon"></Flame>
+          {{ $t('navbar.theme_ember') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine" aria-pressed="false">
+          <TreePine :size="18" class="theme-icon icon"></TreePine>
+          {{ $t('navbar.theme_rose_pine') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
           <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
           {{ $t('navbar.theme_moonlight') }}
         </button>
-      </li>
-      <li>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
+          <Layers :size="18" class="theme-icon icon"></Layers>
+          {{ $t('navbar.theme_slate') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
           <CloudRain :size="18" class="theme-icon icon"></CloudRain>
           {{ $t('navbar.theme_midnight') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
-          <Flame :size="18" class="theme-icon icon"></Flame>
-          {{ $t('navbar.theme_ember') }}
-        </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord" aria-pressed="false">
           <Mountain :size="18" class="theme-icon icon"></Mountain>
           {{ $t('navbar.theme_nord') }}
         </button>
       </li>
-      <li><hr class="dropdown-divider"></li>
       <!-- Light Themes -->
-      <li>
+      <li class="theme-menu-group">
+        <h6 class="dropdown-header">{{ $t('navbar.theme_group_light') }}</h6>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
           <Sun :size="18" class="theme-icon icon"></Sun>
           {{ $t('navbar.theme_light') }}
         </button>
-      </li>
-      <li>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
-          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
-          {{ $t('navbar.theme_indigo') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard" aria-pressed="false">
+          <Droplet :size="18" class="theme-icon icon"></Droplet>
+          {{ $t('navbar.theme_alucard') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte" aria-pressed="false">
+          <Milk :size="18" class="theme-icon icon"></Milk>
+          {{ $t('navbar.theme_latte') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light" aria-pressed="false">
+          <Sunset :size="18" class="theme-icon icon"></Sunset>
+          {{ $t('navbar.theme_ember_light') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn" aria-pressed="false">
+          <Sprout :size="18" class="theme-icon icon"></Sprout>
+          {{ $t('navbar.theme_rose_pine_dawn') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine" aria-pressed="false">
           <Sunrise :size="18" class="theme-icon icon"></Sunrise>
           {{ $t('navbar.theme_sunshine') }}
         </button>
-      </li>
-      <li>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
+          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
+          {{ $t('navbar.theme_indigo') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean" aria-pressed="false">
           <Waves :size="18" class="theme-icon icon"></Waves>
           {{ $t('navbar.theme_ocean') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest" aria-pressed="false">
           <Trees :size="18" class="theme-icon icon"></Trees>
           {{ $t('navbar.theme_forest') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose" aria-pressed="false">
           <Flower :size="18" class="theme-icon icon"></Flower>
           {{ $t('navbar.theme_rose') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender" aria-pressed="false">
           <Flower2 :size="18" class="theme-icon icon"></Flower2>
           {{ $t('navbar.theme_lavender') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome" aria-pressed="false">
           <Contrast :size="18" class="theme-icon icon"></Contrast>
           {{ $t('navbar.theme_monochrome') }}

src_assets/common/assets/web/apps.html

@@ -7,14 +7,14 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
+  <div id="content" class="container">
     <div class="my-4">
       <h1>{{ $t('apps.applications_title') }}<span v-if="apps.length"> ({{ appCountLabel }})</span></h1>
       <p>{{ $t('apps.applications_desc') }}</p>
     </div>
 
     <!-- Actions toolbar -->
-    <div class="apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+    <div class="toolbar apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
       <!-- Left side actions -->
       <div class="d-flex align-items-center gap-2">
         <!-- Add new application -->
@@ -67,13 +67,13 @@ <h1>{{ $t('apps.applications_title') }}<span v-if="apps.length"> ({{ appCountLab
           <div class="card-body d-flex flex-column">
             <h5 class="card-title mb-2">{{ app.name }}</h5>
             <div class="app-details text-muted small mb-3">
-              <div v-if="app.output" class="text-truncate">
+              <div v-if="app.output" :title="app.output">
                 <file-text :size="14" class="icon me-1"></file-text>
-                {{ app.output }}
+                <span class="app-detail-text">{{ app.output }}</span>
               </div>
-              <div v-if="app.cmd" class="text-truncate">
+              <div v-if="app.cmd" :title="app.cmd">
                 <terminal :size="14" class="icon me-1"></terminal>
-                {{ app.cmd }}
+                <span class="app-detail-text">{{ app.cmd }}</span>
               </div>
             </div>
             <div class="mt-auto d-flex gap-2">

src_assets/common/assets/web/config.html

@@ -7,12 +7,15 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
-    <h1 class="my-4">{{ $t('config.configuration') }}</h1>
+  <div id="content" class="container">
+    <div class="my-4">
+      <h1>{{ $t('config.configuration') }}</h1>
+      <p>{{ $t('config.configuration_desc') }}</p>
+    </div>
 
     <!-- Search Bar with Autocomplete -->
-    <div class="mb-3">
-      <div class="input-group">
+    <div class="toolbar mb-3 d-flex flex-wrap align-items-center gap-3">
+      <div class="input-group config-search">
         <span class="input-group-text">
           <search :size="18" class="icon"></search>
         </span>
@@ -30,25 +33,60 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
           {{ option.tab }} - {{ option.label }}
         </option>
       </datalist>
-      <div v-if="searchQuery && searchResults.length === 0" class="text-muted small mt-1">
+      <span v-if="searchQuery && searchResults.length === 0" class="text-muted small flex-shrink-0">
         No results found for "{{ searchQuery }}"
-      </div>
-      <div v-else-if="searchQuery" class="text-muted small mt-1">
+      </span>
+      <span v-else-if="searchQuery" class="text-muted small flex-shrink-0">
         Found {{ searchResults.length }} result(s)
-      </div>
+      </span>
     </div>
 
     <div class="form" v-if="config">
-      <!-- Header -->
-      <ul class="nav nav-tabs">
-        <li class="nav-item" v-for="tab in tabs" :key="tab.id">
-          <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
-            @click="currentTab = tab.id">
-            <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
-            {{tab.name}}
-          </a>
-        </li>
-      </ul>
+      <div class="config-layout">
+        <!-- Sidebar navigation -->
+        <nav class="config-nav">
+          <ul class="nav config-nav-list">
+            <li class="nav-item" v-for="tab in generalTabs" :key="tab.id">
+              <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+                @click="currentTab = tab.id">
+                <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                {{tab.name}}
+              </a>
+            </li>
+          </ul>
+          <template v-if="encoderTabs.length">
+            <div class="config-nav-heading">{{ $t('config.encoders') }}</div>
+            <ul class="nav config-nav-list">
+              <li class="nav-item" v-for="tab in encoderTabs" :key="tab.id">
+                <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+                  @click="currentTab = tab.id">
+                  <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                  {{tab.name}}
+                </a>
+              </li>
+            </ul>
+          </template>
+
+          <div class="config-actions">
+            <button class="btn btn-primary" @click="save">
+              <save :size="18" class="icon"></save>
+              {{ $t('_common.save') }}
+            </button>
+            <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
+              <check :size="18" class="icon"></check>
+              {{ $t('_common.apply') }}
+            </button>
+          </div>
+        </nav>
+
+        <!-- Tab content -->
+        <div class="config-content">
+          <div class="alert alert-success mb-4" v-if="saved && !restarted">
+            <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
+          </div>
+          <div class="alert alert-success mb-4" v-if="restarted">
+            <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
+          </div>
 
       <!-- General Tab -->
       <general
@@ -98,25 +136,10 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
         :config="config"
         :platform="platform">
       </container-encoders>
+        </div>
+      </div>
     </div>
 
-    <!-- Save and Apply buttons -->
-    <div class="alert alert-success my-4" v-if="saved && !restarted">
-      <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
-    </div>
-    <div class="alert alert-success my-4" v-if="restarted">
-      <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
-    </div>
-    <div class="mb-3 d-flex gap-2 mt-4">
-      <button class="btn btn-primary" @click="save">
-        <save :size="18" class="icon"></save>
-        {{ $t('_common.save') }}
-      </button>
-      <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
-        <check :size="18" class="icon"></check>
-        {{ $t('_common.apply') }}
-      </button>
-    </div>
   </div>
 </body>
 
@@ -148,6 +171,8 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
     Volume2,
   } from '@lucide/vue'
 
+  const ENCODER_TAB_IDS = new Set(["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"]);
+
   const app = createApp({
     components: {
       Navbar,
@@ -360,6 +385,12 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
        }
     },
     computed: {
+      generalTabs() {
+        return this.tabs.filter(tab => !ENCODER_TAB_IDS.has(tab.id));
+      },
+      encoderTabs() {
+        return this.tabs.filter(tab => ENCODER_TAB_IDS.has(tab.id));
+      },
       allConfigOptions() {
         const options = [];
         this.tabs.forEach(tab => {

src_assets/common/assets/web/featured.html

@@ -7,14 +7,14 @@
 
 <body id="app" v-cloak>
   <Navbar></Navbar>
-  <div class="container">
+  <div id="content" class="container">
     <div class="my-4">
       <h1>{{ $t('featured.title') }}</h1>
       <p>{{ $t('featured.description') }}</p>
     </div>
 
     <!-- Category Filter -->
-    <div class="mb-4">
+    <div class="toolbar mb-4">
       <div class="btn-group" role="group" aria-label="Category filter">
         <button
           type="button"

src_assets/common/assets/web/init.js

@@ -1,5 +1,10 @@
 import i18n from './locale'
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+// Load Sunshine.css after bootstrap to override some of the styles.
+// Makes themes load and style correctly.
+import './sunshine.css'
+
 // must import even if not implicitly using here
 // https://github.com/aurelia/skeleton-navigation/issues/894
 // https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9

src_assets/common/assets/web/logout.html

@@ -27,8 +27,11 @@ <h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
 <script type="module">
   import { createApp } from 'vue'
   import { initApp } from './init'
+  import { loadAutoTheme } from './theme'
   import { LogIn } from '@lucide/vue'
 
+  loadAutoTheme();
+
   const app = createApp({
     components: {
       LogIn,