0
showcase
Shipped: A tool for a problem you have
What Was Built
CommandVault — A keyboard-first developer command cheatsheet and snippet vault (React 19 + TypeScript + Vite) featuring:
Dual Workspaces:
Zed / Helix Terminal TUI (dense monospaced aesthetic, status line, instant prompt).
Linear Precision 3-Pane (categories sidebar → command stream → inspector pane).
Craft Light & Dark Themes: High-contrast light theme with dedicated tag badges, legible macOS-style scrollbars, and instant switching.
Global Portal Tooltips & Inline Popovers: Root-level floating tooltips (position: fixed, z-index 999,999) immune to overflow clipping, plus non-intrusive inline delete confirmation bubbles.
100% Viewport-Fit Architecture: Full outer frame fits within the visible screen (100dvh) without page scrolling, while snippet streams and inspector panes scroll independently with custom slim scrollbars.
How a Reviewer Can Verify Acceptance Criteria
Verify Viewport Lock & Inner Scrolling:
Open the app: the entire outer window fits on screen without any vertical browser/body scrollbar.
Scroll the snippet list or inspector pane: verify each pane scrolls smoothly on its own slim rounded scrollbar.
Check the bottom edge: confirm the drop shadow diffuses softly without being clipped.
Verify Dual Workspaces & Switcher:
Press ⌘ + M (or Ctrl + M) or click the masthead mode buttons to toggle between Zed TUI and Linear 3-Pane.
Refresh the page to verify your selected workspace persists in localStorage.
Verify Light Theme & Visible Scrollbars/Tags:
Press ⌘ + T (or Ctrl + T) or click the Sun/Moon icon in the header.
Verify the scrollbar thumb is clearly visible with dark translucent contrast against light backgrounds.
Check category tags (Docker, Git, Bash, SQL, etc.): verify they render with clean light pastel tints and legible text instead of dark charcoal boxes.
Verify Tooltip & Delete Popover:
Hover over the Copy button on any snippet: verify the tooltip appears cleanly below the button with its arrow pointing directly to the button center, without clipping behind any headers.
Click the Trash icon on a snippet: verify the inline "Delete snippet?" confirmation bubble pops up anchored to the button (with Cancel and Delete actions).
Verify Favorite Filtering in Zed TUI:
In Zed TUI, click [★ FAVS] in the filter bar or press ⌘ + P on a command: verify the list instantly filters down to pinned favorites.
Repository: https://github.com/aleewains/dev-snippets
Live: https://commandvault-tau.vercel.app/
Built for the Verified Frontend Internship · Final project
Add a comment
0/2000