UI improvement

web/src/frontend/components/agenda.cljs

@@ -1,46 +1,49 @@
 (ns frontend.components.agenda
-  ;; (:require [rum.core :as rum]
+  (:require [rum.core :as rum]
-  ;;           [frontend.mui :as mui]
+            [frontend.util :as util]
-  ;;           [frontend.util :as util]
+            [frontend.handler :as handler]
-  ;;           [frontend.handler :as handler]
+            [frontend.format.org.block :as block]
-  ;;           [frontend.format.org.block :as block]
+            [frontend.state :as state]
-  ;;           [frontend.state :as state]
+            [clojure.string :as string]
-  ;;           [clojure.string :as string]
+            [frontend.format.org-mode :as org]
-  ;;           [frontend.format.org-mode :as org])
+            [frontend.components.sidebar :as sidebar]))
-  )
 
-;; (rum/defc timestamps-cp
+(rum/defc agenda
-;;   [timestamps]
+  []
-;;   [:ul
+  (sidebar/sidebar [:div "Agenda"]))
-;;    (for [[type {:keys [date time]}] timestamps]
-;;      (let [{:keys [year month day]} date
-;;            {:keys [hour min]} time]
-;;        [:li {:key type}
-;;         [:span {:style {:margin-right 6}} type]
-;;         [:span (if time
-;;                  (str year "-" month "-" day " " hour ":" min)
-;;                  (str year "-" month "-" day))]]))])
 
-;; (rum/defc title-cp
+(rum/defc timestamps-cp
-;;   [title]
+  [timestamps]
-;;   (let [title-json (js/JSON.stringify (clj->js title))
+  [:ul
-;;         html (org/inline-list->html title-json)]
+   (for [[type {:keys [date time]}] timestamps]
-;;     (util/raw-html html)))
+     (let [{:keys [year month day]} date
+           {:keys [hour min]} time]
+       [:li {:key type}
+        [:span {:style {:margin-right 6}} type]
+        [:span (if time
+                 (str year "-" month "-" day " " hour ":" min)
+                 (str year "-" month "-" day))]]))])
 
-;; (rum/defc marker-cp
+(rum/defc title-cp
-;;   [marker]
+  [title]
-;;   [:span {:class (str "marker-" (string/lower-case marker))
+  (let [title-json (js/JSON.stringify (clj->js title))
-;;           :style {:margin-left 8}}
+        html (org/inline-list->html title-json)]
-;;    (if (contains? #{"DOING" "IN-PROGRESS"} marker)
+    (util/raw-html html)))
-;;      (str " (" marker ")"))])
 
-;; (rum/defc tags-cp
+(rum/defc marker-cp
-;;   [tags]
+  [marker]
-;;   [:span
+  [:span {:class (str "marker-" (string/lower-case marker))
-;;    (for [tag tags]
+          :style {:margin-left 8}}
-;;      [:span.tag {:key tag}
+   (if (contains? #{"DOING" "IN-PROGRESS"} marker)
-;;       [:span
+     (str " (" marker ")"))])
-;;        tag]])])
+
+(rum/defc tags-cp
+  [tags]
+  [:span
+   (for [tag tags]
+     [:span.tag {:key tag}
+      [:span
+       tag]])])
 
 ;; (rum/defc agenda
 ;;   [tasks]

web/src/frontend/components/file.cljs

@@ -55,7 +55,7 @@
         [_encoded-path path] (get-path state)]
     (sidebar/sidebar
      [:div#content.flex.justify-center
-      [:div.m-6.flex-1 {:style {:max-width 900}}
+      [:div.m-6.flex-1 {:style {:max-width 800}}
        [:h3.mb-2 (str "Update " path)]
        [:textarea
         {:rows (+ 3 (count-newlines @content))

web/src/frontend/components/sidebar.cljs

@@ -6,7 +6,7 @@
             [frontend.components.repo :as repo]
             [goog.crypt.base64 :as b64]
             [frontend.util :as util]
-            ))
+            [frontend.state :as state]))
 
 (defonce active-button :a.group.flex.items-center.px-2.py-2.text-base.leading-6.font-medium.rounded-md.text-white.bg-gray-900.focus:outline-none.focus:bg-gray-700.transition.ease-in-out.duration-150)
 (defonce inactive-button :a.mt-1.group.flex.items-center.px-2.py-2.text-base.leading-6.font-medium.rounded-md.text-gray-300.hover:text-white.hover:bg-gray-700.focus:outline-none.focus:text-white.focus:bg-gray-700.transition.ease-in-out.duration-150)
@@ -28,25 +28,32 @@
 
 (rum/defq files-list <
   {:q (fn [] (db/sub-files))}
-  [state files]
+  [state files file-active?]
   [:div.cursor-pointer.my-1.flex.flex-col.ml-2
    (if (seq files)
      (let [files (->> files (map first))]
        (for [file files]
-         [:a {:key file
+         (let [encoded-path (b64/encodeString file)]
-              :class (util/hiccup->class "mt-1.group.flex.items-center.px-2.py-1.text-base.leading-6.font-medium.rounded-md.text-gray-500.hover:text-white.hover:bg-gray-700.focus:outline-none.focus:text-white.focus:bg-gray-700.transition.ease-in-out.duration-150")
+           [:a {:key file
-              :href (str "/file/" (b64/encodeString file))}
+                :class (util/hiccup->class "mt-1.group.flex.items-center.px-2.py-1.text-base.leading-6.font-medium.rounded-md.text-gray-500.hover:text-white.hover:bg-gray-700.focus:outline-none.focus:text-white.focus:bg-gray-700.transition.ease-in-out.duration-150")
-          file])))])
+                :style {:color (if (file-active? encoded-path) "#FFF")}
+                :href (str "/file/" encoded-path)}
+            file]))))])
 
-(rum/defc sidebar-nav
+(rum/defc sidebar-nav < rum/reactive
   []
-  [:nav.flex-1.px-2.py-4.bg-gray-800
+  (let [{:keys [:route-match]} (rum/react state/state)
-   (nav-item "Daily notes" "#"
+        active? (fn [route] (= route (get-in route-match [:data :name])))
-             "M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"
+        file-active? (fn [path]
-             true)
+                       (= path (get-in route-match [:parameters :path :path])))]
-   (nav-item "Agenda" "#"
+    [:nav.flex-1.px-2.py-4.bg-gray-800
-             "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
+     (nav-item "Daily notes" "/"
-   (files-list)])
+               "M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"
+               (active? :home))
+     (nav-item "Agenda" "/agenda"
+               "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+               (active? :agenda))
+     (files-list file-active?)]))
 
 (rum/defq main-content <
   {:q (fn [_state] (db/sub-repos))}

web/src/frontend/routes.cljs

@@ -4,6 +4,7 @@
             [frontend.components.auth :as auth]
             [frontend.components.repo :as repo]
             [frontend.components.file :as file]
+            [frontend.components.agenda :as agenda]
             ))
 
 (def routes
@@ -26,6 +27,10 @@
     {:name :file-edit
      :view file/edit}]
 
+   ["/agenda"
+    {:name :agenda
+     :view agenda/agenda}]
+
    ;; TODO: edit file
    ;; Settings
    ;; ["/item/:id"