Dropdown to change secondbrain

stakwork / sphinx-nav-fiber

14 stars 48 forks source link

Dropdown to change secondbrain #2434

Open tomsmith8 opened 2 weeks ago

tomsmith8 commented 2 weeks ago

Task

A dropdown at the title to render multiple secondbrains to easily and quickly context switch without opening/closing a new webview.

Requirements

On page mount after user is done authenticating
call sphinx-bridge with this command: sphinx.getSecondBrainList()
Keep the result in the user store
When we have this we can update the UI to ensure to go get swarms from the user store and render a dropdown if >1

Acceptance Criteria

[ ] Render button if second brain list >1
[ ] If 0 or 1, do not render the button
[ ] On click, this should open the new second brain in view

Antanasijevic commented 2 weeks ago

@tomsmith8 Here is a simple option we can use as starting point

Figma draft: https://www.figma.com/design/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?node-id=9974-26052&t=WEpYP1dG6nqbRJjj-1

https://github.com/user-attachments/assets/a1de6fa1-bce1-4b94-862a-ade3c074377c

tomsmith8 commented 2 weeks ago

Notes:

Move the arrow to sit above the selected graph title. Place it at the top left of the current selection box to make it more visually connected to the label
Ensure the arrow’s positioning aligns well with the selected item. This will create a more direct visual cue that the arrow and the current selection are linked
We could add a dropdown animation - something that indicates the dropdown is expanding from the label itself rather than opening from the side.
Make sure the clickable area includes both the label and the arrow so users can click anywhere in this combined area to open the dropdown.

aliraza556 commented 2 weeks ago

@tomsmith8, available for work? Please assign me!

tomsmith8 commented 2 weeks ago

Sure, just need to finalise the design

Antanasijevic commented 2 weeks ago

@tomsmith8 You can see several options in this figma prototype, select each of them in the left side menu. Since the size of the title varies ("Machine Learning" , "Bitcoin"), option with wide drop down (with small margin or even full width) may work best

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?node-id=10022-47441&node-type=canvas&t=0hn0YyEnzx3l6BeU-1&scaling=min-zoom&content-scaling=fixed&page-id=9974%3A26052&starting-point-node-id=10022%3A47441&show-proto-sidebar=1