BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add auto-discover tooltip for project actions and changed icon

Browse Source 
Shows a tooltip explaining auto-discover behavior
Updates auto-discover action icons to use scan-2
Adds translated tooltip text for supported locales
This commit is contained in:
Bohdan Triapitsyn
2026-07-18 00:06:30 +03:00
parent d4a8c4d2e1
commit 1b402fcb67
11 changed files with 72 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/ProjectActionsButton.tsx
+62 -47
View File
@@ -260,7 +260,7 @@ export const ProjectActionsButton = ({
id: AUTO_DISCOVER_ACTION_ID,
name: t('projectActions.actions.autoDiscover'),
command: '',
icon: 'search',
icon: 'scan-2',
autoOpenUrl: true,
}), [t]);
@@ -450,7 +450,7 @@ export const ProjectActionsButton = ({
id: AUTO_DISCOVER_ACTION_ID,
name: t('projectActions.actions.autoDiscover'),
command: devServer.command,
icon: 'search',
icon: 'scan-2',
autoOpenUrl: true,
openUrl: devServer.previewUrlHint || '',
};
@@ -727,7 +727,7 @@ export const ProjectActionsButton = ({
const selectedIconKey = (resolvedSelected.icon || 'play') as keyof typeof PROJECT_ACTION_ICON_MAP;
const selectedIconName = resolvedSelected.id === AUTO_DISCOVER_ACTION_ID
? 'search'
? 'scan-2'
: PROJECT_ACTION_ICON_MAP[selectedIconKey] || 'play';
const selectedRunKey = toProjectActionRunKey(normalizedDirectory, resolvedSelected.id);
const selectedRunning = projectActionRuns[selectedRunKey];
@@ -740,31 +740,39 @@ export const ProjectActionsButton = ({
}
openContextPreview(selectedRunning.directory, selectedRunPreviewUrl);
};
const isAutoDiscoverSelected = resolvedSelected.id === AUTO_DISCOVER_ACTION_ID;
if (compact) {
return (
<div className="inline-flex items-center">
<button
type="button"
disabled={isLoading || isStoppingSelected}
className={cn(
'app-region-no-drag inline-flex h-9 w-9 items-center justify-center rounded-[10px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] p-2',
'typography-ui-label font-medium text-muted-foreground hover:bg-interactive-hover hover:text-foreground transition-colors',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
'disabled:cursor-not-allowed',
className
)}
onClick={handlePrimaryClick}
aria-label={selectedRunning
? t('projectActions.actions.stopNamedAria', { name: resolvedSelected.name })
: t('projectActions.actions.runNamedAria', { name: resolvedSelected.name })}
>
{isStoppingSelected || isWaitingForSelectedPreview
? <Icon name="loader-4" className="h-5 w-5 animate-spin text-[var(--status-warning)]" />
: selectedRunning
? <Icon name="stop" className="h-5 w-5 text-[var(--status-warning)]" />
: <Icon name={selectedIconName} className="h-5 w-5" />}
</button>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
disabled={isLoading || isStoppingSelected}
className={cn(
'app-region-no-drag inline-flex h-9 w-9 items-center justify-center rounded-[10px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] p-2',
'typography-ui-label font-medium text-muted-foreground hover:bg-interactive-hover hover:text-foreground transition-colors',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
'disabled:cursor-not-allowed',
className
)}
onClick={handlePrimaryClick}
aria-label={selectedRunning
? t('projectActions.actions.stopNamedAria', { name: resolvedSelected.name })
: t('projectActions.actions.runNamedAria', { name: resolvedSelected.name })}
>
{isStoppingSelected || isWaitingForSelectedPreview
? <Icon name="loader-4" className="h-5 w-5 animate-spin text-[var(--status-warning)]" />
: selectedRunning
? <Icon name="stop" className="h-5 w-5 text-[var(--status-warning)]" />
: <Icon name={selectedIconName} className="h-5 w-5" />}
</button>
</TooltipTrigger>
{isAutoDiscoverSelected ? (
<TooltipContent sideOffset={6}>{t('projectActions.actions.autoDiscoverTooltip')}</TooltipContent>
) : null}
</Tooltip>
{showSelectedPreviewButton ? (
<Tooltip>
<TooltipTrigger asChild>
@@ -799,7 +807,7 @@ export const ProjectActionsButton = ({
{displayActions.map((entry) => {
const iconKey = (entry.icon || 'play') as keyof typeof PROJECT_ACTION_ICON_MAP;
const iconName = entry.id === AUTO_DISCOVER_ACTION_ID
? 'search'
? 'scan-2'
: PROJECT_ACTION_ICON_MAP[iconKey] || 'play';
const runKey = toProjectActionRunKey(normalizedDirectory, entry.id);
const runState = projectActionRuns[runKey];
@@ -840,27 +848,34 @@ export const ProjectActionsButton = ({
className
)}
>
<button
type="button"
onClick={handlePrimaryClick}
disabled={isLoading || isStoppingSelected}
className={cn(
'inline-flex h-full items-center justify-center typography-ui-label font-medium text-foreground hover:bg-interactive-hover',
compact ? 'w-9 px-0' : 'px-2.5',
'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed'
)}
aria-label={selectedRunning
? t('projectActions.actions.stopNamedAria', { name: resolvedSelected.name })
: t('projectActions.actions.runNamedAria', { name: resolvedSelected.name })}
>
<span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
{isStoppingSelected || isWaitingForSelectedPreview
? <Icon name="loader-4" className="h-4 w-4 animate-spin text-[var(--status-warning)]" />
: selectedRunning
? <Icon name="stop" className="h-4 w-4 text-[var(--status-warning)]" />
: <Icon name={selectedIconName} className="h-4 w-4" />}
</span>
</button>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={handlePrimaryClick}
disabled={isLoading || isStoppingSelected}
className={cn(
'inline-flex h-full items-center justify-center typography-ui-label font-medium text-foreground hover:bg-interactive-hover',
compact ? 'w-9 px-0' : 'px-2.5',
'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed'
)}
aria-label={selectedRunning
? t('projectActions.actions.stopNamedAria', { name: resolvedSelected.name })
: t('projectActions.actions.runNamedAria', { name: resolvedSelected.name })}
>
<span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
{isStoppingSelected || isWaitingForSelectedPreview
? <Icon name="loader-4" className="h-4 w-4 animate-spin text-[var(--status-warning)]" />
: selectedRunning
? <Icon name="stop" className="h-4 w-4 text-[var(--status-warning)]" />
: <Icon name={selectedIconName} className="h-4 w-4" />}
</span>
</button>
</TooltipTrigger>
{isAutoDiscoverSelected ? (
<TooltipContent sideOffset={6}>{t('projectActions.actions.autoDiscoverTooltip')}</TooltipContent>
) : null}
</Tooltip>
{showSelectedPreviewButton ? (
<Tooltip>
@@ -905,7 +920,7 @@ export const ProjectActionsButton = ({
{displayActions.map((entry) => {
const iconKey = (entry.icon || 'play') as keyof typeof PROJECT_ACTION_ICON_MAP;
const iconName = entry.id === AUTO_DISCOVER_ACTION_ID
? 'search'
? 'scan-2'
: PROJECT_ACTION_ICON_MAP[iconKey] || 'play';
const runKey = toProjectActionRunKey(normalizedDirectory, entry.id);
const runState = projectActionRuns[runKey];
packages/ui/src/lib/i18n/messages/en.ts
+1
View File
@@ -2354,6 +2354,7 @@ export const dict = {
'projectActions.actions.addAction': 'Add action',
'projectActions.actions.addNewAction': 'Add new action',
'projectActions.actions.autoDiscover': 'Auto-discover',
'projectActions.actions.autoDiscoverTooltip': 'Automatically discover and run the development server',
'projectActions.actions.chooseActionAria': 'Choose project action',
'projectActions.actions.openPreview': 'Open Preview',
'projectActions.actions.runNamedAria': 'Run {name}',
packages/ui/src/lib/i18n/messages/es.ts
+1
View File
@@ -2320,6 +2320,7 @@ export const dict: Record<I18nKey, string> = {
"projectActions.actions.addAction": "Añadir acción",
"projectActions.actions.addNewAction": "Añadir nueva acción",
"projectActions.actions.autoDiscover": "Autodetectar",
"projectActions.actions.autoDiscoverTooltip": "Detecta y ejecuta automáticamente el servidor de desarrollo",
"projectActions.actions.chooseActionAria": "Elegir acción del proyecto",
"projectActions.actions.openPreview": "Abrir Preview",
"projectActions.actions.runNamedAria": "Ejecutar {name}",
packages/ui/src/lib/i18n/messages/fr.ts
+1
View File
@@ -2123,6 +2123,7 @@ export const dict = {
'projectActions.actions.addAction': 'Ajouter une action',
'projectActions.actions.addNewAction': 'Ajouter une nouvelle action',
'projectActions.actions.autoDiscover': 'Découverte automatique',
'projectActions.actions.autoDiscoverTooltip': 'Détecte et lance automatiquement le serveur de développement',
'projectActions.actions.chooseActionAria': 'Choisir l\'action du projet',
'projectActions.actions.openPreview': 'Ouvrir l\'aperçu',
'projectActions.actions.runNamedAria': 'Exécutez {name}',
packages/ui/src/lib/i18n/messages/ja.ts
+1
View File
@@ -2353,6 +2353,7 @@ export const dict: Record<I18nKey, string> = {
'projectActions.actions.addAction': 'アクションを追加',
'projectActions.actions.addNewAction': '新しいアクションを追加',
'projectActions.actions.autoDiscover': '自動検出',
'projectActions.actions.autoDiscoverTooltip': '開発サーバーを自動的に検出して実行します',
'projectActions.actions.chooseActionAria': 'プロジェクトアクションを選択',
'projectActions.actions.openPreview': 'プレビューを開く',
'projectActions.actions.runNamedAria': '{name}を実行',
packages/ui/src/lib/i18n/messages/ko.ts
+1
View File
@@ -2354,6 +2354,7 @@ export const dict: Record<I18nKey, string> = {
'projectActions.actions.addAction': '작업 추가',
'projectActions.actions.addNewAction': '새 작업 추가',
'projectActions.actions.autoDiscover': '자동 검색',
'projectActions.actions.autoDiscoverTooltip': '개발 서버를 자동으로 검색하고 실행합니다',
'projectActions.actions.chooseActionAria': '프로젝트 작업 선택',
'projectActions.actions.openPreview': '미리보기 열기',
'projectActions.actions.runNamedAria': '실행 {name}',
packages/ui/src/lib/i18n/messages/pl.ts
+1
View File
@@ -2329,6 +2329,7 @@ export const dict: Record<I18nKey, string> = {
'projectActions.actions.addActionAria': 'Dodaj akcję',
'projectActions.actions.addNewAction': 'Dodaj nową akcję',
'projectActions.actions.autoDiscover': 'Wykryj automatycznie',
'projectActions.actions.autoDiscoverTooltip': 'Automatycznie wykrywa i uruchamia serwer deweloperski',
'projectActions.actions.chooseActionAria': 'Wybierz akcję projektu',
'projectActions.actions.openPreview': 'Otwórz podgląd',
'projectActions.actions.runNamedAria': 'Uruchom {name}',
packages/ui/src/lib/i18n/messages/pt-BR.ts
+1
View File
@@ -2320,6 +2320,7 @@ export const dict: Record<I18nKey, string> = {
"projectActions.actions.addAction": "Adicionar ação",
"projectActions.actions.addNewAction": "Adicionar nova ação",
"projectActions.actions.autoDiscover": "Detectar automaticamente",
"projectActions.actions.autoDiscoverTooltip": "Detecta e executa automaticamente o servidor de desenvolvimento",
"projectActions.actions.chooseActionAria": "Escolher ação do projeto",
"projectActions.actions.openPreview": "Abrir Preview",
"projectActions.actions.runNamedAria": "Executar {name}",
packages/ui/src/lib/i18n/messages/uk.ts
+1
View File
@@ -2320,6 +2320,7 @@ export const dict: Record<I18nKey, string> = {
"projectActions.actions.addAction": "Додати дію",
"projectActions.actions.addNewAction": "Додати нову дію",
"projectActions.actions.autoDiscover": "Автовиявлення",
"projectActions.actions.autoDiscoverTooltip": "Автоматично знаходить і запускає сервер розробки",
"projectActions.actions.chooseActionAria": "Вибрати дію проєкту",
"projectActions.actions.openPreview": "Відкрити Preview",
"projectActions.actions.runNamedAria": "Запустити {name}",
packages/ui/src/lib/i18n/messages/zh-CN.ts
+1
View File
@@ -2320,6 +2320,7 @@ export const dict: Record<I18nKey, string> = {
'projectActions.actions.addAction': '添加操作',
'projectActions.actions.addNewAction': '添加新操作',
'projectActions.actions.autoDiscover': '自动发现',
'projectActions.actions.autoDiscoverTooltip': '自动发现并运行开发服务器',
'projectActions.actions.chooseActionAria': '选择项目操作',
'projectActions.actions.openPreview': '打开 Preview',
'projectActions.actions.runNamedAria': '运行 {name}',
packages/ui/src/lib/i18n/messages/zh-TW.ts
+1
View File
@@ -2324,6 +2324,7 @@ export const dict: Record<I18nKey, string> = {
'projectActions.actions.addAction': '新增操作',
'projectActions.actions.addNewAction': '新增新操作',
'projectActions.actions.autoDiscover': '自動發現',
'projectActions.actions.autoDiscoverTooltip': '自動探索並執行開發伺服器',
'projectActions.actions.chooseActionAria': '選擇專案操作',
'projectActions.actions.openPreview': '開啟預覽',
'projectActions.actions.runNamedAria': '執行 {name}',