spruce up workspace navigation

interim-server/src/routes/mod.rs

@@ -43,7 +43,7 @@ pub(crate) fn new_router(app: App) -> Router<()> {
             ),
         )
         .nest("/workspaces", workspaces_multi::new_router())
-        .nest("/w/{workspace_id}", workspaces_single::new_router())
+        .nest("/w", workspaces_single::new_router())
         .nest("/auth", auth::new_router())
         .route("/__dev-healthz", any(dev_healthz_handler))
         .layer(SetResponseHeaderLayer::if_not_present(

interim-server/src/routes/workspaces_single/mod.rs

@@ -1,21 +1,43 @@
 use axum::{
     Router,
+    extract::{Path, State},
     response::Redirect,
     routing::{get, post},
 };
 use axum_extra::routing::RouterExt as _;
+use serde::Deserialize;
+use uuid::Uuid;
 
-use crate::app::App;
+use crate::{Settings, app::App};
 
 use super::relations_single;
 
 mod add_table_handler;
 mod nav_handler;
 
+#[derive(Clone, Debug, Deserialize)]
+struct PathParams {
+    workspace_id: Uuid,
+}
+
 pub(super) fn new_router() -> Router<App> {
     Router::<App>::new()
-        .route("/", get(|| async move { Redirect::to("nav/") }))
+        .route_with_tsr(
-        .route("/add-table", post(add_table_handler::post))
+            "/{workspace_id}",
-        .route_with_tsr("/nav/", get(nav_handler::get))
+            get(
-        .nest("/r/{rel_oid}", relations_single::new_router())
+                |State(Settings { root_path, .. }): State<Settings>,
+                 Path(PathParams { workspace_id }): Path<PathParams>| async move {
+                    Redirect::to(&format!(
+                        "{root_path}/w/{workspace_id}/nav/",
+                        workspace_id = workspace_id.simple()
+                    ))
+                },
+            ),
+        )
+        .route("/{workspace_id}/add-table", post(add_table_handler::post))
+        .route_with_tsr("/{workspace_id}/nav/", get(nav_handler::get))
+        .nest(
+            "/{workspace_id}/r/{rel_oid}",
+            relations_single::new_router(),
+        )
 }

interim-server/templates/portal_table.html

@@ -7,8 +7,10 @@
     <filter-menu identifier-hints="{{ attr_names | json }}" initial-value="{{ filter | json }}"></filter-menu>
   </div>
   <div class="page-grid__sidebar">
+    <div style="padding: 1rem;">
       {{ navbar | safe }}
     </div>
+  </div>
   <main class="page-grid__main">
     <table-viewer columns="{{ attr_names | json }}" root-path="{{ settings.root_path }}"></table-viewer>
   </main>

interim-server/templates/workspace_nav.html

@@ -1,6 +1,6 @@
-<nav class="navbar">
+<nav class="workspace-nav">
   <section>
-    <div class="navbar__heading">
+    <div class="workspace-nav__heading">
       <h2>Tables</h2>
       <form
         action="{{ navigator.get_root_path() -}}
@@ -9,18 +9,14 @@
         method="post"
       >
         <!-- FIXME: CSRF -->
-        <button type="submit">+</button>
+        <button class="workspace-nav__aux-button" type="submit">+</button>
       </form>
     </div>
-    <menu class="navbar__menu">
+    <menu class="workspace-nav__menu">
       {%- for rel in relations %}
-      <li class="navbar__menu-item
+      <li>
-        {%- if current == Some(NavLocation::Rel(rel.oid.to_owned(), None)) -%}
-        {# preserve space #} navbar__menu-item--active
-        {%- endif -%}
-      ">
         <collapsible-menu
-          class="navbar__collapsible-menu"
+          class="workspace-nav__menu-item"
           expanded="
           {%- if let Some(NavLocation::Rel(rel_oid, _)) = current -%}
           {%- if rel_oid.to_owned() == rel.oid -%}
@@ -29,22 +25,24 @@
           {%- endif -%}
           "
         >
-          <h4 slot="summary" class="navbar__heading navbar__heading--entity">
+          <div class="workspace-nav__heading" slot="summary">
-            {{ rel.name }}
+            <h3>{{ rel.name }}</h3>
-          </h4>
-          <menu slot="content" class="navbar__menu">
-            <li class="navbar__menu-item">
             <a
-                href="{{ navigator.get_root_path() }}/r/{{ rel.oid.0 }}/rbac"
+              href="{{ navigator.get_root_path() -}}
-                class="navbar__menu-link"
+              /w/{{ workspace.id.simple() -}}
+              /r/{{ rel.oid.0 -}}
+              /settings/"
+              class="workspace-nav__aux-button"
+              role="button"
             >
-                Sharing
+              Settings
             </a>
-            </li>
+          </div>
-            <li class="navbar__menu-item">
+          <menu class="workspace-nav__menu" slot="content">
-              <collapsible-menu class="navbar__collapsible-menu">
+            <li class="workspace-nav__menu-item">
-                <div slot="summary" class="navbar__heading">
+              <collapsible-menu class="workspace-nav__collapsible-menu">
-                  <h5>Portals</h5>
+                <div slot="summary" class="workspace-nav__heading">
+                  <h4>Portals</h4>
                   <form
                     action="{{ navigator.get_root_path() -}}
                     /w/{{ workspace.id.simple() -}}
@@ -53,12 +51,16 @@
                     method="post"
                   >
                     <!-- FIXME: CSRF -->
-                    <button type="submit">+</button>
+                    <button class="workspace-nav__aux-button" type="submit">+</button>
                   </form>
                 </div>
-                <menu slot="content" class="navbar__menu">
+                <menu slot="content" class="workspace-nav__menu">
                   {% for portal in rel.portals %}
-                  <li class="navbar__menu-item
+                  <li class="workspace-nav__menu-item">
+                    <div class="workspace-nav__menu-leaf
+                    {%- if current == Some(NavLocation::Rel(rel.oid.to_owned(), Some(RelLocation::Portal(portal.id.to_owned())))) -%}
+                    {# preserve space #} workspace-nav__menu-leaf--current
+                    {%- endif -%}
                     ">
                       <a
                         href="
@@ -67,14 +69,23 @@
                         /r/{{ rel.oid.0 -}}
                         /p/{{ portal.id.simple() -}}
                         "
-                      class="navbar__menu-link navbar__menu-link--entity
+                        class="workspace-nav__menu-link
-                      {%- if current == Some(NavLocation::Rel(rel.oid.to_owned(), Some(RelLocation::Portal(portal.id.to_owned())))) -%}
-                      {# preserve space #} navbar__menu-link--current
-                      {%- endif -%}
                         "
                       >
                         {{ portal.name }}
                       </a>
+                      <a
+                        href="{{ navigator.get_root_path() -}}
+                        /w/{{ workspace.id.simple() -}}
+                        /r/{{ rel.oid.0 -}}
+                        /p/{{ portal.id.simple() -}}
+                        /form/"
+                        class="workspace-nav__aux-button"
+                        role="button"
+                      >
+                        Form
+                      </a>
+                    </div>
                   </li>
                   {% endfor %}
                 </menu>

interim-server/templates/workspaces_single/nav.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-<main>
+<main style="position: relative; margin: 0 auto; max-width: 32rem;">
   <h1>{{ workspace.name }}</h1>
   {{ workspace_nav | safe }}
 </main>

sass/_globals.scss

@@ -2,10 +2,11 @@
 
 $button-primary-background: #07f;
 $button-primary-color: #fff;
+$button-shadow: 0 0.15rem 0.15rem #3331;
 $default-border-color: #ccc;
 $default-border: solid 1px $default-border-color;
-$font-family-default: 'Averia Serif Libre', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+$font-family-default: 'Funnel Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-$font-family-data: 'Funnel Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+$font-family-data: Menlo, 'Courier New', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 $font-family-mono: Menlo, 'Courier New', Courier, mono;
 $popover-border: $default-border;
 $popover-shadow: 0 0.5rem 0.5rem #3333;
@@ -30,13 +31,17 @@ $hover-lightness-scale-factor: -10%;
 @mixin button-base {
   @include reset-button;
   @include rounded;
+
+  box-shadow: $button-shadow;
   font-family: $font-family-default;
+  font-weight: 500;
   padding: 0.5rem 1rem;
   transition: background 0.2s ease;
 }
 
 @mixin button-primary {
   @include button-base;
+
   background: $button-primary-background;
   color: $button-primary-color;
 
@@ -67,6 +72,7 @@ $hover-lightness-scale-factor: -10%;
 
 @mixin button-secondary {
   @include button-base;
+
   background: #fff;
   color: #000;
   border: $default-border;
@@ -83,11 +89,18 @@ $hover-lightness-scale-factor: -10%;
 @mixin button-clear {
   @include button-base;
 
+  box-shadow: none;
+
   &:hover {
     background: #0000001f;
   }
 }
 
+@mixin button-small {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.9rem;
+}
+
 @mixin reset-input {
   appearance: none;
   background: none;

sass/main.scss

@@ -4,10 +4,10 @@
 @use 'modern-normalize';
 @use 'forms';
 @use 'collapsible_menu';
-@use 'navbar';
+@use 'workspace-nav';
 
 html {
-  font-family: "Averia Serif Libre", "Open Sans", "Helvetica Neue", Arial, sans-serif;
+  font-family: globals.$font-family-default;
 }
 
 button, input[type="submit"] {

sass/navbar.scss

@@ -1,46 +0,0 @@
-@use 'globals';
-@use 'collapsible_menu';
-
-$background-current-item: #0001;
-
-.navbar {
-  padding: 2rem;
-
-  &__menu {
-    list-style-type: none;
-    padding: 0;
-    margin-bottom: 0;
-  }
-
-  &__heading {
-    font-size: inherit;
-    margin: 0;
-    padding: 0.5rem;
-
-    &--entity {
-      font-family: globals.$font-family-data;
-    }
-  }
-
-  &__menu-link {
-    @include globals.rounded-sm;
-    display: block;
-    padding: 0.5rem;
-    color: globals.$link-color;
-    text-decoration: none;
-
-    &--entity {
-      font-family: globals.$font-family-data;
-    }
-
-    &--current {
-      background: $background-current-item;
-    }
-  }
-}
-
-.base-switcher {
-  @include globals.reset-button;
-  font-family: globals.$font-family-data;
-  padding: 1rem;
-}

sass/workspace-nav.scss

@@ -0,0 +1,74 @@
+@use 'globals';
+
+$background-current-item: #0001;
+
+.workspace-nav {
+  & h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  & h2 {
+    font-size: 1.25rem;
+  }
+
+  & h3 {
+    font-size: 1.125rem;
+  }
+
+  & h4, h5, h6 {
+    font-size: 1rem;
+  }
+
+  &__menu {
+    list-style-type: none;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  &__heading {
+    align-items: center;
+    display: flex;
+    font-size: inherit;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0.5rem;
+  }
+
+  &__aux-button {
+    @include globals.button-secondary;
+    @include globals.button-small;
+
+    text-decoration: none;
+  }
+
+  &__menu-item {
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
+  }
+
+  &__menu-leaf {
+    @include globals.rounded-sm;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0.5rem;
+
+    &--current, &:hover {
+      background: $background-current-item;
+    }
+  }
+
+  &__menu-link {
+    color: globals.$link-color;
+    flex: 1;
+    padding: 0.75rem 0;
+    text-decoration: none;
+  }
+}
+
+.base-switcher {
+  @include globals.reset-button;
+  font-family: globals.$font-family-data;
+  padding: 1rem;
+}