From 21fd0ca8655667868fe09b0c69c55d8863e14e1c Mon Sep 17 00:00:00 2001
From: rayzhou-bit <rayzhou12.12@gmail.com>
Date: Fri, 10 May 2024 04:04:16 -0700
Subject: [PATCH] view options

---
 src/assets/icons/condense-disabled.svg        | 18 ++++++
 src/assets/icons/condense-enabled.svg         | 18 ++++++
 src/assets/icons/expand-disabled.svg          | 18 ++++++
 src/assets/icons/expand-enabled.svg           | 18 ++++++
 .../Dropdowns/ActionDropdown.jsx              |  2 +-
 src/components/Card/LibraryCard.jsx           |  8 ++-
 src/components/Card/LibraryContent.jsx        |  5 +-
 src/components/Library/FilterBar.jsx          | 36 ++++++-----
 src/components/Library/ViewBar.jsx            | 60 +++++++++++++++++++
 src/components/Library/hooks.js               | 45 +++++++++-----
 src/components/Library/index.jsx              | 24 +++++---
 src/components/Library/index.scss             | 46 ++++++++++++--
 12 files changed, 247 insertions(+), 51 deletions(-)
 create mode 100644 src/assets/icons/condense-disabled.svg
 create mode 100644 src/assets/icons/condense-enabled.svg
 create mode 100644 src/assets/icons/expand-disabled.svg
 create mode 100644 src/assets/icons/expand-enabled.svg
 create mode 100644 src/components/Library/ViewBar.jsx

diff --git a/src/assets/icons/condense-disabled.svg b/src/assets/icons/condense-disabled.svg
new file mode 100644
index 0000000..ae36e56
--- /dev/null
+++ b/src/assets/icons/condense-disabled.svg
@@ -0,0 +1,18 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_5033_1616)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V8C17 10.2091 15.2091 12 13 12H4C1.79086 12 0 10.2091 0 8V4Z" fill="white"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H13C14.6569 1 16 2.34315 16 4V8C16 9.65685 14.6569 11 13 11H4C2.34315 11 1 9.65685 1 8V4Z" stroke="#D7D6D6" stroke-width="2"/>
+</g>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V4.65517H0V4Z" fill="#D7D6D6"/>
+<defs>
+<filter id="filter0_d_5033_1616" x="0" y="0" width="17" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5033_1616"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5033_1616" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/condense-enabled.svg b/src/assets/icons/condense-enabled.svg
new file mode 100644
index 0000000..ed11fb0
--- /dev/null
+++ b/src/assets/icons/condense-enabled.svg
@@ -0,0 +1,18 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_5033_1581)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V8C17 10.2091 15.2091 12 13 12H4C1.79086 12 0 10.2091 0 8V4Z" fill="white"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H13C14.6569 1 16 2.34315 16 4V8C16 9.65685 14.6569 11 13 11H4C2.34315 11 1 9.65685 1 8V4Z" stroke="#363B4E" stroke-width="2"/>
+</g>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V4.65517H0V4Z" fill="#363B4E"/>
+<defs>
+<filter id="filter0_d_5033_1581" x="0" y="0" width="17" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5033_1581"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5033_1581" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/expand-disabled.svg b/src/assets/icons/expand-disabled.svg
new file mode 100644
index 0000000..a2282f3
--- /dev/null
+++ b/src/assets/icons/expand-disabled.svg
@@ -0,0 +1,18 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_3195_1531)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V11C17 13.2091 15.2091 15 13 15H4C1.79086 15 0 13.2091 0 11V4Z" fill="white"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H13C14.6569 1 16 2.34315 16 4V11C16 12.6569 14.6569 14 13 14H4C2.34315 14 1 12.6569 1 11V4Z" stroke="#D7D6D6" stroke-width="2"/>
+</g>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V4.65517H0V4Z" fill="#D7D6D6"/>
+<defs>
+<filter id="filter0_d_3195_1531" x="0" y="0" width="17" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3195_1531"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3195_1531" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/expand-enabled.svg b/src/assets/icons/expand-enabled.svg
new file mode 100644
index 0000000..a04eae7
--- /dev/null
+++ b/src/assets/icons/expand-enabled.svg
@@ -0,0 +1,18 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_3195_1536)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V11C17 13.2091 15.2091 15 13 15H4C1.79086 15 0 13.2091 0 11V4Z" fill="white"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H13C14.6569 1 16 2.34315 16 4V11C16 12.6569 14.6569 14 13 14H4C2.34315 14 1 12.6569 1 11V4Z" stroke="#363B4E" stroke-width="2"/>
+</g>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H13C15.2091 0 17 1.79086 17 4V4.65517H0V4Z" fill="#363B4E"/>
+<defs>
+<filter id="filter0_d_3195_1536" x="0" y="0" width="17" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3195_1536"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3195_1536" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components-shared/Dropdowns/ActionDropdown.jsx b/src/components-shared/Dropdowns/ActionDropdown.jsx
index b59399d..61457f5 100644
--- a/src/components-shared/Dropdowns/ActionDropdown.jsx
+++ b/src/components-shared/Dropdowns/ActionDropdown.jsx
@@ -6,7 +6,7 @@ import useOutsideClick from '../../utils/useOutsideClick';
 /*
   Each item in the items array should be similar to the following object:
   {
-    title: 'Move to unsorted',
+    title: 'Move to library',
     type: ACTION_TYPE.danger,
     callback: () => dispatch(actions.project.unlinkCardFromView({ id: cardId })),
     icon: LibraryIcon,
diff --git a/src/components/Card/LibraryCard.jsx b/src/components/Card/LibraryCard.jsx
index b690c2d..7951b22 100644
--- a/src/components/Card/LibraryCard.jsx
+++ b/src/components/Card/LibraryCard.jsx
@@ -7,7 +7,10 @@ import LibraryContent from './LibraryContent';
 
 import './LibraryCard.scss';
 
-const LibraryCard = ({ cardId }) => {
+const LibraryCard = ({
+  cardId,
+  isExpanded,
+}) => {
   const {
     libraryCardRef,
     isActive,
@@ -20,7 +23,7 @@ const LibraryCard = ({ cardId }) => {
     onAnimationEnd,
     onClick,
   } = useLibraryCardHooks({
-    cardId
+    cardId,
   });
 
   return (
@@ -42,6 +45,7 @@ const LibraryCard = ({ cardId }) => {
         <LibraryContent
           cardId={cardId}
           setEditingCard={setIsEditing}
+          isExpanded={isExpanded}
           isSelected={isSelected}
         />
       {/* </div> */}
diff --git a/src/components/Card/LibraryContent.jsx b/src/components/Card/LibraryContent.jsx
index 272bd59..d894bb8 100644
--- a/src/components/Card/LibraryContent.jsx
+++ b/src/components/Card/LibraryContent.jsx
@@ -6,6 +6,7 @@ import './LibraryCard.scss';
 
 const LibraryContent = ({
   cardId,
+  isExpanded,
   isSelected,
   setEditingCard,
 }) => {
@@ -36,10 +37,10 @@ const LibraryContent = ({
   return (
     <div
       className='library-card-content-container'
-      style={isSelected ? expandedStyle : condensedStyle}
+      style={(isSelected || isExpanded) ? expandedStyle : condensedStyle}
     >
       <textarea
-        className={`library-card-textarea ${isSelected ? "selected" : ""}`}
+        className={`library-card-textarea ${(isSelected || isExpanded) ? "selected" : ""}`}
         onBlur={endContentEdit}
         onChange={(e) => changeContentValue(e.target.value)}
         onClick={beginContentEdit}
diff --git a/src/components/Library/FilterBar.jsx b/src/components/Library/FilterBar.jsx
index 580ddd6..2c51191 100644
--- a/src/components/Library/FilterBar.jsx
+++ b/src/components/Library/FilterBar.jsx
@@ -6,10 +6,12 @@ import '../../styles/colors.scss';
 import { CARD_COLOR_KEYS } from '../../styles/colors';
 
 const FilterBar = ({
-  filterOption,
-  setFilterOption,
-  filterColor,
-  setFilterColor,
+  isColorFiltered,
+  setIsColorFiltered,
+  filterColorOption,
+  setFilterColorOption,
+  filterTabOption,
+  setFilterTabOption,
 }) => {
   const {
     colorDropdownBtnRef,
@@ -26,37 +28,41 @@ const FilterBar = ({
       <div className='selections'>
         <div className='color-selection'>
           <button
-            className={`option ${filterOption === FILTER_OPTIONS.color ? 'selected' : null}`}
-            onClick={() => setFilterOption(FILTER_OPTIONS.color)}
+            className={`option ${isColorFiltered ? 'selected' : null}`}
+            onClick={() => setIsColorFiltered(!isColorFiltered)}
           >
             <span>Color</span>
-            <button className={`color-display ${CARD_COLOR_KEYS[filterColor] ?? '#F4F4F4'}`} onClick={() => openColorDropdown()} ref={colorDropdownBtnRef} />
+            <button
+              className={`color-display ${CARD_COLOR_KEYS[filterColorOption] ?? '#F4F4F4'}`}
+              onClick={(event) => openColorDropdown(event)}
+              ref={colorDropdownBtnRef}
+            />
           </button>
           <ColorDropdown
             btnRef={colorDropdownBtnRef}
             isOpen={isColorDropdownOpen}
             message="Filter by card color"
             onClose={closeColorDropdown}
-            onUpdateColor={setFilterColor}
-            selectedColor={filterColor}
+            onUpdateColor={setFilterColorOption}
+            selectedColor={filterColorOption}
           />
         </div>
         <div className='divider' />
         <button
-          className={`option ${filterOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.thisTab)}
+          className={`option ${filterTabOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
+          onClick={() => setFilterTabOption(FILTER_OPTIONS.thisTab)}
         >
           <span>In this tab</span>
         </button>
         <button
-          className={`option ${filterOption === FILTER_OPTIONS.all ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.all)}
+          className={`option ${filterTabOption === FILTER_OPTIONS.allTab ? 'selected' : null}`}
+          onClick={() => setFilterTabOption(FILTER_OPTIONS.allTab)}
         >
           <span>In all tabs</span>
         </button>
         <button
-          className={`option ${filterOption === FILTER_OPTIONS.unsorted ? 'selected' : null}`}
-          onClick={() => setFilterOption(FILTER_OPTIONS.unsorted)}
+          className={`option ${filterTabOption === FILTER_OPTIONS.noTab ? 'selected' : null}`}
+          onClick={() => setFilterTabOption(FILTER_OPTIONS.noTab)}
         >
           <span>In no tabs</span>
         </button>
diff --git a/src/components/Library/ViewBar.jsx b/src/components/Library/ViewBar.jsx
new file mode 100644
index 0000000..43e6fcd
--- /dev/null
+++ b/src/components/Library/ViewBar.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { VIEW_OPTIONS } from './hooks';
+
+import './index.scss';
+import EnabledCondenseIcon from '../../assets/icons/condense-enabled.svg';
+import DisabledCondenseIcon from '../../assets/icons/condense-disabled.svg';
+import EnabledExpandIcon from '../../assets/icons/expand-enabled.svg';
+import DisabledExpandIcon from '../../assets/icons/expand-disabled.svg';
+
+const ViewBar = ({
+  viewOption,
+  setViewOption,
+}) => {
+
+  return (
+    <div className='option-row'>
+      <div className='horizontal-bar' />
+      <button
+        className='option'
+        onClick={() => setViewOption(VIEW_OPTIONS.condensed)}
+      >
+        <img src={viewOption === VIEW_OPTIONS.condensed ? DisabledCondenseIcon : EnabledCondenseIcon} />
+      </button>
+      <button
+        className='option'
+        onClick={() => setViewOption(VIEW_OPTIONS.expanded)}
+      >
+        <img src={viewOption === VIEW_OPTIONS.expanded ? DisabledExpandIcon : EnabledExpandIcon} />
+      </button>
+      {/* <div className='selections'>
+        <button
+          className={`option ${sortOption === SORT_OPTIONS.abc ? 'selected' : null}`}
+          onClick={() => setSortOption(SORT_OPTIONS.abc)}
+        >
+          <span>ABC</span>
+        </button>
+        <button
+          className={`option ${sortOption === SORT_OPTIONS.zxy ? 'selected' : null}`}
+          onClick={() => setSortOption(SORT_OPTIONS.zxy)}
+        >
+          <span>ZXY</span>
+        </button>
+        <button
+          className={`option ${sortOption === SORT_OPTIONS.newest ? 'selected' : null}`}
+          onClick={() => setSortOption(SORT_OPTIONS.newest)}
+        >
+          <span>Newest</span>
+        </button>
+        <button
+          className={`option ${sortOption === SORT_OPTIONS.oldest ? 'selected' : null}`}
+          onClick={() => setSortOption(SORT_OPTIONS.oldest)}
+        >
+          <span>Oldest</span>
+        </button>
+      </div> */}
+    </div>
+  );
+};
+
+export default ViewBar;
\ No newline at end of file
diff --git a/src/components/Library/hooks.js b/src/components/Library/hooks.js
index f7c7432..95b0c43 100644
--- a/src/components/Library/hooks.js
+++ b/src/components/Library/hooks.js
@@ -3,10 +3,9 @@ import { useSelector } from 'react-redux';
 import { CARD_COLOR_KEYS } from '../../styles/colors';
 
 export const FILTER_OPTIONS = {
-  all: 'all',
-  color: 'color',
+  allTab: 'allTab',
+  noTab: 'noTab',
   thisTab: 'thisTab',
-  unsorted: 'unsorted',
 };
 
 export const SORT_OPTIONS = {
@@ -33,15 +32,20 @@ const hasSearch = (card, search) => {
   return false;
 };
 
-const hasFilter = (card, filter, color, tab, allTabs) => {
+const hasColor = (card, isFiltered, color) => {
+  if (isFiltered) {
+    return CARD_COLOR_KEYS[color] === card?.color;
+  }
+  return true;
+};
+
+const hasTab = (card, filter, tab, allTabs) => {
   switch(filter) {
     case FILTER_OPTIONS.thisTab:
       return !!card?.views?.[tab];
-    case FILTER_OPTIONS.all:
+    case FILTER_OPTIONS.allTab:
       return true;
-    case FILTER_OPTIONS.color:
-      return CARD_COLOR_KEYS[color] === card?.color;
-    case FILTER_OPTIONS.unsorted:
+    case FILTER_OPTIONS.noTab:
       const cardTabs = Object.keys(card?.views);
       const intersection = allTabs.filter(tab => cardTabs.includes(tab));
       return intersection.length === 0;
@@ -86,15 +90,19 @@ export const useLibraryHooks = () => {
 
   const [ isOpen, setIsOpen ] = useState(false);
   const [ searchString, setSearchString ] = useState('');
-  const [ filterOption, setFilterOption ] = useState(FILTER_OPTIONS.all);
-  const [ filterColor, setFilterColor ] = useState('');
+  const [ isColorFiltered, setIsColorFiltered ] = useState(false);
+  const [ filterColorOption, setFilterColorOption ] = useState(CARD_COLOR_KEYS.gray);
+  const [ filterTabOption, setFilterTabOption ] = useState(FILTER_OPTIONS.allTab);
   const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
   const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
 
   let libraryCards = [];
   for (let id in cardCollection) {
     const card = cardCollection[id];
-    if (hasSearch(card, searchString) && hasFilter(card, filterOption, filterColor, activeTab, tabOrder)) {
+    if (hasSearch(card, searchString)
+      && hasColor(card, isColorFiltered, filterColorOption)
+      && hasTab(card, filterTabOption, activeTab, tabOrder)
+    ) {
       libraryCards = [ ...libraryCards, id ];
     }
   }
@@ -104,10 +112,12 @@ export const useLibraryHooks = () => {
     isOpen,
     toggleLibrary: () => setIsOpen(!isOpen),
     setSearchString,
-    filterOption,
-    setFilterOption,
-    filterColor,
-    setFilterColor,
+    isColorFiltered,
+    setIsColorFiltered,
+    filterColorOption,
+    setFilterColorOption,
+    filterTabOption,
+    setFilterTabOption,
     sortOption,
     setSortOption,
     viewOption,
@@ -123,7 +133,10 @@ export const useColorDropdownHooks = () => {
   return {
     colorDropdownBtnRef,
     isColorDropdownOpen,
-    openColorDropdown: () => setIsColorDropdownOpen(!isColorDropdownOpen),
+    openColorDropdown: (event) => {
+      event.stopPropagation();
+      setIsColorDropdownOpen(!isColorDropdownOpen);
+    },
     closeColorDropdown: () => setIsColorDropdownOpen(false),
   };
 };
diff --git a/src/components/Library/index.jsx b/src/components/Library/index.jsx
index 5623969..9423064 100644
--- a/src/components/Library/index.jsx
+++ b/src/components/Library/index.jsx
@@ -2,10 +2,11 @@ import React from 'react';
 
 import FilterBar from './FilterBar';
 import SortBar from './SortBar';
+import ViewBar from './ViewBar';
 import LibraryCard from '../Card/LibraryCard';
 import LibrarySearch from './LibrarySearch';
 
-import { useLibraryHooks } from './hooks';
+import { VIEW_OPTIONS, useLibraryHooks } from './hooks';
 
 import './index.scss';
 import LibraryIcon from '../../assets/icons/library.svg';
@@ -15,10 +16,12 @@ const Library = () => {
     isOpen,
     toggleLibrary,
     setSearchString,
-    filterOption,
-    setFilterOption,
-    filterColor,
-    setFilterColor,
+    isColorFiltered,
+    setIsColorFiltered,
+    filterColorOption,
+    setFilterColorOption,
+    filterTabOption,
+    setFilterTabOption,
     sortOption,
     setSortOption,
     viewOption,
@@ -26,7 +29,9 @@ const Library = () => {
     libraryCards,
   } = useLibraryHooks();
 
-  const cardComponents = libraryCards.map(id => <LibraryCard key={id} cardId={id} />);
+  const cardComponents = libraryCards.map(id =>
+    <LibraryCard key={id} cardId={id} isExpanded={viewOption === VIEW_OPTIONS.expanded} />
+  );
 
   return (
     <div className={`library ${isOpen ? 'open': 'close'}`}>
@@ -38,11 +43,12 @@ const Library = () => {
         */}
         {/* <SearchBar setSearchString={setSearchString} /> */}
         <FilterBar
-          filterOption={filterOption} setFilterOption={setFilterOption}
-          filterColor={filterColor} setFilterColor={setFilterColor}
+          isColorFiltered={isColorFiltered} setIsColorFiltered={setIsColorFiltered}
+          filterColorOption={filterColorOption} setFilterColorOption={setFilterColorOption}
+          filterTabOption={filterTabOption} setFilterTabOption={setFilterTabOption}
         />
         <SortBar sortOption={sortOption} setSortOption={setSortOption} />
-        {/* <ViewBar viewOption={viewOption} setViewOption={setViewOption} /> */}
+        <ViewBar viewOption={viewOption} setViewOption={setViewOption} />
         <div className='library-card-container'>
           {cardComponents}
         </div>
diff --git a/src/components/Library/index.scss b/src/components/Library/index.scss
index 3f81324..21fb051 100644
--- a/src/components/Library/index.scss
+++ b/src/components/Library/index.scss
@@ -24,12 +24,6 @@ $library-width: 35vw;
   gap: 13px;
 }
 
-.libary-card-container {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 20px;
-}
-
 .library-btn {
   position: absolute;
   top: 3%;
@@ -119,8 +113,48 @@ $library-width: 35vw;
   }
 }
 
+.option-row {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: right;
+  gap: 2px;
+
+  .horizontal-bar {
+    margin: auto 0;
+    height: 0;
+    border: 1px solid #D7D6D6;
+    flex: 1;
+  }
+
+  .option {
+    background-color: white;
+    border-radius: 8px;
+    padding: 5px;
+    &:hover { background-color: #DBE2EB;}
+  }
+}
+
+$shift-right: 16px;
+$scrollbar-width: 8px;
+$scrollbar-border: calc(($shift-right - $scrollbar-width) / 2);
+$scrollbar-radius: 6px + $scrollbar-border;
+
 .library-card-container {
   display: flex;
   flex-flow: column nowrap;
   gap: 20px;
+  overflow-y: scroll;
+  padding: 5px;
+  margin-right: -$shift-right;
+
+  &::-webkit-scrollbar {
+    position: absolute;
+    left: 0;
+    width: $shift-right;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #E5E5E5;
+    border: $scrollbar-border solid white;
+    border-radius: $scrollbar-radius;
+  }
 }