feat(front): add privacy slider to playlist modal

front/src/components/playlists/Form.vue

@@ -16,6 +16,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
+import Slider from '~/components/ui/Slider.vue'
 
 interface Events {
   (e: 'update:playlist', value: Playlist): void
@@ -51,20 +52,11 @@ const labels = computed(() => ({
 }))
 
 const sharedLabels = useSharedLabels()
-const privacyLevelChoices = computed(() => [
+const privacyLevelChoices = {
-  {
+  me: sharedLabels.fields.privacy_level.choices.me,
-    value: 'me',
+  instance: sharedLabels.fields.privacy_level.choices.instance,
-    label: sharedLabels.fields.privacy_level.choices.me
+  everyone: sharedLabels.fields.privacy_level.choices.everyone
-  },
+} as const satisfies Record<PrivacyLevel, string>;
-  {
-    value: 'instance',
-    label: sharedLabels.fields.privacy_level.choices.instance
-  },
-  {
-    value: 'everyone',
-    label: sharedLabels.fields.privacy_level.choices.everyone
-  }
-] as { value: PrivacyLevel, label: string }[])
 
 const el = useCurrentElement()
 onMounted(async () => {
@@ -159,21 +151,7 @@ const submit = async () => {
         />
       </div>
       <div class="field">
-        <label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
+      <Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
-        <!-- TODO: Replace with Slider.vue -->
-        <select
-          id="playlist-visibility"
-          v-model="privacyLevel"
-          class="ui dropdown"
-        >
-          <option
-            v-for="(c, key) in privacyLevelChoices"
-            :key="key"
-            :value="c.value"
-          >
-            {{ c.label }}
-          </option>
-        </select>
       </div>
       <div class="field">
         <span id="updatePlaylistLabel" />