Smart unadded decks (#27)

src/screens/deck-catalog/deck-added-label.tsx

@@ -5,7 +5,7 @@ import React from "react";
 export const DeckAddedLabel = () => {
   return (
     <div
-      title={'This deck is on your list'}
+      title={"This deck is on your list"}
       className={css({
         position: "absolute",
         right: 0,

src/screens/deck-list/main-screen.tsx

@@ -15,6 +15,7 @@ import { assert } from "../../lib/typescript/assert.ts";
 import { ListHeader } from "../../ui/list-header.tsx";
 import { range } from "../../lib/array/range.ts";
 import { reset } from "../../ui/reset.ts";
+import { ViewMoreDecksToggle } from "./view-more-decks-toggle.tsx";
 
 export const MainScreen = observer(() => {
   useMount(() => {
@@ -31,7 +32,14 @@ export const MainScreen = observer(() => {
       })}
     >
       <div>
-        <ListHeader text={"My decks"} />
+        <ListHeader
+          text={"My decks"}
+          rightSlot={
+            deckListStore.shouldShowMyDecksToggle ? (
+              <ViewMoreDecksToggle />
+            ) : undefined
+          }
+        />
         <div
           className={css({
             display: "flex",
@@ -44,7 +52,7 @@ export const MainScreen = observer(() => {
               <DeckLoading key={i} />
             ))}
           {deckListStore.myInfo
-            ? deckListStore.myDecks.map((deck) => {
+            ? deckListStore.myDecksVisible.map((deck) => {
                 return <MyDeck key={deck.id} deck={deck} />;
               })
             : null}
@@ -97,7 +105,7 @@ export const MainScreen = observer(() => {
         >
           {deckListStore.myInfo ? (
             <>
-              {deckListStore.publicDecksToDisplay.map((deck) => (
+              {deckListStore.publicDecks.map((deck) => (
                 <PublicDeck key={deck.id} deck={deck} />
               ))}
               <button

src/screens/deck-list/view-more-decks-toggle.tsx

@@ -0,0 +1,36 @@
+import { observer } from "mobx-react-lite";
+import { css, cx } from "@emotion/css";
+import { reset } from "../../ui/reset.ts";
+import { theme } from "../../ui/theme.tsx";
+import { deckListStore } from "../../store/deck-list-store.ts";
+import { ChevronIcon } from "../../ui/chevron-icon.tsx";
+import React from "react";
+
+export const ViewMoreDecksToggle = observer(() => {
+  return (
+    <button
+      className={cx(
+        reset.button,
+        css({
+          position: "absolute",
+          right: 12,
+          top: 2,
+          color: theme.linkColor,
+          fontSize: 14,
+          textTransform: "uppercase",
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+        }),
+      )}
+      onClick={deckListStore.isMyDecksExpanded.toggle}
+    >
+      <span className={css({ transform: "translateY(2px)" })}>
+        <ChevronIcon
+          direction={deckListStore.isMyDecksExpanded.value ? "top" : "bottom"}
+        />
+      </span>
+      {deckListStore.isMyDecksExpanded.value ? "Hide" : "Show all"}
+    </button>
+  );
+});

src/store/deck-list-store.ts

@@ -17,6 +17,7 @@ import { assert } from "../lib/typescript/assert.ts";
 import { ReviewStore } from "./review-store.ts";
 import { reportHandledError } from "../lib/rollbar/rollbar.tsx";
 import { UserDbType } from "../../functions/db/user/upsert-user-db.ts";
+import { BooleanToggle } from "../lib/mobx-form/boolean-toggle.ts";
 
 export enum StartParamType {
   RepeatAll = "repeat_all",
@@ -30,6 +31,8 @@ export type DeckWithCardsWithReviewType = DeckWithCardsDbType & {
   cardsToReview: DeckCardDbTypeWithType[];
 };
 
+const collapsedDecksLimit = 3;
+
 export class DeckListStore {
   myInfo?: MyInfoResponse;
   isMyInfoLoading = false;
@@ -46,6 +49,8 @@ export class DeckListStore {
 
   isDeckCardsLoading = false;
 
+  isMyDecksExpanded = new BooleanToggle(false);
+
   constructor() {
     makeAutoObservable(
       this,
@@ -288,10 +293,6 @@ export class DeckListStore {
     );
   }
 
-  get publicDecksToDisplay() {
-    return this.publicDecks.slice(0, 3);
-  }
-
   get myDecks(): DeckWithCardsWithReviewType[] {
     if (!this.myInfo) {
       return [];
@@ -304,6 +305,41 @@ export class DeckListStore {
     }));
   }
 
+  get shouldShowMyDecksToggle() {
+    return deckListStore.myDecks.length > collapsedDecksLimit;
+  }
+
+  get myDecksVisible(): DeckWithCardsWithReviewType[] {
+    const myDecks = this.myDecks;
+    if (this.isMyDecksExpanded.value) {
+      return myDecks;
+    }
+
+    return myDecks
+      .sort((a, b) => {
+        // sort decks by cardsToReview count with type 'repeat' first, then with type 'new'
+        const aRepeatCount = a.cardsToReview.filter(
+          (card) => card.type === "repeat",
+        ).length;
+
+        const bRepeatCount = b.cardsToReview.filter(
+          (card) => card.type === "repeat",
+        ).length;
+
+        if (aRepeatCount !== bRepeatCount) {
+          return bRepeatCount - aRepeatCount;
+        }
+
+        const aNewCount = a.cardsToReview.length - aRepeatCount;
+        const bNewCount = b.cardsToReview.length - bRepeatCount;
+        if (aNewCount !== bNewCount) {
+          return bNewCount - aNewCount;
+        }
+        return a.name.localeCompare(b.name);
+      })
+      .slice(0, collapsedDecksLimit);
+  }
+
   get areAllDecksReviewed() {
     return (
       this.myDecks.length > 0 &&

src/ui/chevron-icon.tsx

@@ -0,0 +1,43 @@
+import { motion } from "framer-motion";
+import React, { SVGProps } from "react";
+
+type Direction = "top" | "bottom";
+
+const getRotation = (direction: Direction) => {
+  switch (direction) {
+    case "top":
+      return 0;
+    case "bottom":
+      return 180;
+  }
+};
+
+type Props = Pick<SVGProps<SVGSVGElement>, "onClick" | "className"> & {
+  direction: Direction;
+};
+
+export const ChevronIcon = (props: Props) => {
+  const { direction, ...restProps } = props;
+  return (
+    <motion.svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      whileTap={{ scale: 0.9 }}
+      animate={{ rotate: getRotation(direction) }}
+      initial={false}
+      {...restProps}
+    >
+      <path
+        d="M4 10.5L8.5 6L13 10.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </motion.svg>
+  );
+};

src/ui/list-header.tsx

@@ -1,10 +1,15 @@
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
-import React from "react";
+import React, { ReactNode } from "react";
 
-type Props = { text: string };
+type Props = {
+  text: string;
+  rightSlot?: ReactNode;
+};
 
 export const ListHeader = (props: Props) => {
+  const { text, rightSlot } = props;
+
   return (
     <h5
       className={css({
@@ -15,11 +20,13 @@ export const ListHeader = (props: Props) => {
         paddingTop: 4,
         paddingBottom: 0,
         marginBottom: 4,
+        position: "relative",
         color: theme.hintColor,
         textTransform: "uppercase",
       })}
     >
-      {props.text}
+      {text}
+      {rightSlot}
     </h5>
   );
 };