mirror of
https://github.com/unraid/api.git
synced 2026-01-01 22:20:05 -06:00
741e8532ab
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced enhanced stepper components for smoother multi-step interactions. - Added new loading indicators and improved the loading experience with customizable variants. - **UI Improvements** - Refreshed the global color palette and updated styling across buttons, badges, and loading indicators for a more modern, consistent experience. - Improved the organization and readability of templates and styles across various components. - **Code & Dependency Updates** - Updated key dependencies and revised the theme and configuration settings to improve performance and maintainability. - Introduced new environment variables for better configuration management. - **Legacy Cleanup** - Removed deprecated components and streamlined registrations to simplify the codebase without affecting end-user functionality. - Eliminated unused utility functions and legacy code to enhance overall code quality. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: mdatelle <mike@datelle.net> Co-authored-by: Eli Bosley <ekbosley@gmail.com>
58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { BellIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
|
|
import { cn } from '@unraid/ui';
|
|
|
|
import type { OverviewQuery } from '~/composables/gql/graphql';
|
|
|
|
import { Importance } from '~/composables/gql/graphql';
|
|
|
|
const props = defineProps<{ overview?: OverviewQuery['notifications']['overview']; seen?: boolean }>();
|
|
|
|
const indicatorLevel = computed(() => {
|
|
if (!props.overview?.unread) {
|
|
return undefined;
|
|
}
|
|
switch (true) {
|
|
case props.overview.unread.alert > 0:
|
|
return Importance.Alert;
|
|
case props.overview.unread.warning > 0:
|
|
return Importance.Warning;
|
|
case props.overview.unread.total > 0:
|
|
return 'UNREAD';
|
|
default:
|
|
return undefined;
|
|
}
|
|
});
|
|
|
|
const icon = computed<{ component: Component; color: string } | null>(() => {
|
|
switch (indicatorLevel.value) {
|
|
case Importance.Warning:
|
|
return {
|
|
component: ExclamationTriangleIcon,
|
|
color: 'text-yellow-500 translate-y-0.5',
|
|
};
|
|
case Importance.Alert:
|
|
return {
|
|
component: ShieldExclamationIcon,
|
|
color: 'text-unraid-red',
|
|
};
|
|
}
|
|
return null;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<BellIcon class="w-6 h-6 text-header-text-primary" />
|
|
<div
|
|
v-if="!seen && indicatorLevel === 'UNREAD'"
|
|
class="absolute top-0 right-0 size-2.5 rounded-full border border-neutral-800 bg-unraid-green"
|
|
/>
|
|
<component
|
|
:is="icon.component"
|
|
v-else-if="!seen && icon && indicatorLevel"
|
|
:class="cn('absolute -top-1 -right-1 size-4 rounded-full', icon.color)"
|
|
/>
|
|
</div>
|
|
</template>
|