refactor: rename auto-backup to fast connect

src/i18n/de/index.ts

@@ -18,9 +18,9 @@ const de = {
   },
   backup: {
     TITLE: "Backup",
-    AUTO_BACKUP: "Auto-backup",
+    AUTO_BACKUP: "Beschleunigtes Verbinden",
     DISCLAIMER:
-      "Das Backup in diesem Browser gespeichert und bleibt nur auf diesem Computer.",
+      "<b>Nicht auf öffentlichen oder geteilten Computern einschalten.</b> Gerätedaten werden für schnelleren Zugriff lokal zwischengespeichert.",
     DOWNLOAD: "Komplettes Profil",
     RESTORE: "Wiederherstellen",
   },

src/i18n/en/index.ts

@@ -14,9 +14,9 @@ const en = {
   },
   backup: {
     TITLE: "Backup",
-    AUTO_BACKUP: "Auto-backup",
+    AUTO_BACKUP: "Fast Connect",
     DISCLAIMER:
-      "Whenever you connect this device to browser, a backup is made locally and kept only on your computer.",
+      "<b>Turn off if using a shared or public computer.</b> Caches your device's data locally for quick access next time you connect.",
     DOWNLOAD: "Full profile",
     RESTORE: "Restore",
   },

src/routes/(app)/config/settings/+page.svelte

@@ -41,6 +41,7 @@
 
 <section>
   <nav>
+    <a href="#connection">Connection</a>
     {#if $deviceMeta}
       {#each $deviceMeta?.settings as category}
         <a href={`#${category.name}`}>{titlecase(category.name)}</a>
@@ -49,12 +50,19 @@
     <a href="#backup">Backup</a>
   </nav>
   <div class="content">
-    <label
-      >{$LL.deviceManager.AUTO_CONNECT()}<input
-        type="checkbox"
-        use:preference={"autoConnect"}
-      /></label
-    >
+    <fieldset id="connection">
+      <legend>Connection</legend>
+      <label
+        ><input type="checkbox" use:preference={"autoConnect"} />
+        <div class="title">{$LL.deviceManager.AUTO_CONNECT()}</div>
+      </label>
+
+      <label
+        ><input type="checkbox" use:preference={"backup"} />
+        <div class="title">{@html $LL.backup.AUTO_BACKUP()}</div>
+        <div class="description">{@html $LL.backup.DISCLAIMER()}</div>
+      </label>
+    </fieldset>
     {#if $deviceMeta}
       {#each $deviceMeta.settings as category}
         <fieldset id={category.name}>
@@ -115,15 +123,6 @@
 
     <fieldset id="backup">
       <legend>{$LL.backup.TITLE()}</legend>
-      <label
-        ><input
-          type="checkbox"
-          use:preference={"backup"}
-        />{$LL.backup.AUTO_BACKUP()}</label
-      >
-      <p class="disclaimer">
-        {$LL.backup.DISCLAIMER()}
-      </p>
       <div class="row" style="margin-top: auto">
         <button onclick={() => downloadFile(createChordBackup())}>
           <span class="icon">piano</span>