From 2953f435531a6be4cdf3c255bf2637d5ffb60c5a Mon Sep 17 00:00:00 2001
From: mojatter <uz@trycatch.jp>
Date: Fri, 10 Apr 2026 21:59:17 +0900
Subject: [PATCH] refactor(console): Replace custom modal overlay with HTML5
 dialog element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adopt the native <dialog> element for the preview modal, replacing
the div.modal-overlay with JS-driven show/hide. This eliminates
openPreview, closePreview, and previewKeyHandler functions entirely
— Escape-to-close is now handled by the browser natively, and the
backdrop uses the ::backdrop pseudo-element.

Preview buttons switch from onclick to hx-get with hx-target, and
htmx:afterSettle calls showModal() after the swap completes.
---
 server/static/style.css               | 22 ++++++++--------
 server/templates/buckets/objects.html | 36 ++++++++++-----------------
 server/templates/buckets/preview.html |  2 +-
 server/templates/index.html           |  4 +--
 4 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/server/static/style.css b/server/static/style.css
index 8dd87e1..c2e66ac 100644
--- a/server/static/style.css
+++ b/server/static/style.css
@@ -500,20 +500,22 @@ tr:hover td {
 }
 
 /* Preview Modal */
-.modal-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(4px);
-  z-index: 1000;
+#preview-dialog {
+  background: transparent;
+  border: none;
+  padding: 2rem;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
 }
 
-.modal-overlay.active {
-  display: flex;
+#preview-dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
 }
 
 .modal-content {
diff --git a/server/templates/buckets/objects.html b/server/templates/buckets/objects.html
index cead397..eece5ec 100644
--- a/server/templates/buckets/objects.html
+++ b/server/templates/buckets/objects.html
@@ -129,7 +129,9 @@ <h1>{{.BucketName}}</h1>
           <td>
             <div class="actions-cell">
               {{if isPreviewable .Name .Length}}
-              <button class="btn-view" title="Preview File" onclick="openPreview('/buckets/{{$.BucketName}}/preview/{{.Name}}')">
+              <button class="btn-view" title="Preview File"
+                hx-get="/buckets/{{$.BucketName}}/preview/{{.Name}}"
+                hx-target="#preview-dialog" hx-swap="innerHTML">
                 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>
                 </svg>
@@ -194,7 +196,9 @@ <h1>{{.BucketName}}</h1>
 
     {{range .Objects}}
     {{if isImage .Name}}
-    <div class="gallery-card gallery-image" onclick="openPreview('/buckets/{{$.BucketName}}/preview/{{.Name}}')">
+    <div class="gallery-card gallery-image"
+      hx-get="/buckets/{{$.BucketName}}/preview/{{.Name}}"
+      hx-target="#preview-dialog" hx-swap="innerHTML">
       <div class="gallery-thumb" data-src="/buckets/{{$.BucketName}}/view/{{.Name}}">
         <div class="gallery-thumb-placeholder">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -208,7 +212,9 @@ <h1>{{.BucketName}}</h1>
       <span class="gallery-size">{{formatSize .Length}}</span>
     </div>
     {{else}}
-    <div class="gallery-card gallery-file" onclick="{{if isPreviewable .Name .Length}}openPreview('/buckets/{{$.BucketName}}/preview/{{.Name}}'){{end}}">
+    <div class="gallery-card gallery-file"
+      {{if isPreviewable .Name .Length}}hx-get="/buckets/{{$.BucketName}}/preview/{{.Name}}"
+      hx-target="#preview-dialog" hx-swap="innerHTML"{{end}}>
       <div class="gallery-file-icon">
         <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
@@ -238,25 +244,6 @@ <h1>{{.BucketName}}</h1>
 
 {{define "scripts:buckets/objects.html"}}
 <script>
-  function openPreview(previewUrl) {
-    var modal = document.getElementById('preview-modal');
-    htmx.ajax('GET', previewUrl, {target: '#preview-modal', swap: 'innerHTML'}).then(function() {
-      modal.classList.add('active');
-      document.addEventListener('keydown', previewKeyHandler);
-    });
-  }
-
-  function closePreview() {
-    var modal = document.getElementById('preview-modal');
-    modal.classList.remove('active');
-    modal.innerHTML = '';
-    document.removeEventListener('keydown', previewKeyHandler);
-  }
-
-  function previewKeyHandler(e) {
-    if (e.key === 'Escape') closePreview();
-  }
-
   function setViewMode(mode, btn) {
     var listView = document.getElementById('list-view');
     var galleryView = document.getElementById('gallery-view');
@@ -310,8 +297,11 @@ <h1>{{.BucketName}}</h1>
   }
 
   document.addEventListener('htmx:afterSettle', function(evt) {
-    if (evt.detail.target.id === 'main-content') {
+    var id = evt.detail.target.id;
+    if (id === 'main-content') {
       initGalleryView();
+    } else if (id === 'preview-dialog') {
+      evt.detail.target.showModal();
     }
   });
 </script>
diff --git a/server/templates/buckets/preview.html b/server/templates/buckets/preview.html
index 8e7314f..1c93a1b 100644
--- a/server/templates/buckets/preview.html
+++ b/server/templates/buckets/preview.html
@@ -7,7 +7,7 @@
           <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
         </svg>
       </a>
-      <button class="modal-close" onclick="closePreview()">&times;</button>
+      <button class="modal-close" onclick="this.closest('dialog').close()">&times;</button>
     </div>
   </div>
 
diff --git a/server/templates/index.html b/server/templates/index.html
index cbbe138..55cb775 100644
--- a/server/templates/index.html
+++ b/server/templates/index.html
@@ -59,8 +59,8 @@ <h3>Buckets</h3>
     </main>
   </div>
 
-  <div id="preview-modal" class="modal-overlay" onclick="if(event.target===this)closePreview()">
-  </div>
+  <dialog id="preview-dialog" onclick="if(event.target===this)this.close()">
+  </dialog>
 
   <div hx-get="/scripts" hx-trigger="load" hx-swap="innerHTML" style="display:none;"></div>
 </body>