@mongoosejs/studio 0.0.105 → 0.0.107

package/frontend/public/app.js

@@ -2400,41 +2400,47 @@ module.exports = app => app.component('models', {
     this.currentModel = this.model;
   },
   beforeDestroy() {
-    document.removeEventListener('scroll', () => this.onScroll(), true);
+    document.removeEventListener('scroll', this.onScroll, true);
+    window.removeEventListener('popstate', this.onPopState, true);
   },
   async mounted() {
-    document.addEventListener('scroll', () => this.onScroll(), true);
+    this.onScroll = () => this.checkIfScrolledToBottom();
+    document.addEventListener('scroll', this.onScroll, true);
+    this.onPopState = () => this.initSearchFromUrl();
+    window.addEventListener('popstate', this.onPopState, true);
     this.models = await api.Model.listModels().then(res => res.models);
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
 
-    this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
-    if (this.$route.query?.search) {
-      this.searchText = this.$route.query.search;
-      this.filter = eval(`(${this.$route.query.search})`);
-      this.filter = EJSON.stringify(this.filter);
-    }
-    if (this.$route.query?.sort) {
-      const sort = eval(`(${this.$route.query.sort})`);
-      const path = Object.keys(sort)[0];
-      const num = Object.values(sort)[0];
-      this.sortDocs(num, path);
-    }
-
-
-    if (this.currentModel != null) {
-      await this.getDocuments();
-    }
-    if (this.$route.query?.fields) {
-      const filter = this.$route.query.fields.split(',');
-      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
-    }
-
-
-    this.status = 'loaded';
+    await this.initSearchFromUrl();
   },
   methods: {
+    async initSearchFromUrl() {
+      this.status = 'loading';
+      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+      if (this.$route.query?.search) {
+        this.searchText = this.$route.query.search;
+        this.filter = eval(`(${this.$route.query.search})`);
+        this.filter = EJSON.stringify(this.filter);
+      }
+      if (this.$route.query?.sort) {
+        const sort = eval(`(${this.$route.query.sort})`);
+        const path = Object.keys(sort)[0];
+        const num = Object.values(sort)[0];
+        this.sortDocs(num, path);
+      }
+
+
+      if (this.currentModel != null) {
+        await this.getDocuments();
+      }
+      if (this.$route.query?.fields) {
+        const filter = this.$route.query.fields.split(',');
+        this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
+      }
+      this.status = 'loaded';
+    },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
@@ -2484,7 +2490,7 @@ module.exports = app => app.component('models', {
       }
       return filteredDoc;
     },
-    async onScroll() {
+    async checkIfScrolledToBottom() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
@@ -2527,13 +2533,20 @@ module.exports = app => app.component('models', {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       } else {
         this.filter = {};
         delete this.query.search;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       }
+      this.documents = [];
+      this.status = 'loading';
       await this.loadMoreDocuments();
+      this.status = 'loaded';
     },
     async openIndexModal() {
       this.shouldShowIndexModal = true;
@@ -4038,7 +4051,7 @@ module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-en
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <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>\n  </div>\n  <!-- Sidebar: Chat Threads -->\n  <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' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <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>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
+module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <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>\n  </div>\n  <!-- Sidebar: Chat Threads -->\n  <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' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <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>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
 
 /***/ }),
 
@@ -14673,7 +14686,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.105","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.107","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/src/chat/chat.html

@@ -1,4 +1,4 @@
-<div class="flex" style="height: calc(100vh - 55px)">
+<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">
     <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>

package/frontend/src/models/models.js

@@ -58,41 +58,47 @@ module.exports = app => app.component('models', {
     this.currentModel = this.model;
   },
   beforeDestroy() {
-    document.removeEventListener('scroll', () => this.onScroll(), true);
+    document.removeEventListener('scroll', this.onScroll, true);
+    window.removeEventListener('popstate', this.onPopState, true);
   },
   async mounted() {
-    document.addEventListener('scroll', () => this.onScroll(), true);
+    this.onScroll = () => this.checkIfScrolledToBottom();
+    document.addEventListener('scroll', this.onScroll, true);
+    this.onPopState = () => this.initSearchFromUrl();
+    window.addEventListener('popstate', this.onPopState, true);
     this.models = await api.Model.listModels().then(res => res.models);
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
 
-    this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
-    if (this.$route.query?.search) {
-      this.searchText = this.$route.query.search;
-      this.filter = eval(`(${this.$route.query.search})`);
-      this.filter = EJSON.stringify(this.filter);
-    }
-    if (this.$route.query?.sort) {
-      const sort = eval(`(${this.$route.query.sort})`);
-      const path = Object.keys(sort)[0];
-      const num = Object.values(sort)[0];
-      this.sortDocs(num, path);
-    }
-
-
-    if (this.currentModel != null) {
-      await this.getDocuments();
-    }
-    if (this.$route.query?.fields) {
-      const filter = this.$route.query.fields.split(',');
-      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
-    }
-
-
-    this.status = 'loaded';
+    await this.initSearchFromUrl();
   },
   methods: {
+    async initSearchFromUrl() {
+      this.status = 'loading';
+      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+      if (this.$route.query?.search) {
+        this.searchText = this.$route.query.search;
+        this.filter = eval(`(${this.$route.query.search})`);
+        this.filter = EJSON.stringify(this.filter);
+      }
+      if (this.$route.query?.sort) {
+        const sort = eval(`(${this.$route.query.sort})`);
+        const path = Object.keys(sort)[0];
+        const num = Object.values(sort)[0];
+        this.sortDocs(num, path);
+      }
+
+
+      if (this.currentModel != null) {
+        await this.getDocuments();
+      }
+      if (this.$route.query?.fields) {
+        const filter = this.$route.query.fields.split(',');
+        this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
+      }
+      this.status = 'loaded';
+    },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
@@ -142,7 +148,7 @@ module.exports = app => app.component('models', {
       }
       return filteredDoc;
     },
-    async onScroll() {
+    async checkIfScrolledToBottom() {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
@@ -185,13 +191,20 @@ module.exports = app => app.component('models', {
         this.filter = eval(`(${this.searchText})`);
         this.filter = EJSON.stringify(this.filter);
         this.query.search = this.searchText;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       } else {
         this.filter = {};
         delete this.query.search;
-        this.$router.push({ query: this.query });
+        const query = this.query;
+        const newUrl = this.$router.resolve({ query }).href;
+        window.history.pushState(null, '', newUrl);
       }
+      this.documents = [];
+      this.status = 'loading';
       await this.loadMoreDocuments();
+      this.status = 'loaded';
     },
     async openIndexModal() {
       this.shouldShowIndexModal = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.105",
+  "version": "0.0.107",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {