feat(dashborad): improve dashboard preformance (#46)

* feat(dashboard): improve dashboard performance * chore(changeset): add changeset
noctisynth · Jul 16, 2024 · b512a33 · b512a33
1 parent aa61aa8
commit b512a33
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 23 deletions.
diff --git a/.changeset/wet-apricots-chew.md b/.changeset/wet-apricots-chew.md
@@ -0,0 +1,5 @@
+---
+'@noctisynth/grassator': patch
+---
+
+Improve dashboard preformance
diff --git a/src/components/VerticalMenu.vue b/src/components/VerticalMenu.vue
@@ -11,7 +11,7 @@ if (disabled.value === undefined) {
 </script>
 
 <template>
-  <ul>
+  <ul class="shadow-lg bg-white dark:bg-p-surface-900">
     <li v-for="(item, index) in menu" :key="index">
       <div
         @click="activeMenu = index"

diff --git a/src/main.ts b/src/main.ts
@@ -11,6 +11,7 @@ import Aura from '@primevue/themes/aura';
 import Ripple from 'primevue/ripple';
 import Toast from 'primevue/toast';
 import ToastService from 'primevue/toastservice';
+import Tooltip from 'primevue/tooltip';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -28,6 +29,7 @@ app.use(PrimeVue, {
 });
 app.use(ToastService);
 app.directive('ripple', Ripple);
+app.directive('tooltip', Tooltip);
 app.component('Toast', Toast);
 
 app.use(pinia);

diff --git a/src/views/index.vue b/src/views/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { invoke } from '@tauri-apps/api/core';
+// import { invoke } from '@tauri-apps/api/core';
 import { onMounted, ref, shallowReactive } from 'vue';
-import { FileSize } from '../types';
+// import { FileSize } from '../types';
 import { config } from '../scripts/config';
 
 const menu = shallowReactive([
@@ -40,14 +40,14 @@ const theme = ref(
 );
 
 onMounted(async () => {
-  const size: FileSize = await invoke('get_file_size', {
-    url: 'https://vscode.download.prss.microsoft.com/dbazure/download/stable/f1e16e1e6214d7c44d078b1f0607b2388f29d729/VSCodeUserSetup-x64-1.91.1.exe',
-  });
-  console.log(size.error ? size.error : `File size: ${size.size}`);
-  await invoke('download_file', {
-    url: 'https://vscode.download.prss.microsoft.com/dbazure/download/stable/f1e16e1e6214d7c44d078b1f0607b2388f29d729/VSCodeUserSetup-x64-1.91.1.exe',
-    output: 'VSCodeUserSetup-x64-1.91.1.exe',
-  });
+  // const size: FileSize = await invoke('get_file_size', {
+  //   url: 'https://objects.githubusercontent.com/github-production-release-asset-2e65be/27574418/6423efd7-c4f4-424b-8e1e-c8d1f88148d2?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=releaseassetproduction%2F20240716%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240716T084950Z&X-Amz-Expires=300&X-Amz-Signature=1ec3fc4d425eb93890634c3cbf6d2774a411ba17e5bf80aa9cac3a149120ed3c&X-Amz-SignedHeaders=host&actor_id=46275354&key_id=0&repo_id=27574418&response-content-disposition=attachment%3B%20filename%3DCascadiaCode.zip&response-content-type=application%2Foctet-stream',
+  // });
+  // console.log(size.error ? size.error : `File size: ${size.size}`);
+  // await invoke('download_file', {
+  //   url: 'https://objects.githubusercontent.com/github-production-release-asset-2e65be/27574418/6423efd7-c4f4-424b-8e1e-c8d1f88148d2?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=releaseassetproduction%2F20240716%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240716T084950Z&X-Amz-Expires=300&X-Amz-Signature=1ec3fc4d425eb93890634c3cbf6d2774a411ba17e5bf80aa9cac3a149120ed3c&X-Amz-SignedHeaders=host&actor_id=46275354&key_id=0&repo_id=27574418&response-content-disposition=attachment%3B%20filename%3DCascadiaCode.zip&response-content-type=application%2Foctet-stream',
+  //   output: 'VSCodeUserSetup-x64-1.91.1.exe',
+  // });
   // We synchronize the config object with the Rust backend
   config.num_threads = 12;
   console.log(config);
@@ -67,12 +67,15 @@ onMounted(async () => {
           'dark:bg-p-surface-900 dark:b-p-surface-700',
         ]"
       >
-        <IconField>
-          <InputIcon>
-            <i class="pi pi-search"></i>
-          </InputIcon>
-          <InputText placeholder="Search" disabled />
-        </IconField>
+        <div class="flex items-center gap-2">
+          <Avatar image="/logo.png"></Avatar>
+          <IconField v-tooltip="'Unimplemented now'">
+            <InputIcon>
+              <i class="pi pi-search"></i>
+            </InputIcon>
+            <InputText size="small" placeholder="Search" disabled />
+          </IconField>
+        </div>
 
         <div>
           <Button
@@ -98,12 +101,13 @@ onMounted(async () => {
         </div>
       </div>
 
-      <VerticalMenu
-        class="w-64 h-full hidden sm:block"
-        :menu="menu"
-        :activeMenu="activeMenu"
-        disabled
-      />
+      <div class="flex flex-1 h-full w-full">
+        <VerticalMenu
+          class="fixed w-32 h-full transform max-sm:-translate-x-full transition-transform duration-300"
+          :menu="menu"
+          :activeMenu="activeMenu"
+        />
+      </div>
     </div>
   </main>
 </template>