feat(ui): untere Leiste (Chats/Server/Du) als Option, Server-Uebersicht, Du-Tab, Feinschliff

- Einstellung 'Navigation: Seitenmenue | Untere Leiste' (Handy, Standard bleibt Seitenmenue): Tabs Chats/Server/Du, Server-Uebersicht als Karten, Du-Tab mit Profil + Einstellungen, Zurueck-Taste ueber die Tabs - CallDock als eigenes Widget (Anrufleiste auch ueber der Tab-Leiste) - Sprachkanaele am Handy als Kachel mit 'wer ist drin' - Suchfeld mit Lupe, 'Kanaele durchsuchen' im Server, Filter-Chips am PC umbrechend, '#' nur bei Server-Kanaelen, englische Reste entfernt - Anrufansicht merkt sich Bubbles/Kacheln, Bubbles mit leichtem Glanz - UI-Tour: Gruppenanruf (echter zweiter LiveKit-Teilnehmer), Bubbles mit 5/7 Personen, untere Leiste; Version 0.1.42 Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-10 14:22:02 +02:00
parent de24053167
commit 391ebf0ffa
19 changed files with 1139 additions and 87 deletions
@@ -15,6 +15,7 @@ class _Header extends ConsumerWidget {
    final isRealSpace = spaceId != null && spaceId != 'dms' && spaceId != 'rooms';
    final size = MediaQuery.sizeOf(context);
    final isMobile = size.width < 900 || size.height < 500;
+    final bottomNav = ref.watch(bottomNavProvider);

    final spaces = ref.watch(spacesProvider).valueOrNull ?? [];
    Room? activeSpace;
@@ -162,7 +163,18 @@ class _Header extends ConsumerWidget {

    Widget controlsRow = Row(
      children: [
-        if (isMobile)
+        if (isMobile && bottomNav) ...[
+          if (isRealSpace)
+            PyrIconBtn(
+              icon: Icon(Icons.arrow_back_rounded,
+                  color: hasBanner ? Colors.white : null),
+              tooltip: 'Alle Server',
+              onPressed: () =>
+                  ref.read(activeSpaceIdProvider.notifier).state = null,
+            )
+          else
+            const SizedBox(width: 2),
+        ] else if (isMobile)
          PyrIconBtn(
            icon: const Icon(Icons.menu_rounded),
            tooltip: 'Spaces',
@@ -171,7 +183,7 @@ class _Header extends ConsumerWidget {
        else ...[
          PyrIconBtn(
            icon: const Icon(Icons.menu_rounded),
-            tooltip: 'Toggle sidebar',
+            tooltip: 'Seitenleiste ein/aus',
            onPressed: () =>
                ref.read(railCollapsedProvider.notifier).update((s) => !s),
          ),
@@ -311,7 +323,7 @@ class _Header extends ConsumerWidget {
      height: isRealSpace ? 56 : 52,
      padding: const EdgeInsets.symmetric(horizontal: 14),
      decoration: BoxDecoration(
-        color: isRealSpace ? pt.bg0 : pt.bg1,
+        color: isRealSpace && !isMobile ? pt.bg0 : pt.bg1,
        border: Border(bottom: BorderSide(color: pt.border)),
      ),
      child: controlsRow,
@@ -453,9 +465,13 @@ class _NotificationsButton extends ConsumerWidget {
 class _FilterInput extends StatelessWidget {
  final TextEditingController controller;
  final PyramidTheme pt;
+  final String hint;
  final ValueChanged<String> onChanged;
  const _FilterInput(
-      {required this.controller, required this.pt, required this.onChanged});
+      {required this.controller,
+      required this.pt,
+      required this.hint,
+      required this.onChanged});

  @override
  Widget build(BuildContext context) {
@@ -464,18 +480,17 @@ class _FilterInput extends StatelessWidget {
      child: Stack(
        alignment: Alignment.centerLeft,
        children: [
-          Padding(
-            padding: const EdgeInsets.only(left: 8),
-            child: Icon(Icons.search_rounded, size: 14, color: pt.fgDim),
-          ),
          TextField(
            controller: controller,
            onChanged: onChanged,
            style: TextStyle(color: pt.fg, fontSize: 13),
            decoration: InputDecoration(
-              hintText: 'Chats durchsuchen',
+              hintText: hint,
              hintStyle: TextStyle(color: pt.fgDim, fontSize: 13),
-              contentPadding: const EdgeInsets.fromLTRB(28, 7, 10, 7),
+              prefixIcon: Icon(Icons.search_rounded, size: 16, color: pt.fgDim),
+              prefixIconConstraints:
+                  const BoxConstraints(minWidth: 32, minHeight: 20),
+              contentPadding: const EdgeInsets.fromLTRB(0, 7, 10, 7),
              filled: true,
              fillColor: pt.bg2,
              border: OutlineInputBorder(
@@ -214,18 +214,27 @@ class _ChatFilterChips extends StatelessWidget {
      );
    }

+    final chips = [
+      chip(_ChatFilter.all, 'Alle'),
+      chip(_ChatFilter.unread,
+          unreadCount > 0 ? 'Ungelesen · $unreadCount' : 'Ungelesen'),
+      chip(_ChatFilter.people, 'Personen'),
+      chip(_ChatFilter.groups, 'Gruppen'),
+    ];
+    // Handy: wischbare Zeile; PC (schmale Spalte): umbrechen statt
+    // abschneiden – mit der Maus wischt niemand seitwärts.
+    if (!isMobileLayout(MediaQuery.sizeOf(context))) {
+      return Padding(
+        padding: const EdgeInsets.fromLTRB(4, 2, 4, 6),
+        child: Wrap(runSpacing: 6, children: chips),
+      );
+    }
    return SizedBox(
      height: 40,
      child: ListView(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.fromLTRB(4, 2, 4, 6),
-        children: [
-          chip(_ChatFilter.all, 'Alle'),
-          chip(_ChatFilter.unread,
-              unreadCount > 0 ? 'Ungelesen · $unreadCount' : 'Ungelesen'),
-          chip(_ChatFilter.people, 'Personen'),
-          chip(_ChatFilter.groups, 'Gruppen'),
-        ],
+        children: chips,
      ),
    );
  }
@@ -571,6 +580,19 @@ class _RoomItemState extends ConsumerState<_RoomItem> {
    final voiceParticipants = isVoice ? ref.watch(voiceParticipantsProvider(room.id)) : <Map<String, dynamic>>[];
    final client = ref.watch(matrixClientProvider).valueOrNull;

+    // Handy: Sprachkanal als Kachel mit Teilnehmern (rooms_mobile_tile.dart).
+    if (isVoice && isMobileLayout(MediaQuery.sizeOf(context))) {
+      return _MobileVoiceTile(
+        room: room,
+        inVoice: inVoice,
+        participants: voiceParticipants,
+        client: client,
+        pt: pt,
+        onTap: widget.onTap,
+        onLongPress: _showContextMenu,
+      );
+    }
+
    // Handy: Messenger-Kachel mit Vorschau (rooms_mobile_tile.dart).
    if (!isVoice && isMobileLayout(MediaQuery.sizeOf(context))) {
      return _MobileRoomTile(
@@ -172,3 +172,103 @@ String? _roomPreview(Room room, String? myUserId) {
  if (room.isDirectChat) return body;
  return '${e.senderFromMemoryOrFallback.calcDisplayname()}: $body';
 }
+
+/// Sprachkanal im Handy-Layout: Kachel wie ein Chat, darunter wer gerade drin
+/// ist (Avatare + Namen) bzw. „Antippen zum Beitreten“.
+class _MobileVoiceTile extends StatelessWidget {
+  final Room room;
+  final bool inVoice;
+  final List<Map<String, dynamic>> participants;
+  final Client? client;
+  final PyramidTheme pt;
+  final VoidCallback onTap;
+  final VoidCallback onLongPress;
+
+  const _MobileVoiceTile({
+    required this.room,
+    required this.inVoice,
+    required this.participants,
+    required this.client,
+    required this.pt,
+    required this.onTap,
+    required this.onLongPress,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final green = pt.online;
+    final names = participants
+        .map((p) => (p['displayName'] as String? ?? '').split(' ').first)
+        .where((n) => n.isNotEmpty)
+        .toList();
+    final subtitle = inVoice
+        ? 'Du bist drin · antippen zum Verlassen'
+        : participants.isEmpty
+            ? 'Sprachkanal · antippen zum Beitreten'
+            : names.length <= 2
+                ? '${names.join(' und ')} ${names.length == 1 ? 'ist' : 'sind'} drin'
+                : '${names.take(2).join(', ')} und ${names.length - 2} weitere';
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      onLongPress: onLongPress,
+      child: Container(
+        color: inVoice ? green.withValues(alpha: 0.10) : Colors.transparent,
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 9),
+        child: Row(
+          children: [
+            Container(
+              width: _kTileAvatar,
+              height: _kTileAvatar,
+              decoration: BoxDecoration(
+                color: green.withValues(alpha: inVoice ? 0.30 : 0.14),
+                borderRadius: BorderRadius.circular(_kTileAvatar * 0.3),
+              ),
+              child: Icon(
+                participants.isEmpty
+                    ? Icons.volume_up_rounded
+                    : Icons.graphic_eq_rounded,
+                size: 22,
+                color: green,
+              ),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(room.getLocalizedDisplayname(),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                          color: pt.fg,
+                          fontSize: 15,
+                          fontWeight: FontWeight.w600)),
+                  const SizedBox(height: 3),
+                  Text(subtitle,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                          color: participants.isEmpty && !inVoice
+                              ? pt.fgDim
+                              : green,
+                          fontSize: 13.5)),
+                ],
+              ),
+            ),
+            if (participants.isNotEmpty && client != null) ...[
+              const SizedBox(width: 8),
+              CallAvatarStack(
+                participants: participants,
+                client: client!,
+                ringColor: pt.bg1,
+                size: 26,
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -64,8 +64,8 @@ class _RoomsPanelState extends ConsumerState<RoomsPanel> {
    });
    final roomsAsync = ref.watch(roomListProvider);
    final activeSpaceId = ref.watch(activeSpaceIdProvider);
-    final call = ref.watch(voiceChannelProvider);
-    final voip = ref.watch(callSignalingProvider);
+    final bottomNav = ref.watch(bottomNavProvider) &&
+        isMobileLayout(MediaQuery.sizeOf(context));

    final isRealSpace = activeSpaceId != null &&
        activeSpaceId != 'dms' &&
@@ -87,6 +87,7 @@ class _RoomsPanelState extends ConsumerState<RoomsPanel> {
            _FilterInput(
              controller: _filterCtrl,
              pt: pt,
+              hint: isRealSpace ? 'Kanäle durchsuchen' : 'Chats durchsuchen',
              onChanged: (v) => setState(() => _filter = v),
            ),
          Expanded(
@@ -122,52 +123,80 @@ class _RoomsPanelState extends ConsumerState<RoomsPanel> {
                    ),
                  ),
          ),
-          // Call-Dock: immer ÜBER dem Konto-Balken, animiert ein-/ausblenden.
-          // Im Mobil-Querformat (Höhe knapp) liegen Call-Balken und
-          // Konto-Balken nebeneinander statt übereinander.
-          Builder(builder: (context) {
-            // Klingeln (noch nicht angenommen) zählt nicht – dafür gibt es
-            // das Annehmen-Fenster (Bernd 2026-10-08).
-            final hasVoipCall = voip.currentCall != null &&
-                voip.currentCall!.state != CallState.kEnded &&
-                voip.currentCall!.state != CallState.kRinging;
-            // Am PC bei offener Anrufansicht nicht doppelt steuern
-            // (UI-Audit S6); am Handy liegt die Anrufansicht ohnehin darüber.
-            final callViewOpen = ref.watch(viewModeProvider) == ViewMode.voice &&
-                !isMobileLayout(MediaQuery.sizeOf(context));
-            final hasCallDock = !callViewOpen && (call.isActive || hasVoipCall);
-            final isLandscapeCompact =
-                MediaQuery.sizeOf(context).height < 500;
-
-            final callDock = AnimatedSize(
-              duration: const Duration(milliseconds: 220),
-              curve: Curves.easeOutCubic,
-              alignment: Alignment.bottomCenter,
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  if (call.isActive && !callViewOpen) MiniCallWidget(call: call),
-                  if (hasVoipCall && !callViewOpen) MiniCallWidget(call: voip),
-                ],
-              ),
-            );
-
-            if (isLandscapeCompact && hasCallDock) {
-              return Row(
-                crossAxisAlignment: CrossAxisAlignment.end,
-                children: [
-                  Expanded(child: callDock),
-                  const Expanded(child: UserPanel()),
-                ],
-              );
-            }
-            return Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [callDock, const UserPanel()],
-            );
-          }),
+          // Call-Dock + Profilbalken. Mit der unteren Leiste (Handy) liegen
+          // beide dort (layout/mobile_tabs.dart).
+          if (!bottomNav) const _PanelFooter(),
        ],
      ),
    );
  }
 }
+
+/// Laufender Anruf als kompakte Leiste, animiert ein-/ausgeblendet.
+class CallDock extends ConsumerWidget {
+  const CallDock({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final call = ref.watch(voiceChannelProvider);
+    final voip = ref.watch(callSignalingProvider);
+    // Klingeln (noch nicht angenommen) zählt nicht – dafür gibt es das
+    // Annehmen-Fenster (Bernd 2026-10-08).
+    final hasVoipCall = voip.currentCall != null &&
+        voip.currentCall!.state != CallState.kEnded &&
+        voip.currentCall!.state != CallState.kRinging;
+    // Am PC bei offener Anrufansicht nicht doppelt steuern (UI-Audit S6); am
+    // Handy liegt die Anrufansicht ohnehin darüber.
+    final callViewOpen = ref.watch(viewModeProvider) == ViewMode.voice &&
+        !isMobileLayout(MediaQuery.sizeOf(context));
+    return AnimatedSize(
+      duration: const Duration(milliseconds: 220),
+      curve: Curves.easeOutCubic,
+      alignment: Alignment.bottomCenter,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (call.isActive && !callViewOpen) MiniCallWidget(call: call),
+          if (hasVoipCall && !callViewOpen) MiniCallWidget(call: voip),
+        ],
+      ),
+    );
+  }
+
+  /// Ist gerade ein Anruf im Dock sichtbar?
+  static bool visible(WidgetRef ref, BuildContext context) {
+    final call = ref.watch(voiceChannelProvider);
+    final voip = ref.watch(callSignalingProvider);
+    final hasVoipCall = voip.currentCall != null &&
+        voip.currentCall!.state != CallState.kEnded &&
+        voip.currentCall!.state != CallState.kRinging;
+    final callViewOpen = ref.watch(viewModeProvider) == ViewMode.voice &&
+        !isMobileLayout(MediaQuery.sizeOf(context));
+    return !callViewOpen && (call.isActive || hasVoipCall);
+  }
+}
+
+/// Call-Dock immer ÜBER dem Konto-Balken. Im Mobil-Querformat (Höhe knapp)
+/// liegen beide nebeneinander statt übereinander.
+class _PanelFooter extends ConsumerWidget {
+  const _PanelFooter();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final hasCallDock = CallDock.visible(ref, context);
+    final isLandscapeCompact = MediaQuery.sizeOf(context).height < 500;
+    if (isLandscapeCompact && hasCallDock) {
+      return const Row(
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
+          Expanded(child: CallDock()),
+          Expanded(child: UserPanel()),
+        ],
+      );
+    }
+    return const Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [CallDock(), UserPanel()],
+    );
+  }
+}