fix: lint errors

kevinjosethomas · kevinjosethomas · commit 2f5b88c24596 · 2025-09-10T15:28:35.000-04:00
diff --git a/src/components/Analysis/AnalysisSidebar.tsx b/src/components/Analysis/AnalysisSidebar.tsx
@@ -84,9 +84,9 @@ export const AnalysisSidebar: React.FC<Props> = ({
       <div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-3">
         {/* Combined Highlight + MovesByRating container */}
         <div className="desktop-analysis-big-row-1-container relative flex gap-3">
-          <div className="border-glassBorder bg-glass-strong flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass-strong backdrop-blur-md">
             {/* Merged header with toggle */}
-            <div className="border-glassBorder flex h-10 min-h-10 items-center justify-between border-b bg-transparent px-4 text-white/90">
+            <div className="flex h-10 min-h-10 items-center justify-between border-b border-glassBorder bg-transparent px-4 text-white/90">
               <div className="flex items-center gap-2">
                 <span className="material-symbols-outlined text-xl text-white/80">
                   analytics
@@ -95,7 +95,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
               </div>
               <button
                 onClick={handleToggleAnalysis}
-                className={`border-glassBorder bg-glass flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
+                className={`flex items-center gap-1 rounded-md border border-glassBorder bg-glass px-2 py-1 text-xs transition-colors ${
                   analysisEnabled ? 'text-white' : 'text-white/80'
                 } hover:bg-glass-hover`}
               >
@@ -161,7 +161,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute bottom-0 left-0 right-0 top-10 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -207,7 +207,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           />
           {!analysisEnabled && (
             <div
-              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -230,9 +230,9 @@ export const AnalysisSidebar: React.FC<Props> = ({
       {/* Smaller screens: 3-row layout */}
       <div className="flex h-full flex-col gap-3 xl:hidden">
         {/* Row 1: Combined Highlight + BlunderMeter container */}
-        <div className="desktop-analysis-small-row-1-container border-glassBorder bg-glass-strong relative flex overflow-hidden rounded-md border backdrop-blur-md">
+        <div className="desktop-analysis-small-row-1-container relative flex overflow-hidden rounded-md border border-glassBorder bg-glass-strong backdrop-blur-md">
           {/* Merged header with toggle (mobile/smaller screens) */}
-          <div className="border-glassBorder absolute left-0 top-0 z-10 flex h-10 w-full items-center justify-between border-b bg-transparent px-3 text-white/90 backdrop-blur-md">
+          <div className="absolute left-0 top-0 z-10 flex h-10 w-full items-center justify-between border-b border-glassBorder bg-transparent px-3 text-white/90 backdrop-blur-md">
             <div className="flex items-center gap-2">
               <span className="material-symbols-outlined text-xl text-white/80">
                 analytics
@@ -318,7 +318,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute bottom-0 left-0 right-0 top-10 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -353,7 +353,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -384,7 +384,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
diff --git a/src/components/Analysis/BlunderMeter.tsx b/src/components/Analysis/BlunderMeter.tsx
@@ -64,7 +64,7 @@ const DesktopBlunderMeter: React.FC<Props> = ({
   return (
     <div
       id="analysis-blunder-meter"
-      className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border-glassBorder bg-glass border p-3 backdrop-blur-md md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
+      className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border border-glassBorder bg-glass p-3 backdrop-blur-md md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
     >
       <p className="text-sm text-primary xl:text-base">Blunder Meter</p>
       <div className="flex h-full w-full flex-col overflow-hidden">
@@ -119,7 +119,7 @@ const MobileBlunderMeter: React.FC<Props> = ({
   return (
     <div
       id="analysis-blunder-meter"
-      className={`flex w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border-glassBorder bg-glass border p-3 backdrop-blur-md' : ''}`}
+      className={`flex w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border border-glassBorder bg-glass p-3 backdrop-blur-md' : ''}`}
     >
       <p className="text-base text-primary">Blunder Meter</p>
       <div className="flex w-full flex-col gap-1">
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
@@ -85,7 +85,8 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
                 : 'truncate text-sm font-semibold text-white/95'
             }
           >
-            {broadcastController.currentBroadcast?.tour.name || 'Live Broadcast'}
+            {broadcastController.currentBroadcast?.tour.name ||
+              'Live Broadcast'}
           </h3>
         </div>
 
@@ -163,7 +164,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
                 >
                   <div
                     className={`flex h-full w-9 items-center justify-center ${
-                      isSelected ? 'bg-white/10' : 'bg-transparent group-hover:bg-white/5'
+                      isSelected
+                        ? 'bg-white/10'
+                        : 'bg-transparent group-hover:bg-white/5'
                     }`}
                   >
                     <p className="text-sm text-white/70">{index + 1}</p>
diff --git a/src/components/Analysis/ConfigurableScreens.tsx b/src/components/Analysis/ConfigurableScreens.tsx
@@ -120,7 +120,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
 
   // Normal state with configure/export tabs
   return (
-    <div className="bg-glass flex w-full flex-1 flex-col overflow-hidden md:w-auto md:rounded">
+    <div className="flex w-full flex-1 flex-col overflow-hidden bg-glass md:w-auto md:rounded">
       <div className="flex flex-row border-b border-white/10">
         {screens.map((s) => {
           const selected = s.id === screen.id
diff --git a/src/components/Common/PlayerInfo.tsx b/src/components/Common/PlayerInfo.tsx
@@ -65,7 +65,9 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
           : 'rounded-md'
 
   return (
-    <div className={`flex h-10 w-full items-center justify-between ${roundedClass} border border-glassBorder bg-glass px-4 backdrop-blur-md`}>
+    <div
+      className={`flex h-10 w-full items-center justify-between ${roundedClass} border border-glassBorder bg-glass px-4 backdrop-blur-md`}
+    >
       <div className="flex items-center gap-1.5">
         <div
           className={`h-2.5 w-2.5 rounded-full ${color === 'white' ? 'bg-white' : 'border bg-black'}`}
diff --git a/src/components/Home/Sections/AnalysisSection.tsx b/src/components/Home/Sections/AnalysisSection.tsx
@@ -226,11 +226,11 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
-          <div className="relative w-full overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+          <div className="from-white/8 to-white/4 relative w-full overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md">
             <div className="flex flex-col gap-3 p-3">
               <div className="flex flex-col gap-3 md:flex-row">
                 <div className="flex flex-col md:w-1/2">
-                  <div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <div className="w-full rounded-t-sm bg-white/5 p-2 text-left text-sm font-medium text-primary/80">
                       Spassky, Boris V.
                     </div>
@@ -246,7 +246,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                 </div>
                 <div className="flex flex-col gap-3 md:w-1/2">
                   <motion.div
-                    className="min-h-0 flex-1 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
+                    className="from-white/8 to-white/4 min-h-0 flex-1 overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md"
                     initial={{ opacity: 0, y: 20 }}
                     animate={
                       inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -274,7 +274,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                     />
                   </motion.div>
                   <motion.div
-                    className="flex-shrink-0 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
+                    className="from-white/8 to-white/4 flex-shrink-0 overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md"
                     initial={{ opacity: 0, y: 20 }}
                     animate={
                       inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -294,7 +294,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                   }
                   transition={{ duration: 0.3, delay: 0.6 }}
                 >
-                  <div className="h-full w-full overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 h-full w-full overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <MovesByRating
                       moves={analysisMockData.movesByRating}
                       colorSanMapping={analysisMockData.colorSanMapping}
@@ -303,7 +303,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                   </div>
                 </motion.div>
                 <motion.div
-                  className="h-64 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md md:w-1/2"
+                  className="from-white/8 to-white/4 h-64 overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md md:w-1/2"
                   initial={{ opacity: 0, y: 20 }}
                   animate={
                     inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
diff --git a/src/components/Home/Sections/PlaySection.tsx b/src/components/Home/Sections/PlaySection.tsx
@@ -88,7 +88,7 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
               <AnimatedTrainingBoards inView={inView} />
             </div>
             <motion.div
-              className="absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
+              className="from-white/8 to-white/4 absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-white/10 bg-gradient-to-br backdrop-blur-md"
               initial={{ scale: 0.95, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               transition={{ duration: 0.5 }}
diff --git a/src/components/Home/Sections/TrainSection.tsx b/src/components/Home/Sections/TrainSection.tsx
@@ -253,7 +253,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
-          <div className="flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+          <div className="from-white/8 to-white/4 flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md">
             <div className="border-b border-white/10 px-4 pt-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center">
@@ -280,7 +280,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                     transform: 'translateZ(0)',
                   }}
                 >
-                  <div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <div
                       className="relative w-full"
                       style={{
@@ -312,7 +312,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                   }
                   transition={{ duration: 0.3, delay: 0.5 }}
                 >
-                  <div className="h-full w-full rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 h-full w-full rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <MovesByRating
                       moves={puzzleMockData.movesByRating}
                       colorSanMapping={puzzleMockData.colorSanMapping}
@@ -323,7 +323,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
 
                 {/* Position Analysis */}
                 <motion.div
-                  className="mt-3 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 p-3 backdrop-blur-md"
+                  className="from-white/8 to-white/4 mt-3 overflow-hidden rounded border border-white/10 bg-gradient-to-br p-3 backdrop-blur-md"
                   initial={{ opacity: 0, y: 20 }}
                   animate={
                     inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
diff --git a/src/components/Openings/OpeningDrillSidebar.tsx b/src/components/Openings/OpeningDrillSidebar.tsx
@@ -45,7 +45,9 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
     <div className={containerClass}>
       {/* Current Drill Info */}
       <div className={sectionHeaderClass}>
-        <h2 className="mb-2 text-base font-semibold text-white/95">Current Drill</h2>
+        <h2 className="mb-2 text-base font-semibold text-white/95">
+          Current Drill
+        </h2>
         {currentDrill ? (
           <div className="space-y-2">
             <div>
diff --git a/src/components/Puzzles/PuzzleLog.tsx b/src/components/Puzzles/PuzzleLog.tsx
@@ -24,7 +24,13 @@ export const PuzzleLog: React.FC<Props> = ({
           : 'flex h-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
       }
     >
-      <div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-glassBorder px-3 py-2'}>
+      <div
+        className={
+          embedded
+            ? 'border-b border-glassBorder px-3 py-2'
+            : 'border-b border-glassBorder px-3 py-2'
+        }
+      >
         <h3 className="text-sm font-medium text-primary">Puzzle History</h3>
       </div>
       <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
diff --git a/src/components/Turing/TuringLog.tsx b/src/components/Turing/TuringLog.tsx
@@ -1,7 +1,9 @@
 import { useContext } from 'react'
 import { TuringControllerContext } from 'src/contexts'
 
-export const TuringLog: React.FC<{ embedded?: boolean }> = ({ embedded = false }) => {
+export const TuringLog: React.FC<{ embedded?: boolean }> = ({
+  embedded = false,
+}) => {
   const { games, gameIds, setCurrentIndex, currentIndex } = useContext(
     TuringControllerContext,
   )
@@ -14,7 +16,13 @@ export const TuringLog: React.FC<{ embedded?: boolean }> = ({ embedded = false }
           : 'flex h-full flex-col overflow-hidden rounded bg-background-1'
       }
     >
-      <div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-white border-opacity-10 px-3 py-2'}>
+      <div
+        className={
+          embedded
+            ? 'border-b border-glassBorder px-3 py-2'
+            : 'border-b border-white border-opacity-10 px-3 py-2'
+        }
+      >
         <h3 className="text-sm font-medium text-primary">Game History</h3>
       </div>
       <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
diff --git a/src/components/Turing/TuringSubmission.tsx b/src/components/Turing/TuringSubmission.tsx
@@ -32,7 +32,7 @@ export const TuringSubmission = ({
         className={
           embedded
             ? 'flex flex-col gap-5 border-t border-glassBorder bg-transparent p-3'
-            : 'flex flex-col gap-5 bg-background-1 p-4 rounded'
+            : 'flex flex-col gap-5 rounded bg-background-1 p-4'
         }
       >
         <h2 className="text-2xl">
@@ -72,8 +72,18 @@ export const TuringSubmission = ({
     )
 
   return (
-    <div className={embedded ? 'flex flex-col gap-1 border-t border-glassBorder' : 'flex flex-col gap-1'}>
-      <div className={embedded ? 'flex flex-col gap-3 p-3' : 'flex flex-col gap-3 p-4'}>
+    <div
+      className={
+        embedded
+          ? 'flex flex-col gap-1 border-t border-glassBorder'
+          : 'flex flex-col gap-1'
+      }
+    >
+      <div
+        className={
+          embedded ? 'flex flex-col gap-3 p-3' : 'flex flex-col gap-3 p-4'
+        }
+      >
         <h2 className="text-2xl font-semibold">Who is the bot?</h2>
         <div className="flex flex-1 flex-row items-center justify-between">
           <button
@@ -119,7 +129,7 @@ export const TuringSubmission = ({
       <textarea
         className={`${
           embedded
-            ? 'border-glassBorder bg-transparent p-2 text-sm text-secondary outline-none placeholder:text-secondary border rounded-md'
+            ? 'rounded-md border border-glassBorder bg-transparent p-2 text-sm text-secondary outline-none placeholder:text-secondary'
             : 'rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary'
         }`}
         placeholder="Optional justification"
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
diff --git a/src/pages/openings/index.tsx b/src/pages/openings/index.tsx
diff --git a/src/pages/turing.tsx b/src/pages/turing.tsx

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,8 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({`
`85`	`85`	`: 'truncate text-sm font-semibold text-white/95'`
`86`	`86`	`}`
`87`	`87`	`>`
`88`		`- {broadcastController.currentBroadcast?.tour.name \|\| 'Live Broadcast'}`
	`88`	`+ {broadcastController.currentBroadcast?.tour.name \|\|`
	`89`	`+ 'Live Broadcast'}`
`89`	`90`	`</h3>`
`90`	`91`	`</div>`
`91`	`92`
`@@ -163,7 +164,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({`
`163`	`164`	`>`
`164`	`165`	`<div`
`165`	`166`	className={`flex h-full w-9 items-center justify-center ${
`166`		`- isSelected ? 'bg-white/10' : 'bg-transparent group-hover:bg-white/5'`
	`167`	`+ isSelected`
	`168`	`+ ? 'bg-white/10'`
	`169`	`+ : 'bg-transparent group-hover:bg-white/5'`
`167`	`170`	}`}
`168`	`171`	`>`
`169`	`172`	`<p className="text-sm text-white/70">{index + 1}</p>`