Skip to content

refactor: icons. #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
knightedcodemonkey merged 2 commits into from
Mar 27, 2026
Merged

refactor: icons. #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef6ae05
refactor: icons.
knightedcodemonkey Mar 27, 2026
bd0d4f3
refactor: clean up css cascade and svg location.
knightedcodemonkey Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions playwright/app.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,30 +259,41 @@ test('GitHub token info panel reflects missing and present token states', async
}) => {
await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)

const infoButton = page.locator('#github-token-info')
const infoPanel = page.locator('#github-token-info-panel')
const missingMessage = page.locator('.github-token-info-message--missing-token')
const presentMessage = page.locator('.github-token-info-message--has-token')
const infoButtonMissing = page.getByRole('button', {
name: 'About GitHub token features and privacy',
})
const infoButtonPresent = page.getByRole('button', {
name: 'About GitHub token privacy',
})
const missingMessage = page.getByText('Provide a GitHub PAT', { exact: false })
const presentMessage = page.getByText(
'This token is stored only in your browser and is sent only to GitHub APIs you invoke. Use the trash icon to remove it from storage.',
)

await expect(infoButton).toHaveText('?')
await expect(infoButton).toHaveAttribute('data-token-state', 'missing')
await expect(infoButtonMissing).toHaveAttribute('data-token-state', 'missing')
await expect(infoButtonMissing).toHaveAttribute(
'aria-label',
'About GitHub token features and privacy',
)
await expect(presentMessage).toBeHidden()

await infoButton.click()
await expect(infoPanel).toBeVisible()
await infoButtonMissing.click()
await expect(missingMessage).toBeVisible()
await expect(missingMessage).toContainText('Provide a GitHub PAT')
await expect(missingMessage.getByRole('link', { name: 'docs' })).toHaveAttribute(
await expect(page.getByRole('link', { name: 'docs' })).toHaveAttribute(
'href',
'https://github.com/knightedcodemonkey/develop/blob/main/docs/byot.md',
)
await expect(presentMessage).toBeHidden()

await connectByotWithSingleRepo(page)
await expect(infoButton).toHaveText('i')
await expect(infoButton).toHaveAttribute('data-token-state', 'present')
await expect(infoButtonPresent).toHaveAttribute('data-token-state', 'present')
await expect(infoButtonPresent).toHaveAttribute(
'aria-label',
'About GitHub token privacy',
)

await infoButton.click()
await expect(infoPanel).toBeVisible()
await infoButtonPresent.click()
await expect(presentMessage).toBeVisible()
await expect(presentMessage).toContainText(
'Use the trash icon to remove it from storage.',
Expand Down
61 changes: 39 additions & 22 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,30 @@ <h1>
aria-expanded="false"
aria-controls="github-token-info-panel"
>
i
<svg
class="github-token-info__icon github-token-info__icon--missing"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"
></path>
<path
d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"
></path>
</svg>
<svg
class="github-token-info__icon github-token-info__icon--present"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"
></path>
<path
d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"
></path>
</svg>
</button>
<div class="github-token-info-panel" id="github-token-info-panel" hidden>
<p
Expand Down Expand Up @@ -77,7 +100,7 @@ <h1>
autocomplete="off"
autocapitalize="off"
spellcheck="false"
placeholder="GitHub BYOT"
placeholder="GitHub PAT"
aria-label="GitHub token"
aria-describedby="github-token-privacy-note"
/>
Expand All @@ -92,9 +115,10 @@ <h1>
aria-label="Add GitHub token"
title="Add GitHub token"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
<svg viewBox="0 0 16 16" aria-hidden="true">
<path
d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
></path>
</svg>
</button>
<button
Expand Down Expand Up @@ -189,7 +213,12 @@ <h1>
aria-controls="github-ai-controls"
hidden
>
GitHub
<span>GitHub</span>
<svg viewBox="0 0 16 16" aria-hidden="true">
<path
d="M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656"
></path>
</svg>
</button>
</div>

Expand Down Expand Up @@ -318,16 +347,10 @@ <h2>Component</h2>
title="Show component tools"
aria-label="Show component tools"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path
d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
></path>
<circle
class="editor-tools-toggle__inner-ring"
cx="12"
cy="12"
r="3.8"
></circle>
</svg>
</button>
<button
Expand Down Expand Up @@ -420,16 +443,10 @@ <h2>Styles</h2>
title="Show styles tools"
aria-label="Show styles tools"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path
d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
></path>
<circle
class="editor-tools-toggle__inner-ring"
cx="12"
cy="12"
r="3.8"
></circle>
</svg>
</button>
<button
Expand Down
10 changes: 4 additions & 6 deletions src/modules/github-byot-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,14 @@ export const createGitHubByotControls = ({
let lastSelectedRepository = loadSelectedRepository()

const tokenAddPlusIcon = `
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path>
</svg>
`

const tokenAddCheckIcon = `
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m5 13 4 4L19 7"></path>
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
</svg>
`

Expand Down Expand Up @@ -119,7 +118,6 @@ export const createGitHubByotControls = ({

if (tokenInfoButton instanceof HTMLButtonElement) {
tokenInfoButton.dataset.tokenState = hasProvidedToken ? 'present' : 'missing'
tokenInfoButton.textContent = hasProvidedToken ? 'i' : '?'
tokenInfoButton.setAttribute(
'aria-label',
hasProvidedToken
Expand Down
55 changes: 41 additions & 14 deletions src/styles/ai-controls.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,37 +92,58 @@
display: inline-grid;
place-content: center;
cursor: pointer;
border-radius: 999px;
border: 1px solid var(--border-strong);
border: none;
color: var(--hint-icon);
font-weight: 700;
line-height: 1;
opacity: 0.9;
background: transparent;
padding: 0;
width: 20px;
height: 20px;
font-size: 0.74rem;
width: 24px;
height: 24px;
transition:
border-color 140ms ease,
color 140ms ease,
background 140ms ease,
box-shadow 140ms ease;
}

.github-token-info svg {
width: 100%;
height: 100%;
fill: currentColor;
stroke: none;
}

.github-token-info svg path {
fill: currentColor;
}

.github-token-info__icon--present {
display: none;
}

.github-token-info[data-token-state='present'] .github-token-info__icon--missing {
display: none;
}

.github-token-info[data-token-state='present'] .github-token-info__icon--present {
display: block;
}

.github-token-info[data-token-state='missing'] .github-token-info__icon--missing {
display: block;
}

.github-token-info[data-token-state='missing'] .github-token-info__icon--present {
display: none;
}

.github-token-info[data-token-state='missing'] {
border-color: color-mix(in srgb, #f59e0b 70%, var(--border-strong));
color: color-mix(in srgb, #fbbf24 86%, var(--panel-text));
background: color-mix(in srgb, #f59e0b 14%, transparent);
}

.github-token-info[data-token-state='present'] {
border-color: color-mix(in srgb, #22c55e 56%, var(--border-strong));
color: color-mix(in srgb, #4ade80 82%, var(--panel-text));
background: color-mix(in srgb, #22c55e 12%, transparent);
}

.github-token-info[aria-expanded='true'] {
.github-token-info[aria-expanded='true']:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 70%, transparent);
}

Expand Down Expand Up @@ -178,6 +199,12 @@
.github-token-add svg {
width: 14px;
height: 14px;
fill: currentColor;
stroke: none;
}

.github-token-add svg path {
fill: currentColor;
}

.github-token-add[data-state='loading'] svg {
Expand Down
10 changes: 10 additions & 0 deletions src/styles/layout-shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,14 @@
display: none;
}

.app-grid-ai-toggle svg {
width: 14px;
height: 14px;
fill: currentColor;
stroke: none;
flex-shrink: 0;
}

.app-grid-ai-toggle[hidden] {
display: none;
}
Expand Down Expand Up @@ -352,6 +360,8 @@
@media (max-width: 900px) {
.app-grid-ai-toggle:not([hidden]) {
display: inline-flex;
align-items: center;
gap: 7px;
}
}

Expand Down
5 changes: 3 additions & 2 deletions src/styles/panels-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,9 @@
color: var(--select-text);
}

.editor-tools-toggle .editor-tools-toggle__inner-ring {
stroke-width: 0.75;
.editor-tools-toggle svg path {
fill: currentColor;
stroke: none;
}

.panel-collapse-toggle {
Expand Down