From cfe6b6317ba084ca586346d842aae83a244cd20f Mon Sep 17 00:00:00 2001
From: Bastiaan <bas@strootje.com>
Date: Mon, 1 Jun 2026 18:14:51 +0200
Subject: [PATCH] chore: various fixes

---
 deno.json                       |  2 +-
 src/assets/locales/en.json      |  4 +++-
 src/components/missed-items.tsx | 28 ++++++++++++++++++----------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/deno.json b/deno.json
index f84797f..62a1db1 100644
--- a/deno.json
+++ b/deno.json
@@ -31,7 +31,7 @@
   },
   "lint": {
     "plugins": [
-      "@ryu/deno-lint-plugin-tailwindcss@0.2.0"
+      "jsr:@ryu/deno-lint-plugin-tailwindcss@0.2.0"
     ]
   }
 }
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index aa5b3f6..d3c62b8 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -6,5 +6,7 @@
   "header": {
     "previous": "Previous",
     "next": "Next"
-  }
+  },
+
+  "missed-items": "Missed items"
 }
diff --git a/src/components/missed-items.tsx b/src/components/missed-items.tsx
index 0bed628..f6d35a4 100644
--- a/src/components/missed-items.tsx
+++ b/src/components/missed-items.tsx
@@ -1,10 +1,14 @@
 import * as clientDb from "@scope/db/client";
 import { type Accessor, Index, Show } from "solid-js";
+import { useI18n } from "./hooks/i18n.hook.ts";
+import { Swiper } from "./swiper.tsx";
 
 type MissedItemsProps = {
   today: Accessor<Temporal.PlainDate>;
 };
 export const MissedItems = (props: MissedItemsProps) => {
+  const t = useI18n();
+
   const items = clientDb.useLiveQuery(({ db }) => {
     return db.selectFrom("item")
       .where("dueAt", "<", props.today().toString())
@@ -13,18 +17,22 @@ export const MissedItems = (props: MissedItemsProps) => {
 
   return (
     <Show when={items()?.length}>
-      <div class="b-1 b-stone-500 mx-2 flex flex-col gap-2 rounded-xl p-2">
-        <header>
-          <h2>Missed Items:</h2>
+      <div class="perspective-near flex flex-col">
+        <header class="mx-2 text-stone-500">
+          <h2>{t("missed-items")}</h2>
         </header>
 
-        <Index each={items()}>
-          {(item) => (
-            <div class="b-1 b-stone-500 mx-1 flex flex-col gap-1 rounded-xl p-2">
-              <span>{item().title}</span>
-            </div>
-          )}
-        </Index>
+        <div class="transform-3d flex flex-col origin-bc rotate-x-60 gap-1">
+          <Index each={items()}>
+            {(item) => (
+              <div class="transform-3d rotate-x-[-60deg]">
+                <Swiper class="b-1 b-stone-500 mx-1 flex flex-col gap-1 rounded-xl bg-white p-2">
+                  <span>{item().title}</span>
+                </Swiper>
+              </div>
+            )}
+          </Index>
+        </div>
       </div>
     </Show>
   );
-- 
2.51.2