feat: recreate favorite list/item

inertia/components/dashboard/link/link.module.css

@@ -2,7 +2,7 @@
 	user-select: none;
 	cursor: pointer;
 	width: 100%;
-	background-color: light-dark(--mantine-color-gray-1, rgb(50, 58, 71));
+	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
 	padding: 0.75em 1em;
 	border-radius: var(--border-radius);
 	border: 1px solid transparent;

inertia/mantine/components/dashboard/collection/item/collection_item.tsx

@@ -24,7 +24,8 @@ export default function CollectionItem({
 		}
 	}, [collection.id, activeCollection?.id]);
 
-	const linksCount = activeCollection?.links.length ?? 0;
+	const linksCount = collection?.links.length ?? 0;
+	const showLinks = linksCount > 0;
 	return (
 		<Link
 			className={classes.link}
@@ -34,10 +35,10 @@ export default function CollectionItem({
 			ref={itemRef}
 		>
 			<FolderIcon className={classes.linkIcon} />
-			<Text lineClamp={1} maw="160px">
+			<Text lineClamp={1} maw={showLinks ? '160px' : '200px'}>
 				{collection.name}
 			</Text>
-			{linksCount > 0 && (
+			{showLinks && (
 				<Text c="var(--mantine-color-gray-5)" ml="xs">
 					— {linksCount}
 				</Text>

inertia/mantine/components/dashboard/dashboard_navbar.tsx

@@ -6,9 +6,8 @@ import {
 	Divider,
 	Group,
 	NavLink,
+	rem,
 	ScrollArea,
-	Skeleton,
-	Stack,
 	Text,
 } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +17,7 @@ import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
 import { PiGearLight } from 'react-icons/pi';
 import { MantineUserCard } from '~/components/common/mantine_user_card';
 import useUser from '~/hooks/use_user';
+import { FavoriteList } from '~/mantine/components/dashboard/favorite/favorite_list';
 
 interface DashboardNavbarProps {
 	isOpen: boolean;
@@ -32,7 +32,10 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 		active: true,
 		styles: {
 			label: {
-				fontSize: '16px',
+				fontSize: rem(16),
+			},
+			root: {
+				borderRadius: rem(5),
 			},
 		},
 	};
@@ -55,10 +58,10 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 				/>
 			)}
 			<NavLink
+				{...common}
 				label={t('settings')}
 				leftSection={<PiGearLight size="1.5rem" />}
-				variant="subtle"
+				color="var(--mantine-color-gray-7)"
-				styles={common.styles}
 			/>
 			<NavLink
 				{...common}
@@ -68,28 +71,19 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 			<NavLink
 				{...common}
 				component={Link}
-				href={route('collection.create-form').url}
+				href={route('link.create-form').url}
-				label={t('collection.create')}
+				label={t('link.create')}
 				leftSection={<IoAdd size="1.5rem" />}
 			/>
 			<NavLink
 				{...common}
 				component={Link}
-				href={route('link.create-form').url}
+				href={route('collection.create-form').url}
-				label={t('link.create')}
+				label={t('collection.create')}
 				leftSection={<AiOutlineFolderAdd size="1.5rem" />}
 			/>
-			<Text c="dimmed" mt="xs" ml="md" mb="sm">
-				{t('favorite')} • {0}
-			</Text>
 			<AppShell.Section grow component={ScrollArea}>
-				<Stack gap="xs">
+				<FavoriteList />
-					{Array(15)
-						.fill(0)
-						.map((_, index) => (
-							<Skeleton key={index} h={28} animate={false} />
-						))}
-				</Stack>
 			</AppShell.Section>
 		</AppShell.Navbar>
 	);

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>
+);