Feature: flashcards random mode (#4535)

* feat: add flashcards shuffle mode
* fix: flashcards navigation
* refactor(build): use @tabler/icons from node_modules

Co-authored-by: Andelf <[email protected]>

gulpfile.js

@@ -45,12 +45,19 @@ const common = {
     return gulp.src(resourceFilePath).pipe(gulp.dest(outputPath))
   },
 
-  syncAssetFiles () {
-    return gulp.src([
-        "./node_modules/@excalidraw/excalidraw/dist/excalidraw-assets/**",
-        "!**/*/i18n-*.js"
-      ])
-      .pipe(gulp.dest(path.join(outputPath, 'js', 'excalidraw-assets')))
+  // NOTE: All assets from node_modules are copied to the output directory
+  syncAssetFiles (...params) {
+    return gulp.series(
+      () => gulp.src([
+          "./node_modules/@excalidraw/excalidraw/dist/excalidraw-assets/**",
+          "!**/*/i18n-*.js"
+        ])
+        .pipe(gulp.dest(path.join(outputPath, 'js', 'excalidraw-assets'))),
+      () => gulp.src("node_modules/@tabler/icons/iconfont/tabler-icons.min.css")
+        .pipe(gulp.dest(path.join(outputPath, 'css'))),
+      () => gulp.src("node_modules/@tabler/icons/iconfont/fonts/**")
+        .pipe(gulp.dest(path.join(outputPath, 'css', 'fonts'))),
+    )(...params)
   },
 
   keepSyncResourceFile () {

package.json

@@ -77,7 +77,7 @@
         "@logseq/react-tweet-embed": "1.3.1-1",
         "@sentry/browser": "6.4.1",
         "@sentry/electron": "2.5.1",
-        "@tabler/icons": "1.41.2",
+        "@tabler/icons": "1.54.0",
         "@tippyjs/react": "4.2.5",
         "chokidar": "3.5.1",
         "chrono-node": "2.2.4",

src/main/frontend/extensions/srs.cljs

@@ -368,25 +368,23 @@
                            n))))
 
 (defn- review-finished?
-  [global? cards *card-index]
-  (if global?
-    (<= (count cards) 1)
-    (>= @*card-index (count cards))))
+  [cards]
+  (<= (count cards) 1))
 
-(defn- score-and-next-card [score card *card-index cards *phase *review-records cb global?]
+(defn- score-and-next-card [score card *card-index cards *phase *review-records cb]
   (operation-score! card score)
   (swap! *review-records #(update % score (fn [ov] (conj ov card))))
-  (if (review-finished? global? cards *card-index)
+  (if (review-finished? cards)
     (when cb (cb @*review-records))
     (reset! *phase 1))
   (swap! *card-index inc)
   (when @global-cards-mode?
     (dec-cards-due-count!)))
 
-(defn- skip-card [card *card-index cards *phase *review-records cb global?]
+(defn- skip-card [card *card-index cards *phase *review-records cb]
   (swap! *review-records #(update % "skip" (fn [ov] (conj ov card))))
   (swap! *card-index inc)
-  (if (review-finished? global? cards *card-index)
+  (if (review-finished? cards)
     (when cb (cb @*review-records))
     (reset! *phase 1)))
 
@@ -416,7 +414,6 @@
                    state)}
   [state blocks {preview? :preview?
                  modal? :modal?
-                 global? :global?
                  cb :callback}
    card-index]
   (let [cards (map ->card blocks)
@@ -460,7 +457,7 @@
                (ui/button [:span "Next " (ui/render-keyboard-shortcut [:n])]
                  :id "card-next"
                  :class "mr-2"
-                 :on-click #(skip-card card card-index cards phase review-records cb global?)))
+                 :on-click #(skip-card card card-index cards phase review-records cb)))
 
              (when (and (not preview?) (= 1 next-phase))
                [:div.flex.flex-row.justify-between
@@ -469,20 +466,20 @@
                                     :id         "card-forgotten"
                                     :background "red"
                                     :on-click   (fn []
-                                                  (score-and-next-card 1 card card-index cards phase review-records cb global?)
+                                                  (score-and-next-card 1 card card-index cards phase review-records cb)
                                                   (let [tomorrow (tc/to-string (t/plus (t/today) (t/days 1)))]
                                                     (editor-handler/set-block-property! root-block-id card-next-schedule-property tomorrow)))})
 
                 (btn-with-shortcut {:btn-text (if (util/mobile?) "Hard" "Took a while to recall")
                                     :shortcut "t"
                                     :id       "card-recall"
-                                    :on-click #(score-and-next-card 3 card card-index cards phase review-records cb global?)})
+                                    :on-click #(score-and-next-card 3 card card-index cards phase review-records cb)})
 
                 (btn-with-shortcut {:btn-text   "Remembered"
                                     :shortcut   "r"
                                     :id         "card-remembered"
                                     :background "green"
-                                    :on-click   #(score-and-next-card 5 card card-index cards phase review-records cb global?)})])]
+                                    :on-click   #(score-and-next-card 5 card card-index cards phase review-records cb)})])]
 
             (when preview?
               (ui/tippy {:html [:div.text-sm
@@ -501,7 +498,11 @@
   rum/reactive
   db-mixins/query
   [blocks option card-index]
-  (let [blocks (if (fn? blocks) (blocks) blocks)]
+  (let [option (update option :random-mode? (fn [v] (if (boolean? v) v @v)))
+        blocks (if (fn? blocks) (blocks) blocks)
+        blocks (if (:random-mode? option)
+                 (shuffle blocks)
+                 blocks)]
     (if (seq blocks)
       (view blocks option card-index)
       review-finished)))
@@ -553,10 +554,12 @@
         count))))
 
 ;;; register cards macro
-(rum/defcs cards < rum/reactive db-mixins/query
+(rum/defcs ^:large-vars/cleanup-todo cards < rum/reactive db-mixins/query
   (rum/local 0 ::card-index)
+  (rum/local false ::random-mode?)
   [state config options]
-  (let [repo (state/get-current-repo)
+  (let [*random-mode? (::random-mode? state)
+        repo (state/get-current-repo)
         query-string (string/join ", " (:arguments options))
         query-result (query repo query-string)
         card-index (::card-index state)
@@ -598,10 +601,25 @@
                           (let [blocks-f (fn [] (query repo query-string))]
                             (state/set-modal! #(view-modal
                                                 blocks-f
-                                                {:preview? true}
+                                                {:preview? true
+                                                 :random-mode? *random-mode?}
                                                 card-index)
                                               {:id :srs})))}
-             "A"])]]
+             "A"])
+
+           (ui/tippy
+            {:html [:div.text-sm "Toggle random mode"]
+             :delay [1000, 100]
+             :class "tippy-hover"
+             :interactive true}
+            [:a.mt-1.ml-2.block.opacity-60.hover:opacity-100 {:on-mouse-down (fn [e]
+                                                                               (util/stop e)
+                                                                               (swap! *random-mode? not))}
+             (ui/icon "arrows-shuffle" {:style (cond->
+                                                 {:font-size 18
+                                                  :font-weight 600}
+                                                 @*random-mode?
+                                                 (assoc :color "orange"))})])]]
          (if (seq review-cards)
            [:div.px-1
             (when-not modal?
@@ -612,6 +630,7 @@
                              (state/set-modal! #(view-modal
                                                  blocks-f
                                                  {:modal? true
+                                                  :random-mode? *random-mode?
                                                   :callback
                                                   (fn [review-records]
                                                     (operation-card-info-summary!
@@ -623,6 +642,7 @@
               (view-fn review-cards
                        (merge config
                               {:global? global?
+                               :random-mode? @*random-mode?
                                :callback
                                (fn [review-records]
                                  (operation-card-info-summary!

yarn.lock

@@ -1075,10 +1075,10 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@tabler/icons@1.41.2":
-  version "1.41.2"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.41.2.tgz#effccbb261539b68609cc7dc660a058683170ee1"
-  integrity sha512-X6cQmMC24hiwg0p2BzasvU3IeCCdOk0f/9d6gNNtJM4lzG2TCloTns1bVvU5MAFkITGukxUqjPFE3Ecd6kGsfw==
+"@tabler/icons@1.54.0":
+  version "1.54.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.54.0.tgz#c8cf4e777e61b19004d0e21443c9a7fae31d70c4"
+  integrity sha512-X0SjUMWlu6IWsWIZP6gtMZhi9Q7pO2+BQ9vex28rOu+gtym7fZjnDXWG0okzVhtt4mlOwJ2BHQllRky29lsn7Q==
 
 "@tailwindcss/custom-forms@^0.2.1":
   version "0.2.1"
@@ -6760,6 +6760,11 @@ [email protected]:
     react-draggable "3.x"
     react-resizable "1.x"
 
[email protected]:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
+  integrity sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50=
+
 react-icon-base@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.2.tgz#a17101dad9c1192652356096860a9ab43a0766c7"
@@ -6769,6 +6774,8 @@ [email protected]:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
   integrity sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==
+  dependencies:
+    react-icon-base "2.1.0"
 
 react-is@^16.13.1, react-is@^16.3.1:
   version "16.13.1"