Polish feed result presentation

Author: gildesmarais

frontend/src/__tests__/ResultDisplay.test.tsx

@@ -21,8 +21,8 @@ describe('ResultDisplay', () => {
       json: async () => ({
         items: [
           { title: 'Item One' },
+          { content_text: '56 points by canpan 1 hour ago | hide | 18 comments' },
           { content_text: '2. Item Two ( example.com )' },
-          { title: 'Item Three' },
         ],
       }),
     } as Response);
@@ -36,7 +36,8 @@ describe('ResultDisplay', () => {
     expect(screen.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();
     await waitFor(() => {
       expect(screen.getByText('Item One')).toBeInTheDocument();
-      expect(screen.getByText('Item Three')).toBeInTheDocument();
+      expect(screen.getByText(/points by canpan/i)).toBeInTheDocument();
+      expect(screen.getByText('Item Two')).toBeInTheDocument();
     });
     expect(window.fetch).toHaveBeenCalledWith('https://example.com/feed.xml', {
       headers: { Accept: 'application/feed+json' },

frontend/src/components/ResultDisplay.tsx

@@ -99,7 +99,7 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
 
       {previewItems.length > 0 && (
         <section class="result-preview" aria-label="Feed preview">
-          <p class="result-preview__label">Latest items</p>
+          <p class="result-preview__label">Feed preview</p>
           <ul class="result-preview__list">
             {previewItems.map((item) => (
               <li key={item}>{item}</li>
@@ -120,11 +120,19 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
 function normalizePreviewText(value?: string): string | null {
   if (!value) return null;
 
-  const normalized = value
+  const normalized = decodeHtmlEntities(value)
     .replace(/\s+/g, ' ')
     .replace(/^\d+\.\s+/, '')
     .replace(/\s+\([^)]*\)\s*$/, '')
     .trim();
 
   return normalized || null;
 }
+
+function decodeHtmlEntities(value: string): string {
+  if (typeof document === 'undefined') return value;
+
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = value;
+  return textarea.value;
+}

frontend/src/styles/main.css

@@ -582,24 +582,25 @@ a:focus-visible {
 }
 
 .result-meta {
-  max-width: 36rem;
-  font-size: clamp(1.15rem, 2vw, 1.45rem);
-  line-height: 1.2;
-  color: var(--text-body);
+  max-width: 32rem;
+  font-size: clamp(0.98rem, 1.5vw, 1.16rem);
+  line-height: 1.18;
+  color: var(--text-strong);
 }
 
 .result-preview {
   width: min(100%, 40rem);
   margin: 0 auto;
   display: grid;
-  gap: var(--space-2);
+  gap: var(--space-3);
   justify-items: start;
-  padding-top: var(--space-1);
+  padding-top: var(--space-3);
+  border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);
 }
 
 .result-preview__label {
   margin: 0;
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, 0.72);
   font-size: var(--font-size-00);
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -616,10 +617,10 @@ a:focus-visible {
 
 .result-preview__list li {
   color: var(--text-body);
-  max-width: 32rem;
+  max-width: 34rem;
   font-family: var(--font-family-display);
-  font-size: clamp(1.08rem, 1.8vw, 1.42rem);
-  line-height: 1.24;
+  font-size: clamp(1rem, 1.65vw, 1.28rem);
+  line-height: 1.2;
   text-align: left;
 }
 
@@ -628,12 +629,13 @@ a:focus-visible {
   margin: 0 auto;
   justify-items: start;
   justify-content: start;
-  gap: var(--space-5);
+  gap: var(--space-4);
+  margin-top: calc(var(--space-2) * -1);
 }
 
 .btn--linkish {
-  color: var(--text-body);
-  font-weight: 600;
+  color: rgba(255, 255, 255, 0.78);
+  font-weight: 560;
 }
 
 .status-card {