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

61
src/components/Settings/MarkdownSettings/MarkdownPermissionSettingPanel.js
View File

@@ -4,7 +4,14 @@ import {
useUpdateMarkdownPermissionSetting
} from "../../../utils/queries/markdown-permission-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 MarkdownPermissionSettingPanel = ({markdownSetting, onClose}) => {
const {data: setting, isFetching: settingIsFetching } = useMarkdownPermissionSetting(markdownSetting?.permission_setting_id);
@@ -49,42 +56,46 @@ const MarkdownPermissionSettingPanel = ({markdownSetting, onClose}) => {
};
if (settingIsFetching) {
return (<p>Loading...</p>);
return (
<div className="flex justify-center py-6">
<Spinner label="Loading permission" />
</div>
);
}
return setting ? (
<div className="box" style={{marginTop: "1rem"}}>
<h4 className="title is-5">Permission Setting</h4>
<div className="field">
<label className="label">Permission</label>
<div className="select is-fullwidth">
<select
value={permission}
onChange={(e) => setPermission(e.target.value)}
>
<option value="">(None)</option>
<option value="public">public</option>
<option value="protected">protected</option>
<option value="private">private</option>
</select>
</div>
<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">
Permission Setting
</h4>
<div className="space-y-2">
<Label htmlFor="permission-select">Permission</Label>
<select
id="permission-select"
className={SELECT_CLASS}
value={permission}
onChange={(e) => setPermission(e.target.value)}
>
<option value="">(None)</option>
<option value="public">public</option>
<option value="protected">protected</option>
<option value="private">private</option>
</select>
</div>
<button
className="button is-primary"
<Button
type="button"
onClick={handleSaveMarkdownPermissionSetting}
>
Save Permission Setting
</button>
<Save className="h-4 w-4" /> Save Permission Setting
</Button>
</div>
) : (
<button
className="button is-primary"
<Button
type="button"
onClick={handleCreatePermissionSetting}
>
Create Permission Setting
</button>
>
<Plus className="h-4 w-4" /> Create Permission Setting
</Button>
);
};