feat(ports): use virtual list

package.json

@@ -59,6 +59,7 @@
     "surge": "^0.24.6",
     "svelte": "5.35.3",
     "svelte-intersection-observer-action": "^0.0.5",
+    "svelte-virtuallists": "^1.4.2",
     "tsx": "^4.20.3",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",

src/pages/ports/_components/PortCard.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
-  import type { PortWithIcons } from "@data/ports";
   import Icon from "@iconify/svelte";
   import { intersect } from "svelte-intersection-observer-action";
   import PortMaintainers from "./PortMaintainers.svelte";
+  import type { Collaborator } from "@catppuccin/catppuccin/resources/types/ports.porcelain.schema";
+
+  interface Props {
+    url: string;
+    name: string;
+    color: string;
+    iconBody: string;
+    iconWidth: number | undefined;
+    iconHeight: number | undefined;
+    currentMaintainers: Collaborator[];
+  }
 
-  let { port }: { port: PortWithIcons } = $props();
+  let { url, name, color, iconBody, iconWidth, iconHeight, currentMaintainers }: Props = $props();
   let visible = $state(false);
 
   const threshold = 0.1;
@@ -20,20 +30,20 @@
   }
 </script>
 
-<a href={port.repository.url} class="port-card" class:visible use:intersect={options}>
+<a href={url} class="port-card" class:visible use:intersect={options}>
   <div class="port-header">
-    <p class="port-name">{port.name}</p>
+    <p class="port-name">{name}</p>
     <Icon
-      color="var(--{port.color})"
+      color="var(--{color})"
       width={32}
       height={32}
       icon={{
-        body: port.icon.body,
-        width: port.icon.width,
-        height: port.icon.height,
+        body: iconBody,
+        width: iconWidth,
+        height: iconHeight,
       }} />
   </div>
-  <PortMaintainers {port} />
+  <!-- <PortMaintainers {currentMaintainers} currentMaintainersLength={currentMaintainers.length} /> -->
 </a>
 
 <style lang="scss">

src/pages/ports/_components/PortGrid.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PortWithIcons } from "@data/ports";
   import PortCard from "./PortCard.svelte";
+  import { VirtualList, type VLSlotSignature } from "svelte-virtuallists";
 
   interface Props {
     portGrid: PortWithIcons[];
@@ -21,8 +22,17 @@
       </p>
     </div>
   {:else if portGrid.length > 0}
-    {#each portGrid as port (port.key)}
-      <PortCard {port} />
-    {/each}
+    <VirtualList items={portGrid}>
+      {#snippet vl_slot({ item }: VLSlotSignature<(typeof portGrid)[0]>)}
+        <PortCard
+          name={item.name}
+          url={item.repository.url}
+          color={item.color}
+          iconBody={item.icon.body}
+          iconWidth={item.icon.width}
+          iconHeight={item.icon.height}
+          currentMaintainers={item.repository["current-maintainers"]} />
+      {/snippet}
+    </VirtualList>
   {/if}
 </div>

src/pages/ports/_components/PortMaintainers.svelte

@@ -2,13 +2,17 @@
   import type { PortWithIcons } from "@data/ports";
   import ProfilePicture from "@components/ProfilePicture.svelte";
   import NoMaintainerIcon from "@data/icons/lucide-user-round-x.svg?raw";
+  import type { RepositoryCurrentMaintainers } from "@catppuccin/catppuccin/resources/types/ports.porcelain.schema";
 
-  let { port }: { port: PortWithIcons } = $props();
+  let {
+    currentMaintainers,
+    currentMaintainersLength,
+  }: { currentMaintainers: RepositoryCurrentMaintainers; currentMaintainersLength: number } = $props();
 </script>
 
-{#if port.repository["current-maintainers"].length > 0}
+{#if currentMaintainersLength > 0}
   <div class="current-maintainers" title="All users who currently maintain this port">
-    {#each port.repository["current-maintainers"] as maintainer}
+    {#each currentMaintainers as maintainer}
       <ProfilePicture username={maintainer.username} size={64} wxh={32} />
     {/each}
   </div>