From ae181cf92fc9c1e85cad7a7b843a4d83cec636ac Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Thu, 15 Jan 2026 21:00:17 +0100
Subject: [PATCH] fix: show upload button in mobile topbar instead of sidebar

The upload button was hidden in the sidebar on mobile devices, requiring
users to open the menu to find it. Now it appears directly in the topbar
for easy access on all screen sizes.

- Remove !isMobile condition from header upload button
- Add responsive text (short on mobile, full on desktop)
- Remove duplicate upload button from sidebar

Fixes #113
---
 .../src/components/gallery/GallerySidebar.tsx | 20 +------------------
 .../src/components/gallery/GalleryView.tsx    |  7 ++++---
 2 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/gallery/GallerySidebar.tsx b/frontend/src/components/gallery/GallerySidebar.tsx
index a0575d27..8f9febdc 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, Upload, Star } from 'lucide-react';
+import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } from 'lucide-react';
 import { Button } from '../common';
 import { PhotoCategory } from '../../types';
 import { useTranslation } from 'react-i18next';
@@ -139,24 +139,6 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
 
         {/* Content */}
         <div className="gallery-sidebar-content flex-1 overflow-y-auto">
-          {/* Upload Section - Only show on mobile when uploads are allowed */}
-          {isMobile && allowUploads && onUploadClick && (
-            <div className="p-4 border-b border-neutral-200">
-              <Button
-                variant="outline"
-                size="sm"
-                leftIcon={<Upload className="w-4 h-4" />}
-                onClick={() => {
-                  onUploadClick();
-                  onClose();
-                }}
-                className="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 76e1f53b..aadbbf60 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 only on desktop when sidebar is shown
+          // Upload button for sidebar layouts (shown on both mobile and desktop)
           const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
-          if (allowUploads && showSidebar && !isMobile) {
+          if (allowUploads && showSidebar) {
             items.push(
               <Button
                 key="upload-button"
@@ -619,7 +619,8 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
                 leftIcon={<Upload className="w-4 h-4" />}
                 onClick={() => setShowUploadModal(true)}
               >
-                {t('upload.uploadPhotos')}
+                <span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
+                <span className="sm:hidden">{t('common.upload')}</span>
               </Button>
             );
           }