From 3f10d6707aa16b1c99bee5a476f26fc66ac62902 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Sun, 12 May 2024 22:53:31 -0400
Subject: [PATCH] Implement UI for developer tab

---
 .../settings/Developer/Installation.vue       | 178 ++++++++++++++++++
 .../components/settings/DeveloperTab.vue      |  22 ++-
 .../ui/alert-dialog/AlertDialog.vue           |  14 ++
 .../ui/alert-dialog/AlertDialogAction.vue     |  20 ++
 .../ui/alert-dialog/AlertDialogCancel.vue     |  20 ++
 .../ui/alert-dialog/AlertDialogContent.vue    |  42 +++++
 .../alert-dialog/AlertDialogDescription.vue   |  25 +++
 .../ui/alert-dialog/AlertDialogFooter.vue     |  21 +++
 .../ui/alert-dialog/AlertDialogHeader.vue     |  16 ++
 .../ui/alert-dialog/AlertDialogTitle.vue      |  22 +++
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  11 ++
 .../components/ui/alert-dialog/index.ts       |   9 +
 apps/desktop/components/ui/alert/Alert.vue    |  16 ++
 .../components/ui/alert/AlertDescription.vue  |  14 ++
 .../components/ui/alert/AlertTitle.vue        |  14 ++
 apps/desktop/components/ui/alert/index.ts     |  23 +++
 .../components/ui/hover-card/HoverCard.vue    |  14 ++
 .../ui/hover-card/HoverCardContent.vue        |  41 ++++
 .../ui/hover-card/HoverCardTrigger.vue        |  11 ++
 .../desktop/components/ui/hover-card/index.ts |   3 +
 .../ui/navigation-menu/NavigationMenu.vue     |  33 ++++
 .../navigation-menu/NavigationMenuContent.vue |  34 ++++
 .../NavigationMenuIndicator.vue               |  24 +++
 .../ui/navigation-menu/NavigationMenuItem.vue |  11 ++
 .../ui/navigation-menu/NavigationMenuLink.vue |  19 ++
 .../ui/navigation-menu/NavigationMenuList.vue |  29 +++
 .../navigation-menu/NavigationMenuTrigger.vue |  34 ++++
 .../NavigationMenuViewport.vue                |  33 ++++
 .../components/ui/navigation-menu/index.ts    |  12 ++
 apps/desktop/package.json                     |   1 +
 apps/desktop/pages/settings.vue               |  20 +-
 apps/desktop/tailwind.config.js               |   2 +-
 pnpm-lock.yaml                                |   3 +
 33 files changed, 776 insertions(+), 15 deletions(-)
 create mode 100644 apps/desktop/components/settings/Developer/Installation.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 apps/desktop/components/ui/alert-dialog/index.ts
 create mode 100644 apps/desktop/components/ui/alert/Alert.vue
 create mode 100644 apps/desktop/components/ui/alert/AlertDescription.vue
 create mode 100644 apps/desktop/components/ui/alert/AlertTitle.vue
 create mode 100644 apps/desktop/components/ui/alert/index.ts
 create mode 100644 apps/desktop/components/ui/hover-card/HoverCard.vue
 create mode 100644 apps/desktop/components/ui/hover-card/HoverCardContent.vue
 create mode 100644 apps/desktop/components/ui/hover-card/HoverCardTrigger.vue
 create mode 100644 apps/desktop/components/ui/hover-card/index.ts
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenu.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuContent.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuIndicator.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuItem.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuLink.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuList.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuTrigger.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/NavigationMenuViewport.vue
 create mode 100644 apps/desktop/components/ui/navigation-menu/index.ts

diff --git a/apps/desktop/components/settings/Developer/Installation.vue b/apps/desktop/components/settings/Developer/Installation.vue
new file mode 100644
index 00000000..a28a6448
--- /dev/null
+++ b/apps/desktop/components/settings/Developer/Installation.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { FolderCogIcon, AlertCircle, InfoIcon, ExternalLinkIcon } from "lucide-vue-next";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { open } from "@tauri-apps/api/dialog";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+async function pickProject() {
+  const selected = await open({
+    directory: true,
+    multiple: false,
+  });
+  console.log(selected);
+}
+</script>
+
+<template>
+  <div :class="cn('h-full', props.class)">
+    <div class="container grid w-full max-w-2xl items-center gap-1.5">
+      <Alert variant="destructive" class="dark:text-red-600 dark:border-red-600">
+        <AlertCircle class="w-4 h-4" />
+        <AlertTitle>Warning: Powerful Extensions, Potential Security Risks</AlertTitle>
+        <AlertDescription>
+          <AlertDialog>
+            <AlertDialogTrigger as-child>
+              <button class="float-right">
+                <InfoIcon class="inline w-5 h-5" />
+              </button>
+            </AlertDialogTrigger>
+            <AlertDialogContent class="sm:max-w-[40em] overflow-auto max-h-[30em]">
+              <AlertDialogHeader>
+                <AlertDialogTitle class="text-red-600"
+                  >Warning: Powerful Extensions, Potential Security Risks</AlertDialogTitle
+                >
+                <AlertDialogDescription>Be Careful Installing Any Extension Here</AlertDialogDescription>
+              </AlertDialogHeader>
+              <article class="prose dark:prose-invert">
+                <p>
+                  This app allows you to install extensions from external sources. While these extensions can provide
+                  advanced features and improve your experience (UX) and developer experience (DX), they also carry
+                  significant security risks.
+                </p>
+
+                <h3>Understanding the Risks:</h3>
+                <ul>
+                  <li>
+                    <strong>File System and System API Access:</strong> Extensions can access your files and system
+                    APIs, making them powerful but potentially dangerous.
+                  </li>
+                  <li>
+                    <strong>Limited Review Process:</strong> Extensions from the app store can be reviewed by public,
+                    but there's still a chance of encountering security vulnerabilities.
+                  </li>
+                </ul>
+
+                <h3>Developer Settings and Untrusted Sources:</h3>
+                <ul>
+                  <li>
+                    <strong>Developer settings</strong> allow installing extensions from anywhere, like your local
+                    machine or remote URLs. This is intended only for development purposes or when you absolutely trust
+                    the source.
+                  </li>
+                  <li>
+                    <strong>Loading extensions from remote URLs</strong> grants them access to your system, similar to
+                    giving a website that level of control. Since the author can update the code at any time, malicious
+                    extensions could steal information or take control of your system.
+                    <strong>Remote URLs should only be used for development.</strong>
+                  </li>
+                </ul>
+
+                <h3>Stay Safe: Trust Matters</h3>
+                <p>
+                  Only install extensions from reputable sources that you trust (e.g. extensions written by yourself or
+                  your organization). By being cautious, you can maximize the benefits and minimize the risks associated
+                  with external extensions.
+                </p>
+              </article>
+              <AlertDialogFooter>
+                <AlertDialogAction>Understood</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </AlertDescription>
+      </Alert>
+
+      <p class="text-xs">
+        There are 3 options to install an extension in developer mode. Either load it from your local folder, download
+        from URL or load from a remote URL directly.
+      </p>
+      <Label class="text-xl" for="pick">Pick Project Folder to Install</Label>
+      <div class="flex justify-center">
+        <Card class="w-96 h-36">
+          <div class="flex justify-center items-center h-full cursor-pointer" @click="pickProject">
+            <div class="flex flex-col items-center">
+              <FolderCogIcon class="w-10 h-10" />
+              <small class="text-xs select-none">Click or Drag and Drop</small>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Label for="url" class="text-xl">
+        Download URL
+        <Popover>
+          <PopoverTrigger as-child>
+            <button class="-translate-y-0.5"><InfoIcon class="inline w-4 cursor-pointer" /></button>
+          </PopoverTrigger>
+          <PopoverContent class="w-96">
+            <TauriLink class="block" href="https://jarvis.huakun.tech/design/extensions/installation/">
+              Read Docs For More Details <ExternalLinkIcon class="inline w-4 -translate-y-0.5" />
+            </TauriLink>
+            <div class="text-xs">
+              It can be an npm package URL like
+              <TauriLink class="block" href="https://registry.npmjs.org/nest-neo4j/latest"
+                >https://registry.npmjs.org/nest-neo4j/latest</TauriLink
+              >
+              or a tarball url like
+              <TauriLink class="block" href="https://registry.npmjs.org/nest-neo4j/-/nest-neo4j-0.3.1.tgz"
+                >https://registry.npmjs.org/nest-neo4j/-/nest-neo4j-0.3.1.tgz</TauriLink
+              >
+            </div>
+          </PopoverContent>
+        </Popover>
+      </Label>
+      <div class="flex w-full items-center gap-1.5">
+        <Input id="url" type="text" placeholder="Download URL" />
+        <Button type="submit">Download</Button>
+      </div>
+
+      <Label for="url" class="text-xl">
+        Remote URL
+        <Popover>
+          <PopoverTrigger as-child>
+            <button class="-translate-y-0.5"><InfoIcon class="inline w-4 cursor-pointer" /></button>
+          </PopoverTrigger>
+          <PopoverContent class="w-96">
+            <TauriLink class="block" href="https://jarvis.huakun.tech/design/extensions/installation/">
+              Read Docs For More Details <ExternalLinkIcon class="inline w-4 -translate-y-0.5" />
+            </TauriLink>
+            <div class="text-xs">
+              It can be an npm package URL like
+              <TauriLink class="block" href="https://registry.npmjs.org/nest-neo4j/latest"
+                >https://registry.npmjs.org/nest-neo4j/latest</TauriLink
+              >
+              or a tarball url like
+              <TauriLink class="block" href="https://registry.npmjs.org/nest-neo4j/-/nest-neo4j-0.3.1.tgz"
+                >https://registry.npmjs.org/nest-neo4j/-/nest-neo4j-0.3.1.tgz</TauriLink
+              >
+            </div>
+          </PopoverContent>
+        </Popover>
+      </Label>
+      <div class="flex w-full items-center gap-1.5">
+        <Input id="url" type="text" placeholder="Remote URL" />
+        <Button type="submit">Install</Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/desktop/components/settings/DeveloperTab.vue b/apps/desktop/components/settings/DeveloperTab.vue
index 1084548f..0ea1134e 100644
--- a/apps/desktop/components/settings/DeveloperTab.vue
+++ b/apps/desktop/components/settings/DeveloperTab.vue
@@ -1,6 +1,24 @@
 <script setup lang="ts">
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
 
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
 </script>
+
 <template>
-    
-</template>
\ No newline at end of file
+  <div class="py-2 max-h-full overflow-auto flex">
+    <ScrollArea class="max-h-full w-48 rounded-md border">
+      <div class="p-4">
+        <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+
+        <div v-for="tag in tags" :key="tag">
+          <div class="text-sm">
+            {{ tag }}
+          </div>
+          <Separator class="my-2" />
+        </div>
+      </div>
+    </ScrollArea>
+    <SettingsDeveloperInstallation class="grow" />
+  </div>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialog.vue b/apps/desktop/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..8fb30de8
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogAction.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..092d6cd9
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogCancel.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..9935c064
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogContent.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..afc76e58
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogDescription.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..9682cbb1
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogFooter.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..55d0a0eb
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogHeader.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..c61c4495
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogTitle.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..50c583d0
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/AlertDialogTrigger.vue b/apps/desktop/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..4f5e2fd0
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/apps/desktop/components/ui/alert-dialog/index.ts b/apps/desktop/components/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..91d138ae
--- /dev/null
+++ b/apps/desktop/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
diff --git a/apps/desktop/components/ui/alert/Alert.vue b/apps/desktop/components/ui/alert/Alert.vue
new file mode 100644
index 00000000..b3502d52
--- /dev/null
+++ b/apps/desktop/components/ui/alert/Alert.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/apps/desktop/components/ui/alert/AlertDescription.vue b/apps/desktop/components/ui/alert/AlertDescription.vue
new file mode 100644
index 00000000..2971a877
--- /dev/null
+++ b/apps/desktop/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/desktop/components/ui/alert/AlertTitle.vue b/apps/desktop/components/ui/alert/AlertTitle.vue
new file mode 100644
index 00000000..e28dd37e
--- /dev/null
+++ b/apps/desktop/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/apps/desktop/components/ui/alert/index.ts b/apps/desktop/components/ui/alert/index.ts
new file mode 100644
index 00000000..1ef58723
--- /dev/null
+++ b/apps/desktop/components/ui/alert/index.ts
@@ -0,0 +1,23 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/apps/desktop/components/ui/hover-card/HoverCard.vue b/apps/desktop/components/ui/hover-card/HoverCard.vue
new file mode 100644
index 00000000..f17c9d1f
--- /dev/null
+++ b/apps/desktop/components/ui/hover-card/HoverCard.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/apps/desktop/components/ui/hover-card/HoverCardContent.vue b/apps/desktop/components/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 00000000..8affac42
--- /dev/null
+++ b/apps/desktop/components/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  HoverCardContent,
+  type HoverCardContentProps,
+  HoverCardPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/apps/desktop/components/ui/hover-card/HoverCardTrigger.vue b/apps/desktop/components/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 00000000..3e300b95
--- /dev/null
+++ b/apps/desktop/components/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/apps/desktop/components/ui/hover-card/index.ts b/apps/desktop/components/ui/hover-card/index.ts
new file mode 100644
index 00000000..c7bfd32d
--- /dev/null
+++ b/apps/desktop/components/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenu.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 00000000..080d3bb1
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuRoot,
+  type NavigationMenuRootEmits,
+  type NavigationMenuRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuContent.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 00000000..03d8fbbc
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuContent,
+  type NavigationMenuContentEmits,
+  type NavigationMenuContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 00000000..1d53291e
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuItem.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 00000000..50e1565f
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuLink.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 00000000..30c91c61
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  NavigationMenuLink,
+  type NavigationMenuLinkEmits,
+  type NavigationMenuLinkProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuList.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 00000000..354365c5
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 00000000..3c37c3d6
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuTrigger,
+  type NavigationMenuTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { navigationMenuTriggerStyle } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDownIcon
+      class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/NavigationMenuViewport.vue b/apps/desktop/components/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 00000000..db240ccc
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuViewport,
+  type NavigationMenuViewportProps,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/apps/desktop/components/ui/navigation-menu/index.ts b/apps/desktop/components/ui/navigation-menu/index.ts
new file mode 100644
index 00000000..70d4443b
--- /dev/null
+++ b/apps/desktop/components/ui/navigation-menu/index.ts
@@ -0,0 +1,12 @@
+import { cva } from 'class-variance-authority'
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+)
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 4d0c7190..1a67e772 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -40,6 +40,7 @@
     "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/tailwindcss": "^6.12.0",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@tauri-apps/cli": "^1.5.6",
     "typescript": "^5.0.0"
   }
diff --git a/apps/desktop/pages/settings.vue b/apps/desktop/pages/settings.vue
index d761af6a..9e8d3cc1 100644
--- a/apps/desktop/pages/settings.vue
+++ b/apps/desktop/pages/settings.vue
@@ -1,27 +1,19 @@
 <script setup lang="ts">
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  CogIcon,
-  InfoIcon,
-  UserRoundIcon,
-  SquareTerminalIcon,
-} from "lucide-vue-next";
+import { CogIcon, InfoIcon, UserRoundIcon, SquareTerminalIcon } from "lucide-vue-next";
 import { Icon } from "@iconify/vue";
 </script>
 
 <template>
   <NuxtLayout>
     <Tabs default-value="general" class="w-full h-full flex flex-col px-4">
-      <TabsList class="grid w-full grid-cols-5">
+      <TabsList class="grid w-full grid-cols-5 select-none">
         <TabsTrigger value="general">
           <CogIcon class="mr-2 h-5 w-5" />
           General
         </TabsTrigger>
         <TabsTrigger value="extensions">
-          <Icon
-            icon="fluent:developer-board-lightning-20-regular"
-            class="mr-2 h-5 w-5"
-          />
+          <Icon icon="fluent:developer-board-lightning-20-regular" class="mr-2 h-5 w-5" />
           Extensions
         </TabsTrigger>
         <TabsTrigger value="account">
@@ -39,7 +31,11 @@ import { Icon } from "@iconify/vue";
       </TabsList>
       <TabsContent value="general" class="grow"><SettingsGeneralTab /></TabsContent>
       <TabsContent value="extensions"><SettingsExtensionsTab /></TabsContent>
-      <TabsContent value="developer"><SettingsDeveloperTab /></TabsContent>
+      <TabsContent value="developer" class="grow min-h-0">
+        <!-- <div class="overflow-auto flex"> -->
+          <SettingsDeveloperTab />
+        <!-- </div> -->
+      </TabsContent>
       <TabsContent value="account"></TabsContent>
       <TabsContent value="about" class="grow">
         <SettingsAboutTab class="" />
diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js
index 37013bf3..c5e5ddfe 100644
--- a/apps/desktop/tailwind.config.js
+++ b/apps/desktop/tailwind.config.js
@@ -82,5 +82,5 @@ module.exports = {
       },
     },
   },
-  plugins: [animate],
+  plugins: [animate, require("@tailwindcss/typography")],
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b734687..a0edaf29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,6 +102,9 @@ importers:
       '@pinia-plugin-persistedstate/nuxt':
         specifier: ^1.2.0
         version: 1.2.0(@pinia/nuxt@0.5.1)(pinia@2.1.7)
+      '@tailwindcss/typography':
+        specifier: ^0.5.13
+        version: 0.5.13(tailwindcss@3.4.3)
       '@tauri-apps/cli':
         specifier: ^1.5.6
         version: 1.5.13