Redesign FwLite comments panel with responsive layout

.github/workflows/fw-lite.yaml

@@ -82,16 +82,18 @@ jobs:
       - name: Check for stale generated TypeScript types
         run: task fw-lite:has-stale-generated-types -- --no-build
 
-      - name: Set a non-UTC timezone so timezone bugs are observable
-        # Hosted runners default to UTC, which hides date bugs: the error equals the local UTC
-        # offset, which is zero on UTC (see #2092). Eastern is non-UTC, observes DST, and has a
-        # negative offset, so date round-trips run the way real users actually hit them.
-        run: sudo timedatectl set-timezone America/New_York
-
       - name: Dotnet test
         # Benchmarks run in a separate Release-mode job — see `benchmark` below.
         # MAUI tests run in publish-win. `trx` logger writes result files for the TestHistory
         # upload below; --results-directory collects one .trx per test project into a single folder.
+        #
+        # TZ forces a non-UTC timezone so date bugs are observable: on UTC the error equals the
+        # local offset, which is zero and hides bugs (see #2092). Eastern is non-UTC, observes DST,
+        # and has a negative offset. We set TZ instead of `timedatectl set-timezone` because hosted
+        # runners no longer allow it ("Failed to set time zone: Access denied"); .NET honours TZ for
+        # TimeZoneInfo.Local on Linux, so this needs no privileges and only affects the tests.
+        env:
+          TZ: America/New_York
         run: dotnet test FwLiteCore.slnf --logger GitHubActions --logger trx --results-directory "${{ github.workspace }}/TestResults" --no-build -p:BuildAndroid=false --filter "Category!=Benchmark"
 
       - name: Publish test results to TestHistory

backend/FwLite/LcmCrdt/CrdtProjectsService.cs

@@ -179,7 +179,7 @@ public record CreateProjectRequest(
     public async Task<CrdtProject> CreateExampleProject(string name)
     {
         // Code must satisfy the lowercase-only ProjectCode rule; the display name keeps its casing.
-        return await CreateProjectFromTemplate(new(name, name.ToLowerInvariant(), AfterCreate: ExampleProjectData.Seed, Role: UserProjectRole.Manager), vernacularWs: "de");
+        return await CreateProjectFromTemplate(new(name, name.ToLowerInvariant(), AfterCreate: ExampleProjectData.Seed, Role: UserProjectRole.Manager, AuthenticatedUser: "Example User", AuthenticatedUserId: "example-user"), vernacularWs: "de");
     }
 
     /// <summary>

frontend/viewer/src/css-breakpoints.ts

@@ -1,2 +1,4 @@
 // used in the is-mobile.svelte hook and for the tailwind md breakpoint
 export const MOBILE_BREAKPOINT = 768;
+// used for comments sidebar vs bottom dock (and Tailwind xl)
+export const EXTRA_LARGE_BREAKPOINT = 1280;

frontend/viewer/src/lib/components/ui/drawer/drawer-nested.svelte

@@ -1,12 +1,30 @@
 <script lang="ts">
+  import {watch} from 'runed';
+  import {tick} from 'svelte';
   import {Drawer as DrawerPrimitive} from 'vaul-svelte';
 
   let {
     shouldScaleBackground = true,
     open = $bindable(false),
     activeSnapPoint = $bindable(null),
+    snapPoints,
     ...restProps
   }: DrawerPrimitive.RootProps = $props();
+
+  // Same Svelte 5 activeSnapPoint workaround as drawer.svelte
+  // https://github.com/huntabyte/vaul-svelte/issues/129
+  watch(
+    () => open,
+    (isOpen) => {
+      if (!isOpen || !snapPoints?.length || activeSnapPoint == null) return;
+      const target = activeSnapPoint;
+      void tick().then(async () => {
+        activeSnapPoint = null;
+        await tick();
+        if (open) activeSnapPoint = target;
+      });
+    },
+  );
 </script>
 
-<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} {snapPoints} bind:open bind:activeSnapPoint {...restProps} />

frontend/viewer/src/lib/components/ui/drawer/drawer.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import {IsMobile} from '$lib/hooks/is-mobile.svelte';
-  import {Drawer as DrawerPrimitive} from 'vaul-svelte';
   import {useBackHandler} from '$lib/utils/back-handler.svelte';
+  import {watch} from 'runed';
+  import {tick} from 'svelte';
+  import {Drawer as DrawerPrimitive} from 'vaul-svelte';
 
   let {
     shouldScaleBackground = true,
@@ -13,11 +15,29 @@
     disableBackHandler?: boolean;
   } = $props();
 
+  const snapPoints = $derived(restProps.snapPoints);
+
   useBackHandler({
     addToStack: () => open && IsMobile.value && !disableBackHandler,
     onBack: () => (open = false),
     key: 'drawer',
   });
+
+  // Workaround for vaul-svelte + Svelte 5: bind:activeSnapPoint is ignored on open
+  // (drawer lands on snapPoints[0] until interaction). Re-apply after mount/tick.
+  // https://github.com/huntabyte/vaul-svelte/issues/129
+  watch(
+    () => open,
+    (isOpen) => {
+      if (!isOpen || !snapPoints?.length || activeSnapPoint == null) return;
+      const target = activeSnapPoint;
+      void tick().then(async () => {
+        activeSnapPoint = null;
+        await tick();
+        if (open) activeSnapPoint = target;
+      });
+    },
+  );
 </script>
 
 <DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />

frontend/viewer/src/lib/components/ui/textarea/textarea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {cn, type WithElementRef, type WithoutChildren} from '$lib/utils.js';
+  import {onMount} from 'svelte';
   import type {HTMLTextareaAttributes} from 'svelte/elements';
 
   let {
@@ -9,6 +10,11 @@
     'data-slot': dataSlot = 'textarea',
     ...restProps
   }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+  onMount(() => {
+    if (restProps.autofocus) {
+      ref?.focus();
+    }
+  });
 </script>
 
 <textarea