Genre display (#930)

* refactor(frontend): extract genre display to component

* feat(frontend): hardcode image in genre display

* feat(frontend): add info about ryot pro gated feature

* chore(*): remove refs to features page

Author: IgnisDa

README.md

@@ -21,7 +21,7 @@
 </div>
 
 <p align="center">
-    <a href="https://ryot.io/features" target="_blank">Pro features</a> •
+    <a href="https://ryot.io" target="_blank">Pro features</a> •
     <a href="https://docs.ryot.io" target="_blank">Installation</a> •
     <a href="https://docs.ryot.io/configuration" target="_blank">Configuration</a> •
     <a href="https://pro.ryot.io/_s/acl_vUMPnPirkHlT" target="_blank">Hosted version</a>
@@ -36,7 +36,7 @@ hosted tracker you will ever need!
 
 Ryot is available in two versions - community and pro. The pro version has additional
 features like profile sharing, recommendations, supercharged collections etc. Learn more
-about the pro version [here](https://ryot.io/features).
+about the pro version [here](https://ryot.io).
 
 ## 💻 Demo
 

apps/backend/src/miscellaneous.rs

@@ -1534,7 +1534,7 @@ impl MiscellaneousService {
             docs_link: "https://docs.ryot.io".to_owned(),
             backend_errors: BackendError::iter().collect(),
             smtp_enabled: self.config.server.smtp.is_enabled(),
-            website_url: "https://ryot.io/features".to_owned(),
+            website_url: "https://ryot.io".to_owned(),
             signup_allowed: self.config.users.allow_registration,
             local_auth_disabled: self.config.users.disable_local_auth,
             token_valid_for_days: self.config.users.token_valid_for_days,

apps/frontend/app/routes/_dashboard.media.genre.list.tsx

@@ -5,8 +5,8 @@ import {
 	Container,
 	Flex,
 	Group,
+	Image,
 	Pagination,
-	Paper,
 	Stack,
 	Text,
 	Title,
@@ -17,15 +17,23 @@ import {
 	type MetaArgs_SingleFetch,
 	useLoaderData,
 } from "@remix-run/react";
-import { GenresListDocument } from "@ryot/generated/graphql/backend/graphql";
-import { truncate } from "@ryot/ts-utils";
+import {
+	GenresListDocument,
+	type GenresListQuery,
+} from "@ryot/generated/graphql/backend/graphql";
+import { getInitials, truncate } from "@ryot/ts-utils";
 import { $path } from "remix-routes";
 import { z } from "zod";
 import { zx } from "zodix";
-import { ApplicationGrid, DebouncedSearchInput } from "~/components/common";
+import {
+	ApplicationGrid,
+	DebouncedSearchInput,
+	ProRequiredAlert,
+} from "~/components/common";
 import {
 	useAppSearchParam,
 	useCoreDetails,
+	useFallbackImageUrl,
 	useGetMantineColor,
 } from "~/lib/hooks";
 import {
@@ -60,7 +68,6 @@ export const meta = (_args: MetaArgs_SingleFetch<typeof loader>) => {
 export default function Page() {
 	const loaderData = useLoaderData<typeof loader>();
 	const coreDetails = useCoreDetails();
-	const getMantineColor = useGetMantineColor();
 	const [_, { setP }] = useAppSearchParam(loaderData.cookieName);
 
 	return (
@@ -84,27 +91,7 @@ export default function Page() {
 						</Box>
 						<ApplicationGrid>
 							{loaderData.genresList.items.map((genre) => (
-								<Paper key={genre.id}>
-									<Group>
-										<Box
-											h={11}
-											w={11}
-											style={{ borderRadius: 2 }}
-											bg={getMantineColor(genre.name)}
-										/>
-										<Box>
-											<Anchor
-												component={Link}
-												to={$path("/media/genre/:id", { id: genre.id })}
-											>
-												{truncate(genre.name, { length: 13 })}
-											</Anchor>
-											<Text size="sm" c="dimmed">
-												{genre.numItems} items
-											</Text>
-										</Box>
-									</Group>
-								</Paper>
+								<DisplayGenre key={genre.id} genre={genre} />
 							))}
 						</ApplicationGrid>
 					</>
@@ -127,3 +114,39 @@ export default function Page() {
 		</Container>
 	);
 }
+
+type Genre = GenresListQuery["genresList"]["items"][number];
+
+const DisplayGenre = (props: { genre: Genre }) => {
+	const getMantineColor = useGetMantineColor();
+
+	return (
+		<Anchor
+			component={Link}
+			to={$path("/media/genre/:id", { id: props.genre.id })}
+		>
+			<Stack gap={4}>
+				<Box pos="relative">
+					<Image
+						radius="md"
+						h={260}
+						alt={props.genre.name}
+						fallbackSrc={useFallbackImageUrl(getInitials(props.genre.name))}
+					/>
+					<Box pos="absolute" left={0} right={0} bottom={0}>
+						<ProRequiredAlert tooltipLabel="Collage image using genre contents" />
+					</Box>
+				</Box>
+				<Group justify="center">
+					<Box
+						h={11}
+						w={11}
+						style={{ borderRadius: 2 }}
+						bg={getMantineColor(props.genre.name)}
+					/>
+					<Text>{truncate(props.genre.name, { length: 13 })}</Text>
+				</Group>
+			</Stack>
+		</Anchor>
+	);
+};

docs/content/index.md

@@ -2,7 +2,7 @@
 
 If you would like to run the pro version, please check [below](#upgrading-to-pro). To see
 the features of the pro version, check the [features page]({{extra.main_website_url
-}}/features).
+}}).
 
 ```yaml
 services: