Replace URL params with project-scoped storage for task selection (#2142)

* Make task selection project-specific instead of global

Previously, the selected task was stored globally in localStorage,
causing the same task to be selected across all projects. This fix
makes task selection project-specific by:

1. Creating a new project-storage utility that scopes storage keys
   by projectCode (e.g., "project:myproject:selectedTaskId")

2. Updating TasksView to use project-specific storage instead of
   global localStorage

This ensures each project maintains its own task selection state.

Future enhancement: The storage utility includes a TODO to use
MAUI Preferences when running in the MAUI app, instead of
localStorage. This will provide better native integration.

https://claude.ai/code/session_01GXJiKFBAUAGV6nfG88wDAw

* Refactor project storage to use service pattern with reactive properties

Refactored the project storage utility to follow the codebase's
established patterns:

1. Converted project-storage to a class-based service with reactive
   properties using Svelte 5's $state
2. Added useProjectStorage() hook pattern for easy access in components
3. Properties like selectedTaskId now automatically sync to localStorage
   using watch()
4. Initialized ProjectStorage service in all project contexts:
   - ShadcnProjectView.svelte (main project view)
   - WebComponent.svelte (web component integration)
   - in-memory-demo-api.ts (demo mode)
5. Simplified TasksView.svelte to use the new service pattern

Benefits:
- Cleaner API: `projectStorage.selectedTaskId` instead of function calls
- Automatic persistence: Changes to properties automatically sync
- Consistent with other services in the codebase
- Easier to extend with new project-specific settings

https://claude.ai/code/session_01GXJiKFBAUAGV6nfG88wDAw

* Refactor to use StorageProp pattern and auto-initialization

Improvements based on code review feedback:

1. Created StorageProp class to eliminate string repetition
   - Properties defined as: readonly selectedTaskId = new StorageProp(...)
   - Accessed via .current property (familiar pattern)
   - Each property encapsulates its own watch() and storage sync

2. Removed QueryParamState from TasksView
   - Task selection is now pure app state, not URL-based
   - Simplifies logic and prevents unintended clearing
   - Uses projectStorage.selectedTaskId.current directly

3. Auto-initialization in useProjectStorage()
   - Removed explicit initProjectStorage() calls
   - Service lazily initializes on first use
   - Safer: throws if project context not set up

4. Removed unnecessary clear() method

Benefits:
- No string repetition (key appears once in StorageProp constructor)
- Cleaner component code (no QueryParamState complexity)
- One less thing to remember to initialize
- Familiar .current pattern from other reactive utilities

https://claude.ai/code/session_01GXJiKFBAUAGV6nfG88wDAw

* Simplify StorageProp to be self-contained and remove watch

Improvements based on code review:

1. StorageProp is now self-contained
   - Not exported (internal implementation detail)
   - Doesn't depend on ProjectStorage instance
   - Receives projectCode directly, builds its own keys
   - Handles all persistence logic internally

2. Removed watch() in favor of direct persistence
   - Setter now calls persist() directly
   - Cleaner, more predictable behavior
   - Less overhead

3. Consolidated set/remove logic
   - persist() handles both set and remove in one place
   - Empty strings automatically trigger removal

4. Removed unused ProjectStorage methods
   - Removed get(), set(), remove(), getStorageKey()
   - ProjectStorage is now minimal (just holds properties)
   - Can add them back later if needed for testing

5. Simplified TasksView
   - Extract just selectedTaskId property
   - Cleaner: const selectedTaskId = useProjectStorage().selectedTaskId

Benefits:
- Simpler architecture (StorageProp doesn't need ProjectStorage)
- More direct (no watch indirection)
- Easier to test (StorageProp is self-contained)
- Minimal API surface (ProjectStorage only exposes properties)

https://claude.ai/code/session_01GXJiKFBAUAGV6nfG88wDAw

* Move public API after constructor for better readability

Reordered StorageProp class members to:
- Fields
- Constructor
- Public API (current getter/setter)
- Private implementation methods

This makes the public interface immediately visible after understanding
the basic structure, improving code readability.

https://claude.ai/code/session_01GXJiKFBAUAGV6nfG88wDAw

* Remove unused #projectCode field from ProjectStorage

The field was stored but never used - projectCode is only needed
as a constructor parameter to pass to StorageProp instances.

Fixes linter error: no-unused-private-class-members

https://claude.ai/code/session_01GXJiKFBAUAGV6nfG88wDAw

---------

Co-authored-by: Claude <[email protected]>

Author: myieye

frontend/viewer/src/lib/utils/project-storage.svelte.ts

@@ -0,0 +1,74 @@
+import { getContext, setContext } from 'svelte';
+import { useProjectContext } from '$project/project-context.svelte';
+
+/**
+ * Project-specific storage service
+ *
+ * This service provides project-scoped storage for user preferences.
+ * Currently uses localStorage with project-prefixed keys.
+ *
+ * TODO: Enhance to use MAUI Preferences when running in MAUI app
+ * (detect platform via useFwLiteConfig().os and use a preferences service)
+ */
+
+const projectStorageContextKey = 'project-storage';
+
+/**
+ * Reactive storage property that automatically syncs to localStorage
+ */
+class StorageProp {
+  #projectCode: string;
+  #key: string;
+  #value = $state<string>('');
+
+  constructor(projectCode: string, key: string) {
+    this.#projectCode = projectCode;
+    this.#key = key;
+    // Load initial value
+    this.#value = this.load();
+  }
+
+  get current(): string {
+    return this.#value;
+  }
+
+  set current(value: string) {
+    this.#value = value;
+    this.persist(value);
+  }
+
+  private getStorageKey(): string {
+    return `project:${this.#projectCode}:${this.#key}`;
+  }
+
+  private load(): string {
+    return localStorage.getItem(this.getStorageKey()) ?? '';
+  }
+
+  private persist(value: string): void {
+    const storageKey = this.getStorageKey();
+    if (value) {
+      localStorage.setItem(storageKey, value);
+    } else {
+      localStorage.removeItem(storageKey);
+    }
+  }
+}
+
+export class ProjectStorage {
+  readonly selectedTaskId: StorageProp;
+
+  constructor(projectCode: string) {
+    this.selectedTaskId = new StorageProp(projectCode, 'selectedTaskId');
+  }
+}
+
+export function useProjectStorage(): ProjectStorage {
+  let storage = getContext<ProjectStorage>(projectStorageContextKey);
+  if (!storage) {
+    const projectContext = useProjectContext();
+    storage = new ProjectStorage(projectContext.projectCode);
+    setContext(projectStorageContextKey, storage);
+  }
+  return storage;
+}

frontend/viewer/src/project/tasks/TasksView.svelte

@@ -2,21 +2,16 @@
   import * as Select from '$lib/components/ui/select';
   import {useTasksService} from './tasks-service';
   import {t} from 'svelte-i18n-lingui';
-  import {QueryParamState} from '$lib/utils/url.svelte';
+  import {useProjectStorage} from '$lib/utils/project-storage.svelte';
   import TaskView from './TaskView.svelte';
-  import {watch} from 'runed';
   import {onMount} from 'svelte';
   import {SidebarTrigger} from '$lib/components/ui/sidebar';
-const selectedTaskStorageKey = 'selectedTaskId';
+
+  const selectedTaskId = useProjectStorage().selectedTaskId;
   const tasksService = useTasksService();
   const tasks = $derived(tasksService.listTasks());
-  const selectedTaskId = new QueryParamState({key: 'taskId', allowBack: true, replaceOnDefaultValue: true}, localStorage.getItem(selectedTaskStorageKey) ?? '');
-  watch(() => selectedTaskId.current, (selectedTaskId) => {
-    if (selectedTaskId) {
-      localStorage.setItem(selectedTaskStorageKey, selectedTaskId);
-    }
-  });
   const selectedTask = $derived(tasks.find(task => task.id === selectedTaskId.current));
+
   onMount(() => {
     if (!selectedTaskId.current) {
       open = true;