frontend: clear the 99 lint errors

`npm run lint` reported 99 errors and 26 warnings across 65 files and
had presumably been failing for a while — next.config.ts sets
eslint.ignoreDuringBuilds, so the build never surfaced it.

68 were in vendored code: components/charts and components/ai-elements,
pulled from upstream registries. Re-linting those reports upstream's
style back at us, and "fixing" them means diverging and eating conflicts
on every update — ai-elements already has exactly this carve-out on the
TypeScript side via ignoreBuildErrors. Ignore both, plus the two registry
files in components/ui (carousel publishes its api from an effect; the
sidebar skeleton picks a random width).

The other 31 were ours, nearly all react-hooks/set-state-in-effect on
the same shape: an effect that re-seeds form state when a dialog opens or
a selection changes. Moved to render-phase adjustment, which is both what
React recommends and a real fix — the effect version paints one frame of
the *previous* record's values before correcting itself. Two carried
sharper bugs: the employee dialog could keep a typed password across a
switch to another member, and use-wallet-sync could carry `linked` over
to a newly-selected patient, briefly offering to push a record to
someone else's wallet.

The rest: useIsMobile and speech-support detection become
useSyncExternalStore (correct on first paint, no mount flash); refs
mirroring state are written in effects rather than during render; the
care-team fetch moves into its effect behind a reload key, dropping an
exhaustive-deps suppression.

Two effects in chat-panel keep the rule disabled with a reason. Both are
what effects are for: draining the queued-message buffer when the
transport goes idle, and resolving ?thread from the URL — the latter
mints an id with nanoid(), so moving it into render would just trade this
error for a purity one.

Also removes a dead /explore-era import and unused directives found on
the way. lint now exits 0, with the ai-elements tsc carve-out unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-15 20:54:37 +03:00
parent 7c92c03eed
commit e8f3ed9ffe
28 changed files with 325 additions and 136 deletions
+12 -5
View File
@@ -9,6 +9,7 @@ import {
useEffect,
useRef,
useState,
useSyncExternalStore,
} from "react";
import { useTranslation } from "react-i18next";
@@ -78,17 +79,23 @@ export function ChatInput({
const [addKey, setAddKey] = useState(0);
const fileInputRef = useRef<HTMLInputElement>(null);
// Voice dictation (Web Speech API). Detected client-side so SSR markup and the
// first client render agree (button starts disabled, enabled by the effect).
const [speechSupported, setSpeechSupported] = useState(false);
// Voice dictation (Web Speech API). Read through useSyncExternalStore so SSR
// markup and the first client render agree: the server snapshot is `false`
// (no Speech API to detect), and the client re-reads on hydration. Support
// never changes for the life of the page, so the subscription is a no-op.
const speechSupported = useSyncExternalStore(
() => () => {},
() => getSpeechRecognition() !== null,
() => false,
);
const [isListening, setIsListening] = useState(false);
const recognitionRef = useRef<SpeechRecognitionLike | null>(null);
// The textarea contents when dictation started; transcript is appended to it.
const dictationBaseRef = useRef("");
useEffect(() => {
setSpeechSupported(getSpeechRecognition() !== null);
return () => recognitionRef.current?.stop();
const recognition = recognitionRef;
return () => recognition.current?.stop();
}, []);
const toggleDictation = useCallback(() => {
+23 -3
View File
@@ -139,8 +139,14 @@ export function ChatPanel() {
// Persisted conversation: a client-owned thread id (a fresh one per new chat),
// saved to the server after each exchange so history survives reloads.
const [threadId, setThreadId] = useState<string>(() => nanoid());
// Mirrored into a ref for the transport's fetch closure, which is memoized and
// must not be rebuilt per thread. Written in an effect rather than during
// render: a render can be thrown away or replayed, and mutating a ref there
// makes it observable — the write has to happen once the render is committed.
const threadIdRef = useRef(threadId);
threadIdRef.current = threadId;
useEffect(() => {
threadIdRef.current = threadId;
}, [threadId]);
// Skip the auto-save that would otherwise fire right after loading a thread
// (which would needlessly bump it to the top of the history).
const justLoadedRef = useRef(false);
@@ -214,9 +220,11 @@ export function ChatPanel() {
// stays visible until acknowledged and isn't duplicated. Reset the dismissed
// flag whenever a fresh error arrives.
const [errorDismissed, setErrorDismissed] = useState(false);
useEffect(() => {
const [prevError, setPrevError] = useState(error);
if (prevError !== error) {
setPrevError(error);
if (error) setErrorDismissed(false);
}, [error]);
}
const isCloudModel = (getModel(model)?.provider ?? "ollama") !== "ollama";
@@ -301,9 +309,16 @@ export function ChatPanel() {
);
// Drain the queue one message at a time whenever the chat returns to idle.
//
// This is the shape the rule exists to catch, but it's the shape we want: the
// trigger is the transport going idle — an external async system — and the
// dequeue has to happen in the same tick we hand the message to `send`, or a
// re-render could drain it twice. There's no render-phase equivalent, since
// `send` is a side effect.
useEffect(() => {
if (status !== "ready" || pendingConsent || queued.length === 0) return;
const [next, ...rest] = queued;
// eslint-disable-next-line react-hooks/set-state-in-effect
setQueued(rest);
if (next) void send(next.text, next.files);
}, [status, pendingConsent, queued, send]);
@@ -338,6 +353,10 @@ export function ChatPanel() {
// Open a saved thread from `/?thread=<id>` (sidebar history); a bare `/` starts
// a fresh chat. Driven by the URL so the sidebar links and "New chat" work.
//
// Stays an effect: the thread branch is an async fetch, and the fresh-chat
// branch mints an id with nanoid(), which is impure and so can't be adjusted
// during render — moving it there would just trade this for a purity error.
const requestedThread = searchParams.get("thread");
useEffect(() => {
if (requestedThread) {
@@ -367,6 +386,7 @@ export function ChatPanel() {
};
}
// No ?thread → fresh chat (e.g. after "New chat").
// eslint-disable-next-line react-hooks/set-state-in-effect
setThreadId(nanoid());
setMessages([]);
}, [requestedThread, setMessages]);
@@ -6,7 +6,7 @@
// array fields (invoice line items, inventory items) edited as add/remove rows.
import { Plus, X } from "lucide-react";
import { type ReactNode, useEffect, useState } from "react";
import { type ReactNode, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
@@ -196,10 +196,14 @@ export function RecordEditDialog({
const schema = EDIT_SCHEMAS[kind];
const [draft, setDraft] = useState<Rec>(record);
// Re-seed the draft whenever a fresh record is opened for editing.
useEffect(() => {
if (open) setDraft(record);
}, [open, record]);
// Re-seed the draft whenever a fresh record is opened for editing. Adjusted
// during render so the form never paints the previous record's values.
const [prevSeed, setPrevSeed] = useState<Rec | null>(null);
const seed = open ? record : null;
if (prevSeed !== seed) {
setPrevSeed(seed);
if (seed) setDraft(seed);
}
const setField = (key: string, value: unknown) =>
setDraft((d) => ({ ...d, [key]: value }));