From 70747aaeda60bd5ce934f1d8d8c2c4163f967d35 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Wed, 26 Apr 2023 12:42:01 +0300
Subject: [PATCH] chore: add shortcut to collapse toggle tooltip

---
 .../ContextBar/contextBarActionFactory.tsx    | 31 ++++++++++---------
 .../src/components/inputs/ToggleInput.tsx     |  2 +-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index 42eb0f8fe4..5136393259 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -30,6 +30,7 @@ import {
 import { ToggleInput } from '../inputs/ToggleInput'
 import { GeometryTools } from '../GeometryTools'
 import { LogseqContext } from '../../lib/logseq-context'
+import { KeyboardShortcut } from '../KeyboardShortcut'
 
 export const contextBarActionTypes = [
   // Order matters
@@ -61,13 +62,7 @@ const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 type ShapeType = Shape['props']['type']
 
 export const shapeMapping: Record<ShapeType, ContextBarActionType[]> = {
-  'logseq-portal': [
-    'Swatch',
-    'LogseqPortalViewMode',
-    'ScaleLevel',
-    'AutoResizing',
-    'Links',
-  ],
+  'logseq-portal': ['Swatch', 'LogseqPortalViewMode', 'ScaleLevel', 'AutoResizing', 'Links'],
   youtube: ['YoutubeLink', 'Links'],
   tweet: ['TwitterLink', 'Links'],
   iframe: ['IFrameSource', 'Links'],
@@ -134,13 +129,24 @@ const LogseqPortalViewModeAction = observer(() => {
     return null
   }
 
+  const tooltip = (
+    <div className="flex">
+      {collapsed ? 'Expand' : 'Collapse'}
+      <KeyboardShortcut
+        action={
+          collapsed ? 'editor/expand-block-children' : 'editor/collapse-block-children'
+        }
+      />
+    </div>
+  )
+
   return (
     <ToggleInput
-      tooltip={collapsed ? 'Expand' : 'Collapse'}
+      tooltip={tooltip}
       toggle={shapes.every(s => s.props.type === 'logseq-portal')}
       className="tl-button"
       pressed={collapsed}
-      onPressedChange={() => app.api.setCollapsed(!collapsed) }
+      onPressedChange={() => app.api.setCollapsed(!collapsed)}
     >
       <TablerIcon name={collapsed ? 'object-expanded' : 'object-compact'} />
     </ToggleInput>
@@ -306,12 +312,7 @@ const GeometryAction = observer(() => {
     app.api.convertShapes(type)
   }, [])
 
-  return (
-    <GeometryTools
-      popoverSide="top"
-      chevron={false}
-      setGeometry={handleSetGeometry}/>
-  )
+  return <GeometryTools popoverSide="top" chevron={false} setGeometry={handleSetGeometry} />
 })
 
 const StrokeTypeAction = observer(() => {
diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx
index 234a7cfa1a..4078c3642a 100644
--- a/tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx
@@ -4,7 +4,7 @@ import * as Toggle from '@radix-ui/react-toggle'
 interface ToggleInputProps extends React.HTMLAttributes<HTMLElement> {
   toggle?: boolean
   pressed: boolean
-  tooltip?: string
+  tooltip?: React.ReactNode
   onPressedChange: (value: boolean) => void
 }