hzhang/HangmanLab.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark-tech UI redesign + markdown patch cards

Browse Source 
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>
This commit is contained in:
h z
2026-05-16 17:28:13 +01:00
parent 045c7c51d6
commit 952387d50f
54 changed files with 4503 additions and 1765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/Navigations/SideTabs/TemplateTab.js
View File

@@ -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>
);
};