refactor(api): genres → src/api modules (Effort 1)

src/api/genres/types.ts

@@ -0,0 +1,8 @@
+export type Genre = {
+  id: string;
+  name: string;
+};
+
+export const genresKeys = {
+  all: () => ["genres"] as const,
+};

src/hooks/queries/genres/useCreateGenreMutation.ts → src/api/genres/useCreateGenreMutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
 import { useToast } from "@/components/ui/use-toast";
+import { genresKeys } from "./types";
 
 interface CreateGenreParams {
   name: string;
@@ -29,8 +30,7 @@ export function useCreateGenreMutation() {
       return data;
     },
     onSuccess: () => {
-      // Invalidate genres query if it exists
-      queryClient.invalidateQueries({ queryKey: ["genres"] });
+      queryClient.invalidateQueries({ queryKey: genresKeys.all() });
 
       toast({
         title: "Success",

src/hooks/queries/genres/useGenres.ts → src/api/genres/useGenres.ts

@@ -1,13 +1,8 @@
-import { useQuery } from "@tanstack/react-query";
+import { queryOptions, useQuery } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
+import { Genre, genresKeys } from "./types";
 
-// Query key factory
-export const genresKeys = {
-  all: ["genres"] as const,
-};
-
-// Business logic function
-async function fetchGenres(): Promise<Array<{ id: string; name: string }>> {
+export async function fetchGenres(): Promise<Genre[]> {
   const { data, error } = await supabase
     .from("music_genres")
     .select("id, name")
@@ -20,15 +15,18 @@ async function fetchGenres(): Promise<Array<{ id: string; name: string }>> {
   return data || [];
 }
 
-// Hook
-export function useGenresQuery() {
-  return useQuery({
-    queryKey: genresKeys.all,
+export function genresQuery() {
+  return queryOptions({
+    queryKey: genresKeys.all(),
     queryFn: fetchGenres,
-    staleTime: 10 * 60 * 1000, // 10 minutes - genres don't change often
+    staleTime: 10 * 60 * 1000,
   });
 }
 
+export function useGenresQuery() {
+  return useQuery(genresQuery());
+}
+
 export function useGenres() {
   const { data: genres = [], isLoading, error } = useGenresQuery();
 

src/components/GenreBadge.test.tsx

@@ -1,9 +1,9 @@
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { GenreBadge } from "./GenreBadge";
-import * as useGenresModule from "@/hooks/queries/genres/useGenres";
+import * as useGenresModule from "@/api/genres/useGenres";
 
-vi.mock("@/hooks/queries/genres/useGenres");
+vi.mock("@/api/genres/useGenres");
 
 describe("GenreBadge", () => {
   beforeEach(() => {

src/components/GenreBadge.tsx

@@ -1,5 +1,5 @@
 import { Badge } from "@/components/ui/badge";
-import { useGenres } from "@/hooks/queries/genres/useGenres";
+import { useGenres } from "@/api/genres/useGenres";
 
 interface GenreBadgeProps {
   genreId: string;

src/pages/EditionView/tabs/ArtistsTab/filters/FilterSortControls.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import type { SortOption, FilterSortState } from "@/hooks/useUrlState";
-import { useGenres } from "@/hooks/queries/genres/useGenres";
+import { useGenres } from "@/api/genres/useGenres";
 import { SortControls } from "./SortControls";
 import { MobileFilters } from "./MobileFilters";
 import { DesktopFilters } from "./DesktopFilters";

src/pages/admin/AddGenreDialog.tsx

@@ -1,5 +1,5 @@
 import { useForm } from "react-hook-form";
-import { useCreateGenreMutation } from "@/hooks/queries/genres/useCreateGenreMutation";
+import { useCreateGenreMutation } from "@/api/genres/useCreateGenreMutation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";

src/pages/admin/ArtistsManagement/AddArtistDialog.tsx

@@ -23,7 +23,7 @@ import {
 import { Music } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { useUserPermissionsQuery } from "@/hooks/queries/auth/useUserPermissions";
-import { useGenresQuery } from "@/hooks/queries/genres/useGenres";
+import { useGenresQuery } from "@/api/genres/useGenres";
 import { useCreateArtistMutation } from "@/hooks/queries/artists/useCreateArtist";
 import { useUpdateArtistMutation } from "@/hooks/queries/artists/useUpdateArtist";
 import { GenreMultiSelect } from "./GenreMultiSelect";

src/pages/admin/ArtistsManagement/BulkEditor/GenresCell.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { GenreMultiSelect } from "../GenreMultiSelect";
-import { useGenresQuery } from "@/hooks/queries/genres/useGenres";
+import { useGenresQuery } from "@/api/genres/useGenres";
 import { Check, X } from "lucide-react";
 
 interface GenresCellProps {