From 7bdce4479d3d28fdcc2bd78be1bce5fa77cde87e Mon Sep 17 00:00:00 2001
From: cyph3rasi <cyph3rasi@gmail.com>
Date: Wed, 15 Jul 2026 07:51:34 -0700
Subject: [PATCH] Simplify connected Stuffbox storage settings

Hop-State: A_06FPCGQXXSHR3BASHC8H5G8
Hop-Proposal: R_06FPCGQDQKCEKBQ03E8NB2G
Hop-Task: T_06FPCGH4633BAGYCRTC59YR
Hop-Attempt: AT_06FPCGH460G2MMN0Z4WH0X0
---
 src/app/settings/storage/page.tsx | 36 ++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/app/settings/storage/page.tsx b/src/app/settings/storage/page.tsx
index d22d4f1..abc61f7 100644
--- a/src/app/settings/storage/page.tsx
+++ b/src/app/settings/storage/page.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import Link from 'next/link';
-import { Box, Cloud, HardDrive } from 'lucide-react';
+import { Box, Cloud, ExternalLink, HardDrive } from 'lucide-react';
 import { ArrowLeftIcon } from '@/components/Icons';
 import { StorageConfigurationPrompt } from '@/components/StorageConfigurationPrompt';
 
@@ -70,27 +70,33 @@ export default function StorageSettingsPage() {
                 <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                     {status?.provider === 'stuffbox' ? <Box size={22} /> : status?.provider === 's3' ? <Cloud size={22} /> : <HardDrive size={22} />}
                     <div style={{ flex: 1 }}>
-                        <div style={{ fontWeight: 600 }}>{!status ? 'Loading…' : status.provider === 'stuffbox' ? 'Stuffbox connected' : status.provider === 's3' ? 'S3 storage connected' : 'No media storage connected'}</div>
-                        {status?.stuffboxBaseUrl && <div style={{ color: 'var(--foreground-secondary)', fontSize: '13px', marginTop: '5px', wordBreak: 'break-all' }}>{status.stuffboxBaseUrl}</div>}
+                        <div style={{ fontWeight: 600 }}>{!status ? 'Loading…' : status.provider === 'stuffbox' ? 'Stuffbox.xyz connected' : status.provider === 's3' ? 'S3 storage connected' : 'No media storage connected'}</div>
                         {status?.s3Provider && status.provider === 's3' && <div style={{ color: 'var(--foreground-secondary)', fontSize: '13px', marginTop: '5px' }}>Provider: {status.s3Provider}</div>}
                     </div>
                 </div>
                 {status?.provider === 'stuffbox' && (
-                    <button className="btn btn-ghost" type="button" onClick={disconnectStuffbox} disabled={isDisconnecting} style={{ marginTop: '18px' }}>
-                        {isDisconnecting ? 'Disconnecting…' : 'Disconnect Stuffbox'}
-                    </button>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '18px' }}>
+                        <a className="btn btn-primary" href="https://stuffbox.xyz" target="_blank" rel="noopener noreferrer">
+                            Manage Storage <ExternalLink size={15} />
+                        </a>
+                        <button className="btn btn-ghost" type="button" onClick={disconnectStuffbox} disabled={isDisconnecting}>
+                            {isDisconnecting ? 'Disconnecting…' : 'Disconnect Stuffbox'}
+                        </button>
+                    </div>
                 )}
             </div>
 
-            <div className="card" style={{ padding: '20px' }}>
-                <h2 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '8px' }}>
-                    {status?.provider ? 'Change storage' : 'Connect media storage'}
-                </h2>
-                <p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.5, marginBottom: '20px' }}>
-                    Choose Stuffbox for the simplest setup, or connect an S3-compatible bucket you already own.
-                </p>
-                <StorageConfigurationPrompt open onConfigured={loadStatus} onCancel={() => {}} variant="inline" />
-            </div>
+            {status?.provider !== 'stuffbox' && (
+                <div className="card" style={{ padding: '20px' }}>
+                    <h2 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '8px' }}>
+                        {status?.provider ? 'Change storage' : 'Connect media storage'}
+                    </h2>
+                    <p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.5, marginBottom: '20px' }}>
+                        Choose Stuffbox for the simplest setup, or connect an S3-compatible bucket you already own.
+                    </p>
+                    <StorageConfigurationPrompt open onConfigured={loadStatus} onCancel={() => {}} variant="inline" />
+                </div>
+            )}
             {error && <p style={{ color: 'var(--error)', fontSize: '14px', marginTop: '14px' }}>{error}</p>}
         </div>
     );