@mongoosejs/studio 0.1.20 → 0.2.0

package/frontend/src/chat/chat.html

@@ -1,5 +1,8 @@
 <div class="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">
+  <div
+    class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10"
+    @click="hideSidebar = false"
+    v-show="hideSidebar">
     <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>
   <button
@@ -14,9 +17,9 @@
     <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z"/></svg>
   </button>
   <!-- Sidebar: Chat Threads -->
-  <aside class="bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative" :class="hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''">
+  <aside class="border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative" :class="hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''">
     <div class="flex items-center border-b border-gray-100 w-64 overflow-x-hidden">
-      <div class="p-4 font-bold text-lg">Chat Threads</div>
+      <div class="p-1 ml-2 font-bold">Chat Threads</div>
       <button
         @click="hideSidebar = true"
         class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none"
@@ -36,13 +39,13 @@
     <div v-if="status === 'loaded' && chatThreads.length === 0" class="p-4 text-sm text-gray-700">
       No threads yet
     </div>
-    <ul v-if="status === 'loaded'" class="w-64">
+    <ul v-if="status === 'loaded'" class="w-full">
       <li
         v-for="thread in chatThreads"
         :key="thread._id"
         @click="selectThread(thread._id)"
-        class="p-4 hover:bg-gray-200 cursor-pointer w-64"
-        :class="{ 'bg-gray-300': thread._id === chatThreadId }"
+        class="w-full p-2 hover:bg-ultramarine-100 cursor-pointer text-sm text-gray-700"
+        :class="{ 'bg-ultramarine-200 text-gray-900': thread._id === chatThreadId }"
       >
         {{ thread.title || 'Untitled Thread' }}
       </li>
@@ -50,16 +53,16 @@
   </aside>
 
   <!-- Main Chat Area -->
-  <main class="flex-1 flex flex-col">
+  <main class="flex-1 flex flex-col bg-slate-50">
     <div class="flex-1 overflow-y-auto p-6 space-y-4" ref="messagesContainer">
-      <ul role="list" class="space-y-4">
-        <div v-if="true">
-          <div class="flex items-center justify-center py-3 mb-4">
-            <div class="bg-gray-300 h-px flex-grow max-w-xs"></div>
-            <p class="mx-4 text-sm font-medium text-gray-500">This is the beginning of the message thread</p>
-            <div class="bg-gray-300 h-px flex-grow max-w-xs"></div>
-          </div>
+      <div v-if="chatMessages?.length === 0">
+        <div class="flex items-center w-full h-full justify-center py-3 mb-4">
+          <p class="mx-4 font-bold text-gray-900">
+            Ask Mongoose Studio to analyze your data or generate a script
+          </p>
         </div>
+      </div>
+      <ul role="list" class="space-y-4" v-else>
         <li v-for="message in chatMessages" :key="message._id">
           <chat-message :message="message" :target-dashboard-id="currentThread?.dashboardId"></chat-message>
         </li>
@@ -72,10 +75,10 @@
       <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2 items-end justify-end">
         <textarea
           v-model="newMessage"
-          :placeholder="sendingMessage ? 'Sending...' : 'Ask something...'"
-          class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto"
+          :placeholder="sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'"
+          class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm"
           :disabled="sendingMessage"
-          rows="1"
+          rows="2"
           ref="messageInput"
           @input="adjustTextareaHeight"
           @keydown.enter.exact.prevent="handleEnter"

package/frontend/src/chat/chat.js

@@ -181,5 +181,7 @@ module.exports = app => app.component('chat', {
         });
       });
     }
+
+    this.$refs.messageInput.focus();
   }
 });

package/frontend/src/document/document.css

@@ -1,10 +1,3 @@
-.document {
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-top: 25px;
-}
-
 .document .document-menu {
   display: flex;
   position: sticky;
@@ -32,4 +25,4 @@
 
 .document button img {
   height: 1em;
-}
+}

package/frontend/src/document/document.html

@@ -1,175 +1,213 @@
-<div class="document px-1 md:px-0">
-  <div class="flex justify-between sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm">
-    <div class="flex">
-      <button
-        @click="goBack"
-        class="mr-2 rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600">
-        &lsaquo; Back
-      </button>
-      <button
-        @click="viewMode = 'fields'"
-        :class="viewMode === 'fields'
-          ? 'bg-blue-600 text-white z-10'
-          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
-        class="px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
-        </svg>
-        Fields
-      </button>
-      <button
-        @click="viewMode = 'json'"
-        :class="viewMode === 'json'
-          ? 'bg-blue-600 text-white z-10'
-          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
-        class="px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
-        </svg>
-        JSON
-      </button>
-    </div>
-
-    <div class="gap-2 hidden md:flex">
-      <button
-        v-if="!editting"
-        @click="editting = true"
-        :disabled="!canEdit"
-        :class="{'cursor-not-allowed opacity-50': !canEdit}"
-        type="button"
-        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">
-        <img src="images/edit.svg" class="inline" /> Edit
-      </button>
-      <button
-        v-if="editting"
-        @click="editting = false"
-        type="button"
-        class="rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600">
-        &times; Cancel
-      </button>
-      <button
-        v-if="editting"
-        :disabled="!canManipulate"
-        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
-        @click="shouldShowConfirmModal=true;"
-        type="button"
-        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">
-        <img src="images/save.svg" class="inline" /> Save
-      </button>
-      <button
-        @click="shouldShowDeleteModal=true;"
-        :disabled="!canManipulate"
-        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
-        type="button"
-        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">
-        <img src="images/delete.svg" class="inline" /> Delete
-      </button>
-      <button
-        @click="shouldShowCloneModal=true;"
-        :disabled="!canManipulate"
-        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
-        type="button"
-        class="rounded-md bg-pink-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">
-        <img src="images/duplicate.svg" class="inline" /> Clone
-      </button>
-    </div>
-    <div class="md:hidden flex items-center">
-      <div class="relative">
+<div class="document px-1 pt-4 md:px-0 bg-slate-50 w-full">
+  <div class="max-w-7xl mx-auto">
+    <div class="flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm">
+      <div class="font-bold overflow-hidden text-ellipsis">{{model}}: {{documentId}}</div>
+      <div class="flex grow">
         <button
-          @click="mobileMenuOpen = !mobileMenuOpen"
-          type="button"
-          class="inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          aria-expanded="mobileMenuOpen"
-          aria-label="Open menu"
+          @click="viewMode = 'fields'"
+          :class="viewMode === 'fields'
+            ? 'bg-blue-600 text-white z-10'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
+          class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none"
         >
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M4 6h16M4 12h16M4 18h16"></path>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
           </svg>
+          Fields
         </button>
-        <div
-          v-show="mobileMenuOpen"
-          @click.away="mobileMenuOpen = false"
-          class="origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+        <button
+          @click="viewMode = 'json'"
+          :class="viewMode === 'json'
+            ? 'bg-blue-600 text-white z-10'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
+          class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none"
         >
-          <div class="py-1 flex flex-col">
-            <button
-              v-if="!editting"
-              @click="editting = true; mobileMenuOpen = false"
-              :disabled="!canEdit"
-              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']"
-              type="button"
-            >
-              <img src="images/edit.svg" class="inline mr-2" /> Edit
-            </button>
-            <button
-              v-if="editting"
-              @click="editting = false; mobileMenuOpen = false"
-              type="button"
-              class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
-            >
-              &times; Cancel
-            </button>
-            <button
-              v-if="editting"
-              :disabled="!canManipulate"
-              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
-              @click="shouldShowConfirmModal=true; mobileMenuOpen = false"
-              type="button"
-            >
-              <img src="images/save.svg" class="inline mr-2" /> Save
-            </button>
-            <button
-              @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
-              :disabled="!canManipulate"
-              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
-              type="button"
-            >
-              <img src="images/delete.svg" class="inline mr-2" /> Delete
-            </button>
-            <button
-              @click="shouldShowCloneModal=true; mobileMenuOpen = false"
-              :disabled="!canManipulate"
-              :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
-              type="button"
-            >
-              <img src="images/duplicate.svg" class="inline mr-2" /> Clone
-            </button>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+          </svg>
+          JSON
+        </button>
+      </div>
+
+      <div class="gap-2 hidden md:flex items-center">
+        <button
+          v-if="!editting"
+          @click="editting = true"
+          :disabled="!canEdit"
+          :class="{'cursor-not-allowed opacity-50': !canEdit}"
+          type="button"
+          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">
+          <img src="images/edit.svg" class="inline" /> Edit
+        </button>
+        <button
+          v-if="editting"
+          @click="editting = false"
+          type="button"
+          class="rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600">
+          &times; Cancel
+        </button>
+        <button
+          v-if="editting"
+          :disabled="!canManipulate"
+          :class="{'cursor-not-allowed opacity-50': !canManipulate}"
+          @click="shouldShowConfirmModal=true;"
+          type="button"
+          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">
+          <img src="images/save.svg" class="inline" /> Save
+        </button>
+
+        <!-- 3-dot menu -->
+        <div class="relative">
+          <button
+            @click="desktopMenuOpen = !desktopMenuOpen"
+            type="button"
+            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            aria-expanded="desktopMenuOpen"
+            aria-label="More options"
+          >
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <circle cx="12" cy="5" r="2"></circle>
+              <circle cx="12" cy="12" r="2"></circle>
+              <circle cx="12" cy="19" r="2"></circle>
+            </svg>
+          </button>
+          <div
+            v-show="desktopMenuOpen"
+            @click.away="desktopMenuOpen = false"
+            class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+          >
+            <div class="py-1 flex flex-col">
+              <button
+                @click="addField(); desktopMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100"
+              >
+                Add Field
+              </button>
+              <button
+                @click="shouldShowDeleteModal=true; desktopMenuOpen = false"
+                :disabled="!canManipulate"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+                type="button"
+              >
+                Delete
+              </button>
+              <button
+                @click="shouldShowCloneModal=true; desktopMenuOpen = false"
+                :disabled="!canManipulate"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+                type="button"
+              >
+                Clone
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="md:hidden flex items-center">
+        <div class="relative">
+          <button
+            @click="mobileMenuOpen = !mobileMenuOpen"
+            type="button"
+            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            aria-expanded="mobileMenuOpen"
+            aria-label="Open menu"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+          </button>
+          <div
+            v-show="mobileMenuOpen"
+            @click.away="mobileMenuOpen = false"
+            class="origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+          >
+            <div class="py-1 flex flex-col">
+              <button
+                v-if="!editting"
+                @click="editting = true; mobileMenuOpen = false"
+                :disabled="!canEdit"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']"
+                type="button"
+              >
+                Edit
+              </button>
+              <button
+                v-if="editting"
+                @click="editting = false; mobileMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+              >
+                Cancel
+              </button>
+              <button
+                v-if="editting"
+                :disabled="!canManipulate"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
+                @click="shouldShowConfirmModal=true; mobileMenuOpen = false"
+                type="button"
+              >
+                Save
+              </button>
+              <button
+                @click="addField(); mobileMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100"
+              >
+                Add Field
+              </button>
+              <button
+                @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
+                :disabled="!canManipulate"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+                type="button"
+              >
+                Delete
+              </button>
+              <button
+                @click="shouldShowCloneModal=true; mobileMenuOpen = false"
+                :disabled="!canManipulate"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+                type="button"
+              >
+                Clone
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div v-if="status === 'loaded'">
-    <document-details
-      :document="document"
-      :schemaPaths="schemaPaths"
-      :virtualPaths="virtualPaths"
-      :editting="editting"
-      :changes="changes"
-      :invalid="invalid"
-      :viewMode="viewMode"
-      @add-field="addField"
-      @view-mode-change="updateViewMode"></document-details>
-    <modal v-if="shouldShowConfirmModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>
-        <confirm-changes @close="shouldShowConfirmModal = false;" @save="save" :value="changes"></confirm-changes>
-      </template>
-    </modal>
-    <modal v-if="shouldShowDeleteModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="shouldShowDeleteModal = false;">&times;</div>
-        <confirm-delete @close="shouldShowDeleteModal = false;" @remove="remove" :value="document"></confirm-delete>
-      </template>
-    </modal>
-    <modal v-if="shouldShowCloneModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="shouldShowCloneModal = false;">&times;</div>
-          <clone-document :currentModel="model" :doc="document" :schemaPaths="schemaPaths" @close="showClonedDocument"></clone-document>
-      </template>
-    </modal>
+    <div v-if="status === 'loaded'">
+      <document-details
+        :document="document"
+        :schemaPaths="schemaPaths"
+        :virtualPaths="virtualPaths"
+        :editting="editting"
+        :changes="changes"
+        :invalid="invalid"
+        :viewMode="viewMode"
+        :model="model"
+        @add-field="addField"
+        @view-mode-change="updateViewMode"></document-details>
+      <modal v-if="shouldShowConfirmModal">
+        <template v-slot:body>
+          <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>
+          <confirm-changes @close="shouldShowConfirmModal = false;" @save="save" :value="changes"></confirm-changes>
+        </template>
+      </modal>
+      <modal v-if="shouldShowDeleteModal">
+        <template v-slot:body>
+          <div class="modal-exit" @click="shouldShowDeleteModal = false;">&times;</div>
+          <confirm-delete @close="shouldShowDeleteModal = false;" @remove="remove" :value="document"></confirm-delete>
+        </template>
+      </modal>
+      <modal v-if="shouldShowCloneModal">
+        <template v-slot:body>
+          <div class="modal-exit" @click="shouldShowCloneModal = false;">&times;</div>
+            <clone-document :currentModel="model" :doc="document" :schemaPaths="schemaPaths" @close="showClonedDocument"></clone-document>
+        </template>
+      </modal>
+    </div>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -21,6 +21,7 @@ module.exports = app => app.component('document', {
     virtuals: [],
     virtualPaths: [],
     mobileMenuOpen: false,
+    desktopMenuOpen: false,
     viewMode: 'fields',
     shouldShowConfirmModal: false,
     shouldShowDeleteModal: false,

package/frontend/src/document-details/document-details.html

@@ -1,6 +1,6 @@
 <div class="document-details">
   <!-- View Toggle and Search/Filter Bar -->
-  <div class="sticky top-[60px] z-40 bg-white p-4 border-b border-gray-200 shadow-sm">
+  <div class="sticky top-[60px] z-40 bg-white rounded-md p-4 border-b border-gray-200 shadow-sm">
 
     <!-- Search and Filter Bar (only show in fields view) -->
     <div v-if="viewMode === 'fields'" class="flex md:gap-3">
@@ -37,16 +37,6 @@
           </svg>
         </div>
       </div>
-
-      <!-- Add Field Button -->
-      <button
-        @click="openAddFieldModal"
-        class="hidden md:flex px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 items-center gap-2"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-        </svg> Add Field
-      </button>
     </div>
   </div>
 

package/frontend/src/document-details/document-details.js

@@ -9,7 +9,7 @@ appendCSS(require('./document-details.css'));
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode'],
+  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode', 'model'],
   data() {
     return {
       searchQuery: '',
@@ -37,6 +37,8 @@ module.exports = app => app.component('document-details', {
         this.initializeFieldValueEditor();
       }
     });
+
+    this.searchQuery = this.getSearchQueryFromRoute();
   },
   beforeDestroy() {
     this.destroyFieldValueEditor();
@@ -55,6 +57,17 @@ module.exports = app => app.component('document-details', {
           });
         }
       }
+    },
+    searchQuery(newValue) {
+      this.syncSearchQueryToUrl(newValue);
+    },
+    '$route.query.fieldSearch': {
+      handler(newValue) {
+        const nextValue = typeof newValue === 'string' ? newValue : '';
+        if (nextValue !== this.searchQuery) {
+          this.searchQuery = nextValue;
+        }
+      }
     }
   },
   computed: {
@@ -245,6 +258,35 @@ module.exports = app => app.component('document-details', {
     }
   },
   methods: {
+    getSearchQueryFromRoute() {
+      return this.$route?.query?.fieldSearch || '';
+    },
+    syncSearchQueryToUrl(value) {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      const normalizedValue = typeof value === 'string' ? value : '';
+      const shouldStore = normalizedValue.trim().length > 0;
+      const hash = window.location.hash.replace(/^#?/, '');
+      const [hashPath, hashQueryString = ''] = hash.split('?');
+      const params = new URLSearchParams(hashQueryString);
+      const currentValue = params.get('fieldSearch') || '';
+
+      if (normalizedValue === currentValue || (!shouldStore && !currentValue)) {
+        return;
+      }
+
+      if (shouldStore) {
+        params.set('fieldSearch', normalizedValue);
+      } else {
+        params.delete('fieldSearch');
+      }
+
+      const nextQueryString = params.toString();
+      const nextHash = nextQueryString ? `${hashPath}?${nextQueryString}` : hashPath;
+      window.history.replaceState(window.history.state, '', `#${nextHash}`);
+    },
     toggleVirtualField(fieldName) {
       if (this.collapsedVirtuals.has(fieldName)) {
         this.collapsedVirtuals.delete(fieldName);

package/frontend/src/document-details/document-property/document-property.html

@@ -1,9 +1,9 @@
-<div class="border border-gray-200 rounded-lg mb-2">
+<div class="border border-gray-200 bg-white rounded-lg mb-2">
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
-    class="p-3 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
-    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-gray-50 hover:bg-gray-100': !highlight }"
+    class="p-1 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
+    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-gray-100': !highlight }"
   >
     <div class="flex items-center" >
       <svg
@@ -42,7 +42,7 @@
   </div>
 
   <!-- Collapsible Content -->
-  <div v-if="!isCollapsed" class="p-3">
+  <div v-if="!isCollapsed" class="p-2">
     <!-- Date Type Selector (when editing dates) -->
     <div v-if="editting && path.instance === 'Date'" class="mb-3 flex gap-1.5">
       <div