BTHLABS-55: Inline create save form

Co-authored-by: Tomek Wójcik <labs@tomekwojcik.pl>
Co-committed-by: Tomek Wójcik <labs@tomekwojcik.pl>

services/backend/hotpocket_backend/apps/ui/static/ui/css/hotpocket-backend.css

@@ -23,7 +23,6 @@ body, html {
 }
 
 body > .ui-viewport {
-    padding-bottom: 3.5rem;
     padding-top: 3.5rem;
 }
 
@@ -103,3 +102,23 @@ body.ui-mode-standalone #offcanvas-controls .offcanvas-body {
 #BrowseSavesView-Search .form-select {
     min-width: 10rem;
 }
+
+#navbar .ui-inline-create-save-form {
+    bottom: 0px;
+    right: 0px;
+    top: 0px;
+    width: 500px;
+}
+
+@media screen and (max-width: 767px) {
+    #navbar .ui-inline-create-save-form {
+        right: 0.5rem;
+        width: calc(100vw - 0.5rem - 0.5rem);
+    }
+}
+
+@media screen and (min-width: 768px) {
+    #InlineCreateSaveForm {
+        position: relative;
+    }
+}

services/backend/hotpocket_backend/apps/ui/static/ui/js/hotpocket-backend.ui.InlineCreateSaveForm.js

@@ -0,0 +1,53 @@
+/*!
+ * HotPocket by BTHLabs (https://hotpocket.app/)
+ * Copyright 2025-present BTHLabs <contact@bthlabs.pl> (https://bthlabs.pl/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+((HotPocket, htmx) => {
+  class InlineCreateSaveForm {
+    constructor (app) {
+      this.app = app;
+      this.element = null;
+      this.buttonTrigger = null;
+      this.form = null;
+    }
+    onLoad = (event) => {
+      console.log('UI.InlineCreateSaveForm.onLoad()', event);
+      this.element = document.getElementById('InlineCreateSaveForm');
+      this.buttonTrigger = this.element.querySelector('.ui-inline-create-save-form-trigger');
+      this.buttonClose = this.element.querySelector('.ui-inline-create-save-form-close');
+      this.form = this.element.querySelector('.ui-inline-create-save-form');
+
+      this.buttonTrigger.addEventListener('click', this.onTriggerClick);
+      this.buttonClose.addEventListener('click', this.onCloseClick);
+    };
+    onTriggerClick = (event) => {
+      event.preventDefault();
+
+      this.form.classList.remove('d-none');
+      this.form.classList.add('d-flex');
+    };
+    onCloseClick = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      this.form.classList.add('d-none');
+      this.form.classList.remove('d-flex');
+    };
+  }
+
+  HotPocket.addPlugin('UI.InlineCreateSaveForm', (app) => {
+    return new InlineCreateSaveForm(app);
+  });
+})(window.HotPocket, window.htmx);