Refine create flow support surfaces

Author: gildesmarais

frontend/src/__tests__/App.test.tsx

@@ -99,7 +99,7 @@ describe('App', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
-    expect(screen.getByText('Unlock custom feed creation')).toBeInTheDocument();
+    expect(screen.getByText('Save one token in this browser session to continue.')).toBeInTheDocument();
     expect(mockConvertFeed).not.toHaveBeenCalled();
   });
 
@@ -176,7 +176,7 @@ describe('App', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
     const accessTokenInput = document.getElementById('access-token') as HTMLInputElement;
     fireEvent.input(accessTokenInput, { target: { value: 'token-123' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Save token' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
 
     await waitFor(() => {
       expect(mockSaveToken).toHaveBeenCalledWith('token-123');

frontend/src/components/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { ResultDisplay } from './ResultDisplay';
-import { CreateFeedPanel, InstanceInfo, QuickToolsPanel, type Strategy } from './AppPanels';
+import { CreateFeedPanel, InstanceInfo, type Strategy } from './AppPanels';
 import { useAccessToken } from '../hooks/useAccessToken';
 import { useApiMetadata } from '../hooks/useApiMetadata';
 import { useFeedConversion } from '../hooks/useFeedConversion';
@@ -167,42 +167,37 @@ export function App() {
       {result ? (
         <ResultDisplay result={result} onCreateAnother={handleCreateAnother} />
       ) : (
-        <div class="support-stack">
-          <CreateFeedPanel
-            feedFormData={feedFormData}
-            feedFieldErrors={feedFieldErrors}
-            conversionError={conversionError}
-            isConverting={isConverting}
-            strategies={strategies}
-            strategiesLoading={strategiesLoading}
-            strategiesError={strategiesError}
-            feedCreationEnabled={feedCreation.enabled}
-            accessTokenRequired={feedCreation.access_token_required}
-            hasAccessToken={hasToken}
-            tokenDraft={tokenDraft}
-            tokenError={tokenError}
-            showTokenPrompt={showTokenPrompt}
-            onFeedSubmit={handleFeedSubmit}
-            onFeedFieldChange={setFeedField}
-            onTokenDraftChange={(value) => {
-              setTokenDraft(value);
-              setTokenError('');
-            }}
-            onSaveToken={handleSaveToken}
-            onCancelTokenPrompt={() => {
-              setShowTokenPrompt(false);
-              setTokenError('');
-            }}
-            strategyHint={strategyHint}
-          />
-          <QuickToolsPanel />
-        </div>
+        <CreateFeedPanel
+          feedFormData={feedFormData}
+          feedFieldErrors={feedFieldErrors}
+          conversionError={conversionError}
+          isConverting={isConverting}
+          strategies={strategies}
+          strategiesLoading={strategiesLoading}
+          strategiesError={strategiesError}
+          feedCreationEnabled={feedCreation.enabled}
+          accessTokenRequired={feedCreation.access_token_required}
+          hasAccessToken={hasToken}
+          tokenDraft={tokenDraft}
+          tokenError={tokenError}
+          showTokenPrompt={showTokenPrompt}
+          onFeedSubmit={handleFeedSubmit}
+          onFeedFieldChange={setFeedField}
+          onTokenDraftChange={(value) => {
+            setTokenDraft(value);
+            setTokenError('');
+          }}
+          onSaveToken={handleSaveToken}
+          onCancelTokenPrompt={() => {
+            setShowTokenPrompt(false);
+            setTokenError('');
+          }}
+          strategyHint={strategyHint}
+        />
       )}
 
       {!result && (
         <InstanceInfo
-          feedCreationEnabled={feedCreation.enabled}
-          accessTokenRequired={feedCreation.access_token_required}
           hasAccessToken={hasToken}
           onClearToken={() => {
             clearToken();

frontend/src/components/AppPanels.tsx

@@ -22,14 +22,6 @@ function feedAccessNote(feedCreationEnabled: boolean, accessTokenRequired: boole
   return '';
 }
 
-function instanceNote(feedCreationEnabled: boolean, accessTokenRequired: boolean, hasAccessToken: boolean) {
-  if (!feedCreationEnabled) return 'This deployment is currently serving read-only feed functionality.';
-  if (!accessTokenRequired) return 'This deployment can generate feeds without additional access setup.';
-  return hasAccessToken
-    ? 'An access token is currently stored in this browser session.'
-    : 'This deployment asks for an access token only when you create a custom feed.';
-}
-
 interface CreateFeedPanelProps {
   feedFormData: FeedFormData;
   feedFieldErrors: FeedFieldErrors;
@@ -150,20 +142,18 @@ export function CreateFeedPanel({
         {showTokenPrompt && (
           <div class="token-gate" role="group" aria-label="Access token">
             <div class="token-gate__copy">
-              <p class="eyebrow">Access token</p>
-              <h3>Unlock custom feed creation</h3>
-              <p class="muted-copy">
-                Save a token in this browser session to generate feeds from your own URLs.
-              </p>
+              <span class="field-label">Access token</span>
+              <p class="muted-copy">Save one token in this browser session to continue.</p>
             </div>
             <div class="token-gate__controls">
               <label class="field-block" htmlFor="access-token">
-                <span class="field-label">Access token</span>
                 <input
                   id="access-token"
                   name="access-token"
                   type="password"
                   class="input input--mono"
+                  aria-label="Access token"
+                  placeholder="Paste access token"
                   autocomplete="off"
                   value={tokenDraft}
                   onInput={(event) => onTokenDraftChange((event.target as HTMLInputElement).value)}
@@ -172,7 +162,7 @@ export function CreateFeedPanel({
               </label>
               <div class="token-gate__actions">
                 <button type="button" class="btn btn--primary" onClick={onSaveToken}>
-                  Save token
+                  Continue
                 </button>
                 <button type="button" class="btn btn--ghost" onClick={onCancelTokenPrompt}>
                   Cancel
@@ -199,39 +189,26 @@ export function CreateFeedPanel({
   );
 }
 
-export function QuickToolsPanel() {
-  return (
-    <section class="surface surface--quiet">
-      <div class="surface__header">
-        <h2>Bookmarklet</h2>
-      </div>
-      <Bookmarklet />
-    </section>
-  );
-}
-
 interface InstanceInfoProps {
-  feedCreationEnabled: boolean;
-  accessTokenRequired: boolean;
   hasAccessToken: boolean;
   onClearToken: () => void;
 }
 
-export function InstanceInfo({
-  feedCreationEnabled,
-  accessTokenRequired,
-  hasAccessToken,
-  onClearToken,
-}: InstanceInfoProps) {
+export function InstanceInfo({ hasAccessToken, onClearToken }: InstanceInfoProps) {
   return (
     <section class="surface surface--info">
       <div class="surface__header">
         <h2>Run your own instance</h2>
       </div>
 
       <div class="instance-info">
-        <p>Start locally with Docker, then use included feeds, automatic generation, or custom configs.</p>
-        <p>{instanceNote(feedCreationEnabled, accessTokenRequired, hasAccessToken)}</p>
+        <p>
+          Start locally with Docker, then wire in included feeds, automatic generation, or custom configs.
+        </p>
+      </div>
+
+      <div class="instance-utility">
+        <Bookmarklet />
       </div>
 
       <div class="surface__toolbar">

frontend/src/components/Bookmarklet.tsx

@@ -12,7 +12,7 @@ export function Bookmarklet() {
   return (
     <div class="bookmarklet-inline" aria-label="Bookmarklet utility">
       <p class="bookmarklet-inline__title">Browser shortcut</p>
-      <p>Drag this into your bookmarks bar to send the current page back here.</p>
+      <p>Drag this into your bookmarks bar.</p>
       <a id="bookmarklet" class="bookmarklet-link" href={bookmarkletHref}>
         Convert page to feed
       </a>

frontend/src/styles/main.css

@@ -118,7 +118,8 @@ textarea {
 .preview-loading,
 .token-gate,
 .token-gate__controls,
-.instance-info {
+.instance-info,
+.instance-utility {
   display: grid;
 }
 
@@ -127,10 +128,6 @@ textarea {
   gap: var(--space-5);
 }
 
-.support-stack {
-  gap: calc(var(--space-5) * 0.8);
-}
-
 .field-stack,
 .composer-block,
 .feed-preview,
@@ -139,6 +136,7 @@ textarea {
 .token-gate,
 .token-gate__controls,
 .instance-info,
+.instance-utility,
 .empty-state {
   gap: var(--space-3);
 }
@@ -463,19 +461,17 @@ a:focus-visible {
 }
 
 .token-gate {
-  padding: var(--space-4);
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-2);
+  padding: var(--space-3);
   border: var(--border-width) solid var(--border-strong);
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.018);
 }
 
 .token-gate__copy {
   display: grid;
-  gap: var(--space-2);
-}
-
-.token-gate__copy h3 {
-  font-size: var(--font-size-2);
+  gap: var(--space-1);
 }
 
 .token-gate__actions {
@@ -484,6 +480,19 @@ a:focus-visible {
   flex-wrap: wrap;
 }
 
+.token-gate__controls {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+}
+
+.token-gate__controls .field-block {
+  gap: var(--space-1);
+}
+
+.token-gate__controls .field-label {
+  display: none;
+}
+
 .result-layout {
   align-items: start;
 }
@@ -578,20 +587,25 @@ a:focus-visible {
 
 .bookmarklet-inline {
   margin: 0;
-  display: grid;
+  display: flex;
+  align-items: center;
   gap: var(--space-2);
+  flex-wrap: wrap;
 }
 
 .bookmarklet-inline__title {
   margin: 0;
   color: var(--text-strong);
-  font-family: var(--font-family-display);
-  font-size: var(--font-size-2);
+  font-size: var(--font-size-00);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
 }
 
 .bookmarklet-inline p {
   margin: 0;
   color: var(--text-muted);
+  font-size: var(--font-size-00);
 }
 
 .bookmarklet-link {
@@ -674,6 +688,10 @@ a:focus-visible {
     grid-template-columns: 1fr;
   }
 
+  .token-gate__controls {
+    grid-template-columns: 1fr;
+  }
+
   .result-secondary {
     justify-items: stretch;
   }