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

web/src/views/SettingsView.vue

@@ -5,6 +5,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useLocalizedOverlay, useLocalizedToast } from '@/i18n/presentation'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import DashboardShell from '@/components/DashboardShell.vue'
+import MediaCleanupCard from '@/components/MediaCleanupCard.vue'
 import RestartOverlay from '@/components/RestartOverlay.vue'
 import UpdatesCard from '@/components/UpdatesCard.vue'
 import { ApiError } from '@/composables/useApi'
@@ -19,6 +20,8 @@ import { useUpdateStore, type RestartOutcome, type RestartRequestResult } from '
 const SKELETON_DELAY_MS = 150
 const POLL_INTERVAL_MS = 1000
 const UNREACHABLE_COPY = "Couldn't reach RenewCMS. Check your connection and try again."
+const OFFLINE_COPY =
+	"You're offline. Changing automatic purge and purging duplicates need a connection."
 const RESTART_FAILED_COPY =
 	"Couldn't start the restart. Nothing was changed and your site is still running. Try again in a moment."
 const RESTART_WARNING =
@@ -372,7 +375,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<DashboardShell>
+	<DashboardShell
+		bleed-offline-banner
+		:offline-message="t(OFFLINE_COPY)"
+		offline-icon="i-lucide-wifi-off"
+	>
 		<RestartOverlay
 			v-if="update.restartRun"
 			:kind="update.restartRun.kind"
@@ -449,6 +456,8 @@ onBeforeUnmount(() => {
 				@update="onUpdate"
 				@restart="onRestart"
 			/>
+
+			<MediaCleanupCard />
 		</div>
 	</DashboardShell>
 </template>