Add repository settings option to Git panel dropdown (Vibe Kanban) (#2028)

* All type checks pass. Let me provide a summary of the changes made:

## Summary

I've added a "Repository settings" option to the Git panel dropdown in the Workspaces UI. Here are the changes made:

### 1. `frontend/src/components/ui-new/primitives/RepoCard.tsx`
- Added `DotsThreeIcon` and `GearIcon` imports from phosphor-icons
- Added `onOpenSettings?: () => void` prop to the `RepoCardProps` interface
- Changed the dropdown trigger icon from `ArrowSquareOutIcon` to `DotsThreeIcon` (three dots)
- Added a new dropdown menu item "Repository settings" with a gear icon that calls `onOpenSettings`

### 2. `frontend/src/components/ui-new/views/GitPanel.tsx`
- Added `onOpenSettings?: (repoId: string) => void` prop to the `GitPanelProps` interface
- Added `onOpenSettings` to the destructured props
- Passed `onOpenSettings` callback to each `RepoCard` component

### 3. `frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`
- Added `useNavigate` import from react-router-dom
- Added `const navigate = useNavigate()` in `GitPanelContainer`
- Added `handleOpenSettings` callback that navigates to `/settings/repos?repoId=${repoId}`
- Passed `onOpenSettings={handleOpenSettings}` to the `GitPanel` component

### 4. `frontend/src/i18n/locales/en/common.json`
- Added `"repoSettings": "Repository settings"` translation under the `actions` section

* All checks pass:
-  i18n check - Translation keys are consistent across all locales
-  Linter - No lint errors
-  TypeScript type check - No type errors
This commit is contained in:
Anastasiia Solop
2026-01-14 11:00:06 +01:00
committed by GitHub
parent eeee9f6aea
commit 5c95368ebf
9 changed files with 28 additions and 1 deletions

View File

@@ -1,4 +1,5 @@
import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Allotment, LayoutPriority, type AllotmentHandle } from 'allotment';
import 'allotment/dist/style.css';
import { useWorkspaceContext } from '@/contexts/WorkspaceContext';
@@ -70,6 +71,7 @@ function GitPanelContainer({
onBranchNameChange,
}: GitPanelContainerProps) {
const { executeAction } = useActions();
const navigate = useNavigate();
// Track push state per repo: idle, pending, success, or error
const [pushStates, setPushStates] = useState<Record<string, PushState>>({});
@@ -237,6 +239,14 @@ function GitPanelContainer({
[pushMutation]
);
// Handle opening repository settings
const handleOpenSettings = useCallback(
(repoId: string) => {
navigate(`/settings/repos?repoId=${repoId}`);
},
[navigate]
);
return (
<GitPanel
repos={repoInfosWithPushButton}
@@ -246,6 +256,7 @@ function GitPanelContainer({
onPushClick={handlePushClick}
onOpenInEditor={handleOpenInEditor}
onCopyPath={handleCopyPath}
onOpenSettings={handleOpenSettings}
onAddRepo={() => console.log('Add repo clicked')}
/>
);

View File

@@ -13,6 +13,8 @@ import {
CheckCircleIcon,
SpinnerGapIcon,
WarningCircleIcon,
DotsThreeIcon,
GearIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import {
@@ -64,6 +66,7 @@ interface RepoCardProps {
onPushClick?: () => void;
onOpenInEditor?: () => void;
onCopyPath?: () => void;
onOpenSettings?: () => void;
}
export function RepoCard({
@@ -88,6 +91,7 @@ export function RepoCard({
onPushClick,
onOpenInEditor,
onCopyPath,
onOpenSettings,
}: RepoCardProps) {
const { t } = useTranslation('tasks');
const { t: tCommon } = useTranslation('common');
@@ -142,7 +146,7 @@ export function RepoCard({
className="flex items-center justify-center p-1.5 rounded hover:bg-tertiary text-low hover:text-base transition-colors"
title="Repo actions"
>
<ArrowSquareOutIcon className="size-icon-base" weight="bold" />
<DotsThreeIcon className="size-icon-base" weight="bold" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
@@ -152,6 +156,9 @@ export function RepoCard({
<DropdownMenuItem icon={CodeIcon} onClick={onOpenInEditor}>
{tCommon('actions.openInIde')}
</DropdownMenuItem>
<DropdownMenuItem icon={GearIcon} onClick={onOpenSettings}>
{tCommon('actions.repoSettings')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>

View File

@@ -37,6 +37,7 @@ interface GitPanelProps {
onPushClick?: (repoId: string) => void;
onOpenInEditor?: (repoId: string) => void;
onCopyPath?: (repoId: string) => void;
onOpenSettings?: (repoId: string) => void;
onAddRepo?: () => void;
className?: string;
error?: string | null;
@@ -50,6 +51,7 @@ export function GitPanel({
onPushClick,
onOpenInEditor,
onCopyPath,
onOpenSettings,
className,
error,
}: GitPanelProps) {
@@ -92,6 +94,7 @@ export function GitPanel({
onPushClick={() => onPushClick?.(repo.id)}
onOpenInEditor={() => onOpenInEditor?.(repo.id)}
onCopyPath={() => onCopyPath?.(repo.id)}
onOpenSettings={() => onOpenSettings?.(repo.id)}
/>
))}
</div>

View File

@@ -173,6 +173,7 @@
"copyPath": "Copy path",
"copyWorktreePath": "Copy worktree path",
"openInIde": "Open in IDE",
"repoSettings": "Repository settings",
"cancel": "Cancel",
"saveChanges": "Save Changes",
"copied": "Copied"

View File

@@ -173,6 +173,7 @@
"copyPath": "Copiar ruta",
"copyWorktreePath": "Copiar ruta del worktree",
"openInIde": "Abrir en IDE",
"repoSettings": "Configuración del repositorio",
"cancel": "Cancelar",
"saveChanges": "Guardar cambios",
"copied": "Copiado"

View File

@@ -173,6 +173,7 @@
"copyPath": "パスをコピー",
"copyWorktreePath": "ワークツリーパスをコピー",
"openInIde": "IDEで開く",
"repoSettings": "リポジトリ設定",
"cancel": "キャンセル",
"saveChanges": "変更を保存",
"copied": "コピーしました"

View File

@@ -173,6 +173,7 @@
"copyPath": "워크트리 경로 복사",
"copyWorktreePath": "워크트리 경로 복사",
"openInIde": "IDE에서 열기",
"repoSettings": "저장소 설정",
"cancel": "취소",
"saveChanges": "변경사항 저장",
"copied": "복사됨"

View File

@@ -173,6 +173,7 @@
"copyPath": "复制路径",
"copyWorktreePath": "复制工作树路径",
"openInIde": "在IDE中打开",
"repoSettings": "仓库设置",
"cancel": "取消",
"saveChanges": "保存更改",
"copied": "已复制"

View File

@@ -173,6 +173,7 @@
"copyPath": "複製路徑",
"copyWorktreePath": "複製工作樹路徑",
"openInIde": "在IDE中開啟",
"repoSettings": "儲存庫設定",
"cancel": "取消",
"saveChanges": "儲存變更",
"copied": "已複製"