feat: better dashboard grid cols

src/main/frontend/components/whiteboard.cljs

@@ -49,16 +49,42 @@
    [:div.p-4.h-64.flex.justify-center
     (tldraw-preview page-name)]])
 
+;; TODO: move it to util?
+(defn- use-component-rect
+  [ref]
+  (let [[rect set-rect] (rum/use-state nil)]
+    (rum/use-effect!
+     (fn []
+       (let [update-rect #(set-rect (.. ref -current getBoundingClientRect))
+             updator (fn [entries]
+                       (when (.-contentRect (first (js->clj entries))) (update-rect)))
+             observer (js/ResizeObserver. updator)]
+         (update-rect)
+         (.observe observer (.-current ref))
+         #(.disconnect observer)))
+     [])
+    rect))
+
 (rum/defc whiteboard-dashboard
   []
-  (let [whiteboard-names (model/get-all-whiteboard-names (state/get-current-repo))]
+  (let [whiteboard-names (model/get-all-whiteboard-names (state/get-current-repo))
+        ref (rum/use-ref nil)
+        rect (use-component-rect ref)
+        container-width (when rect (.-width rect))
+        cols (cond (< container-width 600) 1
+                   (< container-width 900) 2
+                   (< container-width 1200) 3
+                   :else 4)]
+    (println container-width cols)
     [:div.p-4
+     {:ref ref}
      (ui/button "Create new whiteboard"
                 :small? true
                 :on-click (fn [e]
                             (util/stop e)
-                            (route-handler/redirect-to-whiteboard! (d/squuid) {:new? true})))
-     [:div.gap-8.py-4.grid.grid-rows-auto.md:grid-cols-3.lg:grid-cols-4.grid-cols-1
+                            (route-handler/redirect-to-whiteboard! (d/squuid))))
+     [:div.gap-8.py-4.grid.grid-rows-auto
+      {:style {:grid-template-columns (str "repeat(" cols ", minmax(0, 1fr))")}}
       (for [whiteboard-name whiteboard-names]
         [:<> {:key whiteboard-name} (dashboard-card whiteboard-name)])]]))
 
@@ -85,9 +111,8 @@
     {:style {:z-index 2000}}
     [:span.inline-flex.color-level.text-xl.px-2
      {:style {:color "var(--ls-primary-text-color)"}}
-     (page/page-title name [:<>
-                            [:span.ti.ti-artboard
-                             {:style {:font-size "0.9em"}}]]
+     (page/page-title name [:span.ti.ti-artboard
+                            {:style {:font-size "0.9em"}}]
                       name nil false)]
 
     (whiteboard-references name)]

src/main/frontend/handler/route.cljs

@@ -56,12 +56,11 @@
 (defn redirect-to-whiteboard!
   ([name]
    (redirect-to-whiteboard! name nil))
-  ([name {:keys [new? block-id]}]
+  ([name {:keys [block-id]}]
    (recent-handler/add-page-to-recent! (state/get-current-repo) name)
    (redirect! {:to :whiteboard
                :path-params {:name (str name)}
-               :query-params (merge {:block-id block-id}
-                                    (when new? {:new? 1}))})))
+               :query-params (merge {:block-id block-id})})))
 
 (defn get-title
   [name path-params]

tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx

@@ -16,7 +16,7 @@ interface LineShapeProps extends CustomStyleProps, TLLineShapeProps {
   label: string
 }
 
-const font = '28px / 1 "Inter"'
+const font = '28px / 1 var(--ls-font-family)'
 
 export class LineShape extends TLLineShape<LineShapeProps> {
   static id = 'line'

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx

@@ -33,10 +33,6 @@ export interface TLShapeProps {
   rotation?: number
   handles?: Record<string, TLHandle>
   clipping?: number | number[]
-  fill?: string
-  stroke?: string
-  strokeWidth?: number
-  opacity?: number
   assetId?: string
   children?: string[]
   isGhost?: boolean
@@ -359,12 +355,13 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
   getShapeSVGJsx(preview = false) {
     // Do not need to consider the original point here
     const bounds = this.getBounds()
+    const { stroke, strokeWidth, opacity, fill } = this.props as any
     return (
       <rect
-        fill={this.props.fill}
-        stroke={this.props.stroke}
-        strokeWidth={this.props.strokeWidth ?? 2}
-        fillOpacity={this.props.opacity ?? 0.2}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={strokeWidth ?? 2}
+        fillOpacity={opacity ?? 0.2}
         width={bounds.width}
         height={bounds.height}
       />