refactor: toggle circle button

src/main/frontend/components/whiteboard.css

@@ -94,6 +94,10 @@ h1.title.whiteboard-dashboard-title {
   padding: 12px;
 }
 
+.tl-logseq-cp-container > .ls-block {
+  padding: 0;
+}
+
 /**
  * ???
  */

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

@@ -131,6 +131,29 @@ const useSearch = (q: string, searchFilter: 'B' | 'P' | null) => {
   return results
 }
 
+const CircleButton = ({
+  active,
+  style,
+  icon,
+  otherIcon,
+  onClick,
+}: {
+  active?: boolean
+  style?: React.CSSProperties
+  icon: string
+  otherIcon?: string
+  onClick: () => void
+}) => {
+  return (
+    <div data-active={active} style={style} className="tl-circle-button" onMouseDown={onClick}>
+      <div className="tl-circle-button-icons-wrapper" data-icons-count={otherIcon ? 2 : 1}>
+        <TablerIcon name={icon} />
+        {otherIcon && <TablerIcon name={otherIcon} />}
+      </div>
+    </div>
+  )
+}
+
 export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
   static id = 'logseq-portal'
   static defaultSearchQuery = ''
@@ -547,9 +570,12 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
 
     return (
       <div className="tl-quick-search">
-        <div className="tl-quick-search-indicator">
-          <TablerIcon name={prefixIcon} className="tl-quick-search-icon" />
-        </div>
+        <CircleButton
+          icon={prefixIcon}
+          onClick={() => {
+            options[focusedOptionIdx]?.onChosen()
+          }}
+        />
         <div className="tl-quick-search-input-container">
           {searchFilter && (
             <div className="tl-quick-search-input-filter">
@@ -804,6 +830,13 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                   )}
                 </LogseqPortalShapeHeader>
               )}
+              <CircleButton
+                active={!!this.collapsed}
+                style={{ opacity: isSelected ? 1 : 0 }}
+                icon={this.props.blockType === 'B' ? 'block' : 'page'}
+                onClick={() => this.setCollapsed(!this.collapsed)}
+                otherIcon={'whiteboard-element'}
+              />
               {targetNotFound && <div className="tl-target-not-found">Target not found</div>}
               {showingPortal && <PortalComponent {...componentProps} />}
             </div>

tldraw/apps/tldraw-logseq/src/styles.css

@@ -497,20 +497,67 @@ button.tl-select-input-trigger {
   position: relative;
 }
 
-.tl-quick-search-icon {
-  flex-shrink: 0;
-}
-
-.tl-quick-search-indicator {
-  @apply absolute flex items-center	justify-center;
+.tl-circle-button {
+  @apply absolute flex items-center	justify-center transition-all;
 
+  color: var(--ls-primary-text-color);
   background-color: var(--ls-secondary-background-color);
   font-size: 22px;
   right: calc(100% + 12px);
   height: 34px;
   width: 34px;
   border-radius: 50%;
-  top: calc(50% - 17px);
+  border: 2px solid var(--ls-secondary-background-color);
+  top: 2px;
+
+  /* &:is(:hover, [data-active='true']) {
+    background-color: var(--ls-active-primary-color);
+    color: var(--ls-block-highlight-color);
+  }
+   */
+  &[data-active='false']:hover {
+    background-color: var(--ls-active-primary-color);
+    color: var(--ls-block-highlight-color);
+    border: 2px solid var(--ls-active-primary-color);
+    
+    .tie {
+      transform: translateY(-100%);
+    }
+  }
+
+  &[data-active='true'] {
+    background-color: var(--ls-active-primary-color);
+    color: var(--ls-block-highlight-color);
+    border: 2px solid var(--ls-active-primary-color);
+
+    .tie {
+      transform: translateY(-100%);
+    }
+
+    &:hover {
+      color: var(--ls-primary-text-color);
+      background-color: var(--ls-secondary-background-color);
+      
+      .tie {
+        transform: translateY(0);
+      }
+    }
+  }
+
+  .tl-circle-button-icons-wrapper {
+    @apply flex flex-col;
+
+    > i.tie {
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+
+  .tl-circle-button-icons-wrapper[data-icons-count='2'] {
+    position: relative;
+    width: 22px;
+    height: 22px;
+    overflow: hidden;
+  }
 }
 
 .tl-quick-search-input-container {

tldraw/packages/react/src/components/ui/SelectionBackground/SelectionBackground.tsx

@@ -16,6 +16,8 @@ export const SelectionBackground = observer(function SelectionBackground<S exten
         width={Math.max(1, bounds.width)}
         height={Math.max(1, bounds.height)}
         pointerEvents="all"
+        rx={8}
+        ry={8}
       />
     </SVGContainer>
   )

tldraw/packages/react/src/components/ui/SelectionForeground/SelectionForeground.tsx

@@ -24,12 +24,8 @@ export const SelectionForeground = observer(function SelectionForeground<S exten
 
   const editing = !!app.editingShape
 
-  // when editing, make the selection a bit larger
-  width = editing ? width + 2 : width
-  height = editing ? height + 2 : height
-
   return (
-    <SVGContainer style={{ transform: editing ? 'translate(-1px, -1px)' : 'none' }}>
+    <SVGContainer>
       <rect
         className="tl-bounds-fg"
         width={Math.max(width, 1)}