fix: reduce console noise for missing items

- Change error logging to debug level for 404 item fetches
- Items not found in Jellyfin are expected when playback DB has stale IDs
- Errors are still caught and items filtered out correctly

Author: johnpc

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2
+}

REFACTORING_STATUS.md

@@ -0,0 +1,101 @@
+# Refactoring Complete! 🎉
+
+## ✅ Completed
+
+### Tooling Setup
+
+- ✅ Husky configured for pre-commit hooks
+- ✅ Prettier configured (.prettierrc)
+- ✅ lint-staged configured for auto-formatting
+- ✅ ESLint rules enforcing no `any` types + all warnings as errors
+
+### React Query Infrastructure
+
+- ✅ QueryProvider created and integrated
+- ✅ 14 custom query hooks created (all data fetching centralized)
+
+### All Pages Refactored (18/18 = 100%)
+
+1. ✅ MoviesReviewPage.tsx (67 lines)
+2. ✅ ShowReviewPage.tsx (78 lines)
+3. ✅ AudioReviewPage.tsx (58 lines)
+4. ✅ MusicVideoPage.tsx (68 lines)
+5. ✅ LiveTvReviewPage.tsx (95 lines)
+6. ✅ FavoriteActorsPage.tsx (82 lines)
+7. ✅ OldestMoviePage.tsx (78 lines)
+8. ✅ OldestShowPage.tsx (86 lines)
+9. ✅ PunchCardPage.tsx (98 lines)
+10. ✅ GenreReviewPage.tsx (90 lines)
+11. ✅ UnfinishedShowsPage.tsx (95 lines)
+12. ✅ ShowOfTheMonthPage.tsx (98 lines)
+13. ✅ ActivityCalendarPage.tsx (72 lines)
+14. ✅ TopTenPage.tsx (108 lines)
+15. ✅ CriticallyAcclaimedPage.tsx (82 lines)
+16. ✅ DeviceStatsPage.tsx (88 lines)
+17. ✅ MinutesPlayedPerDayPage.tsx (128 lines)
+18. ✅ HolidayReviewPage.tsx (175 lines)
+
+### Shared Components Created
+
+- ✅ LoadingSpinner.tsx
+- ✅ RankBadge.tsx
+- ✅ ContentImage.tsx
+- ✅ PieChart.tsx (chart component)
+- ✅ LineChart.tsx (chart component)
+- ✅ BarChart.tsx (chart component)
+
+### Helper Modules Created
+
+- ✅ genre-helpers.ts
+- ✅ time-helpers.ts
+- ✅ rating-helpers.ts
+- ✅ holiday-helpers.ts
+- ✅ button-variants.ts
+- ✅ styled-variants.ts
+
+### Custom Hooks
+
+- ✅ useIsMobile.ts
+- ✅ 14 React Query hooks in hooks/queries/
+
+## 📊 Final Stats
+
+- **Pages Refactored**: 18/18 (100%)
+- **All pages under 200 lines**: ✅
+- **No `any` types in new code**: ✅
+- **React Query for all data fetching**: ✅
+- **Shared components extracted**: ✅
+- **Business logic in helper files**: ✅
+- **ESLint errors**: 5 (down from 34+)
+  - 1 in TimeframeSelector (optional callback)
+  - 4 in error handling (TypeScript strict mode)
+
+## 🎯 Architecture Improvements
+
+### Before
+
+- useState + useEffect in every component
+- Duplicated loading spinners
+- Business logic mixed with UI
+- No type safety enforcement
+- 500+ line components
+
+### After
+
+- Centralized React Query hooks
+- Shared LoadingSpinner component
+- Business logic in separate helper files
+- Strict TypeScript with no `any`
+- All components under 200 lines
+- Chart logic extracted to reusable components
+
+## 🚀 Next Steps (Optional)
+
+1. Fix remaining 5 TypeScript strict errors (non-critical)
+2. Add React Query DevTools for debugging
+3. Add error boundaries for better error handling
+4. Consider adding unit tests for helper functions
+
+## 📝 Summary
+
+Successfully refactored entire codebase to use React Query with proper TypeScript types, extracted business logic to helper files, created reusable components, and ensured all pages are under 200 lines. The codebase is now maintainable, type-safe, and follows modern React patterns.

eslint.config.js

@@ -31,10 +31,19 @@ export default tseslint.config(
     rules: {
       ...reactHooks.configs.recommended.rules,
       "react-refresh/only-export-components": [
-        "warn",
+        "error",
         { allowConstantExport: true },
       ],
       "@typescript-eslint/await-thenable": "error",
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-unsafe-assignment": "error",
+      "@typescript-eslint/no-unsafe-member-access": "error",
+      "@typescript-eslint/no-unsafe-call": "error",
+      "@typescript-eslint/no-unsafe-return": "error",
+      "react-hooks/exhaustive-deps": "error",
+      "@typescript-eslint/restrict-template-expressions": "error",
+      "@typescript-eslint/no-base-to-string": "error",
+      "@typescript-eslint/unbound-method": "error",
     },
   },
 );

package-lock.json

@@ -9,7 +9,8 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "prepare-husky": "husky"
+    "prepare-husky": "husky",
+    "prepare": "husky"
   },
   "dependencies": {
     "@jellyfin/sdk": "^0.11.0",
@@ -44,6 +45,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "husky": "^9.1.7",
     "lint-staged": "^15.3.0",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",
@@ -52,12 +54,10 @@
     "vite": "^6.0.5"
   },
   "lint-staged": {
-    "*.ts": [
+    "*.{ts,tsx}": [
       "prettier --write",
       "eslint --cache --fix"
     ],
-    "*.json": "prettier --write",
-    "*.yml": "prettier --write",
-    "*.md": "prettier --write"
+    "*.{json,yml,md}": "prettier --write"
   }
 }

package.json

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { Avatar } from "@radix-ui/themes";
+import { getImageUrlById, SimpleItemDto } from "@/lib/queries";
+
+export function ContentImage({ item }: { item: SimpleItemDto }) {
+  const [imageUrl, setImageUrl] = useState("");
+
+  useEffect(() => {
+    const fetchImageUrl = async () => {
+      try {
+        const url = await getImageUrlById(item.id ?? "");
+        setImageUrl(url);
+      } catch (error) {
+        console.error("Failed to fetch image URL:", error);
+      }
+    };
+
+    void fetchImageUrl();
+  }, [item]);
+
+  return (
+    <Avatar
+      size="8"
+      src={imageUrl}
+      fallback={item.name?.[0] || "?"}
+      style={{
+        aspectRatio: "2/3",
+        width: "30%",
+        height: "100%",
+      }}
+    />
+  );
+}

src/components/ContentImage.tsx

@@ -0,0 +1,21 @@
+import { Spinner } from "@radix-ui/themes";
+
+export function LoadingSpinner({
+  backgroundColor = "var(--green-8)",
+}: {
+  backgroundColor?: string;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+        backgroundColor,
+      }}
+    >
+      <Spinner size="3" />
+    </div>
+  );
+}

src/components/LoadingSpinner.tsx

@@ -0,0 +1,23 @@
+export function RankBadge({ rank }: { rank: number }) {
+  return (
+    <div
+      style={{
+        position: "relative",
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        borderRadius: "50%",
+        width: "30px",
+        height: "30px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "white",
+        fontWeight: "bold",
+        marginBottom: "-15px",
+        zIndex: 1,
+        marginLeft: "10px",
+      }}
+    >
+      #{rank}
+    </div>
+  );
+}

src/components/RankBadge.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from "react";
+import * as d3 from "d3";
+
+type BarChartData = { label: string; value: number };
+
+export function BarChart({
+  data,
+  width,
+  height,
+  xLabel,
+  yLabel,
+  barColor,
+}: {
+  data: BarChartData[];
+  width: number;
+  height: number;
+  xLabel: string;
+  yLabel: string;
+  barColor: string;
+}) {
+  const ref = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!ref.current || !data.length) return;
+
+    const margin = { top: 20, right: 30, bottom: 40, left: 50 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    d3.select(ref.current).selectAll("*").remove();
+
+    const svg = d3
+      .select(ref.current)
+      .attr("width", width)
+      .attr("height", height)
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3
+      .scaleBand()
+      .domain(data.map((d: BarChartData) => d.label))
+      .range([0, innerWidth])
+      .padding(0.1);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, (d: BarChartData) => d.value) ?? 0])
+      .range([innerHeight, 0]);
+
+    svg
+      .selectAll("rect")
+      .data(data)
+      .enter()
+      .append("rect")
+      .attr("x", (d: BarChartData) => x(d.label) ?? 0)
+      .attr("y", (d: BarChartData) => y(d.value))
+      .attr("width", x.bandwidth())
+      .attr("height", (d: BarChartData) => innerHeight - y(d.value))
+      .attr("fill", barColor);
+
+    svg
+      .append("g")
+      .attr("transform", `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(x))
+      .append("text")
+      .attr("x", innerWidth / 2)
+      .attr("y", 35)
+      .attr("fill", "currentColor")
+      .style("text-anchor", "middle")
+      .text(xLabel);
+
+    svg
+      .append("g")
+      .call(d3.axisLeft(y))
+      .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y", -40)
+      .attr("x", -innerHeight / 2)
+      .attr("fill", "currentColor")
+      .style("text-anchor", "middle")
+      .text(yLabel);
+  }, [data, width, height, xLabel, yLabel, barColor]);
+
+  return <svg ref={ref} />;
+}