feat: Implement ErrorBoundary class for global error handling

feat: Refactor Session class to use LocalStorageService for session management

feat: Enhance BasicButton component with configuration options and event handling

style: Update SASS variables to CSS custom properties for better theming support

style: Modify app.sass to include Bootstrap with legacy import

chore: Update settings.ts to handle session initialization and error notifications

fix: Improve buttonType definition for better readability

chore: Refactor parse.ts for cleaner file handling and keyword replacement

chore: Enhance syncConfig.ts with TypeScript interfaces and async file operations

chore: Update v2.ts to modify manifest.json for compatibility with manifest version 2

chore: Revise tsconfig.json for stricter type checking and improved module resolution

chore: Refactor vite.config.ts for better build configuration and asset management

src/settings.ts

@@ -1,33 +1,120 @@
-import { Session } from "./classes/session";
-import { BasicButton } from "./components/button";
-import "./sass/app.sass";
+import { Session } from './classes/session';
+import { BasicButton } from './components/button';
+import './sass/app.sass';
 
 class Settings {
+  private session: Session | null = null;
 
-    private session = Session.getInstance();
+  constructor() {
+    this.init();
+  }
 
-    constructor() {
-        this.renderSettings();
+  private async init(): Promise<void> {
+    try {
+      this.session = await Session.getInstance();
+      await this.renderSettings();
+    } catch (error) {
+      console.error('Failed to initialize settings:', error);
+      this.handleError('Failed to load settings');
+    }
+  }
+
+  private async renderSettings(): Promise<void> {
+    if (!this.session) {
+      throw new Error('Session not initialized');
     }
 
-    private async renderSettings(): Promise<void> {
-        const settings = <HTMLDivElement>document.getElementById('settings');
-		const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
-        settings.innerHTML = `
+    const settingsElement = document.getElementById('settings') as HTMLDivElement | null;
+    if (!settingsElement) {
+      throw new Error('Settings element not found');
+    }
+
+    const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
+
+    settingsElement.innerHTML = `
             <div class="form-group">
-				<label for="contentTest">Content Test</label>
-                <input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
+                <label for="contentTest">Content Test</label>
+                <input
+                    type="text"
+                    class="form-control text-input"
+                    id="contentTest"
+                    placeholder="Enter content test"
+                    value="${this.escapeHtml(this.session.contentTest)}"
+                >
             </div>
+            ${saveButton}
         `;
-		settings.innerHTML += saveButton;
 
-        const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
-        saveSettings.addEventListener('click', () => {
-            this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;
-            Session.save();
-            Session.reloadSession();
-        });
+    this.attachEventListeners();
+  }
+
+  private attachEventListeners(): void {
+    const saveButton = document.getElementById('saveSettings') as HTMLButtonElement | null;
+    const contentInput = document.getElementById('contentTest') as HTMLInputElement | null;
+
+    if (!saveButton || !contentInput) {
+      console.error('Required elements not found');
+      return;
     }
+
+    saveButton.addEventListener('click', async () => {
+      try {
+        await this.saveSettings(contentInput.value);
+      } catch (error) {
+        console.error('Failed to save settings:', error);
+        this.showNotification('Failed to save settings', 'error');
+      }
+    });
+  }
+
+  private async saveSettings(contentTest: string): Promise<void> {
+    if (!this.session) {
+      throw new Error('Session not initialized');
+    }
+
+    this.session.contentTest = contentTest;
+    await this.session.save();
+    this.showNotification('Settings saved successfully!', 'success');
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  private showNotification(message: string, type: 'success' | 'error'): void {
+    // Simple notification - could be enhanced with a proper notification system
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    notification.textContent = message;
+    notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 10px 20px;
+            border-radius: 4px;
+            color: white;
+            background-color: ${type === 'success' ? '#28a745' : '#dc3545'};
+            z-index: 1000;
+        `;
+
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.parentNode.removeChild(notification);
+      }
+    }, 3000);
+  }
+
+  private handleError(message: string): void {
+    console.error(message);
+    const settingsElement = document.getElementById('settings');
+    if (settingsElement) {
+      settingsElement.innerHTML = `<div class="error-message">${message}</div>`;
+    }
+  }
 }
 
 new Settings();