dashboard: make breadcrumb + action look better

[guilhermerodz]

Preliminary Checks

• I have reviewed the documentation: https://unkey.com/docs

• I have searched for existing issues: https://github.com/unkeyed/unkey/issues

• This issue is not a question, general help request, or anything other than a bug report directly related to Unkey. Please ask questions in our Discord community: https://unkey.com/discord.

Reproduction / Replay Link (Optional)

No response

Issue Summary

Unkey is currently using breadcrumb in a row, and action in another row.

Steps to Reproduce

1. Log into the platform
2. Go to /apis and start navigating
3. See the breadcrumbs and actions not looking good

Expected behavior

As a suggestion for better appearance; the right slot (empty) is a valid space for actions (could be a Next.js slot, too)

Other information

No response

Screenshots

No response

Version info

- OS:
- Node:
- npm:

[linear]

ENG-1291 dashboard: make breadcrumb + action look better

[luanfonceca]

Hey @guilhermerodz,
I just wanted to let you know that I plan on taking this issue.

Here's my idea for the visuals for the breadcrumb with action:

Please let me know if that layout will work.

I've never used Slots in NextJS, but I can make that work.
I will get back to you with questions.

Also, I am unsure how much dedication I should give to the mobile view, as I need more context on mobile users' engagement on Unkey.

[chronark]

I'm not sure if we want to use a single bar or two

single:

[ bread/crumbs/...          action1, action2 ]

double:

[ bread/crumbs/...          generic actions ]
[ title                                page actions.   ]

As generic actions I'd classify stuff like "link to docs, feedback, notifications"
Whereas page actions are the ones you see right now: "copy id buttons and CRUD buttons"

wdyt @luanfonceca ?

[luanfonceca]

double:

[ bread/crumbs/...          generic actions ]
[ title                                page actions.   ]

As generic actions I'd classify stuff like "link to docs, feedback, notifications" Whereas page actions are the ones you see right now: "copy id buttons and CRUD buttons"

wdyt @luanfonceca ?

The Double layout works great!

This is where I'm at - working only in the /apis/... for now.

I will make sure to make this work with a 2x2 grid in the header;
And when I'm done with it, I will review the other pages

[chronark]

I thought some more, and we'll be introducing "environments" at some point
think of stripe's "test" vs "production" env if you're familiar with that and we need that to be prominently visible, so the top navbar would be perfect to display and toggle

[ bread/crumbs/...          🔔  | Docs | Feedback | Production 🔽  ]

This makes me think whether the 2nd bar should actually be done via parallel routes..
It contains page title + specific actions and would be pretty easy to do at the page or layout level, rather than in a separate directory

[luanfonceca]

@chronark do you think we can take this discussion to Discord?
I believe we can have a faster round-trip on messages to discuss this issue's objectives and overall scope.

[chronark]

absolutely, create a thread and link it here please

[harshsbhat]

@luanfonceca are you still working on this issue? If not I would like to take on this one.