From 0eff0a79ec7ddc5cf1f2b68206ca2701275f4863 Mon Sep 17 00:00:00 2001
From: Jeroen Nijhuis <jeroen.nijhuis@justeattakeaway.com>
Date: Thu, 28 Dec 2023 23:26:15 +0100
Subject: [PATCH] feat: basic settings screen, navigation refactor

---
 src/assets/icons/settings.svg              |   1 +
 src/components/Navigation.vue              | 116 ++++++++++++---------
 src/components/NavigationItem.vue          |  18 ++--
 src/components/settings/Navigation.vue     |   9 ++
 src/components/settings/NavigationItem.vue |  26 +++++
 src/components/ui/DataTable.vue            |   6 +-
 src/components/ui/separator/Separator.vue  |  15 +++
 src/components/ui/separator/index.ts       |   1 +
 src/components/ui/table/TableHead.vue      |  22 +++-
 src/components/ui/table/TableHeader.vue    |   4 +-
 src/router.ts                              |  22 ++++
 src/views/Settings.vue                     |  21 ++++
 src/views/settings/Contexts.vue            |   1 +
 src/views/settings/General.vue             |   3 +
 tailwind.config.js                         |   2 +
 15 files changed, 197 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/icons/settings.svg
 create mode 100644 src/components/settings/Navigation.vue
 create mode 100644 src/components/settings/NavigationItem.vue
 create mode 100644 src/components/ui/separator/Separator.vue
 create mode 100644 src/components/ui/separator/index.ts
 create mode 100644 src/views/Settings.vue
 create mode 100644 src/views/settings/Contexts.vue
 create mode 100644 src/views/settings/General.vue

diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
new file mode 100644
index 0000000..29a0c94
--- /dev/null
+++ b/src/assets/icons/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 11.9998C2 11.1353 2.1097 10.2964 2.31595 9.49631C3.40622 9.55283 4.48848 9.01015 5.0718 7.99982C5.65467 6.99025 5.58406 5.78271 4.99121 4.86701C6.18354 3.69529 7.66832 2.82022 9.32603 2.36133C9.8222 3.33385 10.8333 3.99982 12 3.99982C13.1667 3.99982 14.1778 3.33385 14.674 2.36133C16.3317 2.82022 17.8165 3.69529 19.0088 4.86701C18.4159 5.78271 18.3453 6.99025 18.9282 7.99982C19.5115 9.01015 20.5938 9.55283 21.6841 9.49631C21.8903 10.2964 22 11.1353 22 11.9998C22 12.8643 21.8903 13.7032 21.6841 14.5033C20.5938 14.4468 19.5115 14.9895 18.9282 15.9998C18.3453 17.0094 18.4159 18.2169 19.0088 19.1326C17.8165 20.3043 16.3317 21.1794 14.674 21.6383C14.1778 20.6658 13.1667 19.9998 12 19.9998C10.8333 19.9998 9.8222 20.6658 9.32603 21.6383C7.66832 21.1794 6.18354 20.3043 4.99121 19.1326C5.58406 18.2169 5.65467 17.0094 5.0718 15.9998C4.48848 14.9895 3.40622 14.4468 2.31595 14.5033C2.1097 13.7032 2 12.8643 2 11.9998ZM6.80385 14.9998C7.43395 16.0912 7.61458 17.3459 7.36818 18.5236C7.77597 18.8138 8.21005 19.0652 8.66489 19.2741C9.56176 18.4712 10.7392 17.9998 12 17.9998C13.2608 17.9998 14.4382 18.4712 15.3351 19.2741C15.7899 19.0652 16.224 18.8138 16.6318 18.5236C16.3854 17.3459 16.566 16.0912 17.1962 14.9998C17.8262 13.9085 18.8225 13.1248 19.9655 12.7493C19.9884 12.5015 20 12.2516 20 11.9998C20 11.7481 19.9884 11.4981 19.9655 11.2504C18.8225 10.8749 17.8262 10.0912 17.1962 8.99982C16.566 7.90845 16.3854 6.65378 16.6318 5.47605C16.224 5.18588 15.7899 4.93447 15.3351 4.72552C14.4382 5.52844 13.2608 5.99982 12 5.99982C10.7392 5.99982 9.56176 5.52844 8.66489 4.72552C8.21005 4.93447 7.77597 5.18588 7.36818 5.47605C7.61458 6.65378 7.43395 7.90845 6.80385 8.99982C6.17376 10.0912 5.17754 10.8749 4.03451 11.2504C4.01157 11.4981 4 11.7481 4 11.9998C4 12.2516 4.01157 12.5015 4.03451 12.7493C5.17754 13.1248 6.17376 13.9085 6.80385 14.9998ZM12 14.9998C10.3431 14.9998 9 13.6567 9 11.9998C9 10.343 10.3431 8.99982 12 8.99982C13.6569 8.99982 15 10.343 15 11.9998C15 13.6567 13.6569 14.9998 12 14.9998ZM12 12.9998C12.5523 12.9998 13 12.5521 13 11.9998C13 11.4475 12.5523 10.9998 12 10.9998C11.4477 10.9998 11 11.4475 11 11.9998C11 12.5521 11.4477 12.9998 12 12.9998Z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 083935a..2d6f403 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -2,63 +2,75 @@
 import ContextSwitcher from "./ContextSwitcher.vue";
 import NavigationGroup from "./NavigationGroup.vue";
 import NavigationItem from "./NavigationItem.vue";
+import { ScrollArea } from "@/components/ui/scroll-area";
 </script>
 
 <template>
-  <div class="flex-shrink-0 relative min-w-[200px] max-w-[200px]">
-    <div class="block w-full h-[20px]" data-tauri-drag-region></div>
-    <div class="flex flex-col p-2 pr-0">
-      <ContextSwitcher />
-      <NavigationGroup title="Workloads">
-        <NavigationItem icon="pods" title="Pods" :to="{ name: 'Pods' }" />
+  <div class="flex flex-col flex-shrink-0 relative min-w-[200px] max-w-[200px]">
+    <div class="absolute w-full h-[40px]" data-tauri-drag-region></div>
+    <div class="flex flex-col flex-grow min-h-screen max-h-screen p-2 pr-0">
+      <ContextSwitcher class="mt-[30px]" />
+      <div class="flex w-full flex-grow flex-shrink overflow-hidden">
+        <ScrollArea class="w-full mt-0 mb-0">
+          <NavigationGroup title="Workloads">
+            <NavigationItem icon="pods" title="Pods" :to="{ name: 'Pods' }" />
+            <NavigationItem
+              icon="deployments"
+              title="Deployments"
+              :to="{ name: 'Deployments' }"
+            />
+            <NavigationItem icon="jobs" title="Jobs" :to="{ name: 'Jobs' }" />
+            <NavigationItem
+              icon="cronjobs"
+              title="Cron Jobs"
+              :to="{ name: 'CronJobs' }"
+            />
+          </NavigationGroup>
+          <NavigationGroup title="Configuration">
+            <NavigationItem
+              icon="configmaps"
+              title="Config Maps"
+              :to="{ name: 'ConfigMaps' }"
+            />
+            <NavigationItem
+              icon="secrets"
+              title="Secrets"
+              :to="{ name: 'Secrets' }"
+            />
+          </NavigationGroup>
+          <NavigationGroup title="Network">
+            <NavigationItem
+              icon="services"
+              title="Services"
+              :to="{ name: 'Services' }"
+            />
+            <NavigationItem
+              icon="virtualservices"
+              title="Virtual Services"
+              :to="{ name: 'VirtualServices' }"
+            />
+            <NavigationItem
+              icon="ingresses"
+              title="Ingresses"
+              :to="{ name: 'Ingresses' }"
+            />
+          </NavigationGroup>
+          <NavigationGroup title="Storage">
+            <NavigationItem
+              icon="persistentvolumeclaims"
+              title="Persistent Volume Claims"
+              :to="{ name: 'PersistentVolumeClaims' }"
+            />
+          </NavigationGroup>
+        </ScrollArea>
+      </div>
+      <div class="flex-shrink-0 border-t -ml-2 pl-2 pt-2 mb-0">
         <NavigationItem
-          icon="deployments"
-          title="Deployments"
-          :to="{ name: 'Deployments' }"
+          icon="settings"
+          title="Settings"
+          :to="{ name: 'Settings' }"
         />
-        <NavigationItem icon="jobs" title="Jobs" :to="{ name: 'Jobs' }" />
-        <NavigationItem
-          icon="cronjobs"
-          title="Cron Jobs"
-          :to="{ name: 'CronJobs' }"
-        />
-      </NavigationGroup>
-      <NavigationGroup title="Configuration">
-        <NavigationItem
-          icon="configmaps"
-          title="Config Maps"
-          :to="{ name: 'ConfigMaps' }"
-        />
-        <NavigationItem
-          icon="secrets"
-          title="Secrets"
-          :to="{ name: 'Secrets' }"
-        />
-      </NavigationGroup>
-      <NavigationGroup title="Network">
-        <NavigationItem
-          icon="services"
-          title="Services"
-          :to="{ name: 'Services' }"
-        />
-        <NavigationItem
-          icon="virtualservices"
-          title="Virtual Services"
-          :to="{ name: 'VirtualServices' }"
-        />
-        <NavigationItem
-          icon="ingresses"
-          title="Ingresses"
-          :to="{ name: 'Ingresses' }"
-        />
-      </NavigationGroup>
-      <NavigationGroup title="Storage">
-        <NavigationItem
-          icon="persistentvolumeclaims"
-          title="Persistent Volume Claims"
-          :to="{ name: 'PersistentVolumeClaims' }"
-        />
-      </NavigationGroup>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/NavigationItem.vue b/src/components/NavigationItem.vue
index af2fc78..916d6a2 100644
--- a/src/components/NavigationItem.vue
+++ b/src/components/NavigationItem.vue
@@ -5,9 +5,6 @@ import { injectStrict } from "@/lib/utils";
 import { RegisterCommandStateKey } from "@/providers/CommandPaletteProvider";
 
 const router = useRouter();
-const active = computed(() => {
-  return router.currentRoute.value.name === props.to.name;
-});
 
 const props = defineProps<{
   icon: string;
@@ -28,15 +25,12 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div
-    :class="{
-      'bg-background border text-primary': active,
-      'border border-transparent': !active,
-    }"
-    class="flex items-center font-semibold rounded-l-lg border-r-0 px-2 py-1 text-[#7a7a7a] cursor-pointer transition-all hover:bg-background hover:text-primary"
-    @click="router.push(props.to)"
+  <router-link
+    :to="props.to"
+    active-class="bg-background border !border-border text-primary"
+    class="border border-transparent flex items-center font-semibold rounded-l-lg border-r-0 px-2 py-1 text-[#7a7a7a] cursor-pointer transition-all hover:bg-background hover:text-primary"
   >
     <NavigationItemIcon :name="props.icon" />
-    <span class="mx-3 truncate" :title="title">{{ title }}</span>
-  </div>
+    <span class="w-[135px] mx-3 truncate" :title="title">{{ title }}</span>
+  </router-link>
 </template>
diff --git a/src/components/settings/Navigation.vue b/src/components/settings/Navigation.vue
new file mode 100644
index 0000000..454341b
--- /dev/null
+++ b/src/components/settings/Navigation.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import NavigationItem from "@/components/settings/NavigationItem.vue";
+</script>
+<template>
+  <nav class="flex flex-col space-y-1">
+    <NavigationItem :to="{ name: 'SettingsGeneral' }" title="General" />
+    <NavigationItem :to="{ name: 'SettingsContexts' }" title="Contexts" />
+  </nav>
+</template>
diff --git a/src/components/settings/NavigationItem.vue b/src/components/settings/NavigationItem.vue
new file mode 100644
index 0000000..f5500ba
--- /dev/null
+++ b/src/components/settings/NavigationItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useRoute, RouteLocationRaw } from "vue-router";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const $route = useRoute();
+
+const props = defineProps<{
+  title: string;
+  to: RouteLocationRaw;
+}>();
+</script>
+<template>
+  <router-link :to="props.to" v-slot="{ isActive }">
+    <Button
+      :class="
+        cn(
+          'w-full text-left justify-start',
+          !isActive && 'bg-transparent hover:bg-muted'
+        )
+      "
+    >
+      <span>{{ title }}</span>
+    </Button>
+  </router-link>
+</template>
diff --git a/src/components/ui/DataTable.vue b/src/components/ui/DataTable.vue
index 206a8db..ca45b19 100644
--- a/src/components/ui/DataTable.vue
+++ b/src/components/ui/DataTable.vue
@@ -34,7 +34,11 @@ const table = useVueTable({
         v-for="headerGroup in table.getHeaderGroups()"
         :key="headerGroup.id"
       >
-        <TableHead v-for="header in headerGroup.headers" :key="header.id">
+        <TableHead
+          v-bind:enable-header-drag-region="true"
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+        >
           <FlexRender
             v-if="!header.isPlaceholder"
             :render="header.column.columnDef.header"
diff --git a/src/components/ui/separator/Separator.vue b/src/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..1e6b3f3
--- /dev/null
+++ b/src/components/ui/separator/Separator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: string }>()
+</script>
+
+<template>
+  <Separator
+    :class="[
+      cn('shrink-0 bg-secondary', props.class),
+      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+    ]"
+  />
+</template>
diff --git a/src/components/ui/separator/index.ts b/src/components/ui/separator/index.ts
new file mode 100644
index 0000000..2287bcb
--- /dev/null
+++ b/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/src/components/ui/table/TableHead.vue b/src/components/ui/table/TableHead.vue
index c552806..794a544 100644
--- a/src/components/ui/table/TableHead.vue
+++ b/src/components/ui/table/TableHead.vue
@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { withDefaults } from "vue";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: string }>()
+const props = withDefaults(
+  defineProps<{ class?: string; enableHeaderDragRegion: boolean }>(),
+  {
+    enableHeaderDragRegion: false,
+  }
+);
 </script>
 
 <template>
-  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
+  <th
+    :data-tauri-drag-region="
+      enableHeaderDragRegion ? enableHeaderDragRegion : null
+    "
+    :class="
+      cn(
+        'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class
+      )
+    "
+  >
     <slot />
   </th>
 </template>
diff --git a/src/components/ui/table/TableHeader.vue b/src/components/ui/table/TableHeader.vue
index 3af2117..4e5cdc4 100644
--- a/src/components/ui/table/TableHeader.vue
+++ b/src/components/ui/table/TableHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{ class?: string }>();
 </script>
 
 <template>
diff --git a/src/router.ts b/src/router.ts
index 46036ac..ebf2697 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,6 +3,28 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
+    redirect: "/pods",
+  },
+  {
+    path: "/settings",
+    name: "Settings",
+    redirect: "/settings/general",
+    component: () => import("./views/Settings.vue"),
+    children: [
+      {
+        path: "general",
+        name: "SettingsGeneral",
+        component: () => import("./views/settings/General.vue"),
+      },
+      {
+        path: "contexts",
+        name: "SettingsContexts",
+        component: () => import("./views/settings/Contexts.vue"),
+      },
+    ],
+  },
+  {
+    path: "/pods",
     name: "Pods",
     component: () => import("./views/Pods.vue"),
   },
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..8bb24bd
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Separator } from "@/components/ui/separator";
+import Navigation from "@/components/settings/Navigation.vue";
+</script>
+<template>
+  <div class="space-y-6 p-10 pb-16">
+    <div class="space-y-0.5">
+      <h2 class="text-2xl font-bold tracking-tight">Settings</h2>
+      <p class="text-muted-foreground">Fine-tune JET Pilot to your liking</p>
+    </div>
+    <Separator class="my-6" />
+    <div class="flex flex-row space-x-12 space-y-0">
+      <aside class="w-[150px]">
+        <Navigation />
+      </aside>
+      <div class="flex-1 lg:max-w-2xl">
+        <div class="space-y-6"><router-view /></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/settings/Contexts.vue b/src/views/settings/Contexts.vue
new file mode 100644
index 0000000..aeb0e78
--- /dev/null
+++ b/src/views/settings/Contexts.vue
@@ -0,0 +1 @@
+<template>Contexts</template>
diff --git a/src/views/settings/General.vue b/src/views/settings/General.vue
new file mode 100644
index 0000000..a7f15d3
--- /dev/null
+++ b/src/views/settings/General.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>General</div>
+</template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6fd7346..2a58b8a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,8 @@ const animate = require("tailwindcss-animate");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  important: true,
+
   darkMode: ["class"],
 
   content: [