Align result screen with simplified create flow

gildesmarais · gildesmarais · commit 4a8c1d1de00a · 2026-03-14T23:31:21.000+01:00
diff --git a/frontend/src/__tests__/App.test.tsx b/frontend/src/__tests__/App.test.tsx
@@ -130,7 +130,6 @@ describe('App', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Feed URL ready')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Create another feed' })).toBeInTheDocument();
     expect(screen.queryByRole('link', { name: 'Bookmarklet' })).not.toBeInTheDocument();
     expect(screen.getByText('Example Feed')).toBeInTheDocument();
diff --git a/frontend/src/__tests__/ResultDisplay.test.tsx b/frontend/src/__tests__/ResultDisplay.test.tsx
@@ -16,15 +16,22 @@ 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>`,
+    } as Response);
   });
 
-  it('renders the simplified result actions', () => {
+  it('renders the simplified result actions and preview', async () => {
     render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
 
-    expect(screen.getByText('Feed URL ready')).toBeInTheDocument();
     expect(screen.getByText('Test Feed')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Copy feed URL' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Item One')).toBeInTheDocument();
+      expect(screen.getByText('Item Three')).toBeInTheDocument();
+    });
   });
 
   it('calls onCreateAnother when the reset button is clicked', () => {
diff --git a/frontend/src/components/AppPanels.tsx b/frontend/src/components/AppPanels.tsx
@@ -1,5 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { Bookmarklet } from './Bookmarklet';
+import { DominantField } from './DominantField';
 
 export interface Strategy {
   id: string;
@@ -64,6 +65,11 @@ export function CreateFeedPanel({
 }: CreateFeedPanelProps) {
   const selectedStrategy = strategies.find((strategy) => strategy.id === feedFormData.strategy);
   const urlInputRef = useRef<HTMLInputElement | null>(null);
+  const strategyOptionLabel = (strategy: Strategy) => {
+    if (strategy.id === 'ssrf_filter') return 'Standard rendering';
+    if (strategy.id === 'browserless') return 'JavaScript pages';
+    return strategy.display_name;
+  };
 
   useLayoutEffect(() => {
     if (!urlInputRef.current || typeof window === 'undefined') return;
@@ -82,25 +88,22 @@ export function CreateFeedPanel({
   return (
     <form class="form-shell form-shell--minimal" onSubmit={onFeedSubmit}>
       <div class="field-stack field-stack--dense">
-        <label class="field-block field-block--primary field-block--hero" htmlFor="url">
-          <span class="field-label field-label--ghost">Page URL</span>
-          <input
-            type="url"
-            id="url"
-            name="url"
-            class="input input--mono input--hero"
-            placeholder="https://example.com/article"
-            autocomplete="url"
-            autoFocus
-            ref={urlInputRef}
-            value={feedFormData.url}
-            onInput={(event) => onFeedFieldChange('url', (event.target as HTMLInputElement).value)}
-          />
-          <span class="field-error">{feedFieldErrors.url}</span>
-        </label>
+        <DominantField
+          id="url"
+          label="Page URL"
+          type="url"
+          value={feedFormData.url}
+          placeholder="https://example.com/article"
+          autoFocus
+          inputRef={urlInputRef}
+          actionLabel={isConverting ? 'Generating feed URL' : 'Generate feed URL'}
+          actionText={isConverting ? '...' : '>'}
+          disabled={isConverting || !feedCreationEnabled}
+          error={feedFieldErrors.url}
+          onInput={(event) => onFeedFieldChange('url', (event.target as HTMLInputElement).value)}
+        />
 
         <label class="field-block field-block--select field-block--subtle" htmlFor="strategy">
-          <span class="field-label field-label--inline">Rendering</span>
           <select
             id="strategy"
             name="strategy"
@@ -114,7 +117,7 @@ export function CreateFeedPanel({
             ) : (
               strategies.map((strategy) => (
                 <option key={strategy.id} value={strategy.id}>
-                  {strategy.display_name}
+                  {strategyOptionLabel(strategy)}
                 </option>
               ))
             )}
@@ -125,13 +128,6 @@ export function CreateFeedPanel({
           <p class="field-help">{strategyHint(selectedStrategy)}</p>
         )}
 
-        <button
-          type="submit"
-          class="btn btn--primary btn--hero"
-          disabled={isConverting || !feedCreationEnabled}
-        >
-          {isConverting ? 'Generating…' : 'Generate feed URL'}
-        </button>
         {!feedCreationEnabled && (
           <p class="field-help field-help--alert">Custom feed generation is disabled for this instance.</p>
         )}
diff --git a/frontend/src/components/DominantField.tsx b/frontend/src/components/DominantField.tsx
@@ -0,0 +1,67 @@
+import type { JSX, Ref } from 'preact';
+
+interface DominantFieldProps {
+  id: string;
+  label: string;
+  value: string;
+  placeholder?: string;
+  type?: string;
+  readOnly?: boolean;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  actionLabel: string;
+  actionText: string;
+  onAction?: () => void;
+  onInput?: JSX.GenericEventHandler<HTMLInputElement>;
+  inputRef?: Ref<HTMLInputElement>;
+  error?: string;
+}
+
+export function DominantField({
+  id,
+  label,
+  value,
+  placeholder,
+  type = 'text',
+  readOnly = false,
+  autoFocus = false,
+  disabled = false,
+  actionLabel,
+  actionText,
+  onAction,
+  onInput,
+  inputRef,
+  error,
+}: DominantFieldProps) {
+  return (
+    <div class="dominant-field">
+      <label class="field-block field-block--primary field-block--hero" htmlFor={id}>
+        <span class="field-label field-label--ghost">{label}</span>
+        <input
+          id={id}
+          name={id}
+          type={type}
+          class="input input--mono input--hero"
+          placeholder={placeholder}
+          autocomplete={type === 'url' ? 'url' : 'off'}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={value}
+          readOnly={readOnly}
+          disabled={disabled}
+          onInput={onInput}
+        />
+        <span class="field-error">{error ?? ''}</span>
+      </label>
+      <button
+        type={onAction ? 'button' : 'submit'}
+        class={`dominant-field__action${actionText.length > 1 ? ' dominant-field__action--text' : ''}`}
+        disabled={disabled}
+        aria-label={actionLabel}
+        onClick={onAction}
+      >
+        {actionText}
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ResultDisplay.tsx b/frontend/src/components/ResultDisplay.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { FeedRecord } from '../api/contracts';
+import { DominantField } from './DominantField';
 
 interface ResultDisplayProps {
   result: FeedRecord;
@@ -8,6 +9,7 @@ interface ResultDisplayProps {
 
 export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
   const [copyNotice, setCopyNotice] = useState('');
+  const [previewItems, setPreviewItems] = useState<string[]>([]);
   const copyResetRef = useRef<number | undefined>(undefined);
 
   const fullUrl = result.public_url.startsWith('http')
@@ -20,6 +22,44 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
     };
   }, []);
 
+  useEffect(() => {
+    let isCancelled = false;
+
+    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);
+
+        if (!isCancelled) setPreviewItems(itemTitles);
+      } catch {
+        if (!isCancelled) setPreviewItems([]);
+      }
+    };
+
+    void loadPreview();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [fullUrl]);
+
   const copyToClipboard = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
@@ -34,40 +74,44 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
   return (
     <section class="result-shell" aria-live="polite">
       <div class="result-copy">
-        <p class="result-title">Feed URL ready</p>
         <p class="result-meta">{result.name}</p>
       </div>
 
-      <label class="field-block field-block--primary field-block--hero result-url" htmlFor="feed-url">
-        <span class="field-label field-label--ghost">Feed URL</span>
-        <input
-          id="feed-url"
-          name="feed-url"
-          type="text"
-          value={fullUrl}
-          readOnly
-          class="input input--mono input--hero"
-        />
-      </label>
+      <DominantField
+        id="feed-url"
+        label="Feed URL"
+        value={fullUrl}
+        readOnly
+        actionLabel="Copy feed URL"
+        actionText="Copy"
+        onAction={() => void copyToClipboard(fullUrl)}
+      />
 
-      <div class="result-actions">
-        <button type="button" class="btn btn--primary btn--hero" onClick={() => copyToClipboard(fullUrl)}>
-          Copy feed URL
-        </button>
+      {previewItems.length > 0 && (
+        <section class="result-preview" aria-label="Feed preview">
+          <p class="result-preview__label">Latest items</p>
+          <ul class="result-preview__list">
+            {previewItems.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </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>
         </div>
       )}
-
-      <button type="button" class="btn btn--quiet btn--linkish" onClick={onCreateAnother}>
-        Create another feed
-      </button>
     </section>
   );
 }
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
