web: settings ui & const for settings type options

web/src/routes/settings/save/metadata/+page.svelte

@@ -1 +1,40 @@
-<div>metadata settings</div>
+<script lang="ts">
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
+    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+
+    import { filenameStyleOptions } from "$lib/types/settings";
+</script>
+
+<SettingsCategory
+    title="filename style"
+    description="very cool description for every style. bla bla bla."
+>
+    <Switcher big={true}>
+        {#each filenameStyleOptions as value}
+            <SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}>
+                {value}
+            </SettingsButton>
+        {/each}
+    </Switcher>
+
+</SettingsCategory>
+
+<SettingsCategory title="file metadata">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="disableMetadata"
+        title="disable file metadata"
+        description="cobalt won't add title, artist, and other info to the file."
+    />
+</SettingsCategory>
+
+<SettingsCategory title="saving method">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="downloadPopup"
+        title="ask how to save"
+        description="cobalt will offer you several ways to save the file instead of opening it in a new tab."
+    />
+</SettingsCategory>