feat: next phase of basic work

src/renderer/components/Toast/Toast.css

@@ -0,0 +1,14 @@
+.toast-container {
+  z-index: 9999 !important;
+}
+
+/* Custom styling for toast animations */
+:root {
+  --toast-enter-duration: 200ms;
+  --toast-exit-duration: 150ms;
+}
+
+/* Override for VS Code dark theme compatibility */
+[data-sonner-toast] {
+  font-family: var(--vscode-font-family, 'Segoe UI', sans-serif);
+}

src/renderer/components/Toast/Toast.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Toaster, toast } from 'react-hot-toast';
+import './Toast.css';
+
+// Re-export toast for use throughout the app
+export { toast };
+
+// Toast types
+export type ToastType = 'success' | 'error' | 'loading' | 'info';
+
+// Custom toast functions
+export const showToast = {
+  success: (message: string) => toast.success(message, {
+    duration: 4000,
+    position: 'bottom-right',
+  }),
+  
+  error: (message: string) => toast.error(message, {
+    duration: 6000,
+    position: 'bottom-right',
+  }),
+  
+  info: (message: string) => toast(message, {
+    duration: 4000,
+    position: 'bottom-right',
+    icon: 'ℹ️',
+  }),
+  
+  loading: (message: string) => toast.loading(message, {
+    position: 'bottom-right',
+  }),
+  
+  promise: <T,>(
+    promise: Promise<T>,
+    msgs: { loading: string; success: string; error: string }
+  ) => toast.promise(promise, msgs, {
+    position: 'bottom-right',
+  }),
+  
+  dismiss: (toastId?: string) => {
+    if (toastId) {
+      toast.dismiss(toastId);
+    } else {
+      toast.dismiss();
+    }
+  },
+};
+
+// Toast container component
+export const ToastContainer: React.FC = () => {
+  return (
+    <Toaster
+      position="bottom-right"
+      reverseOrder={false}
+      gutter={8}
+      containerClassName="toast-container"
+      toastOptions={{
+        // Default options for all toasts
+        duration: 4000,
+        style: {
+          background: 'var(--vscode-notifications-background, #252526)',
+          color: 'var(--vscode-notifications-foreground, #cccccc)',
+          border: '1px solid var(--vscode-notifications-border, #3c3c3c)',
+          borderRadius: '4px',
+          padding: '12px 16px',
+          fontSize: '13px',
+          maxWidth: '400px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        },
+        // Type-specific styling
+        success: {
+          iconTheme: {
+            primary: 'var(--vscode-testing-iconPassed, #89d185)',
+            secondary: 'var(--vscode-notifications-background, #252526)',
+          },
+        },
+        error: {
+          iconTheme: {
+            primary: 'var(--vscode-testing-iconFailed, #f14c4c)',
+            secondary: 'var(--vscode-notifications-background, #252526)',
+          },
+        },
+      }}
+    />
+  );
+};
+
+export default ToastContainer;

src/renderer/components/Toast/index.ts

@@ -0,0 +1 @@
+export { ToastContainer, toast, showToast, type ToastType } from './Toast';