Simplify feed creation page layout

Author: gildesmarais

frontend/src/__tests__/App.test.tsx

@@ -83,24 +83,27 @@ describe('App', () => {
     });
   });
 
-  it('renders the streamlined hero and create section', () => {
+  it('renders the radical-simple create flow', () => {
     render(<App />);
 
-    expect(screen.getByText('Create a feed URL.')).toBeInTheDocument();
-    expect(screen.getByLabelText('Source URL')).toBeInTheDocument();
-    expect(screen.getByText('Run your own instance')).toBeInTheDocument();
+    expect(screen.getByLabelText('html2rss')).toBeInTheDocument();
+    expect(screen.getByLabelText('Page URL')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'More' })).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Bookmarklet' })).not.toBeInTheDocument();
   });
 
-  it('autofocuses the source url field', () => {
+  it('autofocuses the source url field', async () => {
     render(<App />);
 
-    expect(document.activeElement).toBe(screen.getByLabelText('Source URL'));
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByLabelText('Page URL'));
+    });
   });
 
   it('shows inline token prompt when submitting without a token', () => {
     render(<App />);
 
-    fireEvent.input(screen.getByLabelText('Source URL'), {
+    fireEvent.input(screen.getByLabelText('Page URL'), {
       target: { value: 'https://example.com/articles' },
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
@@ -110,11 +113,6 @@ describe('App', () => {
   });
 
   it('renders the result panel when a feed is available', async () => {
-    vi.spyOn(window, 'fetch').mockResolvedValue({
-      text: async () =>
-        `<?xml version="1.0"?><rss><channel><title>Example Feed</title><item><title>Item One</title></item></channel></rss>`,
-    } as Response);
-
     mockUseFeedConversion.mockReturnValue({
       isConverting: false,
       result: {
@@ -132,13 +130,10 @@ describe('App', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Result')).toBeInTheDocument();
+    expect(screen.getByText('Feed URL ready')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Create another feed' })).toBeInTheDocument();
-    expect(screen.queryByText('Run your own instance')).not.toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByText('Example Feed')).toBeInTheDocument();
-    });
+    expect(screen.queryByRole('link', { name: 'Bookmarklet' })).not.toBeInTheDocument();
+    expect(screen.getByText('Example Feed')).toBeInTheDocument();
   });
 
   it('surfaces conversion errors to the user', () => {
@@ -168,8 +163,7 @@ describe('App', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Utilities')).toBeInTheDocument();
-    expect(screen.queryByText('Run your own instance')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'More' }));
     fireEvent.click(screen.getByRole('button', { name: 'Clear saved token' }));
 
     expect(mockClearToken).toHaveBeenCalled();
@@ -178,7 +172,7 @@ describe('App', () => {
   it('saves access token and resumes feed creation from the inline prompt', async () => {
     render(<App />);
 
-    fireEvent.input(screen.getByLabelText('Source URL'), {
+    fireEvent.input(screen.getByLabelText('Page URL'), {
       target: { value: 'https://example.com/articles' },
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
@@ -199,7 +193,7 @@ describe('App', () => {
   it('submits the token prompt with Enter', async () => {
     render(<App />);
 
-    fireEvent.input(screen.getByLabelText('Source URL'), {
+    fireEvent.input(screen.getByLabelText('Page URL'), {
       target: { value: 'https://example.com/articles' },
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
@@ -217,7 +211,8 @@ describe('App', () => {
     window.history.replaceState({}, '', 'http://localhost:3000/frontend/index.html');
     render(<App />);
 
-    const bookmarklet = screen.getByRole('link', { name: 'Convert page to feed' });
+    fireEvent.click(screen.getByRole('button', { name: 'More' }));
+    const bookmarklet = screen.getByRole('link', { name: 'Bookmarklet' });
     expect(bookmarklet.getAttribute('href')).toContain('/frontend/index.html?url=');
     expect(bookmarklet.getAttribute('href')).not.toContain('%27+encodeURIComponent');
   });

frontend/src/__tests__/ResultDisplay.test.tsx

@@ -16,26 +16,15 @@ describe('ResultDisplay', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.spyOn(window, 'fetch').mockResolvedValue({
-      text: async () =>
-        `<?xml version="1.0"?><rss><channel><title>Example Feed</title><item><title>Item One</title></item></channel></rss>`,
-    } as Response);
   });
 
-  it('renders utility actions and preview state', async () => {
+  it('renders the simplified result actions', () => {
     render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
 
-    expect(screen.getByText('Result')).toBeInTheDocument();
+    expect(screen.getByText('Feed URL ready')).toBeInTheDocument();
     expect(screen.getByText('Test Feed')).toBeInTheDocument();
-    expect(
-      screen.getByText('Copy the feed URL, then drop it into the reader or workflow you use.')
-    ).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();
-    });
   });
 
   it('calls onCreateAnother when the reset button is clicked', () => {

frontend/src/components/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { ResultDisplay } from './ResultDisplay';
-import { CreateFeedPanel, InstanceInfo, type Strategy } from './AppPanels';
+import { CreateFeedPanel, UtilityStrip, type Strategy } from './AppPanels';
 import { useAccessToken } from '../hooks/useAccessToken';
 import { useApiMetadata } from '../hooks/useApiMetadata';
 import { useFeedConversion } from '../hooks/useFeedConversion';
@@ -17,10 +17,7 @@ function BrandLockup() {
         <span />
         <span />
       </span>
-      <div class="brand-lockup__text">
-        <strong>html2rss</strong>
-        <span>html to feed</span>
-      </div>
+      <strong class="brand-lockup__wordmark">html2rss</strong>
     </div>
   );
 }
@@ -141,7 +138,7 @@ export function App() {
 
   if (metadataLoading || tokenLoading) {
     return (
-      <section class="workspace-shell workspace-shell--loading">
+      <section class="workspace-shell workspace-shell--centered workspace-shell--loading">
         <BrandLockup />
         <div class="status-card" aria-live="polite">
           <div class="status-card__spinner" aria-hidden="true" />
@@ -155,16 +152,9 @@ export function App() {
   }
 
   return (
-    <section class="workspace-shell">
-      <header class={`workspace-frame${result ? ' workspace-frame--compact' : ''}`}>
-        <div class="workspace-frame__masthead">
-          <BrandLockup />
-        </div>
-        {!result && (
-          <div class="workspace-frame__titleblock">
-            <h1>Create a feed URL.</h1>
-          </div>
-        )}
+    <section class="workspace-shell workspace-shell--centered">
+      <header class="workspace-hero">
+        <BrandLockup />
       </header>
 
       {(metadataError || tokenStateError) && (
@@ -177,7 +167,7 @@ export function App() {
       {result ? (
         <ResultDisplay result={result} onCreateAnother={handleCreateAnother} />
       ) : (
-        <div class="workspace-grid">
+        <>
           <CreateFeedPanel
             focusComposerKey={focusCreateComposerKey}
             feedFormData={feedFormData}
@@ -206,15 +196,14 @@ export function App() {
             }}
             strategyHint={strategyHint}
           />
-
-          <InstanceInfo
+          <UtilityStrip
             hasAccessToken={hasToken}
             onClearToken={() => {
               clearToken();
               setShowTokenPrompt(false);
             }}
           />
-        </div>
+        </>
       )}
     </section>
   );