feat(ui): image tabblad uitgebreid met Dockerfile selectie en tag suggestie

webui/html/index.html

@@ -153,6 +153,7 @@
             <button class="btn" onclick="loadImages()">Ververs</button>
             <button class="btn bad" onclick="removeSelectedImages()">Remove selected</button>
             <button class="btn warn" onclick="pruneUnusedImages()">Prune unused</button>
+            <button class="btn ok" onclick="openBuildModal()">Build image</button>
           </div>
       </div>
       <div class="cardBody">
@@ -165,6 +166,7 @@
               <th>Repo / Tag</th>
               <th>ID</th>
               <th>Size</th>
+              <th>Created</th>
               <th>Containers</th>
               <th>Status</th>
               <th style="width:100px;">Acties</th>
@@ -231,6 +233,83 @@
   </div>
 </div>
 
+<!-- Build Modal -->
+<div class="modalBack" id="buildModalBack" style="display:none;" onclick="closeBuildModal(event)">
+  <div class="modal" onclick="event.stopPropagation()" style="width:700px;">
+    <div class="modalHeader">
+      <div class="modalTitle">Build image</div>
+      <button class="btn small ghost" onclick="hideBuildModal()">Sluiten</button>
+    </div>
+
+    <div class="modalBody">
+
+      <div class="formRow">
+        <label>Context directory</label>
+        <input class="input" id="buildContext" placeholder="systemd/buildtests/hello">
+      </div>
+
+      <div class="formRow">
+        <label>Dockerfile</label>
+        <div class="row gap">
+          <input class="input" id="buildDockerfile" value="Dockerfile" style="flex:1;">
+          <button class="btn" type="button" onclick="openDockerfilePicker()">Kies...</button>
+        </div>
+        <div class="muted" style="margin-top:6px;">
+          Kiest een Dockerfile/Containerfile onder <span class="mono">systemd/</span>.
+        </div>
+      </div>
+
+      <div class="formRow">
+        <label>Tag</label>
+        <input class="input" id="buildTag" placeholder="localhost/myimage:latest">
+      </div>
+
+      <div class="formRow">
+        <label><input type="checkbox" id="buildPull"> Pull latest base image</label>
+      </div>
+
+      <div class="formRow">
+        <label><input type="checkbox" id="buildNoCache"> No cache</label>
+      </div>
+
+      <div style="margin-top:15px;">
+        <button class="btn ok" onclick="buildImage()">Start build</button>
+      </div>
+
+      <div style="margin-top:15px;">
+        <textarea id="buildOutput" class="textarea mono" style="height:200px;" readonly></textarea>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Dockerfile Picker Modal -->
+<div class="modalBack" id="dfPickerBack" style="display:none;" onclick="closeDockerfilePicker(event)">
+  <div class="modal" onclick="event.stopPropagation()" style="width:760px;">
+    <div class="modalHeader">
+      <div class="modalTitle">Kies Dockerfile</div>
+      <button class="btn small ghost" onclick="hideDockerfilePicker()">Sluiten</button>
+    </div>
+
+    <div class="modalBody">
+      <div class="row gap" style="margin-bottom:10px;">
+        <input class="input" id="dfPickerSearch" placeholder="Zoek... (bijv. traefik, hello, Dockerfile)" style="flex:1;">
+        <button class="btn" type="button" onclick="refreshDockerfilePicker()">Ververs</button>
+      </div>
+
+      <div class="hint" style="margin-bottom:10px;">
+        Alleen bestanden onder <span class="mono">systemd/</span> die <span class="mono">Dockerfile</span>,
+        <span class="mono">Containerfile</span> of eindigen op <span class="mono">.dockerfile</span>/<span class="mono">.containerfile</span>.
+      </div>
+
+      <div class="input" style="padding:10px; max-height:360px; overflow:auto;">
+        <div id="dfPickerList" class="mono muted">Laden...</div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
   let cmEditor = null;
   // ---- API helper ----