DRYing the project

app/templates/gallery.html

@@ -175,6 +175,7 @@
   };
 </script>
 
+<script src="{{ url_for('static', filename='js/tag-utils.js') }}"></script>
 <script src="{{ url_for('static', filename='js/gallery-infinite.js') }}"></script>
 <script src="{{ url_for('static', filename='js/view-modal.js') }}"></script>
 <script src="{{ url_for('static', filename='js/bulk-select.js') }}"></script>

app/templates/showcase.html

@@ -47,35 +47,12 @@
 {% endfor %}]
 </script>
 
-<!-- Modal viewer -->
-<div id="imageModal" class="modal">
-  <div class="modal-content">
-    <button id="modalClose" class="modal-close-btn" title="Close (ESC)">×</button>
-    <button id="modalPrev" class="modal-button modal-prev">‹</button>
-    <button id="modalNext" class="modal-button modal-next">›</button>
-    <span class="modal-close-hint">ESC to close</span>
-
-    <div class="modal-body">
-      <div id="modalImageWrapper" class="modal-image-wrapper">
-        <img id="modalImage" src="" alt="Full View">
-      </div>
-
-      <div id="modalTagEditor" class="tag-editor" data-image-id="">
-        <div id="modalTagList" class="tags"></div>
-        <form id="modalTagForm" class="tag-form" autocomplete="off">
-          <div class="tag-form-wrapper">
-            <input type="text" id="tagInput" name="name" placeholder="Add tag..." autocomplete="off">
-            <div id="tagAutocomplete" class="tag-autocomplete"></div>
-          </div>
-          <button type="submit">Add</button>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
+<!-- Modal viewer (shared with gallery) -->
+{% include '_gallery_modal.html' %}
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ url_for('static', filename='js/tag-utils.js') }}"></script>
 <script src="{{ url_for('static', filename='js/view-modal.js') }}"></script>
 <script src="{{ url_for('static', filename='js/showcase.js') }}"></script>
 {% endblock %}