From 669623adbe8901142c0bbb86a556afa67b1a243f Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Wed, 8 Apr 2026 10:38:36 +0200
Subject: [PATCH] feat(layout): add a sticky page header

 - keep action bar, breadcrumb, dropzone visible even during scroll down
---
 static/css/layout/content.css |  9 ++++
 static/index.html             | 97 ++++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 47 deletions(-)

diff --git a/static/css/layout/content.css b/static/css/layout/content.css
index 3bb12d61..1d67d6fd 100644
--- a/static/css/layout/content.css
+++ b/static/css/layout/content.css
@@ -13,6 +13,15 @@
     color: #2d3748;
 }
 
+.page-sticky-header {
+    position: sticky;
+    margin: 0px;
+    padding: 10px 0px;
+    top: -20px; /* due to padding top of content-area */
+    background-color: var(--color-bg-page);
+    z-index: 100; /* ensure header is above image preview */
+}
+
 .actions-bar {
     display: flex;
     justify-content: space-between;
diff --git a/static/index.html b/static/index.html
index a4af491e..43ea4bbb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,7 +6,7 @@
     <title data-i18n="app.title">OxiCloud</title>
     <!-- Apply saved theme immediately to prevent flash of light mode -->
     <script src="/js/core/theme-init.js"></script>
-    
+
     <!-- Styles -->
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/views/inlineViewer.css">
@@ -204,57 +204,60 @@
         <div class="content-area">
             <h1 class="page-title" data-i18n="nav.files">Files</h1>
 
-            <div class="actions-bar" id="actions-bar">
-                <div class="action-buttons">
-                    <div class="upload-dropdown" id="upload-dropdown">
-                        <button class="btn btn-primary" id="upload-btn">
-                            <i class="fas fa-cloud-upload-alt"></i>
-                            <span data-i18n="actions.upload">Upload</span>
-                            <i class="fas fa-caret-down upload-caret"></i>
+            <div class="page-sticky-header">
+                <div class="actions-bar" id="actions-bar">
+
+                    <div class="action-buttons" id="action-buttons">
+                        <div class="upload-dropdown" id="upload-dropdown">
+                            <button class="btn btn-primary" id="upload-btn">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                                <span data-i18n="actions.upload">Upload</span>
+                                <i class="fas fa-caret-down upload-caret"></i>
+                            </button>
+                            <div class="upload-dropdown-menu" id="upload-dropdown-menu">
+                                <button class="upload-dropdown-item" id="upload-files-btn">
+                                    <i class="fas fa-file"></i>
+                                    <span data-i18n="actions.upload_files">Upload files</span>
+                                </button>
+                                <button class="upload-dropdown-item" id="upload-folder-btn">
+                                    <i class="fas fa-folder-open"></i>
+                                    <span data-i18n="actions.upload_folder">Upload folder</span>
+                                </button>
+                            </div>
+                        </div>
+                        <button class="btn btn-secondary" id="new-folder-btn">
+                            <i class="fas fa-folder-plus"></i>
+                            <span data-i18n="actions.new_folder">New folder</span>
                         </button>
-                        <div class="upload-dropdown-menu" id="upload-dropdown-menu">
-                            <button class="upload-dropdown-item" id="upload-files-btn">
-                                <i class="fas fa-file"></i>
-                                <span data-i18n="actions.upload_files">Upload files</span>
-                            </button>
-                            <button class="upload-dropdown-item" id="upload-folder-btn">
-                                <i class="fas fa-folder-open"></i>
-                                <span data-i18n="actions.upload_folder">Upload folder</span>
-                            </button>
+                    </div>
+
+                    <div class="view-toggle">
+                        <button class="toggle-btn active" id="grid-view-btn" title="Grid view">
+                            <i class="fas fa-th"></i>
+                        </button>
+                        <button class="toggle-btn" id="list-view-btn" title="List view">
+                            <i class="fas fa-list"></i>
+                        </button>
+                    </div>
+                </div>
+                <div id="batch-selection-bar" class="batch-selection-bar hidden"></div>
+
+                <div class="breadcrumb">
+                    <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
+                </div>
+
+                <div class="dropzone" id="dropzone">
+                    <i class="fas fa-cloud-upload-alt dropzone-icon"></i>
+                    <p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
+                    <input type="file" id="file-input" class="hidden" multiple>
+                    <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
+                    <div class="upload-progress">
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
                         </div>
                     </div>
-                    <button class="btn btn-secondary" id="new-folder-btn">
-                        <i class="fas fa-folder-plus"></i>
-                        <span data-i18n="actions.new_folder">New folder</span>
-                    </button>
                 </div>
 
-                <div class="view-toggle">
-                    <button class="toggle-btn active" id="grid-view-btn" title="Grid view">
-                        <i class="fas fa-th"></i>
-                    </button>
-                    <button class="toggle-btn" id="list-view-btn" title="List view">
-                        <i class="fas fa-list"></i>
-                    </button>
-                </div>
-            </div>
-
-            <div id="batch-selection-bar" class="batch-selection-bar hidden"></div>
-
-            <div class="dropzone" id="dropzone">
-                <i class="fas fa-cloud-upload-alt dropzone-icon"></i>
-                <p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
-                <input type="file" id="file-input" class="hidden" multiple>
-                <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
-                <div class="upload-progress">
-                    <div class="progress-bar">
-                        <div class="progress-fill"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="breadcrumb">
-                <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
             </div>
 
             <!-- Files Container -->