fix(web): flatten message center list

Author: Siri-Ray

apps/web/src/components/MessageCenter.module.css

@@ -101,7 +101,6 @@
 }
 
 .close.close:focus-visible,
-.filter:focus-visible,
 .markAll:focus-visible,
 .syncStatus button:focus-visible,
 .itemSummary:focus-visible,
@@ -116,24 +115,11 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 12px 14px;
+  justify-content: flex-end;
+  padding: 9px 14px;
   border-bottom: 1px solid var(--border-soft);
 }
 
-.filters {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  padding: 3px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-pill, 999px);
-  background: var(--bg-subtle);
-}
-
-.filter,
 .markAll {
   border: 0;
   background: transparent;
@@ -143,39 +129,10 @@
   line-height: 1;
 }
 
-.filter {
-  min-height: 26px;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0 9px;
-  border-radius: var(--radius-pill, 999px);
-}
-
-.filter:hover,
 .markAll:hover:not(:disabled) {
   color: var(--text-strong);
 }
 
-.filterActive {
-  background: var(--bg-elevated, var(--bg-panel));
-  color: var(--text-strong);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
-}
-
-.filterBadge {
-  min-width: 15px;
-  height: 15px;
-  padding: 0 4px;
-  border-radius: 999px;
-  background: var(--red);
-  color: var(--accent-contrast, #fff);
-  font-size: 9px;
-  font-weight: 700;
-  line-height: 15px;
-  text-align: center;
-}
-
 .markAll {
   flex: 0 0 auto;
   padding: 6px 4px;
@@ -485,23 +442,6 @@
     border-radius: var(--radius) var(--radius) 0 0;
   }
 
-  .controls {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .filters {
-    width: 100%;
-  }
-
-  .filter {
-    flex: 1;
-  }
-
-  .markAll {
-    align-self: flex-end;
-  }
-
   .footer {
     align-items: stretch;
     flex-direction: column;

apps/web/src/components/MessageCenter.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@open-design/components';
-import { useCallback, useEffect, useId, useMemo, useRef, useState, type RefObject } from 'react';
+import { useCallback, useEffect, useId, useRef, useState, type RefObject } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useI18n, type Locale } from '../i18n';
@@ -11,19 +11,12 @@ import {
   pullMessageCenter,
   readAnonymousMessages,
   readAnonymousReadIds,
-  type MessageCenterFilter,
   type MessageCenterMessage,
   writeAnonymousState,
 } from '../message-center-client';
 import { Icon } from './Icon';
 import styles from './MessageCenter.module.css';
 
-const FILTERS: Array<{ id: MessageCenterFilter; label: 'messageCenter.filterAll' | 'messageCenter.filterUnread' | 'messageCenter.filterRead' }> = [
-  { id: 'all', label: 'messageCenter.filterAll' },
-  { id: 'unread', label: 'messageCenter.filterUnread' },
-  { id: 'read', label: 'messageCenter.filterRead' },
-];
-
 function unreadBadgeLabel(count: number): string {
   return count > 9 ? '9+' : String(count);
 }
@@ -74,7 +67,6 @@ export function MessageCenter({
     },
     [onOpenChange],
   );
-  const [filter, setFilter] = useState<MessageCenterFilter>('all');
   const [messages, setMessages] = useState<MessageCenterMessage[]>([]);
   const [readIds, setReadIds] = useState<Set<string>>(new Set());
   const [loggedIn, setLoggedIn] = useState(false);
@@ -174,10 +166,6 @@ export function MessageCenter({
   useEffect(() => {
     onUnreadCountChange?.(unreadCount);
   }, [unreadCount, onUnreadCountChange]);
-  const visibleMessages = useMemo(
-    () => messages.filter((message) => filter === 'all' || (filter === 'read' ? Boolean(message.readAt) : !message.readAt)),
-    [filter, messages],
-  );
 
   /** The control keyboard focus must land on after the panel closes. Opening
    *  focuses the portaled dialog, so closing always unmounts the focused node —
@@ -241,15 +229,14 @@ export function MessageCenter({
   };
 
   const openLabel = unreadCount > 0 ? `${t('messageCenter.openAria')} (${t('messageCenter.unreadCount', { count: unreadCount })})` : t('messageCenter.openAria');
-  const emptyTitle = filter === 'unread' ? t('messageCenter.emptyUnreadTitle') : filter === 'read' ? t('messageCenter.emptyReadTitle') : t('messageCenter.emptyAllTitle');
 
   return <div className={styles.root}>
     {hideTrigger ? null : <button ref={triggerRef} type="button" className={`settings-icon-btn od-tooltip ${styles.trigger}`} onClick={() => setOpen(!open)} title={t('messageCenter.openAria')} data-tooltip={t('messageCenter.openAria')} data-tooltip-placement="bottom" aria-label={openLabel} aria-haspopup="dialog" aria-expanded={open} data-testid="message-center-trigger">
       <Icon name="bell" size={17} />{unreadCount > 0 ? <span className={styles.badge} aria-hidden>{unreadBadgeLabel(unreadCount)}</span> : null}
     </button>}
     {open ? createPortal(<div className={styles.backdrop} data-testid="message-center-backdrop"><aside ref={panelRef} className={styles.panel} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1} data-testid="message-center-dialog">
       <header className={styles.header}><div className={styles.headerCopy}><h2 id={titleId}>{t('messageCenter.title')}</h2><p>{t('messageCenter.subtitle')}</p></div><Button size="icon" className={styles.close} onClick={closePanel} aria-label={t('messageCenter.close')}><Icon name="close" size={18} strokeWidth={2}/></Button></header>
-      <div className={styles.controls}><div className={styles.filters} role="group" aria-label={t('messageCenter.title')}>{FILTERS.map((item) => <button key={item.id} type="button" className={`${styles.filter}${filter === item.id ? ` ${styles.filterActive}` : ''}`} aria-pressed={filter === item.id} onClick={() => setFilter(item.id)}>{t(item.label)}{item.id === 'unread' && unreadCount > 0 ? <span className={styles.filterBadge} aria-hidden>{unreadBadgeLabel(unreadCount)}</span> : null}</button>)}</div><button type="button" className={styles.markAll} onClick={() => void markAllRead().catch(() => setSyncState('error'))} disabled={unreadCount === 0}>{t('messageCenter.markAllRead')}</button></div>
+      <div className={styles.controls}><button type="button" className={styles.markAll} onClick={() => void markAllRead().catch(() => setSyncState('error'))} disabled={unreadCount === 0}>{t('messageCenter.markAllRead')}</button></div>
       <div className={styles.list} aria-live="polite">
         {syncState === 'error' && messages.length > 0 ? (
           <div className={styles.syncStatus} role="status">
@@ -274,7 +261,7 @@ export function MessageCenter({
               </button>
             </div>
           </div>
-        ) : visibleMessages.length === 0 ? <div className={styles.empty}><Icon name="bell" size={20}/><strong>{emptyTitle}</strong><p>{t('messageCenter.emptyBody')}</p></div> : visibleMessages.map((message) => <MessageItem key={message.id} locale={locale} message={message} onRead={markRead} onError={() => setSyncState('error')}/>)}
+        ) : messages.length === 0 ? <div className={styles.empty}><Icon name="bell" size={20}/><strong>{t('messageCenter.emptyAllTitle')}</strong><p>{t('messageCenter.emptyBody')}</p></div> : messages.map((message) => <MessageItem key={message.id} locale={locale} message={message} onRead={markRead} onError={() => setSyncState('error')}/>)}
       </div>
       <footer className={styles.footer}><p>{t('messageCenter.desktopSettingsHint')}</p>{onOpenNotificationSettings ? <Button variant="ghost" onClick={() => { closePanel(); onOpenNotificationSettings(); }}>{t('messageCenter.desktopSettings')}</Button> : null}</footer>
     </aside></div>, document.body) : null}

apps/web/tests/components/MessageCenter.test.tsx

@@ -120,14 +120,20 @@ describe('MessageCenter', () => {
     await waitFor(() => expect(vi.mocked(fetch).mock.calls.some(([url, init]) => String(url).includes('/release/read') && init?.method === 'POST')).toBe(true));
   });
 
-  it('filters messages and marks all read', async () => {
+  it('shows read and unread messages in one flat list and marks all read', async () => {
     renderMessageCenter();
-    await openCenter();
-    fireEvent.click(screen.getByRole('button', { name: 'Unread' }));
-    expect(screen.getByText('OpenDesign 0.14 is available')).toBeTruthy();
-    expect(screen.queryByText('Credits added')).toBeNull();
-    fireEvent.click(screen.getByRole('button', { name: 'Mark all read' }));
-    await waitFor(() => expect(screen.getByText('All caught up')).toBeTruthy());
+    const dialog = await openCenter();
+
+    expect(within(dialog).queryByRole('button', { name: 'All' })).toBeNull();
+    expect(within(dialog).queryByRole('button', { name: 'Unread' })).toBeNull();
+    expect(within(dialog).queryByRole('button', { name: 'Read' })).toBeNull();
+    expect(within(dialog).getByText('OpenDesign 0.14 is available')).toBeTruthy();
+    expect(within(dialog).getByText('Credits added')).toBeTruthy();
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Mark all read' }));
+    await waitFor(() => expect(screen.queryByLabelText(/unread/)).toBeNull());
+    expect(within(dialog).getByText('OpenDesign 0.14 is available')).toBeTruthy();
+    expect(within(dialog).getByText('Credits added')).toBeTruthy();
   });
 
   it('expands the whole message row and opens its CTA', async () => {