refactor(frontend): unify panel layout and purge dead CSS

- Drop surface card from guest panel — all panels now share `workspace` open layout
- Replace radio cards with a plain <select> for demo source (consistent with Strategy selector)
- Align button vocabulary: btn--ghost for demo run, btn--accent for primary auth/convert actions
- "Back to demo" demoted to btn--meta (gray housekeeping, not invitation)
- Remove ~95 lines of dead CSS: surface*, onboarding-*, radio-card/list*, fieldset/legend, form--spacious, auth-form-actions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: gildesmarais

frontend/src/components/App.tsx

@@ -144,9 +144,7 @@ export function App() {
   }
 
   return (
-    <div
-      class={`app-shell${mode !== 'result' ? ' app-shell--workspace' : ''}`}
-    >
+    <div class="app-shell app-shell--workspace">
       {authError && mode !== 'result' && (
         <section class="notice notice--error" role="alert">
           <h3>Authentication error</h3>

frontend/src/components/AppPanels.tsx

@@ -75,51 +75,40 @@ export function GuestOnboardingPanel({
   const selectedDemoUrl = demoSources.find((source) => source.id === selectedDemoId)?.url ?? demoSources[0].url;
 
   return (
-    <section class="surface surface--form">
+    <section class="workspace">
       <div class="panel-meta">
         <span />
         {mode === 'guest-demo' ? (
           <button type="button" class="btn btn--link" onClick={() => onModeChange('guest-auth')}>
             Sign in
           </button>
         ) : (
-          <button type="button" class="btn btn--link" onClick={onBackToDemo}>
-            Back to demo
+          <button type="button" class="btn btn--link btn--meta" onClick={onBackToDemo}>
+            ← Back to demo
           </button>
         )}
       </div>
 
-      <header class="surface-header onboarding-header">
-        <h2 class="onboarding-title">Convert website to RSS</h2>
-        <p class="onboarding-subtitle">
-          {mode === 'guest-demo'
-            ? 'Try a demo source instantly. Sign in to convert your own URLs.'
-            : 'Sign in to convert any website URL.'}
-        </p>
-      </header>
-
       {mode === 'guest-demo' ? (
-        <div class="form form--spacious form--tight">
-          <fieldset class="fieldset">
-            <legend class="legend">Demo source</legend>
-            <div class="radio-list radio-list--compact">
+        <div class="form">
+          <h2 class="workspace-title">Convert website to RSS</h2>
+          <p class="field-help">Try a demo source instantly. Sign in to convert your own URLs.</p>
+
+          <div class="field">
+            <label for="demo-source" class="label">Demo source</label>
+            <select
+              id="demo-source"
+              class="input"
+              value={selectedDemoId}
+              onChange={(e) => setSelectedDemoId((e.target as HTMLSelectElement).value)}
+            >
               {demoSources.map((source) => (
-                <label key={source.id} class={`radio-card radio-card--compact ${selectedDemoId === source.id ? 'is-selected' : ''}`}>
-                  <input
-                    type="radio"
-                    name="demo-source"
-                    class="radio-card__input"
-                    checked={selectedDemoId === source.id}
-                    onChange={() => setSelectedDemoId(source.id)}
-                  />
-                  <span class="radio-card__content">
-                    <span class="radio-card__title">{source.label}</span>
-                    <span class="radio-card__hint">{source.hint}</span>
-                  </span>
-                </label>
+                <option key={source.id} value={source.id}>
+                  {source.label} — {source.hint}
+                </option>
               ))}
-            </div>
-          </fieldset>
+            </select>
+          </div>
 
           {demoError && (
             <div class="notice notice--error notice--compact" role="alert">
@@ -129,13 +118,15 @@ export function GuestOnboardingPanel({
           )}
 
           <div class="form-actions">
-            <button type="button" class="btn btn--accent" onClick={() => onConvert(selectedDemoUrl)}>
+            <button type="button" class="btn btn--ghost" onClick={() => onConvert(selectedDemoUrl)}>
               Run demo
             </button>
           </div>
         </div>
       ) : (
-        <form id="auth-section" class="form form--spacious form--tight" onSubmit={onAuthSubmit}>
+        <form id="auth-section" class="form" onSubmit={onAuthSubmit}>
+          <h2 class="workspace-title">Convert website to RSS</h2>
+
           {authFieldErrors.form && (
             <div class="notice notice--error notice--compact" role="alert">
               <p>{authFieldErrors.form}</p>
@@ -182,15 +173,15 @@ export function GuestOnboardingPanel({
             </div>
           </div>
 
-          <p class="surface-header__hint">
+          <p class="field-help">
             Need a token? Ask your html2rss-web admin or read the{' '}
             <a href="https://html2rss.github.io/" target="_blank" rel="noopener noreferrer">
               official docs
             </a>
             .
           </p>
 
-          <div class="form-actions auth-form-actions">
+          <div class="form-actions">
             <button type="submit" class="btn btn--accent">
               Sign in
             </button>
@@ -233,15 +224,16 @@ export function MemberConvertPanel({
   const selectedStrategy = strategies.find((strategy) => strategy.id === feedFormData.strategy);
 
   return (
-    <section class="surface surface--form surface--minimal">
+    <section class="workspace">
       <div class="panel-meta">
         <span class="panel-meta__primary">{username}</span>
         <button type="button" onClick={onLogout} class="btn btn--link btn--meta">
           Log out
         </button>
       </div>
 
-      <form id="feed-section" class="form form--spacious form--tight form--member" onSubmit={onFeedSubmit}>
+      <form id="feed-section" class="form" onSubmit={onFeedSubmit}>
+        <h2 class="workspace-title">Convert a website</h2>
         <div class="field">
           <label for="url" class="label" data-required>URL</label>
           <div class="field field--inline">
@@ -257,7 +249,7 @@ export function MemberConvertPanel({
               value={feedFormData.url}
               onInput={(e) => onFeedFieldChange('url', (e.target as HTMLInputElement).value)}
             />
-            <button type="submit" class="btn btn--quiet-accent" disabled={isConverting}>
+            <button type="submit" class="btn btn--accent" disabled={isConverting}>
               {isConverting ? 'Converting...' : 'Convert'}
             </button>
           </div>

frontend/src/components/ResultDisplay.module.css

@@ -1,16 +1,17 @@
 .result {
   display: grid;
-  gap: 0.75rem;
+  gap: 1rem;
 }
 
 .hero {
   display: grid;
-  gap: 0.25rem;
+  gap: 0.2rem;
 }
 
 .heroTitle {
   margin: 0;
-  font-size: 1.35rem;
+  font-size: 1.5rem;
+  font-weight: 700;
   line-height: 1.2;
 }
 
@@ -26,15 +27,9 @@
 }
 
 .heroActions {
-  display: grid;
+  display: flex;
   gap: 0.75rem;
-}
-
-@media (min-width: 640px) {
-  .heroActions {
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-  }
+  flex-wrap: wrap;
 }
 
 .preview {
@@ -80,6 +75,5 @@
 }
 
 .footer {
-  display: flex;
-  justify-content: flex-start;
+  justify-self: start;
 }

frontend/src/components/ResultDisplay.tsx

@@ -1,17 +1,11 @@
 import { useState, useEffect } from 'preact/hooks';
+import { renderFeedByToken } from '../api/generated';
+import { apiClient } from '../api/client';
+import type { FeedRecord } from '../api/contracts';
 import styles from './ResultDisplay.module.css';
 
-interface ConversionResult {
-  id: string;
-  name: string;
-  url: string;
-  username: string;
-  strategy: string;
-  public_url: string;
-}
-
 interface ResultDisplayProps {
-  result: ConversionResult;
+  result: FeedRecord;
   onClose: () => void;
   isAuthenticated?: boolean;
   username?: string;
@@ -49,8 +43,18 @@ export function ResultDisplay({
 
     const loadPreview = async () => {
       try {
-        const response = await fetch(fullUrl, { signal: controller.signal });
-        const content = await response.text();
+        const token = extractFeedToken(result.public_url);
+        if (!token) throw new Error('Missing feed token');
+
+        const content = await renderFeedByToken({
+          client: apiClient,
+          path: { token },
+          parseAs: 'text',
+          signal: controller.signal,
+          responseStyle: 'data',
+        });
+        if (typeof content !== 'string') throw new Error('Invalid feed preview response');
+
         const xmlDoc = new DOMParser().parseFromString(content, 'text/xml');
 
         const parsedTitle =
@@ -80,7 +84,7 @@ export function ResultDisplay({
     return () => {
       controller.abort();
     };
-  }, [fullUrl]);
+  }, [result.public_url]);
 
   const copyToClipboard = async (text: string) => {
     try {
@@ -95,16 +99,19 @@ export function ResultDisplay({
   const shouldShowPreview = isLoadingPreview || Boolean(feedTitle) || feedItems.length > 0;
 
   return (
-    <section id="result-display" class={`surface ${styles.result}`} aria-live="polite">
+    <section id="result-display" class={styles.result} aria-live="polite">
       <div class="panel-meta">
         <span class="panel-meta__primary">{isAuthenticated ? (username ?? '') : ''}</span>
-        {isAuthenticated && onLogout ? (
-          <button type="button" class="btn btn--link btn--meta" onClick={onLogout}>
-            Log out
+        <span class="panel-meta__actions">
+          <button type="button" class="btn btn--link btn--meta" onClick={onClose}>
+            ← Convert another
           </button>
-        ) : (
-          <span />
-        )}
+          {isAuthenticated && onLogout && (
+            <button type="button" class="btn btn--link btn--meta" onClick={onLogout}>
+              Log out
+            </button>
+          )}
+        </span>
       </div>
 
       <header class={styles.hero}>
@@ -161,10 +168,21 @@ export function ResultDisplay({
       )}
 
       <div class={styles.footer}>
-        <button type="button" class="btn btn--accent" onClick={onClose}>
-          Convert another website
+        <button type="button" class="btn btn--link btn--meta" onClick={onClose}>
+          ← Convert another website
         </button>
       </div>
     </section>
   );
 }
+
+const extractFeedToken = (publicUrl: string): string | null => {
+  const path = publicUrl.startsWith('http')
+    ? new URL(publicUrl).pathname
+    : publicUrl;
+  const segments = path.split('/').filter(Boolean);
+  const feedIndex = segments.findIndex((segment) => segment === 'feeds');
+  if (feedIndex < 0) return null;
+
+  return segments[feedIndex + 1] ?? null;
+};