feat: blocking frontend (#6911)

* feat: blocking api interfaces

* feat: block action on user pages + shared instance flows

* feat: safety settings subpage

* feat: interaction source settings

* feat: finish social settings

* feat: profile settings xplat

* fix: prepr

* feat: click on friends

* default instance -> game options & fix feature flag width

* fix: scroll indicators

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/src/stories/modal/TabbedModal.stories.ts

@@ -15,6 +15,7 @@ import type { StoryObj } from '@storybook/vue3-vite'
 import { defineComponent, h, ref } from 'vue'
 
 import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import UnsavedChangesPopup from '../../components/base/UnsavedChangesPopup.vue'
 import TabbedModal from '../../components/modal/TabbedModal.vue'
 
 function makeTabContent(label: string, lines = 3) {
@@ -152,6 +153,47 @@ export const WithFooter: StoryObj = {
 	}),
 }
 
+export const WithFloatingActionBar: StoryObj = {
+	render: () => ({
+		components: { TabbedModal, ButtonStyled, UnsavedChangesPopup },
+		setup() {
+			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
+			const dirty = ref(true)
+			const tabs = [
+				{
+					name: { id: 'general', defaultMessage: 'General' },
+					icon: InfoIcon,
+					content: makeTabContent('General', 20),
+				},
+			]
+			return { modalRef, dirty, tabs }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="brand">
+					<button @click="dirty = true; modalRef?.show()">Open with Floating Action Bar</button>
+				</ButtonStyled>
+				<TabbedModal
+					ref="modalRef"
+					header="Settings"
+					:tabs="tabs"
+					:floating-action-bar-shown="dirty"
+				>
+					<template #floating-action-bar>
+						<UnsavedChangesPopup
+							:original="{ dirty: false }"
+							:modified="{ dirty }"
+							inline
+							@save="dirty = false"
+							@reset="dirty = false"
+						/>
+					</template>
+				</TabbedModal>
+			</div>
+		`,
+	}),
+}
+
 export const WithBadge: StoryObj = {
 	render: () => ({
 		components: { TabbedModal, ButtonStyled },