Implement custom titlebars that can be configured in Python

[jonahbedouch]

Adds a toggleable navbar to Viser and piggybacks off of PR 40 to expose a Python Interface for adding custom buttons, images, and padding to the navbar. Example below:

titlebarTheme = TitlebarConfig(left=[TitlebarButton(text="Getting Started", href="https://nerf.studio", variant='outlined'),
                                     TitlebarButton(text="Github", icon="GitHub", href="https://github.com/nerfstudio-project/nerfstudio", variant='outlined'),
                                     TitlebarButton(text="Documentation", icon="Description", href="https://docs.nerf.studio", variant='outlined'),
                                     TitlebarButton(text="Viewport Controls", icon="Keyboard", href="https://docs.nerf.studio", variant='outlined'),
                                     ], 
                              right=[TitlebarImage(imageSource="https://docs.nerf.studio/en/latest/_static/imgs/logo.png", alt="NerfStudio Logo"), TitlebarPadding(width="5em")])

server.configure_theme(canvas_background_color=(2, 230, 230),
                       show_titlebar=True,
                       titlebar_content=titlebarTheme);

Resulting in:

Relevant to (and in theory closes) #20

[brentyi]

looks really great that was super fast!!

I dropped some comments, mostly related to the typing of the message

[jonahbedouch]

After discussions about appearance when scaled down and general security with regards to sending the difference as a string, we made the following changes:

• Add TypedDict support to the type conversion tool and change the type on both ends to a more strict type

• Remove hacked type validation on the Typescript side

• Restrict Icons to a very limited intro set

• Remove the requirement to "show" the titlebar with a separate configure_theme option. Instead, the titlebar shows automatically whenever a titlebar config is sent.

• Remove TitlebarPadding class, and rework TitlebarButton and TitlebarImage to be TypedDicts (with optional literals as necessary).

• Expose TitlebarButton and TitlebarImage from viser.theme

• Rework API to not take in 3 inputs. Instead, it takes in a list of buttons and an optional image to be used as a header image on the right. This has some room for future work (some of which I've opted to postpone mostly due to the work being done in MUI -> mantine transition #49 ).

  • In a pure styling context, check whether the total size of the buttons exceeds the size of the container, and switch to a dropdown layout to avoid overflow
  • Potentially expose an option to flip the Image to the left and buttons to the right

Given this new setup, the same example from before now works as follows:

buttons = (
    TitlebarButton(
        text="Getting Started",
        icon=None,
        href="https://nerf.studio",
        variant="outlined",
    ),
    TitlebarButton(
        text="Github",
        icon="GitHub",
        href="https://github.com/nerfstudio-project/nerfstudio",
        variant="outlined",
    ),
    TitlebarButton(
        text="Documentation",
        icon="Description",
        href="https://docs.nerf.studio",
        variant="outlined",
    ),
    TitlebarButton(
        text="Viewport Controls",
        icon="Keyboard",
        href="https://docs.nerf.studio",
        variant="outlined",
    ),
)
image = TitlebarImage(
    image_url="https://docs.nerf.studio/en/latest/_static/imgs/logo.png",
    image_alt="NerfStudio Logo",
    href=None,
)

titlebar_theme = TitlebarConfig(buttons=buttons, image=image)

server.configure_theme(
    canvas_background_color=(2, 230, 230),
    titlebar_content=titlebar_theme,
)

Resulting in a very similar:

[brentyi]

Changes look great, thanks @jonahbedouch! Merging because I want to start resolving conflicts with the mantine PR, but I made some small tweaks to the types and example so if you could double-check that that'd be appreciated. :)