feat: media duplicate purge, part 3 of 3: the SPA (Settings "Media cleanup" card, PurgeDuplicatesDialog, Media Duplicates toolbar button)

web/src/components/OfflineBanner.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { translate } from '@/i18n'
 
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const DEFAULT_MESSAGE =
 	"You're offline. You can keep writing, but saving and publishing will wait until you're back online."
 
+const ROOMY_BLEED_ROOT = 'w-auto -mx-4 -mt-5 mb-5 lg:-mx-8 lg:-mt-8 lg:mb-8'
+
 const BLEED_UI = {
 	root: 'w-auto -mx-4 -mt-4 mb-4 lg:-mx-6 lg:-mt-6 lg:mb-6',
 	container: 'h-auto min-h-10 max-w-none justify-start gap-2.5 px-4 py-2.5 sm:px-4 lg:px-4',
@@ -14,15 +16,18 @@ const BLEED_UI = {
 	title: 'whitespace-normal font-normal text-wrap',
 }
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		message?: string
 		icon?: string
 		bleed?: boolean
+		roomy?: boolean
 	}>(),
-	{ message: DEFAULT_MESSAGE, icon: undefined, bleed: false },
+	{ message: DEFAULT_MESSAGE, icon: undefined, bleed: false, roomy: false },
 )
 
+const bleedUi = computed(() => (props.roomy ? { ...BLEED_UI, root: ROOMY_BLEED_ROOT } : BLEED_UI))
+
 const isOffline = ref(!navigator.onLine)
 
 function updateOnlineStatus() {
@@ -46,6 +51,6 @@ onUnmounted(() => {
 		color="neutral"
 		:icon="icon"
 		:title="translate(message)"
-		:ui="bleed ? BLEED_UI : undefined"
+		:ui="bleed ? bleedUi : undefined"
 	/>
 </template>