refactor: remove all legacy files

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

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

@@ -1,57 +0,0 @@
-import styled from '@emotion/styled';
-import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { useEffect, useRef } from 'react';
-import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import { Item } from '~/components/dashboard/side_nav/nav_item';
-import { appendCollectionId } from '~/lib/navigation';
-import { useActiveCollection } from '~/store/collection_store';
-import { CollectionWithLinks } from '~/types/app';
-
-const CollectionItemStyle = styled(Item, {
-	shouldForwardProp: (propName) => propName !== 'isActive',
-})<{ isActive: boolean }>(({ theme, isActive }) => ({
-	cursor: 'pointer',
-	color: isActive ? theme.colors.primary : theme.colors.font,
-	backgroundColor: theme.colors.secondary,
-}));
-const CollectionItemLink = CollectionItemStyle.withComponent(Link);
-
-const LinksCount = styled.div(({ theme }) => ({
-	minWidth: 'fit-content',
-	fontWeight: 300,
-	fontSize: '0.9rem',
-	color: theme.colors.grey,
-}));
-
-export default function CollectionItem({
-	collection,
-}: {
-	collection: CollectionWithLinks;
-}) {
-	const itemRef = useRef<HTMLDivElement>(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]);
-
-	return (
-		<CollectionItemLink
-			href={appendCollectionId(route('dashboard').url, collection.id)}
-			isActive={isActiveCollection}
-			ref={itemRef}
-		>
-			<FolderIcon css={{ minWidth: '24px' }} size={24} />
-			<TextEllipsis>{collection.name}</TextEllipsis>
-			{collection.links.length > 0 && (
-				<LinksCount>— {collection.links.length}</LinksCount>
-			)}
-		</CollectionItemLink>
-	);
-}

inertia/components/dashboard/collection/list/collection_list.module.css

@@ -0,0 +1,24 @@
+.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;
+}

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -1,37 +1,9 @@
-import styled from '@emotion/styled';
+import { Box, ScrollArea, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import CollectionItem from '~/components/dashboard/collection/list/collection_item';
-import CollectionListContainer from '~/components/dashboard/collection/list/collection_list_container';
+import CollectionItem from '~/components/dashboard/collection/item/collection_item';
 import useShortcut from '~/hooks/use_shortcut';
 import { useActiveCollection, useCollections } from '~/store/collection_store';
-
-const SideMenu = styled.nav(({ theme }) => ({
-	height: '100%',
-	width: '300px',
-	backgroundColor: theme.colors.background,
-	paddingLeft: '10px',
-	marginLeft: '5px',
-	borderLeft: `1px solid ${theme.colors.lightGrey}`,
-	display: 'flex',
-	gap: '.35em',
-	flexDirection: 'column',
-}));
-
-const CollectionLabel = styled.p(({ theme }) => ({
-	color: theme.colors.grey,
-	marginBlock: '0.35em',
-	paddingInline: '15px',
-}));
-
-const CollectionListStyle = styled.div({
-	padding: '1px',
-	paddingRight: '5px',
-	display: 'flex',
-	flex: 1,
-	gap: '.35em',
-	flexDirection: 'column',
-	overflow: 'auto',
-});
+import styles from './collection_list.module.css';
 
 export default function CollectionList() {
 	const { t } = useTranslation('common');
@@ -64,18 +36,20 @@ export default function CollectionList() {
 	useShortcut('ARROW_DOWN', goToNextCollection);
 
 	return (
-		<SideMenu>
-			<CollectionListContainer>
-				<CollectionLabel>
-					{t('collection.collections', { count: collections.length })} •{' '}
-					{collections.length}
-				</CollectionLabel>
-				<CollectionListStyle>
-					{collections.map((collection) => (
-						<CollectionItem collection={collection} key={collection.id} />
-					))}
-				</CollectionListStyle>
-			</CollectionListContainer>
-		</SideMenu>
+		<Box className={styles.sideMenu}>
+			<Box className={styles.listContainer}>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<Text c="dimmed" ml="md" mb="sm">
+						{t('collection.collections', { count: collections.length })} •{' '}
+						{collections.length}
+					</Text>
+					<ScrollArea className={styles.collectionList}>
+						{collections.map((collection) => (
+							<CollectionItem collection={collection} key={collection.id} />
+						))}
+					</ScrollArea>
+				</div>
+			</Box>
+		</Box>
 	);
 }

inertia/components/dashboard/collection/list/collection_list_container.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-const CollectionListContainer = styled.div({
-	height: '100%',
-	minHeight: 0,
-	paddingInline: '10px',
-	display: 'flex',
-	flexDirection: 'column',
-});
-
-export default CollectionListContainer;