feat: add multiple way to show collections and links

This commit is contained in:
Sonny
2025-08-21 02:27:51 +02:00
parent 18fe979069
commit 4ef2b639b6
41 changed files with 785 additions and 164 deletions

View File

@@ -0,0 +1,29 @@
import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { TbStar, TbStarFilled } from 'react-icons/tb';
import { useActiveCollection } from '~/hooks/collections/use_active_collection';
import classes from './collection_item.module.css';
export function CollectionFavoriteItem() {
const { t } = useTranslation();
const activeCollection = useActiveCollection();
const isActiveCollection = !activeCollection?.id;
const FolderIcon = isActiveCollection ? TbStarFilled : TbStar;
return (
<Link
className={classes.link}
data-active={isActiveCollection || undefined}
href={route('dashboard').path}
key="favorite"
title="Favorite"
>
<FolderIcon className={classes.linkIcon} />
<Text maw={'200px'} style={{ wordBreak: 'break-all' }}>
{t('favorite')}
</Text>
</Link>
);
}

View File

@@ -8,11 +8,11 @@ import { appendCollectionId } from '~/lib/navigation';
import { CollectionWithLinks } from '~/types/app';
import classes from './collection_item.module.css';
export default function CollectionItem({
collection,
}: {
interface CollectionItemProps {
collection: CollectionWithLinks;
}) {
}
export function CollectionItem({ collection }: CollectionItemProps) {
const itemRef = useRef<HTMLAnchorElement>(null);
const activeCollection = useActiveCollection();
const isActiveCollection = collection.id === activeCollection?.id;
@@ -34,7 +34,10 @@ export default function CollectionItem({
title={collection.name}
>
<FolderIcon className={classes.linkIcon} />
<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
<Text
lineClamp={1}
style={{ wordBreak: 'break-all', whiteSpace: 'pre-line' }}
>
{collection.name}
</Text>
</Link>