resolve issues with new features

2026-03-12 10:21:26 +01:00
parent 31f1414e06
commit d5be68ca63
13 changed files with 275 additions and 86 deletions
--- a/frontend/src/components/admin/ServiceManagerTab.tsx
+++ b/frontend/src/components/admin/ServiceManagerTab.tsx
@@ -17,29 +17,38 @@ import {
  IconButton,
  Typography,
  CircularProgress,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { adminApi } from '../../services/admin';
+import { useNotification } from '../../contexts/NotificationContext';
 import type { PingResult } from '../../types/admin.types';

 function ServiceManagerTab() {
  const queryClient = useQueryClient();
+  const { showError } = useNotification();
  const [dialogOpen, setDialogOpen] = useState(false);
  const [newName, setNewName] = useState('');
  const [newUrl, setNewUrl] = useState('');
+  const [refreshInterval, setRefreshInterval] = useState(15000);

  const { data: services, isLoading: servicesLoading } = useQuery({
    queryKey: ['admin', 'services'],
    queryFn: adminApi.getServices,
-    refetchInterval: 15000,
+    refetchInterval: refreshInterval || false,
+    placeholderData: (previousData: any) => previousData,
  });

  const { data: pingResults, isLoading: pingLoading } = useQuery({
    queryKey: ['admin', 'services', 'ping'],
    queryFn: adminApi.pingAll,
-    refetchInterval: 15000,
+    refetchInterval: refreshInterval || false,
+    placeholderData: (previousData: any) => previousData,
  });

  const createMutation = useMutation({
@@ -50,6 +59,10 @@ function ServiceManagerTab() {
      setNewName('');
      setNewUrl('');
    },
+    onError: (error: any) => {
+      const message = error?.response?.data?.message || 'Service konnte nicht erstellt werden';
+      showError(message);
+    },
  });

  const deleteMutation = useMutation({
@@ -57,6 +70,9 @@ function ServiceManagerTab() {
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'services'] });
    },
+    onError: () => {
+      showError('Service konnte nicht gelöscht werden');
+    },
  });

  const getPingForUrl = (url: string): PingResult | undefined => {
@@ -102,9 +118,25 @@ function ServiceManagerTab() {
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
        <Typography variant="h6">Service Monitor</Typography>
-        <Button startIcon={<AddIcon />} variant="contained" onClick={() => setDialogOpen(true)}>
-          Service hinzufuegen
-        </Button>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <FormControl size="small" sx={{ minWidth: 160 }}>
+            <InputLabel>Aktualisierung</InputLabel>
+            <Select
+              value={refreshInterval}
+              label="Aktualisierung"
+              onChange={(e) => setRefreshInterval(Number(e.target.value))}
+            >
+              <MenuItem value={5000}>5 Sekunden</MenuItem>
+              <MenuItem value={15000}>15 Sekunden</MenuItem>
+              <MenuItem value={30000}>30 Sekunden</MenuItem>
+              <MenuItem value={60000}>60 Sekunden</MenuItem>
+              <MenuItem value={0}>Aus</MenuItem>
+            </Select>
+          </FormControl>
+          <Button startIcon={<AddIcon />} variant="contained" onClick={() => setDialogOpen(true)}>
+            Service hinzufuegen
+          </Button>
+        </Box>
      </Box>

      <TableContainer component={Paper}>
@@ -185,6 +217,7 @@ function ServiceManagerTab() {
            fullWidth
            value={newUrl}
            onChange={(e) => setNewUrl(e.target.value)}
+            helperText="Vollständige URL mit http:// oder https://"
          />
        </DialogContent>
        <DialogActions>
--- a/frontend/src/components/admin/SystemHealthTab.tsx
+++ b/frontend/src/components/admin/SystemHealthTab.tsx
@@ -19,16 +19,27 @@ function formatBytes(bytes: number): string {
 }

 function SystemHealthTab() {
-  const { data: health, isLoading } = useQuery({
+  const { data: health, isLoading, isError } = useQuery({
    queryKey: ['admin', 'system', 'health'],
    queryFn: adminApi.getSystemHealth,
    refetchInterval: 30000,
  });

-  if (isLoading || !health) {
+  if (isLoading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
  }

+  if (isError || !health) {
+    return (
+      <Box sx={{ p: 4, textAlign: 'center' }}>
+        <Typography color="error" gutterBottom>Systemdaten konnten nicht geladen werden.</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Bitte versuchen Sie es später erneut.
+        </Typography>
+      </Box>
+    );
+  }
+
  const heapPercent = (health.memoryUsage.heapUsed / health.memoryUsage.heapTotal) * 100;

  return (
--- a/frontend/src/components/admin/UserOverviewTab.tsx
+++ b/frontend/src/components/admin/UserOverviewTab.tsx
@@ -40,7 +40,7 @@ function UserOverviewTab() {
  const [sortKey, setSortKey] = useState<SortKey>('name');
  const [sortDir, setSortDir] = useState<SortDir>('asc');

-  const { data: users, isLoading } = useQuery({
+  const { data: users, isLoading, isError } = useQuery({
    queryKey: ['admin', 'users'],
    queryFn: adminApi.getUsers,
  });
@@ -82,6 +82,17 @@ function UserOverviewTab() {
    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
  }

+  if (isError) {
+    return (
+      <Box sx={{ p: 4, textAlign: 'center' }}>
+        <Typography color="error" gutterBottom>Benutzerdaten konnten nicht geladen werden.</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Bitte versuchen Sie es später erneut.
+        </Typography>
+      </Box>
+    );
+  }
+
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
--- a/frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx
+++ b/frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx
@@ -12,6 +12,7 @@ import {
 import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { atemschutzApi } from '../../services/atemschutz';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { AtemschutzStats } from '../../types/atemschutz.types';

 interface AtemschutzDashboardCardProps {
@@ -26,6 +27,9 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
    queryFn: () => atemschutzApi.getStats(),
  });

+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
  if (isLoading) {
    return (
      <Card>
@@ -72,7 +76,7 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({

        {/* Main metric */}
        <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
          einsatzbereit
--- a/frontend/src/components/chat/ChatPanel.tsx
+++ b/frontend/src/components/chat/ChatPanel.tsx
@@ -4,33 +4,81 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import ChatIcon from '@mui/icons-material/Chat';
 import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import Badge from '@mui/material/Badge';
+import Tooltip from '@mui/material/Tooltip';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import { useLayout } from '../../contexts/LayoutContext';
 import { ChatProvider, useChat } from '../../contexts/ChatContext';
 import ChatRoomList from './ChatRoomList';
 import ChatMessageView from './ChatMessageView';

+const TRANSITION = 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)';
+const COLLAPSED_WIDTH = 64;
+const EXPANDED_WIDTH = 360;
+
 const ChatPanelInner: React.FC = () => {
  const { chatPanelOpen, setChatPanelOpen } = useLayout();
-  const { selectedRoomToken, connected } = useChat();
+  const { rooms, selectedRoomToken, selectRoom, connected } = useChat();

  if (!chatPanelOpen) {
    return (
      <Paper
        elevation={2}
        sx={{
-          width: 60,
+          width: COLLAPSED_WIDTH,
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          pt: 1,
          flexShrink: 0,
-          transition: 'width 0.2s ease',
+          transition: TRANSITION,
+          overflowX: 'hidden',
+          overflowY: 'auto',
        }}
      >
-        <IconButton onClick={() => setChatPanelOpen(true)}>
+        <IconButton onClick={() => setChatPanelOpen(true)} aria-label="Chat öffnen">
          <ChatIcon />
        </IconButton>
+        {connected && (
+          <List disablePadding>
+            {rooms.map((room) => (
+              <ListItem key={room.token} disablePadding sx={{ justifyContent: 'center', py: 0.5 }}>
+                <Tooltip title={room.displayName} placement="left" arrow>
+                  <IconButton
+                    onClick={() => {
+                      setChatPanelOpen(true);
+                      selectRoom(room.token);
+                    }}
+                    sx={{ p: 0.5 }}
+                  >
+                    <Badge
+                      variant="dot"
+                      color="primary"
+                      invisible={room.unreadMessages === 0}
+                    >
+                      <Avatar
+                        sx={{
+                          width: 32,
+                          height: 32,
+                          fontSize: '0.75rem',
+                          bgcolor:
+                            room.token === selectedRoomToken
+                              ? 'primary.main'
+                              : 'action.hover',
+                        }}
+                      >
+                        {room.displayName.substring(0, 2).toUpperCase()}
+                      </Avatar>
+                    </Badge>
+                  </IconButton>
+                </Tooltip>
+              </ListItem>
+            ))}
+          </List>
+        )}
      </Paper>
    );
  }
@@ -39,12 +87,12 @@ const ChatPanelInner: React.FC = () => {
    <Paper
      elevation={2}
      sx={{
-        width: 360,
+        width: EXPANDED_WIDTH,
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        flexShrink: 0,
-        transition: 'width 0.2s ease',
+        transition: TRANSITION,
        overflow: 'hidden',
      }}
    >
@@ -62,7 +110,7 @@ const ChatPanelInner: React.FC = () => {
        <Typography variant="subtitle1" fontWeight={600}>
          Chat
        </Typography>
-        <IconButton size="small" onClick={() => setChatPanelOpen(false)}>
+        <IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
          <ChatIcon fontSize="small" />
        </IconButton>
      </Box>
--- a/frontend/src/components/chat/ChatRoomList.tsx
+++ b/frontend/src/components/chat/ChatRoomList.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
-import Typography from '@mui/material/Typography';
 import { useChat } from '../../contexts/ChatContext';

 const ChatRoomList: React.FC = () => {
@@ -12,34 +15,65 @@ const ChatRoomList: React.FC = () => {
  return (
    <Box sx={{ overflow: 'auto', flex: 1 }}>
      <List disablePadding>
-        {rooms.map((room) => (
-          <ListItemButton
-            key={room.token}
-            selected={room.token === selectedRoomToken}
-            onClick={() => selectRoom(room.token)}
-            sx={{ py: 1, px: 1.5 }}
-          >
-            <Box sx={{ flex: 1, minWidth: 0 }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Typography variant="subtitle2" noWrap sx={{ flex: 1 }}>
-                  {room.displayName}
-                </Typography>
-                {room.unreadMessages > 0 && (
+        {rooms.map((room) => {
+          const isSelected = room.token === selectedRoomToken;
+          return (
+            <ListItem key={room.token} disablePadding>
+              <ListItemButton
+                selected={isSelected}
+                onClick={() => selectRoom(room.token)}
+                sx={{
+                  py: 1,
+                  px: 1.5,
+                  '&.Mui-selected': {
+                    backgroundColor: 'primary.light',
+                    color: 'primary.contrastText',
+                    '&:hover': {
+                      backgroundColor: 'primary.main',
+                    },
+                    '& .MuiListItemIcon-root': {
+                      color: 'primary.contrastText',
+                    },
+                    '& .MuiListItemText-secondary': {
+                      color: 'primary.contrastText',
+                      opacity: 0.7,
+                    },
+                  },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 40 }}>
                  <Badge
                    badgeContent={room.unreadMessages}
                    color="primary"
-                    sx={{ ml: 1 }}
-                  />
-                )}
-              </Box>
-              {room.lastMessage && (
-                <Typography variant="caption" color="text.secondary" noWrap>
-                  {room.lastMessage.author}: {room.lastMessage.text}
-                </Typography>
-              )}
-            </Box>
-          </ListItemButton>
-        ))}
+                    invisible={room.unreadMessages === 0}
+                  >
+                    <Avatar
+                      sx={{
+                        width: 32,
+                        height: 32,
+                        fontSize: '0.75rem',
+                        bgcolor: isSelected ? 'primary.main' : 'action.hover',
+                        color: isSelected ? 'primary.contrastText' : 'text.primary',
+                      }}
+                    >
+                      {room.displayName.substring(0, 2).toUpperCase()}
+                    </Avatar>
+                  </Badge>
+                </ListItemIcon>
+                <ListItemText
+                  primary={room.displayName}
+                  primaryTypographyProps={{ noWrap: true, variant: 'subtitle2' }}
+                  secondary={
+                    room.lastMessage
+                      ? `${room.lastMessage.author}: ${room.lastMessage.text}`
+                      : undefined
+                  }
+                  secondaryTypographyProps={{ noWrap: true, variant: 'caption' }}
+                />
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
      </List>
    </Box>
  );
--- a/frontend/src/components/equipment/EquipmentDashboardCard.tsx
+++ b/frontend/src/components/equipment/EquipmentDashboardCard.tsx
@@ -12,6 +12,7 @@ import {
 import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { equipmentApi } from '../../services/equipment';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { EquipmentStats } from '../../types/equipment.types';

 interface EquipmentDashboardCardProps {
@@ -26,6 +27,9 @@ const EquipmentDashboardCard: React.FC<EquipmentDashboardCardProps> = ({
    queryFn: () => equipmentApi.getStats(),
  });

+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
  if (isLoading) {
    return (
      <Card>
@@ -72,7 +76,7 @@ const EquipmentDashboardCard: React.FC<EquipmentDashboardCardProps> = ({

        {/* Main metric */}
        <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
          einsatzbereit
--- a/frontend/src/components/shared/Header.tsx
+++ b/frontend/src/components/shared/Header.tsx
@@ -4,6 +4,7 @@ import {
  Toolbar,
  Typography,
  IconButton,
+  Button,
  Menu,
  MenuItem,
  Avatar,
@@ -94,9 +95,9 @@ function Header({ onMenuClick }: HeaderProps) {
    : [];

  const linkLabels: Record<string, string> = {
-    nextcloud: 'Nextcloud',
-    bookstack: 'BookStack',
-    vikunja: 'Vikunja',
+    nextcloud: 'Nextcloud Dateien',
+    bookstack: 'Wissensdatenbank',
+    vikunja: 'Aufgabenverwaltung',
  };

  return (
@@ -126,18 +127,18 @@ function Header({ onMenuClick }: HeaderProps) {
          <>
            {linkEntries.length > 0 && (
              <>
-                <Tooltip title="Externe Tools">
-                  <IconButton
+                <Button
+                    variant="text"
                    color="inherit"
                    onClick={handleToolsOpen}
                    size="small"
-                    aria-label="Externe Tools"
+                    startIcon={<Launch />}
+                    aria-label="Externe Links"
                    aria-controls="tools-menu"
                    aria-haspopup="true"
                  >
-                    <Launch />
-                  </IconButton>
-                </Tooltip>
+                    Externe Links
+                  </Button>

                <Menu
                  id="tools-menu"
--- a/frontend/src/components/shared/Sidebar.tsx
+++ b/frontend/src/components/shared/Sidebar.tsx
@@ -20,8 +20,7 @@ import {
  CalendarMonth,
  MenuBook,
  AdminPanelSettings,
-  ChevronLeft,
-  ChevronRight,
+  Menu as MenuIcon,
 } from '@mui/icons-material';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useLayout, DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED } from '../../contexts/LayoutContext';
@@ -104,6 +103,11 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
  const drawerContent = (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <Toolbar />
+      <Box sx={{ display: 'flex', justifyContent: sidebarCollapsed ? 'center' : 'flex-end', px: 1, py: 0.5 }}>
+        <IconButton onClick={toggleSidebar} aria-label="Sidebar umschalten">
+          <MenuIcon />
+        </IconButton>
+      </Box>
      <List sx={{ flex: 1 }}>
        {navigationItems.map((item) => {
          const isActive = location.pathname === item.path;
@@ -154,11 +158,6 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
          );
        })}
      </List>
-      <Box sx={{ display: 'flex', justifyContent: 'center', mb: 1 }}>
-        <IconButton onClick={toggleSidebar} aria-label="Sidebar umschalten">
-          {sidebarCollapsed ? <ChevronRight /> : <ChevronLeft />}
-        </IconButton>
-      </Box>
    </Box>
  );

--- a/frontend/src/components/vehicles/VehicleDashboardCard.tsx
+++ b/frontend/src/components/vehicles/VehicleDashboardCard.tsx
@@ -13,6 +13,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { vehiclesApi } from '../../services/vehicles';
 import { equipmentApi } from '../../services/equipment';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { VehicleStats, InspectionAlert } from '../../types/vehicle.types';
 import type { VehicleEquipmentWarning } from '../../types/equipment.types';

@@ -38,6 +39,9 @@ const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({
    queryFn: () => equipmentApi.getVehicleWarnings(),
  });

+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
  const loading = statsLoading || alertsLoading || warningsLoading;

  if (loading) {
@@ -89,7 +93,7 @@ const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({

        {/* Main metric */}
        <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
          einsatzbereit
--- a/frontend/src/contexts/ChatContext.tsx
+++ b/frontend/src/contexts/ChatContext.tsx
@@ -25,8 +25,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
  const { data } = useQuery({
    queryKey: ['nextcloud', 'rooms'],
    queryFn: () => nextcloudApi.getRooms(),
-    refetchInterval: chatPanelOpen ? 30000 : false,
-    enabled: chatPanelOpen,
+    refetchInterval: chatPanelOpen ? 30000 : 120000,
+    enabled: true,
  });

  const rooms = data?.rooms ?? [];
--- a/frontend/src/pages/Wissen.tsx
+++ b/frontend/src/pages/Wissen.tsx
@@ -11,12 +11,18 @@ import {
  CircularProgress,
  InputAdornment,
  Divider,
+  Chip,
+  IconButton,
+  Tooltip,
 } from '@mui/material';
-import { Search as SearchIcon } from '@mui/icons-material';
+import { Search as SearchIcon, OpenInNew } from '@mui/icons-material';
 import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
+import { formatDistanceToNow } from 'date-fns';
+import { de } from 'date-fns/locale';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import { bookstackApi } from '../services/bookstack';
+import { safeOpenUrl } from '../utils/safeOpenUrl';
 import type { BookStackPage, BookStackSearchResult } from '../types/bookstack.types';

 export default function Wissen() {
@@ -103,6 +109,21 @@ export default function Wissen() {
            />
          </Box>
          <Divider />
+          <Box sx={{ px: 2, pt: 1.5, pb: 0.5, display: 'flex', alignItems: 'center', gap: 1 }}>
+            {isSearching ? (
+              <>
+                <Typography variant="subtitle2" color="text.secondary">
+                  Suchergebnisse für &quot;{debouncedSearch}&quot;
+                </Typography>
+                <Chip label={listItems.length} size="small" />
+              </>
+            ) : (
+              <Typography variant="subtitle2" color="text.secondary">
+                Zuletzt geänderte Seiten
+              </Typography>
+            )}
+          </Box>
+          <Divider />
          <Box sx={{ flex: 1, overflow: 'auto' }}>
            {listLoading ? (
              <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
@@ -114,25 +135,32 @@ export default function Wissen() {
              </Typography>
            ) : (
              <List disablePadding>
-                {listItems.map((item) => (
-                  <ListItem key={item.id} disablePadding>
-                    <ListItemButton
-                      selected={selectedPageId === item.id}
-                      onClick={() => handleSelectPage(item.id)}
-                    >
-                      <ListItemText
-                        primary={item.name}
-                        secondary={
-                          'book' in item && item.book
-                            ? item.book.name
-                            : undefined
-                        }
-                        primaryTypographyProps={{ noWrap: true }}
-                        secondaryTypographyProps={{ noWrap: true }}
-                      />
-                    </ListItemButton>
-                  </ListItem>
-                ))}
+                {listItems.map((item) => {
+                  const isRecentPage = 'updated_at' in item && !isSearching;
+                  const bookName = 'book' in item && item.book ? item.book.name : undefined;
+                  const secondaryParts: string[] = [];
+                  if (bookName) secondaryParts.push(bookName);
+                  if (isRecentPage && (item as BookStackPage).updated_at) {
+                    secondaryParts.push(
+                      `Geändert ${formatDistanceToNow(new Date((item as BookStackPage).updated_at), { addSuffix: true, locale: de })}`
+                    );
+                  }
+                  return (
+                    <ListItem key={item.id} disablePadding>
+                      <ListItemButton
+                        selected={selectedPageId === item.id}
+                        onClick={() => handleSelectPage(item.id)}
+                      >
+                        <ListItemText
+                          primary={item.name}
+                          secondary={secondaryParts.length > 0 ? secondaryParts.join(' · ') : undefined}
+                          primaryTypographyProps={{ noWrap: true }}
+                          secondaryTypographyProps={{ noWrap: true }}
+                        />
+                      </ListItemButton>
+                    </ListItem>
+                  );
+                })}
              </List>
            )}
          </Box>
@@ -154,9 +182,21 @@ export default function Wissen() {
            </Typography>
          ) : pageQuery.data?.data ? (
            <Box>
-              <Typography variant="h5" gutterBottom>
-                {pageQuery.data.data.name}
-              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
+                <Typography variant="h5" gutterBottom sx={{ flex: 1 }}>
+                  {pageQuery.data.data.name}
+                </Typography>
+                {pageQuery.data.data.url && (
+                  <Tooltip title="In BookStack öffnen">
+                    <IconButton
+                      size="small"
+                      onClick={() => safeOpenUrl(pageQuery.data!.data!.url)}
+                    >
+                      <OpenInNew fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </Box>
              {pageQuery.data.data.book && (
                <Typography variant="body2" color="text.secondary" gutterBottom>
                  Buch: {pageQuery.data.data.book.name}