flowbook 0.2.15 → 0.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbook",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "type": "module",
   "bin": {
     "flowbook": "dist/cli.js"

package/src/client/App.tsx

@@ -6,7 +6,7 @@ import { EmptyState } from "./components/EmptyState";
 
 export function App() {
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [searchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
 
   const filteredFlows = useMemo(() => {
     if (!searchQuery) return data.flows;
@@ -38,14 +38,18 @@ export function App() {
           <span className="ml-4 text-sm font-mono" style={{ color: 'var(--fb-text-muted)' }}>
             flowbook — localhost:6200
           </span>
+          <span className="ml-auto text-sm font-mono" style={{ color: 'var(--fb-text-muted)' }}>
+            {data.flows.length} flows
+          </span>
         </div>
-
         {/* Content area */}
         <div className="flex" style={{ height: '520px' }}>
           <Sidebar
             flows={filteredFlows}
             selectedId={selectedId}
             onSelect={setSelectedId}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
           />
           <main className="flex-1 overflow-auto" style={{ background: 'var(--fb-bg-content)' }}>
             {selectedFlow ? (

package/src/client/components/FlowView.tsx

@@ -8,10 +8,22 @@ interface FlowViewProps {
 export function FlowView({ flow }: FlowViewProps) {
   return (
     <div className="p-8 max-w-5xl mx-auto">
-      {/* Title */}
-      <h1 className="text-2xl font-bold mb-1" style={{ color: 'var(--fb-text-primary)' }}>
-        {flow.title}
-      </h1>
+      {/* Title + Category badge */}
+      <div className="flex items-center gap-3 mb-1">
+        <h1 className="text-2xl font-bold" style={{ color: 'var(--fb-text-primary)' }}>
+          {flow.title}
+        </h1>
+        <span
+          className="px-2.5 py-0.5 rounded-md text-xs font-medium"
+          style={{
+            background: 'rgba(99, 102, 241, 0.12)',
+            color: '#818cf8',
+            border: '1px solid rgba(99, 102, 241, 0.2)',
+          }}
+        >
+          {flow.category}
+        </span>
+      </div>
 
       {/* Description */}
       {flow.description && (

package/src/client/components/MermaidRenderer.tsx

@@ -121,6 +121,12 @@ export function MermaidRenderer({ code, className }: Props) {
     };
   }, [code, safeId]);
 
+  // Reset zoom & pan when switching to a different diagram
+  useEffect(() => {
+    setScale(1);
+    setPos({ x: 0, y: 0 });
+  }, [code]);
+
   // Wheel zoom (non-passive to allow preventDefault)
   useEffect(() => {
     const el = containerRef.current;

package/src/client/components/Sidebar.tsx

@@ -1,13 +1,15 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import type { FlowEntry } from "../../types";
 
 interface SidebarProps {
   flows: FlowEntry[];
   selectedId: string | null;
   onSelect: (id: string) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
 }
 
-export function Sidebar({ flows, selectedId, onSelect }: SidebarProps) {
+export function Sidebar({ flows, selectedId, onSelect, searchQuery, onSearchChange }: SidebarProps) {
   const categories = useMemo(() => {
     const map = new Map<string, FlowEntry[]>();
     for (const flow of flows) {
@@ -21,45 +23,107 @@ export function Sidebar({ flows, selectedId, onSelect }: SidebarProps) {
     return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
   }, [flows]);
 
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+
+  function toggleCategory(category: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) next.delete(category);
+      else next.add(category);
+      return next;
+    });
+  }
+
   return (
     <aside
-      className="w-64 overflow-y-auto shrink-0 border-r"
+      className="w-64 overflow-y-auto shrink-0 border-r flex flex-col"
       style={{
         background: 'var(--fb-bg-sidebar)',
         borderColor: 'var(--fb-border)',
       }}
     >
-      <nav className="p-5 space-y-4">
-        {categories.map(([category, items]) => (
-          <div key={category}>
-            <h3
-              className="text-xs font-bold uppercase tracking-widest mb-2 px-2"
-              style={{ color: 'var(--fb-text-muted)' }}
-            >
-              {category}
-            </h3>
-            <div className="space-y-0.5">
-              {items.map((flow) => {
-                const isActive = selectedId === flow.id;
-                return (
-                  <button
-                    key={flow.id}
-                    onClick={() => onSelect(flow.id)}
-                    className={`w-full text-left px-4 py-2 rounded-lg text-sm transition-colors ${
-                      isActive ? 'font-medium' : 'hover:bg-white/5'
-                    }`}
-                    style={{
-                      color: isActive ? 'var(--fb-accent-green)' : 'var(--fb-text-secondary)',
-                      background: isActive ? 'rgba(74, 222, 128, 0.08)' : undefined,
-                    }}
-                  >
-                    {flow.title}
-                  </button>
-                );
-              })}
+      {/* Search */}
+      <div className="p-3 border-b" style={{ borderColor: 'var(--fb-border)' }}>
+        <div className="relative">
+          <svg
+            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4"
+            style={{ color: 'var(--fb-text-muted)' }}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.35-4.35" />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search flows..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="w-full pl-9 pr-3 py-2 rounded-lg text-sm outline-none"
+            style={{
+              background: 'rgba(255,255,255,0.05)',
+              color: 'var(--fb-text-primary)',
+              border: '1px solid var(--fb-border)',
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Categories */}
+      <nav className="p-3 space-y-1 flex-1 overflow-y-auto">
+        {categories.map(([category, items]) => {
+          const isCollapsed = collapsed.has(category);
+          return (
+            <div key={category}>
+              <button
+                onClick={() => toggleCategory(category)}
+                className="w-full flex items-center gap-1.5 px-2 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-white/5 transition-colors"
+                style={{ color: 'var(--fb-text-muted)' }}
+              >
+                <svg
+                  className="w-3 h-3 transition-transform"
+                  style={{ transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)' }}
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                </svg>
+                <span className="flex-1 text-left">{category}</span>
+                <span
+                  className="text-xs font-medium tabular-nums"
+                  style={{ color: 'var(--fb-text-muted)', opacity: 0.7 }}
+                >
+                  {items.length}
+                </span>
+              </button>
+              {!isCollapsed && (
+                <div className="space-y-0.5 mt-0.5">
+                  {items.map((flow) => {
+                    const isActive = selectedId === flow.id;
+                    return (
+                      <button
+                        key={flow.id}
+                        onClick={() => onSelect(flow.id)}
+                        className={`w-full text-left px-4 py-2 rounded-lg text-sm transition-colors ${
+                          isActive ? 'font-medium' : 'hover:bg-white/5'
+                        }`}
+                        style={{
+                          color: isActive ? 'var(--fb-accent-green)' : 'var(--fb-text-secondary)',
+                          background: isActive ? 'rgba(74, 222, 128, 0.08)' : undefined,
+                          paddingLeft: '1.75rem',
+                        }}
+                      >
+                        {flow.title}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
             </div>
-          </div>
-        ))}
+          );
+        })}
         {categories.length === 0 && (
           <p className="text-sm px-2 py-4 text-center" style={{ color: 'var(--fb-text-muted)' }}>
             No flows found