refactor: ♻️ Initiate shadcn/ui refactor

app.vue

@@ -18,9 +18,9 @@
 import "~/styles/theme.css";
 import { convert } from "html-to-text";
 import "iconify-icon";
+import ConfirmationModal from "./components/modals/confirmation.vue";
 import NotificationsRenderer from "./components/notifications/notifications-renderer.vue";
 import { SettingIds } from "./settings";
-import ConfirmationModal from "./components/modals/confirmation.vue";
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());
 

components.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://shadcn-vue.com/schema.json",
+    "style": "default",
+    "typescript": true,
+    "tsConfigPath": ".nuxt/tsconfig.json",
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "styles/index.css",
+        "baseColor": "zinc",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "framework": "nuxt",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils"
+    }
+}

components/modals/confirmation.vue

@@ -48,12 +48,12 @@
 
 <script setup lang="ts">
 import { Dialog } from "@ark-ui/vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import {
     confirmModalService,
     confirmModalWithInputService,
 } from "./service.ts";
 import type { ConfirmModalOptions, ConfirmModalResult } from "./types.ts";
-import Button from "~/packages/ui/components/buttons/button.vue";
 
 const isOpen = ref(false);
 const modalOptions = ref<ConfirmModalOptions>({ message: "" });

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

nuxt.config.ts

@@ -8,6 +8,8 @@ export default defineNuxtConfig({
         "@vee-validate/nuxt",
         "nuxt-security",
         "@vite-pwa/nuxt",
+        "shadcn-nuxt",
+        "@nuxtjs/color-mode",
     ],
     vue: {
         compilerOptions: {
@@ -20,6 +22,9 @@ export default defineNuxtConfig({
     future: {
         compatibilityVersion: 4,
     },
+    shadcn: {
+        componentDir: "./components/ui",
+    },
     compatibilityDate: "2024-11-05",
     pwa: {
         manifest: {

package.json

@@ -31,6 +31,7 @@
     "dependencies": {
         "@ark-ui/vue": "^4.4.2",
         "@nuxt/fonts": "^0.10.2",
+        "@nuxtjs/color-mode": "3.5.2",
         "@tailwindcss/typography": "^0.5.15",
         "@vee-validate/nuxt": "^4.14.7",
         "@vee-validate/zod": "^4.14.7",
@@ -39,9 +40,12 @@
         "@vueuse/core": "^12.0.0",
         "@vueuse/nuxt": "^12.0.0",
         "c12": "^2.0.1",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "fastest-levenshtein": "^1.0.16",
         "html-to-text": "^9.0.5",
         "iconify-icon": "^2.1.0",
+        "lucide-vue-next": "^0.462.0",
         "magic-regexp": "^0.8.0",
         "mitt": "^3.0.1",
         "nanoid": "^5.0.9",
@@ -51,7 +55,11 @@
         "nuxt-shiki": "^0.3.0",
         "overlayscrollbars": "^2.10.1",
         "overlayscrollbars-vue": "^0.5.9",
+        "radix-vue": "^1.9.10",
+        "shadcn-nuxt": "0.11.3",
         "shiki": "^1.24.0",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
         "zod": "^3.23.8"

styles/index.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --ring: 240 4.9% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}

tailwind.config.ts

@@ -1,6 +1,7 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
 
 const themeVariables = (color: string) => ({
     50: `var(--theme-${color}-50)`,
@@ -17,14 +18,66 @@ const themeVariables = (color: string) => ({
 });
 
 export default (<Config>{
+    darkMode: "class",
+    safelist: ["dark"],
     theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
         extend: {
             colors: {
                 dark: themeVariables("dark"),
-                primary: themeVariables("primary"),
+                /* primary: themeVariables("primary"), */
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                xl: "calc(var(--radius) + 4px)",
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
             },
             animation: {
                 like: "like 1s ease-in-out",
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+                "collapsible-down": "collapsible-down 0.2s ease-in-out",
+                "collapsible-up": "collapsible-up 0.2s ease-in-out",
             },
             keyframes: {
                 like: {
@@ -38,9 +91,25 @@ export default (<Config>{
                         transform: "scale(1) rotate(360deg)",
                     },
                 },
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+                "collapsible-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-collapsible-content-height)" },
+                },
+                "collapsible-up": {
+                    from: { height: "var(--radix-collapsible-content-height)" },
+                    to: { height: "0" },
                 },
             },
         },
-    plugins: [forms, typography],
+    },
+    plugins: [forms, typography, animate],
     content: ["packages/**/*.{vue,js,ts}"],
 });