mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive notifications

Browse Source
This commit is contained in:
Eli Bosley
2024-12-16 14:28:23 -05:00
parent 5f0446fa79
commit cead97560c
9 changed files with 2713 additions and 3697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/components/Notifications/Item.vue
View File

@@ -11,6 +11,8 @@ import {
import { useMutation } from '@vue/apollo-composable'; import { useMutation } from '@vue/apollo-composable';
import type { NotificationFragmentFragment } from '~/composables/gql/graphql'; import type { NotificationFragmentFragment } from '~/composables/gql/graphql';
import { NotificationType } from '~/composables/gql/graphql'; import { NotificationType } from '~/composables/gql/graphql';
import { format } from 'date-fns';
import { enGB, enUS } from 'date-fns/locale';
import { import {
archiveNotification as archiveMutation, archiveNotification as archiveMutation,
deleteNotification as deleteMutation, deleteNotification as deleteMutation,
@@ -63,13 +65,26 @@ const deleteNotification = reactive(
const mutationError = computed(() => { const mutationError = computed(() => {
return archive.error?.message ?? deleteNotification.error?.message; return archive.error?.message ?? deleteNotification.error?.message;
}); });
const reformattedTimestamp = computed(() => {
const userLocale = navigator.language ?? 'en-US'; // Get the user's browser language (e.g., 'en-US', 'fr-FR')
const reformattedDate = new Intl.DateTimeFormat(userLocale, {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12:
['AM', 'PM'].includes(props.formattedTimestamp ?? 'AM')
}).format(new Date(props.timestamp ?? new Date()));
return reformattedDate;
});
</script> </script>
<template> <template>
<!-- fixed width hack ensures alignment with other elements regardless of scrollbar presence or width --> <div class="group/item relative py-5 flex flex-col gap-2 text-base">
<div class="group/item relative py-5 flex flex-col gap-2 text-base w-[487px]"> <header class="flex flex-row items-baseline justify-between gap-2 -translate-y-1">
<header class="w-full flex flex-row items-baseline justify-between gap-2 -translate-y-1"> <h3 class="tracking-normal flex flex-row items-baseline gap-2 uppercase font-bold overflow-x-hidden">
<h3 class="tracking-normal flex flex-row items-baseline gap-2 uppercase font-bold">
<!-- the `translate` compensates for extra space added by the `svg` element when rendered --> <!-- the `translate` compensates for extra space added by the `svg` element when rendered -->
<component <component
:is="icon.component" :is="icon.component"
@@ -77,11 +92,14 @@ const mutationError = computed(() => {
class="size-5 shrink-0 translate-y-1" class="size-5 shrink-0 translate-y-1"
:class="icon.color" :class="icon.color"
/> />
<span>{{ title }}</span> <span class="truncate flex-1" :title="title">{{ title }}</span>
</h3> </h3>
<div class="shrink-0 flex flex-row items-baseline justify-end gap-2 mt-1"> <div
<p class="text-gray-500 text-sm">{{ formattedTimestamp }}</p> class="shrink-0 flex flex-row items-baseline justify-end gap-2 mt-1"
:title="formattedTimestamp ?? reformattedTimestamp"
>
<p class="text-gray-500 text-sm">{{ reformattedTimestamp }}</p>
</div> </div>
</header> </header>
@@ -89,7 +107,7 @@ const mutationError = computed(() => {
{{ subject }} {{ subject }}
</h4> </h4>
<div class="w-full flex flex-row items-center justify-between gap-2"> <div class="flex flex-row items-center justify-between gap-2">
<div class="" v-html="descriptionMarkup" /> <div class="" v-html="descriptionMarkup" />
</div> </div>

6
web/components/Notifications/List.vue
View File

@@ -67,11 +67,10 @@ async function onLoadMore() {
</script> </script>
<template> <template>
<!-- The horizontal padding here adjusts for the scrollbar offset -->
<div <div
v-if="notifications?.length > 0" v-if="notifications?.length > 0"
v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]" v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
class="divide-y divide-gray-200 overflow-y-auto h-full pl-7" class="divide-y divide-gray-200 px-7 flex flex-col overflow-y-scroll flex-1 min-h-0"
> >
<NotificationsItem <NotificationsItem
v-for="notification in notifications" v-for="notification in notifications"
@@ -81,6 +80,9 @@ async function onLoadMore() {
<div v-if="loading" class="py-5 grid place-content-center"> <div v-if="loading" class="py-5 grid place-content-center">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
<div v-if="!canLoadMore" class="py-5 grid place-content-center text-gray-500">
You've reached the end...
</div>
</div> </div>
<LoadingError v-else :loading="loading" :error="offlineError ?? error" @retry="refetch"> <LoadingError v-else :loading="loading" :error="offlineError ?? error" @retry="refetch">

144
web/components/Notifications/Sidebar.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Button } from '@/components/shadcn/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet'; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
import { useMutation, useQuery } from '@vue/apollo-composable'; import { useMutation, useQuery } from '@vue/apollo-composable';
import { Button } from '@/components/shadcn/button';
// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :( // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
import { Importance, NotificationType } from '~/composables/gql/graphql'; import { Importance, NotificationType } from '~/composables/gql/graphql';
import { import {
@@ -47,86 +47,80 @@ const overview = computed(() => {
<span class="sr-only">Notifications</span> <span class="sr-only">Notifications</span>
<NotificationsIndicator :overview="overview" /> <NotificationsIndicator :overview="overview" />
</SheetTrigger> </SheetTrigger>
<!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->
<SheetContent <SheetContent
:to="teleportTarget" :to="teleportTarget"
class="w-full max-w-[100vw] sm:max-w-[540px] h-screen px-0" class="w-full max-w-[100vw] sm:max-w-[540px] max-h-screen h-screen min-h-screen px-0 flex flex-col gap-5 pb-0"
> >
<div class="flex flex-col h-full gap-5"> <div class="relative flex flex-col h-full w-full">
<SheetHeader class="ml-1 px-6 flex items-baseline gap-1"> <SheetHeader class="ml-1 px-6 items-baseline gap-1">
<SheetTitle class="text-2xl">Notifications</SheetTitle> <SheetTitle class="text-2xl">Notifications</SheetTitle>
<a href="/Settings/Notifications"> <a href="/Settings/Notifications">
<Button variant="link" size="sm" class="p-0 h-auto"> Edit Settings </Button> <Button variant="link" size="sm" class="p-0 h-auto"> Edit Settings </Button>
</a> </a>
</SheetHeader> </SheetHeader>
<Tabs default-value="unread" class="flex flex-1 flex-col min-h-0">
<div class="flex flex-row justify-between items-center flex-wrap gap-5 px-6">
<TabsList class="flex">
<TabsTrigger value="unread">
Unread <span v-if="overview">({{ overview.unread.total }})</span>
</TabsTrigger>
<TabsTrigger value="archived">
Archived <span v-if="overview">({{ overview.archive.total }})</span>
</TabsTrigger>
</TabsList>
<TabsContent value="unread" class="flex-col items-end">
<Button
:disabled="loadingArchiveAll"
variant="link"
size="sm"
class="text-foreground hover:text-destructive transition-none"
@click="confirmAndArchiveAll"
>
Archive All
</Button>
</TabsContent>
<TabsContent value="archived" class="flex-col items-end">
<Button
:disabled="loadingDeleteAll"
variant="link"
size="sm"
class="text-foreground hover:text-destructive transition-none"
@click="confirmAndDeleteArchives"
>
Delete All
</Button>
</TabsContent>
<!-- min-h-0 prevents the flex container from expanding beyond its containing bounds. --> <Select
<!-- this is necessary because flex items have a default min-height: auto, --> @update:model-value="
<!-- which means they won't shrink below the height of their content, even if you use flex-1 or other flex properties. --> (val) => {
<Tabs default-value="unread" class="flex-1 flex flex-col min-h-0" activation-mode="manual"> importance = val === 'all' ? undefined : (val as Importance);
<div class="flex flex-row justify-between items-center flex-wrap gap-5 px-6"> }
<TabsList class="ml-[1px]"> "
<TabsTrigger value="unread"> >
Unread <span v-if="overview">({{ overview.unread.total }})</span> <SelectTrigger class="h-auto">
</TabsTrigger> <SelectValue class="text-gray-400 leading-6" placeholder="Filter By" />
<TabsTrigger value="archived"> </SelectTrigger>
Archived <span v-if="overview">({{ overview.archive.total }})</span> <SelectContent :to="teleportTarget">
</TabsTrigger> <SelectGroup>
</TabsList> <SelectLabel>Notification Types</SelectLabel>
<TabsContent value="unread"> <SelectItem value="all">All Types</SelectItem>
<Button <SelectItem :value="Importance.Alert"> Alert </SelectItem>
:disabled="loadingArchiveAll" <SelectItem :value="Importance.Info">Info</SelectItem>
variant="link" <SelectItem :value="Importance.Warning">Warning</SelectItem>
size="sm" </SelectGroup>
class="text-foreground hover:text-destructive transition-none" </SelectContent>
@click="confirmAndArchiveAll" </Select>
> </div>
Archive All
</Button>
</TabsContent>
<TabsContent value="archived">
<Button
:disabled="loadingDeleteAll"
variant="link"
size="sm"
class="text-foreground hover:text-destructive transition-none"
@click="confirmAndDeleteArchives"
>
Delete All
</Button>
</TabsContent>
<Select <TabsContent value="unread" class="flex-col flex-1 min-h-0">
@update:model-value=" <NotificationsList :importance="importance" :type="NotificationType.Unread" />
(val) => { </TabsContent>
importance = val === 'all' ? undefined : (val as Importance);
}
"
>
<SelectTrigger class="h-auto">
<SelectValue class="text-gray-400 leading-6" placeholder="Filter By" />
</SelectTrigger>
<SelectContent :to="teleportTarget">
<SelectGroup>
<SelectLabel>Notification Types</SelectLabel>
<SelectItem value="all">All Types</SelectItem>
<SelectItem :value="Importance.Alert"> Alert </SelectItem>
<SelectItem :value="Importance.Info">Info</SelectItem>
<SelectItem :value="Importance.Warning">Warning</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<TabsContent value="unread" class="flex-1 min-h-0 mt-5"> <TabsContent value="archived" class="flex-col flex-1 min-h-0">
<NotificationsList :importance="importance" :type="NotificationType.Unread" /> <NotificationsList :importance="importance" :type="NotificationType.Archive" />
</TabsContent> </TabsContent>
</Tabs>
<TabsContent value="archived" class="flex-1 min-h-0 mt-5">
<NotificationsList :importance="importance" :type="NotificationType.Archive" />
</TabsContent>
</Tabs>
</div> </div>
</SheetContent> </SheetContent>
</Sheet> </Sheet>

14
web/components/shadcn/sheet/Sheet.vue
View File

@@ -5,10 +5,22 @@ const props = defineProps<DialogRootProps & { class?: string }>()
const emits = defineEmits<DialogRootEmits>() const emits = defineEmits<DialogRootEmits>()
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits)
const initialViewport = ref(document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300');
const openListener = (opened: boolean) => {
/**
* Update meta tags for the root page when oepned
*/
if (opened) {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0')
} else {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', initialViewport.value);
}
}
</script> </script>
<template> <template>
<DialogRoot v-bind="forwarded"> <DialogRoot v-bind="forwarded" @update:open="openListener">
<slot /> <slot />
</DialogRoot> </DialogRoot>
</template> </template>

5
web/components/shadcn/sheet/SheetContent.vue
View File

@@ -35,6 +35,11 @@ const delegatedProps = computed(() => {
return delegated; return delegated;
}); });
const forwarded = useForwardPropsEmits(delegatedProps, emits); const forwarded = useForwardPropsEmits(delegatedProps, emits);
watch(forwarded.value, (newval) => {
console.log(newval);
});
</script> </script>
<template> <template>

23
web/components/shadcn/tabs/TabsContent.vue
View File

@@ -1,21 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue' import { cn } from '~/components/shadcn/utils';
import { TabsContent, type TabsContentProps } from 'radix-vue' import { TabsContent, type TabsContentProps } from 'radix-vue';
import { cn } from '~/components/shadcn/utils' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated;
});
return delegated
})
</script> </script>
<template> <template>
<TabsContent <TabsContent
:class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
v-bind="delegatedProps" v-bind="delegatedProps"
:class="
cn(
'flex mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
props.class
)
"
class="data-[state=active]:flex data-[state=inactive]:hidden"
> >
<slot /> <slot />
</TabsContent> </TabsContent>

6109
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

68
web/package.json
View File

@@ -31,60 +31,62 @@
"@graphql-codegen/client-preset": "^4.5.1", "@graphql-codegen/client-preset": "^4.5.1",
"@graphql-codegen/introspection": "^4.0.3", "@graphql-codegen/introspection": "^4.0.3",
"@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
"@nuxt/devtools": "^1.3.1", "@nuxt/devtools": "^1.6.4",
"@nuxt/eslint": "^0.3.12", "@nuxt/eslint": "^0.7.3",
"@nuxtjs/tailwindcss": "^6.12.1", "@nuxtjs/tailwindcss": "^6.12.2",
"@rollup/plugin-strip": "^3.0.4", "@rollup/plugin-strip": "^3.0.4",
"@tailwindcss/typography": "^0.5.13", "@tailwindcss/typography": "^0.5.15",
"@types/crypto-js": "^4.2.2", "@types/crypto-js": "^4.2.2",
"@types/eslint-config-prettier": "^6.11.3", "@types/eslint-config-prettier": "^6.11.3",
"@types/node": "^18", "@types/node": "^22",
"@types/semver": "^7.5.8", "@types/semver": "^7.5.8",
"@vue/apollo-util": "^4.0.0-beta.6", "@vue/apollo-util": "^4.0.0-beta.6",
"@vueuse/core": "^10.11.1", "@vueuse/core": "^12.0.0",
"@vueuse/nuxt": "^10.9.0", "@vueuse/nuxt": "^12.0.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"nuxt": "^3.11.2", "nuxt": "^3.14.1592",
"nuxt-custom-elements": "2.0.0-beta.18", "nuxt-custom-elements": "2.0.0-beta.18",
"prettier": "3.3.3", "prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.8", "prettier-plugin-tailwindcss": "^0.6.9",
"shadcn-nuxt": "^0.10.4", "shadcn-nuxt": "^0.11.3",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"terser": "^5.31.0", "terser": "^5.37.0",
"vite-plugin-remove-console": "^2.2.0", "vite-plugin-remove-console": "^2.2.0",
"vitest": "^2.1.3", "vitest": "^2.1.3",
"vue-tsc": "^2.1.10" "vue-tsc": "^2.1.10"
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.10.4", "@apollo/client": "^3.12.3",
"@floating-ui/dom": "^1.6.11", "@floating-ui/dom": "^1.6.12",
"@floating-ui/utils": "^0.2.8", "@floating-ui/utils": "^0.2.8",
"@floating-ui/vue": "^1.1.5", "@floating-ui/vue": "^1.1.5",
"@headlessui/vue": "^1.7.22", "@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.1.3", "@heroicons/vue": "^2.2.0",
"@pinia/nuxt": "^0.5.1", "@nuxtjs/color-mode": "^3.5.2",
"@vue/apollo-composable": "^4.0.2", "@pinia/nuxt": "^0.9.0",
"@vueuse/components": "^10.9.0", "@vue/apollo-composable": "^4.2.1",
"@vueuse/integrations": "^10.9.0", "@vueuse/components": "^12.0.0",
"class-variance-authority": "^0.7.0", "@vueuse/integrations": "^12.0.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dayjs": "^1.11.11", "date-fns": "^4.1.0",
"focus-trap": "^7.5.4", "dayjs": "^1.11.13",
"graphql": "^16.8.1", "focus-trap": "^7.6.2",
"graphql": "^16.9.0",
"graphql-tag": "^2.12.6", "graphql-tag": "^2.12.6",
"graphql-ws": "^5.16.0", "graphql-ws": "^5.16.0",
"hex-to-rgba": "^2.0.1", "hex-to-rgba": "^2.0.1",
"isomorphic-dompurify": "^2.16.0", "isomorphic-dompurify": "^2.19.0",
"lucide-vue-next": "^0.445.0", "lucide-vue-next": "^0.468.0",
"marked": "^12.0.2", "marked": "^15.0.3",
"marked-base-url": "^1.1.3", "marked-base-url": "^1.1.6",
"radix-vue": "^1.9.6", "radix-vue": "^1.9.11",
"semver": "^7.6.2", "semver": "^7.6.3",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.5.5",
"vue-i18n": "^9.14.1", "vue-i18n": "^10.0.5",
"wretch": "^2.8.1" "wretch": "^2.11.0"
}, },
"overrides": { "overrides": {
"vue": "latest", "vue": "latest",

7
web/pages/index.vue
View File

@@ -13,6 +13,13 @@ onBeforeMount(() => {
registerEntry('UnraidComponents'); registerEntry('UnraidComponents');
}); });
useHead({
meta: [
{ name: 'viewport',
content: 'width=1300', }
]
})
const valueToMakeCallback = ref<SendPayloads | undefined>(); const valueToMakeCallback = ref<SendPayloads | undefined>();
const callbackDestination = ref<string>(''); const callbackDestination = ref<string>('');