feat: add open_in setting for custom buttons (external browser / Telegram miniapp)

This commit is contained in:
Fringg
2026-03-09 23:33:05 +03:00
parent 082471bf92
commit 638844ef47
6 changed files with 59 additions and 11 deletions

View File

@@ -1,5 +1,7 @@
import apiClient from './client';
export type OpenIn = 'external' | 'webapp';
export interface MenuButtonConfig {
id: string;
type: 'builtin' | 'custom';
@@ -8,6 +10,7 @@ export interface MenuButtonConfig {
enabled: boolean;
labels: Record<string, string>;
url: string | null;
open_in: OpenIn;
}
export interface MenuRowConfig {
@@ -51,6 +54,7 @@ const DEFAULT_BUTTON: Omit<MenuButtonConfig, 'id' | 'type'> = {
enabled: true,
labels: {},
url: null,
open_in: 'external',
};
function normalizeConfig(data: MenuConfig): MenuConfig {

View File

@@ -288,8 +288,9 @@ function ButtonChip({
/>
</div>
{/* URL input (custom buttons only) */}
{/* URL input + open mode (custom buttons only) */}
{!isBuiltin && (
<>
<div>
<label className="mb-1.5 block text-xs font-medium text-dark-300">URL</label>
<input
@@ -300,6 +301,27 @@ function ButtonChip({
className="w-full rounded-lg border border-dark-600 bg-dark-700/50 px-3 py-2 text-sm text-dark-100 placeholder-dark-500 transition-colors focus:border-accent-500 focus:outline-none"
/>
</div>
<div>
<label className="mb-1.5 block text-xs font-medium text-dark-300">
{t('admin.menuEditor.openIn')}
</label>
<div className="flex gap-1.5">
{(['external', 'webapp'] as const).map((mode) => (
<button
key={mode}
onClick={() => onUpdate({ open_in: mode })}
className={`flex h-7 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all ${
button.open_in === mode
? 'border-accent-500 bg-accent-500/10 text-accent-400'
: 'border-dark-600 bg-dark-700/50 text-dark-300 hover:border-dark-500'
}`}
>
{t(`admin.menuEditor.openMode.${mode}`)}
</button>
))}
</div>
</div>
</>
)}
{/* Localized labels */}
@@ -665,6 +687,7 @@ export function MenuEditorTab() {
enabled: true,
labels: {},
url: null,
open_in: 'external',
};
setDraftConfig((prev) => ({
...prev,
@@ -683,6 +706,7 @@ export function MenuEditorTab() {
enabled: true,
labels: {},
url: '',
open_in: 'external',
};
setDraftConfig((prev) => ({
...prev,

View File

@@ -1781,6 +1781,11 @@
"customLabelsHint": "Empty = default label",
"moveUp": "Move up",
"moveDown": "Move down",
"openIn": "Open in",
"openMode": {
"external": "External browser",
"webapp": "Telegram miniapp"
},
"invalidUrl": "Please provide a valid URL (http:// or https://) for all custom buttons"
},
"apps": {

View File

@@ -1443,6 +1443,11 @@
"customLabelsHint": "متن دکمه برای هر زبان ربات",
"moveUp": "انتقال به بالا",
"moveDown": "انتقال به پایین",
"openIn": "باز کردن در",
"openMode": {
"external": "مرورگر خارجی",
"webapp": "مینی‌اپ تلگرام"
},
"invalidUrl": "لطفاً برای تمام دکمه‌های سفارشی یک URL معتبر وارد کنید (http:// یا https://)"
},
"apps": {

View File

@@ -2292,6 +2292,11 @@
"customLabelsHint": "Пустое поле = название по умолчанию",
"moveUp": "Переместить вверх",
"moveDown": "Переместить вниз",
"openIn": "Открывать в",
"openMode": {
"external": "Внешний браузер",
"webapp": "Telegram miniapp"
},
"invalidUrl": "Укажите корректный URL (http:// или https://) для всех пользовательских кнопок"
},
"apps": {

View File

@@ -1481,6 +1481,11 @@
"customLabelsHint": "每种语言的按钮文本",
"moveUp": "上移",
"moveDown": "下移",
"openIn": "打开方式",
"openMode": {
"external": "外部浏览器",
"webapp": "Telegram 小程序"
},
"invalidUrl": "请为所有自定义按钮提供有效的URLhttp:// 或 https://"
},
"apps": {