enhance(ui): add rtc collabrators online list

deps/shui/src/logseq/shui/util.cljs

@@ -18,8 +18,6 @@
 ;; |--------|-------------------|-------------| \ head
 ;; |--------|-------------------|             | /
 ;; |        |                   |             |
-;; |        |                   |             |
-;; |        |                   |             |
 ;; |--------|-------------------|-------------|
 
 (def $app (partial gdom/getElement "app-container"))
@@ -112,7 +110,17 @@
                     x))
       data)))
 
-(def dev? (some-> (aget js/window "LSUtils") (aget "isDev")))
+(defn $LSUtils [] (aget js/window "LSUtils"))
+(def dev? (some-> ($LSUtils) (aget "isDev")))
+
+(defn uuid-color
+  [uuid-str]
+  (some-> ($LSUtils) (aget "uniqolor")
+    (apply [uuid-str
+            #js {:saturation #js [55, 70],
+                 :lightness 70,
+                 :differencePoint 60}])
+    (aget "color")))
 
 (defn get-path
   "Returns the component path."

packages/ui/package.json

@@ -43,6 +43,7 @@
     "react-remove-scroll": "^2.5.7",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "1.1.1",
     "yup": "^1.3.2",
     "zod": "^3.22.4"
   },

packages/ui/src/ui.ts

@@ -90,6 +90,7 @@ import { Separator } from '@/components/ui/separator'
 import { Toggle } from '@/components/ui/toggle'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import * as uniqolor from 'uniqolor'
 
 declare global {
   var LSUI: any
@@ -192,7 +193,8 @@ function setupGlobals() {
   window.LSUI = shadui
 
   window.LSUtils = {
-    isDev: process.env.NODE_ENV === 'development'
+    isDev: process.env.NODE_ENV === 'development',
+    uniqolor,
   }
 }
 

packages/ui/yarn.lock

@@ -9134,6 +9134,11 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
   integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
[email protected]:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/uniqolor/-/uniqolor-1.1.1.tgz#ef35e41d930d31b90228a18d82dd151b8106b2f3"
+  integrity sha512-HUwezlXCwm5bzsEXW7AP7ybezH13uWENRgYT+3dOdhJPvpYucSqvIGckMiLn+Uy2j0NVf3fPp43uZ4aun3t4Ww==
+
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"

src/main/frontend/components/header.cljs

@@ -5,6 +5,7 @@
             [frontend.components.plugins :as plugins]
             [frontend.components.server :as server]
             [frontend.components.right-sidebar :as sidebar]
+            [frontend.components.settings :as settings]
             [frontend.components.svg :as svg]
             [frontend.config :as config]
             [frontend.context.i18n :refer [t]]
@@ -19,6 +20,8 @@
             [frontend.mobile.util :as mobile-util]
             [frontend.state :as state]
             [frontend.ui :as ui]
+            [logseq.shui.ui :as shui]
+            [logseq.shui.util :as shui-util]
             [frontend.util :as util]
             [frontend.version :refer [version]]
             [reitit.frontend.easy :as rfe]
@@ -54,6 +57,29 @@
         (when loading?
           [:span.ml-2 (ui/loading "")])]])))
 
+(rum/defc rtc-collaborators
+  [online-info]
+  (let [users (some-> online-info (vals) (flatten))]
+    [:div.rtc-collaborators.flex.gap-2.text-sm.py-2.bg-gray-01.px-2.flex-1.ml-2
+     {:on-click #(shui/dialog-open!
+                   (fn []
+                     [:div
+                      [:h1.text-lg.-mt-6.-ml-2 "Collaborators:"]
+                      (settings/settings-collaboration)]))}
+     [:a.opacity-70.text-xs {:class "pt-[4px] pr-1"}
+      (if (not (seq users))
+        (shui/tabler-icon "user-plus")
+        "Collaborators: ")]
+     (for [{:keys [user-email user-name user-uuid]} users
+           :let [color (shui-util/uuid-color user-uuid)]]
+       (shui/avatar
+         {:class "w-6 h-6"
+          :style {:app-region "no-drag"}
+          :title user-email}
+         (shui/avatar-fallback
+           {:style {:background-color (str color "50")}}
+           (subs user-name 0 2))))]))
+
 (rum/defc left-menu-button < rum/reactive
   < {:key-fn #(identity "left-menu-toggle-button")}
   [{:keys [on-click]}]
@@ -239,7 +265,9 @@
       (when (and current-repo
                  (user-handler/logged-in?)
                  (config/db-based-graph? current-repo))
-        (rtc-indicator/indicator))
+        [:<>
+         (rtc-collaborators (state/sub :rtc/online-info))
+         (rtc-indicator/indicator)])
 
       (when (and current-repo
                  (not (config/demo-graph? current-repo))

src/main/frontend/components/header.css

@@ -331,3 +331,10 @@ html.is-zoomed-native-ios {
   user-select: none;
   -webkit-app-region: drag;
 }
+
+/* TODO: remote for prod */
+.theme-inner:not(.ls-left-sidebar-open) {
+  .cp__header > .l {
+    min-width: auto;
+  }
+}