feat: add Stirling-PDF-style layout with sidebar, tool panel, dropzone, and theme toggle

apps/web/src/App.tsx

@@ -1,10 +1,11 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { HomePage } from "./pages/home-page";
 
 export function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<div className="p-8 text-2xl font-bold text-primary">Stirling Image</div>} />
+        <Route path="/" element={<HomePage />} />
       </Routes>
     </BrowserRouter>
   );

apps/web/src/components/common/dropzone.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useState, type DragEvent } from "react";
+import { Upload } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface DropzoneProps {
+  onFiles?: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+}
+
+export function Dropzone({ onFiles, accept, multiple = true }: DropzoneProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDrag = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") setIsDragging(true);
+    else if (e.type === "dragleave") setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) onFiles?.(files);
+    },
+    [onFiles]
+  );
+
+  const handleClick = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = multiple;
+    if (accept) input.accept = accept;
+    input.onchange = (e) => {
+      const files = Array.from((e.target as HTMLInputElement).files || []);
+      if (files.length > 0) onFiles?.(files);
+    };
+    input.click();
+  };
+
+  return (
+    <div
+      onDragEnter={handleDrag}
+      onDragOver={handleDrag}
+      onDragLeave={handleDrag}
+      onDrop={handleDrop}
+      onClick={handleClick}
+      className={cn(
+        "flex flex-col items-center justify-center rounded-2xl border-2 border-dashed transition-colors cursor-pointer min-h-[400px] mx-auto max-w-2xl w-full",
+        isDragging
+          ? "border-primary bg-primary/5"
+          : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50"
+      )}
+    >
+      <div className="flex flex-col items-center gap-4 p-8">
+        <div className="text-3xl font-bold text-muted-foreground/30">
+          Stirling <span className="text-primary/30">Image</span>
+        </div>
+        <button className="flex items-center gap-2 px-6 py-2.5 rounded-lg border border-primary text-primary hover:bg-primary/5 transition-colors text-sm font-medium">
+          <Upload className="h-4 w-4" />
+          Upload from computer
+        </button>
+        <p className="text-sm text-muted-foreground">
+          Drop files here or click the upload button
+        </p>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/common/search-bar.tsx

@@ -0,0 +1,26 @@
+import { Search } from "lucide-react";
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search tools...",
+}: SearchBarProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="w-full pl-10 pr-4 py-2 rounded-lg border border-border bg-background text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
+      />
+    </div>
+  );
+}

apps/web/src/components/common/tool-card.tsx

@@ -0,0 +1,44 @@
+import { Link } from "react-router-dom";
+import { Star, FileImage } from "lucide-react";
+import * as icons from "lucide-react";
+import type { Tool } from "@stirling-image/shared";
+import { cn } from "@/lib/utils";
+
+interface ToolCardProps {
+  tool: Tool;
+}
+
+export function ToolCard({ tool }: ToolCardProps) {
+  const iconsMap = icons as unknown as Record<
+    string,
+    React.ComponentType<{ className?: string }>
+  >;
+  const IconComponent = iconsMap[tool.icon] || FileImage;
+
+  return (
+    <div className="group flex items-center gap-3 relative">
+      <button
+        className="opacity-0 group-hover:opacity-100 transition-opacity absolute -left-5"
+        title="Add to favourites"
+      >
+        <Star className="h-3 w-3 text-muted-foreground hover:text-yellow-500" />
+      </button>
+      <Link
+        to={tool.route}
+        className={cn(
+          "flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors",
+          "hover:bg-muted",
+          tool.disabled && "opacity-50 pointer-events-none"
+        )}
+      >
+        <IconComponent className="h-5 w-5 text-muted-foreground" />
+        <span className="text-sm font-medium text-foreground">{tool.name}</span>
+        {tool.alpha && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-600 font-medium">
+            Alpha
+          </span>
+        )}
+      </Link>
+    </div>
+  );
+}

apps/web/src/components/layout/app-layout.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Sidebar } from "./sidebar";
+import { ToolPanel } from "./tool-panel";
+import { Footer } from "./footer";
+import { Dropzone } from "../common/dropzone";
+
+interface AppLayoutProps {
+  children?: React.ReactNode;
+  showToolPanel?: boolean;
+}
+
+export function AppLayout({ children, showToolPanel = true }: AppLayoutProps) {
+  const [_settingsOpen, setSettingsOpen] = useState(false);
+
+  return (
+    <div className="flex h-screen bg-background text-foreground overflow-hidden">
+      <Sidebar onSettingsClick={() => setSettingsOpen(true)} />
+      {showToolPanel && <ToolPanel />}
+      <main className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
+          {children || <Dropzone />}
+        </div>
+        <div className="text-center text-xs text-muted-foreground py-2 border-t border-border">
+          Privacy Policy
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}

apps/web/src/components/layout/footer.tsx

@@ -0,0 +1,29 @@
+import { Moon, Sun, Globe } from "lucide-react";
+import { useTheme } from "@/hooks/use-theme";
+
+export function Footer() {
+  const { resolvedTheme, toggleTheme } = useTheme();
+
+  return (
+    <div className="fixed bottom-4 right-4 flex items-center gap-2 z-50">
+      <button
+        onClick={toggleTheme}
+        className="p-2 rounded-lg bg-card border border-border hover:bg-muted transition-colors"
+        title="Toggle Theme"
+      >
+        {resolvedTheme === "dark" ? (
+          <Sun className="h-4 w-4" />
+        ) : (
+          <Moon className="h-4 w-4" />
+        )}
+      </button>
+      <button
+        className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-card border border-border hover:bg-muted transition-colors text-sm"
+        title="Language"
+      >
+        <Globe className="h-4 w-4" />
+        English
+      </button>
+    </div>
+  );
+}

apps/web/src/components/layout/sidebar.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import {
+  LayoutGrid,
+  BookOpen,
+  Workflow,
+  FolderOpen,
+  HelpCircle,
+  Settings,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+interface SidebarItem {
+  icon: LucideIcon;
+  label: string;
+  href?: string;
+}
+
+const topItems: SidebarItem[] = [
+  { icon: LayoutGrid, label: "Tools", href: "/" },
+  { icon: BookOpen, label: "Reader", href: "/reader" },
+  { icon: Workflow, label: "Automate", href: "/automate" },
+  { icon: FolderOpen, label: "Files", href: "/files" },
+];
+
+const bottomItems: SidebarItem[] = [
+  { icon: HelpCircle, label: "Help", href: "/help" },
+  { icon: Settings, label: "Settings" },
+];
+
+interface SidebarProps {
+  onSettingsClick: () => void;
+}
+
+export function Sidebar({ onSettingsClick }: SidebarProps) {
+  const location = useLocation();
+
+  const renderItem = (item: SidebarItem, isActive: boolean) => {
+    const content = (
+      <div
+        className={cn(
+          "flex flex-col items-center gap-1 p-2 rounded-lg cursor-pointer transition-colors",
+          isActive
+            ? "bg-primary text-primary-foreground"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground"
+        )}
+      >
+        <item.icon className="h-6 w-6" />
+        <span className="text-[10px] font-medium">{item.label}</span>
+      </div>
+    );
+
+    if (item.label === "Settings") {
+      return (
+        <button key={item.label} onClick={onSettingsClick} className="w-full">
+          {content}
+        </button>
+      );
+    }
+    return (
+      <Link key={item.label} to={item.href || "/"}>
+        {content}
+      </Link>
+    );
+  };
+
+  return (
+    <aside className="flex flex-col items-center w-16 bg-sidebar border-r border-border py-3 gap-1 shrink-0">
+      <div className="flex flex-col gap-1 flex-1">
+        {topItems.map((item) =>
+          renderItem(item, location.pathname === item.href)
+        )}
+      </div>
+      <div className="border-t border-border w-10 my-2" />
+      <div className="flex flex-col gap-1">
+        {bottomItems.map((item) => renderItem(item, false))}
+      </div>
+    </aside>
+  );
+}

apps/web/src/components/layout/tool-panel.tsx

@@ -0,0 +1,57 @@
+import { useState, useMemo } from "react";
+import { TOOLS, CATEGORIES } from "@stirling-image/shared";
+import { SearchBar } from "../common/search-bar";
+import { ToolCard } from "../common/tool-card";
+
+export function ToolPanel() {
+  const [search, setSearch] = useState("");
+
+  const filteredTools = useMemo(() => {
+    if (!search) return TOOLS;
+    const q = search.toLowerCase();
+    return TOOLS.filter(
+      (t) =>
+        t.name.toLowerCase().includes(q) ||
+        t.description.toLowerCase().includes(q)
+    );
+  }, [search]);
+
+  const groupedTools = useMemo(() => {
+    const groups = new Map<string, typeof TOOLS>();
+    for (const tool of filteredTools) {
+      const list = groups.get(tool.category) || [];
+      list.push(tool);
+      groups.set(tool.category, list);
+    }
+    return groups;
+  }, [filteredTools]);
+
+  return (
+    <div className="w-72 border-r border-border bg-background overflow-y-auto flex flex-col shrink-0">
+      <div className="p-3 sticky top-0 bg-background z-10">
+        <SearchBar value={search} onChange={setSearch} />
+      </div>
+      <div className="px-3 pb-4 flex-1">
+        {CATEGORIES.filter((cat) => groupedTools.has(cat.id)).map(
+          (category) => (
+            <div key={category.id} className="mb-4">
+              <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-2">
+                {category.name}
+              </h3>
+              <div className="space-y-0.5">
+                {groupedTools.get(category.id)!.map((tool) => (
+                  <ToolCard key={tool.id} tool={tool} />
+                ))}
+              </div>
+            </div>
+          )
+        )}
+        {filteredTools.length === 0 && (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No tools found
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/pages/home-page.tsx

@@ -0,0 +1,5 @@
+import { AppLayout } from "@/components/layout/app-layout";
+
+export function HomePage() {
+  return <AppLayout />;
+}