feat/style: interactive ai assistant UI adjustments

src/AssistantView.ts

@@ -35,6 +35,7 @@ export class AssistantView extends ItemView {
     child.onclick = () => {
       this.app.workspace.openLinkText(links.path, "", true);
     };
+    child.style.fontSize = "1.2em";
     this.similarLinkBox.appendChild(child);
   };
   suggestTags = async (file: TFile, content: string) => {
@@ -58,6 +59,11 @@ export class AssistantView extends ItemView {
         );
         child.style.cursor = "pointer";
         child.style.margin = "2px";
+        // first child margin 0 
+        if (tags.indexOf(tag) === 0) {
+          child.style.margin = "0px";
+        }
+        child.style.fontSize = "1.2em";
         child.addEventListener("click", () => {
           if (!tag.startsWith("#")) {
             tag = `#${tag}`;
@@ -68,6 +74,7 @@ export class AssistantView extends ItemView {
       });
     } else {
       this.suggestionBox.setText("No suggestions");
+      this.suggestionBox.style.color = "var(--text-accent)";
     }
     this.loading.style.display = "none";
   };
@@ -89,6 +96,10 @@ export class AssistantView extends ItemView {
       logMessage("Adding alias " + suggestedName + " to " + file.basename);
       this.plugin.appendToFrontMatter(file, "alias", suggestedName);
     };
+    // 1.2em
+    nameElement.style.fontSize = "1.2em";
+    // make text purple
+    nameElement.style.color = "var(--text-accent)";
     this.aliasSuggestionBox.appendChild(nameElement);
     this.aliasSuggestionBox.appendChild(renameIcon);
   };
@@ -108,62 +119,71 @@ export class AssistantView extends ItemView {
 
     setIcon(moveFilebutton, "folder-input");
     moveFilebutton.style.cursor = "pointer";
-    moveFilebutton.style.margin = "8px";
+    moveFilebutton.style.margin = "5px";
     moveFilebutton.onclick = () => {
       this.plugin.moveContent(file, file.basename, folder);
     };
+    this.similarFolderBox.style.fontSize = "1.2em";
+    // make text purple
+    this.similarFolderBox.style.color = "var(--text-accent)";
     this.similarFolderBox.appendChild(moveFilebutton);
   };
 
   handleFileOpen = async (file: TFile) => {
     const content = await this.plugin.getTextFromFile(file);
     this.suggestTags(file, content);
-    this.suggestLinks(file, content);
+    //this.suggestLinks(file, content);
     this.suggestFolders(file, content);
     this.suggestAlias(file, content); // Call the suggestRename method
   };
 
   initUI() {
     this.containerEl.empty();
-    this.containerEl.addClass("tag-container");
+    this.containerEl.addClass("assistant-container");
+
     if (!this.plugin.settings.enableEarlyAccess) {
-      this.containerEl.createEl("h3", {
+      this.containerEl.createEl("h5", {
         text: "The AI Assistant is an early access feature currently available to supporters.",
       });
+
       const supportLink = this.containerEl.createEl("a", {
         href: "https://dub.sh/support-fo2k",
         text: "Support here to gain access.",
       });
       supportLink.setAttr("target", "_blank");
     }
-    this.containerEl.createEl("h4", {
-      text: "Similar tags",
-      cls: ["tree-item-self"],
-    });
 
+    this.containerEl.createEl("h1", {
+      text: "Interactive AI Assistant ✨",
+      cls: ["heading"]
+    }).style.cssText = "padding-left: 24px; padding-top: 24px;";
+
+    this.containerEl.createEl("p", {
+      text: "Click on any of the suggestions below to apply them to the current file.",
+    }).style.paddingLeft = "24px";
+
+    const createHeader = (text) => {
+      const header = this.containerEl.createEl("h5", { text });
+      header.style.paddingLeft = "24px";
+      return header;
+    };
+
+    createHeader("Add similar tags:");
     this.suggestionBox = this.containerEl.createEl("div");
     this.suggestionBox.style.paddingLeft = "24px";
-    this.containerEl.createEl("h4", {
-      text: "Most similar link",
-      cls: ["tree-item-self"],
-    });
-    this.similarLinkBox = this.containerEl.createEl("div");
-    this.similarLinkBox.style.paddingLeft = "24px";
 
-    this.containerEl.createEl("h4", {
-      text: "Most similar folder",
-      cls: ["tree-item-self"],
-    });
-    this.similarFolderBox = this.containerEl.createEl("div");
-    this.similarFolderBox.style.paddingLeft = "24px";
+    // createHeader("Most similar link:");
+    // this.similarLinkBox = this.containerEl.createEl("div");
+    // this.similarLinkBox.style.paddingLeft = "24px";
 
-    this.containerEl.createEl("h4", {
-      text: "Suggested Alias",
-      cls: ["tree-item-self"],
-    });
+    createHeader("Add Alias:");
     this.aliasSuggestionBox = this.containerEl.createEl("div");
     this.aliasSuggestionBox.style.paddingLeft = "24px";
 
+    createHeader("Send to folder:");
+    this.similarFolderBox = this.containerEl.createEl("div");
+    this.similarFolderBox.style.paddingLeft = "24px";
+
     this.loading = this.suggestionBox.createEl("div", {
       text: "Loading...",
     });
@@ -172,15 +192,29 @@ export class AssistantView extends ItemView {
 
   async onOpen() {
     this.containerEl.empty();
-    this.containerEl.addClass("tag-container");
+    this.containerEl.addClass("assistant-container");
     this.initUI();
 
     this.registerEvent(
       this.app.workspace.on("file-open", async (file) => {
+
+        // Get the AI assistant sidebar
+        const aiAssistantSidebar = document.querySelector('.assistant-container') as HTMLElement;
+
+        // Hide the AI assistant sidebar for one second
+        if (aiAssistantSidebar) {
+          aiAssistantSidebar.style.display = 'none';
+          setTimeout(() => {
+            aiAssistantSidebar.style.display = '';
+          }, 500);
+        }
+
         if (!this.plugin.settings.enableEarlyAccess) {
           return;
         }
         this.loading.style.display = "block";
+        // hide entire body, not just b
+
         if (!file) {
           this.suggestionBox.setText("No file opened");
           this.loading.style.display = "none";