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

feat(ui): GitLab brand icons in GitLab surfaces

Browse Source
This commit is contained in:
bot-hermes
2026-08-16 16:27:48 +00:00
parent 51ffe54788
commit c25e16d093
14 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+2 -2
View File
@@ -2980,7 +2980,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
requestAnimationFrame(openIssuePicker);
}}
>
<Icon name={gitProvider === 'gitlab' ? 'git-branch' : 'github'} className="h-[18px] w-[18px] flex-shrink-0 text-muted-foreground" />
<Icon name={gitProvider === 'gitlab' ? 'gitlab' : 'github'} className="h-[18px] w-[18px] flex-shrink-0 text-muted-foreground" />
{gitProvider === 'gitlab' ? t('chat.chatInput.actions.linkGitlabIssue') : t('chat.chatInput.actions.linkGithubIssue')}
</button>
<button
@@ -2992,7 +2992,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
requestAnimationFrame(openPrPicker);
}}
>
<Icon name={gitProvider === 'gitlab' ? 'git-merge' : 'git-pull-request'} className="h-[18px] w-[18px] flex-shrink-0 text-muted-foreground" />
<Icon name={gitProvider === 'gitlab' ? 'gitlab' : 'git-pull-request'} className="h-[18px] w-[18px] flex-shrink-0 text-muted-foreground" />
{gitProvider === 'gitlab' ? t('chat.chatInput.actions.linkGitlabMr') : t('chat.chatInput.actions.linkGithubPr')}
</button>
</div>
packages/ui/src/components/chat/composer/ui/ComposerAttachmentControls.tsx
+2 -2
View File
@@ -128,7 +128,7 @@ export const ComposerAttachmentControls = React.memo(function ComposerAttachment
requestAnimationFrame(openIssuePicker);
}}
>
<Icon name="git-branch"/>
<Icon name="gitlab"/>
{t('chat.chatInput.actions.linkGitlabIssue')}
</DropdownMenuItem>
<DropdownMenuItem
@@ -136,7 +136,7 @@ export const ComposerAttachmentControls = React.memo(function ComposerAttachment
requestAnimationFrame(openPrPicker);
}}
>
<Icon name="git-merge"/>
<Icon name="gitlab"/>
{t('chat.chatInput.actions.linkGitlabMr')}
</DropdownMenuItem>
</>
packages/ui/src/components/chat/work-status/WorkStatusPrimaryGroup.tsx
+1 -1
View File
@@ -304,7 +304,7 @@ export const WorkStatusPrimaryGroup: React.FC<Props> = ({ sessionId, directory,
{hasGitLabMr && gitLabMr ? (
<WorkStatusRow
icon="git-merge"
icon="gitlab"
onClick={directory ? () => openSurface('pr') : undefined}
ariaLabel={t('chat.workStatus.action.openMr')}
iconColor={`var(--pr-${gitLabMrVisualState})`}
packages/ui/src/components/icon/sprite.ts
+1
View File
@@ -129,6 +129,7 @@ export const iconSpriteData = {
"git-repository": `<path d="M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z" fill="currentColor"/>`,
"github": `<path d="M5.88401 18.6533C5.58404 18.4526 5.32587 18.1975 5.0239 17.8369C4.91473 17.7065 4.47283 17.1524 4.55811 17.2583C4.09533 16.6833 3.80296 16.417 3.50156 16.3089C2.9817 16.1225 2.7114 15.5499 2.89784 15.0301C3.08428 14.5102 3.65685 14.2399 4.17672 14.4263C4.92936 14.6963 5.43847 15.1611 6.12425 16.0143C6.03025 15.8974 6.46364 16.441 6.55731 16.5529C6.74784 16.7804 6.88732 16.9182 6.99629 16.9911C7.20118 17.1283 7.58451 17.1874 8.14709 17.1311C8.17065 16.7489 8.24136 16.3783 8.34919 16.0358C5.38097 15.3104 3.70116 13.3952 3.70116 9.63971C3.70116 8.40085 4.0704 7.28393 4.75917 6.3478C4.5415 5.45392 4.57433 4.37284 5.06092 3.15636C5.1725 2.87739 5.40361 2.66338 5.69031 2.57352C5.77242 2.54973 5.81791 2.53915 5.89878 2.52673C6.70167 2.40343 7.83573 2.69705 9.31449 3.62336C10.181 3.41879 11.0885 3.315 12.0012 3.315C12.9129 3.315 13.8196 3.4186 14.6854 3.62277C16.1619 2.69 17.2986 2.39649 18.1072 2.52651C18.1919 2.54013 18.2645 2.55783 18.3249 2.57766C18.6059 2.66991 18.8316 2.88179 18.9414 3.15636C19.4279 4.37256 19.4608 5.45344 19.2433 6.3472C19.9342 7.28337 20.3012 8.39208 20.3012 9.63971C20.3012 13.3968 18.627 15.3048 15.6588 16.032C15.7837 16.447 15.8496 16.9105 15.8496 17.4121C15.8496 18.0765 15.8471 18.711 15.8424 19.4225C15.8412 19.6127 15.8397 19.8159 15.8375 20.1281C16.2129 20.2109 16.5229 20.5077 16.6031 20.9089C16.7114 21.4504 16.3602 21.9773 15.8186 22.0856C14.6794 22.3134 13.8353 21.5538 13.8353 20.5611C13.8353 20.4708 13.836 20.3417 13.8375 20.1145C13.8398 19.8015 13.8412 19.599 13.8425 19.4094C13.8471 18.7019 13.8496 18.0716 13.8496 17.4121C13.8496 16.7148 13.6664 16.2602 13.4237 16.051C12.7627 15.4812 13.0977 14.3973 13.965 14.2999C16.9314 13.9666 18.3012 12.8177 18.3012 9.63971C18.3012 8.68508 17.9893 7.89571 17.3881 7.23559C17.1301 6.95233 17.0567 6.54659 17.199 6.19087C17.3647 5.77663 17.4354 5.23384 17.2941 4.57702L17.2847 4.57968C16.7928 4.71886 16.1744 5.0198 15.4261 5.5285C15.182 5.69438 14.8772 5.74401 14.5932 5.66413C13.7729 5.43343 12.8913 5.315 12.0012 5.315C11.111 5.315 10.2294 5.43343 9.40916 5.66413C9.12662 5.74359 8.82344 5.69492 8.57997 5.53101C7.8274 5.02439 7.2056 4.72379 6.71079 4.58376C6.56735 5.23696 6.63814 5.77782 6.80336 6.19087C6.94565 6.54659 6.87219 6.95233 6.61423 7.23559C6.01715 7.8912 5.70116 8.69376 5.70116 9.63971C5.70116 12.8116 7.07225 13.9683 10.023 14.2999C10.8883 14.3971 11.2246 15.4769 10.5675 16.0482C10.3751 16.2156 10.1384 16.7802 10.1384 17.4121V20.5611C10.1384 21.5474 9.30356 22.2869 8.17878 22.09C7.63476 21.9948 7.27093 21.4766 7.36613 20.9326C7.43827 20.5204 7.75331 20.2116 8.13841 20.1276V19.1381C7.22829 19.1994 6.47656 19.0498 5.88401 18.6533Z" fill="currentColor"/>`,
"github-fill": `<path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z" fill="currentColor"/>`,
"gitlab": `<path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z" fill="currentColor"/>`,
"global": `<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM9.71002 19.6674C8.74743 17.6259 8.15732 15.3742 8.02731 13H4.06189C4.458 16.1765 6.71639 18.7747 9.71002 19.6674ZM10.0307 13C10.1811 15.4388 10.8778 17.7297 12 19.752C13.1222 17.7297 13.8189 15.4388 13.9693 13H10.0307ZM19.9381 13H15.9727C15.8427 15.3742 15.2526 17.6259 14.29 19.6674C17.2836 18.7747 19.542 16.1765 19.9381 13ZM4.06189 11H8.02731C8.15732 8.62577 8.74743 6.37407 9.71002 4.33256C6.71639 5.22533 4.458 7.8235 4.06189 11ZM10.0307 11H13.9693C13.8189 8.56122 13.1222 6.27025 12 4.24799C10.8778 6.27025 10.1811 8.56122 10.0307 11ZM14.29 4.33256C15.2526 6.37407 15.8427 8.62577 15.9727 11H19.9381C19.542 7.8235 17.2836 5.22533 14.29 4.33256Z" fill="currentColor"/>`,
"graduation-cap": `<path d="M4 11.3333L0 9L12 2L24 9V17.5H22V10.1667L20 11.3333V18.0113L19.7774 18.2864C17.9457 20.5499 15.1418 22 12 22C8.85817 22 6.05429 20.5499 4.22263 18.2864L4 18.0113V11.3333ZM6 12.5V17.2917C7.46721 18.954 9.61112 20 12 20C14.3889 20 16.5328 18.954 18 17.2917V12.5L12 16L6 12.5ZM3.96927 9L12 13.6846L20.0307 9L12 4.31541L3.96927 9Z" fill="currentColor"/>`,
"hammer": `<path d="M20 2C20.5523 2 21 2.44772 21 3V8C21 8.55228 20.5523 9 20 9H15V22C15 22.5523 14.5523 23 14 23H10C9.44772 23 9 22.5523 9 22V9H3.5C2.94772 9 2.5 8.55228 2.5 8V5.61803C2.5 5.23926 2.714 4.893 3.05279 4.72361L8.5 2H20ZM15 4H8.97214L4.5 6.23607V7H11V21H13V7H15V4ZM19 4H17V7H19V4Z" fill="currentColor"/>`,
packages/ui/src/components/layout/ContextPanel.tsx
+1 -1
View File
@@ -214,7 +214,7 @@ const getTabIcon = (
}
if (tab.mode === 'pr') {
return <Icon name={gitProvider === 'gitlab' ? 'git-merge' : 'github'} className="h-3.5 w-3.5" />;
return <Icon name={gitProvider === 'gitlab' ? 'gitlab' : 'github'} className="h-3.5 w-3.5" />;
}
if (tab.mode === 'notes') {
packages/ui/src/components/layout/ContextPanelRail.tsx
+1 -1
View File
@@ -302,7 +302,7 @@ export const ContextPanelRail: React.FC = () => {
const gitlabMrSurface: ContextSurfaceDescriptor = surface.id === 'pr' && gitProvider === 'gitlab'
? {
...surface,
icon: 'git-merge' as IconName,
icon: 'gitlab' as IconName,
labelKey: 'contextPanel.mode.mr',
descriptionKey: 'contextRail.surface.mr.description',
}
packages/ui/src/components/sections/openchamber/GitLabSettings.tsx
+3 -3
View File
@@ -168,7 +168,7 @@ export const GitLabSettings: React.FC = () => {
/>
) : (
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[var(--interactive-border)] bg-[var(--surface-muted)]">
<Icon name="git-branch" className="h-4 w-4 text-muted-foreground" />
<Icon name="gitlab" className="h-4 w-4 text-muted-foreground" />
</div>
)}
@@ -177,7 +177,7 @@ export const GitLabSettings: React.FC = () => {
{user?.name?.trim() || user?.username || 'GitLab'}
</div>
<div className={cn('flex items-center gap-2 typography-meta text-muted-foreground mt-0.5', isMobile ? 'flex-wrap' : 'truncate')}>
<Icon name="git-branch" className="h-3.5 w-3.5 shrink-0" />
<Icon name="gitlab" className="h-3.5 w-3.5 shrink-0" />
<span>{t('settings.gitlab.page.connectedAs')}</span>
<span className="font-mono">{user?.username || t('settings.gitlab.page.label.unknownUser')}</span>
<span className="opacity-50">•</span>
@@ -257,7 +257,7 @@ export const GitLabSettings: React.FC = () => {
/>
) : (
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-[var(--interactive-border)] bg-[var(--surface-muted)]">
<Icon name="git-branch" className="h-3 w-3 text-muted-foreground" />
<Icon name="gitlab" className="h-3 w-3 text-muted-foreground" />
</div>
)}
<div className="min-w-0 flex flex-col">
packages/ui/src/components/session/GitLabIntegrationDialog.tsx
+6 -6
View File
@@ -348,7 +348,7 @@ export function GitLabIntegrationDialog({
<>
{!isGitLabConnected ? (
<div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
<Icon name="git-branch" className="h-12 w-12 text-muted-foreground" />
<Icon name="gitlab" className="h-12 w-12 text-muted-foreground" />
<div className="text-center">
<p className="typography-ui-label text-foreground">{t('session.gitlabIntegration.connect.title')}</p>
<p className="typography-small text-muted-foreground mt-1">
@@ -606,8 +606,8 @@ export function GitLabIntegrationDialog({
<div className="w-full">
<SortableTabsStrip
items={[
{ id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="git-branch" className="h-3.5 w-3.5" /> },
{ id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="git-merge" className="h-3.5 w-3.5" /> },
{ id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
{ id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
]}
activeId={activeTab}
onSelect={(id) => {
@@ -647,7 +647,7 @@ export function GitLabIntegrationDialog({
<DialogHeader className="flex flex-row items-center justify-between">
<div className="flex items-center gap-3">
<DialogTitle className="flex items-center gap-2 shrink-0">
<Icon name="git-branch" className="h-5 w-5" />
<Icon name="gitlab" className="h-5 w-5" />
{t('session.gitlabIntegration.title')}
</DialogTitle>
@@ -655,8 +655,8 @@ export function GitLabIntegrationDialog({
<div className="w-[220px]">
<SortableTabsStrip
items={[
{ id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="git-branch" className="h-3.5 w-3.5" /> },
{ id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="git-merge" className="h-3.5 w-3.5" /> },
{ id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
{ id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
]}
activeId={activeTab}
onSelect={(id) => {
packages/ui/src/components/session/GitLabIssuePickerDialog.tsx
+1 -1
View File
@@ -718,7 +718,7 @@ export function GitLabIssuePickerDialog({
<DialogContent className="max-w-2xl max-h-[70vh] flex flex-col">
<DialogHeader className="flex-shrink-0">
<DialogTitle className="flex items-center gap-2">
<Icon name="git-branch" className="h-5 w-5" />
<Icon name="gitlab" className="h-5 w-5" />
{title}
</DialogTitle>
<DialogDescription>
packages/ui/src/components/session/GitLabMrPickerDialog.tsx
+1 -1
View File
@@ -462,7 +462,7 @@ export function GitLabMrPickerDialog({
<DialogContent className="max-w-2xl max-h-[70vh] flex flex-col">
<DialogHeader className="flex-shrink-0">
<DialogTitle className="flex items-center gap-2">
<Icon name="git-merge" className="h-5 w-5" />
<Icon name="gitlab" className="h-5 w-5" />
{title}
</DialogTitle>
<DialogDescription>
packages/ui/src/components/session/NewWorktreeDialog.tsx
+4 -4
View File
@@ -1585,7 +1585,7 @@ export function NewWorktreeDialog({
onClick={() => setGitlabDialogOpen(true)}
className="gap-1.5 h-7"
>
<Icon name="git-merge" className="size-4 text-status-success" />
<Icon name="gitlab" className="size-4 text-status-success" />
{newBranchState.linkedGitLabIssue || newBranchState.linkedGitLabMr ? t('session.newWorktree.actions.change') : t('session.newWorktree.actions.startFromGitLabIssueMr')}
</Button>
)}
@@ -1851,7 +1851,7 @@ export function NewWorktreeDialog({
{newBranchState.linkedIssue || newBranchState.linkedPr ? (
<Icon name="github" className="h-3.5 w-3.5 text-status-success shrink-0" />
) : (
<Icon name="git-merge" className="h-3.5 w-3.5 text-status-success shrink-0" />
<Icon name="gitlab" className="h-3.5 w-3.5 text-status-success shrink-0" />
)}
{newBranchState.linkedIssue && (
@@ -2113,7 +2113,7 @@ export function NewWorktreeDialog({
onClick={() => setGitlabDialogOpen(true)}
className="gap-1.5 h-7"
>
<Icon name="git-merge" className="size-4 text-status-success" />
<Icon name="gitlab" className="size-4 text-status-success" />
{newBranchState.linkedGitLabIssue || newBranchState.linkedGitLabMr ? t('session.newWorktree.actions.change') : t('session.newWorktree.actions.startFromGitLabIssueMr')}
</Button>
)}
@@ -2353,7 +2353,7 @@ export function NewWorktreeDialog({
{newBranchState.linkedIssue || newBranchState.linkedPr ? (
<Icon name="github" className="h-3.5 w-3.5 text-status-success shrink-0" />
) : (
<Icon name="git-merge" className="h-3.5 w-3.5 text-status-success shrink-0" />
<Icon name="gitlab" className="h-3.5 w-3.5 text-status-success shrink-0" />
)}
{newBranchState.linkedIssue && (
packages/ui/src/components/views/GitLabMrView.tsx
+2 -2
View File
@@ -434,7 +434,7 @@ export const GitLabMrView: React.FC = () => {
if (!currentDirectory) {
return (
<div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
<Icon name="git-merge" className="h-12 w-12 text-muted-foreground/50" />
<Icon name="gitlab" className="h-12 w-12 text-muted-foreground/50" />
<div className="typography-ui-header text-foreground">{t('contextPanel.gitlabMr.title')}</div>
<div className="max-w-sm typography-micro text-muted-foreground">{t('contextPanel.gitlabMr.empty.noActiveProject')}</div>
</div>
@@ -453,7 +453,7 @@ export const GitLabMrView: React.FC = () => {
if (connected === false) {
return (
<div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
<Icon name="git-merge" className="h-12 w-12 text-muted-foreground/50" />
<Icon name="gitlab" className="h-12 w-12 text-muted-foreground/50" />
<div className="typography-ui-header text-foreground">{t('contextPanel.gitlabMr.error.notConnected')}</div>
<Button variant="outline" size="sm" onClick={openGitLabSettings} className="w-fit">
{t('contextPanel.gitlabMr.actions.openSettings')}
packages/ui/src/components/views/git/GitHeader.tsx
+1 -1
View File
@@ -399,7 +399,7 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
className="h-8 gap-1.5 px-2 typography-micro"
>
<Icon
name="git-merge"
name="gitlab"
className="size-3.5"
style={{ color: `var(--pr-${gitLabMrVisualState})` }}
/>
scripts/generate-icon-sprite.mjs
+4
View File
@@ -37,6 +37,10 @@ const customIconData = new Map([
"command-code",
`<path fill="currentColor" d="M5.8 5.8h4.8v4.8h-4.8Z M13.4 5.8h4.8v4.8h-4.8Z M10.6 10.6h2.8v2.8h-2.8Z M5.8 13.4h4.8v4.8h-4.8Z M13.4 13.4h4.8v4.8h-4.8Z"/>`,
],
[
"gitlab",
`<path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z" fill="currentColor"/>`,
],
])
const source = readFileSync(remixPath, "utf-8")