Chore: TODOs (#1696)

* fix chart

* replace localstorage with cookies

src/app/components/Base/Chart.vue

@@ -1,6 +1,12 @@
 <template>
   <ClientOnly>
-    <apexchart width="100%" height="100%" :options="options" :series="series" />
+    <apexchart
+      width="100%"
+      height="100%"
+      v-bind="$attrs"
+      :options="options"
+      :series="series"
+    />
   </ClientOnly>
 </template>
 

src/app/components/ClientCard/ClientCard.vue

@@ -9,11 +9,15 @@
         <div class="flex flex-grow flex-col gap-1">
           <ClientCardName :client="client" />
           <div
-            class="block pb-1 text-xs text-gray-500 md:inline-block md:pb-0 dark:text-neutral-400"
+            class="flex flex-col pb-1 text-xs text-gray-500 md:inline-block md:pb-0 dark:text-neutral-400"
           >
+            <div>
               <ClientCardAddress :client="client" />
+            </div>
+            <div>
               <ClientCardLastSeen :client="client" />
             </div>
+          </div>
           <ClientCardOneTimeLink :client="client" />
           <ClientCardExpireDate :client="client" />
         </div>

src/app/components/ClientCard/LastSeen.vue

@@ -1,10 +1,9 @@
 <template>
   <span
     v-if="client.latestHandshakeAt"
-    class="whitespace-nowrap text-gray-400 dark:text-neutral-500"
     :title="$t('client.lastSeen') + $d(new Date(client.latestHandshakeAt))"
   >
-    · {{ timeago(new Date(client.latestHandshakeAt)) }}
+    {{ timeago(new Date(client.latestHandshakeAt)) }}
   </span>
 </template>
 

src/app/components/ClientCard/Transfer.vue

@@ -3,7 +3,7 @@
   <div v-if="client.transferTx" class="min-w-20 md:min-w-24">
     <span
       class="flex gap-1"
-      :title="$t('totalDownload') + bytes(client.transferTx)"
+      :title="$t('client.totalDownload') + bytes(client.transferTx)"
     >
       <IconsArrowDown class="mt-0.5 inline h-3 align-middle" />
       <div>
@@ -22,7 +22,7 @@
   <div v-if="client.transferRx" class="min-w-20 md:min-w-24">
     <span
       class="flex gap-1"
-      :title="$t('totalUpload') + bytes(client.transferRx)"
+      :title="$t('client.totalUpload') + bytes(client.transferRx)"
     >
       <IconsArrowUp class="mt-0.5 inline h-3 align-middle" />
       <div>

src/app/components/Header/ChartToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <Toggle
-    v-model:pressed="globalStore.uiShowCharts"
+    :pressed="globalStore.uiShowCharts"
     class="group inline-flex h-8 w-8 cursor-pointer items-center justify-center whitespace-nowrap rounded-full bg-gray-200 transition hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
     :title="$t('layout.toggleCharts')"
     @update:pressed="globalStore.toggleCharts"

src/app/stores/global.ts

@@ -5,13 +5,19 @@ export const useGlobalStore = defineStore('Global', () => {
 
   const sortClient = ref(true); // Sort clients by name, true = asc, false = desc
 
-  const uiShowCharts = ref(getItem('uiShowCharts') === '1');
+  const uiShowCharts = useCookie<boolean>('uiShowCharts', {
+    default: () => false,
+    maxAge: 365 * 24 * 60 * 60,
+  });
 
   function toggleCharts() {
-    setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
+    uiShowCharts.value = !uiShowCharts.value;
   }
 
-  const uiChartType = ref(getItem('uiChartType') ?? 'area');
+  const uiChartType = useCookie<'area' | 'bar' | 'line'>('uiChartType', {
+    default: () => 'area',
+    maxAge: 365 * 24 * 60 * 60,
+  });
 
   return {
     sortClient,

src/app/utils/localStorage.ts

@@ -1,27 +0,0 @@
-export type LocalStorage = {
-  uiShowCharts: '1' | '0';
-  uiChartType: 'area' | 'bar' | 'line';
-};
-
-export function getItem<K extends keyof LocalStorage>(
-  item: K
-): LocalStorage[K] | null {
-  if (import.meta.client) {
-    return localStorage.getItem(item) as LocalStorage[K] | null;
-  } else {
-    return null;
-  }
-}
-
-export function setItem<K extends keyof LocalStorage>(
-  item: K,
-  value: LocalStorage[K]
-) {
-  if (import.meta.client) {
-    localStorage.setItem(item, value);
-
-    return true;
-  } else {
-    return false;
-  }
-}