Format components directory

Author: myieye

frontend/viewer/src/lib/components/ListItem.svelte

@@ -41,19 +41,19 @@
     'disabled:pointer-events-none disabled:contrast-[0.8]',
     loading && 'animate-pulse',
     skeleton && 'cursor-default hover:bg-transparent pointer-events-none shadow-none',
-    className)}
+    className,
+  )}
   role="row"
   bind:this={ref}
   {...restProps}
 >
   {#if typeof icon === 'string'}
-    <Icon {icon} class="size-6"/>
+    <Icon {icon} class="size-6" />
   {:else}
     {@render icon?.()}
   {/if}
   <div class="flex flex-col grow">
     {@render children?.()}
   </div>
   {@render actions?.()}
-
 </button>

frontend/viewer/src/lib/components/Loading.svelte

@@ -5,10 +5,7 @@
 
   type Props = HTMLAttributes<HTMLSpanElement>;
 
-  let {
-    class: className,
-    ...restProps
-  }: Props = $props();
+  let {class: className, ...restProps}: Props = $props();
 </script>
 
 <Icon icon="i-mdi-loading" class={cn('animate-spin', className)} {...restProps} />

frontend/viewer/src/lib/components/OpenInFieldWorksButton.svelte

@@ -11,14 +11,10 @@
   import {Icon} from './ui/icon';
 
   type Props = {
-    entry: IEntry
+    entry: IEntry;
   } & ButtonProps;
 
-  const {
-    entry,
-    class: className,
-    ...rest
-  }: Props = $props();
+  const {entry, class: className, ...rest}: Props = $props();
 
   const appLauncher = useAppLauncherService();
   const projectContext = useProjectContext();
@@ -36,22 +32,31 @@
       }
     }
     if (opened) {
-      AppNotification.displayAction($t`This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen.`, {
-        label: $t`Reopen`,
-        callback: () => window.location.reload()
-      }, 'warning');
+      AppNotification.displayAction(
+        $t`This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen.`,
+        {
+          label: $t`Reopen`,
+          callback: () => window.location.reload(),
+        },
+        'warning',
+      );
     } else {
       AppNotification.display($t`Unable to open in FieldWorks`, 'error');
     }
   }
 
-  const mergedProps = $derived(mergeProps({
-    onclick: openInFlex,
-  }, rest));
+  const mergedProps = $derived(
+    mergeProps(
+      {
+        onclick: openInFlex,
+      },
+      rest,
+    ),
+  );
 </script>
 
 <!--button must be a link otherwise it won't follow the redirect to a protocol handler-->
-<button class={cn(buttonVariants({ variant: 'ghost'}), className)} {...mergedProps}>
+<button class={cn(buttonVariants({variant: 'ghost'}), className)} {...mergedProps}>
   <Icon src={flexLogo} alt={$t`FieldWorks logo`} />
   {$t`Open in FieldWorks`}
 </button>

frontend/viewer/src/lib/components/ThemePicker.svelte

@@ -10,21 +10,22 @@
 
   const themes = [msg`green`, msg`blue`, msg`rose`, msg`orange`, msg`violet`, msg`stone`];
   let {
-    buttonProps = {}
+    buttonProps = {},
   }: {
-    buttonProps?: Partial<ButtonProps>
+    buttonProps?: Partial<ButtonProps>;
   } = $props();
-
 </script>
 
 <Popover.Root>
   <Popover.Trigger>
     {#snippet child({props})}
       <Button variant="ghost" size="icon" {...mergeProps(props, buttonProps)}>
-        <Icon icon="i-mdi-white-balance-sunny"
+        <Icon
+          icon="i-mdi-white-balance-sunny"
           class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-primary"
         />
-        <Icon icon="i-mdi-weather-night"
+        <Icon
+          icon="i-mdi-weather-night"
           class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-primary"
         />
         <span class="sr-only">{$t`Choose theme`}</span>
@@ -55,12 +56,14 @@
             >
               <span
                 data-theme={themeName}
-                class={cn('flex size-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-primary',
-                mode.current === 'dark' && 'dark',
-                mode.current === 'light' && 'light')}
+                class={cn(
+                  'flex size-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-primary',
+                  mode.current === 'dark' && 'dark',
+                  mode.current === 'light' && 'light',
+                )}
               >
                 {#if isActive}
-                  <Icon icon="i-mdi-check" class="text-white size-4"/>
+                  <Icon icon="i-mdi-check" class="text-white size-4" />
                 {/if}
               </span>
               <span class="capitalize">
@@ -105,5 +108,3 @@
     </div>
   </Popover.Content>
 </Popover.Root>
-
-

frontend/viewer/src/lib/components/audio/AudioDialog.svelte

@@ -16,28 +16,34 @@
     open = $bindable(false),
     title = undefined,
     onSubmit = () => {},
-    children = undefined
-  } : {
-    open: boolean,
-    title?: string,
-    onSubmit?: (audioId: string) => void,
-    children?: Snippet
+    children = undefined,
+  }: {
+    open: boolean;
+    title?: string;
+    onSubmit?: (audioId: string) => void;
+    children?: Snippet;
   } = $props();
-  useBackHandler({addToStack: () => open, onBack: () => open = false, key: 'audio-dialog'});
+  useBackHandler({addToStack: () => open, onBack: () => (open = false), key: 'audio-dialog'});
   const lexboxApi = useLexboxApi();
 
   let submitting = $state(false);
   let selectedFile = $state<File>();
   let finalAudio = $state<File>();
   const tooBig = $derived((finalAudio?.size ?? 0) > 10 * 1024 * 1024);
 
-  watch(() => open, () => {
-    if (!open) reset();
-  });
+  watch(
+    () => open,
+    () => {
+      if (!open) reset();
+    },
+  );
 
-  watch(() => selectedFile, () => {
-    if (!selectedFile) finalAudio = undefined;
-  })
+  watch(
+    () => selectedFile,
+    () => {
+      if (!selectedFile) finalAudio = undefined;
+    },
+  );
 
   function close() {
     open = false;
@@ -71,10 +77,10 @@
     const response = await lexboxApi.saveFile(finalAudio, {filename: finalAudio.name, mimeType: finalAudio.type});
     switch (response.result) {
       case UploadFileResult.SavedLocally:
-        AppNotification.display($t`Audio saved locally`, { type: 'success', timeout: 'short' });
+        AppNotification.display($t`Audio saved locally`, {type: 'success', timeout: 'short'});
         break;
       case UploadFileResult.SavedToLexbox:
-        AppNotification.display($t`Audio saved and uploaded to Lexbox`, { type: 'success', timeout: 'short' });
+        AppNotification.display($t`Audio saved and uploaded to Lexbox`, {type: 'success', timeout: 'short'});
         break;
       case UploadFileResult.TooBig:
         throw new Error($t`File too big`);
@@ -130,10 +136,11 @@
   }
 </script>
 
-
 <Dialog.Root bind:open>
-  <Dialog.DialogContent onOpenAutoFocus={(e) => e.preventDefault()} class={cn('sm:min-h-[min(calc(100%-16px),30rem)]',
-    children ? 'grid-rows-[auto_auto_1fr]' : 'grid-rows-[auto_1fr]')}>
+  <Dialog.DialogContent
+    onOpenAutoFocus={(e) => e.preventDefault()}
+    class={cn('sm:min-h-[min(calc(100%-16px),30rem)]', children ? 'grid-rows-[auto_auto_1fr]' : 'grid-rows-[auto_1fr]')}
+  >
     <Dialog.DialogHeader>
       <Dialog.DialogTitle>{title || $t`Add audio`}</Dialog.DialogTitle>
     </Dialog.DialogHeader>
@@ -142,19 +149,18 @@
       <div>{@render children?.()}</div>
     {/if}
     {#if !selectedFile}
-      <AudioProvider {onFileSelected} {onRecordingComplete}/>
+      <AudioProvider {onFileSelected} {onRecordingComplete} />
     {:else}
-      <AudioEditor audio={selectedFile} bind:finalAudio onDiscard={onDiscard}/>
+      <AudioEditor audio={selectedFile} bind:finalAudio {onDiscard} />
       {#if tooBig}
         <p class="text-destructive text-lg text-end">{$t`File too big`}</p>
       {/if}
       <Dialog.DialogFooter>
-        <Button onclick={() => open = false} variant="secondary">{$t`Cancel`}</Button>
+        <Button onclick={() => (open = false)} variant="secondary">{$t`Cancel`}</Button>
         <Button onclick={() => submitAudio()} disabled={tooBig || !finalAudio} loading={submitting}>
           {$t`Save audio`}
         </Button>
       </Dialog.DialogFooter>
     {/if}
   </Dialog.DialogContent>
 </Dialog.Root>
-

frontend/viewer/src/lib/components/audio/audio-editor.svelte

@@ -17,11 +17,7 @@
     onDiscard: () => void;
   };
 
-  let {
-    audio,
-    finalAudio = $bindable(undefined),
-    onDiscard
-  }: Props = $props();
+  let {audio, finalAudio = $bindable(undefined), onDiscard}: Props = $props();
 
   let audioApi = $state<WaveSurfer>();
   let playing = $state(false);
@@ -30,33 +26,45 @@
   const formattedDuration = $derived(duration ? formatDigitalDuration({seconds: duration}) : 'unknown');
   let ffmpegApi: FFmpegApi | undefined;
 
-  let ffmpegFile = resource(() => audio, async (audio, _, {signal}) => {
-    ffmpegApi ??= await FFmpegApi.create();
-    return await ffmpegApi.toFFmpegFile(audio, AbortSignal.any([signal, abortController.signal]));
-  });
+  let ffmpegFile = resource(
+    () => audio,
+    async (audio, _, {signal}) => {
+      ffmpegApi ??= await FFmpegApi.create();
+      return await ffmpegApi.toFFmpegFile(audio, AbortSignal.any([signal, abortController.signal]));
+    },
+  );
 
-  let flacFile = resource(() => [ffmpegFile.current], async ([file], _, {signal}) => {
-    if (!file) return;
-    ffmpegApi ??= await FFmpegApi.create();
-    return await ffmpegApi.convertToFlac(file, AbortSignal.any([signal, abortController.signal]));
-  });
+  let flacFile = resource(
+    () => [ffmpegFile.current],
+    async ([file], _, {signal}) => {
+      if (!file) return;
+      ffmpegApi ??= await FFmpegApi.create();
+      return await ffmpegApi.convertToFlac(file, AbortSignal.any([signal, abortController.signal]));
+    },
+  );
 
-  let readFile = resource(() => [flacFile.current], async ([file], _, {signal}) => {
-    if (!file) return;
-    ffmpegApi ??= await FFmpegApi.create();
-    return await ffmpegApi.readFile(file, AbortSignal.any([signal, abortController.signal]));
-  });
+  let readFile = resource(
+    () => [flacFile.current],
+    async ([file], _, {signal}) => {
+      if (!file) return;
+      ffmpegApi ??= await FFmpegApi.create();
+      return await ffmpegApi.readFile(file, AbortSignal.any([signal, abortController.signal]));
+    },
+  );
 
-  watch(() => [readFile.current, readFile.loading] as const, ([file, loading]) => {
-    if (loading || !file) {
-      finalAudio = undefined;
-    } else {
-      finalAudio = file;
-    }
-  });
+  watch(
+    () => [readFile.current, readFile.loading] as const,
+    ([file, loading]) => {
+      if (loading || !file) {
+        finalAudio = undefined;
+      } else {
+        finalAudio = file;
+      }
+    },
+  );
 
   const loading = $derived(ffmpegFile.loading || flacFile.loading || readFile.loading);
-  const error   = $derived((ffmpegFile.error || flacFile.error || readFile.error)?.toString());
+  const error = $derived((ffmpegFile.error || flacFile.error || readFile.error)?.toString());
 
   const abortController = new AbortController();
   onDestroy(() => {
@@ -81,28 +89,30 @@
 
 <div class="flex flex-col gap-4 items-center justify-center">
   {#if loading || !finalAudio}
-    <Loading class="self-center justify-self-center size-16"/>
+    <Loading class="self-center justify-self-center size-16" />
   {:else}
-  <span class="inline-grid grid-cols-[auto_auto_1rem_auto_auto] gap-2 items-baseline">
-    <Label class="justify-self-end">{$t`Length:`}</Label> <span>{$t`${formattedDuration}`}</span>
-    <span></span>
-    <Label class="justify-self-end">{$t`Size:`}</Label> <span>{$t`${mb} MB`}</span>
-    {#if finalAudio.name}
-      <Label class="justify-self-end">{$t`File name:`}</Label>
-      <span class="col-span-4">{$t`${finalAudio.name}`}</span>
-    {/if}
-    <DevContent>
-      <Label class="justify-self-end">{$t`Type:`}</Label>
-      <span class="col-span-4">{$t`${finalAudio.type}`}</span>
-    </DevContent>
-  </span>
+    <span class="inline-grid grid-cols-[auto_auto_1rem_auto_auto] gap-2 items-baseline">
+      <Label class="justify-self-end">{$t`Length:`}</Label> <span>{$t`${formattedDuration}`}</span>
+      <span></span>
+      <Label class="justify-self-end">{$t`Size:`}</Label> <span>{$t`${mb} MB`}</span>
+      {#if finalAudio.name}
+        <Label class="justify-self-end">{$t`File name:`}</Label>
+        <span class="col-span-4">{$t`${finalAudio.name}`}</span>
+      {/if}
+      <DevContent>
+        <Label class="justify-self-end">{$t`Type:`}</Label>
+        <span class="col-span-4">{$t`${finalAudio.type}`}</span>
+      </DevContent>
+    </span>
     <!-- contain-inline-size prevents wavesurfer from freaking out inside a grid -->
     <!-- pb ensures the waveform timeline is in the bounds of this container -->
     <div class="w-full h-32 pb-3 contain-inline-size border-y">
-      <Waveform audio={finalAudio} bind:playing bind:audioApi bind:duration showTimeline autoplay class="size-full"/>
+      <Waveform audio={finalAudio} bind:playing bind:audioApi bind:duration showTimeline autoplay class="size-full" />
     </div>
     <div class="flex gap-2">
-      <Button onclick={() => downloadAudio()} disabled={!finalAudio} variant="secondary" icon="i-mdi-download">{$t`Download`}</Button>
+      <Button onclick={() => downloadAudio()} disabled={!finalAudio} variant="secondary" icon="i-mdi-download"
+        >{$t`Download`}</Button
+      >
       <Button variant="secondary" icon="i-mdi-close" onclick={onDiscard} disabled={!audio}>{$t`Discard`}</Button>
       <Button
         icon={playing ? 'i-mdi-pause' : 'i-mdi-play'}