feat(catalog): add sorting option

src/components/board-buttons/board-buttons.module.css

@@ -21,6 +21,10 @@
   cursor: pointer;
 }
 
+.mobileBoardButtons .options {
+  padding: 10px 0;
+}
+
 @media (max-width: 640px) {
   .desktopBoardButtons {
     display: none;
@@ -32,7 +36,7 @@
     display: none;
   }
 
-  .subscribeButton {
+  .rightSideButtons {
     float: right;
   }
 }

src/components/board-buttons/board-buttons.tsx

@@ -3,6 +3,7 @@ import { Link, useLocation, useParams } from 'react-router-dom';
 import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
+import useSortingStore from '../../stores/use-sorting-store';
 import styles from './board-buttons.module.css';
 
 interface BoardButtonsProps {
@@ -58,6 +59,24 @@ const RefreshButton = () => {
   );
 };
 
+const SortOptions = () => {
+  const { sortType, setSortType } = useSortingStore();
+
+  const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const type = event.target.value as 'active' | 'new';
+    setSortType(type);
+  };
+  return (
+    <>
+      Sort by:{' '}
+      <select value={sortType} onChange={handleSortChange}>
+        <option value='active'>Bump order</option>
+        <option value='new'>Creation date</option>
+      </select>{' '}
+    </>
+  );
+};
+
 export const MobileBoardButtons = () => {
   const params = useParams();
   const location = useLocation();
@@ -89,6 +108,14 @@ export const MobileBoardButtons = () => {
           <OptionsButton />
           <SubscribeButton address={subplebbitAddress} />
           <RefreshButton />
+          {isInCatalogView && (
+            <>
+              <hr />
+              <div className={styles.options}>
+                <SortOptions />
+              </div>
+            </>
+          )}
         </>
       )}
     </div>
@@ -118,21 +145,7 @@ export const DesktopBoardButtons = () => {
           ] [
           <OptionsButton />]{' '}
           {isInPostView && (
-            <span className={styles.subscribeButton}>
-              [<SubscribeButton address={subplebbitAddress} />]
-            </span>
-          )}
-        </>
-      ) : isInCatalogView ? (
-        <>
-          [
-          <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
-          ] [
-          <OptionsButton />
-          ] [
-          <RefreshButton />]{' '}
-          {!(isInAllView || isInSubscriptionsView) && (
-            <span className={styles.subscribeButton}>
+            <span className={styles.rightSideButtons}>
               [<SubscribeButton address={subplebbitAddress} />]
             </span>
           )}
@@ -140,17 +153,24 @@ export const DesktopBoardButtons = () => {
       ) : (
         <>
           [
-          <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
+          {isInCatalogView ? (
+            <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
+          ) : (
+            <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
+          )}
           ] [
           <OptionsButton />
           ] [
           <RefreshButton />]{' '}
-          {!(isInAllView || isInSubscriptionsView) && (
-            <span className={styles.subscribeButton}>
-              [
-              <SubscribeButton address={subplebbitAddress} />]
-            </span>
-          )}
+          <span className={styles.rightSideButtons}>
+            {isInCatalogView && <SortOptions />}
+            {!(isInAllView || isInSubscriptionsView) && (
+              <>
+                [
+                <SubscribeButton address={subplebbitAddress} />]
+              </>
+            )}
+          </span>
         </>
       )}
     </div>

src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx

@@ -8,6 +8,7 @@ import styles from './post-menu-desktop.module.css';
 import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
 import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
 import { isCatalogView, isPostPageView } from '../../../../lib/utils/view-utils';
+import _ from 'lodash';
 
 interface PostMenuDesktopProps {
   cid: string;
@@ -48,7 +49,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
       ref={refs.setReference}
       onClick={onClose}
     >
-      {t('image_search')} »
+      {_.capitalize(t('image_search'))} »
       {isImageSearchMenuOpen && (
         <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
           <a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>