Clean up eslint findings and enforce lint on PRs

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm lint

src/features/editor/AtlasFloat.tsx

@@ -35,6 +35,7 @@ export const AtlasFloat = ({ open, onClose }: Props): React.JSX.Element => {
   const atlasEfficiency = useStore((state) => state.atlasEfficiency);
   const setAtlasResult = useStore((state) => state.setAtlasResult);
   const exportSelection = useStore((state) => state.exportSelection);
+  const addToast = useStore((state) => state.addToast);
 
   const { packAtlas } = useAtlas();
 
@@ -67,7 +68,7 @@ export const AtlasFloat = ({ open, onClose }: Props): React.JSX.Element => {
       );
 
       if (unpacked.length > 0) {
-        console.warn(`${unpacked.length} glyphs did not fit in atlas`);
+        addToast(`${unpacked.length} glyphs did not fit in atlas`, 'error');
       }
 
       setAtlasResult(placements, imageData, packedWidth, packedHeight, efficiency);

src/features/editor/glyph-list/GlyphList.tsx

@@ -395,7 +395,7 @@ export const GlyphList = ({
                         max={255}
                         step={1}
                         onValueChange={(value: number | readonly number[]) => {
-                          const next = Array.isArray(value) ? value[0] : value;
+                          const next = typeof value === 'number' ? value : value[0];
 
                           setGlyphAlphaThreshold(glyph, next);
                         }}

src/features/editor/toolbar/EditorToolbar.tsx

@@ -141,7 +141,7 @@ export const EditorToolbar = ({
                     return;
                   }
 
-                  const next = Array.isArray(value) ? value[0] : value;
+                  const next = typeof value === 'number' ? value : value[0];
                   const settings = { ...currentProject.settings, alphaThreshold: next };
 
                   updateCurrentProject({ settings });

src/features/home/PaddingFields.tsx

@@ -1,32 +1,8 @@
 import React from 'react';
 
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-const PaddingInput = ({
-  label,
-  value,
-  onChange,
-}: {
-  label: string;
-  value: number;
-  onChange: (value: number) => void;
-}): React.JSX.Element => (
-  <div className="grid gap-1">
-    <span className="text-muted-foreground text-[10px]">{label}</span>
-    <div className="flex items-center gap-1">
-      <Input
-        className="w-20"
-        type="number"
-        min={0}
-        max={16}
-        value={value}
-        onChange={(event) => onChange(Number(event.target.value))}
-      />
-      <span className="text-muted-foreground text-[10px]">px</span>
-    </div>
-  </div>
-);
+import { PixelInput } from './PixelInput';
 
 export const PaddingFields = ({
   top,
@@ -53,13 +29,13 @@ export const PaddingFields = ({
       <p className="text-muted-foreground text-xs">Extra space around each glyph.</p>
       <div className="mt-2 grid w-fit grid-cols-3 gap-2">
         <div />
-        <PaddingInput label="Top" value={top} onChange={onTopChange} />
+        <PixelInput label="Top" value={top} onChange={onTopChange} />
         <div />
-        <PaddingInput label="Left" value={left} onChange={onLeftChange} />
+        <PixelInput label="Left" value={left} onChange={onLeftChange} />
         <div />
-        <PaddingInput label="Right" value={right} onChange={onRightChange} />
+        <PixelInput label="Right" value={right} onChange={onRightChange} />
         <div />
-        <PaddingInput label="Bottom" value={bottom} onChange={onBottomChange} />
+        <PixelInput label="Bottom" value={bottom} onChange={onBottomChange} />
         <div />
       </div>
     </div>

src/features/home/PixelInput.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Input } from '@/components/ui/input';
+
+export const PixelInput = ({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+}): React.JSX.Element => (
+  <div className="grid gap-1">
+    <span className="text-muted-foreground text-[10px]">{label}</span>
+    <div className="flex items-center gap-1">
+      <Input
+        className="w-20"
+        type="number"
+        min={0}
+        max={16}
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+      <span className="text-muted-foreground text-[10px]">px</span>
+    </div>
+  </div>
+);

src/features/home/SpacingFields.tsx

@@ -1,32 +1,8 @@
 import React from 'react';
 
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-const SpacingInput = ({
-  label,
-  value,
-  onChange,
-}: {
-  label: string;
-  value: number;
-  onChange: (value: number) => void;
-}): React.JSX.Element => (
-  <div className="grid gap-1">
-    <span className="text-muted-foreground text-[10px]">{label}</span>
-    <div className="flex items-center gap-1">
-      <Input
-        className="w-20"
-        type="number"
-        min={0}
-        max={16}
-        value={value}
-        onChange={(event) => onChange(Number(event.target.value))}
-      />
-      <span className="text-muted-foreground text-[10px]">px</span>
-    </div>
-  </div>
-);
+import { PixelInput } from './PixelInput';
 
 export const SpacingFields = ({
   x,
@@ -44,8 +20,8 @@ export const SpacingFields = ({
       <Label>Spacing</Label>
       <p className="text-muted-foreground text-xs">Extra gap between glyphs in the atlas.</p>
       <div className="mt-2 flex gap-2">
-        <SpacingInput label="Horizontal" value={x} onChange={onXChange} />
-        <SpacingInput label="Vertical" value={y} onChange={onYChange} />
+        <PixelInput label="Horizontal" value={x} onChange={onXChange} />
+        <PixelInput label="Vertical" value={y} onChange={onYChange} />
       </div>
     </div>
   );

src/main.tsx

@@ -11,8 +11,10 @@ import App from './App.tsx';
 document.documentElement.classList.add('dark');
 
 const spaRedirect = sessionStorage.getItem('spa-redirect');
+
 if (spaRedirect) {
   sessionStorage.removeItem('spa-redirect');
+
   if (spaRedirect.startsWith(import.meta.env.BASE_URL)) {
     history.replaceState(null, '', spaRedirect);
   }