From 1dc99da3f09e28106686eec71aff96a3746b3105 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 17 Mar 2026 17:06:05 +0100
Subject: [PATCH] nicolium: mention with avatar display improvement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../nicolium/src/columns/notifications.tsx     |  7 +++++--
 .../components/panels/notifications-panel.tsx  | 18 ++++++++++++++++++
 .../src/features/ui/util/async-components.ts   |  3 +++
 packages/nicolium/src/styles/new/panels.scss   | 12 ++++++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 packages/nicolium/src/features/ui/components/panels/notifications-panel.tsx

diff --git a/packages/nicolium/src/columns/notifications.tsx b/packages/nicolium/src/columns/notifications.tsx
index 01381b037..f303b970a 100644
--- a/packages/nicolium/src/columns/notifications.tsx
+++ b/packages/nicolium/src/columns/notifications.tsx
@@ -178,18 +178,20 @@ const FilterBar = () => {
 
 interface INotificationsColumn {
   multiColumn?: boolean;
+  compact?: boolean;
 }
 
-const NotificationsColumn: React.FC<INotificationsColumn> = ({ multiColumn }) => {
+const NotificationsColumn: React.FC<INotificationsColumn> = ({ multiColumn, compact }) => {
   const features = useFeatures();
   const settings = useSettings();
   const { mutate: markNotificationsRead } = useMarkNotificationsReadMutation();
   const queryClient = useQueryClient();
 
   const showFilterBar =
+    !compact &&
     (features.notificationsExcludeTypes || features.notificationsIncludeTypes) &&
     settings.notifications.quickFilter.show;
-  const activeFilter = settings.notifications.quickFilter.active;
+  const activeFilter = compact ? 'all' : settings.notifications.quickFilter.active;
   const {
     data: notifications = [],
     isLoading,
@@ -337,6 +339,7 @@ const NotificationsColumn: React.FC<INotificationsColumn> = ({ multiColumn }) =>
         notification={item}
         onMoveUp={handleMoveUp}
         onMoveDown={handleMoveDown}
+        compact={compact}
       />
     ));
   } else {
diff --git a/packages/nicolium/src/features/ui/components/panels/notifications-panel.tsx b/packages/nicolium/src/features/ui/components/panels/notifications-panel.tsx
new file mode 100644
index 000000000..56918ea61
--- /dev/null
+++ b/packages/nicolium/src/features/ui/components/panels/notifications-panel.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import NotificationsColumn from '@/columns/notifications';
+import Widget from '@/components/ui/widget';
+
+const NotificationsPanel: React.FC = () => {
+  return (
+    <Widget
+      className='⁂-notifications-panel'
+      title={<FormattedMessage id='column.notifications' defaultMessage='Notifications' />}
+    >
+      <NotificationsColumn multiColumn compact />
+    </Widget>
+  );
+};
+
+export { NotificationsPanel as default };
diff --git a/packages/nicolium/src/features/ui/util/async-components.ts b/packages/nicolium/src/features/ui/util/async-components.ts
index 9ffe7d2a5..dbaccec51 100644
--- a/packages/nicolium/src/features/ui/util/async-components.ts
+++ b/packages/nicolium/src/features/ui/util/async-components.ts
@@ -26,6 +26,9 @@ export const LatestAccountsPanel = lazy(
 export const MyGroupsPanel = lazy(() => import('@/features/ui/components/panels/my-groups-panel'));
 export const NewEventPanel = lazy(() => import('@/features/ui/components/panels/new-event-panel'));
 export const NewGroupPanel = lazy(() => import('@/features/ui/components/panels/new-group-panel'));
+export const NotificationsPanel = lazy(
+  () => import('@/features/ui/components/panels/notifications-panel'),
+);
 export const PinnedAccountsPanel = lazy(
   () => import('@/features/ui/components/panels/pinned-accounts-panel'),
 );
diff --git a/packages/nicolium/src/styles/new/panels.scss b/packages/nicolium/src/styles/new/panels.scss
index ef3bb0a03..5700428f6 100644
--- a/packages/nicolium/src/styles/new/panels.scss
+++ b/packages/nicolium/src/styles/new/panels.scss
@@ -11,3 +11,15 @@
     line-height: 1;
   }
 }
+
+.⁂-notifications-panel__body {
+  gap: 0;
+
+  .⁂-status-list {
+    height: 32rem;
+  }
+
+  .⁂-notification {
+    padding: 0.5rem 0;
+  }
+}