Feature/implement mvp new tab page

[lups2000]

Description

In this PR, I've begun implementing the initial MVP for the new Capture tab, following the mockup proposed here. I started implementing the Regular mode and a simplified version of the Local mode.

TODOs:

• Improve design mode toggle
• Remove inline style
• Make Regular mode functional
• Make Local mode functional
• Add new tests

DEMO:

Screen.Recording.2024-06-16.at.15.07.13.mov

Checklist

• I have updated tests where applicable.
• I have added an entry to the CHANGELOG.

[mhils]

I've integrated the latest capture-tab changes and did a few commits with cleanups. Please take a look at them and extrapolate to the rest. 😄

[lups2000]

thank you @mhils 🙏 , I updated the last tests (FIXMEs) according to what you have done before :)

[mhils]

This looks much more solid now - thanks!

[mhils]

If you add tests for IPv6 listen_addrs, this will fail. 😉

We can put this into web/src/js/utils.ts:

export function rpartition(str: string, sep: string): [string, string] {
  const lastIndex = str.lastIndexOf(sep);
  if (lastIndex === -1) {
    return ['', str];
  }
  const before = str.slice(0, lastIndex);
  const after = str.slice(lastIndex + sep.length);
  return [before, after];
}

[lups2000]

example? I took inspiration from what you linked to me 😅

[lups2000]

what do you think with this new version?

[lups2000]

just a small "issue" now: I don't know why when toggling the local mode we're getting : VM105:6 ImmutableStateInvariantMiddleware took 43ms, which is more than the warning threshold of 32ms. If your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions. It is disabled in production builds, so you don't need to worry about that. in the console 🤔

[mhils]

🚀🚀🚀

[mhils]

This here is a really annoying edge case: The mode specs currently don't support host only, but a UI for this would probably have it as separate input. Something we should tackle, but not in this PR. :)