chore(frontend): add order by time asc

web/src/components/MemoFilters.tsx

@@ -40,6 +40,15 @@ const MemoFilters = () => {
             </button>
           </div>
         ))}
+        <div
+          className="flex flex-row items-center gap-1 pl-1.5 pr-1 hover:opacity-80 cursor-pointer"
+          onClick={() => memoFilterStore.setOrderByTimeAsc(!memoFilterStore.orderByTimeAsc)}
+        >
+          <Icon.Clock className="w-4 h-auto text-gray-500 dark:text-gray-400 opacity-60" />
+          <span className="text-gray-500 dark:text-gray-400 text-sm max-w-32 truncate">
+            {memoFilterStore.orderByTimeAsc ? "Asc" : "Desc"}
+          </span>
+        </div>
       </div>
     </div>
   );

web/src/pages/Archived.tsx

@@ -26,7 +26,11 @@ const Archived = () => {
   const [nextPageToken, setNextPageToken] = useState<string>("");
   const sortedMemos = memoList.value
     .filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
-    .sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix());
+    .sort((a, b) =>
+      memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
+        ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
+        : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
+    );
 
   useEffect(() => {
     memoList.reset();
@@ -45,6 +49,9 @@ const Archived = () => {
         tagSearch.push(`"${filter.value}"`);
       }
     }
+    if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
+      filters.push(`order_by_time_asc == true`);
+    }
     if (contentSearch.length > 0) {
       filters.push(`content_search == [${contentSearch.join(", ")}]`);
     }

web/src/pages/Explore.tsx

@@ -23,7 +23,11 @@ const Explore = () => {
   const memoFilterStore = useMemoFilterStore();
   const [isRequesting, setIsRequesting] = useState(true);
   const [nextPageToken, setNextPageToken] = useState<string>("");
-  const sortedMemos = memoList.value.sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix());
+  const sortedMemos = memoList.value.sort((a, b) =>
+    memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
+      ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
+      : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
+  );
 
   useEffect(() => {
     memoList.reset();
@@ -42,6 +46,9 @@ const Explore = () => {
         tagSearch.push(`"${filter.value}"`);
       }
     }
+    if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
+      filters.push(`order_by_time_asc == true`);
+    }
     if (contentSearch.length > 0) {
       filters.push(`content_search == [${contentSearch.join(", ")}]`);
     }

web/src/pages/Home.tsx

@@ -27,7 +27,11 @@ const Home = () => {
   const [nextPageToken, setNextPageToken] = useState<string>("");
   const sortedMemos = memoList.value
     .filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
-    .sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix())
+    .sort((a, b) =>
+      memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
+        ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
+        : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
+    )
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
@@ -57,6 +61,9 @@ const Home = () => {
         filters.push(`display_time_before == ${timestampAfter + 60 * 60 * 24}`);
       }
     }
+    if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
+      filters.push(`order_by_time_asc == true`);
+    }
     if (contentSearch.length > 0) {
       filters.push(`content_search == [${contentSearch.join(", ")}]`);
     }

web/src/pages/UserProfile.tsx

@@ -28,7 +28,11 @@ const UserProfile = () => {
   const [isRequesting, setIsRequesting] = useState(true);
   const [nextPageToken, setNextPageToken] = useState<string>("");
   const sortedMemos = memoList.value
-    .sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix())
+    .sort((a, b) =>
+      memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
+        ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
+        : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
+    )
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
@@ -78,6 +82,9 @@ const UserProfile = () => {
         tagSearch.push(`"${filter.value}"`);
       }
     }
+    if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
+      filters.push(`order_by_time_asc == true`);
+    }
     if (contentSearch.length > 0) {
       filters.push(`content_search == [${contentSearch.join(", ")}]`);
     }

web/src/store/v1/memoFilter.ts

@@ -20,14 +20,16 @@ export const getMemoFilterKey = (filter: MemoFilter) => `${filter.factor}:${filt
 
 interface State {
   filters: MemoFilter[];
+  orderByTimeAsc: boolean;
 }
 
 export const useMemoFilterStore = create(
-  combine(((): State => ({ filters: [] }))(), (set, get) => ({
+  combine(((): State => ({ filters: [], orderByTimeAsc: false }))(), (set, get) => ({
     setState: (state: State) => set(state),
     getState: () => get(),
     getFiltersByFactor: (factor: FilterFactor) => get().filters.filter((f) => f.factor === factor),
     addFilter: (filter: MemoFilter) => set((state) => ({ filters: uniqBy([...state.filters, filter], getMemoFilterKey) })),
     removeFilter: (filterFn: (f: MemoFilter) => boolean) => set((state) => ({ filters: state.filters.filter((f) => !filterFn(f)) })),
+    setOrderByTimeAsc: (orderByTimeAsc: boolean) => set({ orderByTimeAsc }),
   })),
 );