feat: recreate favorite list/item

inertia/mantine/components/dashboard/favorite/favorite_list.module.css

@@ -0,0 +1,28 @@
+.sideMenu {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	gap: 0.35em;
+	flex-direction: column;
+}
+
+.listContainer {
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.collectionList {
+	padding: 1px;
+	padding-right: 5px;
+	display: flex;
+	flex: 1;
+	gap: 0.35em;
+	flex-direction: column;
+	overflow: auto;
+}
+
+.noFavorite {
+	text-align: center;
+}

inertia/mantine/components/dashboard/favorite/favorite_list.tsx

@@ -0,0 +1,39 @@
+import { Box, Group, ScrollArea, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import useFavorites from '~/hooks/use_favorites';
+import { FavoriteItem } from '~/mantine/components/dashboard/favorite/item/favorite_item';
+import styles from './favorite_list.module.css';
+
+export function FavoriteList() {
+	const { t } = useTranslation('common');
+	const { favorites } = useFavorites();
+
+	if (favorites.length === 0) {
+		return (
+			<Group justify="center">
+				<Text c="dimmed" size="sm" mt="sm">
+					{t('favorites-appears-here')}
+				</Text>
+			</Group>
+		);
+	}
+
+	return (
+		<Box className={styles.sideMenu}>
+			<Box className={styles.listContainer}>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<Text c="dimmed" mt="xs" ml="md" mb={4}>
+						{t('favorite')} • {favorites.length}
+					</Text>
+					<ScrollArea className={styles.collectionList}>
+						<Stack gap={4}>
+							{favorites.map((link) => (
+								<FavoriteItem link={link} key={link.id} />
+							))}
+						</Stack>
+					</ScrollArea>
+				</div>
+			</Box>
+		</Box>
+	);
+}

inertia/mantine/components/dashboard/favorite/item/favorite_item.module.css

@@ -0,0 +1,44 @@
+.linkWrapper {
+	user-select: none;
+	cursor: pointer;
+	width: 100%;
+	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	padding: 0.25em 0.5em !important;
+	border-radius: var(--border-radius);
+	border: 1px solid transparent;
+}
+
+.linkWrapper:hover {
+	border: 1px solid var(--mantine-color-blue-4);
+}
+
+.linkName {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.linkDescription {
+	margin-top: 0.5em;
+	font-size: 0.8em;
+	word-wrap: break-word;
+}
+
+.linkUrl {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	font-size: 0.8em;
+	transition: opacity 0.3s;
+}
+
+.linkWrapper:hover .linkUrlPathname {
+	opacity: 1;
+}
+
+.linkUrlPathname {
+	opacity: 0;
+	transition: opacity 0.3s;
+}

inertia/mantine/components/dashboard/favorite/item/favorite_item.tsx

@@ -0,0 +1,25 @@
+import { Card, Group, Text } from '@mantine/core'; // Import de Mantine
+import { ExternalLinkStyled } from '~/components/common/external_link_styled';
+import LinkFavicon from '~/components/dashboard/link/link_favicon';
+import { LinkWithCollection } from '~/types/app';
+import styles from './favorite_item.module.css';
+
+export const FavoriteItem = ({
+	link: { name, url, collection },
+}: {
+	link: LinkWithCollection;
+}) => (
+	<Card className={styles.linkWrapper} radius="sm" withBorder>
+		<Group justify="center" gap="xs">
+			<LinkFavicon url={url} />
+			<ExternalLinkStyled href={url} style={{ flex: 1 }}>
+				<div className={styles.linkName}>
+					<Text lineClamp={1}>{name} </Text>
+				</div>
+				<Text c="gray" size="xs" lineClamp={1}>
+					{collection.name}
+				</Text>
+			</ExternalLinkStyled>
+		</Group>
+	</Card>
+);