feat: use a button to load more journals (#1529)

* feat: use a button to load more journals

* feat: preserve the "scroll to load more" behavior

* ignore .clj-kondo all together

* enhance: load latest two journals by default

Co-authored-by: Tienson Qin <[email protected]>

.gitignore

@@ -29,5 +29,5 @@ strings.csv
 
 .calva
 resources/electron.js
-.clj-kondo/.cache
+.clj-kondo/
 .lsp/

resources/css/common.css

@@ -802,3 +802,7 @@ a.tooltip-priority {
 .excalidraw hr {
     margin: 0;
 }
+
+.text-link {
+    color: var(--ls-primary-text-color);
+}

src/main/frontend/components/header.cljs

@@ -27,7 +27,7 @@
    {:href     (rfe/href :home)
     :on-click (fn []
                 (util/scroll-to-top)
-                (state/set-journals-length! 1))}
+                (state/set-journals-length! 2))}
    (if-let [logo (and config/publishing?
                       (get-in (state/get-config) [:project :logo]))]
      [:img.cp__header-logo-img {:src logo}]

src/main/frontend/components/journal.cljs

@@ -110,14 +110,15 @@
 
      (when intro? (onboarding/intro))]))
 
-(rum/defc journals
+(rum/defc journals < rum/reactive
   [latest-journals]
   [:div#journals
    (ui/infinite-list
     (for [[journal-name format] latest-journals]
       [:div.journal-item.content {:key journal-name}
        (journal-cp [journal-name format])])
-    {:on-load (fn []
+    {:has-more (page-handler/has-more-journals?)
+     :on-load (fn []
                 (page-handler/load-more-journals!))})])
 
 (rum/defc all-journals < rum/reactive db-mixins/query

src/main/frontend/components/journal.css

@@ -1,6 +1,4 @@
 #journals {
-  margin-bottom: 70vh;
-
   textarea {
     word-break: break-word;
     overflow: hidden;
@@ -10,12 +8,13 @@
   .journal-item {
     border-top: 1px solid;
     border-top-color: var(--ls-border-color, #738694);
-    padding: 48px 0;
-    margin: 24px 0 128px 0;
+    margin: 24px 0;
+    padding: 24px 0;
+    min-height: 250px;
 
     &:first-child {
+      padding-top: 0;
       border-top: none;
-      padding: 0;
       min-height: 500px;
     }
   }

src/main/frontend/dicts.cljs

@@ -243,6 +243,8 @@ title: How to take dummy notes?
         :page/name "Page name"
         :page/last-modified "Last modified at"
         :page/new-title "What's your new page title?"
+        :page/earlier "Earlier"
+        :page/no-more-journals "No more journals"
         :publishing/pages "Pages"
         :publishing/page-name "Page name"
         :publishing/current-project "Current Project"
@@ -973,6 +975,8 @@ title: How to take dummy notes?
            :page/name "页面名称"
            :page/last-modified "最后更改于"
            :page/new-title "请输入新页面的名字:"
+           :page/earlier "之前"
+           :page/no-more-journals "没有更多了"
            :publishing/pages "页面"
            :publishing/page-name "页面名"
            :publishing/current-project "当前项目"
@@ -1245,6 +1249,8 @@ title: How to take dummy notes?
              :page/name "頁面名稱："
              :page/last-modified "最後更改於"
              :page/new-title "請輸入新頁面的名字:"
+             :page/load-more-journals "載入更多"
+             :page/no-more-journals "沒有更多了"
              :publishing/pages "頁面"
              :publishing/page-name "頁面名稱"
              :publishing/current-project "當前項目"

src/main/frontend/handler/page.cljs

@@ -38,8 +38,8 @@
 (defn- get-file-name
   [journal? title]
   (when-let [s (if journal?
-            (date/journal-title->default title)
-            (util/page-name-sanity (string/lower-case title)))]
+                 (date/journal-title->default title)
+                 (util/page-name-sanity (string/lower-case title)))]
     ;; Win10 file path has a length limit of 260 chars
     (util/safe-subs s 0 200)))
 
@@ -424,11 +424,15 @@
       :new-level 2
       :current-page "Contents"})))
 
-(defn load-more-journals!
+(defn has-more-journals?
   []
   (let [current-length (:journals-length @state/state)]
-    (when (< current-length (db/get-journals-length))
-      (state/update-state! :journals-length inc))))
+    (< current-length (db/get-journals-length))))
+
+(defn load-more-journals!
+  []
+  (when (has-more-journals?)
+    (state/update-state! :journals-length inc)))
 
 (defn update-public-attribute!
   [page-name value]
@@ -516,8 +520,8 @@
 (defn ls-dir-files!
   []
   (web-nfs/ls-dir-files-with-handler!
-    (fn []
-      (init-commands!))))
+   (fn []
+     (init-commands!))))
 
 
 ;; TODO: add use :file/last-modified-at

src/main/frontend/handler/route.cljs

@@ -98,7 +98,7 @@
 
 (defn go-to-journals!
   []
-  (state/set-journals-length! 1)
+  (state/set-journals-length! 2)
   (let [route (if (state/custom-home-page?)
                 :all-journals
                 :home)]

src/main/frontend/state.cljs

@@ -38,7 +38,7 @@
     :draw? false
     :db/restoring? nil
 
-    :journals-length 1
+    :journals-length 2
 
     :search/q ""
     :search/result nil

src/main/frontend/ui.cljs

@@ -97,7 +97,7 @@
                      [:div {:style {:margin-right "8px"}} title]
                       ;; [:div {:style {:position "absolute" :right "8px"}}
                       ;;  icon]
-]]
+                     ]]
           (rum/with-key
             (menu-link new-options child)
             title)))
@@ -280,7 +280,6 @@
         (.removeEventListener viewport "resize" handler)
         (.removeEventListener viewport "scroll" handler)))))
 
-;; FIXME: compute the right scroll position when scrolling back to the top
 (defn on-scroll
   [on-load on-top-reached]
   (let [node js/document.documentElement
@@ -306,9 +305,15 @@
 (rum/defcs infinite-list <
   (mixins/event-mixin attach-listeners)
   "Render an infinite list."
-  [state body {:keys [on-load on-top-reached]
-               :as   opts}]
-  body)
+  [state body {:keys [on-load has-more]}]
+  (rum/with-context [[t] i18n/*tongue-context*]
+    (rum/fragment
+     body
+     [:a.fade-link.text-link.font-bold.text-4xl
+      {:on-click on-load
+       :disabled (not has-more)
+       :class (when (not has-more) "cursor-not-allowed ")}
+      (t (if has-more :page/earlier :page/no-more-journals))])))
 
 (rum/defcs auto-complete <
   (rum/local 0 ::current-idx)

src/main/frontend/ui.css

@@ -93,7 +93,7 @@
     align-items: center;
     font-size: 14px;
 
-    input[type=checkbox] {
+    input[type='checkbox'] {
       margin-right: 8px;
     }
   }
@@ -105,7 +105,7 @@
   focus:outline-none transition ease-in-out duration-150 mt-1;
 
   &:disabled {
-    opacity: .5;
+    opacity: 0.5;
   }
 
   &.is-link {
@@ -134,7 +134,7 @@
   width: 0;
   height: 0;
   vertical-align: middle;
-  content: "";
+  content: '';
   border-top-style: solid;
   border-top-width: 4px;
   border-right: 4px solid transparent;