improve navigation

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

@@ -45,7 +45,7 @@ pub(super) fn new_router() -> Router<App> {
             post(update_name_handler::post),
         )
         .route(
-            "/{workspace_id}/add-service-credential",
+            "/{workspace_id}/service-credentials/add-service-credential",
             post(add_service_credential_handler::post),
         )
         .route("/{workspace_id}/add-table", post(add_table_handler::post))

phono-server/templates/list_bases.html

@@ -1,17 +0,0 @@
-{% extends "base.html" %}
-
-{% block main %}
-<table>
-  <tbody>
-    {% for base in bases %}
-    <tr>
-      <td>
-        <a href="{{ settings.root_path }}/d/{{ base.id.simple() }}/config">
-          {{ base.name }}
-        </a>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% endblock %}

phono-server/templates/portal_table.html

@@ -1,7 +1,12 @@
 {% extends "base.html" %}
 
-{% block main %}
+{% block head_extras %}
 <link rel="stylesheet" href="{{ settings.root_path }}/css_dist/viewer.css">
+<script type="module" src="{{ settings.root_path }}/js_dist/table-viewer.webc.mjs"></script>
+<script type="module" src="{{ settings.root_path }}/js_dist/filter-menu.webc.mjs"></script>
+{% endblock %}
+
+{% block main %}
 <div class="page-grid">
   <div class="page-grid__toolbar">
     <div class="page-grid__toolbar-utilities">
@@ -24,6 +29,4 @@
     <table-viewer columns="{{ columns | json }}"></table-viewer>
   </main>
 </div>
-<script type="module" src="{{ settings.root_path }}/js_dist/table-viewer.webc.mjs"></script>
-<script type="module" src="{{ settings.root_path }}/js_dist/filter-menu.webc.mjs"></script>
 {% endblock %}

phono-server/templates/workspace_nav.html

@@ -47,8 +47,8 @@
         method="post"
       >
         <!-- FIXME: CSRF -->
-        <button aria-label="Add table" class="button--secondary button--small" type="submit">
-          <i class="ti ti-database-plus"></i>
+        <button class="button--secondary button--small" type="submit">
+          <i class="ti ti-database-plus"><div class="sr-only">Add table</div></i>
         </button>
       </form>
     </div>

phono-server/templates/workspaces_multi/list.html

@@ -1,23 +1,52 @@
 {% extends "base.html" %}
 
+{% block head_extras %}
+{% endblock %}
+
 {% block main %}
-<main>
-  <h1>Workspaces</h1>
+<div class="page-grid">
+  <div class="page-grid__toolbar">
+    {% include "toolbar_user.html" %}
+  </div>
+  <main class="page-grid__main">
+    <nav class="workspace-nav" style="position: relative; margin: 0 auto; max-width: 540px;">
+      <section class="workspace-nav__section">
+        <div class="workspace-nav__heading">
+          <h1>My Workspaces</h1>
           <form method="post" action="add">
-    <button class="button--primary" type="submit">+</button>
+            <button class="button--secondary button--small" type="submit">
+              <i class="ti ti-plus"><div class="sr-only">Add workspace</div></i>
+            </button>
           </form>
-  <ul>
+        </div>
+        <menu class="workspace-nav__menu">
           {% for workspace_perm in workspace_perms %}
-    <li>
-      <a href="{{ navigator.workspace_page().workspace_id(*workspace_perm.workspace_id).build()?.get_path() }}">
+          <li class="workspace-nav__menu-item">
+            <div class="workspace-nav__menu-leaf">
+              <a href="
+              {{- navigator
+                .workspace_page()
+                .workspace_id(*workspace_perm.workspace_id)
+                .build()?
+                .get_path() -}}
+              " class="workspace-nav__menu-link">
                 {% if workspace_perm.workspace_display_name.is_empty() %}
                 [Untitled Workspace]
                 {% else %}
                 {{ workspace_perm.workspace_display_name }}
                 {% endif %}
               </a>
+            </div>
           </li>
           {% endfor %}
-  </ul>
-</main>
+        </menu>
+      </section>
+      <section class="workspace-nav__section">
+        <div class="workspace-nav__heading">
+          <h1>Shared With Me</h1>
+        </div>
+      </section>
+    </nav>
+  </main>
+</div>
 {% endblock %}

phono-server/templates/workspaces_single/nav.html

@@ -1,8 +1,16 @@
 {% extends "base.html" %}
 
 {% block main %}
-<main style="position: relative; margin: 0 auto; max-width: 32rem;">
-  <h1>{{ workspace.display_name }}</h1>
+<div class="page-grid">
+  <div class="page-grid__toolbar">
+    {% include "toolbar_user.html" %}
+  </div>
+  <div class="page-grid__sidebar">
+    <div style="padding: 1rem;">
       {{ workspace_nav | safe }}
-</main>
+    </div>
+  </div>
+  <main class="page-grid__main">
+  </main>
+</div>
 {% endblock %}

sass/workspace-nav.scss

@@ -78,9 +78,3 @@ $background-current-item: #0001;
     text-decoration: none;
   }
 }
-
-.base-switcher {
-  @include globals.reset-button;
-  font-family: globals.$font-family-data;
-  padding: 1rem;
-}