Refine included feed presentation

Author: gildesmarais

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"
@@ -259,9 +263,7 @@ export function UtilityStrip({
     const directoryUrl = new URL('https://html2rss.github.io/feed-directory/');
     if (typeof window === 'undefined') return directoryUrl.toString();
 
-    const instanceUrl = new URL(window.location.href);
-    instanceUrl.search = '';
-    instanceUrl.hash = '';
+    const instanceUrl = new URL('/', window.location.origin);
     directoryUrl.hash = `!url=${encodeURIComponent(instanceUrl.toString())}`;
     return directoryUrl.toString();
   })();

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;