fix(web): polish message center states

Author: elifive555555

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

@@ -50,13 +50,23 @@
 }
 
 .header {
+  position: relative;
   flex: 0 0 auto;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 14px;
   padding: 18px 18px 14px;
-  border-bottom: 1px solid var(--border-soft);
+}
+
+.header::after {
+  content: '';
+  position: absolute;
+  right: 12px;
+  bottom: 0;
+  left: 12px;
+  height: 1px;
+  background: var(--border-soft);
 }
 
 .headerCopy {
@@ -101,7 +111,6 @@
 }
 
 .close.close:focus-visible,
-.markAll:focus-visible,
 .syncStatus button:focus-visible,
 .itemSummary:focus-visible,
 .itemActions button:focus-visible,
@@ -111,44 +120,12 @@
   outline-offset: 2px;
 }
 
-.controls {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 9px 14px;
-  border-bottom: 1px solid var(--border-soft);
-}
-
-.markAll {
-  border: 0;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 12px;
-  line-height: 1;
-}
-
-.markAll:hover:not(:disabled) {
-  color: var(--text-strong);
-}
-
-.markAll {
-  flex: 0 0 auto;
-  padding: 6px 4px;
-  border-radius: var(--radius-pill, 999px);
-}
-
-.markAll:disabled {
-  cursor: default;
-  opacity: 0.45;
-}
-
 .list {
   flex: 1 1 auto;
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
@@ -221,7 +198,20 @@
 }
 
 .itemUnread {
-  box-shadow: inset 2px 0 0 var(--accent);
+  position: relative;
+}
+
+.itemUnread::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: 38px;
+  left: 3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--red, #ef4444);
+  pointer-events: none;
 }
 
 .itemExpanded {
@@ -242,6 +232,7 @@
   gap: 6px;
   padding: 12px 13px 10px;
   border: 0;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: inherit;
   text-align: left;
@@ -302,10 +293,7 @@
 
 .itemExpanded .bodyPreview {
   overflow: visible;
-  padding-top: 2px;
   color: var(--text);
-  font-size: 13px;
-  line-height: 1.58;
   overflow-wrap: anywhere;
   text-overflow: clip;
   white-space: normal;

apps/web/src/components/MessageCenter.tsx

@@ -7,7 +7,6 @@ import {
   clearAnonymousState,
   isAmrLoggedIn,
   markAccountMessageRead,
-  markAllAccountMessagesRead,
   pullMessageCenter,
   readAnonymousMessages,
   readAnonymousReadIds,
@@ -214,20 +213,6 @@ export function MessageCenter({
     commitState(nextMessages, nextIds, { persistAnonymous: !account });
   };
 
-  const markAllRead = async () => {
-    const account = await resolveLoggedInForWrite();
-    if (account) await markAllAccountMessagesRead();
-    const readAt = new Date().toISOString();
-    const nextIds = new Set(messagesRef.current.map((message) => message.id));
-    const nextMessages = messagesRef.current.map((message) => ({ ...message, readAt: message.readAt ?? readAt }));
-    if (account) {
-      pendingReadIdsRef.current = new Set(nextIds);
-      clearAnonymousState(window.localStorage);
-    }
-    invalidateSyncResponses();
-    commitState(nextMessages, nextIds, { persistAnonymous: !account });
-  };
-
   const openLabel = unreadCount > 0 ? `${t('messageCenter.openAria')} (${t('messageCenter.unreadCount', { count: unreadCount })})` : t('messageCenter.openAria');
 
   return <div className={styles.root}>
@@ -236,7 +221,6 @@ export function MessageCenter({
     </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}><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">

apps/web/src/message-center-client.ts

@@ -99,11 +99,6 @@ export async function markAccountMessageRead(messageId: string): Promise<void> {
   if (!response.ok) throw new Error(`Mark message read failed: ${response.status}`);
 }
 
-export async function markAllAccountMessagesRead(): Promise<void> {
-  const response = await fetch(`${ACCOUNT_PROXY}/read-all`, { method: 'POST' });
-  if (!response.ok) throw new Error(`Mark all messages read failed: ${response.status}`);
-}
-
 function apiLocale(locale: string): string {
   const mapping: Record<string, string> = { en: 'en-US', 'es-ES': 'es', 'pt-BR': 'pt' };
   return mapping[locale] ?? locale;

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

@@ -120,18 +120,14 @@ describe('MessageCenter', () => {
     await waitFor(() => expect(vi.mocked(fetch).mock.calls.some(([url, init]) => String(url).includes('/release/read') && init?.method === 'POST')).toBe(true));
   });
 
-  it('shows read and unread messages in one flat list and marks all read', async () => {
+  it('shows read and unread messages in one flat list without filter or bulk actions', async () => {
     renderMessageCenter();
     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).queryByRole('button', { name: 'Mark all read' })).toBeNull();
     expect(within(dialog).getByText('OpenDesign 0.14 is available')).toBeTruthy();
     expect(within(dialog).getByText('Credits added')).toBeTruthy();
   });
@@ -396,7 +392,7 @@ describe('MessageCenter', () => {
       expect(localStorage.getItem('open-design.message-center.anonymous-read-ids.v1')).toContain('release'),
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Mark all read' }));
+    fireEvent.click(screen.getByRole('button', { name: /Security notice/ }));
     await waitFor(() =>
       expect(localStorage.getItem('open-design.message-center.anonymous-read-ids.v1')).toContain('security'),
     );