etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update ConnectionModal.tsx

Browse Source
This commit is contained in:
Egor
2026-01-20 04:47:45 +03:00
committed by GitHub
parent 65b0120cd7
commit 0054e674fd
1 changed files with 57 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/ConnectionModal.tsx
View File

@@ -293,6 +293,16 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
// App selector // App selector
if (showAppSelector) { if (showAppSelector) {
const platformNames: Record<string, string> = {
ios: 'iOS',
android: 'Android',
windows: 'Windows',
macos: 'macOS',
linux: 'Linux',
androidTV: 'Android TV',
appleTV: 'Apple TV'
}
return ( return (
<Wrapper> <Wrapper>
{/* Header */} {/* Header */}
@@ -303,29 +313,54 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
<h2 className="font-bold text-dark-100 text-lg">{t('subscription.connection.selectApp')}</h2> <h2 className="font-bold text-dark-100 text-lg">{t('subscription.connection.selectApp')}</h2>
</div> </div>
{/* Apps list */} {/* Apps grouped by platform */}
<div className="flex-1 overflow-y-auto p-4 space-y-2"> <div className="flex-1 overflow-y-auto p-4 space-y-5">
{allApps.map(app => ( {availablePlatforms.map(platform => {
<button const apps = appConfig.platforms[platform]
key={app.id} if (!apps?.length) return null
onClick={() => { setSelectedApp(app); setShowAppSelector(false) }} const isCurrentPlatform = platform === detectedPlatform
className={`w-full p-4 rounded-2xl flex items-center gap-4 transition-all ${
selectedApp?.id === app.id return (
? 'bg-accent-500/15 ring-2 ring-accent-500/50' <div key={platform}>
: 'bg-dark-800/50 hover:bg-dark-800' {/* Platform header */}
}`} <div className="flex items-center gap-2 mb-2 px-1">
> <span className={`text-sm font-semibold ${isCurrentPlatform ? 'text-accent-400' : 'text-dark-400'}`}>
<div className="w-12 h-12 rounded-xl bg-dark-700 flex items-center justify-center text-dark-200"> {platformNames[platform] || platform}
{getAppIcon(app.name)} </span>
{isCurrentPlatform && (
<span className="text-xs text-accent-500 bg-accent-500/10 px-2 py-0.5 rounded-full">
{t('subscription.connection.yourDevice')}
</span>
)}
</div>
{/* Apps for this platform */}
<div className="space-y-2">
{apps.map(app => (
<button
key={app.id}
onClick={() => { setSelectedApp(app); setShowAppSelector(false) }}
className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all ${
selectedApp?.id === app.id
? 'bg-accent-500/15 ring-2 ring-accent-500/50'
: 'bg-dark-800/40 hover:bg-dark-800/70 active:bg-dark-800'
}`}
>
<div className="w-10 h-10 rounded-lg bg-dark-700 flex items-center justify-center text-dark-200">
{getAppIcon(app.name)}
</div>
<span className="font-medium text-dark-100 flex-1 text-left">{app.name}</span>
{app.isFeatured && (
<span className="px-2 py-0.5 rounded-md text-[10px] font-bold bg-accent-500/20 text-accent-400">
{t('subscription.connection.featured')}
</span>
)}
</button>
))}
</div>
</div> </div>
<span className="font-semibold text-dark-100 text-lg flex-1 text-left">{app.name}</span> )
{app.isFeatured && ( })}
<span className="px-3 py-1 rounded-lg text-xs font-bold bg-accent-500/20 text-accent-400">
{t('subscription.connection.featured')}
</span>
)}
</button>
))}
</div> </div>
</Wrapper> </Wrapper>
) )