refactor: improve connection status and history loading logic

ui/app/components/Connection.vue

@@ -3,7 +3,7 @@
     <div class="message-body">
       <span class="icon"><i class="fas fa-info-circle" /></span>
       <span>
-        Connection lost, <NuxtLink class="is-bold" @click.prevent="() => $emit('reconnect')">Click here</NuxtLink>
+        Websocket connection lost, <NuxtLink class="is-bold" @click.prevent="() => $emit('reconnect')">Click here</NuxtLink>
         to reconnect.
       </span>
     </div>

ui/app/components/History.vue

@@ -583,7 +583,7 @@ watch(showCompleted, async isShown => {
 })
 
 onMounted(async () => {
-  if (showCompleted.value) {
+  if (showCompleted.value && !paginationInfo.value.isLoaded) {
     try {
       await stateStore.loadPaginated('history', 1, config.app.default_pagination, 'DESC', true)
     } catch (error) {

ui/app/components/Simple.vue

@@ -7,8 +7,8 @@
             <template v-if="!isMobile">{{ greetingMessage }}</template>
             <template v-else>What would you like to download?</template>
             <span class="is-pulled-right">
-              <span class="icon has-text-info is-pointer mr-2" v-if="!socketStore.isConnected" v-tooltip="'Reload queue'"
+              <span class="icon has-text-info is-pointer mr-2" v-if="!socketStore.isConnected"
-                @click="async () => await refreshQueue()">
+                v-tooltip="'Reload queue'" @click="async () => await refreshQueue()">
                 <i class="fas fa-sync-alt" :class="{ 'fa-spin': isRefreshing }" />
               </span>
 
@@ -273,7 +273,6 @@ const refreshQueue = async (): Promise<void> => {
   } finally {
     isRefreshing.value = false
   }
-  
 }
 
 const paginationInfo = computed(() => stateStore.getPagination())
@@ -691,10 +690,12 @@ onMounted(async () => {
     window.history.replaceState({}, '', url.toString())
   }
 
-  try {
+  if (!paginationInfo.value.isLoaded) {
-    await stateStore.loadPaginated('history', 1, DEFAULT_PAGE_SIZE, 'DESC')
+    try {
-  } catch (error) {
+      await stateStore.loadPaginated('history', 1, DEFAULT_PAGE_SIZE, 'DESC')
-    console.error('Failed to load history on mount:', error)
+    } catch (error) {
+      console.error('Failed to load history on mount:', error)
+    }
   }
 
   if (window?.location && '/' !== window.location.pathname) {
@@ -702,7 +703,6 @@ onMounted(async () => {
   }
 })
 
-// Reload history when socket reconnects
 watch(() => socketStore.isConnected, async (connected) => {
   if (connected && !paginationInfo.value.isLoaded) {
     try {
@@ -713,7 +713,6 @@ watch(() => socketStore.isConnected, async (connected) => {
   }
 })
 
-// Function to load more history items
 const loadMoreHistory = async (): Promise<void> => {
   if (paginationInfo.value.isLoading || paginationInfo.value.page >= paginationInfo.value.total_pages) {
     return

ui/app/layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
 
   <template v-if="simpleMode">
+    <Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
     <Simple @show_settings="() => show_settings = true" :class="{ 'settings-open': show_settings }" />
   </template>
 
@@ -12,7 +13,6 @@
     <div id="main_container" class="container" :class="{ 'settings-open': show_settings }" v-else>
       <NewVersion v-if="newVersionIsAvailable" />
       <nav class="navbar is-mobile is-dark">
-
         <div class="navbar-brand pl-5">
           <NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
             v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'" id="top">
@@ -157,7 +157,15 @@
         </ClientOnly>
       </div>
 
-      <footer class="footer py-5 mt-6 is-unselectable" v-if="config.is_loaded">
+      <div class="mt-6">
+        <div class="columns is-multiline">
+          <div class="column is-12">
+            <Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
+          </div>
+        </div>
+      </div>
+
+      <footer class="footer py-5 is-unselectable" v-if="config.is_loaded">
         <div class="columns is-multiline is-variable is-8">
           <div class="column is-12-mobile is-6-tablet">
             <div class="mb-3">
@@ -422,20 +430,18 @@ onMounted(async () => {
 
   try {
     await config.loadConfig()
-  } catch {
+  } catch { }
-    // -- IGNORE --
-  }
 
   try {
     const opts = await request('/api/yt-dlp/options')
-    if (!opts.ok) {
+    if (opts.ok) {
-      return
+      config.ytdlp_options = await opts.json() as Array<YTDLPOption>
     }
-    const data: Array<YTDLPOption> = await opts.json()
-    config.ytdlp_options = data
   } catch { }
 
-  socket.connect()
+  try {
+    socket.connect()
+  } catch { }
 
   try {
     await handleImage(bg_enable.value)