feat(web): editor UX enhancements round 2 (#532)#535
Merged
Conversation
…name, download rework, splitter clamp (#532) - Entrance animations for the empty screen, how-to modal, and settings modal (fade/scale-in; honors prefers-reduced-motion by snapping to the final visible state so a fade-in never leaves an element invisible). - Replace the empty-screen tagline "設定定義 × テンプレート → 再現可能なコマンド" with the value-forward "値を変えるだけで、コマンドも手順書も。". - App-bar filename is now an editable field and is the download filename base; the download-filename input is removed from the settings modal. - Download extension is derived from the output mode (手順書 → .md, Raw → .txt) instead of a settings radio; the save button moves to the pane footer, copy stays in the header. DownloadOptions drops fname/ext. - Clamp the splitter with per-side minimum widths so neither pane header clips (the left header is wider than the right); falls back to 50/50 when the window is too small to grant both floors. Item 3 (template sub-categories) is intentionally not included: no such implementation exists in git history (see #532), so it is a new feature pending an owner decision rather than a restoration. Refs #532, #529 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AnNqAtPC31wodDZmYiRgz4
Implements item 3 as a new feature (no prior implementation existed in history — see #532). Adds a required `subCategory` field to Template and groups the library card grid into sub-category sections with headings + counts. Sub-categories follow each category's natural technical axis: network by vendor/product (Cisco, YAMAHA, firewalld), server by distro (Ubuntu / Debian), DNS by software (BIND), runbooks by target system (ネットワーク, プロキシ / Web), AI infra by product (NVIDIA DGX, step-ca / Caddy). Groups are ordered by category (so same-category sub-categories stay adjacent, incl. the "すべて" view) then by first appearance; the left category rail is unchanged. Refs #532 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AnNqAtPC31wodDZmYiRgz4
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
#532) - Splitter floors are now re-clamped on window resize, not only during a pointer drag: dragging wide then shrinking the window could otherwise drop a pane below its min width and clip its header (the exact case the floors exist to prevent). - The footer save-button label no longer misrepresents the saved file: it is built from the same sanitized base as the download and discloses the timestamp suffix as "（+日時）" (instead of a concrete time that would drift from the click-time value) when the timestamp toggle is on. - The document name is sanitized (path separators / reserved punctuation / leading dots stripped) before it becomes the <a download> filename, so a typed name like "report/v2" can't produce a broken, OS-dependent name. - The filename input gains a maxLength and the footer label truncates a long base, so a very long name can't overflow the footer. The input shows a "command" placeholder so an emptied field matches the download fallback. Adds component tests for the sanitize, empty-fallback, and timestamp-note behavior; the resize re-clamp is verified end-to-end in the browser. Refs #532 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AnNqAtPC31wodDZmYiRgz4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Second UX round on the
web/2-pane editor (after #530). Six items; scope isweb/srconly. Closes #532.Changes
settings modal (fade/scale-in via CSS keyframes; honors
prefers-reduced-motionby snapping to the visible end state so a fade-innever leaves an element invisible).
previous "… → 再現可能なコマンド" line.
existed in git history; see web: editor UX enhancements round 2 (animations, catchphrase, editable filename, download rework, splitter clamp) #532). Adds
Template.subCategoryand groups thecard grid into sub-category sections with headings + counts, using each
category's natural technical axis: network by vendor/product (Cisco, YAMAHA,
firewalld), server by distro (Ubuntu / Debian), DNS by application (BIND),
runbooks by target system (ネットワーク, プロキシ / Web), AI infra by product
(NVIDIA DGX, step-ca / Caddy). Groups are ordered by category (same-category
sub-categories stay adjacent, incl. the "すべて" view); the left rail is
unchanged.
base. The download-filename input is removed from the settings modal.
settings radio; the save button moves to the pane footer, copy stays in the
header.
DownloadOptionsdropsfname/ext.(the left header is wider than the right); falls back to 50/50 when the
window is too small to grant both floors.
Verification
tsc -b+vite build+ Vitest (41 passed, incl. new component tests for thedownload filename/extension logic). Browser checks (Playwright/Chromium) for the
entrance animations, the catchphrase swap, sub-category grouping, and the
splitter clamp at min/max widths. The only failing test is
pyodide-runtime.node.test.ts, which fails in this offline environment becausethe Pyodide wheels are not vendored — it passes in CI, and is unrelated to this
diff.
Refs #532, #529
🤖 Generated with Claude Code
Generated by Claude Code