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

82
src/pages/Connection.tsx
View File

@@ -445,10 +445,17 @@ export default function Connection() {
: undefined;
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
return (
<div className="space-y-6">
{/* Header */}
{/* Header + platform dropdown */}
<div className="flex items-center gap-3">
{!isTelegramWebApp && (
<button
@@ -461,50 +468,57 @@ export default function Connection() {
<h2 className="flex-1 text-lg font-bold text-dark-100">
{t('subscription.connection.title')}
</h2>
</div>
{/* Platform tabs */}
{/* Platform dropdown with icon */}
{availablePlatforms.length > 1 && (
<div className="-mt-3 flex gap-2 overflow-x-auto pb-1">
{availablePlatforms.map((p) => {
const isActive = p === currentPlatformKey;
const pData = appConfig.platforms[p];
const svgIconKey = pData && isRemnawavePlatform(pData) ? pData.svgIconKey : undefined;
const platformSvg = getSvgHtml(svgIconKey);
return (
<button
key={p}
onClick={() => {
setActivePlatformKey(p);
const platformData = appConfig.platforms[p];
<div className="relative flex items-center">
{currentPlatformSvg && (
<div
className="pointer-events-none absolute left-3 z-10 h-5 w-5 text-dark-400 [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{ __html: currentPlatformSvg }}
/>
)}
<select
value={currentPlatformKey || ''}
onChange={(e) => {
const newPlatform = e.target.value;
setActivePlatformKey(newPlatform);
const platformData = appConfig.platforms[newPlatform];
if (platformData) {
const apps = getRemnawaveApps(platformData);
const app = apps.find((a) => a.featured) || apps[0];
if (app) setSelectedRemnawaveApp(app);
}
}}
className={`flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all ${
isActive
? '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'
}`}
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'}`}
>
{platformSvg && (
<div
className="h-4 w-4 flex-shrink-0 [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{ __html: platformSvg }}
/>
)}
{availablePlatforms.map((p) => (
<option key={p} value={p}>
{getPlatformDisplayName(p)}
</button>
);
})}
</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}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l4-4 4 4M8 15l4 4 4-4"
/>
</svg>
</div>
</div>
)}
</div>
{/* App cards row */}
{currentPlatformApps.length > 0 && (
<div className="flex flex-wrap gap-2">
<div className="flex gap-2">
{currentPlatformApps.map((app, idx) => {
const isSelected = currentApp?.name === app.name;
const appIconSvg = getSvgHtml(app.svgIconKey);
@@ -512,17 +526,17 @@ export default function Connection() {
<button
key={app.name + idx}
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
? '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'
}`}
>
{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 && (
<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 }}
/>
)}