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

88
src/components/PathManager.js
View File

@@ -1,9 +1,13 @@
import React, {useEffect, useState, useRef, useContext} from "react";
import {useCreatePath, usePaths} from "../utils/queries/path-queries";
import { useQueryClient } from "@tanstack/react-query";
import { Plus } from "lucide-react";
import "./PathManager.css";
import {fetch_} from "../utils/request-utils";
import {ConfigContext} from "../ConfigProvider";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import { Spinner } from "./ui/misc";
const PathManager = ({ currentPathId = 1, onPathChange }) => {
@@ -104,30 +108,26 @@ const PathManager = ({ currentPathId = 1, onPathChange }) => {
};
return (
<div className="path-manager">
<div className="path-manager-header field has-addons">
<div className="current-path control">
{currentFullPath.map((path, index) => (
<span
key={path.id}
className="tag is-clickable is-link is-light"
onClick={() => handlePathClick(path.id, index)}
>
{path.name + "/"}
</span>
))}
</div>
<div className="control">
<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>
<div className="path-manager space-y-3">
<div className="flex flex-wrap items-center gap-1.5">
{currentFullPath.map((path, index) => (
<button
type="button"
key={path.id}
className="rounded-md border border-border bg-surface/60 px-2 py-1 font-mono text-xs text-primary transition-colors hover:border-primary/60"
onClick={() => handlePathClick(path.id, index)}
>
{path.name + "/"}
</button>
))}
</div>
<div className="path-manager-body">
<div className="field has-addons">
<div className="control">
<input
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Input
ref={inputRef}
className="input is-small"
className="h-8 text-xs"
type="text"
placeholder="Search or create directory"
value={searchTerm}
@@ -136,42 +136,42 @@ const PathManager = ({ currentPathId = 1, onPathChange }) => {
onBlur={handleInputBlur}
onKeyDown={handleKeyDown}
/>
</div>
<div className="control">
<button
className="button is-small is-primary"
onClick={handleAddDirectory}
disabled={isSubPathsLoading || !searchTerm.trim()}
type="button"
>
Create "{searchTerm}"
</button>
</div>
</div>
{dropdownActive && (
<div className="dropdown is-active">
<div className="dropdown-menu">
<div className="dropdown-content">
{dropdownActive && (
<div className="path-manager-dropdown absolute left-0 top-full z-20 mt-1 w-full overflow-y-auto rounded-md border border-border bg-card shadow-glow">
{filteredSubPaths.length > 0 ? (
filteredSubPaths.map((subPath) => (
<a
<button
type="button"
key={subPath.id}
className="dropdown-item"
className="block w-full px-3 py-2 text-left text-xs text-foreground transition-colors hover:bg-accent"
onClick={() => handleSubPathSelect(subPath)}
>
{subPath.name}
</a>
</button>
))
) : (
<div className="dropdown-item">No matches found</div>
<div className="px-3 py-2 text-xs text-muted-foreground">
No matches found
</div>
)}
</div>
</div>
)}
</div>
<Button
type="button"
size="sm"
onClick={handleAddDirectory}
disabled={isSubPathsLoading || !searchTerm.trim()}
>
<Plus className="h-4 w-4" /> Create "{searchTerm}"
</Button>
</div>
{isSubPathsLoading && <Spinner label="Loading paths" />}
{subPathsError && (
<p className="font-mono text-xs text-destructive">
Error loading subdirectories.
</p>
)}
{isSubPathsLoading && <p>Loading...</p>}
{subPathsError && <p>Error loading subdirectories.</p>}
</div>
</div>
);