feat: Align result and feed UI by gildesmarais · Pull Request #933 · html2rss/html2rss-web

gildesmarais · 2026-03-29T11:40:30Z

No description provided.

Copilot

Pull request overview

This PR aligns the UI styling and user experience between the main frontend “result” screen and the RSS/XSL feed-rendered HTML, while also modernizing the frontend toolchain (pnpm + ESLint + Stylelint) and improving feed “readiness” handling.

Changes:

Unifies design primitives via public/shared-ui.css and updates RSS XSL (public/rss.xsl) to use the shared hero/actions styling plus richer per-item “quality” signals.
Adds a feed-readiness lifecycle to the frontend conversion flow (retries, explicit states, and a manual “retry readiness” action) and updates UI/tests accordingly.
Migrates frontend workflows from npm to pnpm, adds ESLint/Stylelint configs, and updates CI/devcontainer/Docker build steps.

Reviewed changes

Copilot reviewed 46 out of 53 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
stylelint.config.mjs	Root Stylelint config extending the frontend ruleset.
spec/public/rss_xsl_spec.rb	Adds coverage for RSS XSL output structure and text sanitization behavior.
spec/html2rss/web/feeds/responder_spec.rb	Refactors expectations into helpers for readability.
spec/html2rss/web/app_spec.rb	Avoids static-route caching collisions by randomizing the path.
public/shared-ui.css	Expands shared design tokens + adds shared hero/button primitives.
public/rss.xsl	Redesigns feed HTML output to match shared UI and adds quality indicators/readiness stamp.
public/feed-reader-link.js	Adds client-side wiring for “Open in feed reader” link.
Makefile	Switches frontend tasks to pnpm; expands linting to include ESLint + Stylelint.
Gemfile.lock	Updates a few gem versions and removes `ssrf_filter` dependency entries.
Gemfile	Removes the unused `ssrf_filter` gem.
frontend/vitest.config.js	Normalizes timeout numeric formatting.
frontend/stylelint.config.mjs	Introduces frontend Stylelint config (standard + BEM-ish class regex).
frontend/src/utils/url.ts	Tweaks URL regexes for scheme/host-like detection.
frontend/src/styles/main.css	Updates layout/controls styling to use shared tokens and align with feed UI.
frontend/src/main.tsx	Uses `document.querySelector('#app')` for mount lookup.
frontend/src/hooks/useStrategies.ts	Migrates state shape to optional `error` and minor naming consistency.
frontend/src/hooks/useFeedConversion.ts	Adds readiness phases, retry loop/backoff, and manual retry entrypoint.
frontend/src/hooks/useAuth.ts	Uses `globalThis` and optional state fields; adjusts storage fallbacks.
frontend/src/hooks/useApiMetadata.ts	Uses optional `metadata`/`error` state fields and consistent setters.
frontend/src/hooks/useAccessToken.ts	Uses `globalThis`, optional token/error, and legacy-token migration behavior.
frontend/src/environment.d.ts	Adds Vite client type reference.
frontend/src/components/ResultDisplay.tsx	Updates result UI to show readiness state, actions, and preview expansion.
frontend/src/components/DominantField.tsx	Renames props interface for consistency.
frontend/src/components/Bookmarklet.tsx	Uses `globalThis.location`/`globalThis.window` checks.
frontend/src/components/AppPanels.tsx	Updates create panel copy/actions and adds OpenAPI link normalization.
frontend/src/components/App.tsx	Wires readiness retry through the app and adjusts messaging/heuristics.
frontend/src/api/contracts.ts	Adjusts optional/nullable fields in preview + retry types.
frontend/src/api/client.ts	Uses `globalThis` and makes bearer header helper accept optional token.
frontend/src/tests/useFeedConversion.test.ts	Updates tests for readiness phases/retry timing and optional state fields.
frontend/src/tests/useFeedConversion.contract.test.ts	Updates contract assertions for optional fields and readiness behavior.
frontend/src/tests/useAuth.test.ts	Updates for optional auth state fields and `globalThis` storage stubs.
frontend/src/tests/useAccessToken.test.ts	Updates for optional token/error and `globalThis` storage access.
frontend/src/tests/setup.ts	Improves test environment globals/storages and adds lint suppressions for null behavior.
frontend/src/tests/ResultDisplay.test.tsx	Updates result UI tests for readiness UX and preview expansion.
frontend/src/tests/App.test.tsx	Updates app tests for new copy, readiness wiring, and OpenAPI link normalization.
frontend/src/tests/App.contract.test.tsx	Updates contract test expectations for updated result copy and storage access.
frontend/playwright.config.ts	Switches webServer command to pnpm.
frontend/package.json	Pins pnpm, bumps deps, and adds ESLint/Stylelint + scripts.
frontend/eslint.config.js	Adds ESLint flat config (TS + unicorn + hooks).
frontend/.prettierignore	Replaces package-lock ignore with pnpm lockfile ignore.
frontend/.gitignore	Adds frontend-local ignores (node_modules/dist/.astro).
docs/README.md	Updates command docs for pnpm and clarifies `make ready` semantics.
docs/architecture.md	Clarifies routing/resolution boundaries for static vs token-backed feeds.
Dockerfile	Migrates frontend build stage from npm to pnpm/corepack.
bin/dev-with-frontend	Uses pnpm for frontend dev server.
bin/dev	Uses pnpm for frontend dev server and updates comments.
app/web/feeds/responder.rb	Refactors request resolution + result emission into helper methods.
.gitignore	Adds `.pnpm-store` and minor cleanup.
.github/workflows/ci.yml	Migrates frontend CI to pnpm; adds pnpm setup and Stylelint step.
.devcontainer/Dockerfile	Enables corepack/pnpm in devcontainer image.
.devcontainer/devcontainer.json	Adds ESLint extension + save-time fix actions and validation settings.

Copilot · 2026-04-04T10:08:57Z

 export interface CreatedFeedResult {
  feed: FeedRecord;
  preview: FeedPreviewState;
-  retry: FeedRetryState | null;
+  retry?: FeedRetryState;
 }


CreatedFeedResult is now being treated as having readinessPhase (used in ResultDisplay/useFeedConversion/tests), but the interface here doesn't define that property, and there is no FeedReadinessPhase type exported from this module. This will cause TypeScript excess-property / missing-export errors. Add a FeedReadinessPhase union type and include readinessPhase: FeedReadinessPhase on CreatedFeedResult (and update any related types accordingly).

Copilot · 2026-04-04T10:08:58Z

+import type {
+  CreatedFeedResult,
+  FeedPreviewItem,
+  FeedReadinessPhase,
+  FeedRecord,
+} from '../api/contracts';


This file imports FeedReadinessPhase from ../api/contracts, but frontend/src/api/contracts.ts does not currently export it. As-is, pnpm run typecheck should fail. Either export FeedReadinessPhase (and use it on CreatedFeedResult.readinessPhase) or remove this import and adjust the code to use an in-file type.

Copilot · 2026-04-04T10:08:58Z

  const selectedStrategy = strategies.find((strategy) => strategy.id === feedFormData.strategy);
-  const urlInputRef = useRef<HTMLInputElement | null>(null);
-  const tokenInputRef = useRef<HTMLInputElement | null>(null);
-  const strategyOptionLabel = (strategy: Strategy) => {
-    if (strategy.id === 'faraday') return 'Default';
-    if (strategy.id === 'browserless') return 'JavaScript pages (recommended)';
-    return strategy.display_name;
-  };
+  const urlInputReference = useRef<HTMLInputElement>(undefined as never);
+  const tokenInputReference = useRef<HTMLInputElement>(undefined as never);



useRef<HTMLInputElement>(undefined as never) forces the ref to be typed as always-present even though it's undefined until the element mounts, which defeats the purpose of the type and can mask real null/undefined issues. Prefer useRef<HTMLInputElement | null>(null) (or useRef<HTMLInputElement>() with an explicit union) and keep the existing runtime guard.

Copilot · 2026-04-04T10:08:58Z

+document.addEventListener('DOMContentLoaded', function () {
+  var readerLink = document.querySelector('[data-feed-reader-link]');
+  if (!readerLink) return;
+
+  readerLink.setAttribute('href', 'feed:' + window.location.href);
+});


This always overwrites the server-provided href value. If the XSL already emitted a canonical feed URL (e.g. from atom:link rel='self') this will replace it with feed: + window.location.href, which may differ (redirects, query params, alternate host) and can even double-prefix if the page was opened via a feed: URL. Consider only setting the href when it's missing or '#', and avoid double-prefixing when location.href already starts with feed:.

Copilot · 2026-04-04T10:08:58Z

  font-size: var(--font-size-0);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
  background: transparent;


text-rendering uses the value optimizelegibility here. While CSS keywords are generally case-insensitive in HTML, tooling (including some linters/validators) often expects the canonical optimizeLegibility spelling/casing for this property value. Consider switching back to optimizeLegibility to avoid false-positive lint errors.

Copilot · 2026-04-04T10:08:59Z

+  && corepack enable \
+  && corepack prepare "pnpm@latest" --activate


The devcontainer forces pnpm@latest via corepack prepare, but frontend/package.json pins a specific pnpm version via packageManager. Activating latest can drift from the pinned version and cause lockfile / CI mismatches. Prefer preparing/activating the pinned version (or just corepack enable and let Corepack honor packageManager).

Suggested change

&& corepack enable \

&& corepack prepare "pnpm@latest" --activate

&& corepack enable

gildesmarais commented Apr 3, 2026

View reviewed changes

Comment thread .github/workflows/ci.yml Outdated

gildesmarais commented Apr 3, 2026

View reviewed changes

Comment thread .github/workflows/ci.yml Outdated

gildesmarais commented Apr 3, 2026

View reviewed changes

Comment thread .github/workflows/ci.yml Outdated

gildesmarais commented Apr 3, 2026

View reviewed changes

Comment thread .github/workflows/ci.yml Outdated

gildesmarais added 10 commits April 3, 2026 13:58

Align result and feed UI

850e742

chore: install eslint and style-migrate

94940ab

Add stylelint config and harden feed reader fallback

a810257

chore(frontend): migrate workflows to pnpm via corepack

1278fd3

chore(stylelint): add workspace stylelint configuration

d0d2e7b

refactor(css): align shared tokens and app styles with stylelint

1869988

css: unify shared token system naming

c2ca87b

css: normalize app styles to shared scale tokens

a47b62c

test: align storage mocks with web storage semantics

7f6b0fa

ci: use pnpm lockfile for node setup and installs

887bd23

gildesmarais force-pushed the feed-result branch from 13faf80 to 887bd23 Compare April 3, 2026 11:58

gildesmarais added 11 commits April 3, 2026 14:00

Use pnpm audit in frontend CI job

5c305b9

chore: update and clean deps

c0686b1

Switch Docker frontend stage from npm to pnpm

3b4429c

Fix mobile URL field overflow in form layout

e1456eb

Refine result-state hierarchy and readiness UX

87801fd

Polish entry-panel copy and token prompt messaging

cb1465e

Keep local OpenAPI utility link on frontend origin

7ff7184

Align frontend journey with industrial minimal state frame

085f0e6

Refine readiness retry UX cadence and flatten form shell

a6f734a

Fix docs auth boundaries and stabilize feed UI/test primitives

de148cf

git rm --cached -r skills

f39f1b8

gildesmarais requested a review from Copilot April 4, 2026 10:03

Copilot started reviewing on behalf of gildesmarais April 4, 2026 10:04 View session

Copilot AI reviewed Apr 4, 2026

View reviewed changes

.

7f1d3f0

gildesmarais closed this Apr 4, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Align result and feed UI#933

feat: Align result and feed UI#933
gildesmarais wants to merge 22 commits intomainfrom
feed-result

gildesmarais commented Mar 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		&& corepack enable \
		&& corepack prepare "pnpm@latest" --activate

	&& corepack enable \
	&& corepack prepare "pnpm@latest" --activate
	&& corepack enable

Uh oh!

Conversation

gildesmarais commented Mar 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants