Implement secret deletion function

packages/sshecret-admin/src/sshecret_admin/frontend/templates/secrets/index.html.j2

@@ -57,8 +57,8 @@
       <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800" id="secret-tree">
 
 
-        <div class="flex flex-col">
-          <div class="h-full">
+        <div class="flex flex-1 flex-col">
+          <div class="h-full w-full">
             <sl-tree class="tree-with-icons">
               <sl-tree-item
                 id="secret-group-root-item"

packages/sshecret-admin/src/sshecret_admin/frontend/templates/secrets/partials/tree_detail.html.j2

@@ -1,4 +1,35 @@
 <div class="w-full" id="secretdetails">
+
+<!-- menu -->
+
+<div class="flex justify-end px-4">
+  <button id="secret-menu-button" data-dropdown-toggle="secret-edit-menu" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
+    <span class="sr-only">Open dropdown</span>
+    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
+      <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
+    </svg>
+  </button>
+  <!-- Dropdown menu -->
+  <div id="secret-edit-menu" class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
+    <ul class="py-2" aria-labelledby="secret-menu-button">
+      <li>
+        <a
+          href="#"
+          class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          hx-delete="/secrets/{{secret.name}}"
+          hx-target="#secretdetails"
+          hx-swap="OuterHTML"
+          hx-indicator=".secret-spinner"
+          hx-confirm="Really delete this secret?"
+          >
+          Delete
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+
   <h3 class="mb-4 text-xl font-semibold dark:text-white">{{secret.name}}</h3>
   <div class="htmx-indicator secret-spinner">
     <div role="status">

packages/sshecret-admin/src/sshecret_admin/frontend/views/secrets.py

@@ -478,26 +478,20 @@ def create_router(dependencies: FrontendDependencies) -> APIRouter:
             },
         )
 
-    # @app.delete("/secrets/{name}")
-    # async def delete_secret(
-    #     request: Request,
-    #     name: str,
-    #     admin: Annotated[AdminBackend, Depends(dependencies.get_admin_backend)],
-    # ):
-    #     """Delete a secret."""
-    #     await admin.delete_secret(name)
-    #     clients = await admin.get_clients()
-    #     secrets = await admin.get_detailed_secrets()
-    #     headers = {"Hx-Refresh": "true"}
+    @app.delete("/secrets/{name}")
+    async def delete_secret(
+        request: Request,
+        name: str,
+        admin: Annotated[AdminBackend, Depends(dependencies.get_admin_backend)],
+    ):
+        """Delete a secret."""
+        await admin.delete_secret(name)
+        headers = {"Hx-Refresh": "true"}
 
-    #     return templates.TemplateResponse(
-    #         request,
-    #         "secrets/inner.html.j2",
-    #         {
-    #             "clients": clients,
-    #             "secrets": secrets,
-    #         },
-    #         headers=headers,
-    #     )
+        return templates.TemplateResponse(
+            request,
+            "secrets/partials/default_detail.html.j2",
+            headers=headers,
+        )
 
     return app

packages/sshecret-admin/src/sshecret_admin/static/css/main.css

@@ -327,9 +327,6 @@
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
-  .end-2\.5 {
-    inset-inline-end: calc(var(--spacing) * 2.5);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -417,18 +414,12 @@
   .m-361 {
     margin: calc(var(--spacing) * 361);
   }
-  .mx-2\.5 {
-    margin-inline: calc(var(--spacing) * 2.5);
-  }
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
-  .mx-\[1rem\] {
-    margin-inline: 1rem;
-  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -459,9 +450,6 @@
   .ms-3 {
     margin-inline-start: calc(var(--spacing) * 3);
   }
-  .ms-auto {
-    margin-inline-start: auto;
-  }
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
@@ -486,9 +474,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-2\.5 {
-    margin-top: calc(var(--spacing) * 2.5);
-  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -597,9 +582,6 @@
   .ml-6 {
     margin-left: calc(var(--spacing) * 6);
   }
-  .ml-\[1rem\] {
-    margin-left: 1rem;
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -684,9 +666,6 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
-  .h-48 {
-    height: calc(var(--spacing) * 48);
-  }
   .h-\[0\.125rem\] {
     height: 0.125rem;
   }
@@ -696,9 +675,6 @@
   .h-\[36rem\] {
     height: 36rem;
   }
-  .h-\[calc\(100\%-1rem\)\] {
-    height: calc(100% - 1rem);
-  }
   .h-full {
     height: 100%;
   }
@@ -708,9 +684,6 @@
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
-  .max-h-full {
-    max-height: 100%;
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1228,9 +1201,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-blue-700 {
-    border-color: var(--color-blue-700);
-  }
   .border-gray-100 {
     border-color: var(--color-gray-100);
   }
@@ -1240,12 +1210,6 @@
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
-  .border-gray-500 {
-    border-color: var(--color-gray-500);
-  }
-  .border-gray-900 {
-    border-color: var(--color-gray-900);
-  }
   .border-green-100 {
     border-color: var(--color-green-100);
   }
@@ -1745,9 +1709,6 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
-  .text-blue-700 {
-    color: var(--color-blue-700);
-  }
   .text-blue-800 {
     color: var(--color-blue-800);
   }
@@ -2143,20 +2104,6 @@
       }
     }
   }
-  .hover\:bg-blue-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-700);
-      }
-    }
-  }
-  .hover\:bg-blue-800 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-800);
-      }
-    }
-  }
   .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {
@@ -2624,11 +2571,6 @@
       padding-inline: calc(var(--spacing) * 4);
     }
   }
-  .sm\:px-16 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 16);
-    }
-  }
   .sm\:py-2 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 2);
@@ -2870,11 +2812,6 @@
       padding: calc(var(--spacing) * 0);
     }
   }
-  .md\:p-5 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 5);
-    }
-  }
   .md\:p-6 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 6);
@@ -3104,12 +3041,6 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
-  .lg\:text-xl {
-    @media (width >= 64rem) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
   .lg\:hover\:underline {
     @media (width >= 64rem) {
       &:hover {
@@ -3237,11 +3168,6 @@
       padding-inline: calc(var(--spacing) * 0);
     }
   }
-  .xl\:px-48 {
-    @media (width >= 80rem) {
-      padding-inline: calc(var(--spacing) * 48);
-    }
-  }
   .xl\:py-24 {
     @media (width >= 80rem) {
       padding-block: calc(var(--spacing) * 24);
@@ -3461,11 +3387,6 @@
       background-color: var(--color-red-700);
     }
   }
-  .dark\:bg-red-900 {
-    &:where(.dark, .dark *) {
-      background-color: var(--color-red-900);
-    }
-  }
   .dark\:bg-teal-900 {
     &:where(.dark, .dark *) {
       background-color: var(--color-teal-900);
@@ -3516,11 +3437,6 @@
       color: var(--color-gray-600);
     }
   }
-  .dark\:text-gray-700 {
-    &:where(.dark, .dark *) {
-      color: var(--color-gray-700);
-    }
-  }
   .dark\:text-green-400 {
     &:where(.dark, .dark *) {
       color: var(--color-green-400);
@@ -3561,11 +3477,6 @@
       color: var(--color-purple-500);
     }
   }
-  .dark\:text-red-300 {
-    &:where(.dark, .dark *) {
-      color: var(--color-red-300);
-    }
-  }
   .dark\:text-red-400 {
     &:where(.dark, .dark *) {
       color: var(--color-red-400);