fix notification deletion UI update

src/composables/useAuthenticatedLayoutResizable.js

@@ -110,9 +110,12 @@ export function useAuthenticatedLayoutResizable() {
         resizeNavPanel(targetSize);
     });
 
-    onMounted(() => {
+    onMounted(async () => {
-        navExpandedSize.value =
+        await nextTick();
-            navPanelRef.value?.getSize?.() ?? navDefaultSize.value;
+        let panelSize = null;
+        panelSize = navPanelRef.value?.getSize?.() ?? null;
+
+        navExpandedSize.value = panelSize ?? navDefaultSize.value;
         if (isNavCollapsed.value) {
             resizeNavPanel(navCollapsedSize.value);
         }

src/views/Feed/columns.jsx

@@ -84,14 +84,14 @@ const expandedRow = ({ row }) => {
         return (
             <div class="pl-5 text-sm">
                 <div class="flex items-center">
-                    <div class="inline-block align-top w-[160px]">
+                    <div class="inline-block align-top w-40">
                         {original.previousCurrentAvatarThumbnailImageUrl ? (
                             <>
                                 <img
                                     src={
                                         original.previousCurrentAvatarThumbnailImageUrl
                                     }
-                                    class="x-link h-[120px] w-[160px] rounded"
+                                    class="x-link h-30 w-40 rounded"
                                     loading="lazy"
                                 />
                                 <br />

src/views/Layout/AuthenticatedLayout.vue

@@ -26,7 +26,10 @@
                 <template v-if="isSideBarTabShow">
                     <ResizableHandle
                         with-handle
-                        :class="isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0'"></ResizableHandle>
+                        :class="[
+                            isAsideCollapsed(layout) ? 'opacity-100' : 'opacity-0',
+                            'z-20 [&>div]:-translate-x-1/2'
+                        ]"></ResizableHandle>
                     <ResizablePanel
                         :default-size="asideDefaultSize"
                         :max-size="asideMaxSize"

src/views/Notifications/Notification.vue

@@ -96,7 +96,7 @@
         useUserStore,
         useVrcxStore
     } from '../../stores';
-    import { convertFileUrlToImageUrl, escapeTag, parseLocation, removeFromArray } from '../../shared/utils';
+    import { convertFileUrlToImageUrl, escapeTag, parseLocation } from '../../shared/utils';
     import { friendRequest, notificationRequest, worldRequest } from '../../api';
     import { DataTableLayout } from '../../components/ui/data-table';
     import { createColumns } from './columns.jsx';
@@ -174,10 +174,11 @@
         const rawFilters = Array.isArray(notificationTable.value.filters) ? notificationTable.value.filters : [];
         const activeFilters = rawFilters.filter((filter) => !isEmptyFilterValue(filter?.value));
 
-        const filtered =
+        if (activeFilters.length === 0) {
-            activeFilters.length === 0
+            return rawData.slice();
-                ? rawData
+        }
-                : rawData.filter((row) => {
+
+        return rawData.filter((row) => {
             for (const filter of activeFilters) {
                 if (filter.filterFn) {
                     if (!filter.filterFn(row, filter)) {
@@ -191,8 +192,6 @@
             }
             return true;
         });
-
-        return filtered;
     });
 
     const columns = createColumns({
@@ -468,7 +467,10 @@
     }
 
     function deleteNotificationLog(row) {
-        removeFromArray(notificationTable.value.data, row);
+        const idx = notificationTable.value.data.findIndex((e) => e.id === row.id);
+        if (idx !== -1) {
+            notificationTable.value.data.splice(idx, 1);
+        }
         if (row.type !== 'friendRequest' && row.type !== 'ignoredFriendRequest') {
             database.deleteNotification(row.id);
         }

src/views/Notifications/columns.jsx

@@ -395,7 +395,7 @@ export const createColumns = ({
                     }
                     return (
                         <Emoji
-                            class="x-link h-[30px] w-[30px] rounded object-cover"
+                            class="x-link h-7.5 w-7.5 rounded object-cover"
                             onClick={() => showFullscreenImageDialog(imageUrl)}
                             imageUrl={imageUrl}
                             size={30}
@@ -406,7 +406,7 @@ export const createColumns = ({
                 if (original.details?.imageUrl) {
                     return (
                         <img
-                            class="x-link h-[30px] w-[30px] rounded object-cover"
+                            class="x-link h-7.5 w-7.5 rounded object-cover"
                             src={getSmallThumbnailUrl(
                                 original.details.imageUrl
                             )}
@@ -423,7 +423,7 @@ export const createColumns = ({
                 if (original.imageUrl) {
                     return (
                         <img
-                            class="x-link h-[30px] w-[30px] rounded object-cover"
+                            class="x-link h-7.5 w-7.5 rounded object-cover"
                             src={getSmallThumbnailUrl(original.imageUrl)}
                             onClick={() =>
                                 showFullscreenImageDialog(original.imageUrl)