Add favicon

- Add illustration in correct size
- Rephrase explanatory intro paragraphs

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>Lodestone</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪨</text></svg>" />
     <style>
      *, *:before, *:after { box-sizing: border-box; }
      html, body { padding: 0; margin: 0; }
@@ -44,7 +45,7 @@
 
      h3 {
          clear: both;
-         font-size: 18px;
+         font-size: 20px;
          line-height: 24px;
          margin-bottom: 6px;
      }
@@ -52,6 +53,8 @@
      img,
      video {
          max-width: 100%;
+         max-height: 100%;
+         width: auto;
          height: auto;
      }
 
@@ -69,6 +72,10 @@
          vertical-align: middle;
      }
 
+     p.intro {
+         font-size: 20px;
+     }
+
      #root {
          clear: both;
      }
@@ -82,6 +89,11 @@
          background: rgba(255, 255, 255, 0.8);
      }
 
+     button[disabled] {
+         opacity: 0.6;
+         cursor: not-allowed;
+     }
+
      section.login label,
      section.login input {
          display: block;
@@ -96,20 +108,61 @@
 
      section.posts .controls {
          padding: 0 0 36px;
+         display: grid;
+         grid-template:
+             "a"
+             "b"
+             "c";
      }
 
      section.posts .controls .search-form input {
          width: 80%;
      }
 
-     @media screen and (min-width: 640px) {
-         section.posts .controls {
-             display: grid;
-             grid-template:
-                 "a a"
-                 "b c";
+     section.posts .controls .loading-indicator {
+         width: 20px;
+         height: 20px;
+         vertical-align: middle;
+         margin-left: 16px;
+         overflow: visible;
      }
 
+     section.posts .controls .loading-indicator .arc {
+         /* svg */
+         fill: transparent;
+         stroke-width: 20;
+         stroke-linecap: round;
+         stroke-linejoin: round;
+         stroke: #dccb8b;
+         animation: spin 2s ease-in-out infinite;
+         transform-origin: 50px 50px;
+     }
+
+     @keyframes spin {
+         100% {
+             transform: rotate(360deg);
+         }
+     }
+
+     section.posts .controls .buttons {
+         display: flex;
+         justify-content: end;
+         flex-wrap: wrap;
+     }
+
+     section.posts .controls .post-info {
+         grid-area: b;
+     }
+
+     section.posts .controls .search-form {
+         grid-area: c;
+     }
+
+     section.posts .controls .buttons {
+         grid-area: a;
+     }
+
+     @media screen and (min-width: 640px) {
          section.posts .controls .post-info {
              grid-area: a;
          }
@@ -124,14 +177,12 @@
 
          section.posts .controls .buttons {
              grid-area: c;
-             display: flex;
-             justify-content: end;
          }
      }
 
      section.posts .controls .control-button {
          padding: 6px;
-         margin: 6px 0;
+         margin: 6px 0 6px 12px;
          background: #f5e6ab;
          color: #444;
          cursor: pointer;
@@ -169,22 +220,24 @@
          margin-bottom: 0
      }
 
-     section.posts .post .content + .attachments {
-         margin-top: 18px;
+     section.posts .post .attachments {
+         margin-top: 16px;
+         height: 320px;
+         display: flex;
+         max-width: 100%;
+         overflow: auto;
      }
 
      section.posts .post .controls {
          margin: 24px 0 0;
          padding: 0;
          list-style-type: none;
+         display: flex;
+         justify-content: end;
+         flex-wrap: wrap;
      }
 
      @media screen and (min-width: 640px) {
-         section.posts .post .controls {
-             display: flex;
-             justify-content: end
-         }
-
          section.posts .post .controls .control-element a {
              margin: 0 0 0 12px;
          }
@@ -215,9 +268,10 @@
     </style>
   </head>
   <body>
-    <img class="illustration" src="./img/lodestone_attracting_nails.png" width="150" />
+    <img class="illustration" src="./img/lodestone_attracting_nails_small.jpeg" width="150" />
     <h1>Lodestone</h1>
-    <p>Lodestone is an application to help you navigate the Fediverse. It surfaces things you enjoyed and allows you to sift through them again. It aims to be a companion to the server hosting your Mastodon instance, or any other compatible Fediverse software.</p>
+    <p class="intro">Lodestone helps you navigate the Fediverse.</p>
+    <p>It gives you a tool to quickly search through your favorite posts, and helps you rediscover the things you found relevant.</p>
     <div id="root">
         Loading application…
         <noscript>Please turn on JavaScript to run the application.</noscript>

src/computersandblues/lodestone/app.cljs

@@ -4,7 +4,8 @@
             [clojure.string :as str]
             [clojure.pprint :as pprint]
             [computersandblues.lodestone.database :as db]
-            [computersandblues.lodestone.match :refer [query->matching-fn]]))
+            [computersandblues.lodestone.match :refer [query->matching-fn]]
+            [applied-science.js-interop :as j]))
 
 (def posts-init-state
   {:query nil
@@ -27,13 +28,21 @@
                         :section/posts posts-init-state}))
 
 ; TODO Ensure that cached data is up to date
-; TODO Manually fetch older / newer favorites
 ; TODO Handle 429
 ; TODO Search for tags (`#foo`) and handles (`@bar`)
 ; TODO Explain which kind of search currently is possible
 
 ;; Mastodon API helpers
 
+(defn- promise-all [xs]
+  (js/Promise.all (apply array xs)))
+
+(defn- promise-resolve [val]
+  (js/Promise.resolve val))
+
+(defn- promise-reject [val]
+  (js/Promise.reject val))
+
 (defn- link-header
   "Given a JS `Response` object, will parse the `link` header and find a link of
   a given `link-type` if present. Useful for paginating API requests."
@@ -59,8 +68,6 @@
   "Small helper function to send authorized requests to mastodon-compatible APIs"
   [{:keys [url method bearer-token payload]
     :or {method :get}}]
-  (js/Promise.
-   (fn [resolve reject]
   (. (js/fetch url
                (clj->js (cond-> {:method (str/upper-case (name method))}
                           bearer-token (assoc-in [:headers :authorization] (str "Bearer " bearer-token))
@@ -72,13 +79,16 @@
                (-> (.json res)
                    (.then
                     (fn [body]
-                         (resolve {:raw res
+                      (promise-resolve {:raw res
                                         :body (js->clj body {:keywordize-keys true})}))))
-                  (reject res))))))))
+               (promise-reject res))))))
 
-(defn- search-params [params]
+(defn- ->search-params [params]
   (js/URLSearchParams. (clj->js params)))
 
+(defn- url->search-params [url]
+  (.-searchParams (js/URL. url)))
+
 ;; all of the app's sections (i.e. different views / pieces of functionality)
 
 ;; login & application setup
@@ -99,20 +109,22 @@
   (set! (.-location js/window)
         (str (:instance_url application)
              "/oauth/authorize?"
-             (search-params {:response_type "code"
+             (->search-params {:response_type "code"
                                :client_id (:client_id application)
                                :redirect_uri (:redirect_uri application) ; TODO handle multiple reidrect uris?
                                :scope "read:favourites"}))))
 
 (defn oauth-authorization-code [location]
-  (.get (js/URLSearchParams. (.-search location)) "code"))
+  (-> (.-search location)
+      (js/URLSearchParams.)
+      (.get "code")))
 
 (defn handle-oauth-authorization-code! [{:keys [application code]}]
   (->
    (mastodon-request! {:method :post
                        :url (str (:instance_url application)
                                  "/oauth/token?"
-                                 (search-params {:grant_type "authorization_code"
+                                 (->search-params {:grant_type "authorization_code"
                                                    :code code
                                                    :client_id (:client_id application)
                                                    :client_secret (:client_secret application)
@@ -143,6 +155,12 @@
 (declare fetch-posts!)
 (declare refresh-displayed-posts!)
 
+(defn- fetch-application-settings []
+  (-> (db/open-cursor! ::db/application db/all)
+      (db/transduce-cursor (comp (take 1)
+                                 (map #(js->clj % :keywordize-keys true)))
+                           (fn [_ x] x))))
+
 (defn setup-application!
   "Handles Mastodon application setup on the client side"
   []
@@ -156,14 +174,11 @@
   ; the last case is not handled in this function, but is handled by the
   ; `create-remote-application!` function that is called once the user submits
   ; the form with their instance URL.
-  (-> (db/open-cursor! ::db/application db/all)
-      (db/transduce-cursor (comp (take 1)
-                                 (map #(js->clj % :keywordize-keys true))))
-      (.then (fn [[application]]
+  (-> (fetch-application-settings)
+      (.then (fn [application]
                (let [code (oauth-authorization-code (.-location js/window))]
                  (cond
-                   (:bearer_token application)
-                   (js/Promise.resolve application)
+                   (:bearer_token application) application
 
                    (and application code)
                    (handle-oauth-authorization-code!
@@ -181,16 +196,12 @@
       (.then (fn [application]
                (when application
                  (swap! state assoc :section :posts)
-                 (js/Promise.all #js [application (db/count! ::db/posts)]))))
+                 (promise-all [application (db/count! ::db/posts)]))))
       (.then (fn [[application post-count]]
                (when post-count
                  (if (zero? post-count)
                    (fetch-posts! {:instance-url (:instance_url application)
-                                  :bearer-token (:bearer_token application)
-                                  :continue?
-                                  (fn [response]
-                                    (and (seq (:body response))
-                                         (< (count (:favorites @state)) 500)))})
+                                  :bearer-token (:bearer_token application)})
                    (refresh-displayed-posts! (:section/posts @state))))))))
 
 ;;; views
@@ -223,49 +234,54 @@
 
 ;;; api interaction
 
-(defn- favorites-url [{:keys [instance-url limit max-id]
+(defn- favorites-url [{:keys [instance-url limit max-id min-id]
                        :or {limit 40}}]
-  (let [params (search-params (cond-> {:limit limit}
-                                max-id (assoc :max_id max-id)))]
+  (let [params (->search-params (cond-> {:limit limit}
+                                  max-id (assoc :max_id max-id)
+                                  min-id (assoc :min_id min-id)))]
     (str instance-url "/api/v1/favourites?" params)))
 
-(defn fetch-favorites!
-  [{:keys [instance-url bearer-token max-id
+(defn paginate-posts!
+  [{:keys [instance-url bearer-token
+           max-id min-id
            on-response on-error continue?]
     :or {continue? (fn [response]
                      (seq (:body response)))
          on-response on-response
          on-error on-error}}]
-  (js/console.log 'fetch-favorites! instance-url max-id bearer-token)
-  ((fn fetch-favorites' [url]
+  ((fn paginate! [url]
      (let [req-id (js/Date.now)]
-       (println :calling url)
+       (js/console.log :paginate! url :max-id max-id :min-id min-id)
        (swap! state update-in [:section/posts :loading] conj req-id)
        (-> (mastodon-request! {:url url :bearer-token bearer-token})
            (.then (fn [response]
+                    (let [next-url (link-header "next" (:raw response))]
+                      (swap! state update-in [:section/posts :loading] disj req-id)
                       (on-response response)
-                    (if (continue? response)
-                      (js/setTimeout #(fetch-favorites' (link-header "next" (:raw response))) 500)
-                      (swap! state update-in [:section/posts :loading] disj req-id))))
+                      (when (and (continue? response) next-url)
+                        (js/setTimeout #(paginate! next-url) 500)))))
            (.catch (fn [response]
                      (swap! state update-in [:section/posts :loading] disj req-id)
                      (on-error response))))))
-   (favorites-url {:instance-url instance-url :max-id max-id})))
+   (favorites-url {:instance-url instance-url :max-id max-id :min-id min-id})))
 
 ;;; views
 
-(defn debounce [ms f]
+(defn debounce
+  "Wraps `f` so it's called at most once every `ms` milliseconds. Will schedule
+  the last call to `f` so that it's called after the delay has passed, and will
+  always prefer to call the most recent call to `f` as close to the delay
+  as possible."
+  [ms f]
   (let [prev (volatile! (js/Date.now))
-        trail (volatile! (js/setTimeout (fn dummy []) ms))]
+        scheduled (volatile! (js/setTimeout (fn dummy []) ms))]
     (fn debounced-fn [& args]
       (let [now (js/Date.now)]
-        (if (> (- now @prev) ms)
-          (do (vreset! prev now)
-              (apply f args))
-          (do (js/clearTimeout @trail)
-              (vreset! trail (js/setTimeout (fn []
+        (js/clearTimeout @scheduled)
+        (vreset! scheduled (js/setTimeout (fn []
                                             (vreset! prev (js/Date.now))
-                                              (apply f args))))))))))
+                                            (apply f args))
+                                          (max 0 (- ms (- now @prev)))))))))
 
 (defn search []
   [:input {:placeholder "Start typing to search…"
@@ -341,6 +357,14 @@
                     (js/navigator.clipboard.writeText (:url post)))} "◎ Copy URL to clipboard"]]]]
    #_[debug post]])
 
+#_(defn logging [f]
+  (let [n (volatile! 0)]
+    (fn [& args]
+      (when (< @n 10)
+        (vswap! n inc)
+        (js/console.log :logging args)
+        (apply f args)))))
+
 (defn- refresh-displayed-posts!
   [posts-section]
   (let [{:keys [per-page query]} posts-section
@@ -352,65 +376,97 @@
                (map #(js->clj % :keywordize-keys true)))
         refresh-id (js/Date.now)]
     (swap! state update-in [:section/posts :loading] conj refresh-id)
-    (-> (js/Promise.all #js [(db/count! ::db/posts)
+    (. (promise-all [(db/count! ::db/posts)
                      (-> (db/open-cursor! ::db/posts ::db/post-created-at db/all "prev")
                          (db/transduce-cursor xform))])
-        (.then (fn [[total displayed-posts]]
+       (then (fn [[total displayed-posts]]
                (swap! state update :section/posts #(-> (assoc % :total total)
                                                        (assoc :displayed-posts displayed-posts)
                                                        (update :loading disj refresh-id))))))))
 
-(def debounced-refresh! (debounce 20 (partial refresh-displayed-posts!)))
+(def debounced-refresh! (debounce 40 refresh-displayed-posts!))
 
 (defn- fetch-posts! [opts]
   (let [defaults {:max-id nil
                   :on-response (fn [response]
+                                 (let [url-params (url->search-params (.-url (:raw response)))]
                                    (doseq [post (:body response)]
-                                   (db/put! ::db/posts post))
+                                     (db/put! ::db/posts (cond-> post
+                                                           ; these IDs are internal server ids and it looks like
+                                                           ; they are not returned in any response; they are
+                                                           ; required for pagination, so we're storing them to be
+                                                           ; able to abort and continue pagination if we want or
+                                                           ; if outer circumstances decide so (for example if the
+                                                           ; tab is closed)
+                                                           (.get url-params "max_id")
+                                                           (assoc :internal_id (.get url-params "max_id"))
+
+                                                           (.get url-params "min_id")
+                                                           (assoc :internal_id (.get url-params "min_id"))))))
                                  (debounced-refresh! (:section/posts @state)))}]
-    (fetch-favorites! (merge defaults opts))))
+    (paginate-posts! (merge defaults opts))))
+
+(defn- internal-post-id [max-or-min]
+  (-> (db/open-cursor! ::db/posts ::db/post-created-at db/all (if (= max-or-min :min)
+                                                                "next"
+                                                                "prev"))
+      (db/transduce-cursor (comp (keep (j/get :internal_id))
+                                 (take 1))
+                           (fn [_ x] x))))
+
+(defn fetch-more-posts! [e]
+  (.preventDefault e)
+  (. (promise-all [(fetch-application-settings) (internal-post-id :min) (internal-post-id :max)])
+     (then (fn [[application min-id max-id]]
+             (when min-id
+               (fetch-posts! {:instance-url (:instance_url application)
+                              :bearer-token (:bearer_token application)
+                              :min-id max-id}))
+             (when max-id
+               (fetch-posts! {:instance-url (:instance_url application)
+                              :bearer-token (:bearer_token application)
+                              :max-id min-id}))
+             (when-not (or min-id max-id)
+               (fetch-posts! {:instance-url (:instance_url application)
+                              :bearer-token (:bearer_token application)}))))))
 
 (defn- disconnect-account! [e]
   (.preventDefault e)
   (when (js/confirm "Are you sure? This will log you out and clear your local cache.")
-    (. (js/Promise.all #js [(db/clear! ::db/posts)
-                            (db/clear! ::db/application)])
+    (. (promise-all [(db/clear! ::db/posts) (db/clear! ::db/application)])
        (then (fn [_]
                (swap! state #(-> (assoc % :section :login)
                                  (assoc :section/posts posts-init-state))))))))
 
+(defn loading-indicator [{:keys [loading]}]
+  (when (seq loading)
+    ; see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#elliptical_arc_curve
+    [:svg.loading-indicator {:viewBox "-10 -10 120 120" :xmlns "http://www.w3.org/2000/svg"}
+     [:path.arc {:d "M50,0 A50,50 180 0,1 100,50"}]]))
+
 (defn posts-section [{:keys [posts]}]
-  (let [{:keys [per-page query total displayed-posts loading]} posts]
+  (let [{:keys [per-page query total displayed-posts loading]} posts
+        n-displayed (count displayed-posts)]
     [:section.posts
      [:h2 "Favorites"]
      [:header.controls
       [:p.display-info
        (str "Loaded " total " posts"
             (when (or query (> total per-page))
-              (str ", displaying " (count displayed-posts) (when query " matches"))))]
+              (str ", displaying " n-displayed (when query
+                                                 (if (= 1 n-displayed)
+                                                   " match"
+                                                   " matches")))))]
       [:section.search-form
        [search]
-       (when (seq loading) " …")
+       [loading-indicator {:loading loading}]
        #_(cond (= api-state :loading) " …"
              (= api-state :error) " API Error!")]
       [:section.buttons
+       [:button.control-button {:on-click fetch-more-posts! :disabled (boolean (seq loading))} "⇓ Fetch more"]
        [:button.control-button {:on-click disconnect-account!} "▤ Disconnect account"]]]
      [:ul.results (map-indexed (fn [idx p]
-                                 ^{:key idx} [:li.result [post {:post p}]]) displayed-posts)]
-     #_[:div.load-buttons
-      [:button
-       {:on-click (fn [_]
-                    (let [num-posts (count posts)]
-                      (fetch-posts! {:continue? (fn [response]
-                                                  (and (seq (:body response))
-                                                       (< (count (:favorites @state)) (+ num-posts 1000))))})))}
-       "Load more"]
-      " "
-      [:button
-       {:on-click (fn [_]
-                    (fetch-posts! {:continue? (fn [response]
-                                                (seq (:body response)))}))}
-       "Load all"]]]))
+                                 ^{:key idx} [:li.result [post {:post p}]]) displayed-posts)]]))
 
 ;; help section
 
@@ -442,7 +498,7 @@
 
 ;; database
 
-(def db-version 2)
+(def db-version 3)
 
 (def migrations
   {1 (fn migration-0001 [db _]
@@ -450,7 +506,10 @@
        (db/create-object-store! db ::db/posts {:keyPath "id"}))
    2 (fn migration-0002 [_ txn]
        (-> (db/open-store txn ::db/posts "readwrite")
-           (db/create-index! ::db/post-created-at "created_at" {:unique false})))})
+           (db/create-index! ::db/post-created-at "created_at" {:unique false})))
+   3 (fn migration-0003 [_ txn]
+       (-> (db/open-store txn ::db/posts "readwrite")
+           (db/create-index! ::db/post-internal-id "internal_id" {:unique false})))})
 
 ;; go go go
 

src/computersandblues/lodestone/match.cljs

@@ -21,4 +21,5 @@
     (fn [post]
       (or (match? (j/get post :content))
           (match? (j/get-in post [:account :acct])) ; search for url + username of poster
-          (some #(match? (j/get % :username)) (j/get post :mentions))))))
+          (some #(match? (j/get % :username)) (j/get post :mentions))
+          (some #(when-let [desc (j/get % :description)] (match? desc)) (j/get post :media_attachments)))))) ; search in alt text