style: rollback tailwindcss to v3 for temp fix

apps/webui/package.json

@@ -16,13 +16,15 @@
     "@kobalte/core": "^0.13.9",
     "@kobalte/tailwindcss": "^0.9.0",
     "@solid-primitives/refs": "^1.1.0",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tanstack/solid-router": "^1.112.2",
     "chart.js": "^4.4.8",
     "cmdk-solid": "^1.1.2",
     "embla-carousel-solid": "^8.5.2",
+    "lucide-solid": "^0.477.0",
     "solid-js": "^1.9.5",
     "solid-sonner": "^0.2.8",
-    "tailwindcss": "3.4.17"
+    "tailwindcss": "^3"
   },
   "devDependencies": {
     "@rsbuild/plugin-solid": "^1.0.5",

apps/webui/postcss.config.mjs

@@ -1,5 +1,5 @@
 export default {
     plugins: {
-        tailwindcss: {},
+        'tailwindcss': {},
     },
 };

apps/webui/src/app.css

@@ -93,6 +93,23 @@
 
     --radius: 0.5rem;
   }
+
+  /* custom start */
+  ::-webkit-scrollbar {
+    width: 16px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    border: 4px solid transparent;
+    background-clip: content-box;
+    @apply bg-accent;
+  }
+
+  ::-webkit-scrollbar-corner {
+    display: none;
+  }
+  /* custom end */
 }
 
 @layer base {

apps/webui/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,174 @@
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  ChartPie,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map as LucideMap,
+  Settings2,
+  SquareTerminal,
+} from 'lucide-solid';
+import type { ComponentProps } from 'solid-js';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from '~/components/ui/sidebar';
+import { NavMain } from './nav-main';
+import { NavProjects } from './nav-projects';
+import { NavUser } from './nav-user';
+import { TeamSwitcher } from './team-switcher';
+// This is sample data.
+
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  teams: [
+    {
+      name: 'Acme Inc',
+      logo: GalleryVerticalEnd,
+      plan: 'Enterprise',
+    },
+    {
+      name: 'Acme Corp.',
+      logo: AudioWaveform,
+      plan: 'Startup',
+    },
+    {
+      name: 'Evil Corp.',
+      logo: Command,
+      plan: 'Free',
+    },
+  ],
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: 'History',
+          url: '#',
+        },
+        {
+          title: 'Starred',
+          url: '#',
+        },
+        {
+          title: 'Settings',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: Bot,
+      items: [
+        {
+          title: 'Genesis',
+          url: '#',
+        },
+        {
+          title: 'Explorer',
+          url: '#',
+        },
+        {
+          title: 'Quantum',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpen,
+      items: [
+        {
+          title: 'Introduction',
+          url: '#',
+        },
+        {
+          title: 'Get Started',
+          url: '#',
+        },
+        {
+          title: 'Tutorials',
+          url: '#',
+        },
+        {
+          title: 'Changelog',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2,
+      items: [
+        {
+          title: 'General',
+          url: '#',
+        },
+        {
+          title: 'Team',
+          url: '#',
+        },
+        {
+          title: 'Billing',
+          url: '#',
+        },
+        {
+          title: 'Limits',
+          url: '#',
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: Frame,
+    },
+    {
+      name: 'Sales & Marketing',
+      url: '#',
+      icon: ChartPie,
+    },
+    {
+      name: 'Travel',
+      url: '#',
+      icon: LucideMap,
+    },
+  ],
+};
+
+type AppSidebarRootProps = Omit<ComponentProps<typeof Sidebar>, 'collapsible'>;
+
+export const AppSidebar = (props: AppSidebarRootProps) => {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+};

apps/webui/src/components/layout/nav-main.tsx

@@ -0,0 +1,71 @@
+import { ChevronRight, type LucideIcon } from 'lucide-solid';
+import { For } from 'solid-js';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/components/ui/collapsible';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '~/components/ui/sidebar';
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={items}>
+          {(item) => (
+            <Collapsible
+              as={SidebarMenuItem}
+              defaultOpen={item.isActive}
+              class="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger as={SidebarMenuButton} tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    <For each={item.items || []}>
+                      {(subItem) => (
+                        <SidebarMenuSubItem>
+                          <SidebarMenuSubButton as={'a'} href={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      )}
+                    </For>
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          )}
+        </For>
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

apps/webui/src/components/layout/nav-projects.tsx

@@ -0,0 +1,79 @@
+import {
+  Folder,
+  Forward,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-solid';
+import { For } from 'solid-js';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '~/components/ui/sidebar';
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string;
+    url: string;
+    icon: LucideIcon;
+  }[];
+}) {
+  return (
+    <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        <For each={projects}>
+          {(item) => (
+            <SidebarMenuItem>
+              <SidebarMenuButton as="a" href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </SidebarMenuButton>
+              <DropdownMenu>
+                <DropdownMenuTrigger as={SidebarMenuAction} showOnHover>
+                  <MoreHorizontal />
+                  <span class="sr-only">More</span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent class="w-48 rounded-lg">
+                  <DropdownMenuItem>
+                    <Folder class="text-muted-foreground" />
+                    <span>View Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Forward class="text-muted-foreground" />
+                    <span>Share Project</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <Trash2 class="text-muted-foreground" />
+                    <span>Delete Project</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          )}
+        </For>
+        <SidebarMenuItem>
+          <SidebarMenuButton class="text-sidebar-foreground/70">
+            <MoreHorizontal class="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

apps/webui/src/components/layout/nav-user.tsx

@@ -0,0 +1,106 @@
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-solid';
+
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '~/components/ui/sidebar';
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            as={SidebarMenuButton}
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage src={user.avatar} alt={user.name} />
+              <AvatarFallback class="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{user.name}</span>
+              <span class="truncate text-xs">{user.email}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar class="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback class="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{user.name}</span>
+                  <span class="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

apps/webui/src/components/layout/team-switcher.tsx

@@ -0,0 +1,79 @@
+import { ChevronsUpDown, type LucideIcon, Plus } from 'lucide-solid';
+import { For, createSignal } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '~/components/ui/sidebar';
+
+export function TeamSwitcher(props: {
+  teams: {
+    name: string;
+    logo: LucideIcon;
+    plan: string;
+  }[];
+}) {
+  const [activeTeam, setActiveTeam] = createSignal(props.teams[0]);
+
+  const logo = activeTeam().logo;
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            as={SidebarMenuButton}
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <Dynamic component={logo} class="size-4" />
+            </div>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{activeTeam().name}</span>
+              <span class="truncate text-xs">{activeTeam().plan}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg">
+            <DropdownMenuLabel class="text-muted-foreground text-xs">
+              Teams
+            </DropdownMenuLabel>
+            <For each={props.teams}>
+              {(team, index) => (
+                <DropdownMenuItem
+                  onClick={() => setActiveTeam(team)}
+                  class="gap-2 p-2"
+                >
+                  <div class="flex size-6 items-center justify-center rounded-sm border">
+                    <Dynamic component={team.logo} class="size-4 shrink-0" />
+                  </div>
+                  {team.name}
+                  <DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
+                </DropdownMenuItem>
+              )}
+            </For>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem class="gap-2 p-2">
+              <div class="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus class="size-4" />
+              </div>
+              <div class="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

apps/webui/src/main.tsx

@@ -1,3 +1,8 @@
+import {
+  ColorModeProvider,
+  ColorModeScript,
+  createLocalStorageManager,
+} from '@kobalte/core';
 import { RouterProvider, createRouter } from '@tanstack/solid-router';
 import { render } from 'solid-js/web';
 import './app.css';
@@ -23,6 +28,18 @@ declare module '@tanstack/solid-router' {
 // Render the app
 const rootElement = document.getElementById('root');
 
+const App = () => {
+  const storageManager = createLocalStorageManager('vite-ui-theme');
+  return (
+    <>
+      <ColorModeScript storageType={storageManager.type} />
+      <ColorModeProvider storageManager={storageManager}>
+        <RouterProvider router={router} />
+      </ColorModeProvider>
+    </>
+  );
+};
+
 if (rootElement && !rootElement.innerHTML) {
-  render(() => <RouterProvider router={router} />, rootElement);
+  render(() => <App />, rootElement);
 }

apps/webui/src/routes/__root.tsx

@@ -1,16 +1,16 @@
-import { Link, Outlet, createRootRoute } from '@tanstack/solid-router';
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuTrigger,
-} from '~/components/ui/navigation-menu';
+import { Outlet, createRootRoute } from '@tanstack/solid-router';
+// import {
+//   NavigationMenu,
+//   NavigationMenuItem,
+//   NavigationMenuLink,
+//   NavigationMenuTrigger,
+// } from '~/components/ui/navigation-menu';
 
 export const Route = createRootRoute({
   component: () => {
     return (
       <>
-        <div class="flex space-y-4">
+        {/* <div class="sticky inset-x-0 top-0 isolate z-10 flex shrink-0 items-center gap-2 border-b bg-background">
           <NavigationMenu orientation="horizontal">
             <NavigationMenuItem>
               <NavigationMenuTrigger>
@@ -25,8 +25,7 @@ export const Route = createRootRoute({
               </NavigationMenuLink>
             </NavigationMenuItem>
           </NavigationMenu>
-        </div>
-        <hr />
+        </div> */}
         <Outlet />
       </>
     );

apps/webui/src/routes/index.tsx

@@ -1,13 +1,56 @@
-import { createFileRoute } from '@tanstack/solid-router'
+import { createFileRoute } from '@tanstack/solid-router';
+import { AppSidebar } from '~/components/layout/app-sidebar';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '~/components/ui/breadcrumb';
+import { Separator } from '~/components/ui/separator';
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '~/components/ui/sidebar';
 
 export const Route = createFileRoute('/')({
-  component: Index,
-})
+  component: Home,
+});
 
-function Index() {
+function Home() {
   return (
-    <div class="p-2">
-      <h3>Welcome Home!</h3>
-    </div>
-  )
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div class="flex items-center gap-2 px-4">
+            <SidebarTrigger class="-ml-1" />
+            <Separator orientation="vertical" class="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem class="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator class="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbLink current>Data Fetching</BreadcrumbLink>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="aspect-video rounded-xl bg-muted/50" />
+            <div class="aspect-video rounded-xl bg-muted/50" />
+            <div class="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
 }