Minor fixes (#811)

* ci(frontend): add output for routes task

* ci(ts): quote moon configs correctly

* fix(backend): allow nullable media reason

* fix(frontend): extract to vars

* fix(frontend): type error

* build(backend): bump version

* fix(frontend): move loader correctly

* fix(frontend): remove duplicated code

Author: IgnisDa

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "ryot"
-version = "5.1.1"
+version = "5.1.2"
 edition = "2021"
 repository = "https://github.com/IgnisDa/ryot"
 license = "GPL-3.0"

apps/backend/Cargo.toml

@@ -2410,7 +2410,7 @@ impl MiscellaneousService {
             title: String,
             publish_year: Option<i32>,
             images: Option<serde_json::Value>,
-            media_reason: Vec<UserToMediaReason>,
+            media_reason: Option<Vec<UserToMediaReason>>,
         }
 
         let count_select = Query::select()

apps/backend/src/miscellaneous/resolver.rs

@@ -261,7 +261,7 @@ pub mod media {
     pub struct MediaListItem {
         pub data: MetadataSearchItem,
         pub average_rating: Option<Decimal>,
-        pub media_reason: Vec<UserToMediaReason>,
+        pub media_reason: Option<Vec<UserToMediaReason>>,
     }
 
     #[derive(Debug, Serialize, Deserialize, SimpleObject, Clone, FromQueryResult)]

apps/backend/src/models.rs

@@ -61,7 +61,7 @@ import {
 	IconArrowBigUp,
 	IconArrowsRight,
 	IconBackpack,
-	IconBookmarksFilled,
+	IconBookmarks,
 	IconCheck,
 	IconCloudDownload,
 	IconEdit,
@@ -468,7 +468,7 @@ export const BaseDisplayItem = (props: {
 	highlightRightText?: string;
 	children?: ReactNode;
 	nameRight?: JSX.Element;
-	mediaReason?: UserToMediaReason[];
+	mediaReason?: UserToMediaReason[] | null;
 }) => {
 	const colorScheme = useComputedColorScheme("dark");
 
@@ -492,6 +492,10 @@ export const BaseDisplayItem = (props: {
 			</Box>
 		);
 
+	const reasons = props.mediaReason?.filter((r) =>
+		[UserToMediaReason.Seen, UserToMediaReason.Watchlist].includes(r),
+	);
+
 	const themeIconSurrounder = (idx: number, icon?: JSX.Element) => (
 		<ThemeIcon variant="transparent" size="sm" color="lime" key={idx}>
 			{icon}
@@ -505,7 +509,6 @@ export const BaseDisplayItem = (props: {
 			justify="center"
 			direction="column"
 		>
-			{props.topLeft}
 			<SurroundingElement style={{ flex: "none" }} pos="relative">
 				<Image
 					src={props.imageLink}
@@ -527,29 +530,29 @@ export const BaseDisplayItem = (props: {
 						getInitials(props.name),
 					)}
 				/>
+				<Box pos="absolute" style={{ zIndex: 999 }} top={10} left={10}>
+					{props.topLeft}
+				</Box>
 				<Box pos="absolute" top={5} right={5}>
 					{props.topRight}
 				</Box>
-				{props.mediaReason ? (
+				{reasons && reasons.length > 0 ? (
 					<Group
 						style={blackBgStyles}
 						pos="absolute"
 						bottom={5}
 						left={5}
-						gap="xs"
+						gap={3}
 					>
-						{props.mediaReason
+						{reasons
 							.map((r) =>
 								match(r)
 									.with(UserToMediaReason.Seen, () => (
 										<IconRosetteDiscountCheck />
 									))
-									.with(UserToMediaReason.Watchlist, () => (
-										<IconBookmarksFilled />
-									))
-									.otherwise(() => undefined),
+									.with(UserToMediaReason.Watchlist, () => <IconBookmarks />)
+									.run(),
 							)
-							.filter(Boolean)
 							.map((icon, idx) => themeIconSurrounder(idx, icon))}
 					</Group>
 				) : null}
@@ -605,7 +608,7 @@ export const MediaItemWithoutUpdateModal = (props: {
 	noHref?: boolean;
 	onClick?: (e: React.MouseEvent) => Promise<void>;
 	nameRight?: JSX.Element;
-	mediaReason?: UserToMediaReason[];
+	mediaReason?: UserToMediaReason[] | null;
 }) => {
 	const navigate = useNavigate();
 	const id = props.item.identifier;
@@ -640,15 +643,7 @@ export const MediaItemWithoutUpdateModal = (props: {
 			imagePlaceholder={getInitials(props.item?.title || "")}
 			topLeft={
 				props.imageOverlayForLoadingIndicator ? (
-					<Loader
-						pos="absolute"
-						style={{ zIndex: 999 }}
-						top={10}
-						left={10}
-						color="red"
-						variant="bars"
-						size="sm"
-					/>
+					<Loader color="red" variant="bars" size="sm" />
 				) : null
 			}
 			mediaReason={props.mediaReason}
@@ -675,14 +670,7 @@ export const MediaItemWithoutUpdateModal = (props: {
 					</Box>
 				) : props.noRatingLink ? undefined : (
 					<Box
-						p={3}
-						pos="absolute"
-						top={5}
-						right={5}
-						style={{
-							backgroundColor: "rgba(0, 0, 0, 0.75)",
-							borderRadius: 3,
-						}}
+						style={blackBgStyles}
 						onClick={(e) => {
 							e.preventDefault();
 							navigate(

apps/frontend/app/components/media.tsx

@@ -3,34 +3,29 @@ dependsOn:
 
 fileGroups:
   remix:
-    - app/**/*
-    - public/**/*
-    - env.d.ts
-    - remix.config.*
+    - 'app/**/*'
+    - 'public/**/*'
+    - 'env.d.ts'
+    - 'remix.config.*'
 
 tasks:
   routes:
-    command: remix-routes
-    inputs:
-      - '@group(remix)'
+    command: 'remix-routes'
+    inputs: ['@group(remix)']
+    outputs: ['app/remix-routes.d.ts']
 
   dev:
     command: 'remix vite:dev --port 3000 --host'
     local: true
-    deps:
-      - routes
+    deps: ['~:routes']
 
   build:
-    deps:
-      - routes
     command: 'remix vite:build'
-    inputs:
-      - '@group(remix)'
-    outputs:
-      - build
+    inputs: ['@group(remix)']
+    outputs: ['build']
+    deps: ['~:routes']
     options:
       runDepsInParallel: false
 
   typecheck:
-    inputs:
-      - '@group(remix)'
+    inputs: ['@group(remix)']

apps/frontend/moon.yml

@@ -3,10 +3,10 @@ dependsOn:
 
 fileGroups:
   astro:
-    - src/**/*
-    - public/**/*
-    - astro.config.*
-    - tailwind.config.*
+    - 'src/**/*'
+    - 'public/**/*'
+    - 'astro.config.*'
+    - 'tailwind.config.*'
 
 tasks:
   dev:
@@ -15,14 +15,10 @@ tasks:
 
   check:
     command: 'astro check'
-    inputs:
-      - '@group(astro)'
+    inputs: ['@group(astro)']
 
   build:
     command: 'astro build'
-    deps:
-      - ~:check
-    inputs:
-      - '@group(astro)'
-    outputs:
-      - dist
+    deps: ['~:check']
+    inputs: ['@group(astro)']
+    outputs: ['dist']

apps/landing/moon.yml

@@ -1,18 +1,17 @@
-type: library
+type: 'library'
 
 tasks:
   backend-graphql:
     command:
-      - graphql-codegen
+      - 'graphql-codegen'
       - '--config'
-      - src/graphql/backend/codegen.ts
-    outputs:
-      - src/graphql/backend
+      - 'src/graphql/backend/codegen.ts'
+    outputs: ['src/graphql/backend']
     local: true
 
 workspace:
   inheritedTasks:
     exclude:
-      - build
-      - lint
-      - format
+      - 'build'
+      - 'lint'
+      - 'format'

libs/generated/moon.yml

@@ -772,7 +772,7 @@ export enum MediaGeneralFilter {
 export type MediaListItem = {
   averageRating?: Maybe<Scalars['Decimal']['output']>;
   data: MetadataSearchItem;
-  mediaReason: Array<UserToMediaReason>;
+  mediaReason?: Maybe<Array<UserToMediaReason>>;
 };
 
 export type MediaListResults = {
@@ -2843,7 +2843,7 @@ export type MetadataListQueryVariables = Exact<{
 }>;
 
 
-export type MetadataListQuery = { metadataList: { details: { total: number, nextPage?: number | null }, items: Array<{ averageRating?: string | null, mediaReason: Array<UserToMediaReason>, data: { identifier: string, title: string, image?: string | null, publishYear?: number | null } }> } };
+export type MetadataListQuery = { metadataList: { details: { total: number, nextPage?: number | null }, items: Array<{ averageRating?: string | null, mediaReason?: Array<UserToMediaReason> | null, data: { identifier: string, title: string, image?: string | null, publishYear?: number | null } }> } };
 
 export type MetadataMainDetailsQueryVariables = Exact<{
   metadataId: Scalars['Int']['input'];

libs/generated/src/graphql/backend/graphql.ts

@@ -1,7 +1,7 @@
-type: library
+type: 'library'
 
 workspace:
   inheritedTasks:
     exclude:
-      - build
-      - test
+      - 'build'
+      - 'test'

libs/graphql/moon.yml

@@ -1,6 +1,6 @@
-type: library
+type: 'library'
 
 workspace:
   inheritedTasks:
     exclude:
-      - build
+      - 'build'