larkup 0.1.14 → 0.1.21

package/components/app-sidebar.tsx

@@ -1,44 +1,37 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import {
   FileStack,
   FlaskConical,
-  Layers,
   Lock,
   type LucideIcon,
   MessageCircle,
   Server,
   SlidersHorizontal,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { STAGES, CURRENT_PHASE } from "@larkup/core/stages";
-import type { StageId } from "@larkup/core/types";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useThemeCustomizer, type PanelBgVariant } from "./theme-customizer-provider";
-import { ThemeSwitcher } from "./theme-switcher";
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { STAGES, CURRENT_PHASE } from '@larkup/core/stages';
+import type { StageId } from '@larkup/core/types';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useThemeCustomizer, type PanelBgVariant } from './theme-customizer-provider';
+import { ThemeSwitcher } from './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',
 };
 
 // [#CDA1FE]
 const STAGE_ICONS: Record<StageId, LucideIcon> = {
   configure: SlidersHorizontal,
   data: FileStack,
-  index: Layers,
   server: Server,
   demo: FlaskConical,
   chat: MessageCircle,
@@ -55,9 +48,9 @@ export function AppSidebar() {
     <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}
       >
@@ -68,12 +61,12 @@ export function AppSidebar() {
               <Link
                 href="/configure"
                 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"
               />
             }
           >
             {/* <Boxes className="size-5" /> */}
-            <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
@@ -81,12 +74,11 @@ export function AppSidebar() {
         </Tooltip>
 
         {/* Pipeline rail */}
-        <nav className="flex flex-1 flex-col items-center gap-1.5">
+        <nav className="flex flex-1 flex-col items-center gap-4.5 ">
           {STAGES.map((stage) => {
             const Icon = STAGE_ICONS[stage.id];
             const active =
-              pathname === stage.href ||
-              (stage.href === "/configure" && pathname === "/");
+              pathname === stage.href || (stage.href === '/configure' && pathname === '/');
             const locked = stage.phase > CURRENT_PHASE;
 
             const body = (
@@ -94,24 +86,21 @@ export function AppSidebar() {
                 {/* active accent bar (Teams-style) */}
                 <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"
+                      ? 'bg-white border text-primary'
                       : locked
-                        ? "text-muted-foreground/50"
-                        : "text-foreground/70 group-hover:bg-white/90 group-hover:text-foreground",
+                      ? 'text-muted-foreground/50'
+                      : 'text-foreground/70 group-hover:bg-white/90 group-hover:text-foreground',
                   )}
                 >
-                  <Icon
-                    className="size-[19px]"
-                    strokeWidth={active ? 2.25 : 2}
-                  />
+                  <Icon className="size-[19px]" strokeWidth={active ? 2.25 : 2} />
                   {locked && (
                     <span className="absolute -right-0.5 -top-0.5 flex size-3.5 items-center justify-center rounded-full bg-background">
                       <Lock className="size-2.5 text-muted-foreground" />
@@ -120,12 +109,12 @@ export function AppSidebar() {
                 </span>
                 <span
                   className={cn(
-                    "text-[10.5px] leading-none tracking-tight",
+                    'text-[10px] leading-none tracking-tight',
                     active
-                      ? "font-semibold text-primary"
+                      ? 'font-semibold text-primary'
                       : locked
-                        ? "text-muted-foreground/50"
-                        : "text-muted-foreground",
+                      ? 'text-muted-foreground/50'
+                      : 'text-muted-foreground',
                   )}
                 >
                   {stage.label}
@@ -140,24 +129,26 @@ export function AppSidebar() {
                     locked ? (
                       <div
                         aria-disabled
-                        className="group relative flex w-16 cursor-not-allowed flex-col items-center gap-1.5 rounded-2xl py-2"
+                        className="group relative flex w-16 cursor-not-allowed flex-col items-center gap-0.5 rounded-2xl py-1"
                       />
                     ) : (
                       <Link
                         href={stage.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 (stage.id === 'chat' && pathname === '/chat') {
+                            e.preventDefault();
+                            window.dispatchEvent(new CustomEvent('new-chat'));
+                          }
+                        }}
+                        className="group relative flex w-16 flex-col items-center gap-0.5 rounded-2xl py-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       />
                     )
                   }
                 >
                   {body}
                 </TooltipTrigger>
-                <TooltipContent
-                  side="right"
-                  sideOffset={10}
-                  className="max-w-56"
-                >
+                <TooltipContent side="right" sideOffset={10} className="max-w-56">
                   <div className="flex flex-col gap-0.5">
                     <span className="font-medium">
                       {stage.label}
@@ -168,9 +159,7 @@ export function AppSidebar() {
                       )}
                     </span>
                     <span className="text-[11px] leading-snug opacity-80">
-                      {locked
-                        ? `Unlocks in Phase ${stage.phase}.`
-                        : stage.description}
+                      {locked ? `Unlocks in Phase ${stage.phase}.` : stage.description}
                     </span>
                   </div>
                 </TooltipContent>

package/components/app-topnav.tsx

@@ -1,49 +1,37 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import {
-  FileStack,
-  FlaskConical,
-  Layers,
-  Lock,
-  type LucideIcon,
-  MessageCircle,
-  Server,
-  SlidersHorizontal,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { STAGES, CURRENT_PHASE } from "@larkup/core/stages";
-import type { StageId } from "@larkup/core/types";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { ServerSwitcher } from "@/components/workspace/server-switcher";
-import { useWorkspace } from "@/components/workspace/workspace-provider";
-import { ThemeSwitcher } from "./theme-switcher";
-import { useThemeCustomizer, type PanelBgVariant } from "./theme-customizer-provider";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { MessageCircle, Database, Settings, BarChart3, type LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { ServerSwitcher } from '@/components/workspace/server-switcher';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+import { useThemeCustomizer, type PanelBgVariant } from './theme-customizer-provider';
 
 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',
 };
 
-const STAGE_ICONS: Record<StageId, LucideIcon> = {
-  configure: SlidersHorizontal,
-  data: FileStack,
-  index: Layers,
-  server: Server,
-  demo: FlaskConical,
-  chat: MessageCircle,
-};
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { id: 'chat', label: 'Chat', href: '/chat', icon: MessageCircle },
+  { id: 'data', label: 'Data', href: '/data', icon: Database },
+  { id: 'analytics', label: 'Analytics', href: '/analytics', icon: BarChart3 },
+  { id: 'settings', label: 'Settings', href: '/settings', icon: Settings },
+];
 
 export function AppTopNav() {
   const pathname = usePathname();
@@ -57,137 +45,63 @@ export function AppTopNav() {
     <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" : "",
+          'sticky top-0 z-50 flex h-14 shrink-0 items-center gap-6 border-b border-border px-4 md:px-6',
+          !navColor ? 'bg-[#F5F5F4]' : '',
         )}
         style={navStyle}
       >
         {/* Brand */}
-        <Link
-          href="/configure"
-          aria-label="larkup home"
-          className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm transition-transform hover:scale-105"
-        >
-          <img src={"/logo9.png"} className="size-5" alt="logo" />
+        <Link href="/chat" aria-label="larkup home" className="flex items-center gap-2.5 shrink-0">
+          <span className="flex size-9 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" />
+          </span>
+          <span className="font-semibold tracking-tight text-foreground hidden sm:inline-block">
+            Larkup
+          </span>
         </Link>
-        <span className="font-semibold tracking-tight hidden sm:inline-block">
-          Larkup
-        </span>
 
-        {/* Pipeline rail */}
-        <nav className="flex flex-1 h-full items-end pb-0 gap-2 md:gap-4 ml-4">
-          {STAGES.map((stage, index) => {
-            const Icon = STAGE_ICONS[stage.id];
+        {/* Navigation items */}
+        <nav className="flex h-full items-center gap-1">
+          {NAV_ITEMS.map((item) => {
+            const Icon = item.icon;
             const active =
-              pathname === stage.href ||
-              (stage.href === "/configure" && pathname === "/");
-            const locked = stage.phase > CURRENT_PHASE;
+              pathname === item.href || (item.href !== '/' && pathname?.startsWith(item.href));
 
-            const body = (
-              <div className="flex items-center ">
-                <span
-                  className={cn(
-                    "flex size-9 items-center justify-center rounded-lg transition-colors",
-                    active
-                      ? "text-primary"
-                      : locked
-                        ? "text-muted-foreground/50"
-                        : "text-muted-foreground group-hover:text-foreground",
-                  )}
-                >
-                  <Icon
-                    className="size-[18px]"
-                    strokeWidth={active ? 2.25 : 2}
-                  />
-                  {locked && (
-                    <span className="absolute -right-0.5 -top-0.5 flex size-3 items-center justify-center rounded-full bg-background">
-                      <Lock className="size-2 text-muted-foreground" />
-                    </span>
-                  )}
-                </span>
-                <span
-                  className={cn(
-                    "hidden md:block text-[13px] tracking-tight",
-                    active
-                      ? "font-semibold text-primary"
-                      : locked
-                        ? "text-muted-foreground/50"
-                        : "text-muted-foreground group-hover:text-foreground",
-                  )}
-                >
-                  {index + 1}. {stage.label}
-                </span>
-                {/* active accent bar (bottom) */}
+            return (
+              <Link
+                key={item.id}
+                href={item.href}
+                aria-current={active ? 'page' : undefined}
+                className={cn(
+                  'group relative flex items-center gap-2 h-full px-3 text-[13px] font-medium transition-colors outline-none',
+                  active ? 'text-primary' : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                <Icon className="size-[16px]" strokeWidth={active ? 2.25 : 1.75} />
+                <span className="hidden md:inline">{item.label}</span>
+                {/* Active underline indicator */}
                 <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",
+                    'absolute bottom-0 left-2 right-2 h-[2px] rounded-full bg-primary transition-opacity',
+                    active ? 'opacity-100' : 'opacity-0',
                   )}
                 />
-              </div>
-            );
-
-            return (
-              <Tooltip key={stage.id}>
-                <TooltipTrigger
-                  render={
-                    locked ? (
-                      <div
-                        aria-disabled
-                        className="group relative flex cursor-not-allowed items-center gap-2 h-10 px-3 rounded-md transition-colors"
-                      />
-                    ) : (
-                      <Link
-                        href={stage.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",
-                        )}
-                      />
-                    )
-                  }
-                >
-                  {body}
-                </TooltipTrigger>
-                <TooltipContent
-                  side="bottom"
-                  sideOffset={10}
-                  className="max-w-56"
-                >
-                  <div className="flex flex-col gap-0.5">
-                    <span className="font-medium">
-                      {index + 1}. {stage.label}
-                      {locked && (
-                        <span className="ml-1.5 font-mono text-[10px] opacity-70">
-                          Phase {stage.phase}
-                        </span>
-                      )}
-                    </span>
-                    <span className="text-[11px] leading-snug opacity-80">
-                      {locked
-                        ? `Unlocks in Phase ${stage.phase}.`
-                        : stage.description}
-                    </span>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
+              </Link>
             );
           })}
         </nav>
 
-        {/* Right side: Workspace & Theme Customizer */}
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Right side */}
         <div className="flex items-center gap-3">
           <ServerSwitcher />
           {username && (
             <span className="hidden text-sm text-muted-foreground md:block">
-              Hi,{" "}
-              <span className="font-medium text-foreground">{username}</span>
+              Hi, <span className="font-medium text-foreground">{username}</span>
             </span>
           )}
-          <ThemeSwitcher floating={false} />{" "}
         </div>
       </header>
     </TooltipProvider>