applied the cool new carousel css feature!

src/features/content/apis/jellyfin.ts

@@ -13,8 +13,7 @@ const client = createClient<paths>({
 
 export const listUsers = query(async () => {
   const { data, error } = await client.GET("/Users", {
-    params: {
-    },
+    params: {},
   });
 
   return data ?? [];
@@ -62,7 +61,7 @@ export const getContinueWatching = query(
     const items = (data?.Items ?? []).map(({ Id, Name }) => ({
       id: Id,
       title: Name,
-      thumbnail: `${baseUrl}Items/${Id}/Images/Primary`,
+      thumbnail: `${baseUrl}/Items/${Id}/Images/Primary`,
     }));
 
     return items;

src/features/content/service.ts

@@ -1,11 +1,15 @@
 import type { Category, Entry } from "./types";
 import { query } from "@solidjs/router";
 import { entries } from "./data";
+import { getContinueWatching } from "./apis/jellyfin";
 
 export const listCategories = query(async (): Promise<Category[]> => {
   "use server";
 
+  const jellyfinUserId = "a9c51af84bf54578a99ab4dd0ebf0763";
+
   return [
+    { label: "Continue", entries: await getContinueWatching(jellyfinUserId) },
     {
       label: "Popular",
       entries: [

src/features/overview/list-item.module.css

@@ -25,15 +25,18 @@
       /* Dot */
       radial-gradient(circle at 25% 30% #7772 #7774 1em transparent 1em),
       /* Dot */
-      radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em),
-      /* Bottom fade */
-      linear-gradient(165deg transparent 60% #555 60% #333),
+        radial-gradient(circle at 85% 15% #7772 #7774 1em transparent 1em),
+      /* Bottom fade */ linear-gradient(165deg transparent 60% #555 60% #333),
       /* wave dark part */
-      radial-gradient(ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%),
+        radial-gradient(
+          ellipse 5em 2.25em at 0.5em calc(50% - 1em) #333 100% transparent 100%
+        ),
       /* wave light part */
-      radial-gradient(ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100% transparent 100%),
-      /* Base */
-      linear-gradient(to bottom #333 50% #555 50%);
+        radial-gradient(
+          ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em) #555 100%
+            transparent 100%
+        ),
+      /* Base */ linear-gradient(to bottom #333 50% #555 50%);
 
     transform-origin: 50% 0;
     transform: scale(1.1) translateY(calc(-4 * var(--padding)));
@@ -41,7 +44,7 @@
     user-select: none;
   }
 
-  & > main {
+  & > figcaption {
     --offset: calc(1.5 * var(--padding));
     grid-area: 1/ 1;
     display: grid;
@@ -98,11 +101,10 @@
         will-change: transform;
       }
 
-      & > main {
+      & > figcaption {
         clip-path: inset(40%);
       }
     }
-
     @media (prefers-reduced-motion: no-preference) {
       & {
         transition: transform var(--duration-moderate-1) linear;
@@ -112,7 +114,7 @@
         transition: transform var(--duration-moderate-1) ease-in-out;
       }
 
-      & > main {
+      & > figcaption {
         transition: clip-path var(--duration-moderate-1) ease-in-out;
       }
 
@@ -126,4 +128,4 @@
       }
     }
   }
-}
+}

src/features/overview/list-item.tsx

@@ -7,14 +7,14 @@ export const ListItem: Component<{ entry: Entry }> = (props) => {
   const slug = createMemo(() => createSlug(props.entry));
 
   return (
-    <div class={css.listItem}>
-      <img src={props.entry.thumbnail} />
+    <figure class={css.listItem}>
+      <img src={props.entry.thumbnail} alt={props.entry.title} />
 
-      <main>
+      <figcaption>
         <strong>{props.entry.title}</strong>
 
         <a href={`/watch/${slug()}`}>Watch now</a>
-      </main>
-    </div>
+      </figcaption>
+    </figure>
   );
 };