Att designa om dashboarden kring ett enda vågdiagram

Vissa releaser lägger till en funktion. GeekBye v1.8.2 tog bort mestadels en — och borttagningen är storyn. Under en enda eftermiddag i februari 2026 förvandlade arton commits dashboardens startsida från en fjärrkontroll för inspelning till en enbart läsbar analysvy: fyra statistiktal och ett aktivitetsdiagram. På vägen skeppade den ett stapeldiagram som levde tjugotvå minuter, ett rutnät av statistikkort som levde tjugo, och en handrullad SVG-våg som ersatte båda. Hela sökandet är bevarat i commit-tidsstämplarna, vilket är den bästa sortens designdokumentation som finns.

Dashboarden slutade vara en fjärrkontroll

Före den här releasen var dashboardens startsida en kontrollpanel. Den inleddes med ett hero-kort — en stor inspelningswidget med en LIVE-bricka, Pause/Resume/Stop-knappar, gradientklumpar och en useSessionState-hook som kopplade ihop allt med inspelaren. Dashboarden försökte vara två saker samtidigt: platsen där du tittar på dina möten och platsen där du kör inspelaren. Två produkter, en skärm, i tyst konkurrens.

v1.8.2 valde en. Den raderade hero-kortet och useSessionState-kopplingen — inklusive en effekt som automatiskt navigerade dig till ett mötes detaljsida i samma ögonblick som en session tog slut, vilket är precis den sortens "hjälpsamma" hopp som överraskar folk mitt i flödet. Att starta och dölja inspelaren flyttades ut till en enkel växlare i navbaren (en ombyggd knapp som tappade ungefär hundra rader när den gick från sessionskontroll till av/på-brytare), backad av en ny navbar:hide-IPC-hanterare. Kvar blev en dashboard som gör en sak: visar dig vad du har spelat in. Enbart läsbar. Lugn.

Det finns en liten, mänsklig bugg i den övergången värd att lyfta fram, för det är just den sortens sak en omdesign tyst introducerar och ett bra öga fångar samma timme. De två nya sidofältsknapparna — Start och Hide — skeppades med samma generiska rutnätsikon, så de var visuellt identiska. Tolv minuter senare gav en uppföljande commit Start en play-ikon, gav Hide en öga-av-ikon och tonade Hide bärnstensgul, så att "få appen att försvinna" läses som en medveten handling snarare än en neutral tvilling till "start". Ikoner är text. Två knappar som ser likadana ut säger samma sak, och dessa betydde inte samma sak.

Stapeldiagrammet som levde tjugotvå minuter

Här är den del jag älskar, och den är helt läsbar ur git-loggen. Klockan 16:29:34 landade omdesignens första utkast: ett aktivitetsdiagram över 7 dagar ritat som staplar — animerade kolumner, en minimihöjd så att pyttesmå dagar förblev synliga, en 2-pixels dämpad stump för nolldagar. Rimligt. Konventionellt. Den sortens diagram man sträcker sig efter utan att tänka.

Klockan 16:51:21 — tjugotvå minuter senare — raderades det. Ersättningscommiten säger exakt vad den gjorde: "replace bar chart with smooth wave area chart for 7-day activity." Och klockan 16:52:21, en minut efter det, skalade en annan commit bort det rundade kortet och kanten runt vågen, "for cleaner look."

Varför? Commitarna säger bara vad som ändrades, så varför är en tolkning — men datans form gör det uppenbart. Det här är ett verktyg där en typisk användare har noll, ett eller två möten en given dag. Sju staplar, de flesta 2 pixlar höga, ser nästan tomma och utspridda ut. Samma sju siffror ritade som en sammanhängande fylld yta ser ut som en trend — en mjuk våg som stiger där veckan var full. Inget förfalskades; y-värdena är identiska. Omdesignen valde helt enkelt kodningen som låter gles, ärlig data läsas som en form i stället för som frånvaro.

Statistiken fick samma behandling på samma klocka. Det första utkastet (16:29) satte fyra siffror i ett 2×4-rutnät av kort. Klockan 16:49 kollapsade rutnätet till en enda inline statistikrad — en enda inramad rad med hårfina avdelare, mindre typsnitt, en behållare i stället för fyra. Fem rutor på skärmen (fyra kort plus ett diagramkort) blev två (en rad och en våg). Nästa PR lade till ännu en ärlig detalj: etiketten "Total Time" blev "Time in Meetings", eftersom total-av-vad var en rimlig fråga ingen borde behöva ställa.

Tjugo minuter, från första utkast till slutversion, allt inom en enda pull request. Om de hade tryckts ihop till en enda "redesign dashboard"-commit hade sökandet varit osynligt. Eftersom de inte var det kan du se en designer konvergera i realtid.

Vågen, mekaniskt

Det finns inget diagrambibliotek här. Vågen är en inline-SVG byggd i JSX, och den är värd en titt eftersom den är ett litet, ärligt recept du kan sno till vilken sparkline som helst.

Utjämningen är knepet. För varje par av intilliggande punkter använder banan ett kubiskt Bézier-segment vars två kontrollpunkter sitter i den horisontella mittpunkten mellan dem — cpx = (prev.x + curr.x) / 2 — med kontrollpunkterna hållna på respektive ändes egen höjd. Det är den klassiska plana-tangent-utjämningen: kurvan glider mjukt genom varje datapunkt utan att någonsin skjuta över det högsta eller under det lägsta värdet, vilket en naiv Catmull-Rom-spline skulle göra. För ett diagram om antal möten är "rita aldrig en puckel som antyder ett värde som inte inträffade" ingen finess; det är korrekthet. Den fyllda ytan är samma kurva stängd längs botten och målad med en vertikal gradient (cyan, som tonar från 30 % till nästan ingenting), och linjen ritar in sig själv från vänster till höger med en framer-motion pathLength-animation.

Under SVG:n ligger datarörläggningen, och den är den tysta hjälten. En ny getAggregateStats()-metod på transkript-repositoryt kör tre förberedda satser mot den lokala SQLite-tabellen transcript_sessions: totaler för all tid (antal, summerad varaktighet, genomsnittlig varaktighet), en rullande sjudagarsräkning och ett GROUP BY date(created_at)-fack per dag. Sedan — och det är detaljen som gör diagrammet robust — går en liten JavaScript-loop igenom de senaste sju kalenderdagarna och återfyller varje dag som frågan inte returnerade genom att trycka in en nolla. Diagrammet får därför garanterat exakt sju punkter, alltid.

Den garantin är det som får kantfallen att försvinna i stället för att behöva vakter utspridda genom vyn. En tom vecka? Sju nollor, och ett Math.max(count, 1) på nämnaren håller linjen platt i botten i stället för att dela med noll. En enda datapunkt som skulle få x-avståndsformeln i / (n − 1) att ge NaN? Kan inte hända — repositoryt skickar aldrig ut färre än sju. Veckodagsetiketterna parsar till och med varje fack vid T12:00:00 snarare än naken midnatt, så att en YYYY-MM-DD-sträng inte glider till föregående dag i en negativ UTC-tidszon. Fixa datans form vid källan så får renderingskoden vara naiv med flit.

Allt stannar på maskinen. Statistikfrågan läser den lokala databasen, returnerar genom en typad transcript:get-stats-IPC-kanal och animeras in i fyra uppräknande tal vid montering. Inget om din möteshistorik lämnar laptopen för att rita det här diagrammet — vilket, för ett verktyg som spelar in dina samtal, är det enda acceptabla sättet att bygga en analysvy.

Ännu en bugg, för omdesigner drar upp dem i ljuset

Inbakat i samma release fanns en fix som inte hade något med dashboarden att göra och allt att göra med den sortens skuld en omdesign snubblar över. Appens mörka scrollbar-stil hade drivit isär i två konkurrerande CSS-definitioner av samma klass — en äldre lila och en nyare vit-på-mörkt — och vilken som vann berodde på kaskadordningen. Värre, bara element som kom ihåg att lägga till klassen fick någon stil alls; allt annat föll tillbaka på den ljusa standard-scrollbaren, och horisontella scrollbars stylades aldrig eftersom de gamla reglerna bara satte en bredd, aldrig en höjd. Fixen raderade båda definitionerna, stylade scrollbaren globalt på varje element och tog bort den nu döda klassen från de tio komponenter som burit den. Det är en tvåradersdiff upprepad tio gånger — den oglamorösa skatten för att ha stylat samma sak två gånger och låtit båda överleva.

Tre saker den här releasen lärde oss

1. Subtrahera för att fokusera. Dashboarden blev bättre av att göra mindre — genom att förlora inspelningskontrollerna den aldrig behövde och bli en tydlig sak. En skärm som är både en visare och en fjärrkontroll är två halva produkter; välj en och flytta den andra dit den hör hemma.
2. Välj kodningen din data förtjänar. Glesa antal läses som frånvaro i staplar och som en trend i ett area chart, från identiska siffror. Det är inte spinn — det är att välja den ärliga formen som låter riktig, tunn data kommunicera.
3. Garantera datans form uppströms. Återfyll-till-sju-loopen är varför diagramkoden inte har utspridda null-kontroller: division med noll, NaN vid en enda punkt och saknade dagar försvinner alla eftersom frågan lovar exakt sju fack. Robust rendering börjar ett lager längre ner.

För det föregående kapitlet i v1-historien, fyra releaser på tjugosex timmar (v1.7.6–v1.8.1); och för hela bågen, anatomin i att skeppa mjukvara till perfektion.