From 2a2c23d11610e6c81684163eb4ea934a6d6104fb Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Fri, 16 Jan 2026 14:29:49 +0100
Subject: [PATCH] fix: mobile upload button visibility in gallery

- Remove hidden sm:block wrapper hiding upload button on mobile for Grid layout
- Add upload button to GallerySidebar using existing allowUploads/onUploadClick props
- Ensures upload button is visible in both header and sidebar on all devices

Closes #113
---
 .../src/components/gallery/GalleryLayout.tsx  |  6 +----
 .../src/components/gallery/GallerySidebar.tsx | 20 ++++++++++++++++-
 .../src/components/gallery/GalleryView.tsx    | 22 +++----------------
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryLayout.tsx b/frontend/src/components/gallery/GalleryLayout.tsx
index be708d27..e6baf342 100644
--- a/frontend/src/components/gallery/GalleryLayout.tsx
+++ b/frontend/src/components/gallery/GalleryLayout.tsx
@@ -240,11 +240,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
               {/* Right side - Action buttons */}
               <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
                 {/* Extra header items (upload button, etc.) */}
-                {headerExtra && (
-                  <div className="hidden sm:block">
-                    {headerExtra}
-                  </div>
-                )}
+                {headerExtra}
                 
                 {/* Download all button - hidden on mobile when sidebar is shown */}
                 {showDownloadAll && onDownloadAll && (
diff --git a/frontend/src/components/gallery/GallerySidebar.tsx b/frontend/src/components/gallery/GallerySidebar.tsx
index 8f9febdc..4c5a9ddf 100644
--- a/frontend/src/components/gallery/GallerySidebar.tsx
+++ b/frontend/src/components/gallery/GallerySidebar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } from 'lucide-react';
+import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star, Upload } from 'lucide-react';
 import { Button } from '../common';
 import { PhotoCategory } from '../../types';
 import { useTranslation } from 'react-i18next';
@@ -139,6 +139,24 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
 
         {/* Content */}
         <div className="gallery-sidebar-content flex-1 overflow-y-auto">
+          {/* Upload Section - Show prominently at top for mobile users */}
+          {allowUploads && onUploadClick && (
+            <div className="gallery-sidebar-section gallery-sidebar-upload p-4 border-b border-neutral-200">
+              <Button
+                variant="outline"
+                size="sm"
+                leftIcon={<Upload className="w-4 h-4" />}
+                onClick={() => {
+                  onUploadClick();
+                  if (isMobile) onClose();
+                }}
+                className="gallery-btn w-full"
+              >
+                {t('upload.uploadPhotos')}
+              </Button>
+            </div>
+          )}
+
           {/* Search Section - Hidden for carousel layout */}
           {galleryLayout !== 'carousel' && (
             <div className="gallery-sidebar-section gallery-sidebar-search p-4 border-b border-neutral-200">
diff --git a/frontend/src/components/gallery/GalleryView.tsx b/frontend/src/components/gallery/GalleryView.tsx
index aadbbf60..4304082d 100644
--- a/frontend/src/components/gallery/GalleryView.tsx
+++ b/frontend/src/components/gallery/GalleryView.tsx
@@ -608,9 +608,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
             );
           }
           
-          // Upload button for sidebar layouts (shown on both mobile and desktop)
+          // Upload button - always show when uploads are allowed (regardless of layout/theme loading state)
           const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
-          if (allowUploads && showSidebar) {
+          if (allowUploads) {
             items.push(
               <Button
                 key="upload-button"
@@ -618,23 +618,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
                 size="sm"
                 leftIcon={<Upload className="w-4 h-4" />}
                 onClick={() => setShowUploadModal(true)}
-              >
-                <span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
-                <span className="sm:hidden">{t('common.upload')}</span>
-              </Button>
-            );
-          }
-          
-          // Upload button for non-sidebar layouts
-          if (allowUploads && !showSidebar) {
-            items.push(
-              <Button
-                key="upload-button"
-                variant="outline"
-                size="sm"
-                leftIcon={<Upload className="w-4 h-4" />}
-                onClick={() => setShowUploadModal(true)}
-                className="flex-1 sm:flex-initial"
+                className={!showSidebar ? 'flex-1 sm:flex-initial' : ''}
               >
                 <span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
                 <span className="sm:hidden">{t('common.upload')}</span>