Add taskQueueView store to persist worker tab on task queue page (#2309)

src/lib/pages/task-queue.svelte

@@ -7,12 +7,15 @@
   import Tabs from '$lib/holocene/tab/tabs.svelte';
   import { translate } from '$lib/i18n/translate';
   import { getPollers } from '$lib/services/pollers-service';
+  import { taskQueueView } from '$lib/stores/task-queue-view';
 
   import TaskQueueVersioning from './task-queue-versioning.svelte';
 
   $: ({ queue: taskQueue, namespace } = $page.params);
 
-  let view: 'workers' | 'versioning' = 'workers';
+  const onTab = (view: 'workers' | 'versioning') => {
+    $taskQueueView = view;
+  };
 </script>
 
 {#await getPollers({ queue: taskQueue, namespace }) then workers}
@@ -25,16 +28,18 @@
         <Tab
           label={translate('workers.workers')}
           id="worker-tab"
-          onClick={() => (view = 'workers')}
+          onClick={() => onTab('workers')}
+          active={$taskQueueView === 'workers'}
         />
         <Tab
           label={translate('workers.versioning')}
           id="versioning-tab"
-          onClick={() => (view = 'versioning')}
+          onClick={() => onTab('versioning')}
+          active={$taskQueueView === 'versioning'}
         />
       </TabList>
     </Tabs>
-    {#if view === 'versioning'}
+    {#if $taskQueueView === 'versioning'}
       <TaskQueueVersioning {taskQueue} {workers} />
     {:else}
       <WorkerTable {workers} />

src/lib/stores/task-queue-view.ts

@@ -0,0 +1,8 @@
+import { persistStore } from '$lib/stores/persist-store';
+import type { TaskQueueView } from '$lib/types/events';
+
+export const taskQueueView = persistStore<TaskQueueView>(
+  'taskQueueView',
+  'workers',
+  true,
+);

src/lib/types/events.ts

@@ -151,6 +151,7 @@ export type ChildEvent = StartChildWorkflowExecutionInitiatedEvent &
   ChildWorkflowExecutionTerminatedEvent;
 
 export type EventView = 'compact' | 'feed' | 'json';
+export type TaskQueueView = 'workers' | 'versioning';
 
 export type IterableEvent = WorkflowEvent | EventGroup;