Skip to content

feat(jef-78): icon-only buttons on mobile #218

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
mankatcheung merged 2 commits into from
Aug 4, 2026
Merged

feat(jef-78): icon-only buttons on mobile #218

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
4174982
feat(jef-78): icon-only buttons on mobile
mankatcheung Aug 4, 2026
64ff378
feat(jef-78): add + New, Board, and List buttons to icon-only on mobile
mankatcheung Aug 4, 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
8 changes: 4 additions & 4 deletions apps/web/src/__tests__/components/ApplicationsPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,15 +420,15 @@ describe('ApplicationsPage', () => {
fireEvent.click(screen.getByLabelText('Select Stripe'));
mockMutationResult({ updateApplication: { id: '1' } });

fireEvent.click(screen.getByRole('button', { name: /^star$/i }));
fireEvent.click(screen.getByRole('button', { name: 'Star selected' }));
await waitFor(() => {
expect(mockGqlRequest).toHaveBeenCalledWith(expect.stringContaining('updateApplication'), {
id: '1',
input: { starred: true },
});
});

fireEvent.click(screen.getByRole('button', { name: /unstar/i }));
fireEvent.click(screen.getByRole('button', { name: 'Unstar selected' }));
await waitFor(() => {
expect(mockGqlRequest).toHaveBeenCalledWith(expect.stringContaining('updateApplication'), {
id: '1',
Expand All @@ -444,7 +444,7 @@ describe('ApplicationsPage', () => {
fireEvent.click(screen.getByLabelText('Select all'));
mockMutationResult({ deleteApplication: true });

fireEvent.click(screen.getByRole('button', { name: /delete/i }));
fireEvent.click(screen.getByRole('button', { name: 'Delete selected' }));

await waitFor(() => {
expect(mockGqlRequest).toHaveBeenCalledWith(expect.stringContaining('deleteApplication'), {
Expand All @@ -467,7 +467,7 @@ describe('ApplicationsPage', () => {
fireEvent.click(screen.getByLabelText('Select Stripe'));
mockGqlRequest.mockClear();

fireEvent.click(screen.getByRole('button', { name: /delete/i }));
fireEvent.click(screen.getByRole('button', { name: 'Delete selected' }));

// Without the mock calling onExecute, no delete mutation should fire
await new Promise((r) => setTimeout(r, 100));
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/__tests__/components/settings/SettingsSecurityPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ describe('SettingsSecurityPage', () => {
expect(screen.getByText('Mozilla/5.0 (Macintosh)')).toBeInTheDocument();
});
expect(screen.getByText('This device')).toBeInTheDocument();
expect(screen.queryByRole('button', { name: /^revoke$/i })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: /revoke session/i })).not.toBeInTheDocument();
expect(
screen.queryByRole('button', { name: /sign out other sessions/i }),
).not.toBeInTheDocument();
Expand Down Expand Up @@ -306,7 +306,7 @@ describe('SettingsSecurityPage', () => {
await waitFor(() => expect(screen.getByText('Safari')).toBeInTheDocument());

mockGqlRequest.mockResolvedValueOnce({ revokeSession: true });
fireEvent.click(screen.getByRole('button', { name: /^revoke$/i }));
fireEvent.click(screen.getByRole('button', { name: /revoke session/i }));

await waitFor(() => {
expect(mockGqlRequest).toHaveBeenCalledWith(expect.stringContaining('RevokeSession'), {
Expand Down
10 changes: 7 additions & 3 deletions apps/web/src/components/ErrorState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AlertTriangleIcon } from 'lucide-react';
import { AlertTriangleIcon, RefreshCwIcon } from 'lucide-react';
import { getErrorMessage } from '#/lib/errors';

interface ErrorStateProps {
Expand All @@ -18,8 +18,12 @@ export function ErrorState({ error, onRetry }: ErrorStateProps) {
<AlertTriangleIcon size={40} className="mx-auto mb-3 text-red-500" />
<p className="text-gray-700 dark:text-gray-300">{getErrorMessage(error)}</p>
{onRetry && (
<button onClick={onRetry} className="mt-3 text-sm text-blue-600 hover:underline">
Try again
<button
onClick={onRetry}
aria-label="Try again"
className="mt-3 flex items-center gap-1.5 mx-auto text-sm text-blue-600 hover:underline"
>
<RefreshCwIcon size={14} /> <span className="hidden sm:inline">Try again</span>
</button>
)}
</div>
Expand Down
21 changes: 16 additions & 5 deletions apps/web/src/routes/_authenticated/-notification-inbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@ import {
import { gqlClient } from '#/graphql/client';
import { useInfiniteScrollSentinel } from '#/lib/useInfiniteScrollSentinel';
import { useHotkeys } from '#/hooks/useHotkeys';
import { BellIcon, XIcon, CalendarIcon, ClockIcon, ShieldIcon, Loader2Icon } from 'lucide-react';
import {
BellIcon,
XIcon,
CalendarIcon,
ClockIcon,
ShieldIcon,
Loader2Icon,
CheckCheckIcon,
EyeOffIcon,
} from 'lucide-react';

const PAGE_SIZE = 20;

Expand Down Expand Up @@ -208,16 +217,18 @@ function NotificationInboxPanel({ onClose }: { onClose: () => void }) {
<button
type="button"
onClick={() => markSelected(true)}
className="text-xs text-blue-600 hover:underline"
aria-label="Mark read"
className="flex items-center gap-1 text-xs text-blue-600 hover:underline"
>
Mark read
<CheckCheckIcon size={14} /> <span className="hidden sm:inline">Mark read</span>
</button>
<button
type="button"
onClick={() => markSelected(false)}
className="text-xs text-blue-600 hover:underline"
aria-label="Mark unread"
className="flex items-center gap-1 text-xs text-blue-600 hover:underline"
>
Mark unread
<EyeOffIcon size={14} /> <span className="hidden sm:inline">Mark unread</span>
</button>
</div>
)}
Expand Down
52 changes: 34 additions & 18 deletions apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@
CalendarIcon,
CheckIcon,
ChevronDownIcon,
CopyIcon,
EyeIcon,
ChevronUpIcon,
EditIcon,
ExternalLinkIcon,
FileTextIcon,
PenLineIcon,
PlusIcon,
StarIcon,
XIcon,
Trash2Icon,
UploadIcon,
UsersIcon,
Expand Down Expand Up @@ -420,9 +423,10 @@
if (noteContent.trim()) createNote.mutate(noteContent.trim());
}}
disabled={!noteContent.trim() || createNote.isPending}
aria-label="Add note"
className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white text-xs font-medium rounded-lg"
>
<PlusIcon size={14} /> Add note
<PlusIcon size={14} /> <span className="hidden sm:inline">Add note</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -452,15 +456,17 @@
onClick={() =>
updateNote.mutate({ id: note.id, content: editingNote.content })
}
className="text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg"
aria-label="Save"
className="flex items-center gap-1 text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg"
>
Save
<CheckIcon size={14} /> <span className="hidden sm:inline">Save</span>
</button>
<button
onClick={() => setEditingNote(null)}
className="text-xs px-3 py-1.5 text-gray-500 hover:text-gray-700"
aria-label="Cancel"
className="flex items-center gap-1 text-xs px-3 py-1.5 text-gray-500 hover:text-gray-700"
>
Cancel
<XIcon size={14} /> <span className="hidden sm:inline">Cancel</span>
</button>
</div>
</>
Expand All @@ -479,8 +485,8 @@
<button
onClick={() => {
const snapshot = qc.getQueryData(['notes', applicationId]);
qc.setQueryData(['notes', applicationId], (prev: any) => ({

Check warning on line 488 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
notes: (prev?.notes ?? []).filter((n: any) => n.id !== note.id),

Check warning on line 489 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
}));
showUndoToast({
message: 'Note deleted',
Expand Down Expand Up @@ -1189,9 +1195,9 @@
<button
onClick={() => {
const snapshot = qc.getQueryData(['interviewRounds', applicationId]);
qc.setQueryData(['interviewRounds', applicationId], (prev: any) => ({

Check warning on line 1198 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
interviewRounds: (prev?.interviewRounds ?? []).filter(
(r: any) => r.id !== round.id,

Check warning on line 1200 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
),
}));
showUndoToast({
Expand Down Expand Up @@ -1460,15 +1466,18 @@
<button
onClick={onSubmit}
disabled={!form.name.trim() || submitting}
className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white text-xs font-medium rounded-lg"
aria-label="Save"
className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white text-xs font-medium rounded-lg"
>
{submitting ? 'Saving…' : 'Save'}
<CheckIcon size={14} />{' '}
<span className="hidden sm:inline">{submitting ? 'Saving…' : 'Save'}</span>
</button>
<button
onClick={onCancel}
className="px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200"
aria-label="Cancel"
className="flex items-center gap-1 px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200"
>
Cancel
<XIcon size={14} /> <span className="hidden sm:inline">Cancel</span>
</button>
</div>
</div>
Expand All @@ -1482,9 +1491,10 @@
setShowForm(true);
setForm(emptyContactForm());
}}
aria-label="Add contact"
className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-lg"
>
<PlusIcon size={14} /> Add contact
<PlusIcon size={14} /> <span className="hidden sm:inline">Add contact</span>
</button>
)}

Expand Down Expand Up @@ -1566,8 +1576,8 @@
<button
onClick={() => {
const snapshot = qc.getQueryData(['contacts', applicationId]);
qc.setQueryData(['contacts', applicationId], (prev: any) => ({

Check warning on line 1579 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
contacts: (prev?.contacts ?? []).filter((c: any) => c.id !== contact.id),

Check warning on line 1580 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
}));
showUndoToast({
message: 'Contact deleted',
Expand Down Expand Up @@ -1796,15 +1806,18 @@
<button
onClick={handleConfirm}
disabled={confirming}
className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white text-xs font-medium rounded-lg"
aria-label="Confirm upload"
className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white text-xs font-medium rounded-lg"
>
{confirming ? 'Saving…' : 'Confirm upload'}
<CheckIcon size={14} />{' '}
<span className="hidden sm:inline">{confirming ? 'Saving…' : 'Confirm upload'}</span>
</button>
<button
onClick={() => setPendingUpload(null)}
className="px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200"
aria-label="Cancel"
className="flex items-center gap-1 px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200"
>
Cancel
<XIcon size={14} /> <span className="hidden sm:inline">Cancel</span>
</button>
</div>
{uploadError && <p className="text-xs text-red-600">{uploadError}</p>}
Expand Down Expand Up @@ -1862,8 +1875,8 @@
<button
onClick={() => {
const snapshot = qc.getQueryData(['documents', applicationId]);
qc.setQueryData(['documents', applicationId], (prev: any) => ({

Check warning on line 1878 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
documents: (prev?.documents ?? []).filter((d: any) => d.id !== doc.id),

Check warning on line 1879 in apps/web/src/routes/_authenticated/applications/$applicationId/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
}));
showUndoToast({
message: 'Document deleted',
Expand Down Expand Up @@ -1972,9 +1985,11 @@
</h3>
<button
onClick={handleCopy}
className="px-3 py-1.5 text-xs font-medium border border-gray-300 dark:border-gray-600 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
aria-label="Copy"
className="flex items-center gap-1 px-3 py-1.5 text-xs font-medium border border-gray-300 dark:border-gray-600 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
>
{copied ? '✓ Copied' : 'Copy'}
<CopyIcon size={14} />{' '}
<span className="hidden sm:inline">{copied ? '✓ Copied' : 'Copy'}</span>
Comment on lines +1988 to +1992

@coderabbitai coderabbitai Bot Aug 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Expose the copy result to assistive technology.

aria-label="Copy" overrides the child text. When copied becomes true, the accessible name remains Copy, so a screen reader receives no confirmation. Make the label reflect copied or expose Copied through a separate aria-live element.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/routes/_authenticated/applications/`$applicationId/index.tsx
around lines 1988 - 1992, Update the copy button’s accessible feedback around
the copied state so assistive technology announces confirmation when copied is
true. Adjust the aria-label to reflect the existing copied value, or add a
separate aria-live element exposing “Copied,” while preserving the current
visible label behavior.

</button>
</div>
<pre className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap font-sans leading-relaxed">
Expand Down Expand Up @@ -2050,9 +2065,10 @@
<button
type="button"
onClick={() => setPreviewOpen(true)}
className="text-xs text-blue-600 hover:underline"
aria-label="Preview"
className="flex items-center gap-1 text-xs text-blue-600 hover:underline"
>
Preview
<EyeIcon size={14} /> <span className="hidden sm:inline">Preview</span>
</button>
)}
<button
Expand Down
12 changes: 8 additions & 4 deletions apps/web/src/routes/_authenticated/applications/-board-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { gqlClient } from '#/graphql/client';
import type { ApplicationStatus } from '#/graphql/generated/graphql';
import { StatusBadge } from '../dashboard';
import { ErrorState } from '#/components/ErrorState';
import { ListIcon, StarIcon } from 'lucide-react';
import { ListIcon, PlusIcon, StarIcon } from 'lucide-react';
import { boardApplicationsQueryOptions, type BoardApplication } from './-board-queries';

const UPDATE_STATUS = `
Expand Down Expand Up @@ -135,15 +135,19 @@ export function KanbanBoard() {
<div className="flex items-center gap-2">
<Link
to="/applications"
aria-label="Switch to list view"
className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 border border-gray-200 dark:border-gray-700 rounded-lg"
>
<ListIcon size={13} /> List
<ListIcon size={13} />
<span className="hidden sm:inline">List</span>
</Link>
<Link
to="/applications/new"
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
aria-label="New application"
className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
>
+ New
<PlusIcon size={15} />
<span className="hidden sm:inline">+ New</span>
</Link>
</div>
</div>
Expand Down
20 changes: 14 additions & 6 deletions apps/web/src/routes/_authenticated/applications/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
BriefcaseIcon,
KanbanIcon,
Loader2Icon,
PlusIcon,
SearchIcon,
StarIcon,
StarOffIcon,
Expand Down Expand Up @@ -187,15 +188,19 @@
<div className="flex items-center gap-2">
<Link
to="/applications/board"
aria-label="Switch to board view"
className="flex items-center gap-1.5 px-3 py-2 text-sm text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 border border-gray-200 dark:border-gray-700 rounded-lg transition-colors"
>
<KanbanIcon size={15} /> Board
<KanbanIcon size={15} />
<span className="hidden sm:inline">Board</span>
</Link>
<Link
to="/applications/new"
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
aria-label="New application"
className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
>
+ New
<PlusIcon size={15} />
<span className="hidden sm:inline">+ New</span>
</Link>
</div>
</div>
Expand Down Expand Up @@ -372,11 +377,11 @@
// Snapshot all pages of the infinite query
const snapshot = qc.getQueryData(['applications', 'page']);
// Optimistically remove selected apps from all pages
qc.setQueryData(['applications', 'page'], (prev: any) => {

Check warning on line 380 in apps/web/src/routes/_authenticated/applications/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
if (!prev) return prev;
return {
...prev,
pages: prev.pages.map((page: any) => ({

Check warning on line 384 in apps/web/src/routes/_authenticated/applications/index.tsx

View workflow job for this annotation

GitHub Actions / Lint, format & typecheck 

Unexpected any. Specify a different type
...page,
applicationsPage: {
...page.applicationsPage,
Expand Down Expand Up @@ -448,25 +453,28 @@
type="button"
onClick={() => bulk.bulkSetStarred(ids, true)}
disabled={bulk.isPending}
aria-label="Star selected"
className="flex items-center gap-1 px-2 py-1.5 text-sm hover:bg-gray-800 dark:hover:bg-gray-600 rounded-lg transition-colors disabled:opacity-60"
>
<StarIcon size={14} /> Star
<StarIcon size={14} /> <span className="hidden sm:inline">Star</span>
</button>
<button
type="button"
onClick={() => bulk.bulkSetStarred(ids, false)}
disabled={bulk.isPending}
aria-label="Unstar selected"
className="flex items-center gap-1 px-2 py-1.5 text-sm hover:bg-gray-800 dark:hover:bg-gray-600 rounded-lg transition-colors disabled:opacity-60"
>
<StarOffIcon size={14} /> Unstar
<StarOffIcon size={14} /> <span className="hidden sm:inline">Unstar</span>
</button>
<button
type="button"
onClick={onDelete}
disabled={bulk.isPending}
aria-label="Delete selected"
className="flex items-center gap-1 px-2 py-1.5 text-sm text-red-300 hover:bg-red-900/40 rounded-lg transition-colors disabled:opacity-60"
>
<Trash2Icon size={14} /> Delete
<Trash2Icon size={14} /> <span className="hidden sm:inline">Delete</span>
</button>

<button
Expand Down
13 changes: 9 additions & 4 deletions apps/web/src/routes/_authenticated/settings/data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DownloadIcon, UploadIcon } from 'lucide-react';
import { useState } from 'react';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import { useForm } from 'react-hook-form';
Expand Down Expand Up @@ -98,9 +99,10 @@ export function SettingsDataPage() {
<button
type="button"
onClick={onExport}
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 text-sm font-medium rounded-lg transition-colors"
aria-label="Download export"
className="flex items-center gap-1.5 px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 text-sm font-medium rounded-lg transition-colors"
>
Download export
<DownloadIcon size={14} /> <span className="hidden sm:inline">Download export</span>
</button>
</section>

Expand All @@ -117,8 +119,11 @@ export function SettingsDataPage() {
be restored from an export and will be skipped.
</p>
</div>
<label className="inline-block px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 text-sm font-medium rounded-lg transition-colors cursor-pointer">
{importing ? 'Importing…' : 'Choose file to import'}
<label className="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 text-sm font-medium rounded-lg transition-colors cursor-pointer">
<UploadIcon size={14} />{' '}
<span className="hidden sm:inline">
{importing ? 'Importing…' : 'Choose file to import'}
</span>
<input
type="file"
accept="application/json"
Expand Down
Loading
Loading