web/satellite/vuetify-poc: rework mdi usage

Reworked the approach how we use material design icons. This new approach reduced the size of the bundle by half. Change-Id: I29a6dbb1b8ff6c3392b9d122340626e332cfdf49
storj · Dec 22, 2023 · 177f7fe · 177f7fe
1 parent f15ba69
commit 177f7fe
Show file tree

Hide file tree

Showing 50 changed files with 274 additions and 214 deletions.
diff --git a/web/satellite/package-lock.json b/web/satellite/package-lock.json
diff --git a/web/satellite/package.json b/web/satellite/package.json
@@ -20,7 +20,7 @@
     "@aws-sdk/client-s3": "3.379.1",
     "@aws-sdk/lib-storage": "3.379.1",
     "@aws-sdk/s3-request-presigner": "3.379.1",
-    "@fontsource-variable/inter": "^5.0.8",
+    "@fontsource-variable/inter": "5.0.16",
     "@hcaptcha/vue3-hcaptcha": "1.2.1",
     "@mdi/font": "7.0.96",
     "@smithy/signature-v4": "2.0.1",
@@ -39,6 +39,7 @@
     "vuetify": "3.4.6"
   },
   "devDependencies": {
+    "@mdi/js": "7.3.67",
     "@types/filesystem": "0.0.32",
     "@types/node": "20.10.0",
     "@types/papaparse": "5.3.10",

diff --git a/web/satellite/src/store/modules/usersStore.ts b/web/satellite/src/store/modules/usersStore.ts
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 import { defineStore } from 'pinia';
-import { computed, reactive, readonly } from 'vue';
+import { computed, DeepReadonly, reactive, readonly } from 'vue';
 
 import {
     DisableMFARequest,
@@ -19,7 +19,7 @@ export const DEFAULT_USER_SETTINGS = readonly(new UserSettings());
 
 export class UsersState {
     public user: User = new User();
-    public settings: Readonly<UserSettings> = DEFAULT_USER_SETTINGS;
+    public settings: DeepReadonly<UserSettings> = DEFAULT_USER_SETTINGS;
     public userMFASecret = '';
     public userMFARecoveryCodes: string[] = [];
 }

diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -6,7 +6,7 @@
         <v-text-field
             v-model="search"
             label="Search"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="mdiMagnify"
             single-line
             variant="solo-filled"
             flat
@@ -51,7 +51,7 @@
                     density="comfortable"
                     icon
                 >
-                    <v-icon icon="mdi-dots-horizontal" />
+                    <v-icon :icon="mdiDotsHorizontal" />
                     <v-menu activator="parent">
                         <v-list class="pa-1">
                             <v-list-item class="text-error" density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.name)">
@@ -89,6 +89,7 @@ import {
     VTextField,
     VDataTableServer,
 } from 'vuetify/components';
+import { mdiDotsHorizontal, mdiMagnify } from '@mdi/js';
 
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { AccessGrantCursor, AccessGrantsOrderBy, AccessGrantsPage } from '@/types/accessGrants';

diff --git a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
@@ -8,7 +8,7 @@
                 <v-text-field
                     v-model="search"
                     label="Search"
-                    prepend-inner-icon="mdi-magnify"
+                    :prepend-inner-icon="mdiMagnify"
                     single-line
                     variant="solo-filled"
                     flat
@@ -25,8 +25,8 @@
                         <v-btn
                             variant="text"
                             color="default"
-                            prepend-icon="mdi-sort"
-                            append-icon="mdi-chevron-down"
+                            :prepend-icon="mdiSort"
+                            :append-icon="mdiChevronDown"
                             v-bind="sortProps"
                             class="mr-2"
                         >
@@ -52,10 +52,10 @@
                     mandatory
                 >
                     <v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
-                        <v-icon>mdi-sort-ascending</v-icon>
+                        <v-icon :icon="mdiSortAscending" />
                     </v-btn>
                     <v-btn size="small" value="desc" title="Descending" variant="text" rounded="xl">
-                        <v-icon>mdi-sort-descending</v-icon>
+                        <v-icon :icon="mdiSortDescending" />
                     </v-btn>
                 </v-btn-toggle>
             </v-col>
@@ -98,7 +98,7 @@
                             <v-btn
                                 variant="text"
                                 color="default"
-                                append-icon="mdi-chevron-down"
+                                :append-icon="mdiChevronDown"
                                 v-bind="limitProps"
                             >
                                 <span class="text-caption text-medium-emphasis mr-2">Items per page:</span>
@@ -128,7 +128,7 @@
                         :disabled="cursor.page === 1"
                         @click="() => onPageChange(cursor.page - 1)"
                     >
-                        <v-icon>mdi-chevron-left</v-icon>
+                        <v-icon :icon="mdiChevronLeft" />
                     </v-btn>
                     <v-btn
                         icon
@@ -139,7 +139,7 @@
                         :disabled="cursor.page === lastPage"
                         @click="() => onPageChange(cursor.page + 1)"
                     >
-                        <v-icon>mdi-chevron-right</v-icon>
+                        <v-icon :icon="mdiChevronRight" />
                     </v-btn>
                 </div>
             </v-card>
@@ -168,6 +168,7 @@ import {
     VBtn,
     VBtnToggle,
     VCol,
+    VCard,
     VIcon,
     VList,
     VListItem,
@@ -177,6 +178,15 @@ import {
     VTextField,
     VDataIterator,
 } from 'vuetify/components';
+import {
+    mdiChevronDown,
+    mdiChevronLeft,
+    mdiChevronRight,
+    mdiMagnify,
+    mdiSort,
+    mdiSortAscending,
+    mdiSortDescending,
+} from '@mdi/js';
 
 import {
     BrowserObject,

diff --git a/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue b/web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
@@ -41,7 +41,7 @@
             title="More Actions"
             icon
         >
-            <v-icon icon="mdi-dots-horizontal" />
+            <v-icon :icon="mdiDotsHorizontal" />
             <v-menu activator="parent">
                 <v-list class="pa-1">
                     <template v-if="file.type !== 'folder'">
@@ -111,8 +111,8 @@ import {
     VFadeTransition,
     VIcon,
     VBtn,
-    VTooltip,
 } from 'vuetify/components';
+import { mdiDotsHorizontal } from '@mdi/js';
 
 import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 import { useNotify } from '@/utils/hooks';

diff --git a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
@@ -23,7 +23,7 @@
                         <v-expansion-panel-title color="">
                             <span>{{ statusLabel }}</span>
                             <template v-if="isClosable" #actions>
-                                <v-btn variant="outlined" color="default" size="x-small" icon="mdi-close" title="Close" @click="closeDialog" />
+                                <v-btn variant="outlined" color="default" size="x-small" :icon="mdiClose" title="Close" @click="closeDialog" />
                             </template>
                         </v-expansion-panel-title>
                         <v-progress-linear
@@ -44,7 +44,7 @@
                                         <template #activator="{ props: activatorProps }">
                                             <v-icon
                                                 v-bind="activatorProps"
-                                                icon="mdi-close-circle"
+                                                :icon="mdiCloseCircle"
                                                 @click="cancelAll"
                                             />
                                         </template>
@@ -87,8 +87,10 @@ import {
     VIcon,
     VDivider,
     VExpandTransition,
+    VBtn,
 } from 'vuetify/components';
 import { useRouter } from 'vue-router';
+import { mdiClose, mdiCloseCircle } from '@mdi/js';
 
 import { BrowserObject, UploadingBrowserObject, UploadingStatus, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';

diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -6,7 +6,7 @@
         <v-text-field
             v-model="search"
             label="Search"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="mdiMagnify"
             single-line
             variant="solo-filled"
             flat
@@ -120,6 +120,7 @@ import {
     VDataTableServer,
     VDataTableRow,
 } from 'vuetify/components';
+import { mdiMagnify } from '@mdi/js';
 
 import {
     BrowserObject,

diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -6,7 +6,7 @@
         <v-text-field
             v-model="search"
             label="Search"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="mdiMagnify"
             single-line
             variant="solo-filled"
             flat
@@ -78,7 +78,7 @@
                 <v-menu location="bottom end" transition="scale-transition">
                     <template #activator="{ props: activatorProps }">
                         <v-btn
-                            icon="mdi-dots-horizontal"
+                            :icon="mdiDotsHorizontal"
                             color="default"
                             variant="outlined"
                             size="small"
@@ -137,6 +137,7 @@ import {
     VDivider,
     VDataTableServer,
 } from 'vuetify/components';
+import { mdiDotsHorizontal, mdiMagnify } from '@mdi/js';
 
 import { BucketPage, BucketCursor, Bucket } from '@/types/buckets';
 import { useBucketsStore } from '@/store/modules/bucketsStore';

diff --git a/web/satellite/vuetify-poc/src/components/InputCopyButton.vue b/web/satellite/vuetify-poc/src/components/InputCopyButton.vue
@@ -6,7 +6,7 @@
         <template #activator="{ props: activatorProps }">
             <v-btn
                 v-bind="activatorProps"
-                :icon="justCopied ? 'mdi-check' : 'mdi-content-copy'"
+                :icon="justCopied ? mdiCheck : mdiContentCopy"
                 variant="text"
                 density="compact"
                 :color="justCopied ? 'success' : 'default'"
@@ -20,6 +20,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { VTooltip, VBtn } from 'vuetify/components';
+import { mdiCheck, mdiContentCopy } from '@mdi/js';
 
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@@ -29,8 +30,8 @@ const props = defineProps<{
     tooltipDisabled?: boolean;
 }>();
 
-const copiedTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const justCopied = computed<boolean>(() => copiedTimeout.value !== null);
+const copiedTimeout = ref<number>();
+const justCopied = computed<boolean>(() => copiedTimeout.value !== undefined);
 
 const isTooltip = (() => {
     const internal = ref<boolean>(false);
@@ -51,7 +52,7 @@ function onCopy(): void {
 
     if (copiedTimeout.value) clearTimeout(copiedTimeout.value);
     copiedTimeout.value = setTimeout(() => {
-        copiedTimeout.value = null;
+        copiedTimeout.value = undefined;
     }, 750);
 }
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue b/web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue
@@ -6,7 +6,7 @@
         <template #activator="{ props }">
             <v-icon
                 v-bind="props"
-                icon="mdi-eye-outline"
+                :icon="mdiEyeOutline"
                 @click="() => emit('toggleVisibility')"
             />
         </template>
@@ -15,14 +15,15 @@
         <template #activator="{ props }">
             <v-icon
                 v-bind="props"
-                icon="mdi-eye-off-outline"
+                :icon="mdiEyeOffOutline"
                 @click="() => emit('toggleVisibility')"
             />
         </template>
     </v-tooltip>
 </template>
 <script setup lang="ts">
 import { VIcon, VTooltip } from 'vuetify/components';
+import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
 
 defineProps<{
     isVisible: boolean

diff --git a/web/satellite/vuetify-poc/src/components/ProjectCard.vue b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
@@ -45,7 +45,7 @@
                 </template>
                 <v-btn v-else color="primary" size="small" class="mr-2" @click="openProject">Open Project</v-btn>
                 <v-btn v-if="item?.role === ProjectRole.Owner" color="default" variant="outlined" size="small" density="comfortable" icon>
-                    <v-icon icon="mdi-dots-horizontal" />
+                    <v-icon :icon="mdiDotsHorizontal" />
 
                     <v-menu activator="parent" location="bottom" transition="fade-transition">
                         <v-list class="pa-1">
@@ -94,6 +94,7 @@ import {
     VCardSubtitle,
     VCardText,
 } from 'vuetify/components';
+import { mdiDotsHorizontal } from '@mdi/js';
 
 import { ProjectItemModel, PROJECT_ROLE_COLORS } from '@poc/types/projects';
 import { ProjectInvitationResponse } from '@/types/projects';

diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -6,7 +6,7 @@
         <v-text-field
             v-model="search"
             label="Search"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="mdiMagnify"
             single-line
             variant="solo-filled"
             flat
@@ -79,7 +79,7 @@
                         density="comfortable"
                         :loading="decliningIds.has(item.id)"
                     >
-                        <v-icon icon="mdi-dots-horizontal" size="18" />
+                        <v-icon :icon="mdiDotsHorizontal" size="18" />
                         <v-menu activator="parent" location="bottom" transition="scale-transition">
                             <v-list class="pa-1">
                                 <template v-if="item.role === ProjectRole.Owner">
@@ -134,6 +134,7 @@ import {
     VDivider,
     VDataTable,
 } from 'vuetify/components';
+import { mdiDotsHorizontal, mdiMagnify } from '@mdi/js';
 
 import { ProjectItemModel, PROJECT_ROLE_COLORS } from '@poc/types/projects';
 import { ProjectInvitationResponse } from '@/types/projects';

diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -7,7 +7,7 @@
             <v-col v-if="selectedMembers.length" class="pa-0" cols="auto">
                 <v-btn
                     class="text-caption ml-2 mt-2"
-                    prepend-icon="mdi-trash-can-outline"
+                    :prepend-icon="mdiTrashCanOutline"
                     variant="outlined"
                     size="large"
                     color="default"
@@ -20,7 +20,7 @@
                 <v-text-field
                     v-model="search"
                     label="Search"
-                    prepend-inner-icon="mdi-magnify"
+                    :prepend-inner-icon="mdiMagnify"
                     single-line
                     variant="solo-filled"
                     flat
@@ -73,7 +73,7 @@
                     density="comfortable"
                     icon
                 >
-                    <v-icon icon="mdi-dots-horizontal" />
+                    <v-icon :icon="mdiDotsHorizontal" />
                     <v-menu activator="parent">
                         <v-list class="pa-1">
                             <v-list-item
@@ -134,6 +134,7 @@ import {
     VDataTableServer,
 } from 'vuetify/components';
 import { useRouter } from 'vue-router';
+import { mdiDotsHorizontal, mdiMagnify, mdiTrashCanOutline } from '@mdi/js';
 
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';

diff --git a/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue b/web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
@@ -6,7 +6,7 @@
         <v-text-field
             v-model="search"
             label="Search"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="mdiMagnify"
             single-line
             variant="solo-filled"
             flat
@@ -65,6 +65,7 @@ import {
     VTextField,
     VDataTable,
 } from 'vuetify/components';
+import { mdiMagnify } from '@mdi/js';
 
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useLoading } from '@/composables/useLoading';