Skip to content

fix(ui): add pointer cursors to interactive controls #3028

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
graphieros merged 2 commits into from
Jul 11, 2026
Merged

fix(ui): add pointer cursors to interactive controls #3028

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
4323681
fix(ui): use pointer cursor for view mode toggle
juninhokaponne Jul 10, 2026
5d0896b
fix(ui): add pointer cursors to interactive controls
juninhokaponne Jul 10, 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
2 changes: 1 addition & 1 deletion app/components/Code/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
v-for="mode in markdownViewModes"
:key="mode.key"
role="tab"
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
class="cursor-pointer px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
:class="
markdownViewMode === mode.key
? 'bg-bg-muted shadow text-fg'
Expand Down
2 changes: 1 addition & 1 deletion app/components/CollapsibleSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ useHead({
<button
:id="buttonId"
type="button"
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
class="cursor-pointer size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
:aria-expanded="isOpen"
:aria-controls="contentId"
:aria-label="ariaLabel"
Expand Down
10 changes: 5 additions & 5 deletions app/components/PaginationControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ function handlePageSizeChange(event: Event) {
>
<button
type="button"
class="px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="cursor-pointer px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:class="mode === 'infinite' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
:aria-pressed="mode === 'infinite'"
@click="mode = 'infinite'"
Expand All @@ -136,7 +136,7 @@ function handlePageSizeChange(event: Event) {
</button>
<button
type="button"
class="px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="cursor-pointer px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:class="mode === 'paginated' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
:aria-pressed="mode === 'paginated'"
@click="mode = 'paginated'"
Expand Down Expand Up @@ -184,7 +184,7 @@ function handlePageSizeChange(event: Event) {
<!-- Previous button -->
<button
type="button"
class="p-1.5 rounded hover:bg-bg-muted text-fg-muted hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="cursor-pointer p-1.5 rounded hover:bg-bg-muted text-fg-muted hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:disabled="!canGoPrev"
:aria-label="$t('filters.pagination.previous')"
@click="goPrev"
Expand All @@ -198,7 +198,7 @@ function handlePageSizeChange(event: Event) {
<button
v-else
type="button"
class="min-w-[32px] h-8 px-2 font-mono text-sm rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="cursor-pointer min-w-[32px] h-8 px-2 font-mono text-sm rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:class="
page === currentPage
? 'bg-fg text-bg'
Expand All @@ -214,7 +214,7 @@ function handlePageSizeChange(event: Event) {
<!-- Next button -->
<button
type="button"
class="p-1.5 rounded hover:bg-bg-muted text-fg-muted hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="cursor-pointer p-1.5 rounded hover:bg-bg-muted text-fg-muted hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:disabled="!canGoNext"
:aria-label="$t('filters.pagination.next')"
@click="goNext"
Expand Down
4 changes: 2 additions & 2 deletions app/components/SearchProviderToggle.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ useEventListener('keydown', event => {
<button
type="button"
role="menuitem"
class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted"
class="cursor-pointer w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted"
:class="[searchProviderValue !== 'algolia' ? 'bg-bg-muted' : '']"
@click="
() => {
Expand Down Expand Up @@ -85,7 +85,7 @@ useEventListener('keydown', event => {
<button
type="button"
role="menuitem"
class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted mt-1"
class="cursor-pointer w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted mt-1"
:class="[searchProviderValue === 'algolia' ? 'bg-bg-muted' : '']"
@click="
() => {
Expand Down
4 changes: 2 additions & 2 deletions app/components/ViewModeToggle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
>
<button
type="button"
class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="flex cursor-pointer items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:class="
viewMode === 'cards'
? 'bg-bg-subtle text-fg border-fg-subtle'
Expand All @@ -27,7 +27,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
</button>
<button
type="button"
class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
class="flex cursor-pointer items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
:class="
viewMode === 'table'
? 'bg-bg-subtle text-fg border-fg-subtle'
Expand Down
Loading