feat: ui scaling, update all

src/components/App.vue

@@ -14,12 +14,13 @@ import OptionList from './OptionList.vue';
 import ProfileList from './ProfileList.vue';
 import StartButton from './StartButton.vue';
 import { invoke } from '../invoke';
-import { useGeneralStore, usePkgStore, usePrfStore } from '../stores';
+import { useClientStore, useGeneralStore, usePkgStore, usePrfStore } from '../stores';
 import { Dirs } from '../types';
 
 const pkg = usePkgStore();
 const prf = usePrfStore();
 const general = useGeneralStore();
+const client = useClientStore();
 
 pkg.setupListeners();
 
@@ -31,6 +32,7 @@ const isProfileDisabled = computed(() => prf.current === null);
 onMounted(async () => {
     invoke('list_directories').then((d) => {
         general.dirs = d as Dirs;
+        client.load();
     });
 
     const fetch_promise = pkg.fetch(true);
@@ -57,17 +59,17 @@ onMounted(async () => {
 </script>
 
 <template>
-    <main>
+    <main :class="client.scaleFactor === 's' ? 'main-scale-s' : client.scaleFactor === 'm' ? 'main-scale-m' : client.scaleFactor === 'l' ? 'main-scale-l' : 'main-scale-xl'">
         <Tabs
             lazy
             :value="currentTab"
-            v-on:update:value="(value) => (currentTab = value)"
+            v-on:update:value="(value) => { currentTab = value; }"
             class="h-screen"
         >
             <div class="fixed w-full flex z-100">
-                <TabList class="grow">
+                <TabList class="grow" :show-navigators="false">
                     <Tab :value="3"
-                        ><div class="pi pi-question-circle"></div
+                        ><div class="pi pi-users"></div
                     ></Tab>
                     <Tab :disabled="isProfileDisabled" :value="0"
                         ><div class="pi pi-box"></div
@@ -86,6 +88,7 @@ onMounted(async () => {
                     ></Tab>
 
                     <div class="grow"></div>
+
                     <div class="flex gap-4">
                         <div class="flex" v-if="currentTab !== 3">
                             <InputIcon class="self-center mr-2">
@@ -93,6 +96,7 @@ onMounted(async () => {
                             </InputIcon>
                             <InputText
                                 v-if="currentTab === 2"
+                                style="min-width: 0; width: 25dvw;"
                                 class="self-center"
                                 size="small"
                                 placeholder="Search"
@@ -100,6 +104,7 @@ onMounted(async () => {
                             />
                             <InputText
                                 v-else
+                                style="min-width: 0; width: 25dvw;"
                                 class="self-center"
                                 size="small"
                                 placeholder="Search"
@@ -114,12 +119,20 @@ onMounted(async () => {
                             :disabled="true"
                         />
                         <Button
-                            v-if="pkg.networkStatus === 'offline'"
+                            v-if="pkg.networkStatus === 'offline' && !client.offlineMode"
                             class="shrink self-center"
                             icon="pi pi-sync"
                             size="small"
                             @click="pkg.fetch(false)"
                         />
+                        <Button
+                            v-if="pkg.networkStatus === 'online' && pkg.hasAvailableUpdates"
+                            icon="pi pi-download"
+                            label="UPDATE ALL"
+                            size="small"
+                            class="mr-4 m-2.5"
+                            @click="pkg.updateAll()"
+                        ></Button>
                     </div>
                     <div class="grow"></div>
                     <StartButton />
@@ -136,9 +149,6 @@ onMounted(async () => {
                     <OptionList />
                 </TabPanel>
                 <TabPanel :value="3">
-                    <strong>UNDER CONSTRUCTION</strong><br />Some features are
-                    missing.<br />Existing features are expected to break
-                    sometimes.
                     <ProfileList />
                     <br /><br /><br />
                     <footer>
@@ -184,4 +194,32 @@ body {
     margin: 0;
     padding: 0;
 }
+
+.main-scale-s {
+    zoom: 1.0
+}
+
+.main-scale-m {
+    zoom: 1.25
+}
+
+.main-scale-l {
+    zoom: 1.4
+}
+
+.main-scale-xl {
+    zoom: 1.7
+}
+
+.p-tablist {
+    background-color: #ffffff !important;
+    border-bottom: white 10px !important;
+}
+
+.p-tab {
+    border-bottom: none !important;
+}
+.p-tablist-active-bar {
+    display: none !important;
+}
 </style>