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}>
+            <span className={styles.rightSideButtons}>
-              [<SubscribeButton address={subplebbitAddress} />]
-            </span>
-          )}
-        </>
-      ) : isInCatalogView ? (
-        <>
-          [
-          <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
-          ] [
-          <OptionsButton />
-          ] [
-          <RefreshButton />]{' '}
-          {!(isInAllView || isInSubscriptionsView) && (
-            <span className={styles.subscribeButton}>
               [<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.rightSideButtons}>
-            <span className={styles.subscribeButton}>
+            {isInCatalogView && <SortOptions />}
-              [
+            {!(isInAllView || isInSubscriptionsView) && (
-              <SubscribeButton address={subplebbitAddress} />]
+              <>
-            </span>
+                [
-          )}
+                <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'>

src/stores/use-sorting-store.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface SortingStore {
+  sortType: 'active' | 'new';
+  setSortType: (type: 'active' | 'new') => void;
+}
+
+const useSortingStore = create<SortingStore>((set) => ({
+  sortType: 'active',
+  setSortType: (type) => set({ sortType: type }),
+}));
+
+export default useSortingStore;

src/views/board/board.tsx

@@ -9,6 +9,7 @@ import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbi
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useReplyModal from '../../hooks/use-reply-modal';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
+import useSortingStore from '../../stores/use-sorting-store';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 import ReplyModal from '../../components/reply-modal';
@@ -40,7 +41,7 @@ const Board = () => {
     return [subplebbitAddress];
   }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]);
 
-  const sortType = 'active';
+  const { sortType } = useSortingStore();
   const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType });
 
   const setResetFunction = useFeedResetStore((state) => state.setResetFunction);

src/views/catalog/catalog.tsx

@@ -9,6 +9,7 @@ import useFeedStateString from '../../hooks/use-feed-state-string';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
 import useWindowWidth from '../../hooks/use-window-width';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
+import useSortingStore from '../../stores/use-sorting-store';
 import CatalogRow from '../../components/catalog-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import SettingsModal from '../../components/settings-modal';
@@ -102,7 +103,8 @@ const Catalog = () => {
   // eslint-disable-next-line
   const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
 
-  const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage });
+  const { sortType } = useSortingStore();
+  const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType, postsPerPage });
 
   const setResetFunction = useFeedResetStore((state) => state.setResetFunction);
   useEffect(() => {