style(marketplace): Transition between items view options

Co-authored-by: Isaac <contact@eartharoid.me>

src/features/marketplace/components/Elements/ItemCard/ItemCard.jsx

@@ -90,7 +90,7 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
             )}
 
             {type === true && !onCollection ? (
-              <span className="card-type">{variables.getMessage('marketplace:' + item.type)}</span>
+              <span className="card-type">{variables.getMessage('marketplace:' + getName(item.type))}</span>
             ) : null}
           </div>
         </motion.div>

src/features/marketplace/components/Items/Items.jsx

@@ -9,13 +9,15 @@ const NewItems = ({ items, view }) => {
     case 'list':
       return (
         <table className="w-full">
-          <tbody>
-            <tr>
+          <thead className="text-left">
+             <tr>
               <th>Name</th>
               <th>Type</th>
               <th>{variables.getMessage('settings:sections.quote.author')}</th>
               <th></th>
             </tr>
+          </thead>
+          <tbody>
             {items.map((item, index) => (
               <ItemCard
                 onClick={() => setSubTab(item.name)}

src/features/marketplace/views/Added.jsx

@@ -7,6 +7,7 @@ import Modal from 'react-modal';
 import { SideloadFailedModal } from '../components/Elements/SideloadFailedModal/SideloadFailedModal';
 import ItemPage from './oldItemPage';
 import Items from '../components/Items/OldItems';
+import { NewItems } from '../components/Items/Items';
 import { Dropdown, FileUpload } from 'components/Form/Settings';
 import { Header, CustomActions } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
@@ -178,6 +179,8 @@ export default class Added extends PureComponent {
   }
 
   render() {
+    console.log(this.state.installed);
+
     const sideLoadBackendElements = () => (
       <>
         <Modal
@@ -212,12 +215,8 @@ export default class Added extends PureComponent {
           <div className="emptyItems">
             <div className="emptyNewMessage">
               <MdOutlineExtensionOff />
-              <span className="title">
-                {variables.getMessage('addons:empty.title')}
-              </span>
-              <span className="subtitle">
-                {variables.getMessage('addons:empty.description')}
-              </span>
+              <span className="title">{variables.getMessage('addons:empty.title')}</span>
+              <span className="subtitle">{variables.getMessage('addons:empty.description')}</span>
             </div>
           </div>
         </>
@@ -261,7 +260,7 @@ export default class Added extends PureComponent {
     `       />*/}
           </CustomActions>
         </Header>
-        <Dropdown
+        {/*<Dropdown
           label={variables.getMessage('addons:sort.title')}
           name="sortAddons"
           onChange={(value) => this.setState({ installed: sortItems(this.state.installed, value) })}
@@ -283,14 +282,17 @@ export default class Added extends PureComponent {
               text: variables.getMessage('addons:sort.z_a'),
             },
           ]}
-        />
-        <Items
+        />*/}
+        {/*<Items
           items={this.state.installed}
           isAdded={true}
           filter=""
           toggleFunction={(input) => this.toggle('item', input)}
           showCreateYourOwn={false}
-        />
+        />*/}
+        <div className="w-full ">
+        <NewItems items={this.state.installed} view="list" />
+        </div>
       </>
     );
   }

src/features/misc/views/Marketplace.jsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState, useMemo } from 'react';
 import variables from 'config/variables';
 import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
 import MarketplaceTab from '../../marketplace/views/Browse';
@@ -71,29 +71,38 @@ function Marketplace(props) {
     );
   }, [itemsFilter]);
 
-  const ItemView = useCallback(
-    () => (
-      <div className="flex flex-row gap-2">
-        <button
-          onClick={() => setItemsView('grid')}
-          className={clsx('cursor-pointer h-[40px] w-[40px] grid place-items-center rounded-lg', {
-            'bg-[#333]': itemsView === 'grid',
-          })}
-        >
-          <PiGridFourFill />
-        </button>
-        <button
-          onClick={() => setItemsView('list')}
-          className={clsx('cursor-pointer h-[40px] w-[40px] grid place-items-center rounded-lg', {
-            'bg-[#333]': itemsView === 'list',
-          })}
-        >
-          <MdFormatListBulleted />
-        </button>
+  const viewOptions = useMemo(() => [
+    { id: 'grid', icon: <PiGridFourFill /> },
+    { id: 'list', icon: <MdFormatListBulleted /> },
+  ], []);
+  
+  const ItemView = useCallback(() => {
+    return (
+      <div className="flex space-x-1">
+        {viewOptions.map((option) => (
+          <button
+            key={option.id}
+            onClick={() => setItemsView(option.id)}
+            className={`${
+              itemsView === option.id ? '' : 'hover:text-white/70'
+            } transition-all duration-800	ease-in-out flex flex-row gap-2 items-center relative rounded-sm px-2 py-2 text-xl text-white outline-sky-400 focus-visible:outline-2`}
+            style={{
+              WebkitTapHighlightColor: 'transparent',
+            }}
+          >
+            {itemsView === option.id && (
+              <motion.span
+                layoutId="viewSelectorBubble"
+                className="absolute inset-0 z-10 bg-[#333] mix-blend-lighten rounded-xl"
+                transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+              />
+            )}
+            {option.icon}
+          </button>
+        ))}
       </div>
-    ),
-    [itemsView],
-  );
+    );
+  }, [itemsView, setItemsView, viewOptions]);
 
   useEffect(() => {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {