From 7980980bed14408ba78f251650a32be8e92da44f Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Tue, 3 Feb 2026 21:49:23 +0100
Subject: [PATCH] Cluster guest v2 capture controls

---
 resources/js/guest-v2/components/AppShell.tsx | 40 ++++----
 .../js/guest-v2/screens/UploadScreen.tsx      | 99 ++++++++++---------
 2 files changed, 75 insertions(+), 64 deletions(-)

diff --git a/resources/js/guest-v2/components/AppShell.tsx b/resources/js/guest-v2/components/AppShell.tsx
index d5648967..15987108 100644
--- a/resources/js/guest-v2/components/AppShell.tsx
+++ b/resources/js/guest-v2/components/AppShell.tsx
@@ -129,27 +129,29 @@ export default function AppShell({ children }: AppShellProps) {
         </YStack>
         {showFab ? (
           <>
-            <Button
-              size="$3"
-              circular
-              position="fixed"
-              bottom={28}
-              left="calc(50% - 84px)"
-              zIndex={1100}
-              backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
-              borderWidth={1}
-              borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
-              onPress={goTo('/')}
-              style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
-            >
-              <Home size={16} color={actionIconColor} />
-            </Button>
+            {isUploadRoute ? null : (
+              <Button
+                size="$3"
+                circular
+                position="fixed"
+                bottom={28}
+                left="calc(50% - 84px)"
+                zIndex={1100}
+                backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
+                borderWidth={1}
+                borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
+                onPress={goTo('/')}
+                style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
+              >
+                <Home size={16} color={actionIconColor} />
+              </Button>
+            )}
             <FloatingActionButton
               onPress={goTo('/upload')}
               hidden={isUploadRoute}
             />
             <Button
-              size="$4"
+              size="$5"
               circular
               position="fixed"
               bottom={28}
@@ -158,12 +160,12 @@ export default function AppShell({ children }: AppShellProps) {
               backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
               borderWidth={1}
               borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
-              width={54}
-              height={54}
+              width={72}
+              height={72}
               onPress={openCompass}
               style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
             >
-              <Menu size={18} color={actionIconColor} />
+              <Menu size={24} color={actionIconColor} />
             </Button>
           </>
         ) : null}
diff --git a/resources/js/guest-v2/screens/UploadScreen.tsx b/resources/js/guest-v2/screens/UploadScreen.tsx
index 11b82699..727e71d9 100644
--- a/resources/js/guest-v2/screens/UploadScreen.tsx
+++ b/resources/js/guest-v2/screens/UploadScreen.tsx
@@ -500,61 +500,70 @@ export default function UploadScreen() {
               />
             )}
             {cameraState === 'ready' && !previewUrl ? (
-              <XStack
+              <YStack
                 position="absolute"
                 bottom="$4"
                 left="$4"
                 right="$4"
                 alignItems="center"
-                justifyContent="space-between"
               >
-                <Button
-                  size="$3"
-                  circular
-                  backgroundColor={flashPreferred ? '$primary' : mutedButton}
-                  borderWidth={1}
-                  borderColor={flashPreferred ? 'rgba(255,255,255,0.25)' : mutedButtonBorder}
-                  onPress={handleToggleFlash}
-                  disabled={facingMode !== 'environment'}
-                  style={{ boxShadow: accessoryShadow }}
-                  aria-label={t('upload.controls.toggleFlash', 'Toggle flash')}
-                >
-                  {flashPreferred ? (
-                    <Zap size={18} color="#FFFFFF" />
-                  ) : (
-                    <ZapOff size={18} color={iconColor} />
-                  )}
-                </Button>
-                <Button
-                  size="$5"
-                  circular
-                  backgroundColor="$primary"
-                  onPress={handleCapture}
-                  width={90}
-                  height={90}
+                <XStack
+                  gap="$2"
+                  alignItems="center"
+                  justifyContent="center"
+                  padding="$2"
                   borderRadius={999}
-                  shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
-                  shadowOpacity={0.5}
-                  shadowRadius={22}
-                  shadowOffset={{ width: 0, height: 10 }}
-                  style={{ boxShadow: fabShadow }}
-                  aria-label={t('upload.captureButton', 'Capture')}
-                >
-                  <Camera size={34} color="#FFFFFF" />
-                </Button>
-                <Button
-                  size="$3"
-                  circular
-                  backgroundColor={mutedButton}
                   borderWidth={1}
-                  borderColor={mutedButtonBorder}
-                  onPress={handleSwitchCamera}
+                  borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.14)'}
+                  backgroundColor={isDark ? 'rgba(12, 16, 32, 0.6)' : 'rgba(255, 255, 255, 0.8)'}
                   style={{ boxShadow: accessoryShadow }}
-                  aria-label={t('upload.controls.switchCamera', 'Switch camera')}
                 >
-                  <RefreshCcw size={18} color={iconColor} />
-                </Button>
-              </XStack>
+                  <Button
+                    size="$3"
+                    circular
+                    backgroundColor={flashPreferred ? '$primary' : mutedButton}
+                    borderWidth={1}
+                    borderColor={flashPreferred ? 'rgba(255,255,255,0.25)' : mutedButtonBorder}
+                    onPress={handleToggleFlash}
+                    disabled={facingMode !== 'environment'}
+                    aria-label={t('upload.controls.toggleFlash', 'Toggle flash')}
+                  >
+                    {flashPreferred ? (
+                      <Zap size={20} color="#FFFFFF" />
+                    ) : (
+                      <ZapOff size={20} color={iconColor} />
+                    )}
+                  </Button>
+                  <Button
+                    size="$5"
+                    circular
+                    backgroundColor="$primary"
+                    onPress={handleCapture}
+                    width={98}
+                    height={98}
+                    borderRadius={999}
+                    shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
+                    shadowOpacity={0.5}
+                    shadowRadius={24}
+                    shadowOffset={{ width: 0, height: 12 }}
+                    style={{ boxShadow: fabShadow }}
+                    aria-label={t('upload.captureButton', 'Capture')}
+                  >
+                    <Camera size={40} color="#FFFFFF" />
+                  </Button>
+                  <Button
+                    size="$3"
+                    circular
+                    backgroundColor={mutedButton}
+                    borderWidth={1}
+                    borderColor={mutedButtonBorder}
+                    onPress={handleSwitchCamera}
+                    aria-label={t('upload.controls.switchCamera', 'Switch camera')}
+                  >
+                    <RefreshCcw size={20} color={iconColor} />
+                  </Button>
+                </XStack>
+              </YStack>
             ) : null}
             {(cameraState === 'ready' || cameraState === 'starting' || cameraState === 'preview') ? (
               <Button