design: declutter the studio shell — quiet chrome, one accent moment - #27
Merged
Conversation
Multi-agent UX audit (6 dimensions + adversarial critique) measured ~70 interactive chrome elements before any content, the same datum repeated 2-4x across strips, and 5-6 accent hues competing per viewport. Shell: - TopBar 12 items -> 6: cut dead glyphs, PRODUCTION/ONLINE dup, Monitoring (gag re-homed in the command palette), version tag - QueryChrome 5 strips -> 4 bands, 29 interactive -> 8 visible: single RUN toolbar, README tab and Query/Copy/SANDBOX/AI controls removed, results row trimmed to Results/Explain/History/Autopilot + a real overflow menu holding the remaining feature-tease gags, duplicate meta strips deleted - StatusBar 15 items -> 9: one animated Connected pulse (the only one left on the page), real links promoted, single faint identity cluster - Explorer: count de-pilled, badges quieted, carets dim at rest, footer with conflicting v1.2.5 removed, CONNECTIONS label and search placeholder dropped Hero: subtitle rewritten with DB names as green SQL string literals (one hue instead of five), stats deduped (MIT/OSS merged, AI keeps purple), family cards neutralized, studio self-link now a div, footnotes trimmed. A11y bundle: skip-to-content link, :focus-visible ring, aria-labels on explorer asides, 40px mobile hit areas, honest "Live Demo" mobile CTA, fake buttons demoted to spans (~66 -> 33 tab stops before the hero CTA), toast glyph cleanup + keyboard focus pauses auto-dismiss. Section pages: Features kickers single-hue (AI keeps purple), TechStack/ Reliability stat rainbows flattened, Redis off the error-red token. Design doc: docs/designs/2026-07-15-declutter-shell-design.md Before/after: docs/designs/_ref/shots/declutter-*.png Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- QueryChrome: both toolbars gone (5 strips -> 3 bands); RUN moves in front of the SQL statement, DataGrip-style; command+Enter chip dropped (shortcut still wired via title tooltip) - TopBar: libredb.org connection chip removed — the visitor is already on the site; brand + GitHub/Playground/palette/Live Demo remain - MobileTopBar: brand name instead of the URL, ONLINE microline dropped - Explorer: CONNECTIONS label and search placeholder removed - Keyboard path to the hero CTA: 28 tab stops (was ~66) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The explorer now opens directly with the tree header + search — the visitor is already on libredb.org, the connection fiction lives on in the StatusBar's Connected pulse. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR implements a “decluttered” LibreDB Studio IDE-shell UI by reducing repetitive chrome, consolidating actions into fewer bands/menus, and tightening the color/type scale, with a stated goal of improving keyboard tab-stop count and overall hierarchy.
Changes:
- Streamlines Studio chrome (TopBar / QueryChrome / StatusBar / Explorer) and moves secondary “gag” actions into overflow/palette.
- Adds an IDE-style global
:focus-visiblering and updates toast behavior to pause dismiss while interacted with. - Flattens section-page color accents to preserve a single primary accent moment (AI stays purple; other categories quieted).
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | Adds global focus ring; adjusts Explorer row/caret visual states |
| src/scripts/studio.ts | Removes StatusBar meta sync; improves toast pause/resume; adds chrome menu closing behavior; adds palette “Live monitoring” |
| src/scripts/lib/console-copy.ts | Removes leading glyphs from notice copy |
| src/data/schemas.ts | Quiets schema badge styling (text-only, dim) |
| src/components/studio/TopBar.astro | Reduces top bar items and adjusts sizing/color emphasis |
| src/components/studio/StudioShell.astro | Adds skip link, labels Explorer asides, and updates StatusBar usage |
| src/components/studio/StatusBar.astro | Simplifies status bar content and consolidates “IDE identity cluster” |
| src/components/studio/QueryChrome.astro | Collapses multiple toolbars into editor + results row; adds overflow menu |
| src/components/studio/MobileTopBar.astro | Aligns mobile bar with new branding/CTA and improves close hit area |
| src/components/studio/MobileQueryCard.astro | Adjusts Explain control styling/spacing on mobile |
| src/components/studio/Explorer.astro | Removes connections header/footer; quiets badges; tweaks spacing/hit areas |
| src/components/sections/TechStackSection.astro | Flattens layer header colors to bright/neutral |
| src/components/sections/ProvidersSection.astro | Moves Redis off “error” color token |
| src/components/sections/HomeSection.astro | Rewrites hero/subtitle/stats and de-rainbows DB list into SQL-literal styling |
| src/components/sections/FeaturesSection.astro | Flattens feature category colors (AI remains purple) |
| src/components/sections/DatabaseReliabilitySection.astro | Flattens reliability stat colors to bright/neutral |
| docs/designs/2026-07-15-declutter-shell-design.md | Adds design rationale/spec documenting declutter and a11y goals |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…plain · overflow
Per owner review: the Explorer header row ("Explorer · 14") goes — the
sidebar is now just search + tree; History and Autopilot leave the
visible results row and join the other gags inside the overflow menu.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Every hero element now states one fact exactly once: badge = license/ open-source, H1 = AI + SQL IDE, subtitle = the seven engines + SSO, CTAs = demo/deploy. The stats grid is deleted outright — all four tiles (1-click deploy, MIT, AI, SSO) repeated facts already visible in the same viewport. Footnote trimmed to the unique open-core fact; the home export payload ships the engine list instead of the deleted stats. The full homepage now fits a single 1440x900 viewport. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The explorer rows read as navigation without instruction, and the family cards' status labels already tell the open-core story — the sustainability pitch belongs on /platform or the FAQ, not a faint hero footnote. The homepage is now a single screen with zero repeated facts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…s documentation and components This commit standardizes the terminology used throughout the project, reflecting the transition from pre-alpha to early-beta. Changes include updates to design documents, component sections, and schema definitions to ensure consistency in messaging regarding the project's readiness for production.
…s.yaml
The studio repo's channel inventory (distribution/channels.yaml) is the
source of truth; the page now mirrors its live channels:
- Added missing live install methods as first-class registry cards:
Homebrew tap, Snap Store, GitHub Releases (tarballs + .deb/.rpm)
- Deleted all 26 "planned" targets and the all-planned Cloud hyperscalers
category — the site lists only what works today; one positive comment
line ("any Docker host works today") replaces five aspirational cards
- Deleted the category summary strip (counts duplicated the sections
below) and the investor star-total band (summing third-party platforms'
stars overstated traction)
- Fixed a real bug: the star-refresh script used `import` inside a
data-astro-rerun inline script and threw "Cannot use import statement
outside a module" on every load — live star counts had never refreshed;
the formatStars helper is now mirrored inline
- deploy explain/description strings updated; tests now assert the
live-channel mirror and that no planned target is listed
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
cevheri
force-pushed
the
design/declutter-shell
branch
from
July 15, 2026 03:18
941de7a to
a9e2b85
Compare
The status bar is the site's only footer — the conventional home for social links. X and YouTube are the two highest-value channels for a dev audience (community + product demos); Instagram deliberately skipped as the weakest fit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Owner call: all four social channels are actively maintained, and the bar stays comfortable — verified no overflow down to the 1024px desktop breakpoint. Final link set: GitHub · LinkedIn · X · YouTube · Instagram · Reddit · Docker · Sponsor · Privacy. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds the LibreDB Studio promo (youtu.be/wJPWPe1mJes) under the hero CTAs. Facade pattern: a self-hosted poster + play button costs zero third-party bytes and sets no cookies at rest; pressing play swaps in a youtube-nocookie.com iframe with autoplay (new 'video' action in the delegated studio.ts handler, VT-safe). Verified end-to-end with Playwright. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
Added per owner review: the 60-second promo video now sits under the hero CTAs as a click-to-load facade — self-hosted poster, zero third-party bytes/cookies until play, then a |
Verified each of the 6 unique findings against the code; 4 warranted changes, 2 were by-design/outdated (answered in-thread): - studio.ts header no longer claims syncActive updates the StatusBar - toast auto-dismiss now tracks hover+focus state so a mouse pass-over can't restart the timer under a still-focused toast - explorer columns get a keyboard path without restoring 15 tab stops: ArrowRight/ArrowLeft on the focused row link expands/collapses - focus indicators: palette input gains focus:border-primary; the Playground reset/textarea/Run drop focus:outline-none so the global :focus-visible ring applies (the other outline-none usages already pair with focus:border-primary) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- "a early-beta" -> "an early-beta" in the reliability explain text - the registry test now asserts the exact set of 8 live channel slugs instead of a count plus a 6-slug subset The other three comments were stale or by-design (answered in-thread): the toast timer already tracks hover+focus state, the explorer columns already have an ArrowRight/ArrowLeft keyboard path, and the "+" span is a deliberately non-focusable decorative gag. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
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.
Why
The IDE-shell concept is loved, but the page reads as overloaded — too many icons, buttons, labels and micro-texts. A 6-dimension multi-agent UX audit (density, hero hierarchy, tokens, a11y, 2026 competitive research, inner pages) with an adversarial brand/conversion critique pass measured:
home.sql×3, Connected/Online ×4, version ×3 (incl. a conflictingv1.2.5), GitHub reachable from 4 slots, open-source/MIT stated 4×The audit consensus was then tightened further in live owner review — the final form cuts deeper than the agents dared.
Design principles (full doc:
docs/designs/2026-07-15-declutter-shell-design.md)⋯overflow, ⌘K palette); the IDE fiction staysWhat changed
libredb.orgchip gone ("zaten bu sitedeyim")⋯overflow holding all 8 gags; every meta strip deletedLn 1, Col 1 · UTF-8 · SQL · v0.9.29kept as the IDE winkimportin an inline script)distribution/channels.yaml— Homebrew, Snap Store, GitHub Releases (.deb/.rpm) added as missing live channels; planned targets + cloud category + summary strip + star band deleted; one positive closer ("any Docker host works today"); star refresh fixedlibredb.org / ONLINE • PostgreSQL,RUNCTA that navigates awayLibreDB Studiobrand, honest▶ Live DemoCTAA11y bundle: skip-to-content link,
:focus-visiblering,aria-labelon explorer asides, ≥40 px mobile hit areas, fake buttons demoted to spans, toasts pause on keyboard focus.Inner pages: Features kickers single-hue (SECURITY no longer error-red, AI keeps purple), TechStack/Reliability stat rainbows flattened, Redis off the
text-badtoken.Verification
bun run gategreen on every commit (typecheck · prettier · oxlint · knip · 61 tests — deploy tests now assert the live-channel mirror and that no planned target is listed)⋯overflow menu, Save gag toast, skip link, Explain toggle — all working; deploy star-refresh confirmed firing (GitHub API calls now leave the page)docs/designs/_ref/shots/declutter-*.png(_refis git-ignored, local only — also shared as an artifact page)Follow-ups (out of scope)
Generate
deploy-targets.tsfromdistribution/channels.yaml(single source of truth) · docker-compose<details>groups · hero "one live moment" typing animation · trust row (GitHub stars / quote) ·@themetype-scale tokens + CI guard🤖 Generated with Claude Code