feat: dark-tech UI redesign + markdown patch cards

Redesign the frontend with a dark-tech theme: add Tailwind + PostCSS,
design tokens, and shadcn-style primitives (Button/Card/Input/Dialog/
DropdownMenu/Tabs/ScrollArea/etc.); restyle the app shell, navigation,
sidebar tree, content view, markdown rendering, editors, modals and
settings panels. Behavior/props unchanged; Font Awesome replaced with
lucide-react.

Add the patch cards feature UI: patch-queries hooks and a PatchCards
component rendered below the markdown body, with an Add Patch button
and create/edit dialog.

Fix tree expandability: folders with an index page now expand on name
click (and navigate), and the chevron+folder icon is one larger toggle.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/Navigations/SideTabs/TemplateTab.js

@@ -1,8 +1,12 @@
 import React, { useState } from "react";
 import { useMarkdownTemplates } from "../../../utils/queries/markdown-template-queries";
 import PermissionGuard from "../../PermissionGuard";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { Search, LayoutTemplate, Pencil, Braces } from "lucide-react";
 import JsonSchemaModal from "../../Modals/JsonSchemaModal";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+import { Spinner } from "../../ui/misc";
 
 const TemplateTab = () => {
     const { data: templates, isLoading, error } = useMarkdownTemplates();
@@ -111,53 +115,59 @@ const TemplateTab = () => {
         return schema;
     };
 
-    if (isLoading) return <p>Loading...</p>;
-    if (error) return <p>Error loading templates</p>;
+    if (isLoading) return <Spinner label="Loading templates" />;
+    if (error)
+        return (
+            <p className="font-mono text-xs text-destructive">
+                Error loading templates
+            </p>
+        );
 
     return (
-        <aside className="menu">
-            <div className="control is-expanded">
-                <input
-                    className="input is-small"
+        <div className="space-y-3">
+            <div className="relative">
+                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                    className="h-8 pl-8 text-xs"
                     type="text"
-                    placeholder="Search templates..."
+                    placeholder="Search templates…"
                     onChange={(e) => setKeyword(e.target.value)}
                 />
             </div>
             <PermissionGuard rolesRequired={["admin", "creator"]}>
-                <a
-                    href="/template/create"
-                    className="button is-primary is-small is-fullwidth"
-                    style={{ marginBottom: "10px" }}
-                >
-                    Create New Template
-                </a>
+                <Button asChild size="sm" variant="outline" className="w-full">
+                    <Link to="/template/create">
+                        <LayoutTemplate className="h-4 w-4" /> New Template
+                    </Link>
+                </Button>
             </PermissionGuard>
-            <ul className="menu-list">
+            <ul className="space-y-0.5">
                 {filteredTemplates?.map((template) => (
-                    <li key={template.id}>
-                        <div className="is-flex is-justify-content-space-between is-align-items-center">
-                            <span>{template.title}</span>
-                            <div className="field has-addons is-justify-content-flex-end">
-                                <button
-                                    className="button is-small control"
-                                    onClick={() => handleTemplateClick(template.id)}
-                                    type="button"
-                                >
-                                    <span className="icon">
-                                        <i className="fas fa-edit"></i>
-                                    </span>
-                                </button>
-                                <button
-                                    className="button is-small control"
-                                    onClick={() => setSelectedSchema(generateJsonSchema(template))}
-                                    type="button"
-                                >
-                                    <span className="icon">
-                                        <i className="fas fa-code"></i>
-                                    </span>
-                                </button>
-                            </div>
+                    <li
+                        key={template.id}
+                        className="group flex items-center gap-1 rounded-md px-2 py-1.5 transition-colors hover:bg-accent/60"
+                    >
+                        <LayoutTemplate className="h-3.5 w-3.5 shrink-0 text-secondary/80" />
+                        <span className="min-w-0 flex-1 truncate text-sm text-foreground/90">
+                            {template.title}
+                        </span>
+                        <div className="flex shrink-0 items-center opacity-0 transition-opacity group-hover:opacity-100">
+                            <button
+                                type="button"
+                                className="grid h-6 w-6 place-items-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-primary"
+                                title="Edit"
+                                onClick={() => handleTemplateClick(template.id)}
+                            >
+                                <Pencil className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                                type="button"
+                                className="grid h-6 w-6 place-items-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-primary"
+                                title="JSON schema"
+                                onClick={() => setSelectedSchema(generateJsonSchema(template))}
+                            >
+                                <Braces className="h-3.5 w-3.5" />
+                            </button>
                         </div>
                     </li>
                 ))}
@@ -167,7 +177,7 @@ const TemplateTab = () => {
                 onClose={() => setSelectedSchema(null)}
                 schema={selectedSchema}
             />
-        </aside>
+        </div>
     );
 };
 

src/components/Navigations/SideTabs/TreeTab.js

@@ -1,42 +1,40 @@
 import PermissionGuard from "../../PermissionGuard";
 import PathNode from "../PathNode";
 import React from "react";
-import {useTree} from "../../../utils/queries/tree-queries";
-import {useDeletePath, useUpdatePath} from "../../../utils/queries/path-queries";
+import { Link } from "react-router-dom";
+import { Search, FilePlus2 } from "lucide-react";
+import { useTree } from "../../../utils/queries/tree-queries";
+import { useDeletePath, useUpdatePath } from "../../../utils/queries/path-queries";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+import { Spinner } from "../../ui/misc";
 
 const TreeTab = () => {
-    const {data: tree, isLoading, error} = useTree();
+    const { data: tree, isLoading, error } = useTree();
     const deletePath = useDeletePath();
     const updatePath = useUpdatePath();
     const [keyword, setKeyword] = React.useState("");
+
     const handleDelete = (id) => {
-        if (window.confirm("Are you sure you want to delete this path?")){
+        if (window.confirm("Are you sure you want to delete this path?")) {
             deletePath.mutate(id, {
-                onError: (err) => {
-                    alert("Failed to delete path");
-                },
+                onError: () => alert("Failed to delete path"),
             });
         }
     };
 
     const filterTree = (t, k) => {
-        if(t === undefined)
-            return undefined;
+        if (t === undefined) return undefined;
         if (t.type === "path") {
-            if (t.name.includes(k)) {
-                return { ...t };
-            }
+            if (t.name.includes(k)) return { ...t };
             const filteredChildren = (t.children || [])
                 .map(c => filterTree(c, k))
                 .filter(Boolean);
-
             if (filteredChildren.length > 0) {
                 return { ...t, children: filteredChildren };
             }
         } else if (t.type === "markdown") {
-            if (t.title.includes(k)) {
-                return { ...t };
-            }
+            if (t.title.includes(k)) return { ...t };
         }
         return undefined;
     };
@@ -44,35 +42,49 @@ const TreeTab = () => {
     const filteredTree = filterTree(tree, keyword);
 
     const handleSave = (id, newName) => {
-        updatePath.mutate({ id, data: {name: newName }} , {
-            onError: (err) => {
-                alert("Failed to update path");
-            }
+        updatePath.mutate({ id, data: { name: newName } }, {
+            onError: () => alert("Failed to update path"),
         });
     };
-    if (isLoading) return <p>Loading...</p>;
-    if (error) return <p>Error loading tree</p>;
-    return (
-        <aside className="menu">
 
-            <div className="control is-expanded">
-                <input
-                    className="input is-small"
+    if (isLoading) return <Spinner label="Loading tree" />;
+    if (error)
+        return (
+            <p className="font-mono text-xs text-destructive">
+                Error loading tree
+            </p>
+        );
+
+    return (
+        <div className="space-y-3">
+            <div className="relative">
+                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                    className="h-8 pl-8 text-xs"
                     type="text"
-                    placeholder="Search..."
+                    placeholder="Search…"
                     onChange={(e) => setKeyword(e.target.value)}
                 />
             </div>
+
             <PermissionGuard rolesRequired={["admin", "creator"]}>
-                <a
-                    href="/markdown/create"
-                    className="button is-primary is-small"
+                <Button
+                    asChild
+                    size="sm"
+                    variant="outline"
+                    className="w-full"
                 >
-                    Create New Markdown
-                </a>
+                    <Link to="/markdown/create">
+                        <FilePlus2 className="h-4 w-4" /> New Markdown
+                    </Link>
+                </Button>
             </PermissionGuard>
-            {!filteredTree || filteredTree.length === 0 ?
-                <p>No Result</p> :
+
+            {!filteredTree || filteredTree.length === 0 ? (
+                <p className="px-1 py-6 text-center font-mono text-xs text-muted-foreground">
+                    No result
+                </p>
+            ) : (
                 <PathNode
                     key={1}
                     path={filteredTree}
@@ -80,9 +92,9 @@ const TreeTab = () => {
                     onSave={handleSave}
                     onDelete={handleDelete}
                 />
-            }
-        </aside>
+            )}
+        </div>
     );
 };
 
-export default TreeTab;
+export default TreeTab;