moving styling and views to be more consistent and for gallery view to be less cumbersome.

app/templates/gallery.html

@@ -3,14 +3,73 @@
 {% block title %}Gallery{% endblock %}
 
 {% block content %}
-<h1 style="text-align:center; margin-top: 1rem;">Gallery</h1>
+<div class="gallery-infinite-container">
+  <!-- Timeline Scrollbar (left sidebar) -->
+  <aside id="timelineSidebar" class="timeline-sidebar">
+    <div id="timelineTrack" class="timeline-track">
+      <!-- Populated by JS with year-month markers -->
+      <div class="timeline-loading">Loading...</div>
+    </div>
+  </aside>
 
-<!-- Gallery Grid -->
-{% include '_gallery_grid.html' %}
+  <!-- Main Gallery Content -->
+  <main class="gallery-main">
+    <div class="gallery-header">
+      <h1>Gallery</h1>
+      {% if active_tag %}
+        <div class="active-filter">
+          Filtered by: <span class="filter-tag">{{ active_tag }}</span>
+          <a href="{{ url_for('main.gallery') }}" class="clear-filter" title="Clear filter">×</a>
+        </div>
+      {% endif %}
+    </div>
 
-<!-- Floating Pagination Bar -->
-{% if images.pages > 1 %}
-{% include '_pagination_floating.html' %}
-{% endif %}
+    <!-- Gallery Grid with Date Sections -->
+    <div id="galleryInfinite" class="gallery-infinite">
+      {% for year_month_key, year_month_label, images in grouped_images %}
+        <section class="date-section" data-year-month="{{ year_month_key }}">
+          <h2 class="date-divider" id="section-{{ year_month_key }}">
+            <span class="date-divider-text">{{ year_month_label }}</span>
+            <span class="date-divider-count">{{ images|length }} images</span>
+          </h2>
+          <div class="gallery-grid">
+            {% for image in images %}
+              {% include '_gallery_item.html' %}
+            {% endfor %}
+          </div>
+        </section>
+      {% else %}
+        <div class="gallery-empty">
+          <p>No images found{% if active_tag %} for tag "{{ active_tag }}"{% endif %}.</p>
+        </div>
+      {% endfor %}
+    </div>
 
+    <!-- Loading indicator -->
+    <div id="galleryLoading" class="gallery-loading" style="display:none;">
+      <span class="loading-spinner"></span>
+      <span>Loading more images...</span>
+    </div>
+
+    <!-- End of content marker -->
+    <div id="galleryEnd" class="gallery-end" style="display:none;">
+      No more images
+    </div>
+  </main>
+</div>
+
+<!-- Modal -->
+{% include '_gallery_modal.html' %}
+
+<!-- Pass initial state to JS -->
+<script>
+  window.galleryState = {
+    cursor: {{ initial_cursor | tojson | safe if initial_cursor else 'null' }},
+    hasMore: {{ 'true' if has_more else 'false' }},
+    activeTag: {{ active_tag | tojson | safe if active_tag else 'null' }}
+  };
+</script>
+
+<script src="{{ url_for('static', filename='js/gallery-infinite.js') }}"></script>
+<script src="{{ url_for('static', filename='js/modal-pagination.js') }}"></script>
 {% endblock %}