Refactor federation + can sync track between instances

ui/src/lib/components/FederationSettings.svelte

@@ -9,6 +9,7 @@
      InputGroup,
      InputGroupText,
      Row,
+     Spinner,
  } from '@sveltestrap/sveltestrap';
 
  const dispatch = createEventDispatcher();
@@ -27,6 +28,21 @@
          delete value[bak];
      }
  }
+
+ const syncInProgress = { };
+ async function syncMusic(srv) {
+     syncInProgress[srv] = true;
+
+     const res = await fetch(`api/federation/${srv}/sync`, {
+         method: 'POST',
+         headers: {'Accept': 'application/json'}
+     });
+     if (res.status != 200) {
+         throw new Error((await res.json()).errmsg);
+     }
+
+     syncInProgress[srv] = false;
+ }
 </script>
 
 {#if value}
@@ -57,15 +73,34 @@
             </InputGroup>
         </Col>
         <Col>
-            <InputGroup>
-                <Input
-                    type="number"
-                    placeholder="60"
-                    bind:value={value[key].delay}
-                    on:change={() => dispatch("input")}
-                />
-                <InputGroupText>ms</InputGroupText>
-            </InputGroup>
+            <Row>
+                <Col>
+                    <InputGroup>
+                        <Input
+                            type="number"
+                            placeholder="60"
+                            bind:value={value[key].delay}
+                            on:change={() => dispatch("input")}
+                        />
+                        <InputGroupText>ms</InputGroupText>
+                    </InputGroup>
+                </Col>
+                <Col xs="auto">
+                    <Button
+                        color="info"
+                        disabled={syncInProgress[key]}
+                        title="Synchroniser les musiques"
+                        type="button"
+                        on:click={() => syncMusic(key)}
+                    >
+                        {#if syncInProgress[key]}
+                            <Spinner size="sm" />
+                        {:else}
+                            <Icon name="music-note-list" />
+                        {/if}
+                    </Button>
+                </Col>
+            </Row>
         </Col>
     </Row>
 {/each}