add icon to public private toggle

web/src/lib/components/base/toggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     interface Props {
         name?: string;
+        icon?: string;
         value?: boolean;
         label?: string;
         error?: string;
@@ -10,6 +11,7 @@
 
     let {
         name = "",
+        icon = "",
         value = $bindable(false),
         label = "",
         error = "",
@@ -23,7 +25,10 @@
 </script>
 
 <div>
-    <label class="relative my-2 inline-flex items-center" class:cursor-pointer={!disabled}>
+    <label
+        class="relative my-2 inline-flex items-center"
+        class:cursor-pointer={!disabled}
+    >
         <input
             {name}
             bind:checked={value}
@@ -38,6 +43,9 @@
         ></div>
         {#if label}
             <span class="ms-3 text-sm font-medium">{label}</span>
+            {#if icon.length}
+                <i class="fa fa-{icon} ml-2"></i>
+            {/if}
         {/if}
     </label>
 

web/src/routes/trail/edit/[id]/+page.svelte

@@ -1084,7 +1084,7 @@
             ></Select>
         </div>
 
-        <Toggle name="public" label={$_("public")}></Toggle>
+        <Toggle name="public" label={$formData.public ? $_("public") : $_("private")} icon={$formData.public ? "globe" : "lock"}></Toggle>
         <hr class="border-separator" />
         <h3 class="text-xl font-semibold">
             {$_("waypoints", { values: { n: 2 } })}