feat: roles SPA foundations

web/src/views/MediaView.vue

@@ -50,7 +50,7 @@ import { MEDIA_PAGE_SIZE_KEY, storePageSize } from '@/lib/pageSizeMemory'
 import { pageCountFor } from '@/lib/pagination'
 import { purgedToast } from '@/lib/mediaPurge'
 import { RATE_LIMITED_TEXT, RATE_LIMITED_TITLE, UPLOAD_ACCEPT } from '@/lib/mediaUploadRows'
-import { useSessionStore } from '@/stores/session'
+import { usePermissionsStore } from '@/stores/permissions'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
 const MEDIA_PATH = '/media'
@@ -80,7 +80,7 @@ const OFFLINE_COPY =
 
 const route = useRoute()
 const toast = useLocalizedToast()
-const session = useSessionStore()
+const permissions = usePermissionsStore()
 const media = useMedia()
 const selection = useMediaSelection(media.items)
 const upload = useMediaUpload({ onAdded: refreshInBackground })
@@ -233,14 +233,13 @@ const filterLabel = computed(
 		],
 )
 const showList = computed(() => ready.value && !nothingToShow.value && !emptyLibrary.value)
-const canPurge = computed(
-	() => session.session?.role === 'owner' || session.session?.role === 'admin',
-)
+const canUpload = computed(() => permissions.can('media.upload'))
+const canDeleteMedia = computed(() => permissions.scopeOf('media.delete') === 'all')
 const showPurge = computed(
-	() => canPurge.value && isDuplicates.value && showList.value && groups.value.length > 0,
+	() => canDeleteMedia.value && isDuplicates.value && showList.value && groups.value.length > 0,
 )
 const dragging = computed(() => dragDepth.value > 0)
-const uploadBlocked = computed(() => offline.value || upload.limited.value)
+const uploadBlocked = computed(() => !canUpload.value || offline.value || upload.limited.value)
 const uploadLabel = computed(() =>
 	upload.limited.value ? t('Try again in {0}', [upload.countdown.value]) : t('Upload'),
 )
@@ -258,6 +257,7 @@ const hasSelection = computed(() => selection.count.value > 0)
 const showFab = computed(
 	() =>
 		!isDesktop.value &&
+		canUpload.value &&
 		!dialogOpen.value &&
 		!hasSelection.value &&
 		!dragging.value &&
@@ -922,7 +922,7 @@ async function mergeAction() {
 					</p>
 				</div>
 				<UButton
-					v-if="isDesktop"
+					v-if="isDesktop && canUpload"
 					:icon="uploadIcon"
 					:disabled="uploadBlocked"
 					class="h-8 px-3"
@@ -946,6 +946,7 @@ async function mergeAction() {
 				/>
 				<MediaEmptyState
 					variant="first-run"
+					:read-only="!canUpload"
 					:offline="offline"
 					:limited="upload.limited.value"
 					@action="openChooser"
@@ -1060,6 +1061,7 @@ async function mergeAction() {
 					</template>
 					<template v-else>
 						<MediaSelectAllRow
+							v-if="canDeleteMedia"
 							:state="selection.allState.value"
 							:count="media.items.value.length"
 							@toggle="toggleAllSelected"