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/Markdowns/MarkdownContent.js

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from "react";
 import {Link, useParams} from "react-router-dom";
 import "katex/dist/katex.min.css";
 import "./MarkdownContent.css";
+import { Settings2, Pencil } from "lucide-react";
 import MarkdownView from "./MarkdownView";
+import PatchCards from "./PatchCards";
 import PermissionGuard from "../PermissionGuard";
 import {useMarkdown} from "../../utils/queries/markdown-queries";
 import {usePath} from "../../utils/queries/path-queries";
@@ -11,6 +13,8 @@ import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries
 import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
 import MarkdownSettingModal from "../Modals/MarkdownSettingModal";
 import { parseMarkdownContent } from "../../utils/safe-json";
+import { Button } from "../ui/button";
+import { Spinner } from "../ui/misc";
 
 const MarkdownContent = () => {
     const { strId } = useParams();
@@ -33,49 +37,62 @@ const MarkdownContent = () => {
     const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching || isTemplateFetching;
 
     if (notReady) {
-        return <div>Loading...</div>;
+        return (
+            <div className="flex justify-center py-20">
+                <Spinner label="Loading content" />
+            </div>
+        );
     }
 
     if (error) {
-        return <div>Error: {error.message || "Failed to load content"}</div>;
+        return (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 font-mono text-sm text-destructive">
+                Error: {error.message || "Failed to load content"}
+            </div>
+        );
     }
     if (markdown.isMessage) {
-
         return (
-            <div className="markdown-content-container">
-                <div className="notification is-info">
-                    <h4 className="title is-4">{markdown.title}</h4>
-                    <p>{markdown.content}</p>
-                </div>
+            <div className="rounded-lg border border-primary/30 bg-primary/10 px-5 py-4">
+                <h4 className="mb-1 font-mono text-base font-semibold text-primary">
+                    {markdown.title}
+                </h4>
+                <p className="text-sm text-foreground/80">{markdown.content}</p>
             </div>
         );
     }
 
     return (
-        <div className="markdown-content-container">
-            <div className="is-flex is-justify-content-space-between is-align-items-center markdown-content-container-header">
-                <h1 className="title">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
+        <article>
+            <div className="mb-6 flex items-start justify-between gap-4 border-b border-border pb-4">
+                <h1 className="font-mono text-3xl font-bold tracking-tight text-foreground">
+                    {markdown.title === "index" ? indexTitle : markdown.title}
+                </h1>
                 <PermissionGuard rolesRequired={['admin']}>
-                    <div className="field has-addons">
-                        <button
-                            className="control button is-info is-light"
+                    <div className="flex shrink-0 items-center gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
                             onClick={() => setSettingModalOpen(true)}
                         >
-                            Settings
-                        </button>
-                        <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
-                            Edit
-                        </Link>
+                            <Settings2 className="h-4 w-4" /> Settings
+                        </Button>
+                        <Button asChild size="sm">
+                            <Link to={`/markdown/edit/${id}`}>
+                                <Pencil className="h-4 w-4" /> Edit
+                            </Link>
+                        </Button>
                     </div>
                 </PermissionGuard>
             </div>
             <MarkdownView content={parseMarkdownContent(markdown.content)} template={template}/>
-            <MarkdownSettingModal 
+            <PatchCards markdownId={id} />
+            <MarkdownSettingModal
                 isOpen={isSettingModalOpen}
                 markdown={markdown}
                 onClose={() => setSettingModalOpen(false)}
             />
-        </div>
+        </article>
     );
 };