feat: pref for image quality

package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toast": "1.1.5",
     "@types/mongoose": "5.11.97",
     "class-variance-authority": "0.7.0",

src/app/api/preferences/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PreferencesService } from "@/lib/services/preferences.service";
+
+export async function GET() {
+  try {
+    const preferences = await PreferencesService.getPreferences();
+    return NextResponse.json(preferences);
+  } catch (error) {
+    console.error("Erreur lors de la récupération des préférences:", error);
+    return new NextResponse("Erreur lors de la récupération des préférences", { status: 500 });
+  }
+}
+
+export async function PUT(request: NextRequest) {
+  try {
+    const preferences = await request.json();
+    const updatedPreferences = await PreferencesService.updatePreferences(preferences);
+    return NextResponse.json(updatedPreferences);
+  } catch (error) {
+    console.error("Erreur lors de la mise à jour des préférences:", error);
+    return new NextResponse("Erreur lors de la mise à jour des préférences", { status: 500 });
+  }
+}

src/components/layout/ClientLayout.tsx

@@ -8,6 +8,7 @@ import { InstallPWA } from "../ui/InstallPWA";
 import { Toaster } from "@/components/ui/toaster";
 import { usePathname, useRouter } from "next/navigation";
 import { authService } from "@/lib/services/auth.service";
+import { PreferencesProvider } from "@/contexts/PreferencesContext";
 
 // Routes qui ne nécessitent pas d'authentification
 const publicRoutes = ["/login", "/register"];
@@ -69,6 +70,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <PreferencesProvider>
         <div className="relative min-h-screen">
           {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
           {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
@@ -76,6 +78,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
           <InstallPWA />
           <Toaster />
         </div>
+      </PreferencesProvider>
     </ThemeProvider>
   );
 }

src/components/settings/ClientSettings.tsx

@@ -5,6 +5,9 @@ import { Loader2, Network, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { AuthError } from "@/types/auth";
 import { useToast } from "@/components/ui/use-toast";
+import { usePreferences } from "@/contexts/PreferencesContext";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 
 interface ErrorMessage {
   message: string;
@@ -54,6 +57,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
       imagesTTL: 1440,
     }
   );
+  const { preferences, updatePreferences } = usePreferences();
 
   const handleClearCache = async () => {
     setIsCacheClearing(true);
@@ -241,6 +245,22 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
     }
   };
 
+  const handleToggleThumbnails = async (checked: boolean) => {
+    try {
+      await updatePreferences({ showThumbnails: checked });
+      toast({
+        title: "Préférences sauvegardées",
+        description: "Les préférences ont été mises à jour avec succès",
+      });
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Une erreur est survenue lors de la mise à jour des préférences",
+      });
+    }
+  };
+
   return (
     <div className="container max-w-3xl mx-auto py-8 space-y-6">
       <div className="flex items-center justify-between">
@@ -260,6 +280,36 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
       )}
 
       <div className="grid gap-6">
+        {/* Section Préférences d'affichage */}
+        <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+          <div className="p-5 space-y-4">
+            <div>
+              <h2 className="text-xl font-semibold flex items-center gap-2">
+                Préférences d'affichage
+              </h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Personnalisez l'affichage de votre bibliothèque.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="thumbnails">Afficher les vignettes</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Utiliser les vignettes au lieu des premières pages pour l'affichage des séries
+                  </p>
+                </div>
+                <Switch
+                  id="thumbnails"
+                  checked={preferences.showThumbnails}
+                  onCheckedChange={handleToggleThumbnails}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Section Configuration Komga */}
         <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
           <div className="p-5 space-y-4">

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

src/contexts/PreferencesContext.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { UserPreferences } from "@/lib/services/preferences.service";
+
+interface PreferencesContextType {
+  preferences: UserPreferences;
+  updatePreferences: (newPreferences: Partial<UserPreferences>) => Promise<void>;
+  isLoading: boolean;
+}
+
+const PreferencesContext = createContext<PreferencesContextType | undefined>(undefined);
+
+export function PreferencesProvider({ children }: { children: React.ReactNode }) {
+  const [preferences, setPreferences] = useState<UserPreferences>({
+    showThumbnails: false,
+  });
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPreferences = async () => {
+      try {
+        const response = await fetch("/api/preferences");
+        if (!response.ok) throw new Error("Erreur lors de la récupération des préférences");
+        const data = await response.json();
+        setPreferences(data);
+      } catch (error) {
+        console.error("Erreur lors de la récupération des préférences:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPreferences();
+  }, []);
+
+  const updatePreferences = async (newPreferences: Partial<UserPreferences>) => {
+    try {
+      const response = await fetch("/api/preferences", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(newPreferences),
+      });
+
+      if (!response.ok) throw new Error("Erreur lors de la mise à jour des préférences");
+
+      const updatedPreferences = await response.json();
+      setPreferences(updatedPreferences);
+    } catch (error) {
+      console.error("Erreur lors de la mise à jour des préférences:", error);
+      throw error;
+    }
+  };
+
+  return (
+    <PreferencesContext.Provider value={{ preferences, updatePreferences, isLoading }}>
+      {children}
+    </PreferencesContext.Provider>
+  );
+}
+
+export function usePreferences() {
+  const context = useContext(PreferencesContext);
+  if (context === undefined) {
+    throw new Error("usePreferences must be used within a PreferencesProvider");
+  }
+  return context;
+}

src/lib/models/preferences.model.ts

@@ -0,0 +1,21 @@
+import mongoose from "mongoose";
+
+const preferencesSchema = new mongoose.Schema(
+  {
+    userId: {
+      type: String,
+      required: true,
+      unique: true,
+    },
+    showThumbnails: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  {
+    timestamps: true,
+  }
+);
+
+export const PreferencesModel =
+  mongoose.models.Preferences || mongoose.model("Preferences", preferencesSchema);

src/lib/services/book.service.ts

@@ -1,6 +1,7 @@
 import { BaseApiService } from "./base-api.service";
 import { KomgaBook } from "@/types/komga";
 import { ImageService } from "./image.service";
+import { PreferencesService } from "./preferences.service";
 
 export class BookService extends BaseApiService {
   static async getBook(bookId: string): Promise<{ book: KomgaBook; pages: number[] }> {
@@ -66,6 +67,14 @@ export class BookService extends BaseApiService {
 
   static async getPage(bookId: string, pageNumber: number): Promise<Response> {
     try {
+      // Récupérer les préférences de l'utilisateur
+      const preferences = await PreferencesService.getPreferences();
+
+      // Si l'utilisateur préfère les vignettes, utiliser getPageThumbnail
+      if (preferences.showThumbnails) {
+        return this.getPageThumbnail(bookId, pageNumber);
+      }
+
       // Ajuster le numéro de page pour l'API Komga (zero-based)
       const adjustedPageNumber = pageNumber - 1;
       const response = await ImageService.getImage(
@@ -91,6 +100,7 @@ export class BookService extends BaseApiService {
       return new Response(response.buffer, {
         headers: {
           "Content-Type": response.contentType || "image/jpeg",
+          "Cache-Control": "public, max-age=31536000, immutable",
         },
       });
     } catch (error) {

src/lib/services/preferences.service.ts

@@ -0,0 +1,65 @@
+import { cookies } from "next/headers";
+import connectDB from "@/lib/mongodb";
+import { PreferencesModel } from "@/lib/models/preferences.model";
+
+interface User {
+  id: string;
+  email: string;
+}
+
+export interface UserPreferences {
+  showThumbnails: boolean;
+}
+
+export class PreferencesService {
+  private static async getCurrentUser(): Promise<User> {
+    const userCookie = cookies().get("stripUser");
+
+    if (!userCookie) {
+      throw new Error("Utilisateur non authentifié");
+    }
+
+    try {
+      return JSON.parse(atob(userCookie.value));
+    } catch (error) {
+      console.error("Erreur lors de la récupération de l'utilisateur depuis le cookie:", error);
+      throw new Error("Utilisateur non authentifié");
+    }
+  }
+
+  static async getPreferences(): Promise<UserPreferences> {
+    await connectDB();
+    const user = await this.getCurrentUser();
+
+    const preferences = await PreferencesModel.findOne({ userId: user.id });
+    if (!preferences) {
+      // Créer les préférences par défaut si elles n'existent pas
+      const defaultPreferences = await PreferencesModel.create({
+        userId: user.id,
+        showThumbnails: false,
+      });
+      return {
+        showThumbnails: defaultPreferences.showThumbnails,
+      };
+    }
+
+    return {
+      showThumbnails: preferences.showThumbnails,
+    };
+  }
+
+  static async updatePreferences(preferences: Partial<UserPreferences>): Promise<UserPreferences> {
+    await connectDB();
+    const user = await this.getCurrentUser();
+
+    const updatedPreferences = await PreferencesModel.findOneAndUpdate(
+      { userId: user.id },
+      { $set: preferences },
+      { new: true, upsert: true }
+    );
+
+    return {
+      showThumbnails: updatedPreferences.showThumbnails,
+    };
+  }
+}

src/lib/services/series.service.ts

@@ -3,6 +3,7 @@ import { LibraryResponse } from "@/types/library";
 import { KomgaBook, KomgaSeries } from "@/types/komga";
 import { BookService } from "./book.service";
 import { ImageService } from "./image.service";
+import { PreferencesService } from "./preferences.service";
 
 export class SeriesService extends BaseApiService {
   static async getSeries(seriesId: string): Promise<KomgaSeries> {
@@ -78,22 +79,20 @@ export class SeriesService extends BaseApiService {
 
   static async getFirstPage(seriesId: string): Promise<Response> {
     try {
-      // Récupérer l'ID du premier livre
+      // Récupérer les préférences de l'utilisateur
-      const firstBookId = await this.getFirstBook(seriesId);
+      const preferences = await PreferencesService.getPreferences();
-      return await BookService.getPage(firstBookId, 1);
+
-    } catch (error) {
+      // Si l'utilisateur préfère les vignettes, utiliser getThumbnail
-      // En cas d'erreur, on essaie de récupérer le thumbnail comme fallback
+      if (preferences.showThumbnails) {
-      try {
+        return this.getThumbnail(seriesId);
-        const response = await ImageService.getImage(`series/${seriesId}/thumbnail`);
-        return new Response(response.buffer, {
-          headers: {
-            "Content-Type": response.contentType || "image/jpeg",
-            "Cache-Control": "public, max-age=31536000, immutable",
-          },
-        });
-      } catch (fallbackError) {
-        throw this.handleError(fallbackError, "Impossible de récupérer l'image de la série");
       }
+
+      // Sinon, récupérer la première page
+      const firstBookId = await this.getFirstBook(seriesId);
+      const response = await BookService.getPage(firstBookId, 1);
+      return response;
+    } catch (error) {
+      throw this.handleError(error, "Impossible de récupérer la première page");
     }
   }
 

yarn.lock

@@ -363,6 +363,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
+  integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
+
 "@radix-ui/react-arrow@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@@ -389,6 +394,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
+  integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
+
 "@radix-ui/react-context@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
@@ -396,6 +406,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
+
 "@radix-ui/react-dialog@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
@@ -475,6 +490,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-label@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.1.2.tgz#994a5d815c2ff46e151410ae4e301f1b639f9971"
+  integrity sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.2"
+
 "@radix-ui/react-menu@2.0.6":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e"
@@ -542,6 +564,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-primitive@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef"
+  integrity sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.2"
+
 "@radix-ui/react-roving-focus@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
@@ -566,6 +595,26 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-slot@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"
+  integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.1"
+
+"@radix-ui/react-switch@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.3.tgz#cb6386909d1d3f65a2b81a3b15da8c91d18f49b0"
+  integrity sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/react-toast@1.1.5":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.5.tgz#f5788761c0142a5ae9eb97f0051fd3c48106d9e6"
@@ -592,6 +641,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
 "@radix-ui/react-use-controllable-state@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
@@ -600,6 +654,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-use-escape-keydown@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
@@ -615,6 +676,16 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
+"@radix-ui/react-use-previous@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
+
 "@radix-ui/react-use-rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
@@ -631,6 +702,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-use-size@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b"
+  integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-visually-hidden@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"