feat: recreate no link component

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

@@ -0,0 +1,27 @@
+.noCollection {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  animation: fadeIn 0.3s both;
+}
+
+.text {
+  min-width: 0;
+  width: 100%;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

inertia/mantine/components/dashboard/link/no_link.tsx

@@ -0,0 +1,37 @@
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Anchor, Box, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import useActiveCollection from '~/hooks/use_active_collection';
+import { appendCollectionId } from '~/lib/navigation';
+import styles from './no_link.module.css';
+
+export function NoLink() {
+	const { t } = useTranslation('common');
+	const { activeCollection } = useActiveCollection();
+	return (
+		<Box className={styles.noCollection} p="xl">
+			<Text
+				className={styles.text}
+				dangerouslySetInnerHTML={{
+					__html: t(
+						'home:no-link',
+						{ name: activeCollection?.name ?? '' } as any,
+						{
+							interpolation: { escapeValue: false },
+						}
+					),
+				}}
+			/>
+			<Anchor
+				component={Link}
+				href={appendCollectionId(
+					route('link.create-form').path,
+					activeCollection?.id
+				)}
+			>
+				{t('link.create')}
+			</Anchor>
+		</Box>
+	);
+}

inertia/pages/mantine_dashboard.tsx

@@ -14,6 +14,7 @@ import { MantineFooter } from '~/components/footer/mantine_footer';
 import useShortcut from '~/hooks/use_shortcut';
 import { DashboardAside } from '~/mantine/components/dashboard/dashboard_aside';
 import { DashboardNavbar } from '~/mantine/components/dashboard/dashboard_navbar';
+import { NoLink } from '~/mantine/components/dashboard/link/no_link';
 import { MantineDashboardLayout } from '~/mantine/layouts/mantine_dashboard_layout';
 import { CollectionWithLinks } from '~/types/app';
 import classes from './dashboard.module.css';
@@ -85,16 +86,20 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 					</AppShell.Header>
 					<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
 					<AppShell.Main>
-						<ScrollArea
-							h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
-							p="md"
-						>
-							<Stack gap="xs">
-								{props.activeCollection.links.map((link) => (
-									<LinkItem key={link.id} link={link} showUserControls />
-								))}
-							</Stack>
-						</ScrollArea>
+						{props.activeCollection.links.length > 0 ? (
+							<ScrollArea
+								h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
+								p="md"
+							>
+								<Stack gap="xs">
+									{props.activeCollection.links.map((link) => (
+										<LinkItem key={link.id} link={link} showUserControls />
+									))}
+								</Stack>
+							</ScrollArea>
+						) : (
+							<NoLink />
+						)}
 					</AppShell.Main>
 					<DashboardAside isOpen={openedAside} toggle={toggleAside} />
 					<AppShell.Footer pl="xs" pr="xs">