UI redesign

public/src/components/common/ConfirmContainer.tsx

@@ -0,0 +1,20 @@
+import { useUIStore } from '../../stores/uiStore';
+import { ConfirmDialog } from './ConfirmDialog';
+
+export function ConfirmContainer() {
+  const { confirm } = useUIStore();
+
+  if (!confirm) return null;
+
+  return (
+    <ConfirmDialog
+      title={confirm.title}
+      message={confirm.message}
+      confirmText={confirm.confirmText}
+      cancelText={confirm.cancelText}
+      type={confirm.type}
+      onConfirm={confirm.onConfirm}
+      onCancel={confirm.onCancel || (() => {})}
+    />
+  );
+}

public/src/components/common/ConfirmDialog.tsx

@@ -0,0 +1,54 @@
+interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  type?: 'danger' | 'warning' | 'info';
+}
+
+export function ConfirmDialog({
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  type = 'warning',
+}: ConfirmDialogProps) {
+  const confirmColors = {
+    danger: 'bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800',
+    warning: 'bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-800',
+    info: 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800',
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-[10001]">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4 animate-scale-in">
+        <div className="p-6">
+          <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
+            {title}
+          </h3>
+          <p className="text-gray-600 dark:text-gray-300 text-sm mb-6">
+            {message}
+          </p>
+          <div className="flex gap-3 justify-end">
+            <button
+              onClick={onCancel}
+              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
+            >
+              {cancelText}
+            </button>
+            <button
+              onClick={onConfirm}
+              className={`px-4 py-2 text-sm font-medium text-white ${confirmColors[type]} rounded-lg transition-colors`}
+            >
+              {confirmText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

public/src/components/common/Toast.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import type { ToastType } from '../../stores/uiStore';
+
+interface ToastProps {
+  message: string;
+  type: ToastType;
+  onClose: () => void;
+  duration?: number;
+}
+
+export function Toast({ message, type, onClose, duration = 4000 }: ToastProps) {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const bgColors = {
+    success: 'bg-green-500 dark:bg-green-600',
+    error: 'bg-red-500 dark:bg-red-600',
+    info: 'bg-blue-500 dark:bg-blue-600',
+    warning: 'bg-yellow-500 dark:bg-yellow-600',
+  };
+
+  const icons = {
+    success: '✓',
+    error: '✕',
+    info: 'ℹ',
+    warning: '⚠',
+  };
+
+  return (
+    <div
+      className={`${bgColors[type]} text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-md animate-slide-in`}
+    >
+      <div className="text-2xl">{icons[type]}</div>
+      <div className="flex-1 text-sm font-medium">{message}</div>
+      <button
+        onClick={onClose}
+        className="text-white hover:text-gray-200 text-xl font-bold leading-none"
+      >
+        ×
+      </button>
+    </div>
+  );
+}

public/src/components/common/ToastContainer.tsx

@@ -0,0 +1,19 @@
+import { useUIStore } from '../../stores/uiStore';
+import { Toast } from './Toast';
+
+export function ToastContainer() {
+  const { toasts, removeToast } = useUIStore();
+
+  return (
+    <div className="fixed top-4 right-4 z-[10002] flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          type={toast.type}
+          onClose={() => removeToast(toast.id)}
+        />
+      ))}
+    </div>
+  );
+}