chore: show pinned memos in explore (#1141)

server/memo.go

@@ -209,22 +209,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 		if err != nil {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch memo list").SetInternal(err)
 		}
-
-		var pinnedMemoList []*api.Memo
-		var unpinnedMemoList []*api.Memo
-
-		for _, memo := range list {
-			if memo.Pinned {
-				pinnedMemoList = append(pinnedMemoList, memo)
-			} else {
-				unpinnedMemoList = append(unpinnedMemoList, memo)
-			}
-		}
-
-		memoList := []*api.Memo{}
-		memoList = append(memoList, pinnedMemoList...)
-		memoList = append(memoList, unpinnedMemoList...)
-		return c.JSON(http.StatusOK, composeResponse(memoList))
+		return c.JSON(http.StatusOK, composeResponse(list))
 	})
 
 	g.GET("/memo/:memoId", func(c echo.Context) error {

store/memo.go

@@ -306,7 +306,7 @@ func findMemoRawList(ctx context.Context, tx *sql.Tx, find *api.MemoFind) ([]*me
 		FROM memo
 		LEFT JOIN memo_organizer ON memo_organizer.memo_id = memo.id
 		WHERE ` + strings.Join(where, " AND ") + `
-		ORDER BY memo.created_ts DESC
+		ORDER BY memo_organizer.pinned DESC, memo.created_ts DESC
 	`
 	if find.Limit != nil {
 		query = fmt.Sprintf("%s LIMIT %d", query, *find.Limit)

web/src/less/explore.less

@@ -24,7 +24,21 @@
       @apply relative flex-grow max-w-2xl w-full h-auto flex flex-col justify-start items-start px-4 sm:pr-6 ml-calc;
 
       > .memo-container {
-        @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600;
+        @apply relative flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600;
+
+        &.pinned {
+          @apply border-gray-200 border-2 dark:border-zinc-600;
+        }
+
+        > .corner-container {
+          @apply absolute top-0 right-0 z-1;
+
+          &::after {
+            @apply rounded-tr-md absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600;
+            content: "";
+            border-width: 6px;
+          }
+        }
 
         > .memo-header {
           @apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;

web/src/pages/Explore.tsx

@@ -73,12 +73,7 @@ const Explore = () => {
       })
     : state.memos;
 
-  const sortedMemos = shownMemos
-    .filter((m) => m.rowStatus === "NORMAL")
-    .sort((mi: Memo, mj: Memo) => {
-      return mj.createdTs - mi.createdTs;
-    });
-
+  const sortedMemos = shownMemos.filter((m) => m.rowStatus === "NORMAL");
   const handleFetchMoreClick = async () => {
     try {
       const fetchedMemos = await memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, state.memos.length);
@@ -143,7 +138,8 @@ const Explore = () => {
             {sortedMemos.map((memo) => {
               const createdAtStr = dayjs(memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss");
               return (
-                <div className="memo-container" key={memo.id}>
+                <div className={`memo-container ${memo.pinned ? "pinned" : ""}`} key={memo.id}>
+                  {memo.pinned && <div className="corner-container"></div>}
                   <div className="memo-header">
                     <span className="time-text">{createdAtStr}</span>
                     <a className="name-text" href={`/u/${memo.creator.id}`}>