diff --git a/src/api/adminApps.ts b/src/api/adminApps.ts
index e0ee75d..b661d7c 100644
--- a/src/api/adminApps.ts
+++ b/src/api/adminApps.ts
@@ -118,6 +118,7 @@ export interface RemnawaveApp {
}
export interface RemnawavePlatform {
+ svgIconKey?: string;
apps: RemnawaveApp[];
}
diff --git a/src/pages/AdminApps.tsx b/src/pages/AdminApps.tsx
index fbdbdf0..7ab4b3c 100644
--- a/src/pages/AdminApps.tsx
+++ b/src/pages/AdminApps.tsx
@@ -440,19 +440,23 @@ export default function AdminApps() {
{/* Platform Tabs */}
- {/* Header: title + platform dropdown */}
+ {/* Header */}
{!isTelegramWebApp && (
@@ -455,31 +461,47 @@ export default function Connection() {
{t('subscription.connection.title')}
- {/* Platform dropdown */}
- {availablePlatforms.length > 1 && (
-
- )}
+ {/* Platform tabs */}
+ {availablePlatforms.length > 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 (
+
+ );
+ })}
+
+ )}
+
{/* App cards row */}
{currentPlatformApps.length > 0 && (
@@ -493,7 +515,7 @@ export default function Connection() {
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] ${
isSelected
? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/40'
- : 'bg-dark-800/60 text-dark-300 hover:bg-dark-800'
+ : 'border border-dark-700/50 bg-dark-800/80 text-dark-200 hover:border-dark-600/50 hover:bg-dark-700/80'
}`}
>
{app.featured &&
}
@@ -516,7 +538,7 @@ export default function Connection() {
href={appConfig.baseSettings.tutorialUrl}
target="_blank"
rel="noopener noreferrer"
- className="flex items-center justify-center gap-2 rounded-xl border border-dark-600 px-4 py-2.5 text-sm font-medium text-dark-200 transition-all hover:bg-dark-800"
+ className="btn-secondary w-full justify-center"
>