Refactor collection selection component and update navbar styling

components/CollectionListing.tsx

@@ -15,7 +15,7 @@ type Props = {
   links: boolean;
 };
 
-const CollectionSelection = ({ links }: Props) => {
+const CollectionListing = ({ links }: Props) => {
   const { collections } = useCollectionStore();
   const { account, updateAccount } = useAccountStore();
   // Use local state to store the collection order so we don't have to wait for a response from the API to update the UI
@@ -29,30 +29,38 @@ const CollectionSelection = ({ links }: Props) => {
     setActive(router.asPath);
     setLocalCollectionOrder(account.collectionOrder || []);
 
-    if (!account.collectionOrder || account.collectionOrder.length === 0) {
-      updateAccount({
-        ...account,
-        collectionOrder: collections
-          .filter((e) => e.parentId === null) // Filter out collections with non-null parentId
-          .map((e) => e.id as number), // Use "as number" to assert that e.id is a number
-      });
-    }
-
     // if a collection wasn't in the collectionOrder, add it to the end
-    collections.forEach((collection) => {
+    if (account.username) {
-      if (
+      if (!account.collectionOrder || account.collectionOrder.length === 0)
-        !account.collectionOrder.includes(collection.id as number) &&
-        (!collection.parentId || collection.ownerId !== account.id)
-      ) {
         updateAccount({
           ...account,
-          collectionOrder: [
+          collectionOrder: collections
-            ...account.collectionOrder,
+            .filter((e) => e.parentId === null) // Filter out collections with non-null parentId
-            collection.id as number,
+            .map((e) => e.id as number), // Use "as number" to assert that e.id is a number
-          ],
         });
+      else {
+        const newCollectionOrder: number[] = [
+          ...(account.collectionOrder || []),
+        ];
+
+        collections?.forEach((collection) => {
+          if (
+            account.username &&
+            !newCollectionOrder.includes(collection.id as number) &&
+            (!collection.parentId || collection.ownerId !== account.id)
+          ) {
+            newCollectionOrder.push(collection.id as number);
+          }
+        });
+
+        if (newCollectionOrder.length > account.collectionOrder.length) {
+          updateAccount({
+            ...account,
+            collectionOrder: newCollectionOrder,
+          });
+        }
       }
-    });
+    }
   }, [router, collections, account]);
 
   return (
@@ -119,7 +127,7 @@ const CollectionSelection = ({ links }: Props) => {
   );
 };
 
-export default CollectionSelection;
+export default CollectionListing;
 
 const CollectionItem = ({
   collection,
@@ -166,7 +174,7 @@ const CollectionItem = ({
         {...props}
         className={`${
           active === `/collections/${collection.id}`
-            ? "bg-primary/20"
+            ? "bg-primary/20 is-active"
             : "hover:bg-neutral/20"
         } duration-100 rounded-md flex w-full items-center cursor-pointer mb-1 px-2 gap-1`}
       >

components/Navbar.tsx

@@ -56,7 +56,7 @@ export default function Navbar() {
           setSidebar(true);
           document.body.style.overflow = "hidden";
         }}
-        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden hidden sm:inline-flex"
+        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden sm:inline-flex"
       >
         <i className="bi-list text-2xl leading-none"></i>
       </div>