fix: resolve linting issues in theme creator and previews

google-labs-jules[bot] · claudemyburgh · google-labs-jules[bot] · commit d79911af534e · 2026-06-05T21:55:01.000Z
- Removed unused imports (`Check`, `Head`, `useCallback`) and variables (`onTooltipOpenChange`, `kind`).
- Added missing dependency (`setSidebarWidth`) to `useEffect` in `create.tsx`.
- Applied automated linting and formatting fixes across multiple files to satisfy CI checks.

Co-authored-by: claudemyburgh &lt;6057076+claudemyburgh@users.noreply.github.com&gt;
diff --git a/resources/js/components/app/newsletter-dialog.tsx b/resources/js/components/app/newsletter-dialog.tsx
@@ -1,5 +1,6 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form } from '@inertiajs/react';
 import { Mail } from 'lucide-react';
+import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -11,7 +12,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
-import InputError from '@/components/input-error';
 import { subscribe } from '@/routes/newsletter';
 
 interface NewsletterDialogProps {
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
@@ -1,6 +1,5 @@
 import { Form } from '@inertiajs/react';
 import { useRef } from 'react';
-import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 import Heading from '@/components/heading';
 import InputError from '@/components/input-error';
 import PasswordInput from '@/components/password-input';
@@ -15,6 +14,7 @@ import {
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 
 export default function DeleteUser() {
     const passwordInput = useRef<HTMLInputElement>(null);
diff --git a/resources/js/components/preview/cards-preview.tsx b/resources/js/components/preview/cards-preview.tsx
@@ -1,5 +1,5 @@
 import { ChevronDown, Sparkles, Terminal } from 'lucide-react';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import {
     Bar,
     BarChart,
@@ -91,7 +91,6 @@ const chartData = [
 
 export default function CardsPreview({ ...props }) {
     const [date, setDate] = useState<Date | undefined>(new Date());
-    const onTooltipOpenChange = useCallback(() => {}, []);
 
     return (
         <div
diff --git a/resources/js/components/themes/color-controls.tsx b/resources/js/components/themes/color-controls.tsx
@@ -1,17 +1,17 @@
 import { Sparkles } from 'lucide-react';
+import { memo } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { PALETTE_PRESETS } from './pallets-preset';
 import {
     derivePaletteFromPrimary,
     hexToTokenValue,
     tokenValueToHex,
 } from '@/lib/theme/color';
 import { TOKEN_GROUPS } from '@/lib/theme/defaults';
 import { useThemeStore } from '@/lib/theme/store';
-import { memo } from 'react';
+import { PALETTE_PRESETS } from './pallets-preset';
 
 export function ColorControls() {
     const { light, dark, setToken, setManyTokens } = useThemeStore();
diff --git a/resources/js/components/themes/controls-panel.tsx b/resources/js/components/themes/controls-panel.tsx
@@ -1,6 +1,6 @@
+import { usePage } from '@inertiajs/react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useThemeStore } from '@/lib/theme/store';
-import { usePage } from '@inertiajs/react';
 import { ColorControls } from './color-controls';
 import { RadiusControls } from './raduis-controles';
 import ThemeInfo from './theme-info';
diff --git a/resources/js/components/themes/export-dialog.tsx b/resources/js/components/themes/export-dialog.tsx
@@ -1,8 +1,5 @@
-import { useThemeStore } from '@/lib/theme/store';
-import {
-    generateIndexCss,
-    generateTailwindSnippet,
-} from '@/lib/theme/css-export';
+import { Download, FileCode } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
@@ -11,9 +8,12 @@ import {
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Button } from '@/components/ui/button';
-import { Download, FileCode } from 'lucide-react';
 import { MainCodeBlock } from '@/layouts/main/theme/main-code-block';
+import {
+    generateIndexCss,
+    generateTailwindSnippet,
+} from '@/lib/theme/css-export';
+import { useThemeStore } from '@/lib/theme/store';
 
 export function ExportDialog() {
     const state = useThemeStore();
diff --git a/resources/js/components/themes/raduis-controles.tsx b/resources/js/components/themes/raduis-controles.tsx
@@ -1,9 +1,10 @@
-import { useThemeStore } from '@/lib/theme/store';
 import { Label } from '@/components/ui/label';
 import { Slider } from '@/components/ui/slider';
+import { useThemeStore } from '@/lib/theme/store';
 
 export function RadiusControls() {
     const { radius, setRadius } = useThemeStore();
+
     return (
         <div className="space-y-3">
             <div className="flex items-center justify-between">
diff --git a/resources/js/components/themes/theme-preview.tsx b/resources/js/components/themes/theme-preview.tsx
@@ -1,9 +1,9 @@
-import { useThemeStore } from '@/lib/theme/store';
-import { tokenValueToCss } from '@/lib/theme/color';
-import { Button } from '@/components/ui/button';
 import { Sun, Moon } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import CardsPreview from '@/components/preview/cards-preview';
+import { Button } from '@/components/ui/button';
+import { tokenValueToCss } from '@/lib/theme/color';
+import { useThemeStore } from '@/lib/theme/store';
 
 const COLOR_TOKENS = [
     'background', 'foreground',
@@ -27,6 +27,7 @@ function buildVars(
 
     for (const token of COLOR_TOKENS) {
         const val = colors[token];
+
         if (val) {
             const css = tokenValueToCss(val);
             vars[`--${token}`] = css;
diff --git a/resources/js/components/themes/typography-controls.tsx b/resources/js/components/themes/typography-controls.tsx
@@ -7,14 +7,14 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { useThemeStore } from '@/lib/theme/store';
 import {
     loadGoogleFont,
     MONO_FONTS,
     SANS_FONTS,
     SERIF_FONTS,
 } from './font-list';
-import { Slider } from '@/components/ui/slider';
-import { useThemeStore } from '@/lib/theme/store';
 
 const SCALES = [
     { name: 'Minor Second', value: 1.067 },
@@ -129,13 +129,11 @@ export function TypographyControls() {
 }
 
 function FontSelect({
-    kind,
     label,
     options,
     value,
     onChange,
 }: {
-    kind: string;
     label: string;
     options: string[];
     value: string;
diff --git a/resources/js/layouts/main/main-footer.tsx b/resources/js/layouts/main/main-footer.tsx
@@ -1,11 +1,11 @@
 import { Link } from '@inertiajs/react';
 import { GithubIcon } from 'lucide-react';
 
+import XIcon from '@/components/icons/x-icon';
 import { Button } from '@/components/ui/button';
 import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
 import MainWrapper from '@/layouts/main/main-wrapper';
 import { home } from '@/routes';
-import XIcon from '@/components/icons/x-icon';
 
 const navLinks = [
     { href: '#', label: 'Features' },
diff --git a/resources/js/layouts/main/theme/main-theme-card.tsx b/resources/js/layouts/main/theme/main-theme-card.tsx
@@ -1,4 +1,5 @@
-import { motion, type Variants } from 'motion/react';
+import { motion  } from 'motion/react';
+import type {Variants} from 'motion/react';
 import {
     Card,
     CardContent,
diff --git a/resources/js/layouts/main/theme/main-theme-search.tsx b/resources/js/layouts/main/theme/main-theme-search.tsx
@@ -48,7 +48,9 @@ function MainThemeSearch({
     }, [debouncedSearch, selectedTags]);
 
     useEffect(() => {
-        if (!showFilters) return;
+        if (!showFilters) {
+return;
+}
 
         const handler = (e: MouseEvent) => {
             if (
diff --git a/resources/js/lib/theme/color.ts b/resources/js/lib/theme/color.ts
@@ -5,12 +5,21 @@ const toOklch = converter('oklch');
 // Convert hex (#rrggbb) -> "L C H" string used as token value.
 export function hexToTokenValue(hex: string): string {
     const parsed = parse(hex);
-    if (!parsed) return '0 0 0';
+
+    if (!parsed) {
+return '0 0 0';
+}
+
     const o = toOklch(parsed);
-    if (!o) return '0 0 0';
+
+    if (!o) {
+return '0 0 0';
+}
+
     const L = round(o.l ?? 0, 3);
     const C = round(o.c ?? 0, 3);
     const H = round(o.h ?? 0, 3);
+
     return `${L} ${C} ${H}`;
 }
 
@@ -19,6 +28,7 @@ export function tokenValueToHex(value: string): string {
     const clean = value.split('/')[0].trim();
     const [l, c, h] = clean.split(/\s+/).map(Number);
     const hex = formatHex({ mode: 'oklch', l: l || 0, c: c || 0, h: h || 0 });
+
     return hex ?? '#000000';
 }
 
@@ -27,11 +37,13 @@ export function tokenValueToCss(value: string): string {
         // pass through alpha syntax
         return `oklch(${value})`;
     }
+
     return `oklch(${value})`;
 }
 
 function round(n: number, d: number) {
     const f = Math.pow(10, d);
+
     return Math.round(n * f) / f;
 }
 
@@ -41,9 +53,17 @@ export function derivePaletteFromPrimary(
     dark: boolean,
 ): Record<string, string> {
     const parsed = parse(hex);
-    if (!parsed) return {};
+
+    if (!parsed) {
+return {};
+}
+
     const o = toOklch(parsed);
-    if (!o) return {};
+
+    if (!o) {
+return {};
+}
+
     const h = o.h ?? 250;
     const c = o.c ?? 0.05;
 
@@ -68,6 +88,7 @@ export function derivePaletteFromPrimary(
             ring: `${o.l} ${c} ${h}`,
         };
     }
+
     return {
         background: `1 0 0`,
         foreground: `0.16 0.02 ${h}`,
diff --git a/resources/js/lib/theme/css-export.ts b/resources/js/lib/theme/css-export.ts
@@ -4,31 +4,43 @@ const toOklch = converter('oklch');
 
 export function hexToTokenValue(hex: string): string {
     const parsed = parse(hex);
-    if (!parsed) return '0 0 0';
+
+    if (!parsed) {
+return '0 0 0';
+}
+
     const o = toOklch(parsed);
-    if (!o) return '0 0 0';
+
+    if (!o) {
+return '0 0 0';
+}
+
     const L = round(o.l ?? 0, 3);
     const C = round(o.c ?? 0, 3);
     const H = round(o.h ?? 0, 3);
+
     return `${L} ${C} ${H}`;
 }
 
 export function tokenValueToHex(value: string): string {
     const clean = value.split('/')[0].trim();
     const [l, c, h] = clean.split(/\s+/).map(Number);
     const hex = formatHex({ mode: 'oklch', l: l || 0, c: c || 0, h: h || 0 });
+
     return hex ?? '#000000';
 }
 
 export function tokenValueToCss(value: string): string {
     if (value.includes('/')) {
         return `oklch(${value})`;
     }
+
     return `oklch(${value})`;
 }
 
 function round(n: number, d: number) {
     const f = Math.pow(10, d);
+
     return Math.round(n * f) / f;
 }
 
@@ -37,9 +49,17 @@ export function derivePaletteFromPrimary(
     dark: boolean,
 ): Record<string, string> {
     const parsed = parse(hex);
-    if (!parsed) return {};
+
+    if (!parsed) {
+return {};
+}
+
     const o = toOklch(parsed);
-    if (!o) return {};
+
+    if (!o) {
+return {};
+}
+
     const h = o.h ?? 250;
     const c = o.c ?? 0.05;
 
@@ -64,6 +84,7 @@ export function derivePaletteFromPrimary(
             ring: `${o.l} ${c} ${h}`,
         };
     }
+
     return {
         background: `1 0 0`,
         foreground: `0.16 0.02 ${h}`,
@@ -110,7 +131,11 @@ export function generateIndexCss(state: {
         const lines = entries.map(
             ([k, v]) => `    ${toVar(k)}: ${toColor(v)};`,
         );
-        if (extra) lines.push(extra);
+
+        if (extra) {
+lines.push(extra);
+}
+
         return `${selector} {\n${lines.join('\n')}\n}`;
     };
 
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
@@ -1,5 +1,4 @@
 import { Form, Head, Link, usePage } from '@inertiajs/react';
-import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 import DeleteUser from '@/components/delete-user';
 import Heading from '@/components/heading';
 import InputError from '@/components/input-error';
@@ -8,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { edit } from '@/routes/profile';
 import { send } from '@/routes/verification';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 
 export default function Profile({
     mustVerifyEmail,
diff --git a/resources/js/pages/settings/security.tsx b/resources/js/pages/settings/security.tsx
@@ -1,7 +1,6 @@
 import { Form, Head } from '@inertiajs/react';
 import { ShieldCheck } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
 import Heading from '@/components/heading';
 import InputError from '@/components/input-error';
 import PasswordInput from '@/components/password-input';
@@ -12,6 +11,7 @@ import { Label } from '@/components/ui/label';
 import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth';
 import { edit } from '@/routes/security';
 import { disable, enable } from '@/routes/two-factor';
+import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
 
 type Props = {
     canManageTwoFactor?: boolean;
diff --git a/resources/js/pages/themes/create.tsx b/resources/js/pages/themes/create.tsx
diff --git a/resources/js/store/theme.ts b/resources/js/store/theme.ts
