Update oxlint rules, introduce sonarjs

eslint.config.js

@@ -18,7 +18,7 @@ export default defineConfig([
     "src/components/ui",
     "!src/components/ui/theme-provider.tsx",
     "!src/components/ui/carousel.tsx",
-    "!src/components/ui/data-table.tsx"
+    "!src/components/ui/data-table.tsx",
   ]),
 
   {
@@ -47,6 +47,7 @@ export default defineConfig([
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
+        parser: tseslint.parser,
         project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },

package.json

@@ -60,6 +60,7 @@
     "eslint-plugin-react-jsx": "^5.12.0",
     "eslint-plugin-react-naming-convention": "^5.12.0",
     "eslint-plugin-react-x": "^5.12.0",
+    "eslint-plugin-sonarjs": "^4.1.0",
     "globals": "^17.7.0",
     "oxfmt": "^0.58.0",
     "oxlint": "^1.73.0",
@@ -68,8 +69,7 @@
     "shadcn": "^4.13.0",
     "tailwindcss": "^4.3.2",
     "tw-animate-css": "^1.4.0",
-    "@typescript/native": "npm:typescript@^7.0.2",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.62.1",
     "vite": "^8.1.3"
   }

src/components/app/check-in-dialog.tsx

@@ -24,7 +24,7 @@ import { cn } from "@/lib/utils";
 /// Constants
 
 const API_BASE_URL =
-  (import.meta.env.VITE_API_URL as string | undefined) || "http://localhost:8000";
+  (import.meta.env.VITE_API_URL as string | undefined) ?? "http://localhost:8000";
 
 const STATUS_GREEN = "text-[#15a66e] bg-[#15a66e]/15 dark:text-[#3fd68c] dark:bg-[#3fd68c]/15";
 const STATUS_MUTED = "text-muted-foreground bg-muted";

src/components/ui/carousel.tsx

@@ -12,7 +12,7 @@ type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 type CarouselOptions = UseCarouselParameters[0]
 type CarouselPlugin = UseCarouselParameters[1]
 
-type CarouselProps = {
+interface CarouselProps {
   opts?: CarouselOptions
   orientation?: "horizontal" | "vertical"
   plugins?: CarouselPlugin

src/components/ui/theme-provider.tsx

@@ -2,20 +2,20 @@ import { createContext, use, useCallback, useEffect, useMemo, useState } from "r
 
 type Theme = "dark" | "light" | "system";
 
-type ThemeProviderProps = {
+interface ThemeProviderProps {
   children: React.ReactNode;
   defaultTheme?: Theme;
   storageKey?: string;
-};
+}
 
-type ThemeProviderState = {
+interface ThemeProviderState {
   setTheme: (theme: Theme) => void;
   theme: Theme;
-};
+}
 
 const initialState: ThemeProviderState = {
   theme: "system",
-  setTheme: () => { /* noop */ },
+  setTheme: () => {},
 };
 
 const ThemeProviderContext = createContext(initialState);

src/routes/dashboard/events.tsx

@@ -146,7 +146,7 @@ const ROSTER_STATUS = {
 } satisfies Record<RosterStatus, { className: string; icon: LucideIcon; label: string }>;
 
 const API_BASE_URL =
-  (import.meta.env.VITE_API_URL as string | undefined) || "http://localhost:8000";
+  (import.meta.env.VITE_API_URL as string | undefined) ?? "http://localhost:8000";
 const PACIFIC_TZ = "America/Los_Angeles";
 const EVENTS_VIEWS: EventView[] = ["calendar", "grid", "list"];
 
@@ -452,11 +452,17 @@ function DashboardEvents() {
 
   const code = (codeQuery.data?.code ?? "").slice(0, 8);
   const copyCode = useCallback(() => {
-    void navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 1800);
+    navigator.clipboard
+      .writeText(code)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 1800);
+      })
+      .catch(() => {
+        toast.error("Couldn't copy the code.");
+      });
   }, [code]);
 
   const dashboardEvents = useMemo<DashboardEvent[]>(

src/routes/dashboard/events_.past.tsx

@@ -41,7 +41,7 @@ export const Route = createFileRoute("/dashboard/events_/past")({
 /// Constants
 
 const API_BASE_URL =
-  (import.meta.env.VITE_API_URL as string | undefined) || "http://localhost:8000";
+  (import.meta.env.VITE_API_URL as string | undefined) ?? "http://localhost:8000";
 const PAST_VIEWS: EventView[] = ["list", "grid"];
 
 const SHARED_QUERY_OPTIONS = {

src/routes/dashboard/manage/projects.tsx

@@ -106,10 +106,6 @@
 type ManageStatus = "all" | "active" | "archived";
 type DetailTab = "details" | "team";
 type InviteAction = "accept" | "decline" | "revoke";
-type RespondVars = { action: InviteAction; invite: ProjectInvite };
-type InviteVars = { member: ProjectMember; projectId: string };
-type SaveVars = { creating: boolean; project: FullProject };
-type Editor = { creating: boolean; founded_at: string; id: string };
 type RowHandler = (event: MouseEvent<HTMLElement>) => void;
 
 interface ProjectPageParams {
@@ -127,6 +123,24 @@
   onGallery: RowHandler;
 }
 
+interface RespondVars {
+  action: InviteAction;
+  invite: ProjectInvite;
+}
+interface InviteVars {
+  member: ProjectMember;
+  projectId: string;
+}
+interface SaveVars {
+  creating: boolean;
+  project: FullProject;
+}
+interface Editor {
+  creating: boolean;
+  founded_at: string;
+  id: string;
+}
+
 declare module "@tanstack/react-table" {
   interface TableMeta<TData extends RowData> {
     manage?: ManageProjectsMeta;
@@ -790,7 +804,7 @@
   /// Editor field handlers
 
   const handleSubmit = useCallback(() => {
-    form.handleSubmit().catch(() => {});
+    void form.handleSubmit();
   }, [form]);
   const handleText = useCallback(
     (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

src/routes/dashboard/route.tsx

@@ -125,7 +125,7 @@ const MANAGE_ROLES: Role[] = ["root", "admin", "manager"];
 export const ROLES_BY_RANK: Role[] = ["root", "admin", "manager", "leads"];
 
 const API_BASE_URL =
-  (import.meta.env.VITE_API_URL as string | undefined) || "http://localhost:8000";
+  (import.meta.env.VITE_API_URL as string | undefined) ?? "http://localhost:8000";
 
 const SIDEBAR_STYLE = {
   "--sidebar-width": "16.5rem",

src/routes/events.tsx

@@ -121,7 +121,7 @@ const EVENT_CALENDARS: Record<string, CalendarType> = Object.fromEntries(
 );
 
 const API_BASE_URL =
-  (import.meta.env.VITE_API_URL as string | undefined) || "http://localhost:8000";
+  (import.meta.env.VITE_API_URL as string | undefined) ?? "http://localhost:8000";
 
 const EVENTS_PAGE_SIZE = 50;
 const PACIFIC_TZ = "America/Los_Angeles";

src/routes/login.tsx

@@ -145,7 +145,6 @@ function Login() {
                 <div className="flex flex-col gap-1.5">
                   <div className="flex items-center justify-between">
                     <Label htmlFor="password">Password</Label>
-                    {/* TODO: wire to the Ory recovery flow (/recovery route, not built yet). */}
                     <Button
                       type="button"
                       variant="link"
@@ -191,7 +190,6 @@ function Login() {
             <span className="h-px flex-1 bg-border" />
           </div>
 
-          {/* TODO: Wire up Google Oauth2 and SSO (if needed)*/}
           <div className="flex flex-col gap-3">
             <Button type="button" variant="outline" size="lg" className="w-full font-semibold">
               <SiGoogle />

src/routes/register.tsx

@@ -225,7 +225,6 @@ function Register() {
             <span className="h-px flex-1 bg-border" />
           </div>
 
-          {/* TODO: Wire up Google Oauth2 and SSO (if needed)*/}
           <div className="flex flex-col gap-3">
             <Button type="button" variant="outline" size="lg" className="w-full font-semibold">
               <SiGoogle />