Backend fixed and features

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/client.html.j2

@@ -1,27 +1,38 @@
-{% extends 'base/master-detail-email.html.j2' %}
-{% block title %}Client {{ client.name }}{% endblock %}
+{% extends "/base/master-detail.html.j2" %}
 
 {% block master %}
-  <div id="client-tree">
-    {% include '/clients/partials/tree.html.j2' %}
-  </div>
-  {% include '/clients/partials/drawer_create.html.j2' %}
-{% endblock %}
+  <sl-tab-group id="sideTabs" class="flex flex-col flex-1 h-full overflow-hidden master-pane-tabs">
+    <sl-tab slot="nav" panel="clients">Clients</sl-tab>
+    <sl-tab slot="nav" panel="secrets">Secrets</sl-tab>
+    <sl-tab slot="nav" panel="audit">Audit</sl-tab>
 
+    <sl-tab-panel name="clients" >
+      <div id="client-tree" class="flex flex-col flex-1 w-full h-full">
+      </div>
+    </sl-tab-panel>
+    <sl-tab-panel name="secrets">
+      <div id="secrets-tree" class="flex flex-col flex-1 w-full h-full">
+      </div>
+    </sl-tab-panel>
+
+    <sl-tab-panel name="audit">
+      <div id="audit-tree" class="flex flex-col flex-1 w-full h-full">
+      </div>
+    </sl-tab-panel>
+
+
+  </sl-tab-group>
+
+{% endblock master %}
 
 {% block detail %}
-
   <div id="clientdetails" class="w-full">
     {% include '/clients/partials/client_details.html.j2' %}
   </div>
-  <!-- after clientdetails -->
-{% endblock %}
 
+{% endblock detail %}
 {% block local_scripts %}
   <script>
-    {% include '/clients/partials/tree_event.js' %}
+    {% include '/admin/partials/master.js' %}
   </script>
 {% endblock local_scripts %}
-
-
-

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

@@ -1,23 +1,33 @@
-{% extends 'base/master-detail-email.html.j2' %}
-{% block title %}Clients{% endblock %}
+{% extends "/base/master-detail.html.j2" %}
 
 {% block master %}
-  <div id="client-tree">
-    {% include '/clients/partials/tree.html.j2' %}
-  </div>
-{% endblock %}
+  <sl-tab-group id="sideTabs" class="flex flex-col flex-1 h-full overflow-hidden master-pane-tabs">
+    <sl-tab slot="nav" panel="clients">Clients</sl-tab>
+    <sl-tab slot="nav" panel="secrets">Secrets</sl-tab>
+    <sl-tab slot="nav" panel="audit">Audit</sl-tab>
+
+    <sl-tab-panel name="clients" >
+      <div id="client-tree" class="flex flex-col flex-1 w-full h-full">
+        {% include '/clients/partials/tree.html.j2' %}
+      </div>
+    </sl-tab-panel>
+    <sl-tab-panel name="secrets">
+      <div id="secrets-tree" class="flex flex-col flex-1 w-full h-full">
+      </div>
+    </sl-tab-panel>
+
+    <sl-tab-panel name="audit">
+      <div id="audit-tree" class="flex flex-col flex-1 w-full h-full">
+      </div>
+    </sl-tab-panel>
 
 
-{% block detail %}
+  </sl-tab-group>
 
-  <div id="clientdetails" class="w-full bg-white dark:bg-gray-800">
-    <h3 class="mb-4 text-sm italic text-gray-400 dark:text-white">Click an item to view details</h3>
-  </div>
-{% include '/clients/partials/drawer_create.html.j2' %}
-{% endblock %}
+{% endblock master %}
 
 {% block local_scripts %}
   <script>
-    {% include '/clients/partials/tree_event.js' %}
+    {% include '/admin/partials/master.js' %}
   </script>
 {% endblock local_scripts %}

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree.html.j2

@@ -1,7 +1,7 @@
 {# This is the master block #}
 
-<div class="flowbite-init-target">
-  <div class="tree-header grid grid-cols-2 place-content-between mb-2">
+<div class="flowbite-init-target flex flex-col h-full min-h-0">
+  <div class="tree-header mb-2 grid grid-cols-2 place-content-between">
     <h1 class="text-lg font-semibold text-gray-900 dark:text-white">Client List</h1>
     <div class="flex">
       <div
@@ -30,7 +30,7 @@
           ></sl-icon-button>
       </div>
     </div>
-    <div class="col-span-full">
+    <div class="col-span-full"> <!-- was: col-span-full -->
       <div class="relative">
         <div class="border-b border-gray-200 py-2">
           <label for="default-search" class="mb-2 text-xs font-medium text-gray-900 sr-only dark:text-white">Search</label>
@@ -57,8 +57,7 @@
       </div>
     </div>
   </div>
-  <div id="client-tree-items">
     {% include '/clients/partials/tree_items.html.j2' %}
-  </div>
 </div>
 
+{% include '/clients/partials/drawer_create.html.j2' %}

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_items.html.j2

@@ -1,41 +1,46 @@
-<div class="flowbite-init-target">
+<div id="client-tree-items" class="flowbite-init-target flex flex-col h-full min-h-0">
   {% if more_results %}
     <span class="text-gray-400 text-xs italic mt-4">{{more_results}} more results. Narrow search to show them...</span>
   {% endif %}
-  <sl-tree class="full-height-tree">
-    {% for item in clients %}
-      <sl-tree-item
-        id="client-{{ item.id }}"
-        data-node-type="client"
-        data-client-id="{{ item.id }}"
-        data-client-name="{{ item.name }}"
-        {% if client and client.id == item.id %}
-          selected
-        {% endif %}
+  <div class="flex-1 overflow-y-auto">
+    <sl-tree class="w-full">
+      {% for item in clients %}
+        <sl-tree-item
+          id="client-{{ item.id }}"
+          data-node-type="client"
+          data-client-id="{{ item.id }}"
+          data-client-name="{{ item.name }}"
+          {% if client and client.id == item.id %}
+            selected
+          {% endif %}
+
+          >
+          <sl-icon name="person-fill-lock"> </sl-icon>
+          <span class="px-2">{{item.name}}</span>
+          {% for secret in item.secrets %}
+            <sl-tree-item
+              id="client-{{ item.name }}-secret-{{ secret }}"
+              data-node-type="secret"
+              data-secret-client-name="{{ item.name }}"
+              data-secret-name="{{ secret }}"
+              >
+              <sl-icon name="file-lock2"> </sl-icon>
+              <span class="px-2">{{ secret }}</span>
+            </sl-tree-item>
+          {% endfor %}
+        </sl-tree-item>
+      {% endfor %}
+    </sl-tree>
+  </div>
 
-        >
-        <sl-icon name="person-fill-lock"> </sl-icon>
-        <span class="px-2">{{item.name}}</span>
-        {% for secret in item.secrets %}
-          <sl-tree-item
-            id="client-{{ item.name }}-secret-{{ secret }}"
-            data-node-type="secret"
-            data-secret-client-name="{{ item.name }}"
-            data-secret-name="{{ secret }}"
-            >
-            <sl-icon name="file-lock2"> </sl-icon>
-            <span class="px-2">{{ secret }}</span>
-          </sl-tree-item>
-        {% endfor %}
-      </sl-tree-item>
-    {% endfor %}
-  </sl-tree>
   {% if pages %}
-    <div class="mt-4 text-center flex items-center flex-col border-t border-gray-100">
-      <span class="text-sm text-gray-700 dark:text-gray-400">
-        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pages.offset  + 1 }}</span> to <span class="font-semibold text-gray-900 dark:text-white">{{ pages.limit }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ results.total_results }}</span> Entries
-      </span>
-      {% include 'clients/partials/pagination.html.j2' %}
+    <div class="shrink-0 mt-4 pt-2 border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800">
+      <div class="mt-4 text-center flex items-center flex-col">
+        <span class="text-sm text-gray-700 dark:text-gray-400">
+          Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pages.offset  + 1 }}</span> to <span class="font-semibold text-gray-900 dark:text-white">{{ pages.limit }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ results.total_results }}</span> Entries
+        </span>
+        {% include 'clients/partials/pagination.html.j2' %}
+      </div>
     </div>
   {% endif %}
 </div>