feat(layout): add page tabs and a header page title

[CammilleCC]

A route can now split its page into tabs instead of rendering a single element and show the page title.

Each tab gets its own URL, so it can be linked, bookmarked, and restored after a refresh. Visiting the base route redirects to the first tab.

chrome_Sq40ZU8vrp.mp4

The header now shows the current page after the app title. For the root route (`/`), the page title is hidden by default.

The route now looks like as follows:

{ path: '/explorer', label: 'Explorer', tabs: [
  { path: 'live', label: 'Live', element: <LiveTab /> },        // -> /explorer/live
  { path: 'replay', label: 'Replay', element: <ReplayTab /> },  // -> /explorer/replay
]}

[alisonscheng]

This looks great!

[SeijDeLeon]

• The main routes prop accepts a leading slash '/' in front of the string used in the initial path key. This pattern does not match how path works in the tabs. Path in tabs does not work when you add a leading slash. Please gracefully handle this so a user could either use myPath or /myPath in the tabs path.

        {
            path: '/test',
            label: 'Test',
            tabs: [
                {
                    label: 'Test Page',
                    element: <TestPage />,
                    path: '/testing', //this one breaks

                },
                {
                    label: 'Docs',
                    element: <Documentation />,
                    path: 'docs', //this one works fine
                }
            ],
            icon: <TestTube size={32} />,
            isBackgroundTransparent: true,
        },

[SeijDeLeon]

Please use rems for the h-[52px] here since this contains text, h-[##rem]. Similar comment for the padding

[CammilleCC]

Whoops, I was hoping to be as close to the mockup as possible, hence the hardcoded pixels. Thanks for pointing this out, used rems as much as possible. There's a slight difference now though, hopefully it is still acceptable.

Before:

After:

FYI @alisonscheng

[SeijDeLeon]

Something that I should have done earlier, but can we please create a FinchAppLayout folder in components and throw into it all these layout components like the finch layout, header, sidebar, tabs, and main content.

[CammilleCC]

Please gracefully handle this so a user could either use myPath or /myPath in the tabs path.

Nice catch, I made the route normalization a bit more robust in 14edc00

Something that I should have done earlier, but can we please create a FinchAppLayout folder in components and throw into it all these layout components like the finch layout, header, sidebar, tabs, and main content.

Sure, added in 0783e1c

[SeijDeLeon]

Thanks for making these changes and adding this, look good