feat: social UI optimization, collapsible sections, and admin fixes

src/components/AvatarStack.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+
+interface AvatarStackProps {
+    names: string[];
+    limit?: number;
+    size?: 'sm' | 'md';
+}
+
+export default function AvatarStack({ names, limit = 3, size = 'sm' }: AvatarStackProps) {
+    if (!names || names.length === 0) return null;
+
+    const visibleNames = names.slice(0, limit);
+    const extraCount = names.length - limit;
+
+    const sizeClasses = size === 'sm' ? 'w-6 h-6 text-[10px]' : 'w-8 h-8 text-xs';
+
+    const getInitials = (name: string) => {
+        return name
+            .split(' ')
+            .map(n => n[0])
+            .slice(0, 2)
+            .join('')
+            .toUpperCase();
+    };
+
+    return (
+        <div className="flex items-center -space-x-2">
+            {visibleNames.map((name, i) => (
+                <div
+                    key={`${name}-${i}`}
+                    className={`${sizeClasses} rounded-full bg-amber-100 dark:bg-amber-900/30 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-amber-700 dark:text-amber-400 font-black ring-1 ring-amber-500/10 shadow-sm relative group`}
+                    title={name}
+                >
+                    {getInitials(name)}
+                    {/* Tooltip on hover */}
+                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                        {name}
+                    </div>
+                </div>
+            ))}
+            {extraCount > 0 && (
+                <div
+                    className={`${sizeClasses} rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-zinc-500 dark:text-zinc-400 font-black ring-1 ring-zinc-500/10 shadow-sm relative group`}
+                    title={`${extraCount} weitere Personen`}
+                >
+                    +{extraCount}
+                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                        {names.slice(limit).join(', ')}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}