BTHLABS-50: Safari Web extension

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

@@ -36,7 +36,7 @@ body:not(.ui-js-enabled) .ui-noscript-hide {
 }
 
 #navbar .ui-navbar-brand > img {
-    border-radius: 0.25rem;
+    border-radius: 20%;
     height: 1.5rem;
     vertical-align: top;
 }
@@ -45,11 +45,11 @@ body:not(.ui-js-enabled) .ui-noscript-hide {
     height: 100%;
 }
 
-.ui-save-card .card-footer .spinner-border {
+.spinner-border.ui-htmx-indicator {
     display: none;
 }
 
-.ui-save-card .card-footer .spinner-border.htmx-request {
+.spinner-border.ui-htmx-indicator.htmx-request {
     display: block;
 }
 

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

@@ -0,0 +1,63 @@
+/*!
+ * 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 BrowseAccountAppsView {
+    constructor (app) {
+      this.app = app;
+    }
+    onLoad = (event) => {
+      document.addEventListener(
+        'HotPocket:BrowseAccountAppsView:updateLoadMoreButton',
+        this.onUpdateLoadMoreButton,
+      );
+
+      document.addEventListener(
+        'HotPocket:BrowseAccountAppsView:delete',
+        this.onDelete,
+      );
+    };
+    onUpdateLoadMoreButton = (event) => {
+      const button = document.querySelector('#BrowseAccountAppsView .ui-load-more-button');
+      if (button) {
+        if (event.detail.next_url) {
+          button.setAttribute('hx-get', event.detail.next_url);
+          button.classList.remove('disable');
+          button.removeAttribute('disabled', true);
+        } else {
+          button.classList.add('disable');
+          button.setAttribute('disabled', true);
+        }
+
+        htmx.process('#BrowseAccountAppsView .ui-load-more-button');
+      }
+    };
+    onDelete = (event) => {
+      if (event.detail && event.detail.pk) {
+        const elementsToRemove = document.querySelectorAll(
+          `[data-access-token="${event.detail.pk}"]`,
+        );
+        for (let elementToRemove of elementsToRemove) {
+          elementToRemove.remove();
+        }
+      }
+    };
+  }
+
+  HotPocket.addPlugin('UI.BrowseAccountAppsView', (app) => {
+    return new BrowseAccountAppsView(app);
+  });
+})(window.HotPocket, window.htmx);

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

@@ -20,21 +20,25 @@
       this.app = app;
     }
     onLoad = (event) => {
-      document.addEventListener('HotPocket:BrowseSavesView:updateLoadMoreButton', (event) => {
-        const button = document.querySelector('#BrowseSavesView .ui-load-more-button');
-        if (button) {
-          if (event.detail.next_url) {
-            button.setAttribute('hx-get', event.detail.next_url);
-            button.classList.remove('disable');
-            button.removeAttribute('disabled', true);
-          } else {
-            button.classList.add('disable');
-            button.setAttribute('disabled', true);
-          }
-
-          htmx.process('#BrowseSavesView .ui-load-more-button');
+      document.addEventListener(
+        'HotPocket:BrowseSavesView:updateLoadMoreButton',
+        this.onUpdateLoadMoreButton,
+      );
+    };
+    onUpdateLoadMoreButton = (event) => {
+      const button = document.querySelector('#BrowseSavesView .ui-load-more-button');
+      if (button) {
+        if (event.detail.next_url) {
+          button.setAttribute('hx-get', event.detail.next_url);
+          button.classList.remove('disable');
+          button.removeAttribute('disabled', true);
+        } else {
+          button.classList.add('disable');
+          button.setAttribute('disabled', true);
         }
-      });
+
+        htmx.process('#BrowseSavesView .ui-load-more-button');
+      }
     };
   }