feat: use new theme

ReaJason · ReaJason · commit 006b0d664953 · 2025-05-31T00:43:02.000+08:00
diff --git a/web/bun.lockb b/web/bun.lockb
diff --git a/web/components.json b/web/components.json
@@ -4,11 +4,10 @@
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/index.css",
     "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
+    "cssVariables": true
   },
   "aliases": {
     "components": "@/components",
diff --git a/web/package.json b/web/package.json
@@ -15,14 +15,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.28",
     "@types/react": "^19.1.6",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^19.1.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.5.0",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-bundle-visualizer": "^1.2.1"
@@ -34,7 +34,6 @@
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-context-menu": "^2.2.15",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -48,40 +47,34 @@
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/vite": "^4.1.7",
-    "@tanstack/react-query": "^5.77.2",
+    "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/react-query": "^5.79.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
     "i18next": "^25.2.1",
-    "input-otp": "^1.4.2",
     "lucide-react": "^0.511.0",
     "react": "^19.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-day-picker": "9.7.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
     "react-i18next": "^15.5.2",
-    "react-resizable-panels": "^3.0.2",
     "react-router": "^7.6.1",
     "react-router-dom": "^7.6.1",
     "react-syntax-highlighter": "^15.6.1",
-    "recharts": "^2.15.3",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "yup": "^1.6.1"
+    "tw-animate-css": "^1.3.2",
+    "yup": "^1.6.1",
+    "zod": "^3.25.42"
   },
   "trustedDependencies": ["@biomejs/biome"]
 }
diff --git a/web/src/components/main-config-card.tsx b/web/src/components/main-config-card.tsx
@@ -332,7 +332,7 @@ export function MainConfigCard({
         className="w-full"
       >
         <div className="relative bg-muted rounded-lg">
-          <TabsList className="flex flex-wrap gap-1 w-full bg-transparent tabs-list">
+          <TabsList className="flex flex-wrap gap-1 w-full bg-transparent overflow-x-auto tabs-list">
             {shellTools.map((shellTool) => (
               <TabsTrigger
                 key={shellTool}
diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
diff --git a/web/src/components/ui/label.tsx b/web/src/components/ui/label.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
diff --git a/web/src/components/ui/radio-group.tsx b/web/src/components/ui/radio-group.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
@@ -13,7 +11,7 @@ function Separator({
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot="separator-root"
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(
diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 
diff --git a/web/src/config.ts b/web/src/config.ts
@@ -60,7 +60,6 @@ const createEnv = () => {
     }
     return acc;
   }, {});
-  console.log(envVars);
   const parsedEnv = safeParseYup<EnvSchema>(EnvSchema, envVars);
   if (!parsedEnv.success) {
     throw new Error(
diff --git a/web/src/index.css b/web/src/index.css
@@ -1,6 +1,9 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-@plugin "tailwindcss-animate";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -10,58 +13,72 @@
 }
 
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(240 10% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(240 10% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(240 10% 3.9%);
-  --primary: hsl(240 5.9% 10%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(240 4.8% 95.9%);
-  --secondary-foreground: hsl(240 5.9% 10%);
-  --muted: hsl(240 4.8% 95.9%);
-  --muted-foreground: hsl(240 3.8% 46.1%);
-  --accent: hsl(240 4.8% 95.9%);
-  --accent-foreground: hsl(240 5.9% 10%);
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(240 5.9% 90%);
-  --input: hsl(240 5.9% 90%);
-  --ring: hsl(240 10% 3.9%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-  --radius: 0.3rem;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: hsl(240 10% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(240 10% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(240 10% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(240 5.9% 10%);
-  --secondary: hsl(240 3.7% 15.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(240 3.7% 15.9%);
-  --muted-foreground: hsl(240 5% 64.9%);
-  --accent: hsl(240 3.7% 15.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 62.8% 30.6%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(240 3.7% 15.9%);
-  --input: hsl(240 3.7% 15.9%);
-  --ring: hsl(240 4.9% 83.9%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
 @theme inline {
@@ -93,6 +110,14 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
@@ -104,22 +129,7 @@
   }
 }
 
-.tabs-list-container {
-  @apply relative;
-
-  /* Add fade effect for overflow indication */
-  &::after {
-    content: "";
-    @apply absolute right-0 top-0 h-full w-8 
-           bg-gradient-to-l from-background to-transparent
-           pointer-events-none
-           md:hidden;
-  }
-}
-
-/* Custom scrollbar for tabs list */
 .tabs-list {
-  @apply pb-0.5 overflow-x-auto;
   scrollbar-width: thin;
 }
 
@@ -134,8 +144,3 @@
 .tabs-list::-webkit-scrollbar-thumb {
   @apply bg-muted-foreground/20 hover:bg-muted-foreground/30 rounded-full;
 }
-
-/* Ensure tab triggers have consistent sizing */
-.tab-trigger {
-  @apply whitespace-nowrap text-sm;
-}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -332,7 +332,7 @@ export function MainConfigCard({`
`332`	`332`	`className="w-full"`
`333`	`333`	`>`
`334`	`334`	`<div className="relative bg-muted rounded-lg">`
`335`		`- <TabsList className="flex flex-wrap gap-1 w-full bg-transparent tabs-list">`
	`335`	`+ <TabsList className="flex flex-wrap gap-1 w-full bg-transparent overflow-x-auto tabs-list">`
`336`	`336`	`{shellTools.map((shellTool) => (`
`337`	`337`	`<TabsTrigger`
`338`	`338`	`key={shellTool}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-"use client";`
`2`		`-`
`3`	`1`	`import * as React from "react";`
`4`	`2`	`import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";`
`5`	`3`