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/Modals/JsonSchemaModal.js

@@ -1,4 +1,14 @@
 import React from 'react';
+import { Copy } from 'lucide-react';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+} from '../ui/dialog';
+import { Button } from '../ui/button';
+import { Textarea } from '../ui/input';
 
 const JsonSchemaModal = ({ isActive, onClose, schema }) => {
     const handleCopy = () => {
@@ -6,37 +16,27 @@ const JsonSchemaModal = ({ isActive, onClose, schema }) => {
     };
 
     return (
-        <div className={`modal ${isActive ? 'is-active' : ''}`}>
-            <div className="modal-background" onClick={onClose}></div>
-            <div className="modal-card">
-                <header className="modal-card-head">
-                    <p className="modal-card-title">JSON Schema</p>
-                    <button className="delete" aria-label="close" onClick={onClose}></button>
-                </header>
-                <section className="modal-card-body">
-                    <div className="field">
-                        <div className="control">
-                            <textarea
-                                className="textarea"
-                                value={JSON.stringify(schema, null, 2)}
-                                readOnly
-                                style={{ height: "50vh" }}
-                            />
-                        </div>
-                    </div>
-                </section>
-                <footer className="modal-card-foot">
-                    <button className="button is-primary" onClick={handleCopy}>
-                        <span className="icon">
-                            <i className="fas fa-copy"></i>
-                        </span>
-                        <span>copy</span>
-                    </button>
-                    <button className="button" onClick={onClose}>close</button>
-                </footer>
-            </div>
-        </div>
+        <Dialog open={isActive} onOpenChange={(o) => { if (!o) onClose(); }}>
+            <DialogContent className="max-w-2xl">
+                <DialogHeader>
+                    <DialogTitle>JSON Schema</DialogTitle>
+                </DialogHeader>
+                <Textarea
+                    className="h-[50vh] font-mono text-xs"
+                    value={JSON.stringify(schema, null, 2)}
+                    readOnly
+                />
+                <DialogFooter>
+                    <Button variant="outline" onClick={onClose}>
+                        Close
+                    </Button>
+                    <Button onClick={handleCopy}>
+                        <Copy className="h-4 w-4" /> Copy
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     );
 };
 
-export default JsonSchemaModal; 
+export default JsonSchemaModal;