@mongoosejs/studio 0.1.20 → 0.2.0

package/frontend/src/models/models.html

@@ -4,7 +4,7 @@
   </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-4 font-bold text-lg">Models</div>
+      <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"
@@ -14,14 +14,14 @@
       </button>
     </div>
     <nav class="flex flex-1 flex-col">
-      <ul role="list" class="flex flex-1 flex-col gap-y-7">
+      <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="block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
-                :class="model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'">
+                class="block truncate 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'">
                 {{model}}
               </router-link>
             </li>
@@ -33,9 +33,9 @@
       </div>
     </nav>
   </aside>
-  <div class="documents" ref="documentsList">
+  <div class="documents bg-slate-50" ref="documentsList">
     <div class="relative h-[42px] z-10">
-      <div class="documents-menu">
+      <div class="documents-menu bg-slate-50">
         <div class="flex flex-row items-center w-full gap-2">
           <document-search
             ref="documentSearch"
@@ -48,13 +48,6 @@
             <span v-if="numDocuments == null">Loading ...</span>
             <span v-else-if="typeof numDocuments === 'number'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
           </div>
-          <button
-            @click="shouldShowExportModal = true"
-            type="button"
-            v-show="!selectMultiple"
-            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">
-            Export
-          </button>
           <button
             @click="stagingSelect"
             type="button"
@@ -79,20 +72,6 @@
             >
             Delete
           </button>
-          <button
-            @click="shouldShowCreateModal = true;"
-            type="button"
-            v-show="!selectMultiple"
-            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">
-            Create
-          </button>
-          <button
-            @click="openFieldSelection"
-            type="button"
-            v-show="!selectMultiple"
-            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">
-            Fields
-          </button>
           <div class="relative" v-show="!selectMultiple" ref="actionsMenuContainer" @keyup.esc.prevent="closeActionsMenu">
             <button
               @click="toggleActionsMenu"
@@ -108,6 +87,27 @@
               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"
             >
               <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"
+                >
+                  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"
+                >
+                  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"
+                >
+                  Projection
+                </button>
                 <button
                   @click="openIndexModal"
                   type="button"
@@ -159,8 +159,8 @@
         </div>
       </div>
       <table v-else-if="outputType === 'table'">
-        <thead>
-          <th v-for="path in filteredPaths" @click="addPathFilter(path.path)" class="cursor-pointer">
+        <thead class="bg-slate-50">
+          <th v-for="path in filteredPaths" @click="addPathFilter(path.path)" class="cursor-pointer p-3">
             {{path.path}}
             <span class="path-type">
               ({{(path.instance || 'unknown')}})
@@ -170,8 +170,8 @@
           </th>
         </thead>
         <tbody>
-          <tr v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id">
-            <td v-for="schemaPath in filteredPaths" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
+          <tr v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id" class="bg-white 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)"
                 :value="getValueForPath(document, schemaPath.path)"
@@ -181,14 +181,14 @@
           </tr>
         </tbody>
       </table>
-      <div v-else-if="outputType === 'json'" class="flex flex-col space-y-6">
+      <div v-else-if="outputType === 'json'" class="flex flex-col space-y-2 p-1 mt-1">
         <div
           v-for="document in documents"
           :key="document._id"
           @click="handleDocumentContainerClick(document, $event)"
           :class="[
-            'group relative transition-colors',
-            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'
+            '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'
           ]"
         >
           <button

package/frontend/src/navbar/navbar.html

@@ -1,10 +1,19 @@
-<div class="navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]">
-  <div class="flex items-center gap-4 h-full pl-4">
+<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-[32px] mr-1" alt="Mongoose Studio Logo" />
+      <img src="images/logo.svg" class="h-10 mr-1" alt="Mongoose Studio Logo" />
     </router-link>
-    <div v-if="!!state.nodeEnv" title="NODE_ENV" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
-      {{state.nodeEnv}}
+    <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"
+    >
+      <span
+        :class="warnEnv ? 'bg-red-400' : 'bg-yellow-400'"
+        class="inline-block rounded-full"
+        style="width: 0.5em; height: 0.5em;"
+      ></span>
+      <span>{{state.nodeEnv}}</span>
     </div>
   </div>
   <div class="h-full pr-4 hidden md:block">
@@ -93,7 +102,7 @@
   <!-- 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" class="fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+  <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">
       <router-link :to="{ name: defaultRoute }">
         <img src="images/logo.svg" class="h-[32px]" alt="Mongoose Studio Logo" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.20",
-  "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
+  "version": "0.2.0",
+  "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
     "type": "git",