feat: hosting access tab (#5995)

* feat: implement access tab with dummy data

* fix: spacing

* feat: qa

* feat: implement backend

* qa: qa pass

* feat: fix user "search"

* fix: lint

* feat: change to bitfield

* feat: fix fields

* fix: lint

* fix: lint

* feat: hook up api

* feat: fix permissions

* feat: audit log table event start

* feat: better mobile mode for audit log table

* feat: i18n

* feat: qa

* feat: enforce permissions

* feat: email template start

* feat: qa

* fix: tooltip bug

* feat: qa

* impl: sse support in api-client

* feat: sse impl

* fix: desync path

* feat: time frame picker from analytics

* feat: QA

* fix: spacing

* fix: permisison audit log entries

* fix: hosting manage page shared server detection

* fix: lint

* feat: qa + lint

* feat: audit log table sort by time

* feat: finish frontend panel stuff

* fix: lint

* fix: backend alignment

* fix: lint

* fix: supress friend errors

* feat: qa

* fix: qa

* fix: lint

* fix: utils barrel

* fix: safari cookies in dev

* fix: pin nuxt

* feat: fixes + notif fix

* fix: notifications

* feat: qa

* fix: notification sync not happening immediately

* fix: qa

* fix: qa

* feat: qa

* blog + prepr

* feat: toast shit

* blog images

* thumbnail update one last time

* prepr

* feat: use reinvite route

* update images

* fix: reinvite stuff

* fix: lint

* fix: alignment of save bar

* fix: notif sizing

* fix: split up access

* fix: lint

* fix: lint

* fix: link

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -38,7 +38,10 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showDebugInfo?: boolean
 		restoreDisabled?: string
+		writeDisabled?: boolean
+		writeDisabledTooltip?: string
 		selected?: boolean
+		highlighted?: boolean
 	}>(),
 	{
 		preview: false,
@@ -47,7 +50,10 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showDebugInfo: false,
 		restoreDisabled: undefined,
+		writeDisabled: false,
+		writeDisabledTooltip: undefined,
 		selected: false,
+		highlighted: false,
 	},
 )
 
@@ -60,6 +66,12 @@ const backupIcon = computed(() => {
 	return UserRoundIcon
 })
 
+const itemBorderClass = computed(() => {
+	if (props.selected) return 'border-brand-green'
+	if (props.highlighted) return 'border-purple backup-item-highlighted'
+	return 'border-transparent'
+})
+
 const overflowMenuOptions = computed<OverflowOption[]>(() => {
 	const options: OverflowOption[] = []
 
@@ -81,13 +93,20 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 		disabled: !props.kyrosUrl || !props.jwt,
 	})
 
-	options.push({ id: 'rename', action: () => emit('rename') })
+	options.push({
+		id: 'rename',
+		action: () => emit('rename'),
+		disabled: props.writeDisabled,
+		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
+	})
 
 	options.push({ divider: true })
 	options.push({
 		id: 'delete',
 		color: 'red',
 		action: () => emit('delete'),
+		disabled: props.writeDisabled,
+		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
 	})
 
 	return options
@@ -123,7 +142,7 @@ const messages = defineMessages({
 <template>
 	<div
 		class="flex items-center gap-4 rounded-[20px] border border-solid bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
-		:class="props.selected ? 'border-brand-green' : 'border-transparent'"
+		:class="itemBorderClass"
 	>
 		<div class="flex min-w-0 flex-1 items-center gap-4">
 			<!-- Icon tile -->
@@ -215,3 +234,25 @@ const messages = defineMessages({
 		}}</pre>
 	</div>
 </template>
+
+<style scoped>
+@keyframes backup-item-highlight-pulse {
+	0%,
+	100% {
+		box-shadow:
+			0 0 0 0 var(--color-purple-highlight),
+			0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+			0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+	}
+	50% {
+		box-shadow:
+			0 0 0 3px var(--color-purple-highlight),
+			0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+			0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+	}
+}
+
+.backup-item-highlighted {
+	animation: backup-item-highlight-pulse 1.25s ease-in-out infinite;
+}
+</style>