larkup 0.1.14 → 0.1.21

package/components/unified-sidebar.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  MessageCircle,
+  Database,
+  Settings,
+  BarChart3,
+  ChevronLeft,
+  Server,
+  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 { ServerSwitcher } from '@/components/workspace/server-switcher';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+
+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;
+}
+
+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 UnifiedSidebar() {
+  const pathname = usePathname();
+  const { pageStyle, navBg } = useThemeCustomizer();
+  const { activeServer } = useWorkspace();
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('sidebar-collapsed');
+    if (saved === 'false') setCollapsed(false);
+  }, []);
+
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    localStorage.setItem('sidebar-collapsed', String(next));
+  };
+
+  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 shrink-0 flex-col self-start py-4 md:flex transition-all duration-300 ease-in-out',
+          collapsed ? 'w-18' : 'w-60',
+          !navColor ? 'bg-background' : '',
+          pageStyle === 'fused' ? 'border-r border-border' : '',
+        )}
+        style={navStyle}
+      >
+        <div
+          className={cn(
+            'flex w-full items-center mb-6',
+            collapsed ? 'justify-center px-3' : 'justify-between px-4',
+          )}
+        >
+          {collapsed ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    onClick={toggleCollapsed}
+                    aria-label="Expand sidebar"
+                    className="flex size-10 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" />
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={10}>
+                Expand sidebar
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <>
+              <Link href="/chat" className="flex items-center gap-2.5">
+                <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="text-sm font-semibold tracking-tight text-foreground">Larkup</span>
+              </Link>
+              <button
+                onClick={toggleCollapsed}
+                className="flex size-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                aria-label="Collapse sidebar"
+              >
+                <ChevronLeft className="size-3.5" />
+              </button>
+            </>
+          )}
+        </div>
+
+        <nav
+          className={cn(
+            'flex flex-1 flex-col w-full',
+            collapsed ? 'items-center px-3 gap-3' : 'px-3 gap-1.5',
+          )}
+        >
+          {NAV_ITEMS.map((item) => {
+            const Icon = item.icon;
+            const active =
+              pathname === item.href || (item.href !== '/' && pathname?.startsWith(item.href));
+
+            if (collapsed) {
+              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger
+                    render={
+                      <Link
+                        href={item.href}
+                        aria-current={active ? 'page' : undefined}
+                        onClick={(e) => {
+                          if (item.id === 'chat' && pathname === '/chat') {
+                            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-[#F0F0F0] text-foreground'
+                            : 'text-muted-foreground hover:bg-[#EBEBEB] hover:text-foreground',
+                        )}
+                      />
+                    }
+                  >
+                    <Icon className="size-4.5" strokeWidth={active ? 2.25 : 1.75} />
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={10}>
+                    {item.label}
+                  </TooltipContent>
+                </Tooltip>
+              );
+            }
+
+            return (
+              <Link
+                key={item.id}
+                href={item.href}
+                aria-current={active ? 'page' : undefined}
+                onClick={(e) => {
+                  if (item.id === 'chat' && pathname === '/chat') {
+                    e.preventDefault();
+                    window.dispatchEvent(new CustomEvent('new-chat'));
+                  }
+                }}
+                className={cn(
+                  'group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-[13px] font-medium transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  active
+                    ? 'bg-[#F0F0F0] text-foreground'
+                    : 'text-muted-foreground hover:bg-[#EBEBEB] hover:text-foreground',
+                )}
+              >
+                <Icon className="size-4.5 shrink-0" strokeWidth={active ? 2.25 : 1.75} />
+                <span className="truncate">{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className={cn('w-full pt-3', collapsed ? 'px-2' : 'px-3')}>
+          {collapsed ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    onClick={toggleCollapsed}
+                    className="flex w-full items-center justify-center py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                  />
+                }
+              >
+                <div className="relative size-8 rounded-lg border border-border bg-card flex items-center justify-center  text-muted-foreground transition-colors group-hover:text-foreground">
+                  <Server className="size-4" />
+                  <span className="absolute -bottom-0.5 -right-0.5 flex size-2.5">
+                    {activeServer?.running ? (
+                      <>
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+                        <span className="relative inline-flex size-full rounded-full bg-green-500 border border-card" />
+                      </>
+                    ) : (
+                      <span className="relative inline-flex size-full rounded-full bg-gray-500  border border-card" />
+                    )}
+                  </span>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={10}>
+                {activeServer?.name ?? 'No server'} ({activeServer?.running ? 'Live' : 'Offline'})
+              </TooltipContent>
+            </Tooltip>
+          ) : (
+            <ServerSwitcher />
+          )}
+        </div>
+      </aside>
+    </TooltipProvider>
+  );
+}

package/components/update-banner.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ArrowUp, Check, Copy, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+/**
+ * UpdateBanner, Universal update notification for all channels.
+ */
+
+const VERSION_CHECK_URL = 'https://larkup.de/api/version';
+const DISMISS_KEY = 'larkup-update-dismissed';
+const DISMISS_TTL = 24 * 60 * 60 * 1000; // 24 hours
+
+function compareVersions(a: string, b: string): number {
+  const pa = a.replace(/^v/, '').split('.').map(Number);
+  const pb = b.replace(/^v/, '').split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    const va = pa[i] || 0;
+    const vb = pb[i] || 0;
+    if (va > vb) return 1;
+    if (va < vb) return -1;
+  }
+  return 0;
+}
+
+type Channel = 'desktop' | 'docker' | 'npm';
+
+function detectChannel(): Channel {
+  if (typeof window !== 'undefined' && '__TAURI__' in window) {
+    return 'desktop';
+  }
+  if (
+    process.env.NEXT_PUBLIC_DOCKER_ENV === 'true' ||
+    process.env.NEXT_PUBLIC_RUNNING_IN_DOCKER === 'true'
+  ) {
+    return 'docker';
+  }
+  return 'npm';
+}
+
+const UPDATE_COMMANDS: Record<Exclude<Channel, 'desktop'>, string> = {
+  docker: 'docker compose pull && docker compose up -d',
+  npm: 'larkup update',
+};
+
+function isDismissed(): boolean {
+  if (typeof window === 'undefined') return true;
+  try {
+    const data = localStorage.getItem(DISMISS_KEY);
+    if (!data) return false;
+    const { timestamp } = JSON.parse(data);
+    return Date.now() - timestamp < DISMISS_TTL;
+  } catch {
+    return false;
+  }
+}
+
+function dismiss() {
+  try {
+    localStorage.setItem(DISMISS_KEY, JSON.stringify({ timestamp: Date.now() }));
+  } catch {
+    // ignore
+  }
+}
+
+export function UpdateBanner() {
+  const [latestVersion, setLatestVersion] = useState<string | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const currentVersion = process.env.NEXT_PUBLIC_APP_VERSION || '0.0.0';
+  const channel = detectChannel();
+
+  useEffect(() => {
+    if (isDismissed()) return;
+
+    const controller = new AbortController();
+
+    fetch(VERSION_CHECK_URL, {
+      signal: controller.signal,
+      cache: 'no-store',
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.version && compareVersions(data.version, currentVersion) > 0) {
+          setLatestVersion(data.version);
+          setVisible(true);
+        }
+      })
+      .catch(() => {
+        // Silently fail — update check is non-critical
+      });
+
+    return () => controller.abort();
+  }, [currentVersion]);
+
+  const handleDismiss = () => {
+    dismiss();
+    setVisible(false);
+  };
+
+  const handleUpdate = async () => {
+    if (channel === 'desktop') {
+      // Trigger Tauri auto-update
+      setUpdating(true);
+      try {
+        const { check } = await import('@tauri-apps/plugin-updater');
+        const { relaunch } = await import('@tauri-apps/plugin-process');
+
+        const update = await check();
+        if (update) {
+          await update.downloadAndInstall();
+          await relaunch();
+        } else {
+          setUpdating(false);
+        }
+      } catch (err) {
+        console.error('Auto-update failed:', err);
+        setUpdating(false);
+        // Fall back to download page
+        window.open('https://larkup.de/download', '_blank');
+      }
+    } else {
+      try {
+        await navigator.clipboard.writeText(UPDATE_COMMANDS[channel]);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 2000);
+      } catch (err) {
+        console.error('Could not copy update command:', err);
+      }
+    }
+  };
+
+  if (!visible || !latestVersion) return null;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="relative z-50 border-b border-border bg-background px-3 py-2 text-foreground sm:px-4"
+    >
+      <div className="mx-auto flex min-h-7 max-w-screen-2xl items-center gap-2.5">
+        <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-foreground text-background">
+          <ArrowUp className="size-3.5" aria-hidden="true" />
+        </span>
+
+        <p className="min-w-0 text-xs sm:text-sm">
+          <span className="font-medium">Larkup v{latestVersion} is available.</span>{' '}
+          <span className="hidden text-muted-foreground sm:inline">
+            You&apos;re using v{currentVersion}.
+          </span>
+        </p>
+
+        {channel !== 'desktop' && (
+          <code className="ml-auto hidden max-w-[38rem] truncate rounded-[5px] border border-border bg-muted/40 px-2 py-1 font-mono text-[11px] text-muted-foreground lg:block">
+            {UPDATE_COMMANDS[channel]}
+          </code>
+        )}
+
+        <Button
+          type="button"
+          variant={channel === 'desktop' ? 'default' : 'outline'}
+          size="xs"
+          onClick={handleUpdate}
+          disabled={updating}
+          aria-label={channel === 'desktop' ? 'Update Larkup now' : 'Copy update command'}
+          className={channel === 'desktop' ? 'ml-auto' : 'ml-auto lg:ml-0'}
+        >
+          {channel === 'desktop' ? (
+            updating ? (
+              'Updating...'
+            ) : (
+              'Update now'
+            )
+          ) : copied ? (
+            <>
+              <Check aria-hidden="true" />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy aria-hidden="true" />
+              Copy command
+            </>
+          )}
+        </Button>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          onClick={handleDismiss}
+          aria-label="Dismiss update notification"
+          title="Remind me tomorrow"
+        >
+          <X aria-hidden="true" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/workspace/server-form-dialog.tsx

@@ -36,7 +36,7 @@ export function ServerFormDialog({ mode, target, open, onOpenChange }: Props) {
   async function submit() {
     const trimmed = name.trim()
     if (!trimmed) {
-      toast.error("Enter a server name.")
+      toast.error("Enter a project name.")
       return
     }
     setBusy(true)
@@ -46,7 +46,7 @@ export function ServerFormDialog({ mode, target, open, onOpenChange }: Props) {
         if (created) toast.success(`Created "${created.name}" and switched to it.`)
       } else if (target) {
         await renameServer(target.id, trimmed)
-        toast.success("Server renamed.")
+        toast.success("Project renamed.")
       }
       onOpenChange(false)
     } catch {
@@ -61,17 +61,17 @@ export function ServerFormDialog({ mode, target, open, onOpenChange }: Props) {
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>
-            {mode === "create" ? "New RAG server" : "Rename server"}
+            {mode === "create" ? "New project" : "Rename project"}
           </DialogTitle>
           <DialogDescription>
             {mode === "create"
-              ? "Each server is an isolated RAG project with its own documents, index, and deployable artifact."
-              : "Give this server a clearer name."}
+              ? "Each project is an isolated environment with its own documents, index, and settings."
+              : "Give this project a clearer name."}
           </DialogDescription>
         </DialogHeader>
 
         <div className="grid gap-2">
-          <Label htmlFor="server-name">Server name</Label>
+          <Label htmlFor="server-name">Project name</Label>
           <Input
             id="server-name"
             value={name}
@@ -94,7 +94,7 @@ export function ServerFormDialog({ mode, target, open, onOpenChange }: Props) {
           </Button>
           <Button onClick={() => void submit()} disabled={busy}>
             {busy && <Loader2 className="size-4 animate-spin" />}
-            {mode === "create" ? "Create server" : "Save"}
+            {mode === "create" ? "Create project" : "Save"}
           </Button>
         </DialogFooter>
       </DialogContent>

package/components/workspace/server-switcher.tsx

@@ -1,15 +1,7 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import {
-  Check,
-  ChevronsUpDown,
-  Pencil,
-  Plus,
-  Server,
-  Trash2,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
+import { useState } from 'react';
+import { Check, ChevronsUpDown, Pencil, Plus, Server, Trash2 } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,21 +10,17 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useWorkspace, type WorkspaceServer } from "./workspace-provider";
-import { ServerFormDialog } from "./server-form-dialog";
-import { DeleteServerDialog } from "./delete-server-dialog";
-import { Separator } from "../ui/separator";
+} from '@/components/ui/dropdown-menu';
+import { useWorkspace, type WorkspaceServer } from './workspace-provider';
+import { ServerFormDialog } from './server-form-dialog';
+import { DeleteServerDialog } from './delete-server-dialog';
+import { Separator } from '../ui/separator';
 
 export function ServerSwitcher() {
   const { servers, activeServer, activateServer } = useWorkspace();
   const [createOpen, setCreateOpen] = useState(false);
-  const [renameTarget, setRenameTarget] = useState<WorkspaceServer | null>(
-    null,
-  );
-  const [deleteTarget, setDeleteTarget] = useState<WorkspaceServer | null>(
-    null,
-  );
+  const [renameTarget, setRenameTarget] = useState<WorkspaceServer | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<WorkspaceServer | null>(null);
 
   return (
     <>
@@ -41,7 +29,7 @@ export function ServerSwitcher() {
           render={
             <button
               type="button"
-              className="flex min-w-[200px] md:min-w-[240px] items-center gap-2 rounded-lg border border-border bg-card px-2 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="flex w-full items-center gap-2 rounded-lg border border-border bg-card px-2 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             />
           }
         >
@@ -54,7 +42,7 @@ export function ServerSwitcher() {
             </span> */}
             <span className="flex items-center gap-1.5">
               <span className="truncate text-sm font-medium text-foreground">
-                {activeServer?.name ?? "No server"}
+                {activeServer?.name ?? 'No server'}
               </span>
               {activeServer?.running && <RunningDot />}
             </span>
@@ -103,19 +91,13 @@ export function ServerSwitcher() {
 
           <DropdownMenuSeparator />
 
-          <DropdownMenuItem
-            onClick={() => setCreateOpen(true)}
-            className="gap-2 h-9"
-          >
+          <DropdownMenuItem onClick={() => setCreateOpen(true)} className="gap-2 h-9">
             <Plus className="size-4" />
             New server
           </DropdownMenuItem>
           {/* <DropdownMenuSeparator /> */}
           {activeServer && (
-            <DropdownMenuItem
-              onClick={() => setRenameTarget(activeServer)}
-              className="gap-2 h-9"
-            >
+            <DropdownMenuItem onClick={() => setRenameTarget(activeServer)} className="gap-2 h-9">
               <Pencil className="size-4" />
               Rename current
             </DropdownMenuItem>
@@ -133,11 +115,7 @@ export function ServerSwitcher() {
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <ServerFormDialog
-        mode="create"
-        open={createOpen}
-        onOpenChange={setCreateOpen}
-      />
+      <ServerFormDialog mode="create" open={createOpen} onOpenChange={setCreateOpen} />
       <ServerFormDialog
         mode="rename"
         target={renameTarget}

package/hooks/use-notion-auth.ts

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+
+interface UseNotionAuthOptions {
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+}
+
+export function useNotionAuth({ onSuccess, onError }: UseNotionAuthOptions = {}) {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data?.type === 'notion_oauth') {
+        if (event.data.status === 'connected') {
+          onSuccess?.();
+        } else if (event.data.status === 'error') {
+          onError?.(event.data.error || 'Failed to connect to Notion');
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [onSuccess, onError]);
+
+  const connectToNotion = (onClosePopup?: () => void) => {
+    const customAuthUrl =
+      process.env.NEXT_PUBLIC_NOTION_AUTHORIZATION_URL ||
+      'https://larkup-proxy.vercel.app/api/oauth/notion';
+
+    const redirectUri = `${window.location.origin}/api/integrations/notion/callback`;
+    const authUrl = `${customAuthUrl}?redirect_to=${encodeURIComponent(redirectUri)}`;
+
+    const width = 600;
+    const height = 800;
+    const left = window.innerWidth / 2 - window.innerWidth / 2 + window.screenX; // Wait, window.innerWidth / 2 - width / 2
+    const top = window.innerHeight / 2 - window.innerHeight / 2 + window.screenY;
+
+    // fixing the left and top calculations:
+    const calculatedLeft = window.innerWidth / 2 - width / 2 + window.screenX;
+    const calculatedTop = window.innerHeight / 2 - height / 2 + window.screenY;
+
+    const popup = window.open(
+      authUrl,
+      'Notion Connection',
+      `width=${width},height=${height},left=${calculatedLeft},top=${calculatedTop},toolbar=0,scrollbars=1,status=1,resizable=1`,
+    );
+
+    if (popup) {
+      const timer = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(timer);
+          onClosePopup?.();
+        }
+      }, 500);
+    }
+  };
+
+  return { connectToNotion };
+}