@mongoosejs/studio 0.2.12 → 0.3.0

package/frontend/src/models/models.js

@@ -13,6 +13,8 @@ appendCSS(require('./models.css'));
 const limit = 20;
 const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
 const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
+const RECENTLY_VIEWED_MODELS_KEY = 'studio:recently-viewed-models';
+const MAX_RECENT_MODELS = 4;
 
 module.exports = app => app.component('models', {
   template: template,
@@ -20,6 +22,7 @@ module.exports = app => app.component('models', {
   data: () => ({
     models: [],
     currentModel: null,
+    modelDocumentCounts: {},
     documents: [],
     schemaPaths: [],
     filteredPaths: [],
@@ -50,21 +53,28 @@ module.exports = app => app.component('models', {
     selectedGeoField: null,
     mapInstance: null,
     mapLayer: null,
+    mapTileLayer: null,
     hideSidebar: null,
     lastSelectedIndex: null,
     error: null,
     showActionsMenu: false,
-    collectionInfo: null
+    collectionInfo: null,
+    modelSearch: '',
+    recentlyViewedModels: [],
+    showModelSwitcher: false
   }),
   created() {
     this.currentModel = this.model;
     this.loadOutputPreference();
     this.loadSelectedGeoField();
+    this.loadRecentlyViewedModels();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
     document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
+    document.documentElement.removeEventListener('studio-theme-changed', this.onStudioThemeChanged);
+    document.removeEventListener('keydown', this.onCtrlP, true);
     this.destroyMap();
   },
   async mounted() {
@@ -82,8 +92,18 @@ module.exports = app => app.component('models', {
       }
     };
     document.addEventListener('click', this.onOutsideActionsMenuClick, true);
+    this.onStudioThemeChanged = () => this.updateMapTileLayer();
+    document.documentElement.addEventListener('studio-theme-changed', this.onStudioThemeChanged);
+    this.onCtrlP = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+        event.preventDefault();
+        this.openModelSwitcher();
+      }
+    };
+    document.addEventListener('keydown', this.onCtrlP, true);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
+    await this.loadModelCounts();
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
@@ -138,6 +158,21 @@ module.exports = app => app.component('models', {
       }
       return map;
     },
+    filteredModels() {
+      if (!this.modelSearch.trim()) {
+        return this.models;
+      }
+      const search = this.modelSearch.trim().toLowerCase();
+      return this.models.filter(m => m.toLowerCase().includes(search));
+    },
+    filteredRecentModels() {
+      const recent = this.recentlyViewedModels.filter(m => this.models.includes(m));
+      if (!this.modelSearch.trim()) {
+        return recent;
+      }
+      const search = this.modelSearch.trim().toLowerCase();
+      return recent.filter(m => m.toLowerCase().includes(search));
+    },
     geoJsonFields() {
       // Find schema paths that look like GeoJSON fields
       // GeoJSON fields have nested 'type' and 'coordinates' properties
@@ -190,6 +225,49 @@ module.exports = app => app.component('models', {
     }
   },
   methods: {
+    highlightMatch(model) {
+      const search = this.modelSearch.trim();
+      if (!search) {
+        return model;
+      }
+      const idx = model.toLowerCase().indexOf(search.toLowerCase());
+      if (idx === -1) {
+        return model;
+      }
+      const before = model.slice(0, idx);
+      const match = model.slice(idx, idx + search.length);
+      const after = model.slice(idx + search.length);
+      return `${xss(before)}<strong>${xss(match)}</strong>${xss(after)}`;
+    },
+    loadRecentlyViewedModels() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      try {
+        const stored = window.localStorage.getItem(RECENTLY_VIEWED_MODELS_KEY);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          if (Array.isArray(parsed)) {
+            this.recentlyViewedModels = parsed.map(item => String(item)).slice(0, MAX_RECENT_MODELS);
+          } else {
+            this.recentlyViewedModels = [];
+          }
+        }
+      } catch (err) {
+        this.recentlyViewedModels = [];
+      }
+    },
+    trackRecentModel(model) {
+      if (!model) {
+        return;
+      }
+      const filtered = this.recentlyViewedModels.filter(m => m !== model);
+      filtered.unshift(model);
+      this.recentlyViewedModels = filtered.slice(0, MAX_RECENT_MODELS);
+      if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(RECENTLY_VIEWED_MODELS_KEY, JSON.stringify(this.recentlyViewedModels));
+      }
+    },
     loadOutputPreference() {
       if (typeof window === 'undefined' || !window.localStorage) {
         return;
@@ -263,9 +341,7 @@ module.exports = app => app.component('models', {
       mapElement.style.setProperty('width', '100%', 'important');
 
       this.mapInstance = L.map(this.$refs.modelsMap).setView([0, 0], 2);
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; OpenStreetMap contributors'
-      }).addTo(this.mapInstance);
+      this.updateMapTileLayer();
 
       this.$nextTick(() => {
         if (this.mapInstance) {
@@ -274,11 +350,30 @@ module.exports = app => app.component('models', {
         }
       });
     },
+    getMapTileLayerOptions() {
+      const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+      return isDark
+        ? { url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>', subdomains: 'abcd', maxZoom: 20 }
+        : { url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '&copy; OpenStreetMap contributors' };
+    },
+    updateMapTileLayer() {
+      if (!this.mapInstance || typeof L === 'undefined') return;
+      if (this.mapTileLayer) {
+        this.mapTileLayer.remove();
+        this.mapTileLayer = null;
+      }
+      const opts = this.getMapTileLayerOptions();
+      this.mapTileLayer = L.tileLayer(opts.url, opts).addTo(this.mapInstance);
+    },
     destroyMap() {
       if (this.mapLayer) {
         this.mapLayer.remove();
         this.mapLayer = null;
       }
+      if (this.mapTileLayer) {
+        this.mapTileLayer.remove();
+        this.mapTileLayer = null;
+      }
       if (this.mapInstance) {
         this.mapInstance.remove();
         this.mapInstance = null;
@@ -589,6 +684,25 @@ module.exports = app => app.component('models', {
 
       return value.toLocaleString();
     },
+    formatCompactCount(value) {
+      if (typeof value !== 'number') {
+        return '—';
+      }
+      if (value < 1000) {
+        return `${value}`;
+      }
+      const formatValue = (number, suffix) => {
+        const rounded = (Math.round(number * 10) / 10).toFixed(1).replace(/\.0$/, '');
+        return `${rounded}${suffix}`;
+      };
+      if (value < 1000000) {
+        return formatValue(value / 1000, 'k');
+      }
+      if (value < 1000000000) {
+        return formatValue(value / 1000000, 'M');
+      }
+      return formatValue(value / 1000000000, 'B');
+    },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
         return 'text-gray-500';
@@ -599,6 +713,9 @@ module.exports = app => app.component('models', {
       }
     },
     async getDocuments() {
+      // Track recently viewed model
+      this.trackRecentModel(this.currentModel);
+
       // Clear previous data
       this.documents = [];
       this.schemaPaths = [];
@@ -842,6 +959,27 @@ module.exports = app => app.component('models', {
       } else {
         this.selectMultiple = true;
       }
+    },
+    openModelSwitcher() {
+      this.showModelSwitcher = true;
+    },
+    selectSwitcherModel(model) {
+      this.showModelSwitcher = false;
+      this.trackRecentModel(model);
+      this.$router.push('/model/' + model);
+    },
+    async loadModelCounts() {
+      if (!Array.isArray(this.models) || this.models.length === 0) {
+        return;
+      }
+      try {
+        const { counts } = await api.Model.getEstimatedDocumentCounts();
+        if (counts && typeof counts === 'object') {
+          this.modelDocumentCounts = counts;
+        }
+      } catch (err) {
+        console.error('Failed to load model document counts', err);
+      }
     }
   }
 });

package/frontend/src/navbar/navbar.html

@@ -1,12 +1,67 @@
-<div class="navbar w-full bg-white flex justify-between border-b border-gray-200 !h-[55px]">
-  <div class="flex items-center gap-4 md:gap-6 h-full pl-4">
-    <router-link :to="{ name: defaultRoute }">
-      <img src="images/logo.svg" class="h-10 mr-1" alt="Mongoose Studio Logo" />
+<div class="navbar w-full bg-page border-b border-edge !h-[55px] hidden md:grid grid-cols-[1fr_auto_1fr] items-stretch px-4">
+  <!-- Left: Logo + Brand -->
+  <div class="flex items-center gap-2 self-center">
+    <router-link class="flex items-center gap-2" :to="{ name: defaultRoute }">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-primary" viewBox="0 0 250 250" fill="currentColor" aria-label="Mongoose Studio Logo">
+        <path d="M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z"/>
+        <path d="M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z"/>
+      </svg>
+      <span class="text-base font-semibold text-content whitespace-nowrap">Mongoose Studio</span>
     </router-link>
+  </div>
+  <!-- Center: Nav Links -->
+  <nav class="flex items-stretch gap-6">
+    <a v-if="hasAccess(roles, 'root')"
+      href="#/"
+      class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
+      :class="documentView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">Documents</a>
+    <span v-else class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed" aria-disabled="true">
+      Documents
+      <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+      </svg>
+    </span>
+    <a v-if="hasAccess(roles, 'dashboards')"
+      href="#/dashboards"
+      class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
+      :class="dashboardView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">Dashboards</a>
+    <span v-else class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed">
+      Dashboards
+      <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+      </svg>
+    </span>
+    <a v-if="hasAccess(roles, 'chat')"
+      href="#/chat"
+      class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
+      :class="chatView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">Chat</a>
+    <span v-else class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed">
+      Chat
+      <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+      </svg>
+    </span>
+    <a
+      :href="hasTaskVisualizer"
+      class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
+      :class="taskView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">
+      Tasks
+    </a>
+    <a
+      href="https://studio.mongoosejs.io/docs"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-content-tertiary hover:text-content"
+    >
+      Docs
+    </a>
+  </nav>
+  <!-- Right: Env Badge + User -->
+  <div class="flex items-center justify-end gap-3 self-center">
     <div
       v-if="!!state.nodeEnv"
       title="NODE_ENV"
-      class="inline-flex items-center rounded px-2 py-1 text-xs text-gray-500 bg-white border border-gray-200 gap-2"
+      class="inline-flex items-center rounded px-2 py-1 text-xs text-content-tertiary bg-surface border border-edge gap-2"
     >
       <span
         :class="warnEnv ? 'bg-red-400' : 'bg-yellow-400'"
@@ -15,94 +70,77 @@
       ></span>
       <span>{{state.nodeEnv}}</span>
     </div>
-  </div>
-  <div class="h-full pr-4 hidden md:block">
-    <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">
-      <a v-if="hasAccess(roles, 'root')"
-        href="#/"
-        class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-        :class="documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
-      <span v-else class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed" aria-disabled="true">
-        Documents
-        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
-        </svg>
-      </span>
-      <a v-if="hasAccess(roles, 'dashboards')"
-        href="#/dashboards"
-        class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
-        :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
-      <span v-else class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 cursor-not-allowed">
-        Dashboards
-        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
-        </svg>
-      </span>
-      <a v-if="hasAccess(roles, 'chat')"
-        href="#/chat"
-        class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
-        :class="chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Chat</a>
-      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
-        Chat
-        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
-        </svg>
-      </span>
-      <a
-      :href="hasTaskVisualizer"
-      class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
-      :class="taskView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">
-      Tasks
-      </a>
-      <a
-        href="https://studio.mongoosejs.io/docs"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 border-transparent"
-      >
-        Docs
-        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4" viewBox="0 -960 960 960" fill="currentColor"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>
-      </a>
+    <button
+      v-if="!user || !hasAPIKey"
+      type="button"
+      @click="toggleDarkMode"
+      :title="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+      class="inline-flex items-center justify-center rounded-md p-2 text-content-tertiary hover:text-content-secondary hover:bg-muted"
+      aria-label="Toggle dark mode">
+      <svg v-if="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+      </svg>
+    </button>
+    <div class="flex items-center" v-if="!user && hasAPIKey">
+      <button
+        type="button"
+        @click="loginWithGithub"
+        class="rounded bg-primary px-2 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+          Login
+      </button>
+    </div>
+    <div v-if="user && hasAPIKey" class="flex items-center relative" v-clickOutside="hideFlyout">
+      <button type="button" @click="showFlyout = !showFlyout" class="relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+        <span class="absolute -inset-1.5"></span>
+        <span class="sr-only">Open user menu</span>
+        <img class="size-8 rounded-full" :src="user.picture" alt="">
+      </button>
 
-      <div class="h-full flex items-center" v-if="!user && hasAPIKey">
+      <div
+        v-if="showFlyout"
+        class="absolute right-0 top-[90%] w-48 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="user-menu-button"
+        style="z-index: 10000"
+        tabindex="-1">
         <button
           type="button"
-          @click="loginWithGithub"
-          class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
-            Login
-        </button>
-      </div>
-      <div v-if="user && hasAPIKey" class="h-full flex items-center relative" v-clickOutside="hideFlyout">
-        <div>
-          <button type="button" @click="showFlyout = !showFlyout" class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-            <span class="absolute -inset-1.5"></span>
-            <span class="sr-only">Open user menu</span>
-            <img class="size-8 rounded-full" :src="user.picture" alt="">
-          </button>
-        </div>
-
-        <div
-          v-if="showFlyout"
-          class="absolute right-0 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="user-menu-button"
-          style="z-index: 10000"
+          @click="toggleDarkMode(); showFlyout = false"
+          class="w-full cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle text-left flex items-center gap-2"
+          role="menuitem"
           tabindex="-1">
-          <router-link to="/team" v-if="hasAccess(roles, 'team')" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
-          <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
-            Team
-            <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
-            </svg>
-          </span>
-          <span @click="logout" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</span>
-        </div>
+          <svg v-if="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+          {{ darkMode ? 'Light mode' : 'Dark mode' }}
+        </button>
+        <router-link to="/team" v-if="hasAccess(roles, 'team')" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
+        <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
+          Team
+          <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+          </svg>
+        </span>
+        <span @click="logout" class="cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</span>
       </div>
-
     </div>
   </div>
-  <div class="md:hidden flex items-center">
+</div>
+<!-- Mobile navbar -->
+<div class="navbar w-full bg-page flex justify-between border-b border-edge !h-[55px] md:hidden">
+  <div class="flex items-center gap-2 pl-4">
+    <router-link class="flex items-center gap-2" :to="{ name: defaultRoute }">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 text-primary" viewBox="0 0 250 250" fill="currentColor" aria-label="Mongoose Studio Logo">
+        <path d="M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z"/>
+        <path d="M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z"/>
+      </svg>
+      <span class="text-base font-semibold text-content">Mongoose Studio</span>
+    </router-link>
+  </div>
+  <div class="flex items-center">
     <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
     <button type="button" id="open-mobile-menu" class="-ml-2 rounded-md p-2 pr-4 text-gray-400">
       <span class="sr-only">Open menu</span>
@@ -115,10 +153,13 @@
   <!-- Mobile menu mask -->
   <div id="mobile-menu-mask" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
   <!-- Mobile menu drawer -->
-  <div id="mobile-menu" style="z-index: 1000" class="fixed inset-0 bg-white shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
-    <div class="flex items-center justify-between px-4 !h-[55px] border-b border-gray-200">
+  <div id="mobile-menu" style="z-index: 10000" class="fixed inset-0 bg-page shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+    <div class="flex items-center justify-between px-4 !h-[55px] border-b border-edge">
       <router-link :to="{ name: defaultRoute }">
-        <img src="images/logo.svg" class="h-[32px]" alt="Mongoose Studio Logo" />
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-[32px] text-primary" viewBox="0 0 250 250" fill="currentColor" aria-label="Mongoose Studio Logo">
+          <path d="M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z"/>
+          <path d="M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z"/>
+        </svg>
       </router-link>
       <button type="button" id="close-mobile-menu" class="text-gray-400 p-2 rounded-md">
         <span class="sr-only">Close menu</span>
@@ -128,10 +169,21 @@
       </button>
     </div>
     <nav class="flex-1 px-4 py-4 space-y-2">
+      <div class="flex items-center gap-2 px-3 py-2" v-if="!user || !hasAPIKey">
+        <button
+          type="button"
+          @click="toggleDarkMode"
+          class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium text-content-secondary hover:bg-muted"
+          aria-label="Toggle dark mode">
+          <svg v-if="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+          <span>{{ darkMode ? 'Light mode' : 'Dark mode' }}</span>
+        </button>
+      </div>
       <a v-if="hasAccess(roles, 'root')"
         href="#/"
         class="block px-3 py-2 rounded-md text-base font-medium"
-        :class="documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Documents</a>
+        :class="documentView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Documents</a>
       <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
         Documents
         <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -141,7 +193,7 @@
       <a v-if="hasAccess(roles, 'dashboards')"
         href="#/dashboards"
         class="block px-3 py-2 rounded-md text-base font-medium"
-        :class="dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Dashboards</a>
+        :class="dashboardView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Dashboards</a>
       <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
         Dashboards
         <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -151,7 +203,7 @@
       <a v-if="hasAccess(roles, 'chat')"
         href="#/chat"
         class="block px-3 py-2 rounded-md text-base font-medium"
-        :class="chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Chat</a>
+        :class="chatView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Chat</a>
       <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
         Chat
         <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -162,24 +214,32 @@
         <button
           type="button"
           @click="loginWithGithub"
-          class="w-full rounded bg-ultramarine-600 px-3 py-2 text-base font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+          class="w-full rounded bg-muted text-content px-3 py-2 text-base font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             Login
         </button>
       </div>
       <div v-if="user && hasAPIKey" class="mt-4">
-        <div class="flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md">
+        <div class="flex items-center gap-3 px-3 py-2 bg-page rounded-md">
           <img class="size-8 rounded-full" :src="user.picture" alt="">
-          <span class="text-gray-900 font-medium">{{ user.name }}</span>
+          <span class="text-content font-medium">{{ user.name }}</span>
         </div>
         <div class="mt-2 space-y-1">
-          <router-link to="/team" v-if="hasAccess(roles, 'team')" class="block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100">Team</router-link>
+          <button
+            type="button"
+            @click="toggleDarkMode"
+            class="w-full inline-flex items-center gap-2 px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle text-left">
+            <svg v-if="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+            {{ darkMode ? 'Light mode' : 'Dark mode' }}
+          </button>
+          <router-link to="/team" v-if="hasAccess(roles, 'team')" class="block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle">Team</router-link>
           <span v-else class="block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed">
             Team
             <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
             </svg>
           </span>
-          <span @click="logout" class="block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer">Sign out</span>
+          <span @click="logout" class="block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle cursor-pointer">Sign out</span>
         </div>
       </div>
     </nav>