rework issue system

frontend/src/components/chat/ChatPanel.tsx

@@ -4,6 +4,7 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import ChatIcon from '@mui/icons-material/Chat';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import AddIcon from '@mui/icons-material/Add';
 import Typography from '@mui/material/Typography';
 import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
@@ -11,7 +12,7 @@ import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
-import { useLayout } from '../../contexts/LayoutContext';
+import { useLayout, CHAT_PANEL_MIN_WIDTH, CHAT_PANEL_MAX_WIDTH } from '../../contexts/LayoutContext';
 import { ChatProvider, useChat } from '../../contexts/ChatContext';
 import { Link } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -21,16 +22,18 @@ import { nextcloudApi } from '../../services/nextcloud';
 import { safeOpenUrl } from '../../utils/safeOpenUrl';
 import ChatRoomList from './ChatRoomList';
 import ChatMessageView from './ChatMessageView';
+import NewChatDialog from './NewChatDialog';
 
 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 { chatPanelOpen, setChatPanelOpen, chatPanelWidth, setChatPanelWidth } = useLayout();
   const { rooms, selectedRoomToken, selectRoom, connected } = useChat();
   const queryClient = useQueryClient();
   const markedRoomsRef = React.useRef(new Set<string>());
+  const [newChatOpen, setNewChatOpen] = React.useState(false);
+  const isDraggingRef = React.useRef(false);
   const { data: externalLinks } = useQuery({
     queryKey: ['external-links'],
     queryFn: () => configApi.getExternalLinks(),
@@ -71,67 +74,120 @@ const ChatPanelInner: React.FC = () => {
     }).catch(() => {});
   }, [selectedRoomToken, queryClient]);
 
+  const handleDragStart = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDraggingRef.current = true;
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'ew-resize';
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!isDraggingRef.current) return;
+      const newWidth = window.innerWidth - ev.clientX;
+      const clamped = Math.min(Math.max(newWidth, CHAT_PANEL_MIN_WIDTH), CHAT_PANEL_MAX_WIDTH);
+      setChatPanelWidth(clamped);
+    };
+
+    const onMouseUp = () => {
+      isDraggingRef.current = false;
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, [setChatPanelWidth]);
+
   if (!chatPanelOpen) {
     return (
-      <Paper
-        elevation={2}
-        sx={{
-          width: COLLAPSED_WIDTH,
-          height: '100vh',
-          position: 'sticky',
-          top: 0,
-          display: { xs: 'none', sm: 'flex' },
-          flexDirection: 'column',
-          alignItems: 'center',
-          pt: 1,
-          flexShrink: 0,
-          transition: TRANSITION,
-          overflowX: 'hidden',
-          overflowY: 'auto',
-        }}
-      >
-        <Toolbar />
-        <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}
+      <>
+        <Paper
+          elevation={2}
+          sx={{
+            width: COLLAPSED_WIDTH,
+            height: '100vh',
+            position: 'sticky',
+            top: 0,
+            display: { xs: 'none', sm: 'flex' },
+            flexDirection: 'column',
+            alignItems: 'center',
+            pt: 1,
+            flexShrink: 0,
+            transition: TRANSITION,
+            overflowX: 'hidden',
+            overflowY: 'auto',
+          }}
+        >
+          <Toolbar />
+          <IconButton onClick={() => setChatPanelOpen(true)} aria-label="Chat öffnen">
+            <ChatIcon />
+          </IconButton>
+          {connected && (
+            <List disablePadding sx={{ flex: 1 }}>
+              {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 }}
                     >
-                      <Avatar
-                        sx={{
-                          width: 32,
-                          height: 32,
-                          fontSize: '0.75rem',
-                          bgcolor:
-                            room.token === selectedRoomToken
-                              ? 'primary.main'
-                              : 'action.hover',
-                        }}
+                      <Badge
+                        variant="dot"
+                        color="primary"
+                        invisible={room.unreadMessages === 0}
                       >
-                        {room.displayName.substring(0, 2).toUpperCase()}
-                      </Avatar>
-                    </Badge>
-                  </IconButton>
-                </Tooltip>
-              </ListItem>
-            ))}
-          </List>
+                        <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>
+          )}
+          {connected && (
+            <Tooltip title="Neues Gespräch" placement="left" arrow>
+              <IconButton
+                size="small"
+                onClick={() => {
+                  setChatPanelOpen(true);
+                  setNewChatOpen(true);
+                }}
+                sx={{ mb: 1 }}
+                aria-label="Neues Gespräch"
+              >
+                <AddIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Paper>
+        {newChatOpen && (
+          <NewChatDialog
+            open={newChatOpen}
+            onClose={() => setNewChatOpen(false)}
+            onRoomCreated={(token) => {
+              queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
+              selectRoom(token);
+              setNewChatOpen(false);
+            }}
+          />
         )}
-      </Paper>
+      </>
     );
   }
 
@@ -139,7 +195,7 @@ const ChatPanelInner: React.FC = () => {
     <Paper
       elevation={2}
       sx={{
-        width: { xs: '100vw', sm: EXPANDED_WIDTH },
+        width: { xs: '100vw', sm: chatPanelWidth },
         position: { xs: 'fixed', sm: 'sticky' },
         top: { xs: 0, sm: 0 },
         right: { xs: 0, sm: 'auto' },
@@ -147,124 +203,139 @@ const ChatPanelInner: React.FC = () => {
         zIndex: { xs: (theme) => theme.zIndex.drawer + 2, sm: 'auto' },
         height: { xs: '100vh', sm: '100vh' },
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
         flexShrink: 0,
-        transition: TRANSITION,
         overflow: 'hidden',
       }}
     >
-      <Toolbar />
+      {/* Drag handle on left edge */}
       <Box
+        onMouseDown={handleDragStart}
         sx={{
-          px: 1.5,
-          py: 1,
-          borderBottom: 1,
-          borderColor: 'divider',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
+          display: { xs: 'none', sm: 'block' },
+          width: 4,
+          flexShrink: 0,
+          cursor: 'ew-resize',
+          bgcolor: 'transparent',
+          '&:hover': { bgcolor: 'primary.main', opacity: 0.4 },
+          transition: 'background-color 150ms',
+          alignSelf: 'stretch',
         }}
-      >
-        <Typography variant="subtitle1" fontWeight={600}>
-          Chat
-        </Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          {nextcloudUrl && (
-            <Tooltip title="In Nextcloud öffnen" placement="bottom">
-              <IconButton size="small" onClick={() => safeOpenUrl(`${nextcloudUrl}/apps/spreed`)} aria-label="In Nextcloud öffnen">
-                <OpenInNewIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          )}
-          <IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
-            <ChatIcon fontSize="small" />
-          </IconButton>
-        </Box>
-      </Box>
-
-      {!connected ? (
-        <Box sx={{ p: 2 }}>
-          <Typography variant="body2" color="text.secondary">
-            Nextcloud nicht verbunden. Bitte verbinden Sie sich in den <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
+      />
+      <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        <Toolbar />
+        <Box
+          sx={{
+            px: 1.5,
+            py: 1,
+            borderBottom: 1,
+            borderColor: 'divider',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Typography variant="subtitle1" fontWeight={600}>
+            Chat
           </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            {nextcloudUrl && (
+              <Tooltip title="In Nextcloud öffnen" placement="bottom">
+                <IconButton size="small" onClick={() => safeOpenUrl(`${nextcloudUrl}/apps/spreed`)} aria-label="In Nextcloud öffnen">
+                  <OpenInNewIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            )}
+            <IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
+              <ChatIcon fontSize="small" />
+            </IconButton>
+          </Box>
         </Box>
-      ) : selectedRoomToken ? (
-        <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
-          {/* Compact room sidebar — hidden on mobile */}
-          <Box
-            sx={{
-              display: { xs: 'none', sm: 'flex' },
-              flexDirection: 'column',
-              width: 120,
-              flexShrink: 0,
-              borderRight: 1,
-              borderColor: 'divider',
-              overflow: 'auto',
-              py: 0.5,
-            }}
-          >
-            {rooms.map((room) => {
-              const isSelected = room.token === selectedRoomToken;
-              return (
-                <Tooltip key={room.token} title={room.displayName} placement="left" arrow>
-                  <Box
-                    onClick={() => selectRoom(room.token)}
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 0.75,
-                      px: 1,
-                      py: 0.5,
-                      cursor: 'pointer',
-                      borderRadius: 1,
-                      mx: 0.5,
-                      bgcolor: isSelected ? 'action.selected' : 'transparent',
-                      '&:hover': {
-                        bgcolor: isSelected ? 'action.selected' : 'action.hover',
-                      },
-                    }}
-                  >
-                    <Badge
-                      variant="dot"
-                      color="primary"
-                      invisible={room.unreadMessages === 0}
-                    >
-                      <Avatar
-                        sx={{
-                          width: 28,
-                          height: 28,
-                          fontSize: '0.65rem',
-                          bgcolor: isSelected ? 'primary.main' : 'action.hover',
-                          color: isSelected ? 'primary.contrastText' : 'text.primary',
-                          flexShrink: 0,
-                        }}
-                      >
-                        {room.displayName.substring(0, 2).toUpperCase()}
-                      </Avatar>
-                    </Badge>
-                    <Typography
-                      variant="caption"
-                      noWrap
+
+        {!connected ? (
+          <Box sx={{ p: 2 }}>
+            <Typography variant="body2" color="text.secondary">
+              Nextcloud nicht verbunden. Bitte verbinden Sie sich in den <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
+            </Typography>
+          </Box>
+        ) : selectedRoomToken ? (
+          <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
+            {/* Compact room sidebar — hidden on mobile */}
+            <Box
+              sx={{
+                display: { xs: 'none', sm: 'flex' },
+                flexDirection: 'column',
+                width: 120,
+                flexShrink: 0,
+                borderRight: 1,
+                borderColor: 'divider',
+                overflow: 'auto',
+                py: 0.5,
+              }}
+            >
+              {rooms.map((room) => {
+                const isSelected = room.token === selectedRoomToken;
+                return (
+                  <Tooltip key={room.token} title={room.displayName} placement="left" arrow>
+                    <Box
+                      onClick={() => selectRoom(room.token)}
                       sx={{
-                        flex: 1,
-                        minWidth: 0,
-                        fontWeight: isSelected ? 600 : 400,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 0.75,
+                        px: 1,
+                        py: 0.5,
+                        cursor: 'pointer',
+                        borderRadius: 1,
+                        mx: 0.5,
+                        bgcolor: isSelected ? 'action.selected' : 'transparent',
+                        '&:hover': {
+                          bgcolor: isSelected ? 'action.selected' : 'action.hover',
+                        },
                       }}
                     >
-                      {room.displayName}
-                    </Typography>
-                  </Box>
-                </Tooltip>
-              );
-            })}
+                      <Badge
+                        variant="dot"
+                        color="primary"
+                        invisible={room.unreadMessages === 0}
+                      >
+                        <Avatar
+                          sx={{
+                            width: 28,
+                            height: 28,
+                            fontSize: '0.65rem',
+                            bgcolor: isSelected ? 'primary.main' : 'action.hover',
+                            color: isSelected ? 'primary.contrastText' : 'text.primary',
+                            flexShrink: 0,
+                          }}
+                        >
+                          {room.displayName.substring(0, 2).toUpperCase()}
+                        </Avatar>
+                      </Badge>
+                      <Typography
+                        variant="caption"
+                        noWrap
+                        sx={{
+                          flex: 1,
+                          minWidth: 0,
+                          fontWeight: isSelected ? 600 : 400,
+                        }}
+                      >
+                        {room.displayName}
+                      </Typography>
+                    </Box>
+                  </Tooltip>
+                );
+              })}
+            </Box>
+            <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+              <ChatMessageView />
+            </Box>
           </Box>
-          <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
-            <ChatMessageView />
-          </Box>
-        </Box>
-      ) : (
-        <ChatRoomList />
-      )}
+        ) : (
+          <ChatRoomList />
+        )}
+      </Box>
     </Paper>
   );
 };

frontend/src/components/chat/ChatRoomList.tsx

@@ -8,8 +8,7 @@ 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 Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
+import Fab from '@mui/material/Fab';
 import AddIcon from '@mui/icons-material/Add';
 import { useQueryClient } from '@tanstack/react-query';
 import { useChat } from '../../contexts/ChatContext';
@@ -21,16 +20,11 @@ const ChatRoomList: React.FC = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   return (
-    <Box sx={{ overflow: 'auto', flex: 1 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', px: 1.5, py: 0.75, borderBottom: 1, borderColor: 'divider' }}>
-        <Typography variant="caption" sx={{ flex: 1, fontWeight: 600, opacity: 0.6, letterSpacing: '0.05em' }}>
-          GESPR\u00C4CHE
+    <Box sx={{ overflow: 'auto', flex: 1, position: 'relative' }}>
+      <Box sx={{ px: 1.5, py: 0.75, borderBottom: 1, borderColor: 'divider' }}>
+        <Typography variant="caption" sx={{ fontWeight: 600, opacity: 0.6, letterSpacing: '0.05em' }}>
+          GESPRÄCHE
         </Typography>
-        <Tooltip title="Neues Gespr\u00E4ch">
-          <IconButton size="small" onClick={() => setDialogOpen(true)}>
-            <AddIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
       </Box>
       <List disablePadding>
         {rooms.map((room) => {
@@ -93,6 +87,18 @@ const ChatRoomList: React.FC = () => {
           );
         })}
       </List>
+      {/* Sticky FAB at bottom-right */}
+      <Box sx={{ position: 'sticky', bottom: 16, display: 'flex', justifyContent: 'flex-end', pr: 2, mt: 1, pointerEvents: 'none' }}>
+        <Fab
+          size="small"
+          color="primary"
+          aria-label="Neues Gespräch"
+          onClick={() => setDialogOpen(true)}
+          sx={{ pointerEvents: 'auto' }}
+        >
+          <AddIcon />
+        </Fab>
+      </Box>
       <NewChatDialog
         open={dialogOpen}
         onClose={() => setDialogOpen(false)}

frontend/src/components/dashboard/DashboardLayout.tsx

@@ -14,7 +14,7 @@ interface DashboardLayoutProps {
 function DashboardLayoutInner({ children }: DashboardLayoutProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
   const { isLoading } = useAuth();
-  const { sidebarCollapsed, chatPanelOpen } = useLayout();
+  const { sidebarCollapsed, chatPanelOpen, chatPanelWidth } = useLayout();
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
@@ -25,7 +25,7 @@ function DashboardLayoutInner({ children }: DashboardLayoutProps) {
   }
 
   const sidebarWidth = sidebarCollapsed ? DRAWER_WIDTH_COLLAPSED : DRAWER_WIDTH;
-  const chatWidth = chatPanelOpen ? 360 : 64;
+  const chatWidth = chatPanelOpen ? chatPanelWidth : 64;
 
   return (
     <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>

frontend/src/components/shared/ChatAwareFab.tsx

@@ -18,7 +18,7 @@ interface ChatAwareFabProps {
  */
 const ChatAwareFab = React.forwardRef<HTMLButtonElement, ChatAwareFabProps>(
   ({ onClick, children, color = 'primary', size, 'aria-label': ariaLabel, sx }, ref) => {
-    const { chatPanelOpen } = useLayout();
+    const { chatPanelOpen, chatPanelWidth } = useLayout();
     return (
       <Fab
         ref={ref}
@@ -30,7 +30,7 @@ const ChatAwareFab = React.forwardRef<HTMLButtonElement, ChatAwareFabProps>(
           {
             position: 'fixed',
             bottom: 32,
-            right: chatPanelOpen ? 376 : 80,
+            right: chatPanelOpen ? chatPanelWidth + 16 : 80,
             transition: 'right 225ms cubic-bezier(0.4, 0, 0.6, 1)',
           },
           ...(Array.isArray(sx) ? sx : sx ? [sx] : []),

frontend/src/contexts/LayoutContext.tsx

@@ -2,13 +2,17 @@ import React, { createContext, useContext, useState, useCallback, ReactNode } fr
 
 export const DRAWER_WIDTH = 240;
 export const DRAWER_WIDTH_COLLAPSED = 64;
+export const CHAT_PANEL_MIN_WIDTH = 360;
+export const CHAT_PANEL_MAX_WIDTH = 720;
 
 interface LayoutContextType {
   sidebarCollapsed: boolean;
   chatPanelOpen: boolean;
+  chatPanelWidth: number;
   toggleSidebar: () => void;
   toggleChatPanel: () => void;
   setChatPanelOpen: (open: boolean) => void;
+  setChatPanelWidth: (width: number) => void;
 }
 
 const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
@@ -22,6 +26,21 @@ function getInitialCollapsed(): boolean {
   }
 }
 
+function getInitialChatPanelWidth(): number {
+  try {
+    const stored = localStorage.getItem('chat-panel-width');
+    if (stored) {
+      const parsed = parseInt(stored, 10);
+      if (!isNaN(parsed)) {
+        return Math.min(Math.max(parsed, CHAT_PANEL_MIN_WIDTH), CHAT_PANEL_MAX_WIDTH);
+      }
+    }
+  } catch {
+    // ignore storage errors
+  }
+  return CHAT_PANEL_MIN_WIDTH;
+}
+
 interface LayoutProviderProps {
   children: ReactNode;
 }
@@ -29,6 +48,7 @@ interface LayoutProviderProps {
 export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(getInitialCollapsed);
   const [chatPanelOpen, setChatPanelOpenState] = useState(false);
+  const [chatPanelWidth, setChatPanelWidthState] = useState(getInitialChatPanelWidth);
 
   const toggleSidebar = useCallback(() => {
     setSidebarCollapsed((prev) => {
@@ -50,12 +70,24 @@ export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
     setChatPanelOpenState(open);
   }, []);
 
+  const setChatPanelWidth = useCallback((width: number) => {
+    const clamped = Math.min(Math.max(width, CHAT_PANEL_MIN_WIDTH), CHAT_PANEL_MAX_WIDTH);
+    setChatPanelWidthState(clamped);
+    try {
+      localStorage.setItem('chat-panel-width', String(clamped));
+    } catch {
+      // ignore storage errors
+    }
+  }, []);
+
   const value: LayoutContextType = {
     sidebarCollapsed,
     chatPanelOpen,
+    chatPanelWidth,
     toggleSidebar,
     toggleChatPanel,
     setChatPanelOpen,
+    setChatPanelWidth,
   };
 
   return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
@@ -68,3 +100,4 @@ export const useLayout = (): LayoutContextType => {
   }
   return context;
 };
+