feat: add full-page chat route and sidebar menu ordering

frontend/src/pages/Chat.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { Link } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import DashboardLayout from '../components/dashboard/DashboardLayout';
+import { useChat } from '../contexts/ChatContext';
+import { nextcloudApi } from '../services/nextcloud';
+import { notificationsApi } from '../services/notifications';
+import ChatRoomList from '../components/chat/ChatRoomList';
+import ChatMessageView from '../components/chat/ChatMessageView';
+
+const ChatPage: React.FC = () => {
+  const { rooms, selectedRoomToken, connected } = useChat();
+  const queryClient = useQueryClient();
+  const markedRoomsRef = React.useRef(new Set<string>());
+
+  // Dismiss nextcloud_talk notifications when on this page
+  React.useEffect(() => {
+    notificationsApi.dismissByType('nextcloud_talk').then(() => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+      queryClient.invalidateQueries({ queryKey: ['unreadNotificationCount'] });
+    }).catch(() => {});
+  }, [queryClient]);
+
+  // Mark unread rooms as read when rooms data updates
+  React.useEffect(() => {
+    const unread = rooms.filter(
+      (r) => r.unreadMessages > 0 && !markedRoomsRef.current.has(r.token),
+    );
+    if (unread.length === 0) return;
+    unread.forEach((r) => markedRoomsRef.current.add(r.token));
+    Promise.allSettled(unread.map((r) => nextcloudApi.markAsRead(r.token))).then(() => {
+      queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
+    });
+  }, [rooms, queryClient]);
+
+  // Mark selected room as read when a conversation is opened
+  React.useEffect(() => {
+    if (!selectedRoomToken) return;
+    nextcloudApi.markAsRead(selectedRoomToken).then(() => {
+      queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
+    }).catch(() => {});
+  }, [selectedRoomToken, queryClient]);
+
+  return (
+    <DashboardLayout>
+      <Box
+        sx={{
+          height: 'calc(100vh - 112px)',
+          display: 'flex',
+          border: 1,
+          borderColor: 'divider',
+          borderRadius: 1,
+          overflow: 'hidden',
+        }}
+      >
+        {!connected ? (
+          <Box sx={{ p: 3, display: 'flex', alignItems: 'center' }}>
+            <Typography variant="body1" color="text.secondary">
+              Nextcloud nicht verbunden. Bitte verbinden Sie sich in den{' '}
+              <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
+            </Typography>
+          </Box>
+        ) : (
+          <>
+            <Box
+              sx={{
+                width: 280,
+                flexShrink: 0,
+                borderRight: 1,
+                borderColor: 'divider',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+              }}
+            >
+              <ChatRoomList />
+            </Box>
+            <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              {selectedRoomToken ? (
+                <ChatMessageView />
+              ) : (
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+                  <Typography variant="body1" color="text.secondary">
+                    Wähle ein Gespräch aus, um zu beginnen.
+                  </Typography>
+                </Box>
+              )}
+            </Box>
+          </>
+        )}
+      </Box>
+    </DashboardLayout>
+  );
+};
+
+export default ChatPage;