feat: enhance UI and functionality across components

- Added Google Fonts preconnect and stylesheet link in `index.html` for improved typography.
- Updated version in `package.json` to `4.9.9alpha3`.
- Refined launch configuration by removing deprecated arguments.
- Improved app detail modal and card components for better accessibility and visual consistency.
- Enhanced download queue and sidebar components with updated styles and functionality.
- Implemented new utility classes for better styling control in CSS.
- Adjusted various components for improved responsiveness and user experience.

src/components/ThemeToggle.vue

@@ -1,23 +1,27 @@
 <template>
   <button
     type="button"
-    class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm font-medium text-slate-600 shadow-sm transition hover:border-brand/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-300"
+    class="flex w-full items-center justify-between rounded-xl border border-slate-200/60 bg-white/80 px-3.5 py-2.5 text-sm font-medium text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-700/60 dark:bg-slate-800/80 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
     :aria-pressed="themeMode === 'dark'"
     @click="toggle"
   >
-    <span class="flex items-center gap-2">
-      <i class="fas" :class="iconClass"></i>
+    <span class="flex items-center gap-2.5">
+      <span
+        class="flex h-7 w-7 items-center justify-center rounded-lg bg-slate-100/80 dark:bg-slate-700/80"
+      >
+        <i class="fas text-sm" :class="iconClass"></i>
+      </span>
       <span>{{ label }}</span>
     </span>
     <span
-      class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700"
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full bg-slate-200/90 transition dark:bg-slate-600/80"
     >
       <span
         :class="[
-          'inline-block h-4 w-4 rounded-full bg-white shadow transition',
+          'absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-white shadow-md ring-2 ring-slate-200/50 transition-all duration-200 dark:ring-slate-600/50',
           togglePosition,
         ]"
-      ></span>
+      />
     </span>
   </button>
 </template>
@@ -50,8 +54,8 @@ const iconClass = computed(() => {
 });
 
 const togglePosition = computed(() => {
-  if (props.themeMode === "auto") return "translate-x-4";
-  if (props.themeMode === "dark") return "translate-x-7";
-  return "translate-x-1";
+  if (props.themeMode === "auto") return "left-1/2 -translate-x-1/2";
+  if (props.themeMode === "dark") return "left-6";
+  return "left-0.5";
 });
 </script>