feat: add collection list

inertia/components/common/dropdown/dropdown.tsx

@@ -8,35 +8,39 @@ import useClickOutside from '~/hooks/use_click_outside';
 import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
 import useToggle from '~/hooks/use_modal';
 
-const DropdownStyle = styled.div<{ opened: boolean }>(({ opened, theme }) => ({
+const DropdownStyle = styled.div<{ opened: boolean; svgSize?: number }>(
-  cursor: 'pointer',
+  ({ opened, theme, svgSize = 24 }) => ({
-  userSelect: 'none',
+    cursor: 'pointer',
-  position: 'relative',
+    userSelect: 'none',
-  minWidth: 'fit-content',
+    position: 'relative',
-  width: 'fit-content',
+    minWidth: 'fit-content',
-  maxWidth: '250px',
+    width: 'fit-content',
-  backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
+    maxWidth: '250px',
-  padding: '4px',
+    backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
-  borderRadius: theme.border.radius,
+    padding: '4px',
+    borderRadius: theme.border.radius,
 
-  '&:hover': {
+    '&:hover': {
-    backgroundColor: theme.colors.secondary,
+      backgroundColor: theme.colors.secondary,
-  },
+    },
 
-  '& svg': {
+    '& svg': {
-    height: '24px',
+      height: `${svgSize}px`,
-    width: '24px',
+      width: `${svgSize}px`,
-  },
+    },
-}));
+  })
+);
 
 export default function Dropdown({
   children,
   label,
   className,
+  svgSize,
 }: {
   children: ReactNode;
   label: ReactNode | string;
   className?: string;
+  svgSize?: number;
 }) {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { isShowing, toggle, close } = useToggle();
@@ -55,6 +59,7 @@ export default function Dropdown({
       onClick={toggle}
       ref={dropdownRef}
       className={className}
+      svgSize={svgSize}
     >
       <DropdownLabel>{label}</DropdownLabel>
       <DropdownContainer show={isShowing}>{children}</DropdownContainer>

inertia/components/dashboard/collection/collection_container.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 import { RxHamburgerMenu } from 'react-icons/rx';
-import CollectionControls from '~/components/dashboard/collection/collection_controls';
+import CollectionControls from '~/components/dashboard/collection/header/collection_controls';
-import CollectionDescription from '~/components/dashboard/collection/collection_description';
+import CollectionDescription from '~/components/dashboard/collection/header/collection_description';
-import CollectionHeader from '~/components/dashboard/collection/collection_header';
+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';

inertia/components/dashboard/collection/header/collection_controls.tsx

@@ -7,7 +7,7 @@ import Dropdown from '~/components/common/dropdown/dropdown';
 import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
 
 const CollectionControls = () => (
-  <Dropdown label={<BsThreeDotsVertical />}>
+  <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
     <DropdownItemLink href={PATHS.LINK.CREATE}>
       <IoIosAddCircleOutline /> Add
     </DropdownItemLink>

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

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import { Item } from '~/components/dashboard/side_nav/nav_item';
+
+const CollectionItem = styled(Item)(({ theme }) => ({
+  backgroundColor: theme.colors.secondary,
+}));
+
+export default CollectionItem;

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

@@ -0,0 +1,66 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
+import TextEllipsis from '~/components/common/text_ellipsis';
+import CollectionItem from '~/components/dashboard/collection/list/collection_item';
+import CollectionListContainer from '~/components/dashboard/collection/list/collection_list_container';
+import useActiveCollection from '~/hooks/use_active_collection';
+import useCollections from '~/hooks/use_collections';
+
+const SideMenu = styled.nav(({ theme }) => ({
+  height: '100%',
+  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,
+}));
+const CollectionListStyle = styled.div({
+  padding: '1px',
+  paddingRight: '5px',
+  display: 'flex',
+  flex: 1,
+  gap: '.35em',
+  flexDirection: 'column',
+  overflow: 'auto',
+});
+
+export default function CollectionList() {
+  const { activeCollection, setActiveCollection } = useActiveCollection();
+  const { collections } = useCollections();
+  const theme = useTheme();
+  return (
+    <SideMenu>
+      <CollectionListContainer>
+        <CollectionLabel>Collections • {collections.length}</CollectionLabel>
+        <CollectionListStyle>
+          {collections.map((collection) => (
+            <CollectionItem
+              css={{
+                cursor: 'pointer',
+                color:
+                  activeCollection?.id === collection.id
+                    ? theme.colors.primary
+                    : theme.colors.font,
+              }}
+              onClick={() => setActiveCollection(collection)}
+              key={collection.id}
+            >
+              {collection.id === activeCollection?.id ? (
+                <AiFillFolderOpen size={24} />
+              ) : (
+                <AiOutlineFolder size={24} />
+              )}
+              <TextEllipsis>{collection.name}</TextEllipsis>
+            </CollectionItem>
+          ))}
+        </CollectionListStyle>
+      </CollectionListContainer>
+    </SideMenu>
+  );
+}

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

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

inertia/components/dashboard/link/link_controls.tsx

@@ -66,6 +66,7 @@ export default function LinkControls({ link }: { link: Link }) {
     <Dropdown
       label={<BsThreeDotsVertical css={{ color: theme.colors.grey }} />}
       css={{ backgroundColor: theme.colors.secondary }}
+      svgSize={18}
     >
       <StartItem onClick={onFavorite}>
         {!link.favorite ? (

inertia/components/dashboard/side_nav/nav_item.tsx

@@ -4,7 +4,7 @@ import { Link } from '@inertiajs/react';
 export const Item = styled.div(({ theme }) => ({
   userSelect: 'none',
   height: '40px',
-  width: '280px',
+  width: '250px',
   color: theme.colors.font,
   backgroundColor: theme.colors.background,
   padding: '8px 12px',

inertia/components/dashboard/side_nav/user_card.tsx

@@ -8,7 +8,12 @@ export default function UserCard() {
   return (
     isAuthenticated && (
       <Item className="disable-hover">
-        <RoundedImage src={user.avatarUrl} width={24} alt={altImage} />
+        <RoundedImage
+          src={user.avatarUrl}
+          width={24}
+          alt={altImage}
+          referrerPolicy="no-referrer"
+        />
         {user.nickName}
       </Item>
     )

inertia/pages/dashboard.tsx

@@ -8,6 +8,7 @@ import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSwipeable } from 'react-swipeable';
 import CollectionContainer from '~/components/dashboard/collection/collection_container';
+import CollectionList from '~/components/dashboard/collection/list/collection_list';
 import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
 import SwiperHandler from '~/components/dashboard/swiper_handler';
 import DashboardLayout from '~/components/layouts/dashboard_layout';
@@ -55,6 +56,7 @@ export default function DashboardPage(props: Readonly<DashboardPageProps>) {
             </SideBar>
           )}
           <CollectionContainer isMobile={isMobile} openSideMenu={open} />
+          <CollectionList />
         </SwiperHandler>
       </DashboardProviders>
     </DashboardLayout>