@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/models/model-switcher/model-switcher.js

@@ -0,0 +1,123 @@
+'use strict';
+
+const template = require('./model-switcher.html');
+const xss = require('xss');
+
+module.exports = app => app.component('model-switcher', {
+  template: template,
+  props: ['show', 'models', 'recentlyViewedModels', 'modelDocumentCounts'],
+  emits: ['close', 'select'],
+  data: () => ({
+    search: '',
+    selectedIndex: 0
+  }),
+  mounted() {
+    this.lastMouseMove = 0;
+    this.trackLastMouseMove = () => {
+      this.lastMouseMove = Date.now();
+    };
+
+    window.addEventListener('mousemove', this.trackLastMouseMove);
+  },
+  beforeUnmount() {
+    window.removeEventListener('mousemove', this.trackLastMouseMove);
+  },
+  watch: {
+    search() {
+      this.selectedIndex = 0;
+    },
+    show(val) {
+      if (val) {
+        this.search = '';
+        this.selectedIndex = 0;
+        this.$nextTick(() => {
+          if (this.$refs.searchInput) this.$refs.searchInput.focus();
+        });
+      }
+    }
+  },
+  computed: {
+    items() {
+      const items = [];
+      const search = this.search.trim().toLowerCase();
+      const recent = (this.recentlyViewedModels || []).filter(m => this.models.includes(m));
+
+      if (!search && recent.length > 0) {
+        for (const model of recent) {
+          items.push({ model, section: 'Recently Viewed' });
+        }
+      }
+
+      const filtered = search
+        ? this.models.filter(m => m.toLowerCase().includes(search))
+        : this.models;
+
+      for (const model of filtered) {
+        items.push({ model, section: search ? 'Search Results' : 'All Models' });
+      }
+
+      return items;
+    }
+  },
+  methods: {
+    selectModel(model) {
+      this.$emit('select', model);
+    },
+    onMouseEnter(index) {
+      // If user hasn't moved mouse recently, then this event was likely triggered by scroll
+      if (this.lastMouseMove <= Date.now() - 500) {
+        return;
+      }
+      this.selectedIndex = index;
+    },
+    handleKeydown(event) {
+      const items = this.items;
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1);
+        this.scrollSelectedIntoView();
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+        this.scrollSelectedIntoView();
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (items.length > 0 && items[this.selectedIndex]) {
+          this.selectModel(items[this.selectedIndex].model);
+        }
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        this.$emit('close');
+      }
+    },
+    scrollSelectedIntoView() {
+      this.$nextTick(() => {
+        const container = this.$refs.list;
+        if (!container) return;
+        const selected = container.querySelector('[data-selected="true"]');
+        if (selected) selected.scrollIntoView({ block: 'nearest' });
+      });
+    },
+    highlightMatch(model) {
+      const search = this.search.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)}`;
+    },
+    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');
+    }
+  }
+});

package/frontend/src/models/models.css

@@ -11,7 +11,6 @@
 }
 
 .models .model-selector {
-  background-color: #eee;
   flex-grow: 0;
   padding: 15px;
   padding-top: 0px;
@@ -82,17 +81,11 @@
 }
 
 .models .documents-menu {
-  position: fixed;
-  z-index: 1;
+  position: sticky;
+  top: 0;
+  z-index: 2;
   padding: 4px;
   display: flex;
-  width: 100vw;
-}
-
-@media (min-width: 1024px) {
-  .models .documents-menu {
-    width: calc(100vw - 12rem);
-  }
 }
 
 .models .documents-menu .search-input {

package/frontend/src/models/models.html

@@ -1,48 +1,107 @@
 <div class="models flex" style="height: calc(100vh - 55px); height: calc(100dvh - 55px)">
-  <div class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10" @click="hideSidebar = false">
-    <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" fill="#5f6368"><path d="M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z"/></svg>
-  </div>
-  <aside class="bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0" :class="hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''">
-    <div class="flex items-center border-b border-gray-100 w-48 overflow-x-hidden">
-      <div class="p-1 ml-2 font-bold">Models</div>
-      <button
-        @click="hideSidebar = true"
-        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none"
-        aria-label="Close sidebar"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" fill="currentColor"><path d="M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>
-      </button>
+  <aside class="bg-page border-r overflow-hidden transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative shrink-0 flex flex-col top-[55px] bottom-0 lg:top-auto lg:bottom-auto lg:h-full" :class="hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''">
+    <!-- Search -->
+    <div class="p-3 shrink-0">
+      <div class="relative">
+        <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+        <input
+          v-model="modelSearch"
+          type="text"
+          placeholder="Find model..."
+          @keydown.esc="modelSearch = ''"
+          class="w-full rounded-md border border-edge bg-surface py-1.5 pl-8 pr-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300"
+        />
+      </div>
     </div>
-    <nav class="flex flex-1 flex-col">
-      <ul role="list" class="flex flex-1 flex-col gap-y-7 p-1">
-        <li>
-          <ul role="list">
-            <li v-for="model in models">
-              <router-link
-                :to="'/model/' + model"
-                class="flex items-center gap-2 rounded-md py-2 pr-2 pl-2 text-sm text-gray-700"
-                :class="model === currentModel ? 'bg-ultramarine-100 font-bold text-gray-900' : 'hover:bg-ultramarine-50'">
-                <span class="truncate">{{model}}</span>
-                <span
-                  v-if="modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel"
-                  class="ml-auto text-xs text-gray-500 bg-gray-100 rounded-md px-1 py-[2px]"
-                >
-                  {{formatCompactCount(modelDocumentCounts[model])}}
-                </span>
-              </router-link>
-            </li>
-          </ul>
+    <!-- Model list (scrollable) -->
+    <nav class="flex-1 overflow-y-auto px-2 pb-2">
+      <!-- Recently Viewed -->
+      <div v-if="filteredRecentModels.length > 0 && !modelSearch.trim()">
+        <div class="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Recently Viewed</div>
+        <ul role="list">
+          <li v-for="model in filteredRecentModels" :key="'recent-' + model">
+            <router-link
+              :to="'/model/' + model"
+              class="flex items-center rounded-md py-1.5 px-2 text-sm text-content-secondary"
+              :class="model === currentModel ? 'bg-gray-200 font-semibold text-content' : 'hover:bg-muted'">
+              <span class="truncate" v-html="highlightMatch(model)"></span>
+              <span
+                v-if="modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel"
+                class="ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]"
+              >
+                {{formatCompactCount(modelDocumentCounts[model])}}
+              </span>
+            </router-link>
+          </li>
+        </ul>
+        <div class="border-b border-edge my-2"></div>
+      </div>
+      <!-- All Models / Search Results -->
+      <div class="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ modelSearch.trim() ? 'Search Results' : 'All Models' }}</div>
+      <ul role="list">
+        <li v-for="model in filteredModels" :key="'all-' + model">
+          <router-link
+            :to="'/model/' + model"
+            class="flex items-center rounded-md py-1.5 px-2 text-sm text-content-secondary"
+            :class="model === currentModel ? 'bg-gray-200 font-semibold text-content' : 'hover:bg-muted'">
+            <span class="truncate" v-html="highlightMatch(model)"></span>
+            <span
+              v-if="modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel"
+              class="ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]"
+            >
+              {{formatCompactCount(modelDocumentCounts[model])}}
+            </span>
+          </router-link>
         </li>
       </ul>
-      <div v-if="models.length === 0 && status === 'loaded'" class="p-2 bg-red-100">
+      <div v-if="filteredModels.length === 0 && modelSearch.trim()" class="px-2 py-2 text-sm text-content-tertiary">
+        No models match "{{modelSearch}}"
+      </div>
+      <div v-if="models.length === 0 && status === 'loaded'" class="p-2 bg-red-100 rounded-md">
         No models found
       </div>
     </nav>
+    <!-- Bottom toolbar -->
+    <div class="shrink-0 border-t border-edge bg-page px-2 py-1.5 flex items-center gap-1">
+      <button
+        type="button"
+        @click="hideSidebar = true"
+        class="rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted"
+        title="Hide sidebar"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        @click="openModelSwitcher"
+        class="rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted"
+        title="Quick switch (Ctrl+P)"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
   </aside>
-  <div class="documents bg-slate-50" ref="documentsList">
-    <div class="relative h-[42px]" style="z-index: 1000">
+  <div class="documents bg-slate-50 min-w-0" ref="documentsList">
       <div class="documents-menu bg-slate-50">
         <div class="flex flex-row items-center w-full gap-2">
+          <button
+            v-if="hideSidebar === true || hideSidebar === null"
+            type="button"
+            @click="hideSidebar = false"
+            class="shrink-0 rounded-md p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted"
+            :class="hideSidebar === null ? 'lg:hidden' : ''"
+            title="Show sidebar"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
+            </svg>
+          </button>
           <document-search
             ref="documentSearch"
             :value="searchText"
@@ -57,8 +116,8 @@
           <button
             @click="stagingSelect"
             type="button"
-            :class="{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }"
-            class="rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
+            :class="{ 'bg-page0 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-primary hover:bg-primary-hover' : !selectMultiple }"
+            class="rounded px-2 py-2 text-sm font-semibold text-primary-text shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
           >
             {{ selectMultiple ? 'Cancel' : 'Select' }}
           </button>
@@ -83,55 +142,55 @@
               @click="toggleActionsMenu"
               type="button"
               aria-label="More actions"
-              class="rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+              class="rounded bg-surface px-2 py-2 text-sm font-semibold text-content-secondary shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-page focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
               </svg>
             </button>
             <div
               v-if="showActionsMenu"
-              class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20"
+              class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20"
             >
               <div class="py-1">
                 <button
                   @click="shouldShowExportModal = true; showActionsMenu = false"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
                   Export
                 </button>
                 <button
                   @click="shouldShowCreateModal = true; showActionsMenu = false"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
                   Create
                 </button>
                 <button
                   @click="openFieldSelection(); showActionsMenu = false"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
                   Projection
                 </button>
                 <button
                   @click="openIndexModal"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
                   Indexes
                 </button>
                 <button
                   @click="openCollectionInfo"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
                   Collection Info
                 </button>
                 <button
                   @click="findOldestDocument"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
                   Find oldest document
                 </button>
@@ -142,15 +201,15 @@
             <button
               @click="setOutputType('table')"
               type="button"
-              class="relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-              :class="outputType === 'table' ? 'bg-gray-200' : 'bg-white'">
+              class="relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-page focus:z-10"
+              :class="outputType === 'table' ? 'bg-gray-200' : 'bg-surface'">
               <img class="h-5 w-5" src="images/table.svg">
             </button>
             <button
               @click="setOutputType('json')"
               type="button"
-              class="relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-              :class="outputType === 'json' ? 'bg-gray-200' : 'bg-white'">
+              class="relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-page focus:z-10"
+              :class="outputType === 'json' ? 'bg-gray-200' : 'bg-surface'">
               <img class="h-5 w-5" src="images/json.svg">
             </button>
             <button
@@ -160,8 +219,8 @@
               :title="geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'"
               class="relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10"
               :class="[
-                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-gray-100' : 'text-gray-400 hover:bg-gray-50',
-                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-white' : '')
+                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-muted' : 'text-gray-400 hover:bg-page',
+                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-surface' : '')
               ]">
               <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
@@ -170,7 +229,6 @@
           </span>
         </div>
       </div>
-    </div>
     <div class="documents-container relative">
       <div v-if="error">
         <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md" role="alert">
@@ -180,7 +238,7 @@
       </div>
       <table v-else-if="outputType === 'table'">
         <thead class="bg-slate-50">
-          <th v-for="path in filteredPaths" @click="addPathFilter(path.path)" class="cursor-pointer p-3">
+          <th v-for="path in filteredPaths" @click="addPathFilter(path.path)" class="bg-slate-50 cursor-pointer p-3">
             {{path.path}}
             <span class="path-type">
               ({{(path.instance || 'unknown')}})
@@ -190,7 +248,7 @@
           </th>
         </thead>
         <tbody>
-          <tr v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id" class="bg-white hover:bg-slate-50">
+          <tr v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id" class="bg-surface hover:bg-slate-50">
             <td v-for="schemaPath in filteredPaths" class="p-3 cursor-pointer" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
               <component
                 :is="getComponentForPath(schemaPath)"
@@ -208,12 +266,12 @@
           @click="handleDocumentContainerClick(document, $event)"
           :class="[
             'group relative transition-colors rounded-md border border-slate-100',
-            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-white'
+            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-surface'
           ]"
         >
           <button
             type="button"
-            class="absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
+            class="absolute top-2 right-2 z-10 inline-flex items-center rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-text shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
             @click.stop="openDocument(document)"
           >
             Open this Document
@@ -223,12 +281,12 @@
         </div>
       </div>
       <div v-else-if="outputType === 'map'" class="flex flex-col h-full">
-        <div class="p-2 bg-white border-b flex items-center gap-2">
-          <label class="text-sm font-medium text-gray-700">GeoJSON Field:</label>
+        <div class="p-2 bg-surface border-b flex items-center gap-2">
+          <label class="text-sm font-medium text-content-secondary">GeoJSON Field:</label>
           <select
             :value="selectedGeoField"
             @change="setSelectedGeoField($event.target.value)"
-            class="rounded-md border border-gray-300 py-1 px-2 text-sm focus:border-ultramarine-500 focus:ring-ultramarine-500"
+            class="rounded-md border border-edge-strong py-1 px-2 text-sm focus:border-primary focus:ring-primary"
           >
             <option v-for="field in geoJsonFields" :key="field.path" :value="field.path">
               {{ field.label }}
@@ -238,8 +296,8 @@
             @click="loadMoreDocuments"
             :disabled="loadedAllDocs"
             type="button"
-            class="rounded px-2 py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
-            :class="loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-ultramarine-600 hover:bg-ultramarine-500'"
+            class="rounded px-2 py-1 text-xs font-semibold text-primary-text shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            :class="loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary hover:bg-primary-hover'"
           >
             Load more
           </async-button>
@@ -271,7 +329,7 @@
           <div>
             <div class="font-bold flex items-center gap-2">
               <div>{{ index.name }}</div>
-              <div v-if="isTTLIndex(index)" class="rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700">
+              <div v-if="isTTLIndex(index)" class="rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-semibold text-primary">
                 TTL: {{ formatTTL(index.expireAfterSeconds) }}
               </div>
             </div>
@@ -296,33 +354,33 @@
       <div v-if="!collectionInfo" class="text-gray-600">Loading collection details...</div>
       <div v-else class="space-y-3">
         <div class="flex justify-between gap-4">
-          <div class="font-semibold text-gray-700">Documents</div>
-          <div class="text-gray-900">{{ formatNumber(collectionInfo.documentCount) }}</div>
+          <div class="font-semibold text-content-secondary">Documents</div>
+          <div class="text-content">{{ formatNumber(collectionInfo.documentCount) }}</div>
         </div>
         <div class="flex justify-between gap-4">
-          <div class="font-semibold text-gray-700">Indexes</div>
-          <div class="text-gray-900">{{ formatNumber(collectionInfo.indexCount) }}</div>
+          <div class="font-semibold text-content-secondary">Indexes</div>
+          <div class="text-content">{{ formatNumber(collectionInfo.indexCount) }}</div>
         </div>
         <div class="flex justify-between gap-4">
-          <div class="font-semibold text-gray-700">Total Index Size</div>
-          <div class="text-gray-900">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>
+          <div class="font-semibold text-content-secondary">Total Index Size</div>
+          <div class="text-content">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>
         </div>
         <div class="flex justify-between gap-4">
-          <div class="font-semibold text-gray-700">Total Storage Size</div>
-          <div class="text-gray-900">{{ formatCollectionSize(collectionInfo.size) }}</div>
+          <div class="font-semibold text-content-secondary">Total Storage Size</div>
+          <div class="text-content">{{ formatCollectionSize(collectionInfo.size) }}</div>
         </div>
         <div class="flex flex-col gap-1">
           <div class="flex justify-between gap-4">
-            <div class="font-semibold text-gray-700">Collation</div>
-            <div class="text-gray-900">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>
+            <div class="font-semibold text-content-secondary">Collation</div>
+            <div class="text-content">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>
           </div>
-          <div v-if="collectionInfo.hasCollation" class="rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto">
+          <div v-if="collectionInfo.hasCollation" class="rounded bg-muted p-3 text-sm text-gray-800 overflow-x-auto">
             <pre class="whitespace-pre-wrap">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>
           </div>
         </div>
         <div class="flex justify-between gap-4">
-          <div class="font-semibold text-gray-700">Capped</div>
-          <div class="text-gray-900">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>
+          <div class="font-semibold text-content-secondary">Capped</div>
+          <div class="text-content">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>
         </div>
       </div>
     </template>
@@ -331,16 +389,16 @@
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>
       <div v-for="(path, index) in schemaPaths" :key="index" class="w-5 flex items-center">
-        <input  class="mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600" type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
-        <div class="ml-2 text-gray-700 grow shrink text-left">
+        <input  class="mt-0 h-4 w-4 rounded border-edge-strong text-sky-600 focus:ring-sky-600 accent-sky-600" type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
+        <div class="ml-2 text-content-secondary grow shrink text-left">
           <label :for="'path.path' + index">{{path.path}}</label>
         </div>
       </div>
       <div class="mt-4 flex gap-2">
-        <button type="button" @click="filterDocuments()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600">Filter Selection</button>
+        <button type="button" @click="filterDocuments()" class="rounded-md bg-primary px-2.5 py-1.5 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-teal-600">Filter Selection</button>
         <button type="button" @click="selectAll()" class="rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">Select All</button>
         <button type="button" @click="deselectAll()" class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Deselect All</button>
-        <button type="button" @click="resetDocuments()" class="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" >Cancel</button>
+        <button type="button" @click="resetDocuments()" class="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-page0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" >Cancel</button>
       </div>
     </template>
   </modal>
@@ -367,10 +425,18 @@
         <async-button @click="deleteDocuments" class="rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
           Confirm
         </async-button>
-        <button @click="shouldShowDeleteMultipleModal = false;" class="rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+        <button @click="shouldShowDeleteMultipleModal = false;" class="rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-page0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
           Cancel
         </button>
       </div>
     </template>
   </modal>
+  <model-switcher
+    :show="showModelSwitcher"
+    :models="models"
+    :recently-viewed-models="recentlyViewedModels"
+    :model-document-counts="modelDocumentCounts"
+    @close="showModelSwitcher = false"
+    @select="selectSwitcherModel"
+  ></model-switcher>
 </div>