larkup 0.1.14 → 0.1.21

package/components/simple/simple-sidebar.tsx

@@ -1,79 +1,69 @@
-"use client"
+'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"
+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",
-}
+  'panel-default': undefined,
+  'panel-white': '#FFFFFF',
+  'panel-fafafa': '#FAFAFA',
+  'panel-warm': '#F7F1EA',
+  'panel-soft': '#FBFAF8',
+  'panel-silver': '#F8F8F8',
+  'panel-stone': '#F5F5F2',
+};
 
 interface NavItem {
-  id: string
-  label: string
-  href: string
-  icon: LucideIcon
-  description: string
+  id: string;
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  description: string;
 }
 
 const SIMPLE_NAV: NavItem[] = [
   {
-    id: "chat",
-    label: "Chat",
-    href: "/simple/chat",
+    id: 'chat',
+    label: 'Chat',
+    href: '/simple/chat',
     icon: MessageCircle,
-    description: "Chat with your knowledge base using AI.",
+    description: 'Chat with your knowledge base using AI.',
   },
   {
-    id: "docs",
-    label: "Docs",
-    href: "/simple/docs",
+    id: 'docs',
+    label: 'Docs',
+    href: '/simple/docs',
     icon: FileStack,
-    description: "Upload, paste, or manage your documents.",
+    description: 'Upload, paste, or manage your documents.',
   },
   {
-    id: "settings",
-    label: "Settings",
-    href: "/simple/settings",
+    id: 'settings',
+    label: 'Settings',
+    href: '/simple/settings',
     icon: SlidersHorizontal,
-    description: "Configure provider, API keys, and advanced settings.",
+    description: 'Configure provider, API keys, and advanced settings.',
   },
-]
+];
 
 export function SimpleSidebar() {
-  const pathname = usePathname()
-  const { pageStyle, navBg } = useThemeCustomizer()
+  const pathname = usePathname();
+  const { pageStyle, navBg } = useThemeCustomizer();
 
-  const navColor = navBg ? NAV_BG_COLORS[navBg] : undefined
-  const navStyle = navColor ? { backgroundColor: navColor } : undefined
+  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" : "",
+          '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}
       >
@@ -84,11 +74,11 @@ export function SimpleSidebar() {
               <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"
+                className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary text-primary-foreground  transition-transform hover:scale-105"
               />
             }
           >
-            <img src={"/logo9.png"} className="size-6.5" alt="logo" />
+            <img src={'/logo9.png'} className="size-6.5" alt="logo" />
           </TooltipTrigger>
           <TooltipContent side="right" sideOffset={10}>
             Larkup
@@ -96,10 +86,10 @@ export function SimpleSidebar() {
         </Tooltip>
 
         {/* Navigation */}
-        <nav className="flex flex-1 flex-col items-center gap-1.5">
+        <nav className="flex flex-1 flex-col items-center gap-2.5">
           {SIMPLE_NAV.map((item) => {
-            const Icon = item.icon
-            const active = pathname?.startsWith(item.href)
+            const Icon = item.icon;
+            const active = pathname?.startsWith(item.href);
 
             return (
               <Tooltip key={item.id}>
@@ -107,34 +97,43 @@ export function SimpleSidebar() {
                   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"
+                      aria-current={active ? 'page' : undefined}
+                      onClick={(e) => {
+                        if (item.id === 'chat' && pathname === item.href) {
+                          e.preventDefault();
+                          window.dispatchEvent(new CustomEvent('new-chat'));
+                        }
+                      }}
+                      className={cn(
+                        'group relative flex size-10 items-center justify-center rounded-xl transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        active
+                          ? 'bg-primary text-primary-foreground shadow-sm'
+                          : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+                      )}
                     />
                   }
                 >
                   {/* 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",
+                      'absolute left-0 top-1/2 h-6 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",
+                      'relative flex size-9 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",
+                        ? '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",
+                      'text-[10px] leading-none tracking-tight',
+                      active ? 'font-semibold text-primary' : 'text-muted-foreground',
                     )}
                   >
                     {item.label}
@@ -143,13 +142,11 @@ export function SimpleSidebar() {
                 <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>
+                    <span className="text-[11px] leading-snug opacity-80">{item.description}</span>
                   </div>
                 </TooltipContent>
               </Tooltip>
-            )
+            );
           })}
         </nav>
 
@@ -157,5 +154,5 @@ export function SimpleSidebar() {
         <ThemeSwitcher floating={false} />
       </aside>
     </TooltipProvider>
-  )
+  );
 }

package/components/simple/simple-topnav.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+import { ThemeSwitcher } from '@/components/theme-switcher';
+import { useThemeCustomizer, type PanelBgVariant } from '@/components/theme-customizer-provider';
+import { MessageCircle, FileStack, SlidersHorizontal, type LucideIcon } from 'lucide-react';
+
+const NAV_BG_COLORS: Record<PanelBgVariant, string | undefined> = {
+  'panel-default': undefined,
+  'panel-white': '#FFFFFF',
+  'panel-fafafa': '#FAFAFA',
+  '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 SimpleTopNav() {
+  const pathname = usePathname();
+  const { username } = useWorkspace();
+  const { navBg } = useThemeCustomizer();
+
+  const navColor = navBg ? NAV_BG_COLORS[navBg] : undefined;
+  const navStyle = navColor ? { backgroundColor: navColor } : undefined;
+
+  return (
+    <TooltipProvider delay={150}>
+      <header
+        className={cn(
+          'sticky top-0 z-50 flex h-16 shrink-0 items-center gap-4 border-b border-border px-4 md:px-6',
+          !navColor ? 'bg-white' : '',
+        )}
+        style={navStyle}
+      >
+        {/* Brand */}
+        <Link
+          href="/simple/chat"
+          aria-label="larkup home"
+          className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground  transition-transform hover:scale-105"
+        >
+          <img src={'/logo9.png'} className="size-5" alt="logo" />
+        </Link>
+        <span className="font-semibold tracking-tight hidden sm:inline-block">Larkup</span>
+
+        {/* Navigation */}
+        <nav className="flex flex-1 h-full items-end pb-0 gap-2 md:gap-4 ml-4">
+          {SIMPLE_NAV.map((item, index) => {
+            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={cn(
+                        'group relative flex items-center gap-2 h-10 px-3 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        active ? 'bg-muted/0' : 'hover:bg-muted/30',
+                      )}
+                    />
+                  }
+                >
+                  <div className="flex items-center">
+                    <span
+                      className={cn(
+                        'flex size-9 items-center justify-center rounded-lg transition-colors',
+                        active
+                          ? 'text-primary'
+                          : 'text-muted-foreground group-hover:text-foreground',
+                      )}
+                    >
+                      <Icon className="size-[18px]" strokeWidth={active ? 2.25 : 2} />
+                    </span>
+                    <span
+                      className={cn(
+                        'hidden md:block text-[13px] tracking-tight',
+                        active
+                          ? 'font-semibold text-primary'
+                          : 'text-muted-foreground group-hover:text-foreground',
+                      )}
+                    >
+                      {item.label}
+                    </span>
+                    {/* active accent bar (bottom) */}
+                    <span
+                      className={cn(
+                        'absolute bottom-0 left-0 h-0.5 w-full bg-primary transition-opacity',
+                        active ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+                      )}
+                    />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" 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>
+
+        {/* Right side: Workspace & Theme Customizer */}
+        <div className="flex items-center gap-3">
+          {username && (
+            <span className="hidden text-sm text-muted-foreground md:block">
+              Hi, <span className="font-medium text-foreground">{username}</span>
+            </span>
+          )}
+          <ThemeSwitcher floating={false} />
+        </div>
+      </header>
+    </TooltipProvider>
+  );
+}

package/components/theme-customizer-provider.tsx

@@ -1,45 +1,42 @@
-"use client";
+'use client';
 
-import React, { createContext, useContext, useEffect, useState } from "react";
+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";
+  | '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";
+  | 'bg-default'
+  | 'bg-warm'
+  | 'bg-soft'
+  | 'bg-pure'
+  | 'bg-silver'
+  | 'bg-sage'
+  | 'bg-fafafa'
+  | 'bg-stone';
 
 export type PanelBgVariant =
-  | "panel-default"
-  | "panel-white"
-  | "panel-fafafa"
-  | "panel-warm"
-  | "panel-soft"
-  | "panel-silver"
-  | "panel-stone";
+  | 'panel-default'
+  | 'panel-white'
+  | 'panel-fafafa'
+  | 'panel-warm'
+  | 'panel-soft'
+  | 'panel-silver'
+  | 'panel-stone';
 
-export type LayoutVariant = "sidebar" | "topnav" | "collapsed";
+export type LayoutVariant = 'sidebar' | 'topnav' | 'collapsed';
 
-export type RadiusVariant =
-  | "radius-0"
-  | "radius-sm"
-  | "radius-default"
-  | "radius-lg";
+export type RadiusVariant = 'radius-0' | 'radius-sm' | 'radius-default' | 'radius-lg';
 
-export type PageStyleVariant = "card" | "fused";
+export type PageStyleVariant = 'card' | 'fused';
 
 interface ThemeCustomizerContextValue {
   theme: ThemeVariant;
@@ -59,52 +56,36 @@ interface ThemeCustomizerContextValue {
   isMounted: boolean;
 }
 
-const ThemeCustomizerContext =
-  createContext<ThemeCustomizerContextValue | null>(null);
+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",
-    );
+    throw new Error('useThemeCustomizer must be used within a ThemeCustomizerProvider');
   }
   return ctx;
 }
 
-export function ThemeCustomizerProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+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");
+  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-default');
+  const [navBg, setNavBg] = useState<PanelBgVariant>('panel-default');
+  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;
+    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);
@@ -117,31 +98,27 @@ export function ThemeCustomizerProvider({
 
   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);
+    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-")
-      ) {
+      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 (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]);