diff --git a/docs/designs/2026-07-15-declutter-shell-design.md b/docs/designs/2026-07-15-declutter-shell-design.md new file mode 100644 index 0000000..9a735a8 --- /dev/null +++ b/docs/designs/2026-07-15-declutter-shell-design.md @@ -0,0 +1,135 @@ +# Declutter the studio shell — design + +**Date:** 2026-07-15 · **Branch:** `design/declutter-shell` + +## Problem + +The IDE-shell concept is loved, but the page is overloaded. Measured on the +desktop homepage (multi-agent audit, 6 dimensions + adversarial critique): + +- ~70 interactive chrome elements render before any marketing content + (~66 tab stops before the first CTA for keyboard users). +- 19 buttons are `data-action="notice"` no-ops occupying tab order. +- The same datum repeats: row count ×3, exec time ×2, `home.sql` ×3, + Connected/Online ×4, version ×3 (`v0.9.29` twice + a conflicting `v1.2.5`), + GitHub reachable from 4 chrome slots, open-source/MIT stated 4×. +- 5–6 accent hues compete in one viewport (rainbow DB names, 4-color stats, + multi-color badges); no single accent moment. +- QueryChrome stacks 5 horizontal strips above the H1 (~y=395px). + +## Principles + +1. **One strip, one job.** No datum appears twice in the shell. +2. **Semantic color budget.** Blue = interactive/CTA (filled blue on exactly + two elements: Live Demo + RUN). Green = connection state, one animated + pulse total (StatusBar). Amber = warning/early-beta only. Purple = AI only. + Red = errors only. Everything else zinc. +3. **Progressive disclosure, not deletion.** The console-notice gags are demo + funnels — they survive one click deeper (Query menu, `⋯` overflow, ⌘K + palette) or become non-focusable spans. The IDE fiction stays. +4. **Chrome type scale:** 11 / 12 / 13 / 15 px only (no half-pixel steps). +5. Mono stays everywhere (spec: mono-first). Body copy gets reading + ergonomics (measure/leading), not a sans face. + +## Changes + +### TopBar (12 items → 5) +Cut: `▤ ＋` dead glyphs, the whole `libredb.org` connection chip (owner: +"zaten bu sitedeyim" — the visitor is already here), `PRODUCTION • ONLINE`, +separate Online pill, Monitoring button, `v0.9.29`. Monitoring gag re-homed +as a ⌘K palette entry. Keep: brand, ★ GitHub, Playground, ⌘K, Live Demo +(filled). Mobile top bar mirrors this: brand instead of URL, no ONLINE line. + +### QueryChrome (5 strips → 3 bands, 29 interactive → 7 visible) +Owner-directed final form (tightened beyond the audit consensus): +- Tab bar: `{table}.sql` + ✕ (kept gag), `＋` demoted to span. README.md tab + removed — GitHub lives in TopBar + StatusBar. +- Both toolbars deleted. **RUN** moved into the editor gutter, in front of + the SQL statement (DataGrip-style); ⌘+Enter chip dropped (shortcut still + wired, surfaced via `title`). Query/Save/Copy/BEGIN/SANDBOX/EDIT/IMPORT/ + Format/Clear/Lines/AI removed from chrome (Copy/Export/AI stay reachable + via ⌘K palette). +- Results row: Results, ✦ Explain (single trigger), and a `⋯` overflow with + History/Saved/Charts/NL2SQL/Autopilot/Pivot/Diff/Dashboard (notices + intact). Docs tab and the `{rows} · {cols} · {ms}` + Export meta removed — + RUN's console toast still reports rows/ms in-fiction. +- Result-meta strip deleted — it was 100 % duplicate data. +- Net: keyboard path to the hero CTA is 28 tab stops (was ~66). + +### StatusBar (15 items → 11) +Keep: Connected (the one animated pulse), the real links (promoted to +`text-muted`), one faint identity cluster `Ln 1, Col 1 · UTF-8 · SQL · ◆ v0.9.29`. +Cut: `LibreDB:latest`, `public`, `{table}.sql`, `{rows} rows`, duplicate brand. +Added later at owner request: X, YouTube, Instagram and Reddit (r/libredb) +links — the status bar is the site's only footer, the conventional home for +socials, and all four channels are actively maintained. + +### Explorer +Connection box, CONNECTIONS label, the "▤ Explorer · 14" header row and the +search placeholder all removed (owner: the visitor is already on +libredb.org; the tree speaks for itself — sidebar is now search + tree). Schema badges quieted to lowercase `text-dim`, no border/accent. +Row counts stay (core "table = page" loop) but carets dim at rest and +brighten on hover/active. Rows default `text-muted`, active bright +(Railway dim pattern). Column `◆` icons → `text-dim`. Sidebar footer +deleted (duplicate Connected + conflicting `v1.2.5`). +Toggles: `tabindex="-1"`, ≥24 px hit area (36 px in drawer). + +### HomeSection +One-fact-one-owner rule (owner-directed final form): badge owns the +license/open-source claim, H1 owns AI + "SQL IDE", the subtitle owns the +engine list + SSO, the CTAs own demo/deploy. Everything that restated one +of those went: +- **Stats grid deleted** — all four tiles (1-click deploy, MIT, AI, SSO) + duplicated facts already visible in the same viewport. +- Subtitle rewritten: "One editor for 'PostgreSQL' … 'Redis' — in your + browser, with SSO built in." The 7 DB names render as **quoted green SQL + string literals** — one hue, in-fiction, replacing the 5-hue rainbow. +- Badge pill kept (the single open-source/MIT signal), dot static. +- Tip comments and the open-core footnote deleted entirely — the explorer + rows read as navigation on their own, and the family cards' status labels + already tell the open-core story (the sustainability pitch belongs on + /platform or the FAQ); family heading → "one core, three products"; + studio card no longer a self-link (div, keeps ring + "you are here"); + sponsor line dropped (StatusBar link covers it). +- Export payload now ships the engine list instead of the deleted stats. +- **Promo video** (owner request): the 60s YouTube promo sits under the + CTAs as a click-to-load facade — self-hosted poster + play button, zero + third-party bytes/cookies at rest; on play, studio.ts swaps in a + `youtube-nocookie.com` iframe with autoplay. Keeps the page light and + consent-clean while giving the hero its "real product in motion" proof. + +### Accessibility bundle +Skip-to-content link (in-character), `aria-label="Explorer"` on asides, +global `:focus-visible` ring in primary, mobile drawer ✕ and Explain ≥40 px +hit areas, mobile CTA relabeled `▶ Live Demo` (was a dishonest `RUN`), +toast NOTICES lose leading glyphs (SR noise) and pause on keyboard focus, +~15 fake buttons demoted to spans (delegated handler works on any Element). + +### Deploy page +Synced with `distribution/channels.yaml` in the studio repo (the channel +inventory): Homebrew, Snap Store and GitHub Releases (tarballs + .deb/.rpm) +were live channels missing from the site — now first-class registry cards. +Every "planned" target (26 of the original 39) is **deleted from the data** +(owner call: the site lists only what ships today; roadmap lives in +channels.yaml). The all-planned "Cloud hyperscalers" category is replaced +by one positive comment line — "any Docker host works today" — which says +more than five aspirational cards did. Summary strip and the investor +star-total band are deleted (counts duplicated the sections below; summing +third-party platforms' stars overstated traction). Also fixed a real bug: +the star-refresh script used `import` inside a `data-astro-rerun` inline +script, which throws at runtime — live star counts had silently never +refreshed; the helper is now mirrored inline. + +### Section-page color discipline (cheap, systemic) +Features kickers: 7-color map → `text-dim` (AI keeps `text-ai`; SECURITY no +longer error-red). TechStack layer headers + Reliability stat numbers → +`text-bright`. Providers keeps its syntax-mimicry colors, but Redis moves off +the `text-bad` error token. + +## Out of scope (follow-ups) +- Docker-compose page: `
` per env-var group; nest under deploy in tree. +- Deploy page: generate `deploy-targets.ts` from `distribution/channels.yaml` + (single source of truth, kills drift). +- Hero "one live moment" (query types itself once, VT-safe). +- Trust row under stats (GitHub stars / quote as SQL comment). +- Tokenized type scale in `@theme` + CI guard against new `text-[..px]` in chrome. diff --git a/public/video/promo-poster.jpg b/public/video/promo-poster.jpg new file mode 100644 index 0000000..2072cba Binary files /dev/null and b/public/video/promo-poster.jpg differ diff --git a/src/components/sections/DatabaseCtaFooter.astro b/src/components/sections/DatabaseCtaFooter.astro index 28d26b6..22dd270 100644 --- a/src/components/sections/DatabaseCtaFooter.astro +++ b/src/components/sections/DatabaseCtaFooter.astro @@ -8,7 +8,7 @@ const DOCS = 'https://github.com/libredb/libredb-database/tree/main/docs/guides'

- Pre-alpha — not production ready + early-beta — not production ready

LibreDB is early (0.0.x). The architecture is in place and every line of the core is diff --git a/src/components/sections/DatabaseReliabilitySection.astro b/src/components/sections/DatabaseReliabilitySection.astro index dff3ab2..8480383 100644 --- a/src/components/sections/DatabaseReliabilitySection.astro +++ b/src/components/sections/DatabaseReliabilitySection.astro @@ -3,14 +3,14 @@ import SectionHeader from './SectionHeader.astro'; import DatabaseCtaFooter from './DatabaseCtaFooter.astro'; const numbers = [ - { n: '~712', l: 'lines of shipped code', cls: 'text-primary' }, - { n: '0', l: 'runtime dependencies', cls: 'text-ok' }, - { n: '2.83 kB', l: 'bundled (min+brotli)', cls: 'text-ai' }, - { n: '100%', l: 'core line coverage', cls: 'text-warn' }, + { n: '~712', l: 'lines of shipped code', cls: 'text-bright' }, + { n: '0', l: 'runtime dependencies', cls: 'text-bright' }, + { n: '2.83 kB', l: 'bundled (min+brotli)', cls: 'text-bright' }, + { n: '100%', l: 'core line coverage', cls: 'text-bright' }, ]; const notForYet = [ - { area: 'Production at scale', why: "It is pre-alpha; today's beachhead is test/dev." }, + { area: 'Production at scale', why: "It is early-beta; today's beachhead is test/dev." }, { area: 'Secondary indexes / planner', why: 'Queries are O(n) scans by design in v1 (on the roadmap).', diff --git a/src/components/sections/DatabaseSection.astro b/src/components/sections/DatabaseSection.astro index 4b3feb7..dc4b366 100644 --- a/src/components/sections/DatabaseSection.astro +++ b/src/components/sections/DatabaseSection.astro @@ -36,9 +36,9 @@ const principles = [ ---

- + - Pre-alpha · open source (MIT) + early-beta · open source (MIT) diff --git a/src/components/sections/DeploySection.astro b/src/components/sections/DeploySection.astro index 6463565..36f3b8a 100644 --- a/src/components/sections/DeploySection.astro +++ b/src/components/sections/DeploySection.astro @@ -3,7 +3,7 @@ import SectionHeader from './SectionHeader.astro'; import PlatformCard from '../deploy/PlatformCard.astro'; import { deployTargets, starRepos } from '../../data/deploy-targets'; import { deployCategories } from '../../data/deploy-categories'; -import { getStars, formatStars } from '../../lib/github-stars'; +import { getStars } from '../../lib/github-stars'; const stars = await getStars(starRepos); @@ -13,40 +13,17 @@ const targetsByCategory = (id: string) => deployTargets.filter((t) => t.category === id).sort((a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status]); const official = deployTargets.filter((t) => t.status === 'official'); -const totalStars = Object.values(stars).reduce((sum, n) => sum + n, 0); - -const platformCount = deployTargets.length; const installMethodCount = deployTargets.filter((t) => t.category === 'registry').length; -const plannedNames = deployTargets.filter((t) => t.status === 'planned').map((t) => t.name); - -const catColors = ['text-primary', 'text-ok', 'text-ai', 'text-warn', 'text-bad']; -const summary = sortedCategories.map((c, i) => ({ - title: c.title, - count: deployTargets.filter((t) => t.category === c.id).length, - color: catColors[i % catColors.length], -})); ---
- -
- { - summary.map((c) => ( -
-
{c.count}
-
{c.title}
-
- )) - } -
- -
+

Official one-click integrations

Listed in their marketplaces — deploy in a click, today.

@@ -90,7 +67,7 @@ const summary = sortedCategories.map((c, i) => ({
- + { sortedCategories.map((cat) => (
@@ -105,17 +82,13 @@ const summary = sortedCategories.map((c, i) => ({ )) } - -
-

Embedded across open-source ecosystems totaling

-
- {formatStars(totalStars)}+ GitHub stars -
-

- LibreDB Studio doesn't just support these platforms — it ships inside communities that millions of developers - already trust. More on the roadmap: {plannedNames.slice(0, 8).join(', ')}, and more. -

-
+ +

+ -- anywhere else: it's one container image. ECS / Fargate, Cloud Run, ACI, App Platform — any Docker host works + today. +

@@ -141,35 +114,31 @@ const summary = sortedCategories.map((c, i) => ({
- diff --git a/src/components/sections/FeaturesSection.astro b/src/components/sections/FeaturesSection.astro index 77ab661..9e50d73 100644 --- a/src/components/sections/FeaturesSection.astro +++ b/src/components/sections/FeaturesSection.astro @@ -3,14 +3,15 @@ import SectionHeader from './SectionHeader.astro'; type Cat = 'EDITOR' | 'AI' | 'CORE' | 'DATA' | 'SCHEMA' | 'SECURITY' | 'TOOLING'; +// Color budget: purple marks the AI differentiator; every other category stays quiet. const catColor: Record = { AI: 'text-ai', - EDITOR: 'text-primary', - CORE: 'text-ok', - DATA: 'text-warn', - SCHEMA: 'text-primary', - SECURITY: 'text-bad', - TOOLING: 'text-muted', + EDITOR: 'text-dim', + CORE: 'text-dim', + DATA: 'text-dim', + SCHEMA: 'text-dim', + SECURITY: 'text-dim', + TOOLING: 'text-dim', }; interface Feature { diff --git a/src/components/sections/HomeSection.astro b/src/components/sections/HomeSection.astro index e836112..f9c0bc8 100644 --- a/src/components/sections/HomeSection.astro +++ b/src/components/sections/HomeSection.astro @@ -1,20 +1,17 @@ --- +import PromoVideo from './PromoVideo.astro'; + const DEMO = 'https://app.libredb.org'; -const stats = [ - { n: '7+', l: 'Databases', cls: 'text-primary' }, - { n: '100%', l: 'Open Source', cls: 'text-ok' }, - { n: 'AI', l: 'Native', cls: 'text-ai' }, - { n: 'MIT', l: 'License', cls: 'text-warn' }, -]; +const databases = ['PostgreSQL', 'MySQL', 'Oracle', 'SQL Server', 'SQLite', 'MongoDB', 'Redis']; ---
- + Open Source & Free Forever · MIT @@ -23,15 +20,20 @@ const stats = [ The Modern, AI-Powered SQL IDE - +

- A lightweight, high-performance, and enterprise-secure web-based SQL editor with SSO for cloud-native teams. Connect - to PostgreSQL, - MySQL, Oracle, - SQL Server, SQLite, - MongoDB, or Redis - — from anywhere. + One editor for{' '} + { + databases.map((db, i) => ( + <> + '{db}' + {i < databases.length - 1 ? ', ' : ' '} + + )) + } + — in your browser, with SSO built in.

@@ -52,77 +54,46 @@ const stats = [
- -
- { - stats.map((s, i) => ( -
-
{s.n}
-
{s.l}
-
- )) - } + +
+ +

+ -- 60s demo: the whole IDE, in motion. +

- - - -
-

The LibreDB family — one spine, three faces

+
+

The LibreDB family — one core, three products

-

database

- OSS · pre-alpha +

database

+ OSS · early-beta
-

+

The plain core — an embedded, multimodal engine you can read in one sitting.

- +
-

studio

- OSS · stable +

studio

+ OSS · stable
-

- The readable face — the AI-powered SQL IDE for every database. ← you are here +

+ The readable face — the AI-powered SQL IDE for every database. ← you are here

- +
-

platform

- beta +

platform

+ beta
-

+

Managed for teams — Database Access Governance: authorized, audited, multi-tenant.

-

- -- open core: Studio is free & open; Platform funds the open-source work.
- -- Studio opens live with a ready-to-use LibreDB sample across all three lenses, zero setup.
- -- love the open-source work? sponsor us ♥ -