refactor: remove all legacy files

+ comment/delete things that haven't yet migrated to mantine

inertia/components/dashboard/collection/item/collection_item.module.css

@@ -0,0 +1,44 @@
+.link {
+	width: 100%;
+	max-width: 100%;
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	font-size: var(--mantine-font-size-sm);
+	color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+	border-radius: var(--mantine-radius-sm);
+	font-weight: 500;
+
+	@mixin hover {
+		background-color: light-dark(
+			var(--mantine-color-gray-0),
+			var(--mantine-color-dark-6)
+		);
+		color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+		.linkIcon {
+			color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+		}
+	}
+
+	&[data-active] {
+		&,
+		&:hover {
+			background-color: var(--mantine-color-blue-light);
+			color: var(--mantine-color-blue-light-color);
+
+			.linkIcon {
+				color: var(--mantine-color-blue-light-color);
+			}
+		}
+	}
+}
+
+.linkIcon {
+	color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+	margin-right: var(--mantine-spacing-sm);
+	width: rem(25px);
+	height: rem(25px);
+	min-width: rem(25px);
+}

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

@@ -0,0 +1,48 @@
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Text } from '@mantine/core';
+import { useEffect, useRef } from 'react';
+import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
+import { appendCollectionId } from '~/lib/navigation';
+import { useActiveCollection } from '~/store/collection_store';
+import { CollectionWithLinks } from '~/types/app';
+import classes from './collection_item.module.css';
+
+export default function CollectionItem({
+	collection,
+}: {
+	collection: CollectionWithLinks;
+}) {
+	const itemRef = useRef<HTMLAnchorElement>(null);
+	const { activeCollection } = useActiveCollection();
+	const isActiveCollection = collection.id === activeCollection?.id;
+	const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
+
+	useEffect(() => {
+		if (collection.id === activeCollection?.id) {
+			itemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		}
+	}, [collection.id, activeCollection?.id]);
+
+	const linksCount = collection?.links.length ?? 0;
+	const showLinks = linksCount > 0;
+	return (
+		<Link
+			className={classes.link}
+			data-active={isActiveCollection || undefined}
+			href={appendCollectionId(route('dashboard').path, collection.id)}
+			key={collection.id}
+			ref={itemRef}
+		>
+			<FolderIcon className={classes.linkIcon} />
+			<Text lineClamp={1} maw={showLinks ? '160px' : '200px'}>
+				{collection.name}
+			</Text>
+			{showLinks && (
+				<Text c="var(--mantine-color-gray-5)" ml="xs">
+					— {linksCount}
+				</Text>
+			)}
+		</Link>
+	);
+}