feat: link included feeds to the instance feed directory

frontend/src/__tests__/App.test.tsx

@@ -400,6 +400,7 @@ describe('App', () => {
   });
 
   it('shows the utility links in a user-focused order', () => {
+    window.history.replaceState({}, '', 'http://localhost:3000/#result');
     render(<App />);
 
     fireEvent.click(screen.getByRole('button', { name: 'More' }));
@@ -419,7 +420,7 @@ describe('App', () => {
     );
     expect(screen.getByRole('link', { name: 'Try included feeds' })).toHaveAttribute(
       'href',
-      'https://html2rss.github.io/web-application/how-to/use-included-configs/'
+      'https://html2rss.github.io/feed-directory/#!url=http%3A%2F%2Flocalhost%3A3000%2F'
     );
     expect(screen.getByRole('link', { name: 'Install from Docker Hub' })).toHaveAttribute(
       'href',

frontend/src/components/AppPanels.tsx

@@ -152,16 +152,20 @@ export function CreateFeedPanel({
                 role="status"
                 aria-label="Included feeds"
               >
+                <p class="ui-eyebrow">Included feeds</p>
                 <div class="notice__title">Try a working included feed</div>
-                <p>Start with one of the embedded configs from this instance:</p>
-                {featuredFeeds.map((feed) => (
-                  <p key={feed.path}>
-                    <a href={feed.path}>{feed.title}</a>
-                    {' - '}
-                    {feed.description}
-                  </p>
-                ))}
-                <p>
+                <p class="notice__intro">Start with a ready-made feed from this instance.</p>
+                <div class="featured-feed-list" role="list" aria-label="Featured feeds">
+                  {featuredFeeds.map((feed) => (
+                    <div key={feed.path} class="featured-feed-item" role="listitem">
+                      <a href={feed.path} class="featured-feed-item__link" aria-label={feed.title}>
+                        <span class="featured-feed-item__title">{feed.title}</span>
+                        <span class="featured-feed-item__description">{feed.description}</span>
+                      </a>
+                    </div>
+                  ))}
+                </div>
+                <p class="notice__meta">
                   <a
                     href="https://html2rss.github.io/web-application/how-to/use-included-configs/"
                     target="_blank"
@@ -255,6 +259,14 @@ export function UtilityStrip({
   onClearToken,
 }: UtilityStripProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const includedFeedsHref = (() => {
+    const directoryUrl = new URL('https://html2rss.github.io/feed-directory/');
+    if (typeof window === 'undefined') return directoryUrl.toString();
+
+    const instanceUrl = new URL('/', window.location.origin);
+    directoryUrl.hash = `!url=${encodeURIComponent(instanceUrl.toString())}`;
+    return directoryUrl.toString();
+  })();
 
   if (hidden) return null;
 
@@ -270,12 +282,7 @@ export function UtilityStrip({
       </button>
       {isOpen && (
         <div class="utility-strip__items">
-          <a
-            href="https://html2rss.github.io/web-application/how-to/use-included-configs/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="utility-link"
-          >
+          <a href={includedFeedsHref} target="_blank" rel="noopener noreferrer" class="utility-link">
             Try included feeds
           </a>
           <Bookmarklet />

frontend/src/styles/main.css

@@ -345,6 +345,55 @@ a:focus-visible {
   font-weight: var(--text-strong);
 }
 
+.notice__intro,
+.notice__meta {
+  color: var(--text-muted);
+}
+
+.featured-feed-list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.featured-feed-item {
+  padding: var(--space-3);
+  border: var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--surface-elevated);
+}
+
+.featured-feed-item__link {
+  display: grid;
+  gap: var(--space-1);
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.featured-feed-item:hover,
+.featured-feed-item:focus-within {
+  border-color: var(--border-strong);
+  background: rgba(255, 255, 255, 0.065);
+}
+
+.featured-feed-item__link:hover,
+.featured-feed-item__link:focus-visible {
+  text-decoration: none;
+  transform: translateY(-0.04rem);
+}
+
+.featured-feed-item__title {
+  color: var(--text-strong);
+  font-size: var(--font-size-1);
+  font-weight: 600;
+}
+
+.featured-feed-item__description {
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
 .notice[data-tone="error"] {
   border-color: rgba(248, 113, 113, 0.22);
   background: var(--bg-danger);

public/shared-ui.css

@@ -1,8 +1,8 @@
 /* Shared design-system primitives for both the app UI and RSS/XSL surfaces. See docs/design-system.md before changing this file. */
 :root {
   color-scheme: dark;
-  --font-family-ui: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
-  --font-family-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
+  --font-family-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-family-display: system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
   --font-size-00: 0.8125rem;
   --font-size-0: 0.9375rem;