larkup 0.1.14

package/components/simple/simple-sidebar.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  MessageCircle,
+  FileStack,
+  SlidersHorizontal,
+  type LucideIcon,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useThemeCustomizer, type PanelBgVariant } from "@/components/theme-customizer-provider"
+import { ThemeSwitcher } from "@/components/theme-switcher"
+
+const NAV_BG_COLORS: Record<PanelBgVariant, string | undefined> = {
+  "panel-default": undefined,
+  "panel-white": "#FFFFFF",
+  "panel-fafafa": "#F4F4F4",
+  "panel-warm": "#F7F1EA",
+  "panel-soft": "#FBFAF8",
+  "panel-silver": "#F8F8F8",
+  "panel-stone": "#F5F5F2",
+}
+
+interface NavItem {
+  id: string
+  label: string
+  href: string
+  icon: LucideIcon
+  description: string
+}
+
+const SIMPLE_NAV: NavItem[] = [
+  {
+    id: "chat",
+    label: "Chat",
+    href: "/simple/chat",
+    icon: MessageCircle,
+    description: "Chat with your knowledge base using AI.",
+  },
+  {
+    id: "docs",
+    label: "Docs",
+    href: "/simple/docs",
+    icon: FileStack,
+    description: "Upload, paste, or manage your documents.",
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    href: "/simple/settings",
+    icon: SlidersHorizontal,
+    description: "Configure provider, API keys, and advanced settings.",
+  },
+]
+
+export function SimpleSidebar() {
+  const pathname = usePathname()
+  const { pageStyle, navBg } = useThemeCustomizer()
+
+  const navColor = navBg ? NAV_BG_COLORS[navBg] : undefined
+  const navStyle = navColor ? { backgroundColor: navColor } : undefined
+
+  return (
+    <TooltipProvider delay={150}>
+      <aside
+        className={cn(
+          "sticky top-0 hidden h-screen w-[84px] shrink-0 flex-col items-center gap-1 self-start py-3 md:flex",
+          !navColor ? "bg-background" : "",
+          pageStyle === "fused" ? "border-r border-border" : "",
+        )}
+        style={navStyle}
+      >
+        {/* Brand */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Link
+                href="/simple/chat"
+                aria-label="larkup home"
+                className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm transition-transform hover:scale-105"
+              />
+            }
+          >
+            <img src={"/logo9.png"} className="size-6.5" alt="logo" />
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={10}>
+            Larkup
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Navigation */}
+        <nav className="flex flex-1 flex-col items-center gap-1.5">
+          {SIMPLE_NAV.map((item) => {
+            const Icon = item.icon
+            const active = pathname?.startsWith(item.href)
+
+            return (
+              <Tooltip key={item.id}>
+                <TooltipTrigger
+                  render={
+                    <Link
+                      href={item.href}
+                      aria-current={active ? "page" : undefined}
+                      className="group relative flex w-16 flex-col items-center gap-1.5 rounded-2xl py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    />
+                  }
+                >
+                  {/* Active accent bar */}
+                  <span
+                    className={cn(
+                      "absolute left-0 top-1/2 h-7 w-1 -translate-y-1/2 rounded-r-full bg-primary transition-opacity",
+                      active ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  <span
+                    className={cn(
+                      "relative flex size-10 items-center justify-center rounded-xl transition-colors",
+                      active
+                        ? "bg-white border text-primary"
+                        : "text-foreground/70 group-hover:bg-white/90 group-hover:text-foreground",
+                    )}
+                  >
+                    <Icon className="size-[19px]" strokeWidth={active ? 2.25 : 2} />
+                  </span>
+                  <span
+                    className={cn(
+                      "text-[10.5px] leading-none tracking-tight",
+                      active
+                        ? "font-semibold text-primary"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    {item.label}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={10} className="max-w-56">
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-medium">{item.label}</span>
+                    <span className="text-[11px] leading-snug opacity-80">
+                      {item.description}
+                    </span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
+        </nav>
+
+        {/* Footer */}
+        <ThemeSwitcher floating={false} />
+      </aside>
+    </TooltipProvider>
+  )
+}

package/components/theme-customizer-provider.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+export type ThemeVariant =
+  | "default"
+  | "theme-gaia"
+  | "theme-docker"
+  | "theme-pinecone"
+  | "theme-vercel"
+  | "theme-elevenlabs"
+  | "theme-espresso"
+  | "theme-sienna"
+  | "theme-caramel";
+
+export type BackgroundVariant =
+  | "bg-default"
+  | "bg-warm"
+  | "bg-soft"
+  | "bg-pure"
+  | "bg-silver"
+  | "bg-sage"
+  | "bg-stone";
+
+export type PanelBgVariant =
+  | "panel-default"
+  | "panel-white"
+  | "panel-fafafa"
+  | "panel-warm"
+  | "panel-soft"
+  | "panel-silver"
+  | "panel-stone";
+
+export type LayoutVariant = "sidebar" | "topnav" | "collapsed";
+
+export type RadiusVariant =
+  | "radius-0"
+  | "radius-sm"
+  | "radius-default"
+  | "radius-lg";
+
+export type PageStyleVariant = "card" | "fused";
+
+interface ThemeCustomizerContextValue {
+  theme: ThemeVariant;
+  setTheme: (theme: ThemeVariant) => void;
+  layout: LayoutVariant;
+  setLayout: (layout: LayoutVariant) => void;
+  radius: RadiusVariant;
+  setRadius: (radius: RadiusVariant) => void;
+  background: BackgroundVariant;
+  setBackground: (bg: BackgroundVariant) => void;
+  panelBg: PanelBgVariant;
+  setPanelBg: (bg: PanelBgVariant) => void;
+  navBg: PanelBgVariant;
+  setNavBg: (bg: PanelBgVariant) => void;
+  pageStyle: PageStyleVariant;
+  setPageStyle: (style: PageStyleVariant) => void;
+  isMounted: boolean;
+}
+
+const ThemeCustomizerContext =
+  createContext<ThemeCustomizerContextValue | null>(null);
+
+export function useThemeCustomizer() {
+  const ctx = useContext(ThemeCustomizerContext);
+  if (!ctx) {
+    throw new Error(
+      "useThemeCustomizer must be used within a ThemeCustomizerProvider",
+    );
+  }
+  return ctx;
+}
+
+export function ThemeCustomizerProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isMounted, setIsMounted] = useState(false);
+  // Default to "default" theme (black primary). User can switch themes freely.
+  const [theme, setThemeState] = useState<ThemeVariant>("default");
+  const [layout, setLayout] = useState<LayoutVariant>("sidebar");
+  const [radius, setRadius] = useState<RadiusVariant>("radius-default");
+  const [background, setBackground] = useState<BackgroundVariant>("bg-default");
+  const [panelBg, setPanelBg] = useState<PanelBgVariant>("panel-white");
+  const [navBg, setNavBg] = useState<PanelBgVariant>("panel-silver");
+  const [pageStyle, setPageStyle] = useState<PageStyleVariant>("card");
+
+  useEffect(() => {
+    setIsMounted(true);
+
+    const savedTheme = localStorage.getItem("app-theme") as ThemeVariant;
+    const savedLayout = localStorage.getItem("app-layout") as LayoutVariant;
+    const savedRadius = localStorage.getItem("app-radius") as RadiusVariant;
+    const savedBackground = localStorage.getItem(
+      "app-background",
+    ) as BackgroundVariant;
+    const savedPanelBg = localStorage.getItem(
+      "app-panel-bg",
+    ) as PanelBgVariant;
+    const savedNavBg = localStorage.getItem(
+      "app-nav-bg",
+    ) as PanelBgVariant;
+    const savedPageStyle = localStorage.getItem(
+      "app-pagestyle",
+    ) as PageStyleVariant;
+
+    if (savedTheme) setThemeState(savedTheme);
+    if (savedLayout) setLayout(savedLayout);
+    if (savedRadius) setRadius(savedRadius);
+    if (savedBackground) setBackground(savedBackground);
+    if (savedPanelBg) setPanelBg(savedPanelBg);
+    if (savedNavBg) setNavBg(savedNavBg);
+    if (savedPageStyle) setPageStyle(savedPageStyle);
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+    localStorage.setItem("app-theme", theme);
+    localStorage.setItem("app-layout", layout);
+    localStorage.setItem("app-radius", radius);
+    localStorage.setItem("app-background", background);
+    localStorage.setItem("app-panel-bg", panelBg);
+    localStorage.setItem("app-nav-bg", navBg);
+    localStorage.setItem("app-pagestyle", pageStyle);
+
+    // Update body classes
+    const body = document.body;
+
+    // Remove old classes
+    Array.from(body.classList).forEach((cls) => {
+      if (
+        cls.startsWith("theme-") ||
+        cls.startsWith("radius-") ||
+        cls.startsWith("bg-")
+      ) {
+        body.classList.remove(cls);
+      }
+    });
+
+    // Add new classes
+    if (theme !== "default") body.classList.add(theme);
+    if (radius !== "radius-default") body.classList.add(radius);
+    if (background) body.classList.add(background);
+  }, [theme, layout, radius, background, panelBg, navBg, pageStyle, isMounted]);
+
+  return (
+    <ThemeCustomizerContext.Provider
+      value={{
+        theme,
+        setTheme: setThemeState,
+        layout,
+        setLayout,
+        radius,
+        setRadius,
+        background,
+        setBackground,
+        panelBg,
+        setPanelBg,
+        navBg,
+        setNavBg,
+        pageStyle,
+        setPageStyle,
+        isMounted,
+      }}
+    >
+      {children}
+    </ThemeCustomizerContext.Provider>
+  );
+}