feat: improve link style

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

@@ -37,8 +37,14 @@
 	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/components/dashboard/link/link_item.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Text } from '@mantine/core'; // Import de Mantine
+import { Card, Group, Text } from '@mantine/core';
 import { AiFillStar } from 'react-icons/ai';
 import { ExternalLinkStyled } from '~/components/common/external_link_styled';
 import LinkFavicon from '~/components/dashboard/link/link_favicon';
@@ -14,18 +14,12 @@ export default function LinkItem({
 }) {
 	const { name, url, description, favorite } = link;
 	return (
-		<Card
-			className={styles.linkWrapper}
-			padding="xs"
-			pl="md"
-			pr="md"
-			radius="sm"
-		>
-			<Group className={styles.linkHeader} justify="space-between">
+		<Card className={styles.linkWrapper} padding="sm" radius="sm" withBorder>
+			<Group className={styles.linkHeader} justify="center">
 				<LinkFavicon url={url} />
 				<ExternalLinkStyled href={url} style={{ flex: 1 }}>
 					<div className={styles.linkName}>
-						<Text c="blue" lineClamp={1}>
+						<Text lineClamp={1}>
 							{name}{' '}
 							{showUserControls && favorite && <AiFillStar color="gold" />}
 						</Text>
@@ -35,7 +29,7 @@ export default function LinkItem({
 				{/* {showUserControls && <LinkControls link={link} />} */}
 			</Group>
 			{description && (
-				<Text c="dimmed" size="sm">
+				<Text className={styles.linkDescription} c="dimmed" size="sm">
 					{description}
 				</Text>
 			)}
@@ -60,7 +54,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) {
 		}
 
 		return (
-			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
+			<Text className={styles.linkUrl} color="gray" size="xs" lineClamp={1}>
 				{origin}
 				<span className={styles.linkUrlPathname}>{text}</span>
 			</Text>
@@ -68,7 +62,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) {
 	} catch (error) {
 		console.error('error', error);
 		return (
-			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
+			<Text className={styles.linkUrl} color="gray" size="xs" lineClamp={1}>
 				{url}
 			</Text>
 		);

inertia/mantine/components/dashboard/dashboard_navbar.tsx

@@ -16,6 +16,7 @@ import { IoIosSearch } from 'react-icons/io';
 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';
 
 interface DashboardNavbarProps {
 	isOpen: boolean;
@@ -23,6 +24,7 @@ interface DashboardNavbarProps {
 }
 export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 	const { t } = useTranslation('common');
+	const { isAuthenticated, user } = useUser();
 	const common = {
 		variant: 'subtle',
 		color: 'blue',
@@ -36,14 +38,16 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 			</Group>
 			<MantineUserCard />
 			<Divider mt="xs" mb="md" />
-			<NavLink
-				{...common}
-				component={Link}
-				href={route('admin.dashboard').url}
-				label={t('admin')}
-				leftSection={<IoShieldHalfSharp size="1.5rem" />}
-				color="var(--mantine-color-red-5)"
-			/>
+			{isAuthenticated && user.isAdmin && (
+				<NavLink
+					{...common}
+					component={Link}
+					href={route('admin.dashboard').url}
+					label={t('admin')}
+					leftSection={<IoShieldHalfSharp size="1.5rem" />}
+					color="var(--mantine-color-red-5)"
+				/>
+			)}
 			<NavLink
 				label={t('settings')}
 				leftSection={<PiGearLight size="1.5rem" />}
@@ -71,13 +75,13 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
 			<Text size="sm" fw={500} c="dimmed" mt="sm" ml="md">
 				{t('favorite')} • {0}
 			</Text>
-			<ScrollArea>
+			<AppShell.Section grow component={ScrollArea}>
 				{Array(15)
 					.fill(0)
 					.map((_, index) => (
 						<Skeleton key={index} h={28} mt="sm" animate={false} />
 					))}
-			</ScrollArea>
+			</AppShell.Section>
 		</AppShell.Navbar>
 	);
 }