notifications v2 table

src/views/Notifications/Notification.vue

@@ -42,7 +42,9 @@
                                         'group.queueReady',
                                         'moderation.warning.group',
                                         'moderation.report.closed',
-                                        'instance.closed'
+                                        'moderation.contentrestriction',
+                                        'instance.closed',
+                                        'economy.alert'
                                     ]"
                                     :key="type"
                                     :value="type">
@@ -89,7 +91,6 @@
     import { RefreshCw } from 'lucide-vue-next';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
-    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
@@ -97,10 +98,8 @@
     import {
         useAppearanceSettingsStore,
         useGalleryStore,
-        useGroupStore,
         useInviteStore,
         useNotificationStore,
-        useUserStore,
         useVrcxStore
     } from '../../stores';
     import { DataTableLayout } from '../../components/ui/data-table';
@@ -113,8 +112,6 @@
     import SendInviteResponseDialog from './dialogs/SendInviteResponseDialog.vue';
     import configRepository from '../../service/config';
 
-    const { showUserDialog } = useUserStore();
-    const { showGroupDialog } = useGroupStore();
     const { refreshInviteMessageTableData } = useInviteStore();
     const { clearInviteImageUpload } = useGalleryStore();
     const { notificationTable, isNotificationsLoading } = storeToRefs(useNotificationStore());
@@ -126,7 +123,8 @@
         acceptRequestInvite,
         sendNotificationResponse,
         deleteNotificationLog,
-        deleteNotificationLogPrompt
+        deleteNotificationLogPrompt,
+        openNotificationLink
     } = useNotificationStore();
     const { showFullscreenImageDialog } = useGalleryStore();
     const appearanceSettingsStore = useAppearanceSettingsStore();
@@ -294,38 +292,6 @@
         saveTableFilters();
     }
 
-    function openNotificationLink(link) {
-        if (!link) {
-            return;
-        }
-        const data = link.split(':');
-        if (!data.length) {
-            return;
-        }
-        switch (data[0]) {
-            case 'group':
-                showGroupDialog(data[1]);
-                break;
-            case 'user':
-                showUserDialog(data[1]);
-                break;
-            case 'event':
-                const ids = data[1].split(',');
-                if (ids.length < 2) {
-                    console.error('Invalid event notification link:', data[1]);
-                    return;
-                }
-
-                showGroupDialog(ids[0]);
-                // ids[1] cal_ is the event id
-                break;
-            case 'openNotificationLink':
-            default:
-                toast.error('Unsupported notification link type');
-                break;
-        }
-    }
-
     function getSmallThumbnailUrl(url) {
         return convertFileUrlToImageUrl(url);
     }

src/views/Notifications/columns.jsx

@@ -29,7 +29,8 @@ import {
     useLocationStore,
     useUiStore,
     useUserStore,
-    useWorldStore
+    useWorldStore,
+    useNotificationStore
 } from '../../stores';
 
 import Emoji from '../../components/Emoji.vue';
@@ -61,6 +62,7 @@ export const createColumns = ({
     const { currentUser } = storeToRefs(useUserStore());
     const { lastLocation } = storeToRefs(useLocationStore());
     const { isGameRunning } = storeToRefs(useGameStore());
+    const { isNotificationExpired } = useNotificationStore();
 
     const canInvite = () => {
         const location = lastLocation.value?.location;
@@ -385,7 +387,8 @@ export const createColumns = ({
             cell: ({ row }) => {
                 const original = row.original;
                 if (original.type === 'boop') {
-                    const imageUrl = original.details?.imageUrl;
+                    const imageUrl =
+                        original.details?.imageUrl || original.imageUrl;
                     if (!imageUrl || imageUrl.startsWith('default_')) {
                         return null;
                     }
@@ -455,7 +458,28 @@ export const createColumns = ({
                                 />
                             </div>
                         ) : null}
+                        {original.message && original.title ? (
+                            <TooltipWrapper
+                                content={`${original.title}, ${original.message}`}
+                                delayDuration={500}
+                            >
+                                <span class="block w-full min-w-0 truncate">
+                                    {`${original.title}, ${original.message}`}
+                                </span>
+                            </TooltipWrapper>
+                        ) : null}
+                        {!original.message && original.title ? (
+                            <TooltipWrapper
+                                content={original.title}
+                                delayDuration={500}
+                            >
+                                <span class="block w-full min-w-0 truncate">
+                                    {original.title}
+                                </span>
+                            </TooltipWrapper>
+                        ) : null}
                         {original.message &&
+                        !original.title &&
                         original.message !==
                             `This is a generated invite to ${original.details?.worldName}` ? (
                             <TooltipWrapper
@@ -529,16 +553,12 @@ export const createColumns = ({
                     !original.link?.startsWith('economy.');
                 const showDeleteLog =
                     original.type !== 'friendRequest' &&
-                    original.type !== 'ignoredFriendRequest' &&
-                    !original.type?.includes('group.') &&
-                    !original.type?.includes('moderation.') &&
-                    !original.type?.includes('instance.') &&
-                    !original.link?.startsWith('economy.');
+                    original.type !== 'ignoredFriendRequest';
 
                 return (
                     <div class="flex items-center justify-end gap-2">
                         {original.senderUserId !== currentUser.value?.id &&
-                        !original.$isExpired ? (
+                        !isNotificationExpired(original) ? (
                             <span class="inline-flex items-center gap-2">
                                 {original.type === 'friendRequest' ? (
                                     <Tooltip>