wip: whiteboards onboarding

src/main/frontend/components/whiteboard.cljs

@@ -292,3 +292,40 @@
     (let [name (get-in route-match [:parameters :path :name])
           {:keys [block-id]} (get-in route-match [:parameters :query])]
       (whiteboard-page name block-id))))
+
+(defn onboarding-show
+  []
+  (when-not (get (state/sub :whiteboard/onboarding?) (keyword type))
+    (try
+      (let [login? (boolean (state/sub :auth/id-token))]
+        (when login?
+          (state/pub-event! [:whiteboard/onboarding])
+          (state/set-state! [:whiteboard/onboarding?] true)))
+      (catch :default e
+        (js/console.warn "[onboarding SKIP] " e)))))
+
+(rum/defc onboarding-welcome
+  [close-fn]
+
+  (let [[loading? set-loading?] (rum/use-state false)]
+    [:div.cp__whiteboards-welcome
+     [:span.head-bg
+
+      [:strong "CLOSED ALPHA"]]
+
+     [:h1.text-2xl.font-bold.flex-col.sm:flex-row.opacity-80
+       "A new canvas for your thoughts."]
+
+     [:h2
+      "Whiteboards are a great tool for brainstorming and organization.
+       Now you can place any of your thoughts from the knowledge base or new ones next to each other on a spatial canvas to connect, associate and understand in new ways."]
+
+     [:div.pt-6.flex.justify-center.space-x-2.sm:justify-end
+      (ui/button "Later" :on-click close-fn :background "gray" :class "opacity-60")
+      (ui/button "Start whiteboarding"
+                 :disabled loading?
+                 :on-click (fn []
+                             (set-loading? true)
+                             ;; enable whiteboards and initiate onboaring
+                             (close-fn)
+                             (set-loading? false)))]]))

src/main/frontend/components/whiteboard.css

@@ -222,3 +222,29 @@ html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
   -ms-user-select: none;
   user-select: none;
 }
+
+.cp__whiteboards-welcome {
+  > .head-bg {
+    @apply flex m-auto mb-10 w-auto sm:w-[500px];
+
+    background-image: url("../img/whiteboard-welcome-dark.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding-top: 86px;
+    max-width: 90vw;
+
+    > strong {
+      @apply block bg-gray-200 rounded text-gray-700 text-[10px] font-semibold px-2 py-0.5 opacity-40
+      m-auto translate-y-8;
+    }
+  }
+
+  > h1, > h2 {
+    @apply flex justify-center text-center;
+  }
+
+  > h2 {
+    @apply text-sm opacity-80 pt-3;
+  }
+}

src/main/frontend/handler/events.cljs

@@ -59,7 +59,8 @@
             [logseq.db.schema :as db-schema]
             [promesa.core :as p]
             [rum.core :as rum]
-            [logseq.graph-parser.config :as gp-config]))
+            [logseq.graph-parser.config :as gp-config]
+            [frontend.components.whiteboard :as whiteboard]))
 
 ;; TODO: should we move all events here?
 
@@ -96,7 +97,9 @@
                                     (util/uuid-string? (second (:sync-meta %)))) repos)
                     (sync/<sync-start)))))
             (ui-handler/re-render-root!)
-            (file-sync/maybe-onboarding-show status)))))))
+            (file-sync/maybe-onboarding-show status)
+            (when (user-handler/alpha-or-beta-user?)
+              (whiteboard/onboarding-show))))))))
 
 (defmethod handle :user/logout [[_]]
   (file-sync-handler/reset-session-graphs)
@@ -687,6 +690,12 @@
           (route-handler/redirect! {:to :page
                                     :path-params {:name (:block/name page-entity)}}))))))
 
+(defmethod handle :whiteboard/onboarding [[_ opts]]
+  (state/set-modal!
+   (fn [close-fn] (whiteboard/onboarding-welcome close-fn))
+   (merge {:close-btn?      false
+           :center?         true
+           :close-backdrop? false} opts)))
 
 (defmethod handle :file-sync/onboarding-tip [[_ type opts]]
   (let [type (keyword type)]

src/main/frontend/state.cljs

@@ -275,7 +275,7 @@
      :graph/importing-state                 {}
 
      :whiteboard/onboarding-whiteboard?     (or (storage/get :ls-onboarding-whiteboard?) false)
-     })))
+     :whiteboard/onboarding?                (or (storage/get :whiteboard/onboarding?) false)})))
 
 ;; Block ast state
 ;; ===============