resolves #256 disables edit-container button when no container is present

resolve lint errors

review changes

src/css/popup.css

@@ -45,6 +45,7 @@ body {
   --small-text-size: 0.833rem; /* 10px */
   --small-radius: 3px;
   --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
+  --inactive-opacity: 0.3;
 }
 
 @media (min-resolution: 1dppx) {
@@ -578,6 +579,11 @@ span ~ .panel-header-text {
   max-inline-size: 204px;
 }
 
+.disable-edit-containers {
+  opacity: var(--inactive-opacity);
+  pointer-events: none;
+}
+
 .userContext-wrapper {
   align-items: center;
   display: flex;

src/js/popup.js

@@ -687,6 +687,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     document.addEventListener("mousedown", () => {
       document.removeEventListener("focus", focusHandler);
     });
+    /*  If no container is present disable the Edit Containers button */
+    const editContainer = document.querySelector("#edit-containers");
+    if (Logic.identities().length === 0) {
+      editContainer.classList.add("disable-edit-containers");
+    } else {
+      editContainer.classList.remove("disable-edit-containers");
+    }
 
     return Promise.resolve();
   },

src/popup.html

@@ -116,7 +116,7 @@
       </table>
     </div>
     <div class="panel-footer edit-identities">
-      <div class="edit-containers-text panel-footer-secondary">
+      <div class="edit-containers-text panel-footer-secondary" id="edit-containers">
         <a href="#" tabindex="0" id="edit-containers-link">Edit Containers</a>
       </div>
       <a href="#" tabindex="0" class="add-container-link pop-button" id="container-add-link" title="Create new container">