make confetti and add resource form

resources/public/css/output.css

@@ -1045,6 +1045,15 @@ html {
   min-height: fit-content;
 }
 
+.diff {
+  position: relative;
+  display: grid;
+  width: 100%;
+  overflow: hidden;
+  container-type: inline-size;
+  grid-template-columns: auto 1fr;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -1181,6 +1190,18 @@ html {
     }
   }
 
+  .btn-outline.btn-primary:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+    .btn-outline.btn-primary:hover {
+      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    }
+  }
+
   .btn-outline.btn-warning:hover {
     --tw-text-opacity: 1;
     color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
@@ -1556,6 +1577,10 @@ html {
     border-color: var(--btn-color, var(--fallback-b2));
   }
 
+  .btn-primary {
+    --btn-color: var(--fallback-p);
+  }
+
   .btn-warning {
     --btn-color: var(--fallback-wa);
   }
@@ -1566,6 +1591,11 @@ html {
 }
 
 @supports (color: color-mix(in oklab, black, black)) {
+  .btn-outline.btn-primary.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+  }
+
   .btn-outline.btn-warning.btn-active {
     background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
     border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
@@ -1583,7 +1613,17 @@ html {
   outline-offset: 2px;
 }
 
+.btn-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  outline-color: var(--fallback-p,oklch(var(--p)/1));
+}
+
 @supports (color: oklch(0% 0 0)) {
+  .btn-primary {
+    --btn-color: var(--p);
+  }
+
   .btn-warning {
     --btn-color: var(--wa);
   }
@@ -1633,6 +1673,16 @@ html {
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
 
+.btn-outline.btn-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
+}
+
+.btn-outline.btn-primary.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+
 .btn-outline.btn-warning {
   --tw-text-opacity: 1;
   color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
@@ -2535,6 +2585,10 @@ details.collapse summary::-webkit-details-marker {
   z-index: 1;
 }
 
+.float-right {
+  float: right;
+}
+
 .m-1 {
   margin: 0.25rem;
 }
@@ -2583,6 +2637,10 @@ details.collapse summary::-webkit-details-marker {
   width: 2.5rem;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -2685,6 +2743,10 @@ details.collapse summary::-webkit-details-marker {
   border-radius: 9999px;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2736,6 +2798,11 @@ details.collapse summary::-webkit-details-marker {
   padding-bottom: 1rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;

src/ied/core.cljs

@@ -21,5 +21,6 @@
   (routes/start!)
   (re-frame/dispatch-sync [::events/initialize-db])
   (re-frame/dispatch [::events/connect-to-default-relays])
+  (re-frame/dispatch [::events/set-visit-timestamp])
   (dev-setup)
   (mount-root))

src/ied/events.cljs

@@ -24,7 +24,8 @@
 (re-frame/reg-event-fx
  ::navigate
  (fn-traced [_ [_ handler]]
-            {:navigate handler}))
+            {:dispatch [::set-visit-timestamp]
+             :navigate handler}))
 
 (re-frame/reg-event-fx
  ::set-active-panel
@@ -194,8 +195,10 @@
                          :created_at (:now cofx)
                          :content ""
                          :tags [["d" (:id resource)]
-                                ["author" "" (:author resource)]]}]
+                                ["id" (:id resource)]
-              {::sign-and-publish-event [event (:sk cofx)]})))
+                                ["author" "" (:author resource)]
+                                ["name" (:name resource)]]}]
+              {::sign-and-publish-event [event (-> cofx :db :sk)]})))
 
 ;; TODO maybe we need some validation before publishing
 (re-frame/reg-fx
@@ -452,5 +455,13 @@
  ::add-confetti
  (fn [_ _]
    (let [confetti-instance (new jsConfetti)]
-     (.addConfetti confetti-instance))
+     (.addConfetti confetti-instance (clj->js {:emojis ["😺" "🐈‍⬛" "🦄"]})))
    {}))
+
+(re-frame/reg-event-fx
+ ::set-visit-timestamp
+ [(re-frame/inject-cofx  :now)]
+ (fn [cofx [_]]
+   {:db (assoc (:db cofx) :visited-at (:now cofx))}))
+
+

src/ied/subs.cljs

@@ -208,3 +208,8 @@
  ::events-in-list
  (fn [db [_ event-ids]]
    (filter (fn [e] (contains? event-ids (:id e))) (:events db))))
+
+(re-frame/reg-sub
+  ::visited-at
+  (fn [db _]
+    (:visited-at db)))

src/ied/views.cljs

@@ -34,8 +34,9 @@
                 :value (:author @s)
                 :on-change (fn [e]
                              (swap! s assoc :author (-> e .-target .-value)))}]
-       [:button {:on-click #(re-frame/dispatch [::events/publish-resource {:name (:name @s) ;; TODO this should be sth like build event
+       [:button {:class "btn btn-warning"
-                                                                           :uri (:uri @s)
+                 :on-click #(re-frame/dispatch [::events/publish-resource {:name (:name @s) ;; TODO this should be sth like build event
+                                                                           :id (:uri @s)
                                                                            :author (:author @s)}])}
         "Publish Resource"]])))
 
@@ -49,6 +50,7 @@
                  :on-click #(re-frame/dispatch [::events/convert-amb-and-publish-as-nostr-event (:json-string @s)])}
         "Publish as Nostr Event"]])))
 
+;; TODO try again using xhrio
 (defn add-resosurce-by-uri []
   (let [uri (reagent/atom {:uri ""})]
     (fn []
@@ -78,9 +80,14 @@
 
 ;; metadata event component
 (defn metadata-event-component [event]
-  (let [selected-events @(re-frame/subscribe  [::subs/selected-events])]
+  (let [selected-events @(re-frame/subscribe  [::subs/selected-events])
+        visited-at @(re-frame/subscribe [::subs/visited-at])
+        now (quot (.now js/Date) 1000)
+        diff (- now visited-at)
+        _ (when (>= diff 5)
+            (re-frame/dispatch [::events/add-confetti]))]
     [:div
-     {:class "card bg-base-100 w-96 shadow-xl min-h-[620px]"}
+     {:class "animate-flyIn card bg-base-100 w-96 shadow-xl min-h-[620px]"}
      [:figure
       [:img
        {:class "h-48 object-cover"
@@ -114,17 +121,18 @@
 
 ;; events
 (defn events-panel []
-  (let [events @(re-frame/subscribe  [::subs/metadata-events])
+  (let [events @(re-frame/subscribe  [::subs/feed-events])
-        selected-events @(re-frame/subscribe  [::subs/selected-events])
+        selected-events @(re-frame/subscribe  [::subs/selected-events])]
-        show-add-event (re-frame/subscribe [::subs/show-add-event])]
     [:div {:class "border-2 rounded"}
      [:p (str "Num of events: " (count events))]
      (if (> (count events) 0)
        [:div {:class "flex flex-wrap justify-center gap-2"}
         (doall
-         (for [event events]
+
+         (for [event  events]
            [:div {:key (:id event)}
             [metadata-event-component event]]))]
+
        [:p "no events there"])
      [:button {:class "btn"
                :disabled (not (boolean (seq selected-events)))
@@ -136,9 +144,11 @@
 ;; event feed component
 (defn event-feed-component [event]
   (let [_ () #_(re-frame/dispatch [::events/add-confetti])]
-   [:div
+    [:div
      {:class "animate-flyIn card bg-base-100 w-64 h-64 shadow-xl border border-white border-w "}
-     [:p (:kind event)]
+     (cond
+       (= 30004 (:kind event)) [:p {:class "text-2xl float-right"} "📖"]
+       (= 30142 (:kind event)) [:p {:class "text-2xl float-right"} "📚"])
      [:figure
       [:img
        {:class "h-48 object-contain"
@@ -346,9 +356,9 @@
         [:div
          {:class "w-10 rounded-full"}
          [:img
-          {:alt "Tailwind CSS Navbar component",
+          {:alt "user image",
            :src
-           "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"}]]]
+           (str "https://robohash.org/" pk)}]]]
        [:ul
         {:tabIndex "0",
          :class
@@ -382,12 +392,12 @@
       [:a {:class "btn btn-ghost text-xl"
            :on-click #(re-frame/dispatch [::events/navigate [:home]])}
        "edufeed"]
-      [:a {:class "btn btn-circle"
+      #_[:a {:class "btn btn-circle"
-           :on-click #(re-frame/dispatch [::events/navigate [:event-feed]])} "Event-Feed"]]
+             :on-click #(re-frame/dispatch [::events/navigate [:event-feed]])} "Event-Feed"]]
      [:div
       {:class "flex-none"}
 
-      [:a {:class "btn btn-circle"
+      [:a {:class "btn btn-circle btn-primary"
            :on-click #(re-frame/dispatch [::events/navigate [:add-resource]])} "+"]
       [shopping-cart]
       [user-menu]]]))