From 8e78f9998307cc2a0129bbc79296aa5f6d140de8 Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Mon, 3 Mar 2025 16:08:27 +0100
Subject: [PATCH] Chore: TODOs (#1696)

* fix chart

* replace localstorage with cookies
---
 src/app/components/Base/Chart.vue            |  8 +++++-
 src/app/components/ClientCard/ClientCard.vue | 10 +++++---
 src/app/components/ClientCard/LastSeen.vue   |  3 +--
 src/app/components/ClientCard/Transfer.vue   |  4 +--
 src/app/components/Header/ChartToggle.vue    |  2 +-
 src/app/stores/global.ts                     | 12 ++++++---
 src/app/utils/localStorage.ts                | 27 --------------------
 7 files changed, 27 insertions(+), 39 deletions(-)
 delete mode 100644 src/app/utils/localStorage.ts

diff --git a/src/app/components/Base/Chart.vue b/src/app/components/Base/Chart.vue
index 9976acff..afa46ba5 100644
--- a/src/app/components/Base/Chart.vue
+++ b/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>
 
diff --git a/src/app/components/ClientCard/ClientCard.vue b/src/app/components/ClientCard/ClientCard.vue
index aeac1aee..69caa79a 100644
--- a/src/app/components/ClientCard/ClientCard.vue
+++ b/src/app/components/ClientCard/ClientCard.vue
@@ -9,10 +9,14 @@
         <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"
           >
-            <ClientCardAddress :client="client" />
-            <ClientCardLastSeen :client="client" />
+            <div>
+              <ClientCardAddress :client="client" />
+            </div>
+            <div>
+              <ClientCardLastSeen :client="client" />
+            </div>
           </div>
           <ClientCardOneTimeLink :client="client" />
           <ClientCardExpireDate :client="client" />
diff --git a/src/app/components/ClientCard/LastSeen.vue b/src/app/components/ClientCard/LastSeen.vue
index fda45fb3..fd6027a6 100644
--- a/src/app/components/ClientCard/LastSeen.vue
+++ b/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>
 
diff --git a/src/app/components/ClientCard/Transfer.vue b/src/app/components/ClientCard/Transfer.vue
index 55bbf6bc..53574c78 100644
--- a/src/app/components/ClientCard/Transfer.vue
+++ b/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>
diff --git a/src/app/components/Header/ChartToggle.vue b/src/app/components/Header/ChartToggle.vue
index ad69d8d0..9ebb8be1 100644
--- a/src/app/components/Header/ChartToggle.vue
+++ b/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"
diff --git a/src/app/stores/global.ts b/src/app/stores/global.ts
index ddf83ffd..17ebf19f 100644
--- a/src/app/stores/global.ts
+++ b/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,
diff --git a/src/app/utils/localStorage.ts b/src/app/utils/localStorage.ts
deleted file mode 100644
index abe5f4cc..00000000
--- a/src/app/utils/localStorage.ts
+++ /dev/null
@@ -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;
-  }
-}