Better completion style

src/documentation/inlineHelp.ts

@@ -982,7 +982,16 @@ export const toposCompletions = (context: CompletionContext) => {
       options: Object.keys(completionDatabase).map((key) => ({
         label: key,
         type: completionDatabase[key].category,
-        info: `${completionDatabase[key].description}`,
+        info: () => {
+          let div = document.createElement('div');
+          div.innerHTML = `
+      <h1 class="text-orange-300 text-base pb-1">${completionDatabase[key].name} [<em class="text-white">${completionDatabase[key].category}</em>]</h1>
+      <p class="text-base pl-4">${completionDatabase[key].description}</p>
+      <div class="rounded px-2 ml-4 mt-2 bg-neutral-800"><code class="text-sm">${completionDatabase[key].example}</code></div>
+      `
+          div.classList.add("px-4", "py-2", "rounded-lg", "w-92");
+          return div
+        }
       }))
     }
   }