various fixes from testing new user path

src/components/Library/FilterBar.jsx

@@ -32,7 +32,7 @@ const FilterBar = ({
             onClick={() => setIsColorFiltered(!isColorFiltered)}
           >
             <span>Color</span>
-            <button
+            <div
               className={`color-display ${CARD_COLOR_KEYS[filterColorOption] ?? '#F4F4F4'}`}
               onClick={(event) => openColorDropdown(event)}
               ref={colorDropdownBtnRef}

src/components/Library/hooks.js

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { CARD_COLOR_KEYS } from '../../styles/colors';
 
@@ -87,7 +87,9 @@ export const useLibraryHooks = () => {
   const activeTab = useSelector(state => state.project.present.activeViewId);
   const tabOrder = useSelector(state => state.project.present.viewOrder);
   const cardCollection = useSelector(state => state.project.present.cards);
+  const activeProject = useSelector(state => state.session.activeCampaignId || '');
 
+  const [ showButton, setShowButton ] = useState(!!activeProject);
   const [ isOpen, setIsOpen ] = useState(false);
   const [ searchString, setSearchString ] = useState('');
   const [ isColorFiltered, setIsColorFiltered ] = useState(false);
@@ -96,6 +98,12 @@ export const useLibraryHooks = () => {
   const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
   const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
 
+  // Reset when project changes
+  useEffect(() => {
+    setShowButton(!!activeProject);
+    setIsOpen(false);
+  }, [activeProject]);
+
   let libraryCards = [];
   for (let id in cardCollection) {
     const card = cardCollection[id];
@@ -109,6 +117,7 @@ export const useLibraryHooks = () => {
   libraryCards = sortCards(libraryCards, sortOption, cardCollection);
 
   return {
+    showButton,
     isOpen,
     toggleLibrary: () => setIsOpen(!isOpen),
     countDisplay: (libraryCards?.length ?? 0) + '/' + (cardCollection ? Object.keys(cardCollection).length : 0),

src/components/Library/index.jsx

@@ -14,6 +14,7 @@ import OpenLibraryIcon from '../../assets/icons/library-open.svg';
 
 const Library = () => {
   const {
+    showButton,
     isOpen,
     toggleLibrary,
     countDisplay,
@@ -64,7 +65,11 @@ const Library = () => {
           {cardComponents}
         </div>
       </div>
-      <button className='library-btn' onClick={toggleLibrary}>
+      <button
+        className='library-btn'
+        onClick={toggleLibrary}
+        style={{ display: showButton ? 'block' : 'none' }}
+      >
         <img src={isOpen ? OpenLibraryIcon : ClosedLibraryIcon} alt='Library' />
         <span className='tooltip'>Library of cards</span>
       </button>

src/data/api/database.js

@@ -107,7 +107,7 @@ export const firstTimeSetup = () => dispatch => {
 };
 
 const saveActiveProjectId = (id, callback) => dispatch => {
-  updateDoc(userDoc(), { activeCampaignId: id })
+  setDoc(userDoc(), { activeCampaignId: id })
     .then(response => {
       console.log('[saveActiveProjectId] success');
       if (callback) {