jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(app): make the sidebar's running status a plain dot

Browse Source 
The running dot no longer animates, and the machinery behind it is gone
rather than switched off: the shared refcounted clock, the theme-scheme prop
mapping, and the extra wave color all existed only to drive it.

Four affordances were tried and each failed for its own reason, which is
worth writing down before someone reaches for one of them again. Fading the
dot blends it toward the row's surface rather than toward black, so the
bottom of every cycle was a washed-out blue that read as the success dot one
row up. Dropping chroma holds brightness but turns the low point grey.
Raising chroma has nowhere to go: blue at these lightnesses is already within
11% of the sRGB gamut edge, so the only real headroom is at the hue-250 cusp,
which costs lightness. An expanding ring solved the color problem outright —
motion cannot be confused with another hue — but stayed too subtle at a size
that suits an 8pt dot sitting beside a title.

If the ring is revisited: the project badge shell clips its contents to 12pt,
which is what made the first attempt invisible on exactly the rows most
likely to be on screen. The clip is not what makes the shell read as a
knockout; its fill is.
This commit is contained in:
Mohamed Boudra
2026-08-05 23:51:06 +02:00
parent fb5cfb9fb9
commit 9f84522521
4 changed files with 14 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx
+4 -5
View File
@@ -5,7 +5,6 @@ import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "reac
import { CircleAlert, Folder, FolderGit2, Monitor } from "lucide-react-native";
import { ProjectStatusIndicator } from "@/components/sidebar/project-leading-visual";
import type { SurfaceBackdrop } from "@/styles/surface-backdrop";
import { PulsingStatusDot } from "@/components/sidebar/pulsing-status-dot";
import {
WorkspaceMetaRow,
type WorkspaceServiceSummary,
@@ -217,14 +216,14 @@ function WorkspaceStatusIndicator({
loading?: boolean;
reserveIdleSpace?: boolean;
}) {
// Busy is a pulsing dot here for the same reason it is on a project icon: every status in
// the sidebar is a dot, and a row with a project icon simply moves that dot onto the icon.
// Busy is a dot here for the same reason it is on a project icon: every status in the
// sidebar is a dot, and a row with a project icon simply moves that dot onto the icon.
// A row starting up and a row working are both busy, so they share the dot and differ only
// in testID.
if (loading) {
return (
<View style={styles.workspaceStatusDot} testID="workspace-status-indicator-loading">
<PulsingStatusDot style={styles.standaloneRunningDot} />
<View style={styles.standaloneRunningDot} />
</View>
);
}
@@ -232,7 +231,7 @@ function WorkspaceStatusIndicator({
if (shouldRenderSyncedStatusLoader({ bucket })) {
return (
<View style={styles.workspaceStatusDot} testID="workspace-status-indicator-running">
<PulsingStatusDot style={styles.standaloneRunningDot} />
<View style={styles.standaloneRunningDot} />
</View>
);
}