Make sync result message clearer and add FW loading state (#2027)

* Adapt sync message so it's more balanced

* Add pulse animations for loading sync-state values

* Reword sync result message

* Add accordian component

* Make SyncDialog a drawer on mobile

* Make sync arrows responsive

* Put commit counts and explanation behind tooltip

* Prevent ms from being used in sync dialog

* Use new shimmer animation for loading-text

* Make relative-date tooltip target include date

* Clarify sync tabs with titles, tooltip and new name

* Apply punctuation and wording suggestions.

* Reword lexbox sync explanation

Author: myieye

frontend/viewer/README.md

@@ -37,5 +37,5 @@ For formatted values you can do this:
 Add a new component with this:
 
 ```bash
-pnpx shadcn-svelte@next add context-menu
+npx shadcn-svelte@next add context-menu
 ```

frontend/viewer/package.json

@@ -74,9 +74,9 @@
     "tailwindcss": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "tslib": "catalog:",
-    "typescript-eslint": "catalog:",
     "tw-colors": "^3.3.2",
     "typescript": "catalog:",
+    "typescript-eslint": "catalog:",
     "vaul-svelte": "1.0.0-next.6",
     "vite": "catalog:",
     "vite-plugin-webfont-dl": "^3.11.1",
@@ -85,15 +85,15 @@
     "@vitejs/plugin-basic-ssl": "catalog:"
   },
   "dependencies": {
+    "@ffmpeg/core": "0.12.10",
+    "@ffmpeg/ffmpeg": "0.12.15",
+    "@ffmpeg/util": "0.12.2",
     "@formatjs/intl-durationformat": "^0.7.4",
     "@lingui/core": "^5.3.3",
     "@microsoft/dotnet-js-interop": "^8.0.0",
     "@microsoft/signalr": "^8.0.7",
     "autoprefixer": "^10.4.21",
     "fast-json-patch": "^3.1.1",
-    "@ffmpeg/ffmpeg": "0.12.15",
-    "@ffmpeg/util": "0.12.2",
-    "@ffmpeg/core": "0.12.10",
     "jsdom": "^26.1.0",
     "just-throttle": "^4.2.0",
     "postcss": "catalog:",

frontend/viewer/src/app.postcss

@@ -26,6 +26,10 @@
   .app {
     @apply bg-background text-foreground;
   }
+
+  .loading-text {
+    @apply bg-shimmer animate-shimmer rounded-md text-transparent select-none pointer-events-none;
+  }
 }
 
 .font-inter {

frontend/viewer/src/css-breakpoints.ts

@@ -1,2 +1,2 @@
-// used in the is-mobile.svelte hook
+// used in the is-mobile.svelte hook and for the tailwind md breakpoint
 export const MOBILE_BREAKPOINT = 768;

frontend/viewer/src/lib/components/responsive-dialog/responsive-dialog.svelte

@@ -3,30 +3,35 @@
   import * as Dialog from '$lib/components/ui/dialog';
   import * as Drawer from '$lib/components/ui/drawer';
   import { buttonVariants } from '$lib/components/ui/button';
-  import type {PopoverTriggerProps, WithChildren} from 'bits-ui';
+  import type {PopoverTriggerProps, WithChildren, WithoutChildren} from 'bits-ui';
   import {Icon} from '../ui/icon';
   import type {ComponentProps} from 'svelte';
+  import {cn} from '$lib/utils';
 
   type TriggerSnippet = PopoverTriggerProps['child'];
+  type ContentProps = WithoutChildren<ComponentProps<typeof Dialog.Content>>;
   type Props = ComponentProps<typeof Drawer.Root> & {
     open?: boolean,
     title: string,
     trigger?: TriggerSnippet,
+    contentProps?: ContentProps,
   };
 
+
   let {
     open = $bindable(false),
     children,
     title,
     trigger,
+    contentProps,
     ...rest
   }: WithChildren<Props> = $props();
 </script>
 
 {#if !IsMobile.value}
   <Dialog.Root bind:open {...rest}>
     <Dialog.Trigger child={trigger} />
-    <Dialog.Content class="min-h-auto">
+    <Dialog.Content {...contentProps} class={cn('min-h-auto', contentProps?.class)}>
       <Dialog.Header>
         <Dialog.Title>{title}</Dialog.Title>
       </Dialog.Header>
@@ -36,7 +41,7 @@
 {:else}
   <Drawer.Root bind:open {...rest}>
     <Drawer.Trigger child={trigger} />
-    <Drawer.Content>
+    <Drawer.Content {...contentProps}>
       <Drawer.Close class={buttonVariants({ variant: 'ghost', size: 'icon', class: 'absolute top-4 right-4 z-10' })}>
         <Icon icon="i-mdi-close" />
       </Drawer.Close>

frontend/viewer/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+  bind:ref
+  class={cn(
+    'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all',
+    className,
+  )}
+  {...restProps}
+>
+  <div class="pb-4 pt-0">
+    {@render children?.()}
+  </div>
+</AccordionPrimitive.Content>

frontend/viewer/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn('border-b', className)} {...restProps} />

frontend/viewer/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
+  import { Icon } from '../icon';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    level = 3,
+    children,
+    ...restProps
+  }: WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps['level'];
+  } = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+  <AccordionPrimitive.Trigger
+    bind:ref
+    class={cn(
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>.i-mdi-chevron-down]:rotate-180',
+      className,
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    <Icon icon="i-mdi-chevron-down" class="size-4 shrink-0 transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

frontend/viewer/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,18 @@
+import {Accordion as AccordionPrimitive} from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const Root = AccordionPrimitive.Root;
+
+export {
+  Root,
+  Content,
+  Item,
+  Trigger,
+  //
+  Root as Accordion,
+  Content as AccordionContent,
+  Item as AccordionItem,
+  Trigger as AccordionTrigger,
+};

frontend/viewer/src/lib/components/ui/format/format-duration.ts

@@ -5,6 +5,7 @@ import {locale} from 'svelte-i18n-lingui';
 
 const currentLocale = fromStore(locale);
 type Duration = Pick<Intl.DurationLike, 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds'>;
+export type SmallestUnit = 'hours' | 'minutes' | 'seconds' | 'milliseconds';
 
 function limitDurationUnits(duration: Duration, maxUnits: number): Duration {
   const units: (keyof Duration)[] = ['days', 'hours', 'minutes', 'seconds', 'milliseconds'];
@@ -52,17 +53,17 @@ export function formatDigitalDuration(value: Duration) {
   });
 }
 
-export function formatDuration(value: Duration, smallestUnit?: 'hours' | 'minutes' | 'seconds' | 'milliseconds', options?: Intl.DurationFormatOptions, maxUnits?: number) {
+export function formatDuration(value: Duration, smallestUnit?: SmallestUnit, options?: Intl.DurationFormatOptions, maxUnits?: number) {
   const formatter = new Intl.DurationFormat(currentLocale.current, options);//has been polyfilled in main.ts
   const normalized = normalizeDuration(value, smallestUnit);
   const limitedDuration = maxUnits ? limitDurationUnits(normalized, maxUnits) : normalized;
   return formatter.format(limitedDuration);
 }
 
-export function normalizeDuration(value: Duration, smallestUnit?: 'hours' | 'minutes' | 'seconds' | 'milliseconds'): Duration
+export function normalizeDuration(value: Duration, smallestUnit?: SmallestUnit): Duration
 export function normalizeDuration(value: Duration, smallestUnit: 'seconds'): Omit<Duration, 'milliseconds'>
 export function normalizeDuration(value: Duration): Duration
-export function normalizeDuration(value: Duration, smallestUnit?: 'hours' | 'minutes' | 'seconds' | 'milliseconds'): Duration {
+export function normalizeDuration(value: Duration, smallestUnit?: SmallestUnit): Duration {
   const msPerHour = 3_600_000;
   const msPerMinute = 60_000;
   const msPerSecond = 1_000;