[wip] notifications

package.json

@@ -59,14 +59,13 @@
   },
   "main": "resources/main.js",
   "devDependencies": {
-    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-context-menu": "2.1.5",
     "@radix-ui/react-dropdown-menu": "2.0.5",
     "@radix-ui/react-menubar": "1.0.3",
     "@radix-ui/react-popover": "1.0.6",
     "@radix-ui/react-select": "1.2.2",
-    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@re-path/react-color": "^2.19.4",
+    "@re-path/react-color": "2.19.4",
     "@sentry/react": "7.66.0",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
@@ -97,7 +96,7 @@
     "postcss-nested": "6.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-fps": "^1.0.6",
+    "react-fps": "1.0.6",
     "react-frame-component": "5.2.6",
     "react-svg": "16.1.16",
     "shadow-cljs": "2.25.8",

src/renderer/core.cljs

@@ -14,6 +14,7 @@
    [renderer.elements.core]
    [renderer.reepl.core]
    [renderer.attribute.core]
+   [renderer.notification.core]
    [renderer.reepl.replumb :as replumb]
    [replumb.repl :as repl]
    [renderer.views :as views]

src/renderer/db.cljs

@@ -8,6 +8,7 @@
    :documents {}
    :document-tabs []
    :system-fonts []
+   :notifications []
    :debug-info? false
    :pen-mode? false
    :repl/mode :cljs

src/renderer/notification/core.cljs

@@ -0,0 +1,3 @@
+(ns renderer.notification.core
+  (:require [renderer.notification.events]
+            [renderer.notification.subs]))

src/renderer/notification/events.cljs

@@ -0,0 +1,19 @@
+(ns renderer.notification.events
+  (:require
+   [re-frame.core :as rf]
+   [renderer.utils.vec :as vec]))
+
+(rf/reg-event-db
+ :notification/add
+ (fn [db [_ notification]]
+   (update db :notifications conj notification)))
+
+(rf/reg-event-db
+ :notification/remove
+ (fn [db [_ index]]
+   (update db :notifications #(vec/remove-by-index % index))))
+
+#_(rf/reg-event-db
+ :notification/clear
+ (fn [db [_]]
+   (assoc db :notifications [])))

src/renderer/notification/styles.css

@@ -0,0 +1,12 @@
+.toast {
+  @apply flex level-3 rounded shadow-md p-4 relative;
+
+  width: 390px;
+  max-width: 100vw;
+}
+
+.toast-description {
+  grid-area: description;
+  margin: 0;
+  line-height: 1.3;
+}

src/renderer/notification/subs.cljs

@@ -0,0 +1,8 @@
+(ns renderer.notification.subs
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :notifications
+ (fn [db [_]]
+   (-> db :notifications)))

src/renderer/notification/views.cljs

@@ -0,0 +1,19 @@
+(ns renderer.notification.views
+  (:require
+   [re-frame.core :as rf]
+   [renderer.components :as comp]))
+
+(defn main
+  []
+  (let [notifications @(rf/subscribe [:notifications])]
+    [:div.fixed.flex.flex-col.m-4.right-0.bottom-0.gap-2
+     (map-indexed (fn [index notification]
+                    [:div.toast
+                     {:key index}
+                     [:div.toast-description
+                      (:content notification)]
+                     [comp/icon-button
+                      {:title "Dismiss"
+                       :icon "times"
+                       :action #(rf/dispatch-sync [:notification/remove index])}]])
+                  notifications)]))

src/renderer/styles.css

@@ -467,68 +467,4 @@ pre {
   &[data-state='delayed-open'][data-side='left'] {
     animation-name: slideRightAndFade;
   }
-}
-
-
-.toast-viewport {
-  @apply fixed flex flex-col p-4 right-0 bottom-0 gap-2;
-
-  width: 390px;
-  max-width: 100vw;
-  list-style: none;
-  z-index: 2147483647;
-  outline: none;
-}
-
-.toast-root {
-  @apply grid level-3 rounded shadow-md p-4 relative;
-
-  grid-template-areas: 'title action' 'description action';
-  grid-template-columns: auto max-content;
-  column-gap: 15px;
-  align-items: center;
-
-  &[data-state='open'] {
-    animation: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  &[data-state='closed'] {
-    animation: hide 100ms ease-in;
-  }
-
-  &[data-swipe='move'] {
-    transform: translateX(var(--radix-toast-swipe-move-x));
-  }
-
-  &[data-swipe='cancel'] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
-
-  &[data-swipe='end'] {
-    animation: swipeOut 100ms ease-out;
-  }
-}
-
-.toast-title {
-  @apply text-lg;
-
-  grid-area: title;
-  margin-bottom: 5px;
-  font-weight: 500;
-  color: var(--slate-12);
-}
-
-.toast-description {
-  grid-area: description;
-  margin: 0;
-  line-height: 1.3;
-}
-
-.toast-action {
-  grid-area: action;
-}
-
-.toast-close {
-  @apply absolute top-4 right-4;
 }

src/renderer/tools/dropper.cljs

@@ -13,17 +13,21 @@
 
 (defmethod tools/activate :dropper
   [db]
-  ;; TODO side effect within db handler
+  ;; FIXME side effect within db handler
   (if (.-EyeDropper js/window)
     (do (-> (js/EyeDropper.)
             (.open)
             (.then (fn [result]
                      (rf/dispatch [:elements/fill (.-sRGBHex result)])
                      (rf/dispatch [:document/set-fill (.-sRGBHex result)])
                      (rf/dispatch [:set-tool :select])))
-            (.catch #(rf/dispatch [:set-tool :select])))
+            (.catch (fn [error]
+                      (rf/dispatch [:notification/add {:content (str error)}])
+                      (rf/dispatch [:set-tool :select]))))
         (handlers/set-message db [:div "Click anywhere to pick a color."]))
-    (tools/set-tool db :select)))
+    (-> db
+        (update :notifications conj "Your browser does not support the EyeDropper API")
+        (tools/set-tool :select))))