archive: add 32px content footer; date section as a bottom card; hide cam scrollbar

The archive content frame gets a 32px footer (reusing the live grid-bar look)
with a fullscreen button that expands the player + timeline. The sidebar date
section is now a bottom-anchored card (panel-2, bordered, rounded) holding the
date input above the inline calendar; the camera list fills the space above it
and its scrollbar is hidden (still scrollable). Calendar colours tweaked to sit
on the card.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

VERSION

@@ -1 +1 @@
-0.0.143
+0.0.144

frontend/archive.html

@@ -23,11 +23,18 @@
           <div class="arch-cal" id="calendar"></div>
         </div>
       </aside>
-      <div class="arch-content">
+      <div class="arch-content" id="arch-content">
         <div class="player-wrap" id="player">
           <div class="hint">Кликните по таймлайну ниже, чтобы смотреть запись</div>
         </div>
         <div class="timeline" id="timeline"></div>
+        <footer class="grid-bar" id="arch-bar">
+          <div class="gb-left"></div>
+          <div class="gb-center"></div>
+          <div class="gb-right">
+            <button class="gb-btn" id="arch-fs" title="Полный экран" aria-label="Полный экран">⛶</button>
+          </div>
+        </footer>
       </div>
     </main>
   </div>

frontend/static/app.js

@@ -1047,6 +1047,9 @@ const Archive = {
     this.bindCalendar();
     this.renderCalendar();
 
+    const fsBtn = document.getElementById("arch-fs");
+    if (fsBtn) fsBtn.onclick = (e) => { e.preventDefault(); toggleFullscreen(document.getElementById("arch-content")); };
+
     // при ресайзе окна пересчитать смещение ленты (центр зависит от ширины вьюпорта)
     window.addEventListener("resize", () => { if (this.track) this._applyTl(); });
 

frontend/static/style.css

@@ -253,19 +253,23 @@ footer.grid-bar {
   width: 220px; flex: none; display: flex; flex-direction: column;
   background: var(--panel); border-right: 1px solid var(--border); overflow: hidden;
 }
-.arch-cams { flex: 1 1 50%; min-height: 0; overflow-y: auto; border-bottom: 1px solid var(--border); }
+/* верхний фрейм — список камер: заполняет всё над карточкой даты, без полосы прокрутки */
+.arch-cams { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
+.arch-cams::-webkit-scrollbar { width: 0; height: 0; display: none; }
 .arch-cam {
   padding: 6px 12px; font-size: 13px; color: var(--text); cursor: pointer;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .arch-cam:hover { background: var(--panel-2); }
 .arch-cam.active { background: #c0392b; color: #fff; font-weight: 600; }
+/* нижний фрейм даты — карточка (дата сверху + календарь), прижата вниз */
 .arch-date {
-  flex: 1 1 50%; min-height: 0; overflow-y: auto;
+  flex: none; margin: 10px; padding: 10px;
-  display: flex; flex-direction: column; gap: 8px; padding: 10px;
+  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
+  display: flex; flex-direction: column; gap: 8px;
 }
 .arch-dateinput {
-  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+  width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border);
   border-radius: 6px; padding: 5px 8px; font-size: 13px;
 }
 .arch-cal { user-select: none; }
@@ -283,7 +287,7 @@ footer.grid-bar {
   color: var(--text); font-variant-numeric: tabular-nums;
 }
 .cal-day.empty { visibility: hidden; cursor: default; }
-.cal-day:hover:not(.empty) { background: var(--panel-2); }
+.cal-day:hover:not(.empty) { background: rgba(255, 255, 255, .07); }
 .cal-day.today { box-shadow: inset 0 0 0 1px var(--text-dim); }
 .cal-day.sel { background: #c0392b; color: #fff; font-weight: 600; }
 /* контент архива (плеер + таймлайн) */