feat: overhaul groups management, remove global team_admin and isolate group administration

frontend/src/App.tsx

@@ -17,6 +17,7 @@ import {
   Download,
   Smartphone,
   Share,
+  Users,
 } from 'lucide-react';
 import { AuthStatus, DashboardStats, SharedList, Thought, User } from './lib/types';
 import {
@@ -42,12 +43,14 @@ import { SetupAndAuthView } from './features/auth/SetupAndAuthView';
 import { UserSettingsView } from './features/settings/UserSettingsView';
 import { AdminSettingsView } from './features/settings/AdminSettingsView';
 import { HelpView } from './features/help/HelpView';
+import { GroupsView } from './features/teams/GroupsView';
 
 type ActiveTab =
   | 'triage'
   | 'tasks'
   | 'workspace'
   | 'lists'
+  | 'groups'
   | 'user_settings'
   | 'admin_settings'
   | 'help';
@@ -403,13 +406,8 @@ export const App: React.FC = () => {
     );
   }
 
-  const isStaff = user.role === 'admin' || user.role === 'team_admin';
-  const roleLabel =
-    user.role === 'admin'
-      ? 'Server-Admin'
-      : user.role === 'team_admin'
-      ? 'Team-Admin'
-      : 'Mitglied';
+  const isServerAdmin = user.role === 'admin';
+  const roleLabel = isServerAdmin ? 'Server-Admin' : 'Mitglied';
 
   return (
     <div className="min-h-screen bg-canvas text-main flex flex-col font-sans selection:bg-accent/30">
@@ -572,6 +570,20 @@ export const App: React.FC = () => {
                     <span>Kontoeinstellungen</span>
                   </button>
 
+                  <button
+                    onClick={() => {
+                      triggerHaptic(10);
+                      setShowProfileMenu(false);
+                      setActiveTab('groups');
+                    }}
+                    className={`w-full px-3.5 py-2.5 text-left flex items-center gap-2.5 hover:bg-panel-elevated transition-colors ${
+                      activeTab === 'groups' ? 'text-accent font-semibold' : 'text-main'
+                    }`}
+                  >
+                    <Users className="w-4 h-4 text-accent" />
+                    <span>Gruppen</span>
+                  </button>
+
                   <button
                     onClick={handleOpenHelp}
                     className={`w-full px-3.5 py-2.5 text-left flex items-center gap-2.5 hover:bg-panel-elevated transition-colors ${
@@ -582,7 +594,7 @@ export const App: React.FC = () => {
                     <span>Hilfe & Anleitung</span>
                   </button>
 
-                  {isStaff && (
+                  {isServerAdmin && (
                     <button
                       onClick={() => {
                         triggerHaptic(10);
@@ -742,6 +754,13 @@ export const App: React.FC = () => {
               <SharedListsView onRefreshGlobal={refreshAll} currentUser={user} />
             )}
 
+            {activeTab === 'groups' && (
+              <GroupsView
+                currentUser={user}
+                onBack={() => setActiveTab(previousTab || 'triage')}
+              />
+            )}
+
             {activeTab === 'user_settings' && (
               <UserSettingsView
                 currentUser={user}
@@ -755,7 +774,7 @@ export const App: React.FC = () => {
               />
             )}
 
-            {activeTab === 'admin_settings' && isStaff && (
+            {activeTab === 'admin_settings' && isServerAdmin && (
               <AdminSettingsView
                 currentUser={user}
                 onBack={() => setActiveTab('triage')}
@@ -1004,6 +1023,21 @@ export const App: React.FC = () => {
                 <span>Kontoeinstellungen</span>
               </button>
 
+              <button
+                type="button"
+                onClick={() => {
+                  triggerHaptic(10);
+                  setShowMobileProfile(false);
+                  setActiveTab('groups');
+                }}
+                className={`w-full px-3 py-2.5 rounded-btn text-left flex items-center gap-3 hover:bg-panel-elevated transition-colors text-xs cursor-pointer ${
+                  activeTab === 'groups' ? 'text-accent font-semibold bg-panel-elevated' : 'text-main'
+                }`}
+              >
+                <Users className="w-4 h-4 text-accent" />
+                <span>Gruppen</span>
+              </button>
+
               <button
                 type="button"
                 onClick={() => {
@@ -1018,7 +1052,7 @@ export const App: React.FC = () => {
                 <span>Hilfe & Anleitung</span>
               </button>
 
-              {isStaff && (
+              {isServerAdmin && (
                 <button
                   type="button"
                   onClick={() => {