mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-10 15:35:35 +00:00
refactor: remove all legacy files
+ comment/delete things that haven't yet migrated to mantine
This commit is contained in:
Sonny
Sonny
@@ -1,39 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { ReactNode } from 'react';
|
||||
import CollectionHeader from '~/components/dashboard/collection/header/collection_header';
|
||||
import LinkList from '~/components/dashboard/link/link_list';
|
||||
import { NoCollection } from '~/components/dashboard/link/no_item';
|
||||
import Footer from '~/components/footer/footer';
|
||||
import { useActiveCollection } from '~/store/collection_store';
|
||||
|
||||
export interface CollectionHeaderProps {
|
||||
showButtons: boolean;
|
||||
showControls?: boolean;
|
||||
openNavigationItem?: ReactNode;
|
||||
openCollectionItem?: ReactNode;
|
||||
}
|
||||
|
||||
const CollectionContainerStyle = styled.div({
|
||||
height: '100%',
|
||||
minWidth: 0,
|
||||
padding: '0.5em 0.5em 0',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export default function CollectionContainer(props: CollectionHeaderProps) {
|
||||
const { activeCollection } = useActiveCollection();
|
||||
|
||||
if (activeCollection === null) {
|
||||
return <NoCollection />;
|
||||
}
|
||||
|
||||
return (
|
||||
<CollectionContainerStyle>
|
||||
<CollectionHeader {...props} />
|
||||
<LinkList links={activeCollection.links} />
|
||||
<Footer css={{ paddingBottom: 0 }} />
|
||||
</CollectionContainerStyle>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { route } from '@izzyjs/route/client';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { BsThreeDotsVertical } from 'react-icons/bs';
|
||||
import { GoPencil } from 'react-icons/go';
|
||||
import { IoIosAddCircleOutline } from 'react-icons/io';
|
||||
import { IoTrashOutline } from 'react-icons/io5';
|
||||
import Dropdown from '~/components/common/dropdown/dropdown';
|
||||
import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
|
||||
import { appendCollectionId } from '~/lib/navigation';
|
||||
import { Collection } from '~/types/app';
|
||||
|
||||
export default function CollectionControls({
|
||||
collectionId,
|
||||
}: {
|
||||
collectionId: Collection['id'];
|
||||
}) {
|
||||
const { t } = useTranslation('common');
|
||||
return (
|
||||
<Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
|
||||
<DropdownItemLink href={route('link.create-form').url}>
|
||||
<IoIosAddCircleOutline /> {t('link.create')}
|
||||
</DropdownItemLink>
|
||||
<DropdownItemLink
|
||||
href={appendCollectionId(
|
||||
route('collection.edit-form').url,
|
||||
collectionId
|
||||
)}
|
||||
>
|
||||
<GoPencil /> {t('collection.edit')}
|
||||
</DropdownItemLink>
|
||||
<DropdownItemLink
|
||||
href={appendCollectionId(
|
||||
route('collection.delete-form').url,
|
||||
collectionId
|
||||
)}
|
||||
danger
|
||||
>
|
||||
<IoTrashOutline /> {t('collection.delete')}
|
||||
</DropdownItemLink>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import TextEllipsis from '~/components/common/text_ellipsis';
|
||||
import { useActiveCollection } from '~/store/collection_store';
|
||||
|
||||
const CollectionDescriptionStyle = styled.div({
|
||||
width: '100%',
|
||||
fontSize: '0.85rem',
|
||||
marginBottom: '0.5rem',
|
||||
});
|
||||
|
||||
export default function CollectionDescription() {
|
||||
const { activeCollection } = useActiveCollection();
|
||||
return (
|
||||
<CollectionDescriptionStyle>
|
||||
<TextEllipsis lines={3}>{activeCollection!.description}</TextEllipsis>
|
||||
</CollectionDescriptionStyle>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Fragment } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import TextEllipsis from '~/components/common/text_ellipsis';
|
||||
import { CollectionHeaderProps } from '~/components/dashboard/collection/collection_container';
|
||||
import CollectionControls from '~/components/dashboard/collection/header/collection_controls';
|
||||
import CollectionDescription from '~/components/dashboard/collection/header/collection_description';
|
||||
import VisibilityBadge from '~/components/visibilty/visibilty';
|
||||
import { useActiveCollection } from '~/store/collection_store';
|
||||
|
||||
const paddingLeft = '1.25em';
|
||||
const paddingRight = '1.65em';
|
||||
|
||||
const CollectionHeaderWrapper = styled.div(({ theme }) => ({
|
||||
minWidth: 0,
|
||||
width: '100%',
|
||||
paddingInline: `${paddingLeft} ${paddingRight}`,
|
||||
marginBottom: '0.5em',
|
||||
|
||||
[`@media (max-width: ${theme.media.tablet})`]: {
|
||||
paddingInline: 0,
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
}));
|
||||
|
||||
const CollectionHeaderStyle = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
|
||||
'& > svg': {
|
||||
display: 'flex',
|
||||
},
|
||||
});
|
||||
|
||||
const CollectionName = styled.h2(({ theme }) => ({
|
||||
width: `calc(100% - (${paddingLeft} + ${paddingRight}))`,
|
||||
color: theme.colors.primary,
|
||||
display: 'flex',
|
||||
gap: '0.35em',
|
||||
alignItems: 'center',
|
||||
|
||||
[`@media (max-width: ${theme.media.tablet})`]: {
|
||||
width: `calc(100% - (${paddingLeft} + ${paddingRight} + 1.75em))`,
|
||||
},
|
||||
}));
|
||||
|
||||
const LinksCount = styled.div(({ theme }) => ({
|
||||
minWidth: 'fit-content',
|
||||
fontWeight: 300,
|
||||
fontSize: '0.8em',
|
||||
color: theme.colors.grey,
|
||||
}));
|
||||
|
||||
export default function CollectionHeader({
|
||||
showButtons,
|
||||
showControls = true,
|
||||
openNavigationItem,
|
||||
openCollectionItem,
|
||||
}: CollectionHeaderProps) {
|
||||
const { t } = useTranslation('common');
|
||||
const { activeCollection } = useActiveCollection();
|
||||
|
||||
if (!activeCollection) return <Fragment />;
|
||||
|
||||
const { name, links, visibility } = activeCollection;
|
||||
return (
|
||||
<CollectionHeaderWrapper>
|
||||
<CollectionHeaderStyle>
|
||||
{showButtons && openNavigationItem && openNavigationItem}
|
||||
<CollectionName title={name}>
|
||||
<TextEllipsis>{name}</TextEllipsis>
|
||||
{links.length > 0 && <LinksCount> — {links.length}</LinksCount>}
|
||||
<VisibilityBadge
|
||||
label={t('collection.visibility')}
|
||||
visibility={visibility}
|
||||
/>
|
||||
</CollectionName>
|
||||
{showControls && (
|
||||
<CollectionControls collectionId={activeCollection.id} />
|
||||
)}
|
||||
{showButtons && openCollectionItem && openCollectionItem}
|
||||
</CollectionHeaderStyle>
|
||||
{activeCollection.description && <CollectionDescription />}
|
||||
</CollectionHeaderWrapper>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user