Files

T

JiriUhlirandClaude Opus 5 0c405ea55a Otevrena stranka sekala prehravani videa

Pri otevrenem portalu zacalo vedle nej sekat prehravani videa, po zavreni bylo
hned dobre. Neslo o smycku v kodu: zivy prenos udalosti je SSE, jedno spojeni na
celou aplikaci, a setTimeout je v nem jen na odstup pri znovupripojeni. Byly to
tri veci.

Rozmazavani plne barvy. `.glass`, podklad skoro kazdeho panelu, mel
backdrop-filter blur(14px). Jenze pod kartami je plna barva (bg-ink-950 na
dashboardu), takze se rozmazavala jednolita plocha: zadny rozdil videt nebyl
a kazda karta si za to drzela vlastni rozmazanou vrstvu ve skladaci. V kodu je
glass na 58 mistech, na jedne obrazovce jich je snadno dvacet. Rozmazani zustava
na peti mistech, kde pod nim neco opravdu projizdi: lepici hlavicky, podklad
modalu, prekryv menu na mobilu.

Nekonecne animace nad velkymi rozmazanymi plochami. Prihlaseni a verejny web
mely zare o velikosti 26 az 34 rem s blur(120px), kterym se donekonecna
animovala pruhlednost - to znamena prepocitavat obrovskou vrstvu sedesatkrat za
sekundu, i kdyz se na strance nic nedeje. Zare zustaly, animace zmizela.
Pribylo prefers-reduced-motion.

Kazda udalost prekreslila cely dashboard. EventStreamProvider mel v tomtez
kontextu stav spojeni, odber i seznam poslednich udalosti. Seznam se meni pri
kazde udalosti, takze se menila cela hodnota kontextu a prekreslil se kazdy, kdo
si jen zaridil odber - tedy vsechny dotazy s refetchOn na strance, i kdyz o ten
typ udalosti nestaly. Pri behu automatizace se cely dashboard prekresloval
nekolikrat za sekundu, a s nim dvacet rozmazanych vrstev. Kontext je proto
rozdeleny: useEventStream da stav a odber, useEventLog seznam udalosti.

Filtr sekci nefiltroval. Seznam ticketu sklada adresu dotazu v useMemo, ale
v zavislostech chybely groupId, typeId, tag a stage - adresa se po prepnuti
sekce neprepocitala a data se nenacetla znovu. Driv to nevadilo, byly to filtry
nastavitelne jen odkazem, ktere se po nacteni nemenily. Se zalozkou "Vsechny
tickety" a jejim vyberem sekce je to chyba, ktera je videt.

Overeno: groupId=grp_servicedesk vrati jeden ticket, groupId=none zbyle dva.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2026-09-08 15:23:43 +02:00

7.5 KiB

Raw Blame History

22 - Znacka a design

Naprogramovano. Navrh, ze ktereho to vzniklo, je artefakt "WorkNuke Rebrand".

Tenhle dokument popisuje, jak znacka funguje v kodu - kde se meni barvy, pismo a znak, a co se pri prejmenovani menit nesmi.

Kde se meni vzhled

Co	Kde
Barvy, pismo, utility	`web/src/index.css`
Znak a slovni znacka	`web/src/components/layout/Logo.tsx`
Nazev, kontakty, claim	`web/src/config/brand.ts`
Nazev na serveru	`BRAND_NAME`, vychozi v `src/config.ts`
Titulek a fonty stranky	`web/index.html`

Zmena barevnosti celeho webu i portalu je zmena hodnot v index.css. Web i portal stoji na tychz tokenech, takze se projevi naraz na obojim.

Nazev je na dvou mistech, a je to zamer

Klient je staticky soubor, takze runtime promenne containeru do prohlizece nedosahnou. Proto:

server cte BRAND_NAME (vychozi WorkNuke) a pouziva ho v titulku Swaggeru a v OpenAPI,
klient cte VITE_BRAND_NAME pri buildu, jinak vychozi hodnotu v brand.ts.

Obe maji tutéž vychozi hodnotu, takze bez nastaveni cehokoliv sedi.

Pozor na zamenu s firmou v datech. Pozvanka ukazuje jmeno firmy, do ktere zve, a ukazkova firma se jmenuje Automia. Neni to zbytek po prejmenovani, je to zaznam zakaznika - zadna promenna znacky ho nemeni.

Barvy

Token	Hodnota	K cemu
`brand-400`	`#B7FF3C`	Akcent. Jedina hlasita barva na strance.
`ink-900`	`#0F1411`	Podklad. Cerna do zelena, ne do modra.
`ink-600`	`#2E3A32`	Linky a ohraniceni
`ok-400`	`#2DD4BF`	Stav "v poradku"
`warn-400`	`#FBBF24`	Stav, ktery chce pozornost
`danger-400`	`#FB7185`	Chyba

Proc je "v poradku" modrozelene a ne zelene. Akcent je zeleny. Kdyby byl zeleny i stav, byly by na jedne obrazovce dve zelene, kazda o necem jinem, a nikdo by je nerozlisil. Akcent znamena "tady se neco stane", stav znamena "takhle to dopadlo".

Sedy odstin ma zelenou prichut. Neni to nahoda ani chyba prevodu: seda s naznakem odstinu podkladu drzi paletu pohromade, ciste neutralni seda vedle zelenocerne pusobi spinave.

Druhy akcent uz neni barva

accent-300 az accent-600 ukazuji do teze zelene rady jako brand-*. Klice zustaly, protoze je pouziva 341 mist v kodu; nechat je namirene na fialovou by znamenalo dve akcentove barvy, prepsat je vsechny naraz zbytecne velkou zmenu. Az se ta mista projdou, klice zmizi.

Totez plati pro utilitu text-gradient: uz negeneruje prechod, ale plnou zelenou. Nazev zustal, aby se osm mist nemuselo prepisovat.

Pismo

Role	Pismo	Kde
Nadpisy	Archivo 800	`h1` az `h4`, trida `font-display`
Text	IBM Plex Sans	vychozi pismo dokumentu
Cisla a ID	IBM Plex Mono	casy, ID ticketu, nadtitulky

Nadpisy maji letter-spacing: -0.035em a line-height: 1.04. Prave tesny proklad delal v predloze ten rozdil; Inter takhle tesne nejde bez trikareni.

Plex Sans a Plex Mono jsou od jednoho autora, takze spolu ladi bez ladeni.

Znak

Plocha bomba mirici k zemi: nos vlevo dole, tri kridelka vpravo nahore, tri odletove cary u nosu. Kresli se svisle a otoci o 45 stupnu, aby se geometrie dala cist a upravovat.

Je plochy zamerne, ne render. Plochy znak snese jakoukoliv velikost, obarvi se jednou promennou (currentColor) a nezestarne s modou na 3D.

LogoMark je samostatny export, takze se da pouzit i mimo hlavicku - napriklad uvnitr snimku portalu v heru.

Hero

Prvek	Jak to je
Nad nadpisem	Verzalkova radka v mono, prokladana
Nadpis	Dve slova na radek, druhy radek zeleny
Tlacitka	Jedna zelena pilulka plus textovy odkaz
Pod textem	Ctyri slovesa s ikonou a jednou vetou
Snimek	Vybiha z prave hrany
Pozadi	Tri zelene radialni prechody, zadna mrizka

Zare je pozadi sekce, ne vrstva pod ni. Prekryv se zapornym z-indexem se schoval za podklad stranky a nebyl videt. Element se svym vlastnim pozadim tenhle problem nema.

Snimek vybiha z hrany schvalne. Oriznuty pusobi jako vyrez z neceho vetsiho, cely v ramecku pusobi jako obrazek.

Ctyri slovesa

Sbira, Automatizuje, Propojuje, Deleguje. Neni to marketingova ozdoba, jsou to ctyri kroky, ktere portal opravdu dela:

Sloveso	Co za tim v portalu je
Sbira	Udalosti, spoustece, webhooky
Automatizuje	Skripty konektoru
Propojuje	Strom kroku v builderu
Deleguje	Tickety a prirazeni lidem

Kdyz se ctverice zmeni, musi se zmenit i tady - jinak web slibuje neco jineho, nez aplikace dela.

Co se pri prejmenovani nemeni

Vypada to jako jmeno, ale jsou to identifikatory:

Co	Proc zustava
`automia.token`	Prejmenovani odhlasi vsechny prihlasene
`automia.tenant`	Zapomnela by se vybrana firma
`tnt_automia`	Sedi v ticketech, automatizacich i rozlozeni
`/apps/csbot-prototype`	Verejna adresa a routovani v Caddy, viz AGENTS.md
Ukazkove ucty	Prihlasovaci e-maily v seedu. Data, ne texty.

Firma Automia v datech je neco jineho nez produkt WorkNuke. Je to zaznam zakaznika v ukazkovych datech a prejmenovat ho nema duvod.

Co chybi

Chybi	Poznamka
Materialy mimo web	prezentace, obrazky pro socialni site
Domena	`worknuke.cz` v `brand.ts`, ale nikde neni nasazena
Prochazeni `accent-*`	341 mist, ktera uz nemaji duvod pouzivat druhy klic

Rozmazani jen tam, kde neco prekryva

.glass je podklad skoro kazdeho panelu a nema backdrop-filter.

Puvodne mel blur(14px), jenze pod kartami je plna barva (bg-ink-950 na dashboardu): rozmazavala se jednolita plocha, zadny rozdil videt nebyl a kazda karta si za to drzela vlastni rozmazanou vrstvu ve skladaci. Pri dvaceti kartach na obrazovce to vytizilo GPU natolik, ze vedle portalu sekalo prehravani videa.

Rozmazani patri jen tam, kde pod nim neco opravdu projizdi:

Kde	Trida
lepici hlavicka dashboardu	`backdrop-blur-xl`
lepici hlavicka webu	`backdrop-blur-xl`
podklad modalu	`backdrop-blur-sm`
prekryv menu na mobilu	`backdrop-blur-sm`

Zadna nekonecna animace nad velkou rozmazanou plochou. Zare na prihlaseni a na webu jsou staticke: animovat pruhlednost objektu s blur(120px) znamena prepocitavat obrovskou vrstvu porad dokola, i kdyz se na strance nic nedeje.

Kdo ma v systemu vypnute animace (prefers-reduced-motion), nedostane ani ty zbyle.

7.5 KiB Raw Blame History