From 0f56c8b0f4174cddb6a9213d94d1e67c57c89b4d Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Thu, 18 Dec 2025 15:48:11 +0100
Subject: [PATCH] feat: add gallery upload and fix mobile header issues

- Added 'Upload from Gallery' button to CameraCapture component
- Implemented secondary file input without 'capture' attribute to allow gallery selection on mobile
- Fixed overlapping header elements on mobile by making the header responsive
- Compacted 'Dram of the Day' button on small screens
- Added translations for the new gallery upload feature
---
 src/app/page.tsx                 |  4 +-
 src/components/CameraCapture.tsx | 87 ++++++++++++++++++++------------
 src/components/DramOfTheDay.tsx  |  2 +-
 src/i18n/de.ts                   |  1 +
 src/i18n/en.ts                   |  1 +
 src/i18n/types.ts                |  1 +
 6 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e4f7583..e379467 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -129,11 +129,11 @@ export default function Home() {
     return (
         <main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-zinc-50 dark:bg-black">
             <div className="z-10 max-w-5xl w-full flex flex-col items-center gap-8">
-                <header className="w-full flex justify-between items-center">
+                <header className="w-full flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
                     <h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">
                         WHISKY<span className="text-amber-600">VAULT</span>
                     </h1>
-                    <div className="flex items-center gap-4">
+                    <div className="flex flex-wrap items-center justify-center sm:justify-end gap-3 md:gap-4">
                         <LanguageSwitcher />
                         <DramOfTheDay bottles={bottles} />
                         <button
diff --git a/src/components/CameraCapture.tsx b/src/components/CameraCapture.tsx
index 04ce95c..3b8bcb1 100644
--- a/src/components/CameraCapture.tsx
+++ b/src/components/CameraCapture.tsx
@@ -43,6 +43,7 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
     }, [sessionId]);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const galleryInputRef = useRef<HTMLInputElement>(null);
     const [isProcessing, setIsProcessing] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [previewUrl, setPreviewUrl] = useState<string | null>(null);
@@ -227,6 +228,10 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
         fileInputRef.current?.click();
     };
 
+    const triggerGallery = () => {
+        galleryInputRef.current?.click();
+    };
+
     return (
         <div className="flex flex-col items-center gap-4 md:gap-6 w-full max-w-md mx-auto p-4 md:p-6 bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-zinc-200 dark:border-zinc-800 transition-all hover:shadow-whisky-amber/20">
             <h2 className="text-xl md:text-2xl font-bold text-zinc-800 dark:text-zinc-100 italic">{t('camera.magicShot')}</h2>
@@ -260,6 +265,14 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
                 className="hidden"
             />
 
+            <input
+                type="file"
+                accept="image/*"
+                ref={galleryInputRef}
+                onChange={handleCapture}
+                className="hidden"
+            />
+
             {lastSavedId ? (
                 <div className="flex flex-col gap-3 w-full animate-in zoom-in-95 duration-300">
                     <div className="flex items-center gap-2 text-green-600 font-bold justify-center p-2">
@@ -342,38 +355,50 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
                     {t('camera.toVault')}
                 </Link>
             ) : (
-                <button
-                    onClick={isQueued ? () => setPreviewUrl(null) : (previewUrl && analysisResult ? handleSave : triggerUpload)}
-                    disabled={isProcessing || isSaving}
-                    className="w-full py-4 px-6 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] shadow-lg shadow-amber-600/20 disabled:opacity-50"
-                >
-                    {isSaving ? (
-                        <>
-                            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
-                            {t('camera.saving')}
-                        </>
-                    ) : isQueued ? (
-                        <>
-                            <CheckCircle2 size={20} />
-                            {t('camera.nextBottle')}
-                        </>
-                    ) : previewUrl && analysisResult ? (
-                        <>
-                            <CheckCircle2 size={20} />
-                            {t('camera.inVault')}
-                        </>
-                    ) : previewUrl ? (
-                        <>
-                            <Upload size={20} />
-                            {t('camera.newPhoto')}
-                        </>
-                    ) : (
-                        <>
-                            <Camera size={20} />
-                            {t('camera.openingCamera')}
-                        </>
+                <div className="flex flex-col gap-3 w-full">
+                    <button
+                        onClick={isQueued ? () => setPreviewUrl(null) : (previewUrl && analysisResult ? handleSave : triggerUpload)}
+                        disabled={isProcessing || isSaving}
+                        className="w-full py-4 px-6 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] shadow-lg shadow-amber-600/20 disabled:opacity-50"
+                    >
+                        {isSaving ? (
+                            <>
+                                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                                {t('camera.saving')}
+                            </>
+                        ) : isQueued ? (
+                            <>
+                                <CheckCircle2 size={20} />
+                                {t('camera.nextBottle')}
+                            </>
+                        ) : previewUrl && analysisResult ? (
+                            <>
+                                <CheckCircle2 size={20} />
+                                {t('camera.inVault')}
+                            </>
+                        ) : previewUrl ? (
+                            <>
+                                <Upload size={20} />
+                                {t('camera.newPhoto')}
+                            </>
+                        ) : (
+                            <>
+                                <Camera size={20} />
+                                {t('camera.openingCamera')}
+                            </>
+                        )}
+                    </button>
+
+                    {!previewUrl && !isProcessing && (
+                        <button
+                            onClick={triggerGallery}
+                            className="w-full py-3 px-6 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 rounded-xl font-bold flex items-center justify-center gap-2 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-200 transition-all text-sm"
+                        >
+                            <Upload size={18} />
+                            {t('camera.uploadGallery')}
+                        </button>
                     )}
-                </button>
+                </div>
             )}
 
             {error && (
diff --git a/src/components/DramOfTheDay.tsx b/src/components/DramOfTheDay.tsx
index dfbd3ba..8bdfe23 100644
--- a/src/components/DramOfTheDay.tsx
+++ b/src/components/DramOfTheDay.tsx
@@ -44,7 +44,7 @@ export default function DramOfTheDay({ bottles }: DramOfTheDayProps) {
             <button
                 onClick={suggestDram}
                 disabled={isRolling}
-                className="flex items-center gap-2 px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl font-black uppercase tracking-widest text-xs transition-all shadow-lg shadow-amber-600/20 active:scale-95 disabled:opacity-50"
+                className="flex items-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl font-black uppercase tracking-widest text-[10px] sm:text-xs transition-all shadow-lg shadow-amber-600/20 active:scale-95 disabled:opacity-50"
             >
                 {isRolling ? (
                     <Dices size={18} className="animate-spin" />
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index 501f142..ce825af 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -130,6 +130,7 @@ export const de: TranslationKeys = {
         toVault: 'Zum Whisky im Vault',
         authRequired: 'Bitte melde dich an, um Flaschen zu speichern.',
         processingError: 'Verarbeitung fehlgeschlagen. Bitte erneut versuchen.',
+        uploadGallery: 'Aus Galerie hochladen',
     },
     tasting: {
         addNote: 'Neue Note hinzufügen',
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index cfdff77..6d4ba22 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -130,6 +130,7 @@ export const en: TranslationKeys = {
         toVault: 'Go to bottle in Vault',
         authRequired: 'Please sign in to save bottles.',
         processingError: 'Processing failed. Please try again.',
+        uploadGallery: 'Upload from Gallery',
     },
     tasting: {
         addNote: 'Add Tasting Note',
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index e85c504..b22bc67 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -128,6 +128,7 @@ export type TranslationKeys = {
         toVault: string;
         authRequired: string;
         processingError: string;
+        uploadGallery: string;
     };
     tasting: {
         addNote: string;