fix: make timeline activation durable and visible

src/ui/panels/TimelinesPanel.tsx

@@ -42,11 +42,15 @@ export function TimelinesPanel({
   settings,
   canManage,
   onActivate,
+  activeTimelineId,
+  activeGroupName,
 }: {
   readonly api: SignageApi;
   readonly settings: SettingsResponse;
   readonly canManage: boolean;
-  readonly onActivate: ((timelineId: string) => void) | undefined;
+  readonly onActivate: ((timelineId: string) => Promise<void>) | undefined;
+  readonly activeTimelineId?: string | null;
+  readonly activeGroupName?: string;
 }): ReactElement {
   const timelines = useResource(
     () => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
@@ -62,6 +66,7 @@ export function TimelinesPanel({
     setNewName("");
     timelines.reload();
   });
+  const activation = useAction();
 
   return (
     <div className="signage-columns">
@@ -117,6 +122,11 @@ export function TimelinesPanel({
                     <TableRow key={timeline.id} selected={timeline.id === selectedId}>
                       <TableCell>
                         <Button onClick={() => setSelectedId(timeline.id)}>{timeline.name}</Button>
+                        {timeline.id === activeTimelineId ? (
+                          <Badge tone="success">
+                            {activeGroupName ? `Active in ${activeGroupName}` : "Active"}
+                          </Badge>
+                        ) : undefined}
                       </TableCell>
                       <TableCell>
                         {timeline.eligibleFrom === null && timeline.eligibleUntil === null
@@ -126,8 +136,12 @@ export function TimelinesPanel({
                       <TableCell>{timeline.revision}</TableCell>
                       <TableCell>
                         {onActivate === undefined ? undefined : (
-                          <Button onClick={() => onActivate(timeline.id)} variant="primary">
-                            Activate
+                          <Button
+                            disabled={activation.pending || timeline.id === activeTimelineId}
+                            onClick={() => activation.run(() => onActivate(timeline.id))}
+                            variant="primary"
+                          >
+                            {timeline.id === activeTimelineId ? "Active" : "Activate"}
                           </Button>
                         )}
                       </TableCell>
@@ -139,6 +153,7 @@ export function TimelinesPanel({
           { label: "Loading timelines…", onRetry: timelines.reload },
         )}
         <FailureNote failure={create.failure} />
+        <FailureNote failure={activation.failure} />
       </Panel>
 
       {selectedId === undefined ? undefined : (