Rework images & skeletons

front/src/components/items/context-menus.tsx

@@ -7,15 +7,13 @@ import type { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import type { Serie } from "~/models";
+import { WatchStatusV } from "~/models";
 import { HR, IconButton, Menu, tooltip } from "~/primitives";
 import { useAccount } from "~/providers/account-context";
 import { useMutation } from "~/query";
 import { watchListIcon } from "./watchlist-info";
 // import { useDownloader } from "../../packages/ui/src/downloadses/ui/src/downloads";
 
-type WatchStatusV = NonNullable<Serie["watchStatus"]>["status"];
-
 export const EpisodesContext = ({
 	type = "episode",
 	slug,

front/src/components/items/item-grid.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { type ImageStyle, Platform, View } from "react-native";
 import { type Stylable, type Theme, percent, px, useYoshiki } from "yoshiki/native";
-import type { KyooImage, WatchStatusV } from "~/models";
+import type { KImage, WatchStatusV } from "~/models";
 import {
 	Link,
 	P,
@@ -15,6 +15,7 @@ import {
 } from "~/primitives";
 import type { Layout } from "~/query";
 import { ItemWatchStatus } from "./item-helpers";
+import { ItemContext } from "./context-menus";
 
 export const ItemProgress = ({ watchPercent }: { watchPercent: number }) => {
 	const { css } = useYoshiki("episodebox");
@@ -59,7 +60,7 @@ export const ItemGrid = ({
 	slug: string;
 	name: string;
 	subtitle: string | null;
-	poster: KyooImage | null;
+	poster: KImage | null;
 	watchStatus: WatchStatusV | null;
 	watchPercent: number | null;
 	type: "movie" | "serie" | "collection";