fix: some style changes

tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx

@@ -3,14 +3,14 @@ import React from 'react'
 import { LogseqContext } from '../../lib/logseq-context'
 import { TablerIcon } from '../icons'
 
-export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
+export const BlockLink = ({ id }: { id: string }) => {
   const {
     handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock, queryBlockByUUID },
     renderers: { Breadcrumb, PageNameLink },
   } = React.useContext(LogseqContext)
 
   let iconName = ''
-  type = type ?? (validUUID(id) ? 'B' : 'P')
+  let linkType = validUUID(id) ? 'B' : 'P'
 
   if (validUUID(id)) {
     if (queryBlockByUUID(id)?.properties?.['ls-type'] === 'whiteboard-shape') {
@@ -32,7 +32,7 @@ export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
       onPointerDown={e => {
         e.stopPropagation()
         if (e.shiftKey) {
-          sidebarAddBlock(id, type === 'B' ? 'block' : 'page')
+          sidebarAddBlock(id, linkType === 'B' ? 'block' : 'page')
         } else {
           redirectToPage(id)
         }
@@ -40,7 +40,11 @@ export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => {
     >
       <TablerIcon name={iconName} />
       <span className="pointer-events-none">
-        {type === 'P' ? <PageNameLink pageName={id} /> : <Breadcrumb levelLimit={1} blockId={id} />}
+        {linkType === 'P' ? (
+          <PageNameLink pageName={id} />
+        ) : (
+          <Breadcrumb levelLimit={1} blockId={id} />
+        )}
       </span>
     </button>
   )

tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx

@@ -1,26 +1,27 @@
 import type { TLQuickLinksComponent } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
+import React from 'react'
 import type { Shape } from '../../lib'
 import { BlockLink } from '../BlockLink'
 
 export const QuickLinks: TLQuickLinksComponent<Shape> = observer(({ id, shape }) => {
-  const refs = shape.props.refs ?? []
-  const portalType = shape.props.type === 'logseq-portal' && shape.props.blockType
+  const links = React.useMemo(() => {
+    const links = [...(shape.props.refs ?? [])]
 
-  if (refs.length === 0 && !portalType) return null
+    if (shape.props.type === 'logseq-portal' && shape.props.pageId) {
+      links.unshift(shape.props.pageId)
+    }
+
+    return links
+  }, [shape.props.type, shape.props.parentId, shape.props.refs])
+
+  if (links.length === 0) return null
 
   return (
     <div className="tl-quick-links">
-      {portalType && shape.props.type === 'logseq-portal' && (
-        <>
-          <div className="tl-quick-links-row tl-quick-links-row-primary">
-            <BlockLink id={shape.props.pageId} type={portalType} />
-          </div>
-        </>
-      )}
-      {refs.map(ref => {
+      {links.map(ref => {
         return (
-          <div key={ref} className="tl-quick-links-row tl-quick-links-row-secondary">
+          <div key={ref} className="tl-quick-links-row">
             <BlockLink id={ref} />
           </div>
         )

tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx

@@ -131,6 +131,8 @@ export const LogseqQuickSearch = observer(
 
     const [prefixIcon, setPrefixIcon] = React.useState<string>('circle-plus')
 
+    const [showPanel, setShowPanel] = React.useState<boolean>(false)
+
     React.useEffect(() => {
       // autofocus attr seems not to be working
       setTimeout(() => {
@@ -384,7 +386,13 @@ export const LogseqQuickSearch = observer(
               }
               e.stopPropagation()
             }}
-            onBlur={onBlur}
+            onFocus={() => {
+              setShowPanel(true)
+            }}
+            onBlur={() => {
+              setShowPanel(false)
+              onBlur?.()
+            }}
           />
         </div>
         {/* TODO: refactor to radix-ui popover */}
@@ -393,6 +401,11 @@ export const LogseqQuickSearch = observer(
             onWheelCapture={e => e.stopPropagation()}
             className="tl-quick-search-options"
             ref={optionsWrapperRef}
+            style={{
+              // not using display: none so we can persist the scroll position
+              visibility: showPanel ? 'visible' : 'hidden',
+              pointerEvents: showPanel ? 'all' : 'none',
+            }}
           >
             <Virtuoso
               style={{ height: Math.min(Math.max(1, options.length), 12) * 40 }}

tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx

@@ -33,9 +33,9 @@ function ShapeLinkItem({
   const { handlers } = React.useContext(LogseqContext)
 
   return (
-    <div className="tl-shape-links-panel-item color-level">
+    <div className="tl-shape-links-panel-item color-level relative">
       <div className="whitespace-pre break-all overflow-hidden text-ellipsis">
-        <BlockLink id={id} type={type} />
+        <BlockLink id={id} />
       </div>
       <div className="flex-1" />
       <Button title="Open Page" type="button" onClick={() => handlers?.redirectToPage(id)}>
@@ -49,8 +49,13 @@ function ShapeLinkItem({
         <TablerIcon name="move-to-sidebar-right" />
       </Button>
       {onRemove && (
-        <Button title="Remove link" type="button" onClick={onRemove}>
-          <TablerIcon name="x" />
+        <Button
+          className="tl-shape-links-panel-item-remove-button"
+          title="Remove link"
+          type="button"
+          onClick={onRemove}
+        >
+          <TablerIcon name="x" className='!translate-y-0' />
         </Button>
       )}
     </div>
@@ -132,7 +137,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
               <TablerIcon className="opacity-50" name="internal-link" />
               References
             </div>
-            <div className="h-2" />
             <ShapeLinkItem type={portalType} id={pageId} />
           </div>
         )}
@@ -141,7 +145,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
             <TablerIcon className="opacity-50" name="add-link" />
             Link to any page or block
           </div>
-          <div className="h-2" />
 
           {canAddLink && (
             <LogseqQuickSearch
@@ -155,23 +158,20 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({
           )}
 
           {refs.length > 0 && (
-            <>
-              <div className="h-2" />
-              <div className="flex flex-col items-stretch gap-2">
-                {refs.map((ref, i) => {
-                  return (
-                    <ShapeLinkItem
-                      key={ref}
-                      id={ref}
-                      type={validUUID(ref) ? 'B' : 'P'}
-                      onRemove={() => {
-                        onRefsChange(refs.filter((_, j) => i !== j))
-                      }}
-                    />
-                  )
-                })}
-              </div>
-            </>
+            <div className="flex flex-col items-stretch gap-2">
+              {refs.map((ref, i) => {
+                return (
+                  <ShapeLinkItem
+                    key={ref}
+                    id={ref}
+                    type={validUUID(ref) ? 'B' : 'P'}
+                    onRemove={() => {
+                      onRefsChange(refs.filter((_, j) => i !== j))
+                    }}
+                  />
+                )
+              })}
+            </div>
           )}
         </div>
       </div>

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

@@ -1029,7 +1029,7 @@ html[data-theme='dark'] {
 
 .tl-shape-links-panel,
 .tl-shape-links-reference-panel {
-  @apply p-3;
+  @apply p-3 flex flex-col gap-2;
   min-width: 340px;
   max-width: 516px;
   color: var(--ls-primary-text-color);
@@ -1056,6 +1056,18 @@ html[data-theme='dark'] {
   }
 }
 
+button.tl-shape-links-panel-item-remove-button {
+  @apply rounded-full w-6 h-6 min-w-0 -ml-4;
+
+  transform: translate(16px, -16px);
+
+  background-color: var(--ls-primary-background-color);
+
+  &:hover {
+    background-color: var(--ls-tertiary-background-color);
+  }
+}
+
 .tl-shape-links-panel-add-button {
   @apply w-full font-medium text-base h-[40px];
   background-color: var(--ls-secondary-background-color);
@@ -1110,12 +1122,12 @@ html[data-theme='dark'] {
   }
 }
 
-.tl-quick-links-row-primary {
+.tl-quick-links-row:nth-child(1) {
   @apply rounded bg-indigo-600;
   color: #fff;
 }
 
-.tl-quick-links-row-secondary {
+.tl-quick-links-row:nth-child(2) {
   @apply opacity-50;
   color: var(--ls-secondary-text-color);
 
@@ -1125,10 +1137,10 @@ html[data-theme='dark'] {
 }
 
 .tl-quick-links:hover {
-  .tl-quick-links-row-primary:not(:hover) {
+  .tl-quick-links-row:nth-child(1):not(:hover) {
     @apply opacity-50;
   }
-  .tl-quick-links-row-primary:hover {
+  .tl-quick-links-row:nth-child(1):hover {
     @apply bg-indigo-500;
   }
 }