chore(orbit): symmetric host-presence badge — green online / yellow offline

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/OrbitQueueHead.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Users, WifiOff } from 'lucide-react';
+import { Users, Wifi, WifiOff } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useOrbitStore } from '../store/orbitStore';
 import type { OrbitState } from '../api/orbit';
@@ -34,18 +34,20 @@ export default function OrbitQueueHead({ state }: Props) {
   }, [role]);
 
   const names = [state.host, ...state.participants.map(p => p.user)];
-  const hostAway = role === 'guest'
-    && state.positionAt > 0
-    && (nowMs - state.positionAt) > HOST_AWAY_THRESHOLD_MS;
+  const showPresence = role === 'guest' && state.positionAt > 0;
+  const hostAway = showPresence && (nowMs - state.positionAt) > HOST_AWAY_THRESHOLD_MS;
 
   return (
     <div className="orbit-queue-head">
       <div className="orbit-queue-head__title-row">
         <h2 className="orbit-queue-head__title">{state.name}</h2>
-        {hostAway && (
-          <span className="orbit-queue-head__presence" role="status">
-            <WifiOff size={11} />
-            <span>{t('orbit.hostAway')}</span>
+        {showPresence && (
+          <span
+            className={`orbit-queue-head__presence orbit-queue-head__presence--${hostAway ? 'away' : 'online'}`}
+            role="status"
+          >
+            {hostAway ? <WifiOff size={11} /> : <Wifi size={11} />}
+            <span>{t(hostAway ? 'orbit.hostAway' : 'orbit.hostOnline')}</span>
           </span>
         )}
       </div>

src/locales/de.ts

@@ -1485,6 +1485,7 @@ export const deTranslation = {
     catchUpLabel: 'aufholen',
     catchUpTooltip: 'Zur aktuellen Host-Position springen',
     hostAway: 'Host offline',
+    hostOnline: 'Host online',
     endTooltip: 'Session beenden',
     leaveTooltip: 'Session verlassen',
     participantsInviteLabel: 'Einladungslink',

src/locales/en.ts

@@ -1488,6 +1488,7 @@ export const enTranslation = {
     catchUpLabel: 'catch up',
     catchUpTooltip: "Jump to the host's current position",
     hostAway: 'Host offline',
+    hostOnline: 'Host online',
     endTooltip: 'End session',
     leaveTooltip: 'Leave session',
     participantsInviteLabel: 'Invite link',

src/styles/components.css

@@ -12299,12 +12299,24 @@ html[data-psy-native-hidden="true"] *::after {
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: 0.02em;
+  border-radius: 999px;
+  border-width: 1px;
+  border-style: solid;
+}
+.orbit-queue-head__presence--online {
+  color: var(--ctp-green, #a6e3a1);
+  background: color-mix(in srgb, var(--ctp-green, #a6e3a1) 14%, transparent);
+  border-color: color-mix(in srgb, var(--ctp-green, #a6e3a1) 40%, transparent);
+}
+.orbit-queue-head__presence--online svg {
+  color: var(--ctp-green, #a6e3a1);
+}
+.orbit-queue-head__presence--away {
   color: var(--ctp-yellow, #f9e2af);
   background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 14%, transparent);
-  border: 1px solid color-mix(in srgb, var(--ctp-yellow, #f9e2af) 40%, transparent);
-  border-radius: 999px;
+  border-color: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 40%, transparent);
 }
-.orbit-queue-head__presence svg {
+.orbit-queue-head__presence--away svg {
   color: var(--ctp-yellow, #f9e2af);
 }
 .orbit-queue-head__meta {