feat: add seerr

app/components/HomeElement.tsx

@@ -6,7 +6,7 @@ type HomeElementProps = {
   description: string;
   href?: string;
   actionLabel: string;
-  variant: "jellyfin" | "minecraft" | "astroneer";
+  variant: "jellyfin" | "seerr" | "minecraft" | "astroneer";
   external?: boolean;
   children: ReactNode;
 };
@@ -86,6 +86,33 @@ export function JellyfinIcon() {
   );
 }
 
+export function SeerrIcon() {
+  return (
+    <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
+      <defs>
+        <linearGradient id="seerr-gradient" x1="16" y1="82" x2="80" y2="14">
+          <stop stopColor="#ff6b8a" />
+          <stop offset="0.5" stopColor="#ffd166" />
+          <stop offset="1" stopColor="#6df4ff" />
+        </linearGradient>
+      </defs>
+      <rect
+        x="15"
+        y="22"
+        width="58"
+        height="48"
+        rx="8"
+        fill="none"
+        stroke="url(#seerr-gradient)"
+        strokeWidth="7"
+      />
+      <path d="m42 36 18 10-18 10z" fill="#ffd166" />
+      <circle cx="62" cy="62" r="14" fill="#10182e" stroke="#ff6b8a" strokeWidth="7" />
+      <path d="m72 72 10 10" stroke="#6df4ff" strokeLinecap="round" strokeWidth="7" />
+    </svg>
+  );
+}
+
 export function MinecraftIcon() {
   return (
     <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">

app/globals.css

@@ -193,7 +193,7 @@ svg {
   display: grid;
   width: min(1120px, 100%);
   margin-top: 48px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 32px;
 }
 
@@ -261,6 +261,14 @@ svg {
   color: #46ee89;
 }
 
+.service-card--seerr {
+  --service-accent: #ff6b8a;
+
+  border-color: #ff6b8a;
+  box-shadow: var(--shadow-hard), 0 0 28px rgb(255 107 138 / 30%), inset 0 0 0 1px rgb(255 255 255 / 9%);
+  color: #ff9aaa;
+}
+
 .service-card--astroneer {
   --service-accent: #ffb347;
 
@@ -360,6 +368,11 @@ svg {
   text-shadow: 0 2px 0 rgb(0 0 0 / 24%);
 }
 
+.service-card--seerr .service-action {
+  background: linear-gradient(180deg, #ffd166, #ff6b8a);
+  color: #170b14;
+}
+
 .service-card--minecraft .service-action {
   background: linear-gradient(180deg, #35f48a, #13ca69);
   color: #041411;

app/lib/server-config.ts

@@ -3,6 +3,7 @@ export const siteConfig = {
   title: "Le serveur de Leon",
   description: "Streaming, jeux et services privés au même endroit.",
   jellyfinUrl: "https://momostreaming.com",
+  seerrUrl: "https://seerr.leonmorival.xyz",
   minecraftPath: "/minecraft",
   astroneerPath: "/astroneer",
   apiUrl: process.env.NEXT_PUBLIC_API_URL,

app/page.tsx

@@ -3,6 +3,7 @@ import HomeElement, {
   AstroneerIcon,
   JellyfinIcon,
   MinecraftIcon,
+  SeerrIcon,
 } from "./components/HomeElement";
 import { astroneerServer, siteConfig } from "./lib/server-config";
 
@@ -34,6 +35,17 @@ export default function Home() {
             <JellyfinIcon />
           </HomeElement>
 
+          <HomeElement
+            title="Seerr"
+            description="Demandes de films et séries."
+            href={siteConfig.seerrUrl}
+            actionLabel="Ouvrir"
+            variant="seerr"
+            external
+          >
+            <SeerrIcon />
+          </HomeElement>
+
           <HomeElement
             title="Minecraft"
             description="Infos, statut et carte live du monde."