rework issue system
This commit is contained in:
Matthias Hochmeister
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user