From 94dd37a123dc7857174c5c645d0c58dd944fd260 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 24 Oct 2025 18:56:56 +0300
Subject: [PATCH] Reverted some changes to the navbar

---
 ui/app/components/Dropdown.vue       | 32 ++++++++--
 ui/app/components/NotifyDropdown.vue | 12 ++--
 ui/app/components/Simple.vue         |  8 ++-
 ui/app/layouts/default.vue           | 95 +++++++++++++++++++++-------
 ui/app/pages/settings.vue            | 50 +++------------
 5 files changed, 119 insertions(+), 78 deletions(-)

diff --git a/ui/app/components/Dropdown.vue b/ui/app/components/Dropdown.vue
index b74598f0..f4f74c2b 100644
--- a/ui/app/components/Dropdown.vue
+++ b/ui/app/components/Dropdown.vue
@@ -4,7 +4,7 @@
       <button class="button is-fullwidth is-justify-content-space-between" aria-haspopup="true" type="button"
         aria-controls="dropdown-menu" @click="toggle" :class="button_classes">
         <span class="icon" v-if="icons"><i :class="icons" /></span>
-        <span>{{ label }}</span>
+        <span :class="{ 'is-sr-only': hideLabel }">{{ label }}</span>
         <div class="is-pulled-right">
           <span class="icon"><i class="fas fa-angle-down" aria-hidden="true" /></span>
         </div>
@@ -15,6 +15,15 @@
       <div v-if="isOpen" class="dropdown is-active dropdown-portal" ref="menu" :style="menuStyle">
         <div class="dropdown-menu" role="menu">
           <div class="dropdown-content" @click="handle_slot_click">
+            <template v-if="hideLabel">
+              <div class="dropdown-label">
+                <span class="icon-text">
+                  <span class="icon" v-if="icons"><i :class="icons" /></span>
+                  <span>{{ label }}</span>
+                </span>
+              </div>
+              <div class="dropdown-divider"></div>
+            </template>
             <slot />
           </div>
         </div>
@@ -27,7 +36,7 @@
 import { ref, onMounted, onBeforeUnmount, nextTick, watchEffect, useTemplateRef } from 'vue'
 
 const emitter = defineEmits(['open_state'])
-defineProps({
+const props = defineProps({
   label: {
     type: String,
     default: 'Select'
@@ -39,6 +48,10 @@ defineProps({
   button_classes: {
     type: String,
     default: ''
+  },
+  hide_label_on_mobile: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -47,6 +60,9 @@ const dropUp = ref(false)
 const dropdown = useTemplateRef<HTMLDivElement>('dropdown')
 const menu = useTemplateRef<HTMLDivElement>('menu')
 const menuStyle = ref<Record<string, string>>({})
+const isMobile = useMediaQuery({ maxWidth: 1024 })
+
+const hideLabel = computed(() => isMobile.value && props.hide_label_on_mobile)
 
 const updatePosition = () => {
   if (!dropdown.value || !isOpen.value) {
@@ -162,8 +178,10 @@ onBeforeUnmount(() => {
 }
 
 .dropdown.dropdown-portal .dropdown-menu {
-  display: block !important; /* Override Bulma's display: none */
-  position: static; /* Don't use absolute positioning inside fixed container */
+  display: block !important;
+  /* Override Bulma's display: none */
+  position: static;
+  /* Don't use absolute positioning inside fixed container */
   max-height: 300px;
   overflow-y: auto;
   padding-top: 4px;
@@ -176,4 +194,10 @@ onBeforeUnmount(() => {
   padding-top: var(--bulma-dropdown-content-padding-top, 0.5rem);
   padding-bottom: var(--bulma-dropdown-content-padding-bottom, 0.5rem);
 }
+
+.dropdown-label {
+  font-weight: 600;
+  padding: 0.5rem 0.75rem;
+  color: var(--bulma-dropdown-label-color, var(--bulma-text-color, #4a4a4a));
+}
 </style>
diff --git a/ui/app/components/NotifyDropdown.vue b/ui/app/components/NotifyDropdown.vue
index 976f611f..8ff79681 100644
--- a/ui/app/components/NotifyDropdown.vue
+++ b/ui/app/components/NotifyDropdown.vue
@@ -43,13 +43,14 @@
 
 <template>
   <div class="navbar-item has-dropdown is-hoverable">
-    <a class="navbar-link is-arrowless">
+    <a class="navbar-link">
       <span class="icon"><i class="fas fa-bell" /></span>
-      <span class="tag ml-2" v-if="store.unreadCount > 0">
+      <span class="tag ml-2">
         <span class="is-underlined">{{ store.unreadCount }}</span>
+        <span>&nbsp;/&nbsp;</span>
+        <span class="is-underlined">{{ store.notifications.length }}</span>
       </span>
     </a>
-
     <div class="navbar-dropdown is-right" style="width: 400px;">
       <template v-if="store.notifications.length > 0">
         <div class="px-3 py-2 is-flex is-justify-content-space-between is-align-items-center">
@@ -112,11 +113,6 @@
         </div>
       </div>
     </div>
-
-  </div>
-
-  <div class="navbar-item">
-
   </div>
 </template>
 
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index cc34a326..fa5a7d75 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -5,9 +5,11 @@
         <form class="download-form__body" autocomplete="off" @submit.prevent="addDownload">
           <label class="label" for="download-url">
             What you would like to download?
-            <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
-              v-tooltip="'WebUI Settings'">
-              <i class="fas fa-cogs" /></span>
+            <span class="is-pulled-right">
+              <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
+                v-tooltip="'WebUI Settings'">
+                <i class="fas fa-cogs" /></span>
+            </span>
           </label>
           <div class="field has-addons">
             <div class="control">
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index 9c62cb21..b3dac08c 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -8,8 +8,8 @@
   <template v-if="show_settings">
     <Modal @close="closeSettings()"
       :content-class="isMobile ? 'modal-content-max is-overflow-scroll ' : 'modal-content-max'">
-      <div class="columns is-multiline">
-        <div class="column is-12 mt-2">
+      <div class="columns is-multiline" style="width:100%">
+        <div class="column is-12">
           <div class="card">
             <header class="card-header">
               <p class="card-header-title">WebUI Settings</p>
@@ -41,8 +41,9 @@
           <NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
             v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
             <span class="is-text-overflow">
-              <span class="icon" v-if="'connecting' === socket.connectionStatus">
-                <i class="fas fa-arrows-rotate fa-spin" />
+              <span class="icon">
+                <i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
+                <i v-else class="fas fa-home" />
               </span>
               <span class="has-text-bold" :class="connectionStatusColor">
                 YTPTube
@@ -60,12 +61,6 @@
 
         <div class="navbar-menu is-unselectable" :class="{ 'is-active': showMenu }">
           <div class="navbar-start">
-
-            <NuxtLink class="navbar-item" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)">
-              <span class="icon"><i class="fa-solid fa-home" /></span>
-              <span>Home</span>
-            </NuxtLink>
-
             <NuxtLink class="navbar-item" to="/browser" @click.prevent="(e: MouseEvent) => changeRoute(e)">
               <span class="icon"><i class="fa-solid fa-folder-tree" /></span>
               <span>Files</span>
@@ -76,15 +71,23 @@
               <span>Presets</span>
             </NuxtLink>
 
-            <NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
-              <span class="icon"><i class="fa-solid fa-tasks" /></span>
-              <span>Tasks</span>
-            </NuxtLink>
+            <div class="navbar-item has-dropdown">
+              <a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
+                <span class="icon"><i class="fas fa-tasks" /></span>
+                <span>Tasks</span>
+              </a>
+              <div class="navbar-dropdown">
+                <NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
+                  <span class="icon"><i class="fa-solid fa-tasks" /></span>
+                  <span>List</span>
+                </NuxtLink>
 
-            <NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
-              <span class="icon"><i class="fa-solid fa-diagram-project" /></span>
-              <span>Task Definitions</span>
-            </NuxtLink>
+                <NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
+                  <span class="icon"><i class="fa-solid fa-diagram-project" /></span>
+                  <span>Definitions</span>
+                </NuxtLink>
+              </div>
+            </div>
 
             <NuxtLink class="navbar-item" to="/notifications" @click.prevent="(e: MouseEvent) => changeRoute(e)">
               <span class="icon-text">
@@ -100,17 +103,51 @@
 
           </div>
           <div class="navbar-end">
+            <div class="navbar-item has-dropdown" v-if="config.app.file_logging || config.app.console_enabled">
+              <a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
+                <span class="icon"><i class="fas fa-tools" /></span>
+                <span>Other</span>
+              </a>
+
+              <div class="navbar-dropdown">
+                <NuxtLink class="navbar-item" to="/logs" @click.prevent="(e: MouseEvent) => changeRoute(e)"
+                  v-if="config.app.file_logging">
+                  <span class="icon"><i class="fa-solid fa-file-lines" /></span>
+                  <span>Logs</span>
+                </NuxtLink>
+
+                <NuxtLink class="navbar-item" to="/console" @click.prevent="(e: MouseEvent) => changeRoute(e)"
+                  v-if="config.app.console_enabled">
+                  <span class="icon"><i class="fa-solid fa-terminal" /></span>
+                  <span>Console</span>
+                </NuxtLink>
+              </div>
+            </div>
+
             <div class="navbar-item" v-if="true === config.app.is_native">
               <button class="button is-dark" @click="shutdownApp">
                 <span class="icon"><i class="fas fa-power-off" /></span>
                 <span v-if="isMobile">Shutdown</span>
               </button>
             </div>
-            <NuxtLink class="navbar-item" to="/settings" @click.prevent="(e: MouseEvent) => changeRoute(e)">
-              <span class="icon"><i class="fa-solid fa-cog" /></span>
-              <span>Settings</span>
-            </NuxtLink>
+
             <NotifyDropdown />
+
+            <div class="navbar-item">
+              <button class="button is-dark" @click="reloadPage">
+                <span class="icon"><i class="fas fa-refresh" /></span>
+                <span v-if="isMobile">Reload</span>
+              </button>
+            </div>
+
+            <div class="navbar-item">
+              <NuxtLink class="button is-dark " :class="{ 'has-tooltip-bottom mr-4': !isMobile }" to="/settings"
+                @click.prevent="(e: MouseEvent) => changeRoute(e)">
+                <span class="icon"><i class="fas fa-cog" /></span>
+                <span v-if="isMobile">WebUI Settings</span>
+              </NuxtLink>
+            </div>
+
           </div>
         </div>
       </nav>
@@ -444,6 +481,20 @@ const shutdownApp = async () => {
   }
 }
 
+const openMenu = (e: MouseEvent) => {
+  const elm = (e.target as HTMLElement)?.closest('div.has-dropdown') as HTMLElement | null
+
+  document.querySelectorAll<HTMLElement>('div.has-dropdown').forEach(el => {
+    if (el !== elm) {
+      el.classList.remove('is-active')
+    }
+  })
+
+  elm?.classList.toggle('is-active')
+}
+
+const reloadPage = () => window.location.reload()
+
 const connectionStatusColor = computed(() => {
   switch (socket.connectionStatus) {
     case 'connected':
diff --git a/ui/app/pages/settings.vue b/ui/app/pages/settings.vue
index e849cca4..c0b8868a 100644
--- a/ui/app/pages/settings.vue
+++ b/ui/app/pages/settings.vue
@@ -2,13 +2,15 @@
   <main class="m-6">
 
     <div>
-      <span class="title is-4">
-        <span class="icon-text">
-          <span class="icon"><i class="fas fa-cog" /></span>
-          <p class="card-header-title">Settings</p>
+      <template v-if="!simpleMode">
+        <span class="title is-4">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-cog" /></span>
+            <p class="card-header-title">WebUI Settings</p>
+          </span>
         </span>
-      </span>
-      <span class="field is-horizontal" />
+        <span class="field is-horizontal" />
+      </template>
 
       <div class="field is-horizontal">
         <div class="field-label is-normal">
@@ -82,7 +84,6 @@
         </div>
       </div>
 
-
       <div class="field is-horizontal">
         <div class="field-label is-normal">
           <label class="label"></label>
@@ -91,7 +92,7 @@
           <div class="field">
             <div class="control">
               <template v-if="bg_enable">
-                <button @click="$emit('reload_bg')" class="button is-primary" :disabled="isLoading">
+                <button @click="$emit('reload_bg')" class="has-text-link" :disabled="isLoading">
                   <span class="icon-text">
                     <span class="icon"><i class="fa"
                         :class="{ 'fa-spin fa-spinner': isLoading, 'fa-file-image': !isLoading }" /></span>
@@ -258,39 +259,6 @@
           </div>
         </div>
       </div>
-
-      <template v-if="!simpleMode">
-        <span class="field is-horizontal" />
-        <span class="title is-4">
-          <span class="icon-text">
-            <span class="icon"><i class="fas fa-cog" /></span>
-            <p class="card-header-title">Application Settings</p>
-          </span>
-        </span>
-        <span class="field is-horizontal" />
-
-        <div class="field is-horizontal">
-          <div class="field-label is-normal">
-            <label class="label"></label>
-          </div>
-          <div class="field-body">
-            <div class="field is-grouped">
-              <div class="control" v-if="config.app.file_logging">
-                <NuxtLink class="button is-primary" to="/logs">
-                  <span class="icon"><i class="fa-solid fa-file-lines" /></span>
-                  <span>Open Logs</span>
-                </NuxtLink>
-              </div>
-              <div class="control" v-if="config.app.console_enabled">
-                <NuxtLink class="button is-primary" to="/console">
-                  <span class="icon"><i class="fa-solid fa-terminal" /></span>
-                  <span>Open Console</span>
-                </NuxtLink>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
     </div>
   </main>
 </template>