Enhance(UX): left sidebar (#11649)

* chore(ui): add sidebar related components

* chore(shui): add sidebar core

* enhance(ui): WIP polish left sidebar

* enhance(ui): polish opacity value

* enhance(ui): remove unnecessary css

* enhance(ui): simplify the left sidebar related css

* enhance(ui): polish left sidebar navigations

* enhance(ui): polish navigations items

* enhance(ui): polish graphs picker from the left sidebar

* enhance(ui): polish graphs selector

* enhance(ui): graphs dropdown content

* enhance(ux): create new page for the graphs selector section

* enhance(ui): remote icon for the graphs selector

* enhance(ui): polish sidebar navigations filter

* fix(ui): background color for the left sidebar

* enhance(ui): refactor names related with the left sidebar

* enhance(ux): WIP configurable navigations from the left sidebar

* enhance(ux): configurable navigations popup

* enhance(ux): persist user navigations from the left sidebar

* fix(ui): bad graph selector type icon

* fix: lint

* fix: lint

* enhance(ui): polish details for the left sidebar

* chore: remove shadcn sidebar component

* chore: remove shadcn sidebar related component

* fix(ui): text overflow for the page name item

packages/ui/@/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

packages/ui/package.json

@@ -20,25 +20,25 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "class-variance-authority": "^0.7.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
-    "lucide-react": "^0.292.0",
+    "lucide-react": "^0.468.0",
     "react": "^18",
     "react-day-picker": "^8.9.1",
     "react-dom": "^18",

packages/ui/src/ui.ts

@@ -98,7 +98,7 @@ declare global {
 }
 
 const shadui = {
-  Link, Button, 
+  Link, Button,
   Slider, SliderTrack, SliderRange, SliderThumb,
   DropdownMenu,
   DropdownMenuContent,
@@ -184,7 +184,7 @@ const shadui = {
   Tooltip, TooltipTrigger, TooltipArrow,
   TooltipContent, TooltipProvider, TooltipPortal,
   Toggle, ToggleGroup, ToggleGroupItem,
-  Avatar, AvatarImage, AvatarFallback
+  Avatar, AvatarImage, AvatarFallback,
 }
 
 function setupGlobals() {

packages/ui/tailwind.config.js

@@ -76,7 +76,6 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
-
         red: mapRadixColorToTailwind('red'),
         pink: mapRadixColorToTailwind('pink'),
         orange: mapRadixColorToTailwind('orange'),

packages/ui/yarn.lock

@@ -2197,6 +2197,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
 "@radix-ui/react-alert-dialog@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz#70dd529cbf1e4bff386814d3776901fcaa131b8c"
@@ -2218,6 +2223,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz#744f388182d360b86285217e43b6c63633f39e7a"
+  integrity sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-avatar@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623"
@@ -2269,6 +2281,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@radix-ui/react-context-menu@^2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.1.5.tgz#1bdbd72761439f9166f75dc4598f276265785c83"
@@ -2296,6 +2313,16 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
+  integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
+
+"@radix-ui/[email protected]":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz#997e97cb183bc90bd888b26b8e23a355ac9fe5f0"
@@ -2317,7 +2344,7 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.4"
 
-"@radix-ui/[email protected]", "@radix-ui/react-dialog@^1.0.5":
+"@radix-ui/[email protected]":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
   integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
@@ -2338,6 +2365,26 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-dialog@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
+  integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.6.0"
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
@@ -2381,6 +2428,17 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
+"@radix-ui/[email protected]":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396"
+  integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
 "@radix-ui/react-dropdown-menu@^2.0.6":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz#cdf13c956c5e263afe4e5f3587b3071a25755b63"
@@ -2409,6 +2467,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
@@ -2439,6 +2502,15 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
+  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
@@ -2455,6 +2527,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-label@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
@@ -2544,6 +2623,22 @@
     "@radix-ui/react-use-size" "1.0.1"
     "@radix-ui/rect" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.0.tgz#a3e500193d144fe2d8f5d5e60e393d64111f2a7a"
+  integrity sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-rect" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+    "@radix-ui/rect" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
@@ -2568,6 +2663,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/[email protected]":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.2.tgz#51eb46dae7505074b306ebcb985bf65cc547d74e"
+  integrity sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
@@ -2586,6 +2689,14 @@
     "@radix-ui/react-compose-refs" "1.0.1"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
+  integrity sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
@@ -2602,6 +2713,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/[email protected]":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-radio-group@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz#3197f5dcce143bcbf961471bf89320735c0212d3"
@@ -2691,7 +2809,7 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
-"@radix-ui/[email protected]", "@radix-ui/react-separator@^1.0.3":
+"@radix-ui/[email protected]":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
   integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==
@@ -2699,6 +2817,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-separator@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e"
+  integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-slider@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.2.tgz#330ff2a0e1f6c19aace76590004f229a7e8fbe6c"
@@ -2725,7 +2850,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
-"@radix-ui/[email protected]", "@radix-ui/react-slot@^1.0.2":
+"@radix-ui/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
   integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
@@ -2733,6 +2858,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/[email protected]", "@radix-ui/react-slot@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
@@ -2804,24 +2936,23 @@
     "@radix-ui/react-separator" "1.0.3"
     "@radix-ui/react-toggle-group" "1.0.4"
 
-"@radix-ui/react-tooltip@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
-  integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.5"
-    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-popper" "1.1.3"
-    "@radix-ui/react-portal" "1.0.4"
-    "@radix-ui/react-presence" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-slot" "1.0.2"
-    "@radix-ui/react-use-controllable-state" "1.0.1"
-    "@radix-ui/react-visually-hidden" "1.0.3"
+"@radix-ui/react-tooltip@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.4.tgz#152d8485859b80d395d6b3229f676fef3cec56b3"
+  integrity sha512-QpObUH/ZlpaO4YgHSaYzrLO2VuO+ZBFFgGzjMUPwtiYnAzzNNDPJeEGRrT7qNOrWm/Jr08M1vlp+vTHtnSQ0Uw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
 
 "@radix-ui/[email protected]":
   version "1.0.0"
@@ -2837,6 +2968,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
@@ -2853,6 +2989,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
@@ -2869,6 +3012,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
@@ -2883,6 +3033,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
@@ -2898,6 +3053,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/rect" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"
+  integrity sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==
+  dependencies:
+    "@radix-ui/rect" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
@@ -2906,6 +3068,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b"
+  integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
@@ -2914,6 +3083,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz#ad47a8572580f7034b3807c8e6740cd41038a5a2"
+  integrity sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@@ -2921,6 +3097,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
+  integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
+
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
@@ -4871,12 +5052,12 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
-class-variance-authority@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522"
-  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+class-variance-authority@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
+  integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
   dependencies:
-    clsx "2.0.0"
+    clsx "^2.1.1"
 
 clean-css@^5.2.2:
   version "5.3.2"
@@ -4939,11 +5120,16 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-[email protected], clsx@^2.0.0:
+clsx@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 cmdk@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.0.tgz#53c52d56d8776c8bb8ced1055b5054100c388f7c"
@@ -7104,10 +7290,10 @@ lru-cache@^6.0.0:
   dependencies:
     semver "^7.3.5"
 
-lucide-react@^0.292.0:
-  version "0.292.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.292.0.tgz#c8a06b2ccd8a348a88669def3c0291c035de2884"
-  integrity sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==
+lucide-react@^0.468.0:
+  version "0.468.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.468.0.tgz#830c1bfd905575ddd23b832baa420c87db166910"
+  integrity sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==
 
 lz-string@^1.5.0:
   version "1.5.0"
@@ -8194,6 +8380,14 @@ react-remove-scroll-bar@^2.3.4:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll-bar@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
+  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 [email protected]:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
@@ -8216,6 +8410,17 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
[email protected]:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
+  integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==
+  dependencies:
+    react-remove-scroll-bar "^2.3.6"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-remove-scroll@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"

scripts/src/logseq/tasks/lang.clj

@@ -122,6 +122,8 @@
   {"(t (shortcut-helper/decorate-namespace" [] ;; shortcuts related so can ignore
    "(t (keyword" [:color/yellow :color/red :color/pink :color/green :color/blue
                   :color/purple :color/gray]
+   "(tt (keyword" [:left-side-bar/assets :left-side-bar/tasks]
+
    ;; from 3 files
    "(t (if" [:asset/show-in-folder :asset/open-in-browser
              :search-item/whiteboard :search-item/page
@@ -164,7 +166,7 @@
                                  ;; This currently assumes all ui translations
                                  ;; use (t and src/main. This can easily be
                                  ;; tweaked as needed
-                                 "grep -E -oh '\\(t :[^ )]+' -r src/main")
+                                 "grep -E -oh '\\(tt? :[^ )]+' -r src/main")
                           :out
                           string/split-lines
                           (map #(keyword (subs % 4)))

src/main/frontend/components/cmdk/core.cljs

@@ -761,11 +761,15 @@
 
 (defn- input-placeholder
   [sidebar?]
-  (let [search-mode (:search/mode @state/state)]
+  (let [search-mode (:search/mode @state/state)
+        search-args (:search/args @state/state)]
     (cond
       (and (= search-mode :graph) (not sidebar?))
       "Add graph filter"
 
+      (= search-args :new-page)
+      "Type a page name to create"
+
       :else
       "What are you looking for?")))
 
@@ -949,6 +953,7 @@
                     ::input (atom (or (:initial-input opts) "")))))
    :will-unmount (fn [state]
                    (state/set-state! :search/mode nil)
+                   (state/set-state! :search/args nil)
                    state)}
   (mixins/event-mixin
    (fn [state]

src/main/frontend/components/container.css

@@ -58,32 +58,18 @@
   @apply py-4 sm:pl-8 sm:pr-4;
 }
 
-#main-content-container[data-is-margin-less-pages=true] {
-  padding: 0 !important;
-  position: relative;
-  overflow: auto;
-}
-
 .left-sidebar-inner {
-  position: relative;
-  height: 100%;
-  padding-top: 12px;
+  @apply relative h-full pt-3 overflow-y-auto overflow-x-hidden transition-transform;
+  @apply transform-gpu translate-x-[-100%] z-[3] antialiased;
+
   width: var(--ls-left-sidebar-sm-width);
-  overflow-y: auto;
-  overflow-x: hidden;
   background-color: var(--left-sidebar-bg-color);
-  border-right: 1px solid or(--ls-left-sidebar-border-color, --lx-gray-03, --ls-tertiary-background-color);
-  transition: transform .3s;
-  transform: translate3d(-100%, 0, 0);
-  z-index: 3;
-
-  -webkit-font-smoothing: antialiased;
+  border-right: 1px solid var(--lx-gray-03, var(--ls-tertiary-background-color));
 
   > .wrap {
+    @apply flex flex-col relative w-full mt-6;
+
     height: calc(100vh - var(--ls-headbar-inner-top-padding) - 50px);
-    margin-top: 30px;
-    width: 100%;
-    padding-top: var(--ls-win32-title-bar-height);
 
     > .fake-bar {
       @apply w-full px-5 pt-1 sm:hidden;
@@ -106,7 +92,7 @@
     }
   }
 
-  .nav-header {
+  .sidebar-navigations {
     @apply gap-0.5;
 
     a {
@@ -126,58 +112,47 @@
   }
 
   .page-icon {
-    @apply flex items-center text-center mr-1 align-baseline;
-
-    width: 20px;
-    flex-shrink: 0;
-    line-height: 1em;
+    @apply flex items-center mr-2 text-center align-baseline leading-none;
   }
 
   a.item {
-    @apply px-2 py-2 sm:py-1.5;
-
-    user-select: none;
-    transition: background-color .3s;
+    @apply flex items-center pl-1.5 pr-0.5 h-8 select-none;
 
     .ui__icon {
-      @apply flex justify-center;
-      width: 20px;
-      font-size: 16px;
-      margin-right: 8px;
-      opacity: .7;
-      position: relative;
-    }
-
-    .graph-icon .ui__icon {
-      padding: 0;
-      width: unset;
-      margin-right: 0px;
+      @apply relative flex justify-center w-[20px] text-base mr-2 opacity-80;
     }
 
     .graph-icon {
-      margin-left: 3px;
-      margin-right: 11px;
+      @apply ml-[3px] mr-[11px];
+
+      .ui__icon {
+        @apply p-0 w-auto mr-0;
+      }
     }
 
-    &:hover, &.active {
-      background-color: var(--lx-gray-04, var(--color-level-3, var(--rx-gray-04)));
-      color: var(--lx-gray-12, var(--rx-gray-12));
+    &:hover, &.active, > .thumb {
+      background-color: var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)));
 
       .ui__icon {
-        opacity: .9;
+        @apply opacity-100;
       }
     }
   }
 
-  .nav-contents-container {
-    @apply relative h-full flex-grow-0 overflow-x-hidden overflow-y-auto;
+  .sidebar-header-container {
+    @apply flex flex-col gap-1 px-3 mb-1;
+  }
+
+  .sidebar-contents-container {
+    @apply flex flex-col gap-1 pt-1;
+    @apply px-3 relative h-full flex-grow-0 overflow-x-hidden overflow-y-auto;
 
     &.is-scrolled {
       border-top: 1px solid var(--ls-tertiary-border-color);
     }
   }
 
-  .nav-content-item {
+  .sidebar-content-group {
     &:not(:hover) {
       ::-webkit-scrollbar-thumb,
       ::-webkit-scrollbar,
@@ -186,168 +161,116 @@
       }
     }
 
-    .nav-content-item-inner {
+    &-inner {
       @apply flex flex-col;
-    }
-
-    .header {
-      @apply pl-6 pr-4 py-1 flex justify-between items-center select-none sticky top-[-4px];
-      @apply cursor-pointer z-[2] active:opacity-80;
 
-      background-color: var(--left-sidebar-bg-color);
+      > .hd {
+        @apply pl-2 pr-1 h-[32px] flex justify-between items-center select-none sticky top-[-4px];
+        @apply cursor-pointer z-[2] active:opacity-80 rounded-md;
 
-      .ui__icon {
-        @apply flex justify-center;
-        width: 20px;
-      }
+        background-color: var(--left-sidebar-bg-color);
 
-      .more {
-        opacity: 0;
-        transition: .15s transform;
-      }
+        .ui__icon {
+          @apply flex justify-center w-[20px];
+        }
 
-      &:hover {
-        background-color: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04)));
+        &.non-collapsable {
+          @apply cursor-default active:opacity-100;
 
-        * {
-          opacity: 1 !important;
+          .wrap-th {
+            @apply cursor-default;
+          }
         }
 
-        .more {
-          opacity: .8 !important;
-        }
-      }
+        &:not(.non-collapsable) {
 
-      .wrap-th {
-        @apply opacity-50;
+          &:hover {
+            background-color: var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)));
 
-        > .ui__icon {
-          @apply relative top-[-1px];
-        }
+            * {
+              @apply !opacity-100;
+            }
 
-        > strong {
-          @apply text-[11px] font-semibold;
+            .more {
+              @apply opacity-80;
+            }
+          }
         }
-      }
-    }
-
-    .bd {
-      @apply py-1 overflow-y-auto;
 
-      display: none;
-      min-height: 40px;
+        .wrap-th {
+          @apply flex items-center text-sm font-medium opacity-50;
 
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-
-        li {
-          margin: 0;
-        }
+          > .ui__icon {
+            @apply relative top-[-1px];
+          }
 
-        a {
-          width: 100%;
-          padding: 4px 24px;
-          opacity: .8;
-          transition: background-color .3s, opacity .3s;
-
-          .page-title {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            flex-grow: 1;
+          > strong {
+            @apply text-xs font-medium;
           }
+        }
 
-          .page-icon {
-            display: flex;
-            align-items: center;
+        &.enter-show-more {
+          > .b {
+            @apply transition-opacity opacity-0 delay-300;
           }
 
-          &:hover {
-            background-color: var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)));
-            opacity: 1;
+          &:hover > .b {
+            @apply opacity-80;
           }
         }
       }
-    }
 
-    &.is-expand {
-      .header .more {
-        opacity: 0;
-        transform: rotate(-90deg);
-      }
+      > .bd {
+        @apply overflow-y-auto hidden;
 
-      .bd {
-        display: block;
-      }
-    }
+        ul {
+          @apply list-none p-0 m-0;
 
-    &.has-children:not(.is-expand) {
-      .header .more {
-        opacity: .4;
-      }
-    }
-  }
+          li {
+            @apply m-0;
+          }
 
-  .create {
-    width: 100%;
-    padding: 4px 14px 14px;
-    background-image: linear-gradient(transparent, var(--ls-primary-background-color));
-    user-select: none;
+          a {
+            @apply px-2 flex items-center justify-between relative h-[32px] w-full rounded-md;
 
-    @screen sm {
-      background-image: linear-gradient(transparent, or(--ls-left-sidebar-bottom-gradient, --lx-gray-02, --ls-secondary-background-color));
+            .page-title {
+              @apply whitespace-nowrap hidden text-ellipsis flex-grow overflow-hidden pr-2;
+            }
 
-      .dark & {
-        background-image: linear-gradient(transparent, or(--ls-left-sidebar-bottom-gradient, --lx-gray-01, --ls-secondary-background-color));
+            .page-icon {
+              @apply flex items-center;
+            }
+
+            &:hover {
+              background-color: var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)));
+              opacity: 1;
+            }
+          }
+        }
       }
     }
 
-    &-link {
-      background-color: var(--ls-primary-background-color);
-      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    .hd .more {
+      @apply transition-transform;
     }
 
-    .dropdown-wrapper {
-      top: initial;
-      right: initial;
-      bottom: calc(100% + 6px);
-      left: 0;
-      width: max-content;
-
-      @screen sm {
-        bottom: 0;
-        left: calc(100% + 6px);
+    &.is-expand {
+      .hd .more {
+        @apply opacity-40 rotate-90;
       }
-    }
 
-    #create-button {
-      @apply flex items-center justify-center p-2 text-sm font-medium rounded-md w-full border;
-      background-color: or(--ls-create-button-color, --lx-gray-03, --ls-secondary-background-color) !important;
-      border-color: transparent;
-
-      &:hover,
-      &:focus {
-        border-color: var(--ls-border-color);
-        background-color: or(--ls-create-button-color-focus, --lx-gray-03, --ls-primary-background-color) !important;
+      .bd {
+        @apply block;
       }
+    }
 
-      @screen sm {
-        background-color: or(--ls-create-button-color-sm, --lx-gray-03, --ls-primary-background-color) !important;
-
-        &:hover,
-        &:focus {
-          background-color: or(--ls-create-button-color-sm-focus, --lx-gray-04, --ls-secondary-background-color) !important;
-        }
+    &.has-children:not(.is-expand) {
+      .hd .more {
+        @apply opacity-50;
       }
     }
   }
 
-  .dark & {
-    --left-sidebar-bg-color: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--secondary, var(--rx-gray-03-hsl)))));
-  }
-
   @screen sm {
     padding-top: 0;
     width: var(--ls-left-sidebar-width);
@@ -355,25 +278,14 @@
     > .wrap {
       margin-top: 52px;
     }
-
-    .create {
-      &-link {
-        background-color: var(--ls-primary-background-color);
-      }
-    }
   }
 }
 
 .cp__sidebar-left-layout {
-  @apply fixed top-0 left-0 w-[10px];
-
-  z-index: var(--ls-z-index-level-5);
+  @apply fixed top-0 left-0 w-[10px] z-[var(--ls-z-index-level-5)];
 
   a {
-    @apply opacity-90 hover:opacity-100;
-    transition: all 120ms ease-out;
-
-    color: var(--ls-left-sidebar-text-color, var(--ls-header-button-background));
+    @apply opacity-80 hover:opacity-100 text-foreground;
   }
 
   > .left-sidebar-inner {
@@ -454,10 +366,7 @@
 
   .left-sidebar-resizer {
     @apply absolute w-[3px] top-0 right-[-2px] bottom-0 overflow-hidden cursor-col-resize;
-    @apply z-10;
-
-    transition: background-color 300ms;
-    transition-delay: 300ms;
+    @apply z-10 transition-[background-color] duration-200 delay-300;
 
     &.is-active, &:hover,
     &:focus, &:active {
@@ -466,26 +375,22 @@
   }
 
   @screen sm {
-    width: 0;
-    z-index: var(--ls-z-index-level-1);
-    transition: width .3s;
+    @apply w-0 z-[var(--ls-z-index-level-1)] transition-[width];
 
     &:before {
-      background-color: or(--ls-left-sidebar-container-sm, --lx-gray-02, --ls-secondary-background-color);
-      width: 0;
-      overflow: hidden;
+      @apply w-0 overflow-hidden;
     }
 
     &.is-open {
-      width: var(--ls-left-sidebar-width);
+      @apply w-[var(--ls-left-sidebar-width)];
 
       .left-sidebar-inner {
-        overflow: visible;
+        @apply overflow-visible;
       }
     }
 
     > .shade-mask {
-      display: none;
+      @apply hidden;
     }
   }
 }
@@ -601,7 +506,7 @@
   .resizer {
     @apply absolute top-0 bottom-0 touch-none left-[1px] w-[3px] select-none;
     @apply cursor-col-resize hover:bg-primary/90 focus:bg-primary/90 active:bg-primary/90;
-    @apply z-[1000] delay-300 transition-[background-color] duration-300;
+    @apply z-[1000] delay-300 transition-[background-color] duration-200;
   }
 
   &.closed {
@@ -748,20 +653,6 @@
   padding: 0;
 }
 
-.cp__menubar-repos {
-  .title-wrap {
-    line-height: 1.2em;
-    padding: 1px 0;
-  }
-}
-
-/* Workaround for Linux Intel GPU text rendering issue GH#7233 */
-.is-electron.is-linux .cp__menubar-repos {
-  .repo-switch, .nav-header .flex-1 {
-    position: relative;
-  }
-}
-
 @supports not (overflow-y: overlay) {
   .scrollbar-spacing {
     overflow-y: auto;
@@ -833,11 +724,9 @@ html[data-theme='dark'] {
   }
 }
 
-.blocks-selection-mode .page-title, .blocks-selection-mode .block-content-inner, .blocks-selection-mode .block-body, .blocks-selection-mode .ls-properties-area {
-    user-select: none;
-}
-
-.favorite-item {
-    @apply overflow-hidden;
-    max-height: 24px;
+.blocks-selection-mode .page-title,
+.blocks-selection-mode .block-content-inner,
+.blocks-selection-mode .block-body,
+.blocks-selection-mode .ls-properties-area {
+  @apply select-none;
 }

src/main/frontend/components/header.css

@@ -265,12 +265,6 @@ html.is-native-ipad {
     }
   }
 
-  .left-sidebar-inner  {
-    > .wrap {
-      padding-top: 20px;
-    }
-  }
-
   .cp__right-sidebar {
     &-settings {
       margin-top: -4px;

src/main/frontend/components/repo.cljs

@@ -21,6 +21,7 @@
             [frontend.util.text :as text-util]
             [goog.object :as gobj]
             [logseq.shui.ui :as shui]
+            [medley.core :as medley]
             [promesa.core :as p]
             [rum.core :as rum]))
 
@@ -293,92 +294,132 @@
                    :on-click #(route-handler/redirect-to-all-graphs)}
                   (shui/tabler-icon "layout-2") [:span (t :all-graphs)]))])
 
-(rum/defcs repos-dropdown < rum/reactive
-  (rum/local false ::electron-multiple-windows?)
-  [state & {:as opts}]
-  (let [multiple-windows? (::electron-multiple-windows? state)
+(rum/defcs repos-dropdown-content < rum/reactive
+  [_state & {:keys [contentid] :as opts}]
+  (let [multiple-windows? false
         current-repo (state/sub :git/current-repo)
         login? (boolean (state/sub :auth/id-token))
-        remotes-loading? (state/sub [:file-sync/remote-graphs :loading])]
+        repos (state/sub [:me :repos])
+        remotes (state/sub [:file-sync/remote-graphs :graphs])
+        rtc-graphs (state/sub :rtc/graphs)
+        downloading-graph-id (state/sub :rtc/downloading-graph-uuid)
+        remotes-loading? (state/sub [:file-sync/remote-graphs :loading])
+        db-based? (config/db-based-graph? current-repo)
+        repos (sort-repos-with-metadata-local repos)
+        repos (distinct
+                (if (and (or (seq remotes) (seq rtc-graphs)) login?)
+                  (repo-handler/combine-local-&-remote-graphs repos (concat remotes rtc-graphs)) repos))
+        items-fn #(repos-dropdown-links repos current-repo downloading-graph-id opts)
+        header-fn #(when (> (count repos) 1)                ; show switch to if there are multiple repos
+                     [:div.font-medium.text-sm.opacity-50.px-1.py-1.flex.flex-row.justify-between.items-center
+                      [:h4.pb-1 (t :left-side-bar/switch)]
+
+                      (when (and (file-sync/enable-sync?) login?)
+                        (if remotes-loading?
+                          (ui/loading "")
+                          (shui/button
+                            {:variant :ghost
+                             :size :sm
+                             :title "Refresh remote graphs"
+                             :class "!h-6 !px-1 relative right-[-4px]"
+                             :on-click (fn []
+                                         (file-sync/load-session-graphs)
+                                         (rtc-handler/<get-remote-graphs))}
+                            (ui/icon "refresh" {:size 15}))))])
+        _remote? (and current-repo (:remote? (first (filter #(= current-repo (:url %)) repos))))
+        _repo-name (when current-repo (db/get-repo-name current-repo))]
+
+    [:div
+     {:class (when (<= (count repos) 1) "no-repos")}
+     (header-fn)
+     [:div.cp__repos-list-wrap
+      (for [{:keys [hr item hover-detail title options icon]} (items-fn)]
+        (let [on-click' (:on-click options)
+              href' (:href options)]
+          (if hr
+            (shui/dropdown-menu-separator)
+            (shui/dropdown-menu-item
+              (assoc options
+                :title hover-detail
+                :on-click (fn [^js e]
+                            (when on-click'
+                              (when-not (false? (on-click' e))
+                                (shui/popup-hide! contentid)))))
+              (or item
+                (if href'
+                  [:a.flex.items-center.w-full
+                   {:href href' :on-click #(shui/popup-hide! contentid)
+                    :style {:color "inherit"}} title]
+                  [:span.flex.items-center.gap-1.w-full
+                   icon [:div title]]))))))]
+     (repos-footer multiple-windows? db-based?)]))
+
+(rum/defcs repos-dropdown < rum/reactive
+                            (rum/local false ::electron-multiple-windows?)
+  [state & {:as opts}]
+  (let [current-repo (state/sub :git/current-repo)
+        login? (boolean (state/sub :auth/id-token))]
     (let [repos (state/sub [:me :repos])
           remotes (state/sub [:file-sync/remote-graphs :graphs])
           rtc-graphs (state/sub :rtc/graphs)
-          downloading-graph-id (state/sub :rtc/downloading-graph-uuid)
           db-based? (config/db-based-graph? current-repo)
           repos (sort-repos-with-metadata-local repos)
           repos (distinct
-                 (if (and (or (seq remotes) (seq rtc-graphs)) login?)
-                   (repo-handler/combine-local-&-remote-graphs repos (concat remotes rtc-graphs)) repos))
-          items-fn #(repos-dropdown-links repos current-repo downloading-graph-id opts)
-          header-fn #(when (> (count repos) 1)              ; show switch to if there are multiple repos
-                       [:div.font-medium.text-sm.opacity-50.px-1.py-1.flex.flex-row.justify-between.items-center
-                        [:h4.pb-1 (t :left-side-bar/switch)]
-
-                        (when (and (file-sync/enable-sync?) login?)
-                          (if remotes-loading?
-                            (ui/loading "")
-                            (shui/button
-                             {:variant :ghost
-                              :size :sm
-                              :title "Refresh remote graphs"
-                              :class "!h-6 !px-1 relative right-[-4px]"
-                              :on-click (fn []
-                                          (file-sync/load-session-graphs)
-                                          (rtc-handler/<get-remote-graphs))}
-                             (ui/icon "refresh" {:size 15}))))])]
+                  (if (and (or (seq remotes) (seq rtc-graphs)) login?)
+                    (repo-handler/combine-local-&-remote-graphs repos (concat remotes rtc-graphs)) repos))]
       (let [remote? (and current-repo (:remote? (first (filter #(= current-repo (:url %)) repos))))
             repo-name (when current-repo (db/get-repo-name current-repo))
             short-repo-name (if current-repo
                               (db/get-short-repo-name repo-name)
                               "Select a Graph")]
         (shui/trigger-as :a
-                         {:tab-index 0
-                          :class "item cp__repos-select-trigger"
-                          :on-pointer-down
-                          (fn [^js e]
-                            (check-multiple-windows? state)
-                            (some-> (.-target e)
-                                    (.closest "a.item")
-                                    (shui/popup-show!
-                                     (fn [{:keys [id]}]
-                                       [:<>
-                                        (header-fn)
-                                        [:div.cp__repos-list-wrap
-                                         (for [{:keys [hr item hover-detail title options icon]} (items-fn)]
-                                           (let [on-click' (:on-click options)
-                                                 href' (:href options)]
-                                             (if hr
-                                               (shui/dropdown-menu-separator)
-                                               (shui/dropdown-menu-item
-                                                (assoc options
-                                                       :title hover-detail
-                                                       :on-click (fn [^js e]
-                                                                   (when on-click'
-                                                                     (when-not (false? (on-click' e))
-                                                                       (shui/popup-hide! id)))))
-                                                (or item
-                                                    (if href'
-                                                      [:a.flex.items-center.w-full
-                                                       {:href href' :on-click #(shui/popup-hide! id)
-                                                        :style {:color "inherit"}} title]
-                                                      [:span.flex.items-center.gap-1.w-full
-                                                       icon [:div title]]))))))]
-                                        (repos-footer multiple-windows? db-based?)])
-                                     {:as-dropdown? true
-                                      :auto-focus? false
-                                      :align "start"
-                                      :content-props {:class (str "repos-list " (when (<= (count repos) 1) " no-repos"))
-                                                      :data-mode (when db-based? "db")}})))
-                          :title repo-name}                              ;; show full path on hover
-                         [:div.flex.relative.graph-icon.rounded
-                          (shui/tabler-icon "database" {:size 15})]
-
-                         [:div.repo-switch.pr-2.whitespace-nowrap
-                          [:span.repo-name.font-medium
-                           [:span.repo-text.overflow-hidden.text-ellipsis
-                            (if (config/demo-graph? short-repo-name) "Demo" short-repo-name)]
-                           (when remote? [:span.pl-1 (ui/icon "cloud")])]
-                          [:span.dropdown-caret]])))))
+          {:tab-index 0
+           :class "item cp__repos-select-trigger"
+           :on-pointer-down
+           (fn [^js e]
+             (check-multiple-windows? state)
+             (some-> (.-target e)
+               (.closest "a.item")
+               (shui/popup-show!
+                 (fn [{:keys [id]}] (repos-dropdown-content (assoc opts :contentid id)))
+                 {:as-dropdown? true
+                  :auto-focus? false
+                  :align "start"
+                  :content-props {:class "repos-list"
+                                  :data-mode (when db-based? "db")}})))
+           :title repo-name}      ;; show full path on hover
+          [:div.flex.relative.graph-icon.rounded
+           (shui/tabler-icon "database" {:size 15})]
+
+          [:div.repo-switch.pr-2.whitespace-nowrap
+           [:span.repo-name.font-medium
+            [:span.repo-text.overflow-hidden.text-ellipsis
+             (if (config/demo-graph? short-repo-name) "Demo" short-repo-name)]
+            (when remote? [:span.pl-1 (ui/icon "cloud")])]
+           [:span.dropdown-caret]])))))
+
+(rum/defcs graphs-selector < rum/reactive
+  [_state]
+  (let [current-repo (state/get-current-repo)
+        user-repos (state/get-repos)
+        current-repo' (some->> user-repos (medley/find-first #(= current-repo (:url %))))
+        repo-name (when current-repo (db/get-repo-name current-repo))
+        db-based? (config/db-based-graph? current-repo)
+        remote? (:remote? current-repo')
+        short-repo-name (if current-repo
+                          (db/get-short-repo-name repo-name)
+                          "Select a Graph")]
+    [:div.cp__graphs-selector.flex.items-center.justify-between
+     [:a.item.flex.items-center.gap-1.select-none
+      {:on-click (fn [^js e]
+                   (shui/popup-show! (.closest (.-target e) "a")
+                     (fn [{:keys [id]}] (repos-dropdown-content {:contentid id}))
+                     {:as-dropdown? true
+                      :content-props {:class "repos-list"}
+                      :align :start}))}
+      [:span.thumb (shui/tabler-icon (if remote? "cloud" (if db-based? "database" "folder")) {:size 16})]
+      [:strong short-repo-name]
+      (shui/tabler-icon "selector" {:size 18})]]))
 
 (defn invalid-graph-name-warning
   []

src/main/frontend/components/repo.css

@@ -16,7 +16,7 @@
 
 .ui__dropdown-menu-content {
   &.repos-list {
-    @apply flex flex-col px-2 relative overflow-hidden min-w-[280px] sm:max-w-[320px];
+    @apply flex flex-col px-2 relative overflow-hidden min-w-[300px] sm:max-w-[400px];
 
     .ui__dropdown-menu-item {
       @apply overflow-hidden overflow-ellipsis;
@@ -26,7 +26,7 @@
       @apply max-h-80 overflow-scroll mx-[-8px] px-2 pb-2;
     }
 
-    &.no-repos {
+    .no-repos {
       .cp__repos-list-wrap {
         @apply hidden;
       }
@@ -67,4 +67,37 @@
     @apply w-full !py-4 !justify-start opacity-70 font-medium hover:opacity-90
     items-center gap-1.5 hover:bg-gray-03;
   }
-}
+}
+
+.cp__graphs-selector {
+  > a.item {
+    @apply flex items-center relative flex-1 overflow-hidden
+    pl-1 py-1 pr-4 opacity-90 active:opacity-70 rounded-md;
+
+    > .thumb {
+      @apply w-6 h-6 overflow-hidden flex flex-shrink-0 items-center
+      justify-center rounded opacity-80 dark:opacity-50;
+
+      > .ui__icon {
+        @apply mr-0;
+      }
+    }
+
+    > strong {
+      @apply whitespace-nowrap overflow-hidden text-ellipsis pl-1
+      font-medium relative pr-4 text-sm;
+    }
+
+    > .ui__icon {
+      @apply absolute -right-1 top-2 opacity-60;
+    }
+  }
+
+  > span {
+    @apply relative flex items-center -mr-1;
+
+    > .ui__button {
+      @apply p-1 opacity-40 hover:opacity-70 active:opacity-100;
+    }
+  }
+}

src/main/frontend/components/right_sidebar.css

@@ -21,10 +21,6 @@ html[data-theme=light] {
   height: calc(100vh - 48px);
 }
 
-html[data-theme=light] a.toggle:hover {
-  color: var(--ls-primary-text-color);
-}
-
 .cp__header {
   > .r > div:not(.ui__dropdown-trigger) a, button {
     color: var(--lx-gray-11, var(--ls-header-button-background, var(--rx-gray-11)));

src/main/frontend/components/theme.css

@@ -156,7 +156,7 @@ main.ls-fold-button-on-right {
 }
 
 main.theme-container-inner {
-  --left-sidebar-bg-color: var(--lx-gray-02, hsl(var(--secondary, var(--rx-gray-03-hsl))));
+  --left-sidebar-bg-color: var(--lx-gray-02, var(--ls-secondary-background-color, hsl(var(--secondary, var(--rx-gray-03-hsl)))));
 }
 
 html[data-font='serif'] .ls-block, .ls-font-serif {

src/main/frontend/context/i18n.cljs

@@ -2,7 +2,9 @@
   "This ns is a system component that handles translation for the entire
   application. The ns dependencies for this ns must be small since it is used
   throughout the application."
-  (:require [frontend.dicts :as dicts]
+  (:require [clojure.string :as string]
+            [frontend.dicts :as dicts]
+            [medley.core :as medley]
             [tongue.core :as tongue]
             [frontend.state :as state]
             [lambdaisland.glogi :as log]))
@@ -26,6 +28,14 @@
                                                      :lang preferred-language}}])
         (apply translate :en args)))))
 
+(defn tt
+  [& keys]
+  (some->
+    (medley/find-first
+      #(not (string/starts-with? (t %) "{Missing key"))
+      keys)
+    t))
+
 (defn- fetch-local-language []
   (.. js/window -navigator -language))
 

src/main/frontend/handler/route.cljs

@@ -201,11 +201,12 @@
                    100)))
 
 (defn go-to-search!
-  [search-mode]
-  (search-handler/clear-search! false)
-  (when search-mode
-    (state/set-search-mode! search-mode))
-  (state/pub-event! [:go/search]))
+  ([search-mode] (go-to-search! search-mode nil))
+  ([search-mode args]
+   (search-handler/clear-search! false)
+   (when search-mode
+     (state/set-search-mode! search-mode args))
+   (state/pub-event! [:go/search])))
 
 (defn sidebar-journals!
   []

src/main/frontend/state.cljs

@@ -62,6 +62,7 @@
 
       :search/q                              ""
       :search/mode                           nil ; nil -> global mode, :graph -> add graph filter, etc.
+      :search/args                           nil
       :search/result                         nil
       :search/graph-filters                  []
       :search/engines                        {}
@@ -1084,8 +1085,10 @@ Similar to re-frame subscriptions"
   (set-state! :editor/cursor-range range))
 
 (defn set-search-mode!
-  [value]
-  (set-state! :search/mode value))
+  ([value] (set-search-mode! value nil))
+  ([value args]
+   (set-state! :search/mode value)
+   (set-state! :search/args args)))
 
 (defn set-editor-action!
   [value]