<TwoStepPage> mobile support

[ilyatitovich]

Fixes #95

Done:

• Added logic to core - check which side should be displayed depending on the path. Next - manipulate CSS classes to show/hide UI elements.
• Added Back button to (mobile version).
• Added Esc key support for switching between sides
• Added utit tests with one exception:

test('show second side: add/url', async () => {
  setBaseTestRoute({ params: { url: 'dev.to/feed' }, route: 'add' })
  await setTimeout(100)
  strictEqual(side.get(), 'second')
})

Test gives an error: TypeError [Error]: request is not a function. I haven't figured out why yet.

In Progress:

• Add stories for UI testing.
• I didn’t find <TwoSidePage>, maybe I understood something wrong 😀
• Now, scroll position when switching between sides is preserved.

Motivation

These changes will improve the user experience on mobile devices.

Checklist

• [x] Don’t rush. Check all changes in PR again.
• [x] Run pnpm test.
• [x] Think about changing documentation.
  • If you added a script to scripts/, add a comment with a description.
  • If you added a new folder, add its description to the project’s README.md.
  • If you added config, describe how we use this tool in the config’s comment.
  • If you added something to the project’s architecture, describe it in the project’s README.md.
  • Try to focus on “why?”, not “how?”.
• [x] If you added a new dependency, check our requirements.
• [x] Think about testing
  • If you added a feature, add unit tests.
  • If you added a new state to the UI, add visual tests.
  • If you fixed the bug, think about preventing bug regression in the future.
• If you changed web client:
  • [x] Think about moving code to core/. What code will also be useful on other platforms?
  • [x] Run pnpm size and check the difference in the JS bundle size. Is it relevant to the changes? Change the limit in web/.size-limit.json if necessary.
  • [x] The UI was checked in Chrome and Firefox (and Safari or Epiphany if you have them).
  • [x] Think about keyboard UX. Is it easy to use the new feature with only one hand on a keyboard? Is it easy to understand what keys to press?
  • [x] Think about HTML semantics.
  • [x] Think about accessibility. Check a11y recommendations. Think about how screen reader users will use the tool. Is it easy to use on a screen with bad contrast?
  • [x] Think about translations.
  • [x] Think about right-to-left languages. What parts of the screen should be mirrored for Arabic or Hebrew languages?
• If you changed web/main/ files:
  • Do you need to backport styles changes to web/public/404.html or web/public/500.html?
  • Think about app loading styles inlined in index.html.
• If you changed core/:
  • [x] Think about making types more precise. Can you better explain data relations by type?
  • [x] Think about conflict resolution. We don’t need some very smart changing merging; just 2 changes of the same item on different clients should not break the database. What if the user changes an item on one machine and removes it on another?
  • [x] Think about log and storage migration.
• If you changed English translations:
  • [x] Change translation ID if you change the meaning of the text.

[ai]

I didn’t find , maybe I understood something wrong

TwoStepsPage 😅

Package size limit has exceeded by 1.34 kB

Increase size limit with 5 KB step

Test gives an error: TypeError [Error]: request is not a function. I haven't figured out why yet.

You need to mock the request like in https://github.com/hplush/slowreader/blob/main/core/test/preview.test.ts

1. mockRequest() in beforeEach
2. checkAndRemoveRequestMock() in afterEach
3. expectRequest with expected URLs in the test

We can add some simpler mock if needed.

setBaseTestRoute({ params: { url: 'dev.to/feed' }, route: 'add' }) await setTimeout(100) strictEqual(side.get(), 'second')

How user will select feed if we switch to the second step? The feed adding process:

1. Enter URL in first step
2. Select feed candidate in first step
3. Only then preview feed posts and add feed in the second step

Maybe route-based logic is not enough for all two-step logic. We can export some methods from two-steps to use in preview and similar pages when steps are separated by internal state, not route.

[ilyatitovich]

Thanks! Now process to add feed is clearer. I'll add some function to check this steps.

[ilyatitovich]

• Updated logic to display sides when adding a feed.
• Added Story: Navbar with Back button.
• Added Story: Adding feed process on mobile screen.

[ilyatitovich]

Removed URL patterns from the core code and updated logic.

[ilyatitovich]

• Back routes moved to core/router.ts
• showSecondStep() moved to setPreviewCandidate()
• Esc key now clicking on Back button

[ilyatitovich]

• Updated backRoute code
• Removed Esc hotkey

[ai]

Thanks!