move simple view settings back to modal

ui/app/components/Simple.vue

@@ -5,11 +5,9 @@
         <form class="download-form__body" autocomplete="off" @submit.prevent="addDownload">
           <label class="label" for="download-url">
             What you would like to download?
-            <span class="is-pulled-right">
-              <NuxtLink class="icon is-pointer" to="/settings" @click.prevent="(e: MouseEvent) => showSettings(e)">
-                <span class="icon"><i class="fa-solid fa-cog" /></span>
-              </NuxtLink>
-            </span>
+            <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
+                  v-tooltip="'WebUI Settings'">
+                <i class="fas fa-cogs" /></span>
           </label>
           <div class="field has-addons">
             <div class="control">
@@ -544,17 +542,17 @@ const showMessage = (item: StoreItem) => {
   return (item.msg?.length || 0) > 0
 }
 
-
-const showSettings = async (_: MouseEvent, callback: (() => void) | null = null) => {
-
-  const simpleMode = useStorage<boolean>('simple_mode', useConfigStore().app.simple_mode || false)
-  simpleMode.value = false
-
-  document.querySelectorAll('div.has-dropdown').forEach(el => el.classList.remove('is-active'))
-  if (callback) {
-    callback()
+const connectionStatusColor = computed(() => {
+  switch (socketStore.connectionStatus) {
+    case 'connected':
+      return 'has-text-success'
+    case 'connecting':
+      return 'has-text-warning fa-spin'
+    case 'disconnected':
+    default:
+      return 'has-text-danger'
   }
-}
+})
 
 </script>
 

ui/app/layouts/default.vue

@@ -2,7 +2,15 @@
 
   <template v-if="simpleMode">
     <Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
-    <Simple />
+    <Simple @show_settings="() => show_settings = true" />
+  </template>
+
+
+  <template v-if="show_settings">
+    <Modal @close="closeSettings()"
+           :content-class="isMobile ? 'modal-content-max is-overflow-scroll ' : 'modal-content-max is-overflow-visible'">
+      <settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
+    </Modal>
   </template>
 
   <template v-if="!simpleMode">
@@ -148,6 +156,7 @@ import Simple from '~/components/Simple.vue'
 import Shutdown from '~/components/shutdown.vue'
 import Markdown from '~/components/Markdown.vue'
 import Connection from '~/components/Connection.vue'
+import Settings from "~/pages/settings.vue";
 
 const Year = new Date().getFullYear()
 const selectedTheme = useStorage('theme', 'auto')
@@ -161,6 +170,7 @@ const showMenu = ref(false)
 const isMobile = useMediaQuery({ maxWidth: 1024 })
 const app_shutdown = ref<boolean>(false)
 const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false)
+const show_settings = ref(false)
 
 const doc = ref<{ file: string }>({ file: '' })
 
@@ -372,6 +382,11 @@ const useVersionUpdate = () => {
 
 const { newVersionIsAvailable } = useVersionUpdate()
 
+const closeSettings = () => {
+  show_settings.value = false
+  navigateTo('/')
+}
+
 const shutdownApp = async () => {
   const { alertDialog, confirmDialog: confirm_message } = useDialog()