wip: whiteboards onboarding

src/main/frontend/components/whiteboard.cljs

@@ -10,6 +10,7 @@
             [frontend.handler.common :as common-handler]
             [frontend.handler.route :as route-handler]
             [frontend.handler.user :as user-handler]
+            [frontend.handler.config :as config-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
             [frontend.rum :refer [use-bounding-client-rect use-breakpoint
                                   use-click-outside]]
@@ -295,37 +296,27 @@
 
 (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)))))
+  (when (and (user-handler/feature-available? :whiteboard)
+             (not (or (state/enable-whiteboards?)
+                      (state/sub :whiteboard/onboarding?))))
+    (state/pub-event! [:whiteboard/onboarding])
+    (state/set-state! [:whiteboard/onboarding?] true)))
 
 (rum/defc onboarding-welcome
   [close-fn]
+  [:div.cp__whiteboards-welcome
+   [:span.head-bg
 
-  (let [[loading? set-loading?] (rum/use-state false)]
-    [:div.cp__whiteboards-welcome
-     [:span.head-bg
+    [:strong (t :on-boarding/closed-feature (name (:whiteboard user-handler/feature-matrix)))]]
 
-      [:strong "CLOSED ALPHA"]]
+   [:h1.text-2xl.font-bold.flex-col.sm:flex-row
+    (t :on-boarding/welcome-whiteboard-modal-title)]
 
-     [:h1.text-2xl.font-bold.flex-col.sm:flex-row
-       "A new canvas for your thoughts."]
+   [:p (t :on-boarding/welcome-whiteboard-modal-description)]
 
-     [:p
-      "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 "--ls-primary-background-color" :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)))]]))
+   [:div.pt-6.flex.justify-center.space-x-2.sm:justify-end
+    (ui/button (t :on-boarding/welcome-whiteboard-modal-later) :on-click close-fn :background "gray" :class "opacity-60")
+    (ui/button (t :on-boarding/welcome-whiteboard-modal-start)
+               :on-click (fn []
+                           (config-handler/set-config! :feature/enable-whiteboards? true)
+                           (close-fn)))]])

src/main/frontend/components/whiteboard.css

@@ -236,7 +236,7 @@ html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
 
     > strong {
       @apply block rounded text-gray-700 text-[10px] font-semibold px-2 py-0.5
-      m-auto translate-y-8;
+      m-auto translate-y-8 uppercase;
 
       background-color: var(--ls-link-text-color);
     }

src/main/frontend/dicts.cljc

@@ -8,6 +8,7 @@
                           :default "tutorial-en.md")
         :tutorial/dummy-notes #?(:cljs (rc/inline "dummy-notes-en.md")
                                  :default "dummy-notes-en.md")
+        :on-boarding/closed-feature "Closed {1}"
         :on-boarding/demo-graph "This is a demo graph, changes will not be saved until you open a local folder."
         :on-boarding/add-graph "Add a graph"
         :on-boarding/open-local-dir "Open a local directory"
@@ -16,6 +17,10 @@
         :on-boarding/new-graph-desc-3 "/journals - store your journal pages"
         :on-boarding/new-graph-desc-4 "/pages - store the other pages"
         :on-boarding/new-graph-desc-5 "/logseq - store configuration, custom.css, and some metadata."
+        :on-boarding/welcome-whiteboard-modal-title "A new canvas for your thoughts."
+        :on-boarding/welcome-whiteboard-modal-description "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."
+        :on-boarding/welcome-whiteboard-modal-later "Later"
+        :on-boarding/welcome-whiteboard-modal-start "Start whiteboarding"
         :help/start "Getting started"
         :help/about "About Logseq"
         :help/roadmap "Roadmap"

src/main/frontend/handler/events.cljs

@@ -98,8 +98,7 @@
                     (sync/<sync-start)))))
             (ui-handler/re-render-root!)
             (file-sync/maybe-onboarding-show status)
-            (when (user-handler/alpha-or-beta-user?)
-              (whiteboard/onboarding-show))))))))
+            (whiteboard/onboarding-show)))))))
 
 (defmethod handle :user/logout [[_]]
   (file-sync-handler/reset-session-graphs)

src/main/frontend/handler/user.cljs

@@ -200,3 +200,14 @@
 (defn alpha-or-beta-user?
   []
   (or (alpha-user?) (beta-user?)))
+
+(defonce feature-matrix {:file-sync :beta
+                         :whiteboard :alpha})
+
+(defn feature-available?
+  [feature]
+  (when (logged-in?)
+    (case (feature feature-matrix)
+      :beta (alpha-or-beta-user?)
+      :alpha (alpha-user?)
+      false)))