MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

notifications v2 table

Browse Source
This commit is contained in:
Natsumi
2026-02-20 17:19:06 +11:00
parent aa6ae21033
commit 5fe2f8ddf5
15 changed files with 488 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/api/notification.js
View File

@@ -1,4 +1,5 @@
import { useGalleryStore, useNotificationStore } from '../stores';
import { notificationRequest } from '.';
import { request } from '../service/request';
/**
@@ -8,6 +9,10 @@ function getGalleryStore() {
return useGalleryStore();
}
function getNotificationStore() {
return useNotificationStore();
}
const notificationReq = {
/** @typedef {{
* n: number,
@@ -201,14 +206,20 @@ const notificationReq = {
json,
params
};
useNotificationStore().handleNotificationAccept(args);
getNotificationStore().handleNotificationAccept(args);
return args;
})
.catch((err) => {
// if friend request could not be found, delete it
if (err && err.message && err.message.includes('404')) {
useNotificationStore().handleNotificationHide({ params });
getNotificationStore().handleNotificationHide(
params.notificationId
);
}
return {
json: null,
params
};
});
},
@@ -227,7 +238,41 @@ const notificationReq = {
json,
params
};
useNotificationStore().handleNotificationHide(args);
getNotificationStore().handleNotificationHide(
params.notificationId
);
return args;
});
},
/**
* @param {{ notificationId: string }} params
* @return { Promise<{json: any, params}> }
*/
seeNotification(params) {
return request(`auth/user/notifications/${params.notificationId}/see`, {
method: 'PUT'
}).then((json) => {
const args = {
json,
params
};
return args;
});
},
/**
* @param {{ notificationId: string }} params
* @return { Promise<{json: any, params}> }
*/
seeNotificationV2(params) {
return request(`notifications/${params.notificationId}/see`, {
method: 'POST'
}).then((json) => {
const args = {
json,
params
};
return args;
});
},
@@ -244,7 +289,24 @@ const notificationReq = {
return request(`notifications/${params.notificationId}/respond`, {
method: 'POST',
params
});
})
.then((json) => {
const args = {
json,
params
};
return args;
})
.catch(() => {
getNotificationStore().handleNotificationV2Hide(
params.notificationId
);
notificationRequest.hideNotificationV2(params.notificationId);
return {
json: null,
params
};
});
},
hideNotificationV2(notificationId) {

50
src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
View File

@@ -1,43 +1,45 @@
<template>
<Dialog
:open="changeAvatarImageDialogVisible"
@update:open="(open) => {
if (!open) closeDialog();
}">
@update:open="
(open) => {
if (!open) closeDialog();
}
">
<DialogContent class="x-dialog sm:max-w-212.5">
<DialogHeader>
<DialogTitle>{{ t('dialog.change_content_image.avatar') }}</DialogTitle>
</DialogHeader>
<div>
<input
id="AvatarImageUploadButton"
type="file"
accept="image/*"
style="display: none"
@change="onFileChangeAvatarImage" />
<span>{{ t('dialog.change_content_image.description') }}</span>
<br />
<Button
variant="outline"
size="icon-sm"
:disabled="changeAvatarImageDialogLoading"
@click="uploadAvatarImage">
<Upload />
{{ t('dialog.change_content_image.upload') }}
</Button>
<br />
<div class="inline-block p-1 pb-0 hover:rounded-sm">
<img :src="previousImageUrl" class="img-size" loading="lazy" />
</div>
<input
id="AvatarImageUploadButton"
type="file"
accept="image/*"
style="display: none"
@change="onFileChangeAvatarImage" />
<span>{{ t('dialog.change_content_image.description') }}</span>
<br />
<Button
variant="outline"
size="sm"
:disabled="changeAvatarImageDialogLoading"
@click="uploadAvatarImage">
<Upload />
{{ t('dialog.change_content_image.upload') }}
</Button>
<br />
<div class="inline-block p-1 pb-0 hover:rounded-sm">
<img :src="previousImageUrl" class="img-size" loading="lazy" />
</div>
</div>
</DialogContent>
</Dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Upload } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';

11
src/components/dialogs/SendBoopDialog.vue
View File

@@ -94,6 +94,7 @@
const { showGalleryPage, refreshEmojiTable } = useGalleryStore();
const { emojiTable } = storeToRefs(useGalleryStore());
const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
const { isNotificationExpired, handleNotificationV2Hide } = useNotificationStore();
const fileId = ref('');
const displayName = ref('');
@@ -161,14 +162,12 @@
const array = notificationTable.value.data;
for (let i = array.length - 1; i >= 0; i--) {
const ref = array[i];
if (ref.type !== 'boop' || ref.$isExpired || ref.senderUserId !== userId) {
if (ref.type !== 'boop' || isNotificationExpired(ref) || ref.link !== `user:${userId}`) {
continue;
}
notificationRequest.sendNotificationResponse({
notificationId: ref.id,
responseType: 'delete',
responseData: ''
});
console.log('Dismissing boop notification with id', ref.id);
handleNotificationV2Hide(ref.id);
notificationRequest.hideNotificationV2(ref.id);
}
}
</script>

5
src/localization/en.json
View File

@@ -103,7 +103,7 @@
"tab_group": "Group",
"tab_other": "Other",
"past_notifications": "Past",
"no_notifications": "No notifications"
"no_new_notifications": "No new notifications"
}
},
"view": {
@@ -334,7 +334,8 @@
},
"report": {
"closed": "Moderation Report Closed"
}
},
"contentrestriction": "Moderation Content Restriction"
},
"instance": {
"closed": "Instance Closed"

3
src/service/database.js
View File

@@ -77,6 +77,9 @@ const database = {
await sqliteService.executeNonQuery(
`CREATE TABLE IF NOT EXISTS ${dbVars.userPrefix}_notifications (id TEXT PRIMARY KEY, created_at TEXT, type TEXT, sender_user_id TEXT, sender_username TEXT, receiver_user_id TEXT, message TEXT, world_id TEXT, world_name TEXT, image_url TEXT, invite_message TEXT, request_message TEXT, response_message TEXT, expired INTEGER)`
);
await sqliteService.executeNonQuery(
`CREATE TABLE IF NOT EXISTS ${dbVars.userPrefix}_notifications_v2 (id TEXT PRIMARY KEY, created_at TEXT, updated_at TEXT, expires_at TEXT, type TEXT, link TEXT, link_text TEXT, message TEXT, title TEXT, image_url TEXT, seen INTEGER, sender_user_id TEXT, sender_username TEXT, data TEXT, responses TEXT, details TEXT)`
);
await sqliteService.executeNonQuery(
`CREATE TABLE IF NOT EXISTS ${dbVars.userPrefix}_moderation (user_id TEXT PRIMARY KEY, updated_at TEXT, display_name TEXT, block INTEGER, mute INTEGER)`
);

83
src/service/database/notifications.js
View File

@@ -151,6 +151,89 @@ const notifications = {
'@expired': expired
}
);
},
// notifications v2
async getNotificationsV2() {
const notifications = [];
await sqliteService.execute((dbRow) => {
const row = {
id: dbRow[0],
createdAt: dbRow[1],
updatedAt: dbRow[2],
expiresAt: dbRow[3],
type: dbRow[4],
link: dbRow[5],
linkText: dbRow[6],
message: dbRow[7],
title: dbRow[8],
imageUrl: dbRow[9],
seen: dbRow[10] === 1,
senderUserId: dbRow[11],
senderUsername: dbRow[12],
data: JSON.parse(dbRow[13] || '{}'),
responses: JSON.parse(dbRow[14] || '[]'),
details: JSON.parse(dbRow[15] || '{}')
};
// for UI table
row.created_at = row.createdAt;
row.version = 2;
notifications.unshift(row);
}, `SELECT * FROM ${dbVars.userPrefix}_notifications_v2 ORDER BY created_at DESC LIMIT ${dbVars.maxTableSize}`);
return notifications;
},
addNotificationV2ToDatabase(entry) {
sqliteService.executeNonQuery(
`INSERT OR REPLACE INTO ${dbVars.userPrefix}_notifications_v2 (id, created_at, updated_at, expires_at, type, link, link_text, message, title, image_url, seen, sender_user_id, sender_username, data, responses, details) VALUES (@id, @created_at, @updated_at, @expires_at, @type, @link, @link_text, @message, @title, @image_url, @seen, @sender_user_id, @sender_username, @data, @responses, @details)`,
{
'@id': entry.id,
'@created_at': entry.createdAt,
'@updated_at': entry.updatedAt,
'@expires_at': entry.expiresAt,
'@type': entry.type,
'@link': entry.link,
'@link_text': entry.linkText,
'@message': entry.message,
'@title': entry.title,
'@image_url': entry.imageUrl,
'@seen': entry.seen ? 1 : 0,
'@sender_user_id': entry.senderUserId,
'@sender_username': entry.senderUsername,
'@data': JSON.stringify(entry.data || {}),
'@responses': JSON.stringify(entry.responses || []),
'@details': JSON.stringify(entry.details || {})
}
);
},
expireNotificationV2(id) {
sqliteService.executeNonQuery(
`UPDATE ${dbVars.userPrefix}_notifications_v2 SET expires_at = @expires_at, seen = 1 WHERE id = @id`,
{
'@id': id,
'@expires_at': new Date().toJSON()
}
);
},
seenNotificationV2(id) {
sqliteService.executeNonQuery(
`UPDATE ${dbVars.userPrefix}_notifications_v2 SET seen = 1 WHERE id = @id`,
{
'@id': id
}
);
},
deleteNotificationV2(id) {
sqliteService.executeNonQuery(
`DELETE FROM ${dbVars.userPrefix}_notifications_v2 WHERE id = @id`,
{
'@id': id
}
);
}
};

7
src/service/request.js
View File

@@ -121,6 +121,13 @@ export function request(endpoint, options) {
if (AppDebug.debugWebRequests) {
console.log(init, 'parsed data', response.data);
}
if (response.data.error) {
$throw(
response.data.error.status_code || 0,
response.data.error.message,
endpoint
);
}
return response;
} catch (e) {
console.error(e);

42
src/service/websocket.js
View File

@@ -215,16 +215,8 @@ function handlePipeline(args) {
case 'notification-v2-delete':
console.log('notification-v2-delete', content);
for (var id of content.ids) {
notificationStore.handleNotificationHide({
params: {
notificationId: id
}
});
notificationStore.handleNotificationSee({
params: {
notificationId: id
}
});
notificationStore.handleNotificationV2Hide(id);
notificationStore.handleNotificationSee(id);
}
break;
@@ -239,37 +231,17 @@ function handlePipeline(args) {
break;
case 'see-notification':
notificationStore.handleNotificationSee({
params: {
notificationId: content
}
});
notificationStore.handleNotificationSee(content);
break;
case 'hide-notification':
notificationStore.handleNotificationHide({
params: {
notificationId: content
}
});
notificationStore.handleNotificationSee({
params: {
notificationId: content
}
});
notificationStore.handleNotificationHide(content);
notificationStore.handleNotificationSee(content);
break;
case 'response-notification':
notificationStore.handleNotificationHide({
params: {
notificationId: content.notificationId
}
});
notificationStore.handleNotificationSee({
params: {
notificationId: content.notificationId
}
});
notificationStore.handleNotificationHide(content.notificationId);
notificationStore.handleNotificationSee(content.notificationId);
break;
case 'friend-add':

293
src/stores/notification.js
View File

@@ -4,6 +4,7 @@ import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import Noty from 'noty';
import dayjs from 'dayjs';
import {
checkCanInvite,
@@ -23,8 +24,8 @@ import {
userRequest,
worldRequest
} from '../api';
import { database, dbVars } from '../service/database';
import { AppDebug } from '../service/appConfig';
import { database } from '../service/database';
import { useAdvancedSettingsStore } from './settings/advanced';
import { useAppearanceSettingsStore } from './settings/appearance';
import { useFavoriteStore } from './favorite';
@@ -155,6 +156,11 @@ export const useNotificationStore = defineStore('Notification', () => {
const { ref } = args;
const array = notificationTable.value.data;
const { length } = array;
if (ref.seen) {
removeFromArray(unseenNotifications.value, ref.id);
} else if (!unseenNotifications.value.includes(ref.id)) {
unseenNotifications.value.push(ref.id);
}
for (let i = 0; i < length; ++i) {
if (array[i].id === ref.id) {
array[i] = ref;
@@ -189,7 +195,6 @@ export const useNotificationStore = defineStore('Notification', () => {
) {
uiStore.notifyMenu('notification');
}
unseenNotifications.value.push(ref.id);
queueNotificationNoty(ref);
sharedFeedStore.addEntry(ref);
}
@@ -206,30 +211,19 @@ export const useNotificationStore = defineStore('Notification', () => {
D.incomingRequest = true;
}
function handleNotificationHide(args) {
let ref;
const array = notificationTable.value.data;
for (let i = array.length - 1; i >= 0; i--) {
if (array[i].id === args.params.notificationId) {
ref = array[i];
break;
}
}
function handleNotificationHide(notificationId) {
const ref = notificationTable.value.data.find(
(n) => n.id === notificationId
);
if (typeof ref === 'undefined') {
return;
}
args.ref = ref;
if (
ref.type === 'friendRequest' ||
ref.type === 'ignoredFriendRequest' ||
ref.type.includes('.')
) {
for (let i = array.length - 1; i >= 0; i--) {
if (array[i].id === ref.id) {
array.splice(i, 1);
break;
}
}
removeFromArray(notificationTable.value.data, ref);
} else {
ref.$isExpired = true;
database.updateNotificationExpired(ref);
@@ -242,28 +236,6 @@ export const useNotificationStore = defineStore('Notification', () => {
});
}
function handleNotificationV2Update(args) {
const notificationId = args.params.notificationId;
const json = args.json;
if (!json) {
return;
}
json.id = notificationId;
handleNotification({
json,
params: {
notificationId
}
});
if (json.seen) {
handleNotificationSee({
params: {
notificationId
}
});
}
}
function handlePipelineNotification(args) {
const ref = args.json;
if (
@@ -374,12 +346,18 @@ export const useNotificationStore = defineStore('Notification', () => {
});
}
function handleNotificationSee(args) {
const { notificationId } = args.params;
function handleNotificationSee(notificationId) {
removeFromArray(unseenNotifications.value, notificationId);
if (unseenNotifications.value.length === 0) {
uiStore.removeNotify('notification');
}
const ref = notificationTable.value.data.find(
(n) => n.id === notificationId
);
if (ref) {
ref.seen = true;
}
database.seenNotificationV2(ref);
}
function handleNotificationAccept(args) {
@@ -435,10 +413,11 @@ export const useNotificationStore = defineStore('Notification', () => {
/**
*
* @param {object} json
* @param {object} data
* @returns {object}
*/
function applyNotification(json) {
function applyNotification(data) {
const json = { ...data };
if (json.message) {
json.message = replaceBioSymbols(json.message);
}
@@ -489,25 +468,117 @@ export const useNotificationStore = defineStore('Notification', () => {
}
ref.details = details;
}
if (ref.type === 'boop') {
return ref;
}
function applyNotificationV2(data) {
const json = { ...data };
// delete any null in json
for (const key in json) {
if (json[key] === null || typeof json[key] === 'undefined') {
delete json[key];
}
}
let ref = notificationTable.value.data.find((n) => n.id === json.id);
if (typeof ref === 'undefined') {
ref = {
id: '',
createdAt: '',
updatedAt: '',
expiresAt: '',
type: '',
link: '',
linkText: '',
message: '',
title: '',
imageUrl: '',
seen: false,
data: {},
responses: [],
version: 2,
...json
};
} else {
Object.assign(ref, json);
}
ref.created_at = ref.createdAt; // for table
// legacy handling of boops
if (ref.type === 'boop' && ref.title) {
ref.message = ref.title;
ref.title = '';
if (ref.details?.emojiId?.startsWith('default_')) {
ref.details.imageUrl = ref.details.emojiId;
ref.imageUrl = ref.details.emojiId;
ref.message += ` ${ref.details.emojiId.replace('default_', '')}`;
} else {
ref.details.imageUrl = `${AppDebug.endpointDomain}/file/${ref.details.emojiId}/${ref.details.emojiVersion}`;
ref.imageUrl = `${AppDebug.endpointDomain}/file/${ref.details.emojiId}/${ref.details.emojiVersion}`;
}
}
return ref;
}
function handleNotificationV2(args) {
const ref = applyNotificationV2(args.json);
if (ref.seen) {
removeFromArray(unseenNotifications.value, ref.id);
} else if (!unseenNotifications.value.includes(ref.id)) {
unseenNotifications.value.push(ref.id);
}
const existingNotification = notificationTable.value.data.find(
(n) => n.id === ref.id
);
if (existingNotification) {
Object.assign(existingNotification, ref);
database.addNotificationV2ToDatabase(existingNotification); // update
return;
}
if (
notificationTable.value.filters[0].value.length === 0 ||
notificationTable.value.filters[0].value.includes(ref.type)
) {
uiStore.notifyMenu('notification');
}
database.addNotificationV2ToDatabase(ref);
notificationTable.value.data.push(ref);
queueNotificationNoty(ref);
sharedFeedStore.addEntry(ref);
}
function handleNotificationV2Update(args) {
const notificationId = args.params.notificationId;
const json = { ...args.json };
if (!json) {
return;
}
json.id = notificationId;
handleNotificationV2({
json,
params: {
notificationId
}
});
if (json.seen) {
handleNotificationSee(notificationId);
}
}
function handleNotificationV2Hide(notificationId) {
database.expireNotificationV2(notificationId);
const ref = notificationTable.value.data.find(
(n) => n.id === notificationId
);
if (ref) {
ref.expiresAt = new Date().toJSON();
ref.seen = true;
}
}
function expireFriendRequestNotifications() {
const array = notificationTable.value.data;
for (let i = array.length - 1; i >= 0; i--) {
if (
array[i].type === 'friendRequest' ||
array[i].type === 'ignoredFriendRequest' ||
array[i].type.includes('.')
array[i].type === 'ignoredFriendRequest'
) {
array.splice(i, 1);
}
@@ -540,22 +611,6 @@ export const useNotificationStore = defineStore('Notification', () => {
});
}
function handleNotificationV2(args) {
const json = args.json;
json.created_at = json.createdAt;
if (json.title && json.message) {
json.message = `${json.title}, ${json.message}`;
} else if (json.title) {
json.message = json.title;
}
handleNotification({
json,
params: {
notificationId: json.id
}
});
}
/**
*
* @returns {Promise<void>}
@@ -581,7 +636,6 @@ export const useNotificationStore = defineStore('Notification', () => {
}
});
}
unseenNotifications.value = [];
params.offset += 100;
if (args.json.length < 100) {
break;
@@ -595,23 +649,14 @@ export const useNotificationStore = defineStore('Notification', () => {
for (let i = 0; i < count; i++) {
const args =
await notificationRequest.getNotificationsV2(params);
for (const json of args.json) {
json.created_at = json.createdAt;
if (json.title && json.message) {
json.message = `${json.title}, ${json.message}`;
} else if (json.title) {
json.message = json.title;
}
handleNotification({
handleNotificationV2({
json,
params: {
notificationId: json.id
}
});
}
unseenNotifications.value = [];
params.offset += 100;
if (args.json.length < 100) {
break;
@@ -634,7 +679,6 @@ export const useNotificationStore = defineStore('Notification', () => {
}
});
}
unseenNotifications.value = [];
params.offset += 100;
if (args.json.length < 100) {
break;
@@ -2412,7 +2456,16 @@ export const useNotificationStore = defineStore('Notification', () => {
async function initNotifications() {
notificationInitStatus.value = false;
notificationTable.value.data = await database.getNotifications();
let tableData = await database.getNotificationsV2();
let notifications = await database.getNotifications();
tableData = tableData.concat(
notifications.filter((n) => !tableData.some((t) => t.id === n.id))
);
tableData.sort(
(a, b) => Date.parse(b.created_at) - Date.parse(a.created_at)
);
tableData.splice(dbVars.maxTableSize);
notificationTable.value.data = tableData;
refreshNotifications();
}
@@ -2441,11 +2494,11 @@ export const useNotificationStore = defineStore('Notification', () => {
async function hideNotification(row) {
if (row.type === 'ignoredFriendRequest') {
const args = await friendRequest.deleteHiddenFriendRequest(
await friendRequest.deleteHiddenFriendRequest(
{ notificationId: row.id },
row.senderUserId
);
handleNotificationHide(args);
handleNotificationHide(row.id);
} else {
notificationRequest.hideNotification({
notificationId: row.id
@@ -2516,23 +2569,15 @@ export const useNotificationStore = defineStore('Notification', () => {
}
}
const params = { notificationId, responseType, responseData };
notificationRequest
.sendNotificationResponse(params)
.then((json) => {
if (!json) return;
const args = { json, params };
handleNotificationHide(args);
new Noty({
type: 'success',
text: escapeTag(args.json)
}).show();
})
.catch((err) => {
handleNotificationHide({ params });
notificationRequest.hideNotificationV2(params.notificationId);
console.error('Notification response failed', err);
toast.error(t('message.error'));
});
notificationRequest.sendNotificationResponse(params).then((args) => {
console.log('Notification response', args);
if (!args.json) return;
handleNotificationV2Hide(notificationId);
new Noty({
type: 'success',
text: escapeTag(args.json)
}).show();
});
}
function deleteNotificationLog(row) {
@@ -2546,7 +2591,11 @@ export const useNotificationStore = defineStore('Notification', () => {
row.type !== 'friendRequest' &&
row.type !== 'ignoredFriendRequest'
) {
database.deleteNotification(row.id);
if (!row.version || row.version < 2) {
database.deleteNotification(row.id);
} else {
database.deleteNotificationV2(row.id);
}
}
}
@@ -2562,6 +2611,49 @@ export const useNotificationStore = defineStore('Notification', () => {
.catch(() => {});
}
function isNotificationExpired(notification) {
if (notification.$isExpired !== undefined) {
return notification.$isExpired;
}
if (!notification.expiresAt) {
return false;
}
const expiresAt = dayjs(notification.expiresAt);
return expiresAt.isValid() && dayjs().isSameOrAfter(expiresAt);
}
function openNotificationLink(link) {
if (!link) {
return;
}
const data = link.split(':');
if (!data.length) {
return;
}
switch (data[0]) {
case 'group':
groupStore.showGroupDialog(data[1]);
break;
case 'user':
userStore.showUserDialog(data[1]);
break;
case 'event':
const ids = data[1].split(',');
if (ids.length < 2) {
console.error('Invalid event notification link:', data[1]);
return;
}
groupStore.showGroupDialog(ids[0]);
// ids[1] cal_ is the event id
break;
case 'openNotificationLink':
default:
toast.error('Unsupported notification link type');
break;
}
}
return {
notificationInitStatus,
notificationTable,
@@ -2582,6 +2674,7 @@ export const useNotificationStore = defineStore('Notification', () => {
handlePipelineNotification,
handleNotificationV2Update,
handleNotificationHide,
handleNotificationV2Hide,
handleNotification,
handleNotificationV2,
testNotification,
@@ -2600,6 +2693,8 @@ export const useNotificationStore = defineStore('Notification', () => {
groupNotifications,
otherNotifications,
hasUnseenNotifications,
getNotificationCategory
getNotificationCategory,
isNotificationExpired,
openNotificationLink
};
});

6
src/stores/sharedFeed.js
View File

@@ -93,9 +93,9 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
);
watch(
() => watchState.isLoggedIn,
(isLoggedIn) => {
if (isLoggedIn) {
() => [watchState.isFriendsLoaded, watchState.isFavoritesLoaded],
([isFriendsLoaded, isFavoritesLoaded]) => {
if (isFriendsLoaded && isFavoritesLoaded) {
sharedFeedData.value = [];
loadSharedFeed();
}

44
src/views/Notifications/Notification.vue
View File

@@ -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);
}

36
src/views/Notifications/columns.jsx
View File

@@ -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>

6
src/views/Sidebar/components/NotificationCenterSheet.vue
View File

@@ -92,9 +92,9 @@
const activeTab = ref('friend');
const activeCount = computed(() => ({
friend: friendNotifications.value.filter((n) => !n.$isExpired).length,
group: groupNotifications.value.filter((n) => !n.$isExpired).length,
other: otherNotifications.value.filter((n) => !n.$isExpired).length
friend: friendNotifications.value.length,
group: groupNotifications.value.length,
other: otherNotifications.value.length
}));
// Dialog state

83
src/views/Sidebar/components/NotificationItem.vue
View File

@@ -1,8 +1,5 @@
<template>
<Item
size="sm"
:variant="notification.$isExpired ? 'default' : 'muted'"
:class="[{ 'opacity-50': notification.$isExpired }, 'mb-1.5']">
<Item size="sm" variant="muted" class="mb-1.5">
<ItemMedia variant="image" class="cursor-pointer" @click.stop="openSender">
<Avatar class="size-full">
<AvatarImage v-if="avatarUrl" :src="avatarUrl" />
@@ -18,7 +15,7 @@
{{ typeLabel }}
</Badge>
<span
v-if="!notification.$isExpired && isUnseen"
v-if="!isNotificationExpired(notification) && !isSeen"
class="ml-auto size-2 shrink-0 rounded-full bg-blue-500" />
</ItemTitle>
<TooltipWrapper v-if="displayMessage" side="top" :content="displayMessage" :delay-duration="600">
@@ -33,7 +30,7 @@
{{ relativeTime }}
</span>
<div class="flex items-center gap-1">
<template v-if="!notification.$isExpired">
<template v-if="!isNotificationExpired(notification)">
<TooltipWrapper
v-if="notification.type === 'friendRequest'"
side="top"
@@ -134,9 +131,10 @@
} from 'lucide-vue-next';
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { computed, onMounted } from 'vue';
import { Badge } from '@/components/ui/badge';
import { TooltipWrapper } from '@/components/ui/tooltip';
import { computed } from 'vue';
import { notificationRequest } from '@/api';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -158,6 +156,7 @@
const notificationStore = useNotificationStore();
const { lastLocation } = storeToRefs(useLocationStore());
const { isGameRunning } = storeToRefs(useGameStore());
const { openNotificationLink, isNotificationExpired, handleNotificationV2Hide } = useNotificationStore();
const senderName = computed(() => {
const n = props.notification;
@@ -224,6 +223,7 @@
const showDecline = computed(() => {
const type = props.notification.type;
const link = props.notification.link;
return (
type !== 'requestInviteResponse' &&
type !== 'inviteResponse' &&
@@ -232,7 +232,8 @@
type !== 'groupChange' &&
!type?.includes('group.') &&
!type?.includes('moderation.') &&
!type?.includes('instance.')
!type?.includes('instance.') &&
!link?.startsWith('economy.')
);
});
@@ -242,13 +243,18 @@
const n = props.notification;
const type = n.type;
if (type === 'friendRequest' || type === 'ignoredFriendRequest') return false;
if (type?.includes('group.') || type?.includes('moderation.') || type?.includes('instance.')) return false;
if (n.link?.startsWith('economy.')) return false;
// For active notifications, group.queueReady is handled separately
if (!n.$isExpired && type === 'group.queueReady') return false;
return true;
});
const isSeen = computed(() => {
const n = props.notification;
if (typeof n.seen === 'boolean') {
return n.seen;
}
// Fallback for v1 notifications without seen property
return !props.isUnseen;
});
const canInvite = computed(() => {
const location = lastLocation.value?.location;
return Boolean(location) && isGameRunning.value && checkCanInvite(location);
@@ -284,27 +290,6 @@
notificationStore.sendNotificationResponse(props.notification.id, props.notification.responses, response.type);
}
function openNotificationLink(link) {
if (!link) return;
const data = link.split(':');
if (!data.length) return;
switch (data[0]) {
case 'group':
groupStore.showGroupDialog(data[1]);
break;
case 'user':
userStore.showUserDialog(data[1]);
break;
case 'event': {
const ids = data[1].split(',');
if (ids.length >= 2) {
groupStore.showGroupDialog(ids[0]);
}
break;
}
}
}
function openSender() {
const userId = props.notification.senderUserId;
if (!userId) return;
@@ -314,4 +299,36 @@
userStore.showUserDialog(userId);
}
}
onMounted(() => {
// Mark as seen
if (isNotificationExpired(props.notification) || isSeen.value) {
return;
}
const params = { notificationId: props.notification.id };
if (!props.notification.version || props.notification.version < 2) {
notificationRequest.seeNotification({ notificationId: props.notification.id }).then((args) => {
console.log('Marked notification-v1 as seen:', args.json);
notificationStore.handleNotificationSee(props.notification.id);
});
return;
}
notificationRequest
.seeNotificationV2(params)
.then((args) => {
console.log('Marked notification-v2 as seen:', args.json);
const newArgs = {
params,
json: {
...args.json,
seen: true
}
};
notificationStore.handleNotificationV2Update(newArgs);
})
.catch((err) => {
console.error('Failed to mark notification-v2 as seen:', err);
handleNotificationV2Hide(props.notification.id);
});
});
</script>

8
src/views/Sidebar/components/NotificationList.vue
View File

@@ -11,7 +11,7 @@
@show-invite-request-response="$emit('show-invite-request-response', $event)" />
</div>
<div v-else class="flex items-center justify-center p-8 text-sm text-muted-foreground">
{{ t('side_panel.notification_center.no_notifications') }}
{{ t('side_panel.notification_center.no_new_notifications') }}
</div>
<template v-if="expiredNotifications.length">
@@ -73,11 +73,13 @@
const sortedNotifications = computed(() => [...props.notifications].sort((a, b) => getTs(b) - getTs(a)));
const activeNotifications = computed(() => sortedNotifications.value.filter((n) => !n.$isExpired));
const activeNotifications = computed(() =>
sortedNotifications.value.filter((n) => getTs(n) > dayjs().subtract(1, 'week').valueOf())
);
const MAX_EXPIRED = 20;
const expiredNotifications = computed(() =>
sortedNotifications.value.filter((n) => n.$isExpired).slice(0, MAX_EXPIRED)
sortedNotifications.value.filter((n) => getTs(n) <= dayjs().subtract(1, 'week').valueOf()).slice(0, MAX_EXPIRED)
);
</script>