flowbook 0.2.12 → 0.2.14

package/package.json

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

package/src/client/components/FlowView.tsx

@@ -8,6 +8,37 @@ 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>
+
+      {/* Description */}
+      {flow.description && (
+        <p className="text-sm mb-4" style={{ color: 'var(--fb-text-secondary)' }}>
+          {flow.description}
+        </p>
+      )}
+
+      {/* Tags */}
+      {flow.tags.length > 0 && (
+        <div className="flex flex-wrap gap-2 mb-6">
+          {flow.tags.map((tag) => (
+            <span
+              key={tag}
+              className="px-2 py-0.5 rounded-full text-xs font-medium"
+              style={{
+                background: 'rgba(99, 102, 241, 0.15)',
+                color: '#a5b4fc',
+                border: '1px solid rgba(99, 102, 241, 0.25)',
+              }}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
       {/* Diagrams */}
       <div className="space-y-6">
         {flow.mermaidBlocks.map((block, i) => (

package/src/client/components/Sidebar.tsx

@@ -15,18 +15,12 @@ export function Sidebar({ flows, selectedId, onSelect }: SidebarProps) {
       if (!map.has(cat)) map.set(cat, []);
       map.get(cat)!.push(flow);
     }
+    for (const items of map.values()) {
+      items.sort((a, b) => a.order - b.order);
+    }
     return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
   }, [flows]);
 
-  const selectedFlow = flows.find((f) => f.id === selectedId);
-  const selectedCategory = selectedFlow?.category ?? null;
-
-  function handleCategoryClick(items: FlowEntry[]) {
-    if (items.length > 0) {
-      onSelect(items[0].id);
-    }
-  }
-
   return (
     <aside
       className="w-64 overflow-y-auto shrink-0 border-r"
@@ -35,42 +29,43 @@ export function Sidebar({ flows, selectedId, onSelect }: SidebarProps) {
         borderColor: 'var(--fb-border)',
       }}
     >
-      <div className="p-5">
-        <h2
-          className="text-xs font-bold uppercase tracking-widest mb-5"
-          style={{ color: 'var(--fb-text-primary)' }}
-        >
-          Categories
-        </h2>
-        <nav className="space-y-1">
-          {categories.map(([category, items]) => {
-            const isActive = selectedCategory === category;
-
-            return (
-              <button
-                key={category}
-                onClick={() => handleCategoryClick(items)}
-                className={`w-full text-left px-4 py-2.5 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,
-                }}
-              >
-                {category}
-              </button>
-            );
-          })}
-          {categories.length === 0 && (
-            <p className="text-sm px-2 py-4 text-center" style={{ color: 'var(--fb-text-muted)' }}>
-              No flows found
-            </p>
-          )}
-        </nav>
-      </div>
+      <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>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+        {categories.length === 0 && (
+          <p className="text-sm px-2 py-4 text-center" style={{ color: 'var(--fb-text-muted)' }}>
+            No flows found
+          </p>
+        )}
+      </nav>
     </aside>
   );
 }