From 667ce898ef263852ccb7202cce185883960cb6ee Mon Sep 17 00:00:00 2001
From: Chris Lettieri <bitsofchris01@gmail.com>
Date: Thu, 17 Apr 2025 08:41:18 -0400
Subject: [PATCH] move things to css

---
 .github/workflows/release.yml |  2 +-
 manifest.json                 |  3 ++-
 src/ui/loading-indicator.ts   | 49 +++++++---------------------------
 styles.css                    | 50 +++++++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 41 deletions(-)
 create mode 100644 styles.css

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ec69891..350e329 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -32,4 +32,4 @@ jobs:
           gh release create "$tag" \
             --title="$tag" \
             --draft \
-            main.js manifest.json
\ No newline at end of file
+            main.js manifest.json styles.css
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 1972fb6..f7d0506 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,5 +6,6 @@
 	"description": "Parse your voice notes into atomic notes, tasks, and summaries. OpenAugi is the voice to self-organizing second brain. While taking a voice note say 'auggie' to help the agent. Augmented Intelligence is AI for thinkers.",
 	"author": "Chris Lettieri",
 	"authorUrl": "https://bitsofchris.com",
-	"isDesktopOnly": false
+	"isDesktopOnly": false,
+	"css": "styles.css"
 }
diff --git a/src/ui/loading-indicator.ts b/src/ui/loading-indicator.ts
index dff45b3..661f3ae 100644
--- a/src/ui/loading-indicator.ts
+++ b/src/ui/loading-indicator.ts
@@ -25,65 +25,36 @@ export class LoadingIndicator {
     this.statusBarItem = this.statusBar.createEl('div', {
       cls: 'status-bar-item mod-clickable',
       attr: {
-        id: 'openaugi-status',
-        style: 'display: flex; align-items: center; gap: 8px; color: var(--text-accent);'
+        id: 'openaugi-status'
       }
     });
 
     // Create icon
     const iconEl = this.statusBarItem.createEl('span', {
-      cls: 'status-bar-item-icon',
-      attr: {
-        style: 'display: flex; align-items: center;'
-      }
+      cls: 'openaugi-status-icon'
     });
     
     // Create loading spinner
-    const spinner = iconEl.createEl('span', {
-      cls: 'openaugi-spinner',
-      attr: {
-        style: `
-          display: inline-block;
-          width: 14px;
-          height: 14px;
-          border: 2px solid var(--text-accent);
-          border-radius: 50%;
-          border-top-color: transparent;
-          animation: openaugi-spin 1s linear infinite;
-        `
-      }
+    iconEl.createEl('span', {
+      cls: 'openaugi-spinner'
     });
     
-    // Add CSS animation
-    const styleEl = document.head.createEl('style');
-    styleEl.textContent = `
-      @keyframes openaugi-spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-    `;
-    
     // Create text container
-    const textEl = this.statusBarItem.createEl('span', {
+    this.statusBarItem.createEl('span', {
       text: message,
-      attr: {
-        style: 'font-size: 13px; font-weight: 500;'
-      }
+      cls: 'openaugi-status-text'
     });
     
     // Create dot animation container
     this.loadingContainer = this.statusBarItem.createEl('span', {
-      attr: { style: 'display: flex; gap: 2px;' }
+      cls: 'openaugi-loading-dots'
     });
     
     // Create three dots for the animation
     for (let i = 0; i < 3; i++) {
       const dot = this.loadingContainer.createEl('span', {
         text: '.',
-        attr: {
-          style: 'opacity: 0; transition: opacity 0.3s ease; font-weight: bold;'
-        }
+        cls: 'openaugi-dot'
       });
       this.dotElements.push(dot);
     }
@@ -92,11 +63,11 @@ export class LoadingIndicator {
     let currentDot = 0;
     this.animationInterval = window.setInterval(() => {
       // Reset all dots
-      this.dotElements.forEach(dot => dot.style.opacity = '0');
+      this.dotElements.forEach(dot => dot.removeClass('active'));
       
       // Show dots up to current dot
       for (let i = 0; i <= currentDot; i++) {
-        this.dotElements[i].style.opacity = '1';
+        this.dotElements[i].addClass('active');
       }
       
       // Increment and wrap around
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..f2a1c27
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,50 @@
+/* OpenAugi Plugin Styles */
+
+/* Status bar item styles */
+#openaugi-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-accent);
+}
+
+.openaugi-status-icon {
+  display: flex;
+  align-items: center;
+}
+
+.openaugi-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--text-accent);
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: openaugi-spin 1s linear infinite;
+}
+
+@keyframes openaugi-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.openaugi-status-text {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.openaugi-loading-dots {
+  display: flex;
+  gap: 2px;
+}
+
+.openaugi-dot {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  font-weight: bold;
+}
+
+.openaugi-dot.active {
+  opacity: 1;
+} 
\ No newline at end of file