Move media server icons into settings and polish webhook card

Co-locate PlexIcon/JellyfinIcon under settings/_components/icons.tsx.
Update Plex icon to CoreUI Brands SVG with corrected viewBox. Add
animated height transitions to collapsible panels, fix open-state
padding, and turn the Plex Pass notice into a linked external reference
with an inline icon.

app/(pages)/settings/_components/icons.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+export function PlexIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 32 32"
+      aria-hidden="true"
+      {...props}
+    >
+      {/* Icon from CoreUI Brands by creativeLabs Łukasz Holeczek - https://creativecommons.org/publicdomain/zero/1.0/ */}
+      <path
+        fill="currentColor"
+        d="M15.527 0H6.24l10.239 16L6.24 32h9.287L25.76 16z"
+      />
+    </svg>
+  );
+}
+
+export function JellyfinIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      {...props}
+    >
+      {/* Icon from Simple Icons by Simple Icons Collaborators - https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md */}
+      <path
+        fill="currentColor"
+        d="M12 .002C8.826.002-1.398 18.537.16 21.666c1.56 3.129 22.14 3.094 23.682 0S15.177 0 12 0zm7.76 18.949c-1.008 2.028-14.493 2.05-15.514 0C3.224 16.9 9.92 4.755 12.003 4.755c2.081 0 8.77 12.166 7.759 14.196zM12 9.198c-1.054 0-4.446 6.15-3.93 7.189c.518 1.04 7.348 1.027 7.86 0c.511-1.027-2.874-7.19-3.93-7.19z"
+      />
+    </svg>
+  );
+}

app/(pages)/settings/_components/webhook-card.tsx

@@ -4,13 +4,13 @@ import {
   IconCheck,
   IconChevronDown,
   IconCopy,
+  IconExternalLink,
   IconInfoCircle,
   IconRefresh,
   IconTrash,
 } from "@tabler/icons-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useState } from "react";
-import { JellyfinIcon, PlexIcon } from "@/components/icons/media-servers";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -30,6 +30,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { JellyfinIcon, PlexIcon } from "./icons";
 
 export interface WebhookConnection {
   id: string;
@@ -110,7 +111,7 @@ export function WebhookCard({
   return (
     <Card>
       <Collapsible open={cardOpen} onOpenChange={setCardOpen}>
-        <CardContent>
+        <CardContent className={cardOpen ? "pb-4" : ""}>
           <CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-4">
             <div className="flex items-center gap-3">
               <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
@@ -134,7 +135,7 @@ export function WebhookCard({
           </CollapsibleTrigger>
         </CardContent>
 
-        <CollapsibleContent>
+        <CollapsibleContent className="h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
           <CardContent className="space-y-3 border-t border-border/30 pt-4">
             {connection && (
               <div className="flex items-center justify-between rounded-lg bg-muted/30 px-3 py-2">
@@ -154,9 +155,17 @@ export function WebhookCard({
                   size={14}
                   className="mt-0.5 shrink-0 text-primary"
                 />
-                <p className="text-xs leading-relaxed text-muted-foreground">
+                <p className="text-xs leading-relaxed text-foreground/80">
                   Plex webhooks require an active{" "}
-                  <span className="font-medium text-foreground">Plex Pass</span>{" "}
+                  <a
+                    href="https://www.plex.tv/plex-pass/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-medium text-foreground inline-flex items-center gap-0.5 hover:underline underline-offset-2"
+                  >
+                    <span>Plex Pass</span>
+                    <IconExternalLink className="size-3 inline-block translate-y-[-1px]" />
+                  </a>{" "}
                   subscription.
                 </p>
               </div>
@@ -271,7 +280,7 @@ export function WebhookCard({
                 />
                 Setup instructions
               </CollapsibleTrigger>
-              <CollapsibleContent>
+              <CollapsibleContent className="h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
                 <div className="mt-2 rounded-lg bg-muted/30 p-3 text-xs leading-relaxed text-muted-foreground">
                   {isPlex ? (
                     <ol className="list-inside list-decimal space-y-1.5">