Refine feed preview and utility surfaces

Author: gildesmarais

frontend/src/__tests__/ResultDisplay.test.tsx

@@ -17,8 +17,14 @@ describe('ResultDisplay', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.spyOn(window, 'fetch').mockResolvedValue({
-      text: async () =>
-        `<?xml version="1.0"?><rss><channel><item><description>1. Item One ( example.com )</description></item><item><description>2. Item Two ( example.com )</description></item><item><description>3. Item Three ( example.com )</description></item></channel></rss>`,
+      ok: true,
+      json: async () => ({
+        items: [
+          { title: 'Item One' },
+          { content_text: '2. Item Two ( example.com )' },
+          { title: 'Item Three' },
+        ],
+      }),
     } as Response);
   });
 
@@ -32,6 +38,9 @@ describe('ResultDisplay', () => {
       expect(screen.getByText('Item One')).toBeInTheDocument();
       expect(screen.getByText('Item Three')).toBeInTheDocument();
     });
+    expect(window.fetch).toHaveBeenCalledWith('https://example.com/feed.xml', {
+      headers: { Accept: 'application/feed+json' },
+    });
   });
 
   it('calls onCreateAnother when the reset button is clicked', () => {

frontend/src/components/AppPanels.tsx

@@ -131,7 +131,6 @@ export function CreateFeedPanel({
         {!feedCreationEnabled && (
           <p class="field-help field-help--alert">Custom feed generation is disabled for this instance.</p>
         )}
-        {accessTokenRequired && !hasAccessToken && <p class="field-help">Token requested only if needed.</p>}
       </div>
 
       {showTokenPrompt && (
@@ -217,6 +216,14 @@ export function UtilityStrip({ hasAccessToken, onClearToken }: UtilityStripProps
           >
             Getting started
           </a>
+          <a
+            href="https://github.com/html2rss/html2rss-web"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="utility-link"
+          >
+            Source code
+          </a>
           {hasAccessToken && (
             <button type="button" class="utility-button" onClick={onClearToken}>
               Clear saved token

frontend/src/components/DominantField.tsx

@@ -11,6 +11,7 @@ interface DominantFieldProps {
   disabled?: boolean;
   actionLabel: string;
   actionText: string;
+  actionVariant?: 'default' | 'soft';
   onAction?: () => void;
   onInput?: JSX.GenericEventHandler<HTMLInputElement>;
   inputRef?: Ref<HTMLInputElement>;
@@ -28,6 +29,7 @@ export function DominantField({
   disabled = false,
   actionLabel,
   actionText,
+  actionVariant = 'default',
   onAction,
   onInput,
   inputRef,
@@ -55,7 +57,9 @@ export function DominantField({
       </label>
       <button
         type={onAction ? 'button' : 'submit'}
-        class={`dominant-field__action${actionText.length > 1 ? ' dominant-field__action--text' : ''}`}
+        class={`dominant-field__action${actionText.length > 1 ? ' dominant-field__action--text' : ''}${
+          actionVariant === 'soft' ? ' dominant-field__action--soft' : ''
+        }`}
         disabled={disabled}
         aria-label={actionLabel}
         onClick={onAction}

frontend/src/components/Footer.tsx

@@ -2,6 +2,15 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import type { FeedRecord } from '../api/contracts';
 import { DominantField } from './DominantField';
 
+interface JsonFeedItem {
+  title?: string;
+  content_text?: string;
+}
+
+interface JsonFeedResponse {
+  items?: JsonFeedItem[];
+}
+
 interface ResultDisplayProps {
   result: FeedRecord;
   onCreateAnother: () => void;
@@ -27,25 +36,16 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
 
     const loadPreview = async () => {
       try {
-        const response = await window.fetch(fullUrl);
-        const xml = await response.text();
-        const document = new DOMParser().parseFromString(xml, 'application/xml');
-        const explicitTitles = Array.from(document.querySelectorAll('item > title, entry > title')).map(
-          (node) => node.textContent?.trim()
-        );
-        const derivedDescriptions = Array.from(document.querySelectorAll('item > description'))
-          .map((node) => node.textContent?.trim())
-          .filter((description): description is string => Boolean(description))
-          .filter((description) => /^\d+\.\s+/.test(description))
-          .map((description) =>
-            description
-              .replace(/^\d+\.\s+/, '')
-              .replace(/\s+\([^)]*\)\s*$/, '')
-              .trim()
-          );
-        const itemTitles = [...explicitTitles, ...derivedDescriptions]
-          .filter((title): title is string => Boolean(title))
-          .slice(0, 3);
+        const response = await window.fetch(fullUrl, {
+          headers: { Accept: 'application/feed+json' },
+        });
+        if (!response.ok) throw new Error('Preview request failed');
+        const payload = (await response.json()) as JsonFeedResponse;
+        const itemTitles =
+          payload.items
+            ?.map((item) => normalizePreviewText(item.title || item.content_text))
+            .filter((title): title is string => Boolean(title))
+            .slice(0, 3) || [];
 
         if (!isCancelled) setPreviewItems(itemTitles);
       } catch {
@@ -84,9 +84,19 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
         readOnly
         actionLabel="Copy feed URL"
         actionText="Copy"
+        actionVariant="soft"
         onAction={() => void copyToClipboard(fullUrl)}
       />
 
+      <div class="result-actions result-actions--quiet">
+        <a href={fullUrl} class="btn btn--ghost btn--linkish" target="_blank" rel="noopener noreferrer">
+          Open feed
+        </a>
+        <button type="button" class="btn btn--quiet btn--linkish" onClick={onCreateAnother}>
+          Create another feed
+        </button>
+      </div>
+
       {previewItems.length > 0 && (
         <section class="result-preview" aria-label="Feed preview">
           <p class="result-preview__label">Latest items</p>
@@ -98,15 +108,6 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
         </section>
       )}
 
-      <div class="result-actions result-actions--quiet">
-        <a href={fullUrl} class="btn btn--ghost btn--linkish" target="_blank" rel="noopener noreferrer">
-          Open feed
-        </a>
-        <button type="button" class="btn btn--quiet btn--linkish" onClick={onCreateAnother}>
-          Create another feed
-        </button>
-      </div>
-
       {copyNotice && (
         <div class="notice notice--success" role="status">
           <p>{copyNotice}</p>
@@ -115,3 +116,15 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
     </section>
   );
 }
+
+function normalizePreviewText(value?: string): string | null {
+  if (!value) return null;
+
+  const normalized = value
+    .replace(/\s+/g, ' ')
+    .replace(/^\d+\.\s+/, '')
+    .replace(/\s+\([^)]*\)\s*$/, '')
+    .trim();
+
+  return normalized || null;
+}

frontend/src/components/ResultDisplay.tsx

@@ -1,6 +1,5 @@
 import { render } from 'preact';
 import { App } from './components/App';
-import { Footer } from './components/Footer';
 import './styles/main.css';
 
 function Root() {
@@ -9,7 +8,6 @@ function Root() {
       <main class="page-main">
         <App />
       </main>
-      <Footer />
     </div>
   );
 }

frontend/src/main.tsx

@@ -198,6 +198,10 @@ textarea {
   gap: var(--space-4);
 }
 
+.result-shell {
+  gap: var(--space-3);
+}
+
 .dominant-field {
   position: relative;
   width: 100%;
@@ -346,11 +350,21 @@ a:focus-visible {
   text-transform: uppercase;
 }
 
+.dominant-field__action--soft {
+  background: rgba(255, 255, 255, 0.045);
+  color: var(--text-muted);
+}
+
 .dominant-field__action:hover:not(:disabled) {
   transform: translateX(0.04rem);
   background: rgba(255, 255, 255, 0.11);
 }
 
+.dominant-field__action--soft:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-strong);
+}
+
 .dominant-field__action:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -484,20 +498,26 @@ a:focus-visible {
 }
 
 .result-copy {
-  text-align: center;
+  width: min(100%, 40rem);
+  margin: 0 auto;
+  justify-items: start;
+  text-align: left;
 }
 
 .result-meta {
-  max-width: 32rem;
-  font-size: var(--font-size-1);
+  max-width: 36rem;
+  font-size: clamp(1.15rem, 2vw, 1.45rem);
+  line-height: 1.2;
+  color: var(--text-body);
 }
 
 .result-preview {
-  width: min(100%, 34rem);
+  width: min(100%, 40rem);
   margin: 0 auto;
   display: grid;
   gap: var(--space-2);
-  justify-items: center;
+  justify-items: start;
+  padding-top: var(--space-1);
 }
 
 .result-preview__label {
@@ -514,16 +534,29 @@ a:focus-visible {
   width: 100%;
   list-style: none;
   display: grid;
-  gap: 0.45rem;
+  gap: 0.6rem;
 }
 
 .result-preview__list li {
   color: var(--text-body);
-  text-align: center;
+  max-width: 32rem;
+  font-family: var(--font-family-display);
+  font-size: clamp(1.08rem, 1.8vw, 1.42rem);
+  line-height: 1.24;
+  text-align: left;
 }
 
 .result-actions--quiet {
-  gap: var(--space-4);
+  width: min(100%, 40rem);
+  margin: 0 auto;
+  justify-items: start;
+  justify-content: start;
+  gap: var(--space-5);
+}
+
+.btn--linkish {
+  color: var(--text-body);
+  font-weight: 600;
 }
 
 .status-card {
@@ -579,19 +612,6 @@ a:focus-visible {
   text-transform: uppercase;
 }
 
-.app-footer {
-  padding: 0 var(--space-4) var(--space-4);
-}
-
-.app-footer__inner {
-  width: min(100%, var(--page-max-width));
-  margin: 0 auto;
-  padding-top: var(--space-3);
-  border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);
-  color: var(--text-muted);
-  font-size: var(--font-size-00);
-}
-
 @media (min-width: 48rem) {
   .page-main {
     padding-top: clamp(1rem, 6vh, 4rem);
@@ -622,6 +642,17 @@ a:focus-visible {
     padding-right: 4.2rem;
   }
 
+  .result-copy,
+  .result-preview,
+  .result-actions--quiet {
+    width: 100%;
+  }
+
+  .result-actions--quiet {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
+
   .field-block--select {
     gap: 0;
   }