nicolium: mention with avatar display improvement

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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 {

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

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'),
 );

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;
+  }
+}