Add button for triggering CRDT sync

frontend/src/lib/forms/Button.svelte

@@ -7,13 +7,16 @@
   export let type: undefined | 'submit' = undefined;
   export let size: undefined | 'btn-sm' = undefined;
   export let disabled = false;
+  export let customLoader = false;
 </script>
 
 <!-- https://daisyui.com/components/button -->
 <button on:click {...$$restProps} class="btn whitespace-nowrap {variant ?? ''} {$$restProps.class ?? ''} {size ?? ''}" {type}
   class:btn-outline={outline}
   disabled={disabled && !loading}
-  class:pointer-events-none={loading}>
-  <Loader {loading} />
+  class:pointer-events-none={loading || $$restProps.class?.includes('pointer-events-none')}>
+  {#if !customLoader}
+    <Loader {loading} />
+  {/if}
   <slot />
 </button>

frontend/src/lib/icons/Icon.svelte

@@ -10,12 +10,14 @@
   export let size: IconSize = 'text-lg';
   export let color: `text-${string}` | undefined = undefined;
   export let pale = false;
+  export let spin = false;
+  export let spinReverse = false;
   // For pixel perfect text alignment, because the svgs often contain vertical white-space
   export let y: string | undefined = undefined;
 
   $: transform = y ? `translateY(${y})` : '';
 </script>
 
 {#if icon}
-  <span class="{icon} {size} {color ?? ''} shrink-0" class:pale style:transform />
+  <span class="{icon} {size} {color ?? ''} shrink-0 {spinReverse ? 'transform rotate-180' : ''}" class:pale style:transform class:animate-spin={spin} />
 {/if}

frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte

@@ -55,6 +55,7 @@
   import { onMount } from 'svelte';
   import { getSearchParamValues } from '$lib/util/query-params';
   import FlexModelVersionText from '$lib/components/Projects/FlexModelVersionText.svelte';
+  import CrdtSyncButton from './CrdtSyncButton.svelte';
 
   export let data: PageData;
   $: user = data.user;
@@ -312,6 +313,7 @@
         </a>
       {/if}
       {#if project.type === ProjectType.FlEx && $isDev}
+        <CrdtSyncButton projectId={project.id} />
         <OpenInFlexModal bind:this={openInFlexModal} {project}/>
         <OpenInFlexButton projectId={project.id} on:click={openInFlexModal.open}/>
       {:else}

frontend/src/routes/(authenticated)/project/[project_code]/CrdtSyncButton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {Button} from '$lib/forms';
+  import {Icon} from '$lib/icons';
+  import {useNotifications} from '$lib/notify';
+
+  export let projectId: string;
+
+  const {notifySuccess, notifyWarning} = useNotifications();
+
+  let syncing = false;
+
+  async function triggerSync(): Promise<void> {
+    syncing = true;
+    try {
+      const response = await fetch(`/api/crdt/crdt-sync/${projectId}`, {
+        method: 'POST',
+      });
+
+      if (response.ok) {
+        const { crdtChanges, fwdataChanges } = await response.json();
+        notifySuccess(`Synced successfully (${fwdataChanges} FwData changes. ${crdtChanges} CRDT changes)`);
+      } else {
+        const error = `Failed to sync: ${response.statusText} (${response.status})`;
+        notifyWarning(error);
+        console.error(error, await response.text());
+      }
+    } finally {
+      syncing = false;
+    }
+  }
+</script>
+
+<Button
+  variant="btn-primary"
+  class="gap-1"
+  on:click={triggerSync}
+  loading={syncing}
+  customLoader
+>
+  FwData
+  <Icon icon="i-mdi-sync" spin={syncing} spinReverse />
+  CRDT
+</Button>