feat: a place in the settings for feature flags

app/src/lib/components/settings/Sidebar.svelte

@@ -101,6 +101,16 @@
 						<span class="text-base-14 text-semibold">Telemetry</span>
 					</button>
 				</li>
+				<li>
+					<button
+						class="profile-sidebar__menu-item"
+						class:item_selected={currentSection == 'experimental'}
+						on:mousedown={() => onMenuClick('experimental')}
+					>
+						<Icon name="idea" />
+						<span class="text-base-14 text-semibold">Experimental</span>
+					</button>
+				</li>
 			</ul>
 		</div>
 	</section>

app/src/lib/config/uiFeatureFlags.ts

@@ -0,0 +1,12 @@
+/**
+ * This file contains functions for managing ui-specific feature flags.
+ * The values are persisted in local storage. Entries are prefixed with 'feature'.
+ *
+ * @module appSettings
+ */
+import { persisted, type Persisted } from '$lib/persisted/persisted';
+
+export function featureBaseBranchSwitching(): Persisted<boolean> {
+	const key = 'featureBaseBranchSwitching';
+	return persisted(false, key);
+}

app/src/routes/settings/experimental/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import SectionCard from '$lib/components/SectionCard.svelte';
+	import Toggle from '$lib/components/Toggle.svelte';
+	import ContentWrapper from '$lib/components/settings/ContentWrapper.svelte';
+	import { featureBaseBranchSwitching } from '$lib/config/uiFeatureFlags';
+	const baseBranchSwitching = featureBaseBranchSwitching();
+</script>
+
+<ContentWrapper title="Experimental features">
+	<p class="text-base-body-13 experimental-settings__text">
+		This sections contains a list of feature flags for features that are still in development or in
+		an experimental stage.
+	</p>
+	<SectionCard orientation="row">
+		<svelte:fragment slot="title">Switching the base branch</svelte:fragment>
+		<svelte:fragment slot="caption">
+			This allows changing of the base branch (trunk) after the initial project setup from within
+			the project settings. Not fully tested yet, use with caution.
+		</svelte:fragment>
+		<svelte:fragment slot="actions">
+			<Toggle
+				id="baseBranchSwitching"
+				checked={$baseBranchSwitching}
+				on:change={() => ($baseBranchSwitching = !$baseBranchSwitching)}
+			/>
+		</svelte:fragment>
+	</SectionCard>
+</ContentWrapper>
+
+<style>
+	.experimental-settings__text {
+		color: var(--clr-text-2);
+		margin-bottom: var(--size-12);
+	}
+</style>