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

fix: restore platform dropdown with SVG icon and widen app chips to match original

Browse Source
This commit is contained in:
c0mrade
2026-02-05 13:36:51 +03:00
parent 4866003c23
commit 966343a4d8
1 changed files with 58 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/Connection.tsx
View File

@@ -445,10 +445,17 @@ export default function Connection() {
: undefined; : undefined;
const currentPlatformApps = currentPlatformData ? getRemnawaveApps(currentPlatformData) : []; const currentPlatformApps = currentPlatformData ? getRemnawaveApps(currentPlatformData) : [];
// Current platform SVG icon for dropdown
const currentPlatformSvgKey =
currentPlatformData && isRemnawavePlatform(currentPlatformData)
? currentPlatformData.svgIconKey
: undefined;
const currentPlatformSvg = getSvgHtml(currentPlatformSvgKey);
// Main RemnaWave view — inline app chips + blocks // Main RemnaWave view — inline app chips + blocks
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header + platform dropdown */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{!isTelegramWebApp && ( {!isTelegramWebApp && (
<button <button
@@ -461,50 +468,57 @@ export default function Connection() {
<h2 className="flex-1 text-lg font-bold text-dark-100"> <h2 className="flex-1 text-lg font-bold text-dark-100">
{t('subscription.connection.title')} {t('subscription.connection.title')}
</h2> </h2>
</div> {/* Platform dropdown with icon */}
{availablePlatforms.length > 1 && (
{/* Platform tabs */} <div className="relative flex items-center">
{availablePlatforms.length > 1 && ( {currentPlatformSvg && (
<div className="-mt-3 flex gap-2 overflow-x-auto pb-1"> <div
{availablePlatforms.map((p) => { className="pointer-events-none absolute left-3 z-10 h-5 w-5 text-dark-400 [&>svg]:h-full [&>svg]:w-full"
const isActive = p === currentPlatformKey; dangerouslySetInnerHTML={{ __html: currentPlatformSvg }}
const pData = appConfig.platforms[p]; />
const svgIconKey = pData && isRemnawavePlatform(pData) ? pData.svgIconKey : undefined; )}
const platformSvg = getSvgHtml(svgIconKey); <select
return ( value={currentPlatformKey || ''}
<button onChange={(e) => {
key={p} const newPlatform = e.target.value;
onClick={() => { setActivePlatformKey(newPlatform);
setActivePlatformKey(p); const platformData = appConfig.platforms[newPlatform];
const platformData = appConfig.platforms[p]; if (platformData) {
if (platformData) { const apps = getRemnawaveApps(platformData);
const apps = getRemnawaveApps(platformData); const app = apps.find((a) => a.featured) || apps[0];
const app = apps.find((a) => a.featured) || apps[0]; if (app) setSelectedRemnawaveApp(app);
if (app) setSelectedRemnawaveApp(app); }
} }}
}} className={`appearance-none rounded-xl border border-dark-700 bg-dark-800 py-2 pr-8 text-sm font-medium text-dark-200 outline-none transition-colors hover:border-dark-600 ${currentPlatformSvg ? 'pl-10' : 'pl-4'}`}
className={`flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all ${ >
isActive {availablePlatforms.map((p) => (
? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/40' <option key={p} value={p}>
: 'border border-dark-700/50 bg-dark-800/80 text-dark-200 hover:border-dark-600/50 hover:bg-dark-700/80' {getPlatformDisplayName(p)}
}`} </option>
))}
</select>
<div className="pointer-events-none absolute right-2.5 text-dark-400">
<svg
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
> >
{platformSvg && ( <path
<div strokeLinecap="round"
className="h-4 w-4 flex-shrink-0 [&>svg]:h-full [&>svg]:w-full" strokeLinejoin="round"
dangerouslySetInnerHTML={{ __html: platformSvg }} d="M8 9l4-4 4 4M8 15l4 4 4-4"
/> />
)} </svg>
{getPlatformDisplayName(p)} </div>
</button> </div>
); )}
})} </div>
</div>
)}
{/* App cards row */} {/* App cards row */}
{currentPlatformApps.length > 0 && ( {currentPlatformApps.length > 0 && (
<div className="flex flex-wrap gap-2"> <div className="flex gap-2">
{currentPlatformApps.map((app, idx) => { {currentPlatformApps.map((app, idx) => {
const isSelected = currentApp?.name === app.name; const isSelected = currentApp?.name === app.name;
const appIconSvg = getSvgHtml(app.svgIconKey); const appIconSvg = getSvgHtml(app.svgIconKey);
@@ -512,17 +526,17 @@ export default function Connection() {
<button <button
key={app.name + idx} key={app.name + idx}
onClick={() => setSelectedRemnawaveApp(app)} onClick={() => setSelectedRemnawaveApp(app)}
className={`relative flex items-center gap-2 overflow-hidden rounded-xl px-3 py-2.5 text-sm font-medium transition-all active:scale-[0.97] ${ className={`relative flex min-w-0 flex-1 items-center gap-2 overflow-hidden rounded-xl px-4 py-3 text-sm font-medium transition-all active:scale-[0.97] ${
isSelected isSelected
? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/40' ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/40'
: 'border border-dark-700/50 bg-dark-800/80 text-dark-200 hover:border-dark-600/50 hover:bg-dark-700/80' : 'border border-dark-700/50 bg-dark-800/80 text-dark-200 hover:border-dark-600/50 hover:bg-dark-700/80'
}`} }`}
> >
{app.featured && <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />} {app.featured && <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />}
<span className="relative z-10">{app.name}</span> <span className="relative z-10 truncate">{app.name}</span>
{appIconSvg && ( {appIconSvg && (
<div <div
className="h-8 w-8 shrink-0 opacity-40 [&>svg]:h-full [&>svg]:w-full" className="ml-auto h-10 w-10 shrink-0 opacity-30 [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{ __html: appIconSvg }} dangerouslySetInnerHTML={{ __html: appIconSvg }}
/> />
)} )}