steggi/pyramid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

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

Browse Source 
- 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]>
This commit is contained in:
Bernd Steckmeister
2026-10-10 14:22:02 +02:00
co-authored by Claude Opus 5.5
parent de24053167
commit 391ebf0ffa
19 changed files with 1139 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/call_ui/bubble_physics.dart
+4 -4
View File
@@ -70,13 +70,13 @@ class BubbleSim {
final active = ids.where((id) => bodies.containsKey(id)).toList();
double base;
if (active.length <= 1) {
base = shortSide * 0.30;
base = shortSide * 0.27;
} else {
// Kreise sollen zusammen gut 40 % der Fläche bedecken.
// Kreise sollen zusammen gut ein Drittel der Fläche bedecken.
final sumW2 = active.fold<double>(0, (s, id) => s + weight(id) * weight(id));
base = math.sqrt(0.42 * w * h / (math.pi * sumW2));
base = math.sqrt(0.36 * w * h / (math.pi * sumW2));
}
final maxR = shortSide * (active.length <= 2 ? 0.30 : 0.36);
final maxR = shortSide * (active.length <= 2 ? 0.27 : 0.36);
for (final b in bodies.values) {
if (b.leaving) {
b.targetR = 0;
lib/features/call_ui/view/bubble_stage.dart
+57
View File
@@ -164,6 +164,17 @@ class _Bubble extends StatelessWidget {
isScreenShare: data.isScreenShare,
child: data.coverVideoWidget!,
),
const IgnorePointer(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment(-0.45, -0.55),
radius: 0.95,
colors: [Color(0x2EFFFFFF), Color(0x00FFFFFF)],
),
),
),
),
if (showName)
Align(
alignment: const Alignment(0, 0.62),
@@ -303,3 +314,49 @@ class _BubbleRingPainter extends CustomPainter {
@override
bool shouldRepaint(_BubbleRingPainter old) => true;
}
/// Vorführ-Ansicht der Bubbles mit erfundenen Teilnehmern – nur für
/// Screenshots/Tests (UI-Tour), damit man die Ansicht mit mehreren Personen
/// sieht, ohne dass so viele Testkonten anrufen müssen.
@visibleForTesting
class CallBubblesDemo extends StatelessWidget {
final int count;
const CallBubblesDemo({super.key, this.count = 5});
static const _names = ['Du', 'Anna', 'Ben', 'Clara', 'David', 'Ela', 'Finn'];
@override
Widget build(BuildContext context) {
final pt = PyramidTheme.of(context);
final participants = [
for (var i = 0; i < count.clamp(1, _names.length); i++)
_ParticipantData(
id: 'demo$i',
name: _names[i],
isLocal: i == 0,
isSpeaking: i == 2,
isMuted: i == 3,
avatarColor: VoiceChannelView._avatarColors[i % VoiceChannelView._avatarColors.length],
),
];
return _UnifiedCallView(
participants: participants,
client: null,
startedAt: DateTime.now().subtract(const Duration(minutes: 3, seconds: 12)),
isLiveKit: true,
displayName: 'Familie',
isConnecting: false,
onHangUp: () {},
onMinimize: () {},
onToggleMic: () {},
onToggleDeafen: () {},
onToggleCam: () {},
onToggleScreen: () {},
isMuted: false,
isDeafened: false,
isCameraOff: true,
isScreenSharing: false,
pt: pt,
);
}
}
lib/features/call_ui/view/call_view.dart
+6 -2
View File
@@ -54,7 +54,10 @@ class _UnifiedCallView extends StatefulWidget {
}
class _UnifiedCallViewState extends State<_UnifiedCallView> {
_CallLayout _mode = _CallLayout.bubbles;
/// Zuletzt gewählte Ansicht (Bubbles/Kacheln) – bleibt beim Minimieren
/// und für den nächsten Anruf erhalten.
static _CallLayout _preferred = _CallLayout.bubbles;
_CallLayout _mode = _preferred;
String? _heroId;
bool _stripCollapsed = false;
Set<String> _knownScreens = {};
@@ -86,7 +89,7 @@ class _UnifiedCallViewState extends State<_UnifiedCallView> {
_knownScreens = screens;
if (_mode == _CallLayout.hero &&
!widget.participants.any((p) => p.id == _heroId && p.hasVideo)) {
_mode = _CallLayout.bubbles;
_mode = _preferred;
_heroId = null;
}
}
@@ -154,6 +157,7 @@ class _UnifiedCallViewState extends State<_UnifiedCallView> {
_mode = _mode == _CallLayout.bubbles
? _CallLayout.grid
: _CallLayout.bubbles;
_preferred = _mode;
_heroId = null;
}),
onMinimize: widget.onMinimize,
lib/features/chat/chat_composer.dart
+6 -1
View File
@@ -10,6 +10,8 @@ import 'package:path_provider/path_provider.dart';
import 'package:pyramid/core/settings_prefs.dart';
import 'package:pyramid/core/appearance.dart';
import 'package:pyramid/core/theme.dart';
import 'package:pyramid/features/rooms/rooms_provider.dart'
show spaceChannelIdsProvider;
import 'package:pyramid/widgets/spring_press.dart';
import 'package:pyramid/features/chat/attachment_dialog.dart';
import 'package:pyramid/features/chat/emoji_picker.dart';
@@ -319,9 +321,12 @@ class _ChatComposerState extends ConsumerState<ChatComposer> {
final mobile = isMobileLayout(size);
final roomName = widget.room.getLocalizedDisplayname();
// „#“ nur bei Server-Kanälen; Gruppen heißen wie die Gruppe.
final placeholder = widget.room.isDirectChat
? 'Nachricht…'
: 'Nachricht an #$roomName';
: ref.watch(spaceChannelIdsProvider).contains(widget.room.id)
? 'Nachricht an #$roomName'
: 'Nachricht an $roomName';
return SafeArea(
child: Column(
lib/features/chat/view/chat_header.dart
+1 -1
View File
@@ -26,7 +26,7 @@ class _ChatHeader extends ConsumerWidget {
final name = room?.getLocalizedDisplayname() ?? roomId;
final isDm = room?.isDirectChat ?? false;
final isEncrypted = room?.encrypted ?? false;
final topic = room?.topic ?? (isDm ? '' : 'Welcome to #$name');
final topic = room?.topic ?? '';
final client = ref.watch(matrixClientProvider).valueOrNull;
final size = MediaQuery.sizeOf(context);
final isMobile = size.width < 900 || size.height < 500;
lib/features/rooms/panel/rooms_header.dart
+25 -10
View File
@@ -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(
lib/features/rooms/panel/rooms_list.dart
+29 -7
View File
@@ -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(
lib/features/rooms/panel/rooms_mobile_tile.dart
+100
View File
@@ -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,
),
],
],
),
),
);
}
}
lib/features/rooms/panel/rooms_panel_core.dart
+75 -46
View File
@@ -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()],
);
}
}
lib/features/rooms/rooms_panel.dart
+2
View File
@@ -11,11 +11,13 @@ import 'package:pyramid/core/appearance.dart';
import 'package:pyramid/core/matrix_client.dart';
import 'package:pyramid/core/notification_content.dart' show notificationBody;
import 'package:pyramid/core/room_kinds.dart';
import 'package:pyramid/core/settings_prefs.dart' show bottomNavProvider;
import 'package:pyramid/core/theme.dart';
import 'package:pyramid/features/rooms/rooms_provider.dart';
import 'package:pyramid/features/chat/chat_provider.dart' show acceptInvite;
import 'package:pyramid/features/call_ui/mini_call_widget.dart';
import 'package:pyramid/features/call_signaling/call_signaling_service.dart';
import 'package:pyramid/features/group_call/group_call.dart' show CallAvatarStack;
import 'package:pyramid/features/voice_channel/voice_channel_service.dart';
import 'package:pyramid/features/rooms/user_panel.dart';
import 'package:pyramid/features/spaces/space_admin_dialog.dart';