From 5098b1b5eea2a4afbb7a08e4835c49177d88dd21 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Thu, 26 Feb 2026 11:27:22 -0600
Subject: [PATCH] fix(site): resolve biome lint warnings (#602)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 site/src/components/docs/PreferenceSync.tsx               | 3 +--
 site/src/components/docs/PreferenceUpdater.tsx            | 3 +--
 site/src/components/docs/TableOfContents/index.tsx        | 3 +--
 site/src/components/installation/ReactCreateCodeBlock.tsx | 8 --------
 site/src/components/installation/SkinPicker.tsx           | 4 ++--
 5 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/site/src/components/docs/PreferenceSync.tsx b/site/src/components/docs/PreferenceSync.tsx
index eb99cb50..4e7652c3 100644
--- a/site/src/components/docs/PreferenceSync.tsx
+++ b/site/src/components/docs/PreferenceSync.tsx
@@ -29,7 +29,6 @@ export function PreferenceSync() {
     }
   }, [framework]);
 
-  // Workaround: Astro SSR logs false "Invalid hook call" when a React
-  // component with hooks returns null. See withastro/astro#12283.
+  // biome-ignore lint/complexity/noUselessFragments: Astro SSR logs false "Invalid hook call" when a React component with hooks returns null. See withastro/astro#12283.
   return <></>;
 }
diff --git a/site/src/components/docs/PreferenceUpdater.tsx b/site/src/components/docs/PreferenceUpdater.tsx
index 7532e3d9..0698ef26 100644
--- a/site/src/components/docs/PreferenceUpdater.tsx
+++ b/site/src/components/docs/PreferenceUpdater.tsx
@@ -24,7 +24,6 @@ export function PreferenceUpdater({ currentFramework }: PreferenceUpdaterProps)
     styleStore.set(style);
   }, [currentFramework]);
 
-  // Workaround: Astro SSR logs false "Invalid hook call" when a React
-  // component with hooks returns null. See withastro/astro#12283.
+  // biome-ignore lint/complexity/noUselessFragments: Astro SSR logs false "Invalid hook call" when a React component with hooks returns null. See withastro/astro#12283.
   return <></>;
 }
diff --git a/site/src/components/docs/TableOfContents/index.tsx b/site/src/components/docs/TableOfContents/index.tsx
index 67b835d8..a16799ab 100644
--- a/site/src/components/docs/TableOfContents/index.tsx
+++ b/site/src/components/docs/TableOfContents/index.tsx
@@ -12,8 +12,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
   const activeId = useActiveHeading(filteredHeadings);
 
   if (filteredHeadings.length === 0) {
-    // Workaround: Astro SSR logs false "Invalid hook call" when a React
-    // component with hooks returns null. See withastro/astro#12283.
+    // biome-ignore lint/complexity/noUselessFragments: Astro SSR logs false "Invalid hook call" when a React component with hooks returns null. See withastro/astro#12283.
     return <></>;
   }
 
diff --git a/site/src/components/installation/ReactCreateCodeBlock.tsx b/site/src/components/installation/ReactCreateCodeBlock.tsx
index e351bc07..c970df62 100644
--- a/site/src/components/installation/ReactCreateCodeBlock.tsx
+++ b/site/src/components/installation/ReactCreateCodeBlock.tsx
@@ -41,13 +41,6 @@ function getSkinImportParts(skin: Skin): { group: string; skinFile: string } {
   return { group: skin, skinFile: 'skin' };
 }
 
-function getPresetAccess(useCase: UseCase): string {
-  if (useCase === 'default-video') {
-    return 'presets.website';
-  }
-  return `presets['${useCase}']`;
-}
-
 function getProviderComponent(useCase: UseCase): string {
   const map: Record<UseCase, string> = {
     'default-video': 'VideoProvider',
@@ -60,7 +53,6 @@ function getProviderComponent(useCase: UseCase): string {
 function generateReactCode(useCase: UseCase, skin: Skin, renderer: Renderer, playbackId: string | null): string {
   const providerComponent = getProviderComponent(useCase);
   const rendererComponent = getRendererComponent(renderer);
-  const presetAccess = getPresetAccess(useCase);
 
   // Background video has fixed skin and subpath imports, others use skin picker value
   const isBackgroundVideo = useCase === 'background-video';
diff --git a/site/src/components/installation/SkinPicker.tsx b/site/src/components/installation/SkinPicker.tsx
index 22d4ef6c..0a5dbc89 100644
--- a/site/src/components/installation/SkinPicker.tsx
+++ b/site/src/components/installation/SkinPicker.tsx
@@ -25,10 +25,10 @@ export default function SkinPicker() {
   // Auto-switch skin when use case changes and current skin is invalid
   useEffect(() => {
     const validValues = options.map((o) => o.value);
-    if (!validValues.includes($skin)) {
+    if (!validValues.includes(skin.get())) {
       skin.set(options[0].value);
     }
-  }, [$useCase]);
+  }, [options]);
 
   return (
     <ImageRadioGroup value={$skin} onChange={(value) => skin.set(value)} options={options} aria-label="Select skin" />