BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-02 13:39:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(tabs): orbit the working ring around a busy session tab's dot

Browse Source 
The desktop home rail and the phone overview both draw a spinning
`tab-load-spin` ring around their green dot while a session works; the
tab strip itself only pulsed. Same ring on the tab dot now, so "working"
reads identically on every surface.

Drawn as a ::after border circle rather than a halo: the skin block sets
`box-shadow: none` on .tab-status.busy to keep tab dots quiet and
outranks any plain class rule, and a pseudo-element sidesteps that
without reintroducing the glow. It is absolutely positioned, so it never
widens the tab or shifts the label, and it is disabled under
prefers-reduced-motion.

Phones keep their existing tell (a 9px dot with a glow) and suppress the
ring: a 15px ring inside a 32px tab would sit on top of the tab name.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-08-10 04:00:05 +02:00
parent 45ad9de89e
commit 8fcfdb1e6e
2 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/mobile.css
+7
View File
@@ -680,6 +680,13 @@ html.mobile-init .file-browser-panel {
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
}
/* No orbiting ring on phone tabs (styles.css draws one on desktop/tablet):
the dot is already enlarged to 9px with a glow here, and a 15px ring in a
32px tab would sit on top of the tab name. The glow is the phone's tell. */
.session-tab .tab-status.busy::after {
display: none;
}
/* Truncate tab names more aggressively on mobile */
.session-tab .tab-name {
max-width: 50px;
src/web/public/styles.css
+20
View File
@@ -1316,11 +1316,30 @@ html[data-line-anim="packet"] .connection-line.line-enter {
.session-tab .tab-status.idle { background: var(--green); }
.session-tab .tab-status.busy {
position: relative;
background: var(--green);
animation: pulse 1.5s infinite;
/* Performance: GPU acceleration for animation */
will-change: opacity;
}
/* Orbiting ring on a WORKING tab: the same `tab-load-spin` circle the desktop
home rail (.home-sessions-dot--working) and the phone overview
(.mobile-overview-dot--working) draw, so "working" reads identically on every
surface. Pseudo-element on purpose — the skin block below sets
`box-shadow: none` on .tab-status.busy to keep tab dots halo-free, and it
outranks any plain class rule here; a ring drawn with a border is untouched by
that and keeps the tabs quiet while still showing motion. Absolutely
positioned, so it never widens the tab or shifts the label. */
.session-tab .tab-status.busy::after {
content: '';
position: absolute;
inset: -3px;
border: 1.5px solid color-mix(in srgb, var(--green) 25%, transparent);
border-top-color: var(--green);
border-radius: 50%;
animation: tab-load-spin 0.7s linear infinite;
pointer-events: none;
}
.session-tab .tab-status.error { background: var(--red); }
.session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
@@ -14298,6 +14317,7 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
}
@media (prefers-reduced-motion: reduce) {
.session-tab .tab-status.busy::after,
.home-sessions-row,
.home-sessions-dot,
.home-sessions-dot::after {