@mongoosejs/studio 0.2.13 → 0.3.1

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -6,15 +6,20 @@ const template = require('./edit-dashboard.html');
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
-  emits: ['close'],
+  emits: ['close', 'update'],
   data: function() {
     return {
       status: 'loaded',
-      editor: null,
       title: '',
-      description: ''
+      description: '',
+      editCode: ''
     };
   },
+  mounted() {
+    this.editCode = this.code || '';
+    this.description = this.currentDescription;
+    this.title = this.currentTitle;
+  },
   methods: {
     closeEditor() {
       this.$emit('close');
@@ -22,39 +27,27 @@ module.exports = app => app.component('edit-dashboard', {
     async updateCode() {
       this.status = 'loading';
       try {
+        const codeToSave = this.$refs.codeEditor?.getValue ? this.$refs.codeEditor.getValue() : this.editCode;
         const { doc } = await api.Dashboard.updateDashboard({
           dashboardId: this.dashboardId,
-          code: this.editor.getValue(),
+          code: codeToSave,
           title: this.title,
           description: this.description,
           evaluate: false
         });
         this.$emit('update', { doc });
-        this.editor.setValue(doc.code);
+        this.editCode = doc.code;
+        if (this.$refs.codeEditor) {
+          this.$refs.codeEditor.setValue(doc.code);
+        }
         this.$toast.success('Dashboard updated!');
         this.closeEditor();
       } catch (err) {
-        this.$emit('update', { error: { message: err.message } });
+        const message = err?.response?.data?.message || err?.message || 'Dashboard update failed';
+        this.$emit('update', { error: { message } });
       } finally {
         this.status = 'loaded';
       }
     }
-  },
-  mounted: async function() {
-    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
-      mode: 'javascript',
-      lineNumbers: true,
-      indentUnit: 4,
-      smartIndent: true,
-      tabsize: 4,
-      indentWithTabs: true,
-      cursorBlinkRate: 300,
-      lineWrapping: true,
-      showCursorWhenSelecting: true
-    });
-    // this.editor.focus();
-    // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
-    this.description = this.currentDescription;
-    this.title = this.currentTitle;
   }
 });

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html

@@ -1,30 +1,32 @@
 <div :class="responsive ? 'h-full' : ''">
   <div v-if="header && !fullscreen" class="border-b border-gray-100 px-2 pb-2 flex items-center gap-1">
     <div class="text-xl font-bold">{{header}}</div>
-    <button
-      class="ml-auto px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
-      @click="exportPNG"
-      title="Export PNG">
-      <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
-    </button>
-    <button
-      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center"
-      @click="$emit('fullscreen')"
-      aria-label="Expand dashboard result">
-      <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5" />
-      </svg>
-    </button>
+    <template v-if="showControls">
+      <button
+        class="ml-auto px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors"
+        @click="exportPNG"
+        title="Export PNG">
+        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+      </button>
+      <button
+        class="px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
+        @click="$emit('fullscreen')"
+        aria-label="Expand dashboard result">
+        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5" />
+        </svg>
+      </button>
+    </template>
   </div>
-  <div v-else-if="!fullscreen" class="pt-1 border-b border-gray-100 px-2 pb-2 text-right flex items-center justify-end gap-1 w-full">
+  <div v-else-if="!fullscreen && showControls" class="pt-1 border-b border-gray-100 px-2 pb-2 text-right flex items-center justify-end gap-1 w-full">
     <button
-      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
+      class="px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors"
       @click="exportPNG"
       title="Export PNG">
       <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
     </button>
     <button
-      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center"
+      class="px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
       @click="$emit('fullscreen')"
       aria-label="Expand dashboard result">
       <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js

@@ -2,6 +2,86 @@
 
 const template = require('./dashboard-chart.html');
 
+function getChartThemeColor(cssVar, fallback) {
+  if (typeof document === 'undefined') return fallback;
+  const val = getComputedStyle(document.documentElement).getPropertyValue(cssVar)?.trim();
+  return val || fallback;
+}
+
+function getThemeColors() {
+  return {
+    tickColor: getChartThemeColor('--studio-text-primary', '#111827'),
+    gridColor: getChartThemeColor('--studio-border', '#e5e7eb')
+  };
+}
+
+const SCALELESS_TYPES = ['pie', 'doughnut', 'polarArea', 'radar'];
+
+function applyThemeChartOptions(config) {
+  const { tickColor, gridColor } = getThemeColors();
+  const type = config.type || '';
+  const options = config.options || {};
+  const plugins = { ...options.plugins };
+  const legend = plugins.legend || {};
+  plugins.legend = {
+    ...legend,
+    labels: { ...legend.labels, color: tickColor }
+  };
+
+  // Pie/doughnut/polarArea/radar don't use cartesian scales
+  if (SCALELESS_TYPES.includes(type)) {
+    return {
+      ...config,
+      options: { ...options, plugins }
+    };
+  }
+
+  const scales = { ...options.scales };
+  const applyScaleTheme = (id) => {
+    const scale = scales[id] || {};
+    scales[id] = {
+      ...scale,
+      ticks: { ...scale.ticks, color: tickColor },
+      grid: { ...scale.grid, color: gridColor }
+    };
+  };
+  ['x', 'y'].forEach(id => {
+    if (!scales[id]) scales[id] = {};
+    applyScaleTheme(id);
+  });
+  Object.keys(scales).forEach(id => {
+    if (id !== 'x' && id !== 'y') applyScaleTheme(id);
+  });
+  return {
+    ...config,
+    options: {
+      ...options,
+      scales,
+      plugins
+    }
+  };
+}
+
+function recreateChartWithTheme(component) {
+  if (!component.$refs.chart || !component.value?.$chart) return;
+  const canvas = component.$refs.chart;
+  const Chart = typeof window !== 'undefined' && window.Chart;
+  if (!Chart) return;
+  const existing = Chart.getChart(canvas);
+  if (existing) {
+    try {
+      existing.destroy();
+    } catch (_) { /* ignore teardown errors */ }
+  }
+  component.chart = null;
+  try {
+    const config = applyThemeChartOptions(component.value.$chart);
+    component.chart = new Chart(canvas, config);
+  } catch (err) {
+    console.warn('Dashboard chart recreate failed:', err);
+  }
+}
+
 module.exports = app => app.component('dashboard-chart', {
   template: template,
   props: ['value', 'fullscreen'],
@@ -11,8 +91,20 @@ module.exports = app => app.component('dashboard-chart', {
     showDetailModal: false
   }),
   mounted() {
-    const ctx = this.$refs.chart.getContext('2d');
-    this.chart = new Chart(ctx, this.value.$chart);
+    const config = applyThemeChartOptions(this.value.$chart);
+    this.chart = new Chart(this.$refs.chart, config);
+    this._onStudioThemeChanged = () => recreateChartWithTheme(this);
+    document.documentElement.addEventListener('studio-theme-changed', this._onStudioThemeChanged);
+  },
+  beforeUnmount() {
+    document.documentElement.removeEventListener('studio-theme-changed', this._onStudioThemeChanged);
+    const existing = typeof window !== 'undefined' && window.Chart && window.Chart.getChart(this.$refs.chart);
+    if (existing) {
+      try {
+        existing.destroy();
+      } catch (_) { /* ignore */ }
+    }
+    this.chart = null;
   },
   methods: {
     exportPNG() {
@@ -34,6 +126,9 @@ module.exports = app => app.component('dashboard-chart', {
         return this.value.$chart.header;
       }
       return null;
+    },
+    showControls() {
+      return this.fullscreen !== undefined;
     }
   }
 });

package/frontend/src/dashboard-result/dashboard-map/dashboard-map.js

@@ -3,15 +3,25 @@
 
 const template = require('./dashboard-map.html');
 
+function 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' };
+}
+
 module.exports = app => app.component('dashboard-map', {
   template: template,
   props: ['value', 'height'],
+  data() {
+    return { _map: null, _tileLayer: null };
+  },
   mounted() {
     const fc = this.value.$featureCollection.featureCollection || this.value.$featureCollection;
     const map = L.map(this.$refs.map).setView([0, 0], 1);
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; OpenStreetMap contributors'
-    }).addTo(map);
+    this._map = map;
+    const opts = getMapTileLayerOptions();
+    this._tileLayer = L.tileLayer(opts.url, opts).addTo(map);
     const layer = L.geoJSON(fc).addTo(map);
 
     this.$nextTick(() => {
@@ -21,6 +31,20 @@ module.exports = app => app.component('dashboard-map', {
         map.fitBounds(bounds);
       }
     });
+    this._onStudioThemeChanged = () => this._updateMapTileLayer();
+    document.documentElement.addEventListener('studio-theme-changed', this._onStudioThemeChanged);
+  },
+  beforeDestroy() {
+    document.documentElement.removeEventListener('studio-theme-changed', this._onStudioThemeChanged);
+  },
+  methods: {
+    _updateMapTileLayer() {
+      if (!this._map || !this._tileLayer || typeof L === 'undefined') return;
+      this._tileLayer.remove();
+      this._tileLayer = null;
+      const opts = getMapTileLayerOptions();
+      this._tileLayer = L.tileLayer(opts.url, opts).addTo(this._map);
+    }
   },
   computed: {
     mapStyle() {

package/frontend/src/dashboard-result/dashboard-result.html

@@ -2,7 +2,7 @@
   <div v-if="Array.isArray(result)">
     <div v-for="el in result" :key="el._id || el.finishedEvaluatingAt">
       <component
-        class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
+        class="bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
         :is="getComponentForValue(el)"
         :value="el">
       </component>
@@ -10,14 +10,14 @@
   </div>
   <div v-else>
     <component
-      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
+      class="bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
       :is="getComponentForValue(result)"
       :value="result"
       :fullscreen="fullscreen"
       @fullscreen="$emit('fullscreen')">
     </component>
   </div>
-  <div class="text-right text-sm text-gray-700 mt-1" v-if="finishedEvaluatingAt && !fullscreen">
+  <div class="text-right text-sm text-content-secondary mt-1" v-if="finishedEvaluatingAt && !fullscreen">
     Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}
   </div>
 </div>

package/frontend/src/dashboard-result/dashboard-result.js

@@ -34,6 +34,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$grid) {
         return 'dashboard-grid';
       }
+      if (value.$table) {
+        return 'dashboard-table';
+      }
       return 'dashboard-object';
     }
   }

package/frontend/src/dashboard-result/dashboard-table/dashboard-table.html

@@ -0,0 +1,34 @@
+<div class="overflow-x-auto">
+  <table class="min-w-full border-separate border-spacing-0">
+    <thead v-if="hasColumns" class="bg-slate-50">
+      <tr>
+        <th
+          v-for="(column, index) in columns"
+          :key="'column-' + index"
+          class="bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge"
+        >
+          {{ column }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, rowIndex) in rows" :key="'row-' + rowIndex" class="bg-surface hover:bg-slate-50">
+        <td
+          v-for="(cell, columnIndex) in row"
+          :key="'cell-' + rowIndex + '-' + columnIndex"
+          class="p-3 text-sm text-content border-b border-edge"
+        >
+          {{ displayValue(cell) }}
+        </td>
+      </tr>
+      <tr v-if="!hasRows">
+        <td
+          :colspan="Math.max(columns.length, 1)"
+          class="p-3 text-sm text-content-tertiary border-b border-edge"
+        >
+          No rows
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/frontend/src/dashboard-result/dashboard-table/dashboard-table.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const template = require('./dashboard-table.html');
+
+module.exports = app => app.component('dashboard-table', {
+  template,
+  props: ['value'],
+  computed: {
+    columns() {
+      return Array.isArray(this.value?.$table?.columns) ? this.value.$table.columns : [];
+    },
+    rows() {
+      return Array.isArray(this.value?.$table?.rows) ? this.value.$table.rows : [];
+    },
+    hasColumns() {
+      return this.columns.length > 0;
+    },
+    hasRows() {
+      return this.rows.length > 0;
+    }
+  },
+  methods: {
+    displayValue(cell) {
+      if (cell == null) {
+        return '';
+      }
+      if (typeof cell === 'object') {
+        try {
+          return JSON.stringify(cell);
+        } catch (err) {
+          return String(cell);
+        }
+      }
+      return String(cell);
+    }
+  }
+});

package/frontend/src/dashboards/dashboards.html

@@ -1,119 +1,111 @@
-<div class="dashboards max-w-5xl mx-auto mt-8">
-  <div v-if="status === 'loading'" class="text-center mt-4">
-    <svg
-      class="inline w-8 h-8 animate-spin text-ultramarine-600"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      ></circle>
-      <path
-        class="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
-      ></path>
-    </svg>
-  </div>
-    <div v-if="status === 'loaded' && dashboards.length === 0">
-      <div class="text-center">
-        <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
-        <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
-        <div class="mt-6">
-          <button type="button" class="inline-flex items-center rounded-md bg-ultramarine-600 px-3 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">
-            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-            </svg>
-            New Dashboard
-          </button>
-        </div>
-      </div>
+<div class="dashboards bg-page min-h-[calc(100vh-55px)]">
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-lg font-semibold text-content">Dashboards</h1>
+      <button
+        type="button"
+        @click="showCreateDashboardModal = true"
+        class="rounded-md bg-primary px-3 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">
+        New Dashboard
+      </button>
     </div>
 
-    <div class="px-4 sm:px-6 lg:px-8">
-      <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
-        </div>
-        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-          <button
-            type="button"
-            @click="showCreateDashboardModal = true"
-            class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center 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">Create New Dashboard</button>
-        </div>
+    <div v-if="status === 'loading'" class="text-center py-12">
+      <svg
+        class="inline w-8 h-8 animate-spin text-gray-400"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+      </svg>
+    </div>
+
+    <div v-else-if="dashboards.length === 0" class="text-center py-12">
+      <h3 class="text-sm font-semibold text-content">No dashboards yet</h3>
+      <p class="mt-1 text-sm text-content-tertiary">Get started by creating a new dashboard.</p>
+      <div class="mt-4">
+        <button
+          type="button"
+          @click="showCreateDashboardModal = true"
+          class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">
+          <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+          </svg>
+          New Dashboard
+        </button>
       </div>
-      <div class="mt-8 flow-root">
-        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div class="inline-block min-w-full py-2 align-middle">
-            <table class="min-w-full divide-y divide-gray-300">
-              <thead>
-                <tr>
-                  <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
-                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
-                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                  </th>
-                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="divide-y divide-gray-200 bg-white">
-                <tr v-for="dashboard in dashboards">
-                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
-                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                    <router-link
-                      :to="'/dashboard/' + dashboard._id + '?edit=true'"
-                      class="text-ultramarine-600 hover:text-ultramarine-900">
-                      Edit
-                    </router-link>
-                  </td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                    <router-link
-                      :to="'/dashboard/' + dashboard._id"
-                      class="text-ultramarine-600 hover:text-ultramarine-900">
-                      View
-                    </router-link>
-                  </td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                    <button
-                      @click="showDeleteDashboardModal=dashboard"
-                      class="text-ultramarine-600 hover:text-ultramarine-900">
-                      Delete
-                    </button>
-                  </td>
-                </tr>
+    </div>
 
-                <!-- More people... -->
-              </tbody>
-            </table>
+    <div v-else class="space-y-3">
+      <div
+        v-for="dashboard in dashboards"
+        :key="dashboard._id"
+        class="bg-surface rounded-lg border border-edge px-5 py-4 flex items-center justify-between hover:border-edge-strong transition-colors"
+      >
+        <div class="min-w-0 flex-1 mr-4">
+          <router-link
+            :to="'/dashboard/' + dashboard._id"
+            class="text-sm font-semibold text-content hover:text-primary block truncate">
+            {{ dashboard.title }}
+          </router-link>
+          <p v-if="dashboard.description" class="mt-0.5 text-sm text-content-tertiary truncate">{{ dashboard.description }}</p>
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          <router-link
+            :to="'/dashboard/' + dashboard._id"
+            class="rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">
+            View
+          </router-link>
+          <div class="relative" v-click-outside="() => closeMenu(dashboard._id)">
+            <button
+              type="button"
+              @click="toggleMenu(dashboard._id)"
+              class="rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page">
+              <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="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+              </svg>
+            </button>
+            <div
+              v-if="openMenuId === dashboard._id"
+              class="absolute right-0 mt-1 w-36 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 z-10"
+            >
+              <div class="py-1">
+                <router-link
+                  :to="'/dashboard/' + dashboard._id + '?edit=true'"
+                  class="block px-4 py-2 text-sm text-content-secondary hover:bg-muted">
+                  Edit
+                </router-link>
+                <button
+                  @click="showDeleteDashboardModal = dashboard; openMenuId = null"
+                  type="button"
+                  class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-muted">
+                  Delete
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <modal v-if="showCreateDashboardModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
-
-        <create-dashboard @close="insertNewDashboard"></create-dashboard>
-      </template>
-    </modal>
+  <modal v-if="showCreateDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
+      <create-dashboard @close="insertNewDashboard"></create-dashboard>
+    </template>
+  </modal>
 
-    <modal v-if="showDeleteDashboardModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
-        <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
-        <div class="flex space-x-2">
-          <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
-          <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
-        </div>
-      </template>
-    </modal>
-  </div>
-</div>
+  <modal v-if="showDeleteDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
+      <h2>Are you sure you want to delete "{{showDeleteDashboardModal.title}}"?</h2>
+      <div class="flex space-x-2 mt-4">
+        <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 text-sm font-semibold" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
+        <button class="px-4 py-2 bg-muted text-content-secondary rounded-md hover:bg-muted text-sm font-semibold" @click="showDeleteDashboardModal=null;">Cancel</button>
+      </div>
+    </template>
+  </modal>
+</div>