GnosysLabs/Synapsis
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify connected Stuffbox storage settings

Browse Source 
Hop-State: A_06FPCGQXXSHR3BASHC8H5G8
Hop-Proposal: R_06FPCGQDQKCEKBQ03E8NB2G
Hop-Task: T_06FPCGH4633BAGYCRTC59YR
Hop-Attempt: AT_06FPCGH460G2MMN0Z4WH0X0
This commit is contained in:
cyph3rasi
2026-07-15 07:51:34 -07:00
committed by Hop
parent fc4b952aae
commit 7bdce4479d
1 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/settings/storage/page.tsx
+21 -15
View File
@@ -2,7 +2,7 @@
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link'; 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 { ArrowLeftIcon } from '@/components/Icons';
import { StorageConfigurationPrompt } from '@/components/StorageConfigurationPrompt'; import { StorageConfigurationPrompt } from '@/components/StorageConfigurationPrompt';
@@ -70,27 +70,33 @@ export default function StorageSettingsPage() {
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}> <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
{status?.provider === 'stuffbox' ? <Box size={22} /> : status?.provider === 's3' ? <Cloud size={22} /> : <HardDrive size={22} />} {status?.provider === 'stuffbox' ? <Box size={22} /> : status?.provider === 's3' ? <Cloud size={22} /> : <HardDrive size={22} />}
<div style={{ flex: 1 }}> <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> <div style={{ fontWeight: 600 }}>{!status ? 'Loading…' : status.provider === 'stuffbox' ? 'Stuffbox.xyz 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>}
{status?.s3Provider && status.provider === 's3' && <div style={{ color: 'var(--foreground-secondary)', fontSize: '13px', marginTop: '5px' }}>Provider: {status.s3Provider}</div>} {status?.s3Provider && status.provider === 's3' && <div style={{ color: 'var(--foreground-secondary)', fontSize: '13px', marginTop: '5px' }}>Provider: {status.s3Provider}</div>}
</div> </div>
</div> </div>
{status?.provider === 'stuffbox' && ( {status?.provider === 'stuffbox' && (
<button className="btn btn-ghost" type="button" onClick={disconnectStuffbox} disabled={isDisconnecting} style={{ marginTop: '18px' }}> <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '18px' }}>
{isDisconnecting ? 'Disconnecting…' : 'Disconnect Stuffbox'} <a className="btn btn-primary" href="https://stuffbox.xyz" target="_blank" rel="noopener noreferrer">
</button> 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>
<div className="card" style={{ padding: '20px' }}> {status?.provider !== 'stuffbox' && (
<h2 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '8px' }}> <div className="card" style={{ padding: '20px' }}>
{status?.provider ? 'Change storage' : 'Connect media storage'} <h2 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '8px' }}>
</h2> {status?.provider ? 'Change storage' : 'Connect media storage'}
<p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.5, marginBottom: '20px' }}> </h2>
Choose Stuffbox for the simplest setup, or connect an S3-compatible bucket you already own. <p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.5, marginBottom: '20px' }}>
</p> Choose Stuffbox for the simplest setup, or connect an S3-compatible bucket you already own.
<StorageConfigurationPrompt open onConfigured={loadStatus} onCancel={() => {}} variant="inline" /> </p>
</div> <StorageConfigurationPrompt open onConfigured={loadStatus} onCancel={() => {}} variant="inline" />
</div>
)}
{error && <p style={{ color: 'var(--error)', fontSize: '14px', marginTop: '14px' }}>{error}</p>} {error && <p style={{ color: 'var(--error)', fontSize: '14px', marginTop: '14px' }}>{error}</p>}
</div> </div>
); );