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

65
src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
View File

@@ -8,7 +8,14 @@ import {
useUpdateMarkdownTemplateSetting
} from "../../../utils/queries/markdown-template-setting-queries";
import React, {useEffect, useState} from "react";
import { Plus, Save } from "lucide-react";
import {useUpdateMarkdownSetting} from "../../../utils/queries/markdown-setting-queries";
import { Button } from "../../ui/button";
import { Label } from "../../ui/input";
import { Spinner } from "../../ui/misc";
const SELECT_CLASS =
"flex h-9 w-full rounded-md border border-input bg-background/60 px-3 py-1 text-sm text-foreground transition-colors focus-visible:outline-none focus-visible:border-primary/60 focus-visible:ring-2 focus-visible:ring-ring/40";
const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
const {data: setting, isFetching: settingIsFetching } = useMarkdownTemplateSetting(markdownSetting?.template_setting_id);
@@ -51,44 +58,48 @@ const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
}
},[template, selectedTemplateId]);
if (settingIsFetching || templatesAreFetching || templatesAreFetching || templateIsFetching) {
return (<p>Loading...</p>);
return (
<div className="flex justify-center py-6">
<Spinner label="Loading template" />
</div>
);
}
return setting ? (
<div className="box" style={{marginTop: "1rem"}}>
<h4 className="title is-5">Template Setting</h4>
<div className="field">
<label className="label">Use Template</label>
<div className="select is-fullwidth">
<select
value={selectedTemplateId}
onChange={(e) => {
setSelectedTemplateId(e.target.value);
}}
>
<option value="">(default)</option>
{templates.map((_template, index) => (
<option key={index} value={_template.id}>{_template.title}</option>
))}
<div className="mt-4 space-y-4 rounded-lg border border-border bg-surface/40 p-5">
<h4 className="font-mono text-sm font-semibold uppercase tracking-wide text-foreground">
Template Setting
</h4>
<div className="space-y-2">
<Label htmlFor="use-template-select">Use Template</Label>
<select
id="use-template-select"
className={SELECT_CLASS}
value={selectedTemplateId}
onChange={(e) => {
setSelectedTemplateId(e.target.value);
}}
>
<option value="">(default)</option>
{templates.map((_template, index) => (
<option key={index} value={_template.id}>{_template.title}</option>
))}
</select>
</div>
</select>
</div>
<button
className="button is-primary"
<Button
type="button"
onClick={handleSaveMarkdownTemplateSetting}
>
Save Template Setting
</button>
<Save className="h-4 w-4" /> Save Template Setting
</Button>
</div>
) : (
<button
className="button is-primary"
<Button
type="button"
onClick={handleCreateTemplateSetting}
>
Create Template Setting
</button>
>
<Plus className="h-4 w-4" /> Create Template Setting
</Button>
);
};