move into own components

src/app/app.vue

@@ -11,7 +11,6 @@
 
 <script setup lang="ts">
 const globalStore = useGlobalStore();
-globalStore.fetchRelease();
 globalStore.setLanguage();
 useHead({
   bodyAttrs: {

src/app/components/ClientCard/Charts.vue

@@ -2,12 +2,12 @@
   <div
     :class="`absolute bottom-0 left-0 right-0 z-0 h-6 ${globalStore.uiChartType === 'line' && 'line-chart'}`"
   >
-    <UiChart :options="chartOptionsTX" :series="client.transferTxSeries" />
+    <BaseChart :options="chartOptionsTX" :series="client.transferTxSeries" />
   </div>
   <div
     :class="`absolute left-0 right-0 top-0 z-0 h-6 ${globalStore.uiChartType === 'line' && 'line-chart'}`"
   >
-    <UiChart
+    <BaseChart
       :options="chartOptionsRX"
       :series="client.transferRxSeries"
       style="transform: scaleY(-1)"

src/app/components/ClientCard/ClientCard.vue

@@ -5,7 +5,6 @@
   >
     <div class="flex w-full items-center gap-3 md:gap-4">
       <ClientCardAvatar :client="client" />
-      <!-- Name & Info -->
       <div class="flex w-full flex-col gap-2 xxs:flex-row">
         <div class="flex flex-grow flex-col gap-1">
           <ClientCardName :client="client" />
@@ -19,15 +18,12 @@
           <ClientCardExpireDate :client="client" />
         </div>
 
-        <!-- Info -->
         <div
           class="mt-px flex shrink-0 items-center justify-end gap-2 text-xs text-gray-400 dark:text-neutral-400"
         >
           <ClientCardTransfer :client="client" />
         </div>
       </div>
-      <!-- </div> -->
-      <!-- <div class="flex flex-grow items-center"> -->
     </div>
 
     <div class="flex items-center justify-end">

src/app/components/ClientCard/Config.vue

@@ -1,12 +1,12 @@
 <template>
-  <a
+  <NuxtLink
-    :href="'./api/client/' + client.id + '/configuration'"
+    :to="'/api/client/' + client.id + '/configuration'"
     download
     class="inline-block rounded bg-gray-100 p-2 align-middle transition hover:bg-red-800 hover:text-white dark:bg-neutral-600 dark:text-neutral-300 dark:hover:bg-red-800 dark:hover:text-white"
     :title="$t('downloadConfig')"
   >
     <IconsDownload class="w-5" />
-  </a>
+  </NuxtLink>
 </template>
 
 <script setup lang="ts">

src/app/components/ClientCard/Name.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group text-sm text-gray-700 md:text-base dark:text-neutral-200"
+    class="text-sm text-gray-700 md:text-base dark:text-neutral-200"
     :title="$t('createdOn') + dateTime(new Date(client.createdAt))"
   >
     <span class="border-b-2 border-t-2 border-transparent">

src/app/components/ClientCard/OneTimeLink.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div v-if="client.oneTimeLink !== null" class="text-xs text-gray-400">
-    v-if="client.oneTimeLink !== null"
-    :ref="'client-' + client.id + '-link'"
-    class="text-xs text-gray-400"
-  >
     <a :href="'./cnf/' + client.oneTimeLink.oneTimeLink">{{ path }}</a>
   </div>
 </template>

src/app/components/header/ChartToggle.vue

@@ -0,0 +1,16 @@
+<template>
+  <Toggle
+    v-model: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('toggleCharts')"
+    @update:pressed="globalStore.toggleCharts"
+  >
+    <IconsChart
+      class="h-5 w-5 fill-gray-400 transition group-data-[state=on]:fill-gray-600 dark:fill-neutral-600 dark:group-data-[state=on]:fill-neutral-400"
+    />
+  </Toggle>
+</template>
+
+<script lang="ts" setup>
+const globalStore = useGlobalStore();
+</script>

src/app/components/header/Logo.vue

@@ -0,0 +1,11 @@
+<template>
+  <NuxtLink to="/" class="mb-4 flex-grow self-start">
+    <h1 class="text-4xl font-medium dark:text-neutral-200">
+      <img
+        src="/logo.png"
+        width="32"
+        class="dark:bg mr-2 inline align-middle"
+      /><span class="align-middle">WireGuard</span>
+    </h1>
+  </NuxtLink>
+</template>

src/app/components/header/ThemeSwitch.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 transition hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+    :title="$t(`theme.${theme.preference}`)"
+    @click="toggleTheme"
+  >
+    <IconsSun v-if="theme.preference === 'light'" class="h-5 w-5" />
+    <IconsMoon
+      v-else-if="theme.preference === 'dark'"
+      class="h-5 w-5 text-neutral-400"
+    />
+    <IconsHalfMoon v-else class="h-5 w-5 fill-gray-600 dark:fill-neutral-400" />
+  </button>
+</template>
+
+<script lang="ts" setup>
+const theme = useTheme();
+
+function toggleTheme() {
+  const themeCycle = {
+    system: 'light',
+    light: 'dark',
+    dark: 'system',
+  } as const;
+
+  theme.preference = themeCycle[theme.preference];
+}
+</script>

src/app/components/header/Update.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    v-if="globalStore.updateAvailable && globalStore.latestRelease"
+    class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
+    :title="`v${globalStore.currentRelease} → v${globalStore.latestRelease.version}`"
+  >
+    <div class="container mx-auto flex flex-auto flex-row items-center">
+      <div class="flex-grow">
+        <p class="font-bold">{{ $t('updateAvailable') }}</p>
+        <p>{{ globalStore.latestRelease.changelog }}</p>
+      </div>
+
+      <a
+        :href="`https://github.com/wg-easy/wg-easy/releases/tag/${globalStore.latestRelease.version}`"
+        target="_blank"
+        class="font-sm float-right flex-shrink-0 rounded-md border-2 border-red-800 bg-white p-3 font-semibold text-red-800 transition-all hover:border-white hover:bg-red-800 hover:text-white dark:border-red-600 dark:bg-red-100 dark:text-red-600 dark:hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-red-100"
+      >
+        {{ $t('update') }} →
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const globalStore = useGlobalStore();
+globalStore.fetchRelease();
+</script>

src/app/layouts/default.vue

@@ -2,81 +2,21 @@
   <div>
     <header class="container mx-auto mt-4 max-w-3xl px-3 xs:mt-6 md:px-0">
       <div
+        class="mb-5"
         :class="
           hasOwnLogo
             ? 'flex justify-end'
             : 'flex flex-auto flex-col-reverse items-center gap-3 xxs:flex-row'
         "
       >
-        <NuxtLink to="/" class="mb-4 flex-grow self-start">
+        <HeaderLogo v-if="!hasOwnLogo" />
-          <h1
-            v-if="!hasOwnLogo"
-            class="text-4xl font-medium dark:text-neutral-200"
-          >
-            <img
-              src="/logo.png"
-              width="32"
-              class="dark:bg mr-2 inline align-middle"
-            /><span class="align-middle">WireGuard</span>
-          </h1>
-        </NuxtLink>
         <div class="flex grow-0 items-center gap-3 self-end xxs:self-center">
-          <!-- Dark / light theme -->
+          <HeaderThemeSwitch />
-          <button
+          <HeaderChartToggle />
-            class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 transition hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
-            :title="$t(`theme.${theme.preference}`)"
-            @click="toggleTheme"
-          >
-            <IconsSun v-if="theme.preference === 'light'" class="h-5 w-5" />
-            <IconsMoon
-              v-else-if="theme.preference === 'dark'"
-              class="h-5 w-5 text-neutral-400"
-            />
-            <IconsHalfMoon
-              v-else
-              class="h-5 w-5 fill-gray-600 dark:fill-neutral-400"
-            />
-          </button>
-          <!-- Show / hide charts -->
-          <label
-            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('toggleCharts')"
-          >
-            <input
-              v-model="uiShowCharts"
-              type="checkbox"
-              value=""
-              class="peer sr-only"
-              @change="toggleCharts"
-            />
-            <IconsChart
-              class="peer h-5 w-5 fill-gray-400 transition peer-checked:fill-gray-600 dark:fill-neutral-600 group-hover:dark:fill-neutral-500 peer-checked:dark:fill-neutral-400"
-            />
-          </label>
           <UiUserMenu v-if="loggedIn" />
         </div>
       </div>
-      <div class="mb-5 text-sm text-gray-400 dark:text-neutral-400" />
+      <HeaderUpdate class="mt-5" />
-      <div
-        v-if="globalStore.updateAvailable && globalStore.latestRelease"
-        class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
-        :title="`v${globalStore.currentRelease} → v${globalStore.latestRelease.version}`"
-      >
-        <div class="container mx-auto flex flex-auto flex-row items-center">
-          <div class="flex-grow">
-            <p class="font-bold">{{ $t('updateAvailable') }}</p>
-            <p>{{ globalStore.latestRelease.changelog }}</p>
-          </div>
-
-          <a
-            :href="`https://github.com/wg-easy/wg-easy/releases/tag/${globalStore.latestRelease.version}`"
-            target="_blank"
-            class="font-sm float-right flex-shrink-0 rounded-md border-2 border-red-800 bg-white p-3 font-semibold text-red-800 transition-all hover:border-white hover:bg-red-800 hover:text-white dark:border-red-600 dark:bg-red-100 dark:text-red-600 dark:hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-red-100"
-          >
-            {{ $t('update') }} →
-          </a>
-        </div>
-      </div>
     </header>
     <slot />
     <footer>
@@ -125,21 +65,4 @@ const hasOwnLogo = computed(
 const loggedIn = computed(
   () => route.path !== '/login' && route.path !== '/setup'
 );
-
-const theme = useTheme();
-const uiShowCharts = ref(getItem('uiShowCharts') === '1');
-
-function toggleTheme() {
-  const themeCycle = {
-    system: 'light',
-    light: 'dark',
-    dark: 'system',
-  } as const;
-
-  theme.preference = themeCycle[theme.preference];
-}
-
-function toggleCharts() {
-  setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
-}
 </script>

src/app/stores/global.ts

@@ -39,6 +39,11 @@ export const useGlobalStore = defineStore('Global', () => {
   }
 
   const uiShowCharts = ref(getItem('uiShowCharts') === '1');
+
+  function toggleCharts() {
+    setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
+  }
+
   const uiChartType = ref(getItem('uiChartType') ?? 'area');
 
   /**
@@ -60,6 +65,7 @@ export const useGlobalStore = defineStore('Global', () => {
     updateAvailable,
     fetchRelease,
     uiShowCharts,
+    toggleCharts,
     uiChartType,
     updateLang,
   };