feat: tag icon in list

resources/css/tabler-extension.css

@@ -13,7 +13,6 @@
   font-variant: normal !important;
   text-transform: none !important;
   speak: none;
-  line-height: 1;
   vertical-align: -0.125em;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;

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

@@ -27,13 +27,19 @@ interface LogseqQuickSearchProps {
   onChange: (id: string) => void
 }
 
+const LogseqTypeTag = ({ type }: { type: 'B' | 'P' }) => {
+  return (
+    <span className="tl-type-tag">
+      <i className={`tie tie-${type === 'B' ? 'block' : 'page'}`} />
+    </span>
+  )
+}
+
 const LogseqPortalShapeHeader = observer(
   ({ type, children }: { type: 'P' | 'B'; children: React.ReactNode }) => {
     return (
       <div className="tl-logseq-portal-header">
-        <span className="type-tag">
-          <i className={`tie tie-${type === 'B' ? 'block' : 'page'}`} />
-        </span>
+        <LogseqTypeTag type={type} />
         {children}
       </div>
     )
@@ -278,8 +284,15 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
         </div>
         <div className="tl-quick-search-options">
           <div className="tl-quick-search-option" onClick={() => onAddBlock(q)}>
+            <LogseqTypeTag type="B" />
             New block{q.length > 0 ? `: ${q}` : ''}
           </div>
+          {options?.length === 0 && q && (
+            <div className="tl-quick-search-option" onClick={() => finishCreating(q)}>
+              <LogseqTypeTag type="P" />
+              New page: {q}
+            </div>
+          )}
           {options?.map(name => (
             <div key={name} className="tl-quick-search-option" onClick={() => finishCreating(name)}>
               {name}

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

@@ -511,6 +511,7 @@
   display: flex;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  gap: 0.5em;
 }
 
 .tl-quick-search-option:hover {
@@ -545,7 +546,7 @@
   overflow: hidden;
 }
 
-.tl-logseq-portal-header .type-tag {
+.tl-type-tag {
   display: flex;
   align-items: center;
   justify-content: center;

tldraw/demo/src/App.jsx

@@ -148,7 +148,7 @@ export default function App() {
           PageNameLink,
         }}
         handlers={{
-          search: q => (q ? list : []),
+          search: q => (q ? list.filter(item => item.includes(q)) : []),
           addNewBlock: () => uniqueId(),
         }}
         model={documentModel}