heh

src/routes/(shell)/index.module.css

@@ -0,0 +1,39 @@
+.list {
+    anchor-name: --carousel;
+    overflow: auto;
+    scroll-snap-type: inline mandatory;
+
+    display: grid;
+    grid-auto-flow: column;
+
+    inline-size: 80%;
+    justify-self: center;
+
+    & > li {
+        inline-size: 30vw;
+        list-style: none;
+        scroll-snap-align: start;
+    }
+
+    &::scroll-button(inline-start),
+    &::scroll-button(inline-end) {
+        position: fixed;
+        position-anchor: --carousel;
+    }
+
+    &::scroll-button(inline-start) {
+        --_inner: center span-inline-end;
+        --_outer: inline-start center;
+
+        position-area: var(--_outer);
+        content: 'arrow_back' / 'Previous';
+    }
+
+    &::scroll-button(inline-end) {
+        --_inner: center span-inline-start;
+        --_outer: inline-end center;
+
+        position-area: var(--_outer);
+        content: 'arrow_forward' / 'Next';
+    }
+}

src/routes/(shell)/index.tsx

@@ -9,6 +9,7 @@ import {
 import { Show } from "solid-js";
 import { List } from "~/components/list";
 import { ListItem } from "~/features/overview/list-item";
+import css from './index.module.css';
 
 export const route = {
   preload: async () => ({
@@ -29,11 +30,24 @@ export default function Home() {
     <>
       <Title>Home</Title>
 
-      <Show when={continueWatching()}>{
+      <ul class={css.list}>
+        <li>Item 0</li>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+        <li>Item 4</li>
+        <li>Item 5</li>
+        <li>Item 6</li>
+        <li>Item 7</li>
+        <li>Item 8</li>
+        <li>Item 9</li>
+      </ul>
+
+      {/* <Show when={continueWatching()}>{
         entries => <List label="Continue watching" items={entries()}>
           {(item) => <ListItem entry={item()} />}
         </List>
-      }</Show>
+      }</Show> */}
 
       <Show when={highlight() && categories()}>
         <Overview highlight={highlight()!} categories={categories()!} />