athensresearch · shanberg · Apr 9, 2022 · Apr 4, 2022 · Apr 4, 2022 · Apr 4, 2022
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -3,10 +3,8 @@
   <head>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width,initial-scale=1">
-      <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
       <link rel="shortcut icon" type="image/png" href="favicon.png" />
       <link href="./css/katex.min.css" rel="stylesheet" />
-      <link rel="stylesheet" href="./css/codemirror.css" type="text/css" />
       <style id="_stylefy-constant-styles_"></style>
       <style id="_stylefy-styles_"></style>
       <noscript>

diff --git a/src/cljs/athens/components.cljs b/src/cljs/athens/components.cljs
@@ -39,7 +39,7 @@
   [span-click-stop
    [:> Checkbox {:isChecked false
                  :verticalAlign "middle"
-                 :transform "translateY(-2px)"
+                 :transform "translateY(-1px)"
                  :onChange #(todo-on-click uid #"\{\{\[\[TODO\]\]\}\}" "{{[[DONE]]}}")}]])
 
 
@@ -48,7 +48,7 @@
   [span-click-stop
    [:> Checkbox {:isChecked   true
                  :verticalAlign "middle"
-                 :transform "translateY(-2px)"
+                 :transform "translateY(-1px)"
                  :onChange #(todo-on-click uid #"\{\{\[\[DONE\]\]\}\}" "{{[[TODO]]}}")}]])
 
 

diff --git a/src/cljs/athens/electron/db_menu/core.cljs b/src/cljs/athens/electron/db_menu/core.cljs
@@ -35,9 +35,10 @@
                            :synchronising)]
     [:<>
      [db-modal/merge-modal merge-open?]
-     [:> Popover {:placement "bottom-start"}
+     [:> Popover {:placement "bottom-start" :isLazy true}
       [:> PopoverTrigger
        [:> IconButton {:p 0
+                       "aria-label" "Database menu"
                        :bg "background.floor"}
         ;; DB Icon + Dropdown toggle
         [db-icon {:db     active-db

diff --git a/src/cljs/athens/views/athena.cljs b/src/cljs/athens/views/athena.cljs
@@ -174,7 +174,8 @@
                    :pt 4
                    :mb 4
                    :px 4
-                   :overflowY "overlay"
+                   :overflowY "auto"
+                   :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}
                    :_empty {:display "none"}}
         (doall
           (for [[i x] (map-indexed list recent-items)]
@@ -201,7 +202,8 @@
               :pt 4
               :mb 4
               :px 4
-              :overflowY "overlay"
+              :overflowY "auto"
+              :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}
               :_empty {:display "none"}}
    (doall
      (for [[i x] (map-indexed list results)

diff --git a/src/cljs/athens/views/blocks/autocomplete_search.cljs b/src/cljs/athens/views/blocks/autocomplete_search.cljs
@@ -1,6 +1,7 @@
 (ns athens.views.blocks.autocomplete-search
   (:require
-    ["@chakra-ui/react" :refer [Portal Popover PopoverTrigger PopoverBody Button PopoverContent Text Box]]
+    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
+    ["@chakra-ui/react" :refer [Text]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [clojure.string :as string]))
 
@@ -19,48 +20,23 @@
 (defn inline-search-el
   [_block]
   (fn [block state]
-    (let [{:search/keys [index results type query] caret-position :caret-position} @state
-          can-open (some #(= % type) [:page :block :hashtag :template])
-          {:keys [left top]} caret-position]
-      [:> Popover {:isOpen can-open
-                   :placement "bottom-start"
-                   :isLazy true
-                   :returnFocusOnClose false
-                   :closeOnBlur true
-                   :closeOnEsc true
-                   :onClose #(swap! state assoc :search/type false)
-                   :autoFocus false
-                   :onMouseDown (fn [e] (.. e preventDefault))}
-       [:> PopoverTrigger
-        [:> Box {:position "fixed"
-                 :overflow "auto"
-                 :width "0"
-                 :height "0"
-                 :top (str (+ 24 top) "px")
-                 :left (str (+ 24 left) "px")}]]
-       [:> Portal
-        [:> PopoverContent
-         [:> PopoverBody {:p 0
-                          :overflow "hidden"
-                          :borderRadius "inherit"}
-          (when can-open
-            (if (or (string/blank? query)
-                    (empty? results))
-              [:> Text {:py "0.4rem"
-                        :px "0.8rem"
-                        :fontStyle "italics"}
-               (str "Search for a " (symbol type))]
-              (doall
-                (for [[i {:keys [node/title block/string block/uid]}] (map-indexed list results)]
-                  [:> Button {:key (str "inline-search-item" uid)
-                              :id (str "dropdown-item-" i)
-                              :borderRadius "0"
-                              :justifyContent "flex-start"
-                              :width "100%"
-                              :_first {:borderTopRadius "inherit"}
-                              :_last {:borderBottomRadius "inherit"}
-                              :isActive (= index i)
-                              ;; if page link, expand to title. otherwise expand to uid for a block ref
-                              :onClick (fn [_] (inline-item-click state (:block/uid block) (or title uid)))}
-                   (or title string)]))))]]]])))
-
+    (let [{:keys [last-e]} @state
+          {:search/keys [index results type query]} @state
+          is-open (some #(= % type) [:page :block :hashtag :template])]
+      [:> Autocomplete {:event last-e
+                        :isOpen is-open
+                        :onClose #(swap! state assoc :search/type false)}
+       (when is-open
+         (if (or (string/blank? query)
+                 (empty? results))
+           [:> Text {:py "0.4rem"
+                     :px "0.8rem"
+                     :fontStyle "italics"}
+            (str "Search for a " (symbol type))]
+           (doall
+             (for [[i {:keys [node/title block/string block/uid]}] (map-indexed list results)]
+               [:> AutocompleteButton {:key (str "inline-search-item" uid)
+                                       :isActive (= i index)
+                                       :onClick (fn [_] (inline-item-click state (:block/uid block) (or title uid)))
+                                       :id (str "inline-search-item" uid)}
+                (or title string)]))))])))
diff --git a/src/cljs/athens/views/blocks/autocomplete_slash.cljs b/src/cljs/athens/views/blocks/autocomplete_slash.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.autocomplete-slash
   (:require
-    ["@chakra-ui/react" :refer [Portal Menu MenuList MenuItem]]
+    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [reagent.core :as r]))
 
@@ -15,24 +15,18 @@
 (defn slash-menu-el
   [_block]
   (fn [block state]
-    (let [{:search/keys [index results type] caret-position :caret-position} @state
-          {:keys [left top]} caret-position]
-      [:> Menu {:isOpen (= type :slash)
-                :onClose #(swap! state assoc :search/type false)
-                :isLazy true}
-       [:> Portal
-        (when (= type :slash)
-          [:> MenuList {:position "absolute"
-                        :left (str left "px")
-                        :top (str (+ top 24) "px")}
-           (doall
-             (for [[i [text icon _expansion kbd _pos :as item]] (map-indexed list results)]
-               [:> MenuItem {:key     text
-                             :isFocusable false
-                             :id      (str "dropdown-item-" i)
-                             :command kbd
-                             :class (when (= i index) "isActive")
-                             :onClick (fn [_] (slash-item-click state block item))}
-                [:<>
-                 [(r/adapt-react-class icon)]
-                 text]]))])]])))
+    (let [{:keys [last-e]} @state
+          {:search/keys [index results type]} @state]
+      [:> Autocomplete {:event last-e
+                        :isOpen (= type :slash)
+                        :onClose #(swap! state assoc :search/type false)}
+       (when (= type :slash)
+         (for [[i [text icon _expansion kbd _pos :as item]] (map-indexed list results)]
+           [:> AutocompleteButton {:key     text
+                                   :id      (str "dropdown-item-" i)
+                                   :command kbd
+                                   :isActive (when (= i index) "isActive")
+                                   :onClick (fn [_] (slash-item-click state block item))}
+            [:<>
+             [(r/adapt-react-class icon) {:boxSize 6 :mr 3 :ml 0}]
+             text]]))])))
diff --git a/src/cljs/athens/views/blocks/content.cljs b/src/cljs/athens/views/blocks/content.cljs
@@ -242,8 +242,7 @@
                      :on-click  (fn [e] (.. e stopPropagation) (rf/dispatch [:editing/uid uid]))}
          ;; NOTE: komponentit forces reflow, likely a performance bottle neck
          ;; When block is in editing mode or the editing DOM elements are rendered
-         ;;  (when (or (:show-editable-dom @state) @editing?)
-         (when true
+         (when (or (:show-editable-dom @state) @editing?)
            [autosize/textarea {:value          (:string/local @state)
                                :class          ["block-input-textarea" (when (and (empty? @selected-items) @editing?) "is-editing")]
                                ;; :auto-focus  true

diff --git a/src/cljs/athens/views/blocks/core.cljs b/src/cljs/athens/views/blocks/core.cljs
@@ -402,7 +402,6 @@
          [:> Container {:sx (merge block-container-inner-style
                                    {"--block-surface-color" "background.floor"})
                         :isDragging (and dragging (not is-selected))
-                        ;; :isEditing is-editing
                         :isSelected is-selected
                         :hasChildren (seq children)
                         :isOpen open

diff --git a/src/cljs/athens/views/blocks/textarea_keydown.cljs b/src/cljs/athens/views/blocks/textarea_keydown.cljs
@@ -1,27 +1,20 @@
 (ns athens.views.blocks.textarea-keydown
   (:require
-    ["@material-ui/icons/DesktopWindows" :default DesktopWindows]
-    ["@material-ui/icons/Done" :default Done]
-    ["@material-ui/icons/FlipToFront" :default FlipToFront]
-    ["@material-ui/icons/Timer" :default Timer]
-    ["@material-ui/icons/Today" :default Today]
-    ["@material-ui/icons/ViewDayRounded" :default ViewDayRounded]
-    ["@material-ui/icons/YouTube" :default YouTube]
+    ["/components/Icons/Icons" :refer [TimeNow CheckboxIcon CalendarNowIcon CalendarTomorrowIcon CalendarYesterdayIcon BlockEmbedIcon TemplateIcon HTMLEmbedIcon YoutubeIcon]]
     [athens.common-db :as common-db]
     [athens.common.utils :as common.utils]
     [athens.dates :as dates]
     [athens.db :as db]
     [athens.events.selection :as select-events]
     [athens.router :as router]
     [athens.subs.selection :as select-subs]
-    [athens.util :as util :refer [scroll-if-needed get-caret-position shortcut-key? escape-str]]
+    [athens.util :as util :refer [scroll-if-needed shortcut-key? escape-str]]
     [athens.views.blocks.internal-representation :as internal-representation]
     [clojure.string :refer [replace-first blank? includes? lower-case]]
     [goog.dom :refer [getElement]]
     [goog.dom.selection :refer [setStart setEnd getText setCursorPosition getEndPoints]]
     [goog.events.KeyCodes :refer [isCharacterKey]]
-    [goog.functions :refer [throttle #_debounce]]
-    [goog.style :refer [getClientPosition]]
+    [goog.functions :refer [throttle]]
     [re-frame.core :as rf :refer [dispatch dispatch-sync subscribe]])
   (:import
     (goog.events
@@ -96,18 +89,17 @@
 
 
 ;; Dropdown: inline-search and slash commands
-
 ;; TODO: some expansions require caret placement after
 (def slash-options
-  [["Add Todo"      Done "{{[[TODO]]}} " "cmd-enter" nil]
-   ["Current Time"  Timer (fn [] (.. (js/Date.) (toLocaleTimeString [] (clj->js {"timeStyle" "short"})))) nil nil]
-   ["Today"         Today (fn [] (str "[[" (:title (dates/get-day 0)) "]] ")) nil nil]
-   ["Tomorrow"      Today (fn [] (str "[[" (:title (dates/get-day -1)) "]]")) nil nil]
-   ["Yesterday"     Today (fn [] (str "[[" (:title (dates/get-day 1)) "]]")) nil nil]
-   ["YouTube Embed" YouTube "{{[[youtube]]: }}" nil 2]
-   ["iframe Embed"  DesktopWindows "{{iframe: }}" nil 2]
-   ["Block Embed"   ViewDayRounded "{{[[embed]]: (())}}" nil 4]
-   ["Template"      FlipToFront ";;" nil nil]])
+  [["Add Todo"      CheckboxIcon "{{[[TODO]]}} " "cmd-enter" nil]
+   ["Current Time"  TimeNow (fn [] (.. (js/Date.) (toLocaleTimeString [] (clj->js {"timeStyle" "short"})))) nil nil]
+   ["Today"         CalendarNowIcon (fn [] (str "[[" (:title (dates/get-day 0)) "]] ")) nil nil]
+   ["Tomorrow"      CalendarTomorrowIcon (fn [] (str "[[" (:title (dates/get-day -1)) "]]")) nil nil]
+   ["Yesterday"     CalendarYesterdayIcon (fn [] (str "[[" (:title (dates/get-day 1)) "]]")) nil nil]
+   ["YouTube Embed" YoutubeIcon "{{[[youtube]]: }}" nil 2]
+   ["iframe Embed"  HTMLEmbedIcon "{{iframe: }}" nil 2]
+   ["Block Embed"   BlockEmbedIcon "{{[[embed]]: (())}}" nil 4]
+   ["Template"      TemplateIcon ";;" nil nil]])
 
 
 ;; [ "Block Embed" #(str "[[" (:title (dates/get-day 1)) "]]")]
@@ -182,6 +174,7 @@
    (let [target (.. e -target)
          {:search/keys [index results]} @state
          item (nth results index)]
+     (println "ran auto-complete-slash")
      (auto-complete-slash state target item)))
   ;; here comes the autocompletion logic itself,
   ;; independent of the input method the user used.
@@ -197,6 +190,8 @@
          start-idx (dec (count (re-find #"(?s).*/" head)))]
      (swap! state assoc
             :search/type nil)
+
+     (println "ran auto-complete-slash")
      (set-selection target start-idx start)
      (replace-selection-with expand)
      (when pos
@@ -470,8 +465,9 @@
   "BUG: escape is fired 24 times for some reason."
   [e state]
   (.. e preventDefault)
-  (swap! state assoc :search/type nil)
-  (dispatch [:editing/uid nil]))
+  (if (:search/type @state)
+    (swap! state assoc :search/type nil)
+    (dispatch [:editing/uid nil])))
 
 
 (def throttled-dispatch-sync
@@ -815,15 +811,7 @@
 
       ;; used for paste, to determine if shift key was held down
       (swap! state assoc :last-keydown d-event)
-
-      ;; update caret position for search dropdowns and for up/down
-      (when (nil? (:search/type @state))
-
-        (let [caret-position (get-caret-position (.. e -target))
-              textarea-position (js->clj (getClientPosition (.. e -target)) :keywordize-keys true)
-              position {:left (+ (:left caret-position) (.. textarea-position -x))
-                        :top (+ (:top caret-position) (.. textarea-position -y))}]
-          (swap! state assoc :caret-position position)))
+      (swap! state assoc :last-e e)
 
       ;; dispatch center
       ;; only when nothing is selected or duplicate/events dispatched

diff --git a/src/cljs/athens/views/left_sidebar.cljs b/src/cljs/athens/views/left_sidebar.cljs
@@ -25,6 +25,7 @@
                 :borderBottomColor (when (:below @drag) "brand")}
        [:> Button {:variant "ghost"
                    :mx "1rem"
+                   :display "inline-block"
                    :textAlign "left"
                    :justifyContent "flex-start"
                    :overflow "hidden"
@@ -85,6 +86,7 @@
         {:style {:display "flex"
                  :flex-direction "column"
                  :height "100%"
+                 :zIndex 1
                  :alignItems "stretch"
                  :gridArea "left-sidebar"
                  :position "relative"
@@ -101,10 +103,13 @@
                     :align "stretch"
                     :width expanded-sidebar-width
                     :py "1rem"
-                    :paddingTop "7rem"
+                    :marginTop "7rem"
                     :spacing "0.25rem"
-                    :overflowY "overlay"
-                    :sx {:listStyle "none"
+                    :overflowY "auto"
+                    :backdropFilter "blur(1em)"
+                    :borderRadius "lg"
+                    :sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}
+                         :listStyle "none"
                          :WebkitAppRegion "no-drag"}}
          [:> Heading {:as "h2"
                       :px "2rem"