Dokument vytvoren UX designerem. Honzik ho mergeuje do UC-07001 a UC-07002.

1. Kontextova mapa zmeny

Prepnuti do rezimu “Pod kapotou” (tlacitko uz existuje v topbaru WorkspaceScreen.vue) nahradi cely hlavni layout panelu:

• Chat: neni v “Pod kapotou” — zmizi uplne (zadny overlay, zadny drawer)
• Team strip: neni v “Pod kapotou”
• Conversation history drawer: neni v “Pod kapotou”
• Activity panel: neni v “Pod kapotou” (na to je “Jednoduche”)
• Status bar dole: zachovan (auto-save, git info)
• Top bar: zachovan bezezmeny

2. Layout schema

2a. Celkovy layout “Pod kapotou”

┌─────────────────────────────────────────────────────────────────┐
│  TTopBar (h-14, var(--bar-bg), backdrop-blur)                   │
│  [← logo] [projekt] ··············· [Simple|UnderHood] [SOS] [theme] [avatar] │
├──────────────────────┬──────────────────────────────────────────┤
│  EXPLORER (~300px)   │  VIEWER (flex-1)                         │
│  bg-[var(--bg-1)]    │  bg-[var(--bg-0)]                        │
│  border-r line-1     │                                          │
│                      │                                          │
│  [Soubory|Databaze]  │  [content area]                          │
│  ─────────────────   │                                          │
│  [file/table tree]   │                                          │
│                      │                                          │
│                      │                                          │
├──────────────────────┴──────────────────────────────────────────┤
│  Status bar (px-5 py-2.5, font-mono text-xs text-fg-3)          │
└─────────────────────────────────────────────────────────────────┘

2b. Explorer detail

┌──────────────────────────────────┐
│  [Soubory] [Databaze]  [Refresh] │  ← sub-toggle + TIconBtn RefreshCw vpravo
│  px-3 py-2 border-b line-1      │
├──────────────────────────────────┤
│  ▼ app/                          │  ← folder, expanded
│    ▶ components/                 │  ← folder, collapsed
│      ClassCard.tsx               │  ← soubor (vybran, highlighted)
│      Calendar.tsx                │
│    ▶ routes/                     │
│  ▶ public/                       │
│  package.json                    │
│  tsconfig.json                   │
└──────────────────────────────────┘

Databaze (plocky seznam):
┌──────────────────────────────────┐
│  [Soubory] [Databaze]  [Refresh] │
│  px-3 py-2 border-b line-1      │
├──────────────────────────────────┤
│  [Table] users                   │  ← vybrana, highlighted
│  [Table] projects                │
│  [Table] conversations           │
│  [Table] activities              │
└──────────────────────────────────┘

2c. Viewer — 4 hlavni stavy

Stav A: Explorer=Soubory, Viewer=prazdny

┌────────────────────────────────────────────────────────────┐
│                                                            │
│                   [FolderTree 48px]                        │
│              Vyberte soubor v exploreru                    │
│           Obsah souboru se zobrazí tady                    │
│                                                            │
└────────────────────────────────────────────────────────────┘

Stav B: Explorer=Soubory, Viewer=obsah souboru

┌────────────────────────────────────────────────────────────┐
│  [FileCode] app/components/ClassCard.tsx          [Copy]  │  ← header
├────────────────────────────────────────────────────────────┤
│   1 │ import React from 'react'                            │
│   2 │                                                      │
│   3 │ export function ClassCard({ cls }) {                 │
│   4 │   return (                                           │
│   5 │     <div className="card">                           │
│   6 │       {cls.name}                                     │
│  ...                                                       │
│ overflow-y auto, font-mono 12px, line-height 1.6           │
└────────────────────────────────────────────────────────────┘

Stav C: Explorer=Databaze, Viewer=schema tabulky

┌────────────────────────────────────────────────────────────┐
│  [Table2] users                [Schema] [Data]             │  ← header + sub-toggle
├────────────────────────────────────────────────────────────┤
│  Nazev       Typ           Nullable  Default               │
│  ─────────────────────────────────────────────────────── │
│  id          bigint        NOT NULL  auto_increment        │
│  email       varchar(255)  NOT NULL  —                     │
│  created_at  timestamptz   NOT NULL  now()                 │
│  ...                                                       │
└────────────────────────────────────────────────────────────┘

Stav D: Explorer=Databaze, Viewer=data tabulky

┌────────────────────────────────────────────────────────────┐
│  [Table2] users                [Schema] [Data]             │
├────────────────────────────────────────────────────────────┤
│  [horizontal scroll wrapper]                               │
│  id  │  email                 │  created_at               │
│  ─────────────────────────────────────────────────────── │
│   1  │  alice@example.com     │  2026-04-01 10:32:00      │
│   2  │  bob@example.com       │  2026-04-02 08:15:00      │
│  ...                                                       │
├────────────────────────────────────────────────────────────┤
│  Strankovani: [← Prev] Radky 1-50 z 247 [Next →]          │
└────────────────────────────────────────────────────────────┘

3. Komponenty a design tokens

3.1 Sub-toggle (Soubory / Databaze a Schema / Data)

Pouziva presne stejny vzor jako existujici toggle v WorkspaceScreen.vue (radky 311–325 a 471–493):

div.flex.p-[3px].rounded-[10px].bg-[var(--bg-2)].border.border-[var(--line-1)].gap-0.5
  button.inline-flex.items-center.gap-1.5.px-3.py-1.5.rounded-[7px].text-xs.font-medium
    :class active = bg-[var(--bg-4)] text-[var(--fg-1)]
    :class inactive = bg-transparent text-[var(--fg-3)]

Ikony:

• Soubory: FolderTree (13px)
• Databaze: Database (13px)
• Schema: List (13px)
• Data: Table2 (13px)

3.1a Explorer — Header

div.flex.items-center.gap-2.px-3.py-2.border-b.border-[var(--line-1)].shrink-0
  [sub-toggle Soubory / Databaze]   ← vlevo, flex-1
  [TIconBtn RefreshCw 14px]         ← vpravo, vzdy viditelny

RefreshCw (Lucide) jako TIconBtn — stejny vzor jako ostatni icon buttons v aplikaci. Tooltip: “Obnovit”. Klik refreshuje aktualni zalozku (Soubory = znovu nacte strom, Databaze = znovu nacte seznam tabulek). Zadny auto-refresh.

3.2 Explorer — Files tree

Detekce ikony souboru dle pripony:

• .ts, .tsx, .js, .jsx, .vue → FileCode (var(--indigo))
• .md, .txt, .html → FileText (var(--fg-3))
• vychozi → File (var(--fg-3))

Filtrovani: CLAUDE.md se nezobrazuje (skryty na FE).

3.3 Explorer — Database list

3.4 Viewer — Header (spolecny pro soubor i tabulku)

div.px-4.py-2.5.border-b.border-[var(--line-1)].flex.items-center.gap-2.bg-[var(--bg-1)].shrink-0
  [ikona souboru/tabulky 14px var(--fg-3)]
  span.font-mono.text-[12px].text-[var(--fg-2)].flex-1.truncate   ← relativni cesta / nazev tabulky
  [sub-toggle Schema/Data — jen pro tabulku]
  [Copy button TIconBtn — jen pro soubory, vzdy viditelny (ne hover-only)]

Copy button je vzdy zobrazen v headeru file vieweru — dobra zjistitelnost pro netechnicke uzivatele. Neskryva se za hover.

3.5 Viewer — File content

div.flex-1.overflow-auto.font-mono.text-[12px].text-[var(--fg-2)].leading-[1.6]
  table (nebo div s grid) pro cisla radku + obsah
    td.w-12.text-right.text-[var(--fg-4)].select-none.pr-4   ← cislo radku (vzdy zobrazeno)
    td.flex-1.whitespace-pre.overflow-x-auto                   ← obsah radku

Line numbers: vzdy zobrazeny (IDE standard). var(--fg-4), select-none, pevna sirka 3-4 cifer.

BE vraci obsah souboru jako cely string. FE rozdeli obsah podle \n a vykresli kazdy radek jako samostatny element s indexem (cislem radku) v separatni gutter kolone.

Obsah radku: whitespace-pre, horizontal scroll. Background: var(--bg-0) (nejtemnejsi — zdurazni kontrast voci exploreru).

3.6 Viewer — Schema tabulky

Kompaktni tabulka:

3.7 Viewer — Data tabulky (grid)

Strankovani (Next/Prev):

div.flex.items-center.justify-between.px-4.py-2.border-t.border-[var(--line-1)].bg-[var(--bg-1)].shrink-0
  button [← Pred] — TIconBtn vzor
  span.font-mono.text-[11px].text-[var(--fg-3)]   "Radky 1–50 z 247"
  button [Dalsi →] — TIconBtn vzor

Strankovani: strana velikosti 50 radku v MVP. “Pred” se disabled na prvni strane, “Dalsi” na posledni.

4. Interakce

4.1 Prechod do “Pod kapotou” rezimu

1. Uzivatel klikne “Pod kapotou” v top-bar toggle.
2. underHood.value = true (uz existuje v WorkspaceScreen.vue).
3. Chat panel zmizi uplne — zadny overlay, zadny drawer, zadna moznost paralelniho chatovani. Pro chat uzivatel prepne zpet na “Jednoduche”.
4. Levy panel se nahradi ExplorerPanel.vue.
5. Pravy panel (preview/activity) se nahradi ViewerPanel.vue.
6. Viewer zacina v empty stavu — zadny soubor/tabulka neni vybrana.
7. Sub-toggle v Exploreru je defaultne na “Soubory”.

4.2 Klik na soubor v Exploreru

1. Soubor se zvyrazni (selected state, amber-soft bg).
2. Viewer header se aktualizuje — zobrazí relativní cestu + ikonu.
3. Viewer zobrazí loading skeleton (5 pulse radku).
4. Po nacteni: zobrazí se obsah souboru s cisly radku.
5. Pokud je soubor binarni: error state 5.8. Pokud BE vraci tooLarge: true: error state 5.9.

4.3 Expand/collapse slozky

1. Klik na folder row (kdekoli na radku — caret i nazev).
2. ChevronRight se otoci na 90° (transition 150 ms).
3. Potomci se zobrazí/skryjí s animací max-height transition 200 ms ease-out.
4. Slozka se nikdy sama “nevybere” — to dela jen klik na soubor.

4.4 Prechod Soubory → Databaze (sub-toggle v Exploreru)

1. Uzivatel klikne “Databaze” v sub-toggle.
2. Explorer se prepne na plocky seznam tabulek — serazeny abecedne (BE vraci serazene).
3. Viewer se resetuje do empty stavu (zadna tabulka neni vybrana).

4.5 Klik na tabulku v Exploreru

1. Tabulka se zvyrazni (selected state).
2. Viewer header: ikona Table2 + nazev tabulky + sub-toggle “Schema” / “Data”.
3. Viewer defaultne zobrazí “Schema” s loading skeleton.
4. Po nacteni: zobrazí schema (sloupce + typy).

4.6 Prechod Schema → Data (sub-toggle ve Vieweru)

1. Uzivatel klikne “Data” v sub-toggle.
2. Viewer zobrazí loading skeleton pro tabulku.
3. Po nacteni: data prvni stranky (50 radku), strankovaci footer.

4.7 Strankovani dat tabulky

1. “Dalsi →”: nacte dalsi stranku, scroll na zacatek obsahu (ne na top stranky).
2. ”← Pred”: nacte predchozi stranku.
3. Behem nacteni: skeleton v oblasti radku, footer je disabled.

5. Stavy

5.1 Loading skeleton — soubory tree

5x div.h-[20px].rounded.bg-[var(--bg-2)].animate-pulse
sirikami: 60%, 80%, 45%, 70%, 55%

5.2 Loading skeleton — file content

8x div.h-[16px].rounded.bg-[var(--bg-2)].animate-pulse
sirikami: 80%, 60%, 90%, 40%, 75%, 55%, 85%, 30%

5.3 Loading skeleton — schema/data tabulky

3x div.h-[28px].rounded.bg-[var(--bg-2)].animate-pulse (kompaktnejsi)

5.4 Empty state — Viewer (zadny vyber)

div.flex-1.flex.flex-col.items-center.justify-center.gap-3.text-center
  [FolderTree 40px var(--fg-4)]
  p.text-[var(--fg-2)].text-sm.font-medium   "Vyberte soubor nebo tabulku"
  p.text-[var(--fg-3)].text-sm               "Obsah se zobrazí tady"

5.5 Empty state — prazdna slozka

Misto potomku: div.pl-[calc(0.75rem*depth)].py-1 span.text-[11px].text-[var(--fg-4)].italic "Prazdna slozka"

5.6 Empty state — zadne tabulky v databazi

div.flex-1.flex.flex-col.items-center.justify-center.gap-2
  [Database 32px var(--fg-4)]
  span.text-[13px].text-[var(--fg-3)] "Zadne tabulky"

5.7 Error state — soubor nenalezen

div.flex-1.flex.flex-col.items-center.justify-center.gap-2
  [FileX 32px var(--rose)]
  span.text-[13px].text-[var(--rose-soft)] "Soubor nenalezen"
  span.text-[12px].text-[var(--fg-4)] "Mohl byt smazan nebo prejmenovan"

5.8 Error state — binarni soubor

[File 32px var(--fg-4)]
span.text-[13px].text-[var(--fg-3)] "Binarni soubor nelze zobrazit"

5.9 Error state — prilis velky soubor

BE vraci response s tooLarge: true + size (pocet bajtu), zadny content. FE zobrazi:

div.flex-1.flex.flex-col.items-center.justify-center.gap-2
  [FileX 32px var(--fg-4)]
  span.text-[13px].text-[var(--fg-3)] "Soubor je příliš velký pro zobrazení"
  span.text-[12px].text-[var(--fg-4)] "Limit je 500 KB ({size} KB)"

Hranice: 500 KB. Velikost souboru se zobrazi v chybove zprave pro transparentnost.

5.10 Error state — nacteni stromu souboru selhalo

Inline banner v Exploreru (analogie k ActivityPanel error):

div.mx-3.px-3.py-2.rounded-[var(--r-md)].text-xs.bg-[var(--rose)]/10.text-[var(--rose)].border.border-[var(--rose-line)]
  "Nepodařilo se načíst soubory. Zkusit znovu."
  [button Reload]

6. Rozlozeni panelu — siry

Sirka Exploreru: 300px fixni. Zadny resize drag handler — resizable split je post-MVP.

7. Vizualni feel — IDE styl

• Font: var(--font-mono) = “JetBrains Mono” pro vsechny nazvy souboru, typy, data. var(--font-ui) jen pro staticky text (empty state popisy, strankovaci popisky).
• Velikost fontu: 11-13px (denser nez “Jednoduche” 14px baseline).
• Radkova vyska: leading-[1.6] pro code content, leading-[1.4] pro tree items (husty).
• Barvy: zadne barevne akcenty nad ramec amber-soft pro selected stav. Vesmes var(--fg-2), var(--fg-3), var(--fg-4) — tlumene, profesionalni.
• Indigo pro typy: v Schema vieweru datove typy (varchar, bigint, …) maji var(--indigo) — bezny IDE vzor.
• Amber pro vybrane: var(--amber-soft) jako selected background — konzistentni s ::selection v main.css.

8. Accessibility

Keyboard navigace — Explorer tree

• Klicatele vsech interaktivnich prvku jsou <button> nebo <a> — nativni tab focus.
• Strom ma role="tree" / role="treeitem" dle WAI-ARIA tree pattern.
• Sipky (implementace na uvaheni dev):
  • ArrowRight — expand slozky (pokud sbalena) nebo presun na prvni potomek (pokud expandovana)
  • ArrowLeft — collapse slozky (pokud expandovana) nebo presun na rodicovskou slozku
  • ArrowDown / ArrowUp — pohyb mezi viditelnymi radky
  • Enter — vybrat soubor / expand-toggle slozky
• Focus ring: focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--amber)]

Aria atributy

Focus management

• Pri vyberu souboru focus zustava na file row (nepreskakuje do Vieweru).
• Po nacitani souboru se zadny focus nepremistuje.
• Sub-toggle Schema/Data: focus zustava na kliknutem tlacitku.
• Strankovani: po kliknuti Dalsi/Pred focus zustava na kliknutem tlacitku.

Kontrast (WCAG AA)

• var(--fg-1) na var(--bg-0): splnuje AA v obou tematech (overeno designovymi tokeny v main.css).
• var(--fg-2) na var(--bg-1): splnuje AA.
• var(--indigo) na var(--bg-0) v dark rezimu: ≥ 4.5:1 (oklch 0.72 ma dostatek jasu).

9. Responsive

Desktop-only screen. Zadne mobile breakpoints pro Workspace. Minimalni sirka okna pro pouzitelnost: ~900px (460px viewer + 300px explorer + overhead). Pod touto sirkou layout neni garantovan — stejne jako stav Workspace dnes.

10. ASCII wireframes — 4 hlavni stavy

Stav A: Soubory / prazdny Viewer

┌──────────────────────────────────────────────────────────────────────────────────┐
│  ← ⊕  Muj projekt                        [Simple] [Pod kapotou]  [SOS] [☀] [A] │
├──────────────────┬───────────────────────────────────────────────────────────────┤
│ [Soubory][DB] ↺  │                                                               │
│ ────────────     │                                                               │
│ ▼ app/           │                                                               │
│   ▶ components/  │              [FolderTree 40px]                                │
│   ▶ routes/      │                                                               │
│   ▶ server/      │         Vyberte soubor nebo tabulku                           │
│ ▶ public/        │              Obsah se zobrazí tady                            │
│   package.json   │                                                               │
│   tsconfig.json  │                                                               │
│                  │                                                               │
├──────────────────┴───────────────────────────────────────────────────────────────┤
│  ● Auto-saving   Posledni deploy: 14:32    $0.42  247 commits                   │
└──────────────────────────────────────────────────────────────────────────────────┘

Stav B: Soubory / obsah souboru

┌──────────────────────────────────────────────────────────────────────────────────┐
│  ← ⊕  Muj projekt                        [Simple] [Pod kapotou]  [SOS] [☀] [A] │
├──────────────────┬───────────────────────────────────────────────────────────────┤
│ [Soubory][DB] ↺  │ [FileCode] app/components/ClassCard.tsx              [Copy]   │
│ ────────────     │ ─────────────────────────────────────────────────────────── │
│ ▼ app/           │   1 │ import React from 'react'                              │
│   ▼ components/  │   2 │                                                        │
│   ┌ClassCard.tsx │   3 │ export function ClassCard({ cls, onClick }) {          │
│     Calendar.tsx │   4 │   return (                                             │
│     Booking.tsx  │   5 │     <div                                               │
│   ▶ routes/      │   6 │       className="card hover:shadow-lg"                 │
│ ▶ public/        │   7 │       onClick={onClick}                                │
│                  │   8 │     >                                                  │
│                  │   9 │       <h3>{cls.name}</h3>                              │
│                  │  10 │       <p>{cls.description}</p>                         │
│                  │  11 │     </div>                                             │
│                  │  12 │   )                                                    │
│                  │  13 │ }                                                      │
├──────────────────┴───────────────────────────────────────────────────────────────┤
│  ● Auto-saving   Posledni deploy: 14:32    $0.42  247 commits                   │
└──────────────────────────────────────────────────────────────────────────────────┘

Stav C: Databaze / schema tabulky

┌──────────────────────────────────────────────────────────────────────────────────┐
│  ← ⊕  Muj projekt                        [Simple] [Pod kapotou]  [SOS] [☀] [A] │
├──────────────────┬───────────────────────────────────────────────────────────────┤
│ [Soubory][DB] ↺  │ [Table2] users                          [Schema] [Data]       │
│ ────────────     │ ─────────────────────────────────────────────────────────── │
│ ┌users           │  NAZEV          TYP            NULLABLE  DEFAULT              │
│  projects        │  ─────────────────────────────────────────────────────────  │
│  conversations   │  id             bigint         NOT NULL  auto_increment       │
│  activities      │  email          varchar(255)   NOT NULL  —                    │
│  messages        │  password_hash  varchar(255)   NOT NULL  —                    │
│                  │  created_at     timestamptz    NOT NULL  now()                │
│                  │  updated_at     timestamptz    NOT NULL  now()                │
│                  │  deleted_at     timestamptz    NULL      —                    │
│                  │                                                               │
├──────────────────┴───────────────────────────────────────────────────────────────┤
│  ● Auto-saving   Posledni deploy: 14:32    $0.42  247 commits                   │
└──────────────────────────────────────────────────────────────────────────────────┘

Stav D: Databaze / data tabulky

┌──────────────────────────────────────────────────────────────────────────────────┐
│  ← ⊕  Muj projekt                        [Simple] [Pod kapotou]  [SOS] [☀] [A] │
├──────────────────┬───────────────────────────────────────────────────────────────┤
│ [Soubory][DB] ↺  │ [Table2] users                          [Schema] [Data]       │
│ ────────────     │ ─────────────────────────────────────────────────────────── │
│ ┌users           │  [←── horizontal scroll ──────────────────────────────────→] │
│  projects        │  ID  │  EMAIL                    │  CREATED_AT               │
│  conversations   │  ─────────────────────────────────────────────────────────  │
│  activities      │   1  │  alice@example.com         │  2026-04-01 10:32:00     │
│  messages        │   2  │  bob@example.com           │  2026-04-02 08:15:00     │
│                  │   3  │  charlie@example.com       │  2026-04-03 09:01:00     │
│                  │  ...                                                          │
│                  │  ...                                                          │
│                  │  ...                                                          │
│                  │ ─────────────────────────────────────────────────────────── │
│                  │  [← Pred]         Radky 1–50 z 247            [Dalsi →]      │
├──────────────────┴───────────────────────────────────────────────────────────────┤
│  ● Auto-saving   Posledni deploy: 14:32    $0.42  247 commits                   │
└──────────────────────────────────────────────────────────────────────────────────┘

FEEDBACK

Vsechna open questions jsou rozhodnuta a promítnuta do dokumentu. Honzik paralelne updatuje UC-07001 a UC-07002 s backend detaily (slug column, file size limit 500 KB, BE response format). Tato UX spec je nyni finalni pro MVP.