Skip to content

fix(web-client): resolve all Biome lint errors in web client source #249

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

Open
chopmob-cloud wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix(web-client): resolve all Biome lint errors in web client source #249

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
39671ed
fix(web-client): resolve all Biome lint errors in web client source
chopmob-cloud Apr 29, 2026
b280663
chore(cspell): add sublabel to custom words list
chopmob-cloud Apr 29, 2026
3ddb0bb
fix(web-client): resolve remaining Biome lint and Prettier issues
chopmob-cloud Apr 29, 2026
b495e5a
chore(cspell): add dedup and sublabel to custom words
chopmob-cloud Apr 29, 2026
cb9fbbb
style(web-client): apply Prettier formatting across all changed sourc…
chopmob-cloud Apr 29, 2026
39f8a0c
ci: disable ESLint-based TSX and TYPESCRIPT_ES linters
chopmob-cloud Apr 29, 2026
6dcfe53
fix(web-client): replace block divs inside button with phrasing spans
chopmob-cloud Apr 29, 2026
28d4c71
fix(web-client): apply modern CSS color notation and unquote font names
chopmob-cloud Apr 29, 2026
d4b4281
Merge branch 'main' into fix/biome-lint-web-client
chopmob-cloud May 1, 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: 6 additions & 2 deletions code/web-client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const AppHeader = ({usedServers}: {usedServers: Set<string>}) => {
},
];

const flow = (import.meta as any).env?.VITE_FLOW;
const flow = (import.meta as {env?: {VITE_FLOW?: string}}).env?.VITE_FLOW;

return (
<div className="app-header">
Expand Down Expand Up @@ -69,11 +69,13 @@ const TabBar = ({
}) => (
<div className="tab-bar">
<button
type="button"
className={`tab ${activeTab === 'chat' ? 'active' : ''}`}
onClick={() => onChange('chat')}>
Chat
</button>
<button
type="button"
className={`tab ${activeTab === 'mandates' ? 'active' : ''}`}
onClick={() => onChange('mandates')}>
Mandates
Expand Down Expand Up @@ -125,6 +127,7 @@ const ChatInput = ({input, setInput, handleSend, loading}: ChatInputProps) => (
className="chat-input"
/>
<button
type="button"
onClick={() =>
handleSend({fallbackIfEmpty: DEFAULT_CHAT_STARTER_MESSAGE})
}
Expand All @@ -141,14 +144,15 @@ const ChatInput = ({input, setInput, handleSend, loading}: ChatInputProps) => (

export default function App() {
const chatState: ChatState = useChat();
const {messages} = chatState;
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 29, 2026

Choose a reason for hiding this comment

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

low

While destructuring messages here satisfies the useExhaustiveDependencies lint rule for the useEffect below, the rest of the component continues to use chatState.messages (e.g., lines 169, 171). For better consistency and readability, consider destructuring all the properties used from chatState at the top of the component, or use the destructured messages variable throughout.

const [activeTab, setActiveTab] = useState<TabKey>('chat');
const bottomRef = useRef<HTMLDivElement>(null);

useEffect(() => {
if (activeTab === 'chat') {
bottomRef.current?.scrollIntoView({behavior: 'smooth'});
}
}, [chatState.messages, activeTab]);
}, [messages, activeTab]);

return (
<div className="app-container">
Expand Down
12 changes: 7 additions & 5 deletions code/web-client/src/components/InventoryOptionsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ function ItemRow({
onClick?: () => void;
}) {
return (
<div
<button
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 29, 2026

Choose a reason for hiding this comment

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

medium

Changing this element to a <button> is a good semantic improvement. However, please note that <button> elements are only allowed to contain phrasing content. The current implementation contains several <div> elements (which are flow content) as descendants (e.g., lines 25, 41, 46). This results in invalid HTML. To fix this, you should change the internal <div> elements to <span> and use CSS (like display: block) to maintain the desired layout.

className={`item-card ${onClick ? 'clickable' : ''} ${selected ? 'selected' : ''}`}
role="button"
tabIndex={0}
type="button"
onClick={onClick}
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onClick?.()}>
>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 29, 2026

Choose a reason for hiding this comment

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

low

The closing bracket > for the <button> tag is placed on its own line without indentation, which appears to be a formatting oversight. It should be moved to the previous line or properly indented.

Suggested change
<button
className={`item-card ${onClick ? 'clickable' : ''} ${selected ? 'selected' : ''}`}
role="button"
tabIndex={0}
type="button"
onClick={onClick}
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onClick?.()}>
>
<button
className={`item-card ${onClick ? 'clickable' : ''} ${selected ? 'selected' : ''}`}
type="button"
onClick={onClick}>

<div className="row-content">
{selected && (
<div className="selected-icon">
<svg width="8" height="8" viewBox="0 0 8 8">
<title>Selected</title>
<path
d="M1.5 4l2 2 3-3"
stroke="white"
Expand All @@ -49,7 +49,7 @@ function ItemRow({
<div className="item-stock">{item.stock} in stock</div>
)}
</div>
</div>
</button>
);
}

Expand All @@ -66,6 +66,7 @@ export function InventoryOptionsCard({inventory, onSelect}: Props) {
<div className="header-wrapper">
<div className="icon-wrapper">
<svg width="10" height="10" viewBox="0 0 10 10">
<title>Inventory available</title>
<path
d="M2 5l2 2 4-4"
stroke="#34d399"
Expand Down Expand Up @@ -114,6 +115,7 @@ export function InventoryOptionsCard({inventory, onSelect}: Props) {
</div>
{canConfirm && (
<button
type="button"
onClick={() => {
setHasConfirmed(true);
onSelect?.(selected);
Expand Down
12 changes: 8 additions & 4 deletions code/web-client/src/components/MandateApproval.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export function MandateApproval({
<div className="mandate-header">
<div className="icon-wrapper">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<title>Mandate</title>
<path
d="M8 2L10.5 6.5H14L10.5 9L12 13.5L8 11L4 13.5L5.5 9L2 6.5H5.5L8 2Z"
strokeLinejoin="round"
Expand Down Expand Up @@ -133,7 +134,7 @@ export function MandateApproval({

{hasCurrentPrice && (
<div className="reference-price-note">
Reference price: ${current!.toFixed(2)} (list)
Reference price: ${current?.toFixed(2) ?? "0.00"} (list)
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 29, 2026

Choose a reason for hiding this comment

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

low

The use of double quotes for the string literal "0.00" is inconsistent with the single quotes used for other string literals in this file (e.g., line 152 uses '—'). Using single quotes here would maintain consistency with the project's apparent style.

Suggested change
Reference price: ${current?.toFixed(2) ?? "0.00"} (list)
Reference price: ${current?.toFixed(2) ?? '0.00'} (list)

</div>
)}
</>
Expand All @@ -148,7 +149,7 @@ export function MandateApproval({
},
{
label: 'Current',
value: hasCurrentPrice ? `$${current!.toFixed(2)}` : '—',
value: hasCurrentPrice ? `$${current?.toFixed(2) ?? "0.00"}` : '—',
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 29, 2026

Choose a reason for hiding this comment

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

low

Consistent with the previous comment, consider using single quotes for the string literal '0.00' to match the surrounding code style.

Suggested change
value: hasCurrentPrice ? `$${current?.toFixed(2) ?? "0.00"}` : '—',
value: hasCurrentPrice ? `$${current?.toFixed(2) ?? '0.00'}` : '—',

accent: '#f87171',
},
{label: 'Qty', value: String(qty), accent: '#94a3b8'},
Expand Down Expand Up @@ -187,6 +188,7 @@ export function MandateApproval({
{/* Payment method row */}
<div className="fop-row">
<svg width="32" height="20" viewBox="0 0 32 20" fill="none">
<title>Payment card</title>
<rect
width="32"
height="20"
Expand Down Expand Up @@ -243,8 +245,9 @@ export function MandateApproval({

{state === 'idle' && (
<div className="action-buttons">
<button className="approve-button" onClick={handleSign}>
<button type="button" className="approve-button" onClick={handleSign}>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<title>Approve</title>
<path
d="M7 1L8.8 4.8L13 5.3L10 8.2L10.7 12.4L7 10.5L3.3 12.4L4 8.2L1 5.3L5.2 4.8L7 1Z"
stroke="white"
Expand All @@ -255,7 +258,7 @@ export function MandateApproval({
</svg>
Approve & Sign
</button>
<button className="reject-button" onClick={onReject}>
<button type="button" className="reject-button" onClick={onReject}>
Reject
</button>
</div>
Expand All @@ -272,6 +275,7 @@ export function MandateApproval({
<div className="signed-state">
<div className="success-badge">
<svg width="10" height="10" viewBox="0 0 10 10">
<title>Signed</title>
<path
d="M2 5l2 2 4-4"
stroke="white"
Expand Down
4 changes: 2 additions & 2 deletions code/web-client/src/components/MessageRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
return (
<UserActionCard
label={msg.userActionLabel ?? 'Action'}
sublabel={msg.userActionSublabel}

Check warning on line 97 in code/web-client/src/components/MessageRenderer.tsx

View workflow job for this annotation

GitHub Actions / spellcheck 

Unknown word (Sublabel)

Check warning on line 97 in code/web-client/src/components/MessageRenderer.tsx

View workflow job for this annotation

GitHub Actions / spellcheck 

Unknown word (sublabel)
/>
);
}
Expand Down Expand Up @@ -126,7 +126,7 @@
: undefined;
return (
<div className="agent-composite-msg">
{proseText && proseText.trim() && <AgentProse text={proseText} />}
{proseText?.trim() && <AgentProse text={proseText} />}
<ProductPreviewUnavailableCard preview={preview} />
</div>
);
Expand Down Expand Up @@ -183,7 +183,7 @@

return (
<div className="agent-composite-msg">
{proseText && proseText.trim() && <AgentProse text={proseText} />}
{proseText?.trim() && <AgentProse text={proseText} />}
<MandateApproval
mandate={mandateWithName}
trustedSurface={trustedSurface}
Expand Down
2 changes: 1 addition & 1 deletion code/web-client/src/components/MonitoringCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function MonitoringCard({
</p>
)}
{onCheckNow && (
<button onClick={onCheckNow} className="check-button">
<button type="button" onClick={onCheckNow} className="check-button">
Check now
</button>
)}
Expand Down
2 changes: 1 addition & 1 deletion code/web-client/src/utils/productPreviewUnavailable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function normalizeProductPreviewUnavailable(
if (typeof v === 'string') {
const cleaned = v.replace(/[$,]/g, '').trim();
const n = Number(cleaned);
return isNaN(n) ? undefined : n;
return Number.isNaN(n) ? undefined : n;
}
return undefined;
};
Expand Down
Loading