refactor: align files tab with content tab design (#5621)

* fix: files.vue bugs before styling changes * feat: move files tab to shared layout structure * fix: qa * fix: qa * fix: bugs * fix: lint * fix: admonition cleanup with progress + actions * fix: cleanup * fix: modals * fix: admon title * fix: i18n standard * fix: lint + i18n pass * fix: remove transition * fix: type errors * feat: files tab in app * fix: qa * fix: backup item minmax * fix: use ContentPageHeader for server panel * fix: lint * fix: lint * fix: lint * feat: page leave safety * fix: lint * fix: cargo fmt fix * fix: blank in prod * fix: content card table stuff * Revert "fix: blank in prod" This reverts commit 74758fe185cf85a4a20355857f889cb091b97ace. * fix: import * feat: browse worlds/servers flow * fix: worlds tab parity with content tab * fix: perf bug + shader filter pill copy * feat: singleplayer filter * fix: ordering * fix: breadcrumbs * fix: lint * fix: qa * feat: store server proj id when adding to a non-linked instance * fix: lint * fix: i18n + qa * fix: conflict * qa: already installed modal + placeholders not server-specific * fix: qa * fix: add + edit server modals * fix: qa * fix: security * fix: devin flags * fix: lint * chore: change file to break build cache * fix: admon * fix: import path stuff * feat: qa * fix: fmt fmt idiot --------- Signed-off-by: Calum H. <calum@modrinth.com>
2026-03-26 18:55:15 +00:00
parent 706eb800cb
commit 381ea51cce
170 changed files with 8052 additions and 4571 deletions
@@ -0,0 +1,86 @@
+import type { StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import ConfirmLeaveModal from '../../components/modal/ConfirmLeaveModal.vue'
+
+const meta = {
+	title: 'Modal/ConfirmLeaveModal',
+	component: ConfirmLeaveModal,
+}
+
+export default meta
+type Story = StoryObj<typeof ConfirmLeaveModal>
+
+export const Default: Story = {
+	render: () => ({
+		components: { ConfirmLeaveModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
+			const result = ref<string>('')
+			async function openModal() {
+				result.value = ''
+				const confirmed = await modalRef.value?.prompt()
+				result.value = confirmed ? 'User chose to leave' : 'User chose to stay'
+			}
+			return { modalRef, result, openModal }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="red">
+					<button @click="openModal">Trigger Leave Confirmation</button>
+				</ButtonStyled>
+				<p v-if="result" class="mt-4 text-secondary">{{ result }}</p>
+				<ConfirmLeaveModal ref="modalRef" />
+			</div>
+		`,
+	}),
+}
+
+export const CustomMessages: Story = {
+	render: () => ({
+		components: { ConfirmLeaveModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
+			const openModal = () => modalRef.value?.prompt()
+			return { modalRef, openModal }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="red">
+					<button @click="openModal">Discard Draft?</button>
+				</ButtonStyled>
+				<ConfirmLeaveModal
+					ref="modalRef"
+					title="Discard draft?"
+					header="Your draft will be lost"
+					body="If you leave now, your draft will not be saved."
+					stay-label="Keep editing"
+					leave-label="Discard"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const WarningAdmonition: Story = {
+	render: () => ({
+		components: { ConfirmLeaveModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
+			const openModal = () => modalRef.value?.prompt()
+			return { modalRef, openModal }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="orange">
+					<button @click="openModal">Open Warning Variant</button>
+				</ButtonStyled>
+				<ConfirmLeaveModal
+					ref="modalRef"
+					admonition-type="warning"
+				/>
+			</div>
+		`,
+	}),
+}