feat: recent activity card on Home and Retention card on Settings

web/src/views/SettingsView.vue

@@ -7,10 +7,11 @@ 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 RetentionCard from '@/components/RetentionCard.vue'
 import UpdatesCard from '@/components/UpdatesCard.vue'
 import { ApiError } from '@/composables/useApi'
 import { useRetryAfter } from '@/composables/useRetryAfter'
-import { useSettings } from '@/composables/useSettings'
+import { useSettings, type WorkspaceSettings } from '@/composables/useSettings'
 import type { RestartKind, UpdateStatus } from '@/composables/useUpdate'
 import { reloadPage } from '@/lib/reloadPage'
 import { displayVersion, isCheckDue } from '@/lib/updateFormat'
@@ -52,7 +53,9 @@ const retry = useRetryAfter()
 
 const updatesCard = ref<InstanceType<typeof UpdatesCard> | null>(null)
 const loadState = ref<LoadState>('loading')
-const version = ref('')
+const settings = ref<WorkspaceSettings | null>(null)
+const version = computed(() => settings.value?.version ?? '')
+const isOwner = computed(() => session.session?.role === 'owner')
 const showSkeleton = ref(false)
 let skeletonTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -76,8 +79,7 @@ async function loadSettings() {
 	}, SKELETON_DELAY_MS)
 
 	try {
-		const settings = await getSettings()
-		version.value = settings.version
+		settings.value = await getSettings()
 		loadState.value = 'ready'
 	} catch (error) {
 		if (!isHandledGlobally(error)) {
@@ -458,6 +460,15 @@ onBeforeUnmount(() => {
 			/>
 
 			<MediaCleanupCard />
+
+			<RetentionCard
+				v-if="isOwner"
+				:settings="settings"
+				:load-state="loadState"
+				:show-skeleton="showSkeleton"
+				@saved="settings = $event"
+				@reload="loadSettings"
+			/>
 		</div>
 	</DashboardShell>
 </template>