Backend: Fix container images management in the webui

- Update image list template to use ShortID instead of full ID
- Reorganize handler files

internal/httpserve/handler/containers.go

@@ -135,7 +135,6 @@ func ImageManagerDelete(c echo.Context, a *server.App) error {
 	ShortID := c.Param("ID")
 
 	imageID, exists := safelyInteractWithIDMap(Fetch, ShortID)
-
 	if !exists {
 		return c.String(http.StatusBadRequest, "Invalid ShortImgID")
 	}

internal/templating/models/html/fragments/imagelist.gohtml

@@ -22,9 +22,9 @@
       {{
         range.Images
       }}
-      <tr id="img-{{.ID}}" hx-ext="response-targets" class=" hover:bg-slate-100">
+      <tr id="img-{{.ShortID}}" hx-ext="response-targets" class=" hover:bg-slate-100">
         <td>
-          <span title="{{.ID}}">{{.Name}}</span>
+          <span title="{{.ShortID}}">{{.Name}}</span>
         </td>
         <td>
           <span title="Image creation date">{{.CreatedStr}}</span>
@@ -33,22 +33,22 @@
         <td align="right">
 
           <button
-            id="add-button-img-{{.ID}}"
-            hx-get="/htmx/create-container/{{.ID}}"
-            hx-target="#create-container-{{.ID}}"
-            hx-target-*="#error-message-div-{{.ID}}"
+            id="add-button-img-{{.ShortID}}"
+            hx-get="/htmx/create-container/{{.ShortID}}"
+            hx-target="#create-container-{{.ShortID}}"
+            hx-target-*="#error-message-div-{{.ShortID}}"
             hx-swap="innerHTML"
             class="py-2 px-4"
-            _="on click toggle between .visible and .hidden on #create-container-{{.ID}} then add .hidden to #upload-image"
+            _="on click toggle between .visible and .hidden on #create-container-{{.ShortID}} then add .hidden to #upload-image"
           >
             <span title="Deploy a container using this image" class="iconf text-xl text-blue-600 hover:text-gordonmascot-hblue"></span>
           </button>
 
           <button
-            id="remove-button-img-{{.ID}}"
-            hx-delete="/htmx/image-manager/delete/{{.ID}}"
-            hx-target="#img-{{.ID}}"
-            hx-target-*="#error-message-div-{{.ID}}"
+            id="remove-button-img-{{.ShortID}}"
+            hx-delete="/htmx/image-manager/delete/{{.ShortID}}"
+            hx-target="#img-{{.ShortID}}"
+            hx-target-*="#error-message-div-{{.ShortID}}"
             hx-swap="innerHTML"
             hx-confirm="Are you sure you want to delete this container image?"
             class="py-2 px-4"
@@ -59,8 +59,8 @@
       </tr>
       <t>
         <td colspan="4">
-          <div id="error-message-div-{{.ID}}" class="text-red-500"></div>
-          <div class="create-container" id="create-container-{{.ID}}"></div>
+          <div id="error-message-div-{{.ShortID}}" class="text-red-500"></div>
+          <div class="create-container" id="create-container-{{.ShortID}}"></div>
         </td>
       </tr>
       {{ else }}

internal/webui/public/assets/css/tailwind.css

@@ -6,7 +6,7 @@
 
 /* Embeded path : assets/css/cutsom.css */
 
-/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
  */
 
 /*
@@ -39,9 +39,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -51,12 +53,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -128,8 +132,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -138,8 +144,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -208,6 +218,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -231,9 +243,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -489,6 +501,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -539,6 +555,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .container {

package.json

@@ -10,6 +10,7 @@
     "dev:css": "tailwindcss -i internal/webui/public/assets/css/custom.css -o internal/webui/public/assets/css/tailwind.css --watch"
   },
   "dependencies": {
+    "caniuse-lite": "^1.0.30001653",
     "dotenv": "^16.4.5"
   }
 }