added show more for top tags component

client/src/screens/LinkList/LinkListScreen.tsx

@@ -1,5 +1,5 @@
 import LinkInfiniteScrollList from './LinkInfiniteScrollList.tsx';
-import LinkListToolbar from '../../components/LinkListToolbar/LinkListToolbar.tsx';
+import LinkListToolbar from './LinkListToolbar/LinkListToolbar.tsx';
 
 const LinkListScreen = () => {
     return (

client/src/components/LinkListToolbar/LinkListToolbar.tsx → client/src/screens/LinkList/LinkListToolbar/LinkListToolbar.tsx

@@ -1,9 +1,9 @@
 import TopTagsList from './components/TopTagsList.tsx';
 import SearchByTitleInput from './components/SearchByTitleInput.tsx';
 import UserInteractionsFilter from './components/UserInteractionsFilter.tsx';
-import {useLinkStore} from '../../contexts/AppContext.tsx';
-import TagSearchInput from '../LinkListItem/TagSearchInput.tsx';
 import { observer } from 'mobx-react-lite';
+import TagSearchInput from '../../../components/LinkListItem/TagSearchInput.tsx';
+import {useLinkStore} from '../../../contexts/AppContext.tsx';
 
 const LinkListToolbar = observer(() => {
     const { toggleTagFilter, state: { filter: { tags }} } = useLinkStore();

client/src/components/LinkListToolbar/components/SearchByTitleInput.tsx → client/src/screens/LinkList/LinkListToolbar/components/SearchByTitleInput.tsx

@@ -1,10 +1,11 @@
-import Button from '../../Button.tsx';
-import SearchIcon from '../../SearchIcon.tsx';
-import {useLinkStore} from '../../../contexts/AppContext.tsx';
-import useDebounce from '../../../hooks/useDebounce.ts';
-import {observer} from 'mobx-react-lite';
-import FloatingInputWrapper from '../../FloatingInput/FloatingInputWrapper.tsx';
-import FloatingInput from '../../FloatingInput/FloatingInput.tsx';
+import {observer} from 'mobx-react-lite';
+import {useLinkStore} from '../../../../contexts/AppContext.tsx';
+import useDebounce from '../../../../hooks/useDebounce.ts';
+import FloatingInputWrapper from '../../../../components/FloatingInput/FloatingInputWrapper.tsx';
+import SearchIcon from '../../../../components/SearchIcon.tsx';
+import FloatingInput from '../../../../components/FloatingInput/FloatingInput.tsx';
+import Button from '../../../../components/Button.tsx';
+
 
 const SearchByTitleInput = observer(() => {
     const { setFilterTitle, getList, state: { filter: { title }}} = useLinkStore();

client/src/screens/LinkList/LinkListToolbar/components/TopTagsList.tsx

@@ -0,0 +1,44 @@
+import {observer} from 'mobx-react-lite';
+import Skeleton from '../../../../components/Skeleton.tsx';
+import TagBadge from '../../../../components/TagBadge.tsx';
+import {useLinkStore} from '../../../../contexts/AppContext.tsx';
+import {useMemo, useState} from 'react';
+
+const MaxTagsShown = 6;
+
+const TopTagsList = observer(() => {
+    const { sortedTags, state: { tags, filter: { tags: appliedTags }, isListLoading }, toggleTagFilter } = useLinkStore();
+    const [showAll, setShowAll] = useState(false);
+    const tagList = useMemo(() => showAll ? sortedTags : sortedTags.slice(0, MaxTagsShown), [showAll, sortedTags]);
+
+    const showSkeletons = isListLoading && tags.length === 0;
+    return (
+        <>
+            { showSkeletons && (
+                <div className="flex flex-col justify-center items-center w-full gap-2">
+                    <Skeleton className="w-full" />
+                    <Skeleton className="w-full" />
+                </div>
+            ) || <div className="flex flex-row flex-wrap justify-center gap-3 items-center">
+                { appliedTags.map((tag) => (
+                    <TagBadge key={tag} onClick={() => toggleTagFilter(tag)} name={tag} removable active />
+                ))}
+                { tagList.filter(x => !appliedTags.some(e => e === x.name)).map((tag) => (
+                    <TagBadge key={tag.name} {...tag} onClick={() => toggleTagFilter(tag.name)} />
+                )) }
+                { !showAll && sortedTags.length > MaxTagsShown && (
+                    <button onClick={() => setShowAll(true)} className="py-1 font-semibold text-zinc-500 hover:text-zinc-300">
+                        show more
+                    </button>
+                )}
+                { showAll && (
+                    <button onClick={() => setShowAll(false)} className="py-1 font-semibold text-zinc-500 hover:text-zinc-300">
+                        show less
+                    </button>
+                )}
+            </div>}
+        </>
+    );
+});
+
+export default TopTagsList;

client/src/components/LinkListToolbar/components/UserInteractionsFilter.tsx → client/src/screens/LinkList/LinkListToolbar/components/UserInteractionsFilter.tsx

@@ -1,7 +1,7 @@
 import {observer} from 'mobx-react-lite';
-import {useLinkStore} from '../../../contexts/AppContext.tsx';
+import {useLinkStore} from '../../../../contexts/AppContext.tsx';
 import {PropsWithChildren} from 'react';
-import Button from '../../Button.tsx';
+import Button from '../../../../components/Button.tsx';
 
 type UserInteractionButtonProps = {
     onClick: () => void;