UI overhault

2025-12-29 10:14:41 +01:00
parent 1964098136
commit a209468616
19 changed files with 5585 additions and 313 deletions
--- a/components/layout/Sidebar.tsx
+++ b/components/layout/Sidebar.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useEffect } from 'react';
+
+interface Domain {
+  bucket: string;
+  domain: string;
+}
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const [domains, setDomains] = useState<Domain[]>([]);
+  const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
+  const [totalEmails, setTotalEmails] = useState(0);
+
+  useEffect(() => {
+    // Fetch domains from API
+    const auth = localStorage.getItem('auth');
+    if (!auth) return;
+
+    fetch('/api/domains', {
+      headers: { Authorization: `Basic ${auth}` }
+    })
+      .then(res => res.json())
+      .then(data => {
+        setDomains(data);
+      })
+      .catch(err => console.error('Failed to fetch domains:', err));
+  }, []);
+
+  const toggleDomain = (bucket: string) => {
+    setExpandedDomains(prev => {
+      const next = new Set(prev);
+      if (next.has(bucket)) {
+        next.delete(bucket);
+      } else {
+        next.add(bucket);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <aside className="fixed left-0 top-16 w-64 h-[calc(100vh-4rem)] bg-white border-r border-gray-200 overflow-y-auto">
+      {/* Navigation */}
+      <nav className="px-2 pt-4">
+        {/* Inbox Overview */}
+        <div className="mb-4">
+          <Link
+            href="/domains"
+            className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+              pathname === '/domains' ? 'bg-blue-50 text-blue-700' : 'hover:bg-gray-100'
+            }`}
+          >
+            <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+            </svg>
+            <span className="font-medium">All Mail</span>
+          </Link>
+        </div>
+
+        {/* Domains Section */}
+        <div className="mb-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+          Domains
+        </div>
+        <div className="space-y-1">
+          {domains.map((domain, index) => (
+            <div key={`${domain.bucket}-${index}`}>
+              <Link
+                href={`/mailboxes?bucket=${domain.bucket}`}
+                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 text-left transition-colors"
+              >
+                <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                </svg>
+                <span className="text-sm flex-1 truncate">{domain.domain}</span>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </nav>
+    </aside>
+  );
+}