matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework issue system

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-24 15:30:24 +01:00
parent 65994286b2
commit d8d2730547
9 changed files with 316 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
backend/src/database/migrations/055_fix_wissen_bestellungen_permissions.sql Normal file
View File

@@ -0,0 +1,20 @@
-- Migration 055: Ensure wissen:view and bestellungen:view are seeded for all dashboard groups
-- Re-seeds permissions that may be missing due to migration ordering or cascade deletes.
-- Uses ON CONFLICT DO NOTHING — safe to run multiple times.
DO $$
DECLARE
grp TEXT;
BEGIN
FOR grp IN
SELECT DISTINCT authentik_group FROM group_permissions WHERE authentik_group LIKE 'dashboard_%'
LOOP
INSERT INTO group_permissions (authentik_group, permission_id)
VALUES (grp, 'wissen:view'), (grp, 'wissen:widget_recent'), (grp, 'wissen:widget_search')
ON CONFLICT DO NOTHING;
INSERT INTO group_permissions (authentik_group, permission_id)
VALUES (grp, 'bestellungen:view')
ON CONFLICT DO NOTHING;
END LOOP;
END $$;

8
backend/src/services/bestellung.service.ts
View File

@@ -117,7 +117,7 @@ async function getOrders(filters?: { status?: string; lieferant_id?: number; bes
const result = await pool.query( const result = await pool.query(
`SELECT b.*, `SELECT b.*,
l.name AS lieferant_name, l.name AS lieferant_name,
u.display_name AS besteller_name, COALESCE(u.name, u.preferred_username, u.email) AS besteller_name,
COALESCE(pos.total_cost, 0) AS total_cost, COALESCE(pos.total_cost, 0) AS total_cost,
COALESCE(pos.items_count, 0) AS items_count COALESCE(pos.items_count, 0) AS items_count
FROM bestellungen b FROM bestellungen b
@@ -145,7 +145,7 @@ async function getOrderById(id: number) {
const orderResult = await pool.query( const orderResult = await pool.query(
`SELECT b.*, `SELECT b.*,
l.name AS lieferant_name, l.name AS lieferant_name,
u.display_name AS besteller_name COALESCE(u.name, u.preferred_username, u.email) AS besteller_name
FROM bestellungen b FROM bestellungen b
LEFT JOIN lieferanten l ON l.id = b.lieferant_id LEFT JOIN lieferanten l ON l.id = b.lieferant_id
LEFT JOIN users u ON u.id = b.erstellt_von LEFT JOIN users u ON u.id = b.erstellt_von
@@ -158,7 +158,7 @@ async function getOrderById(id: number) {
pool.query(`SELECT * FROM bestellpositionen WHERE bestellung_id = $1 ORDER BY id`, [id]), pool.query(`SELECT * FROM bestellpositionen WHERE bestellung_id = $1 ORDER BY id`, [id]),
pool.query(`SELECT * FROM bestellung_dateien WHERE bestellung_id = $1 ORDER BY hochgeladen_am DESC`, [id]), pool.query(`SELECT * FROM bestellung_dateien WHERE bestellung_id = $1 ORDER BY hochgeladen_am DESC`, [id]),
pool.query(`SELECT * FROM bestellung_erinnerungen WHERE bestellung_id = $1 ORDER BY faellig_am`, [id]), pool.query(`SELECT * FROM bestellung_erinnerungen WHERE bestellung_id = $1 ORDER BY faellig_am`, [id]),
pool.query(`SELECT h.*, u.display_name AS benutzer_name FROM bestellung_historie h LEFT JOIN users u ON u.id = h.erstellt_von WHERE h.bestellung_id = $1 ORDER BY h.erstellt_am DESC`, [id]), pool.query(`SELECT h.*, COALESCE(u.name, u.preferred_username, u.email) AS benutzer_name FROM bestellung_historie h LEFT JOIN users u ON u.id = h.erstellt_von WHERE h.bestellung_id = $1 ORDER BY h.erstellt_am DESC`, [id]),
]); ]);
return { return {
@@ -579,7 +579,7 @@ async function logAction(bestellungId: number, aktion: string, details: string,
async function getHistory(bestellungId: number) { async function getHistory(bestellungId: number) {
try { try {
const result = await pool.query( const result = await pool.query(
`SELECT h.*, u.display_name AS benutzer_name `SELECT h.*, COALESCE(u.name, u.preferred_username, u.email) AS benutzer_name
FROM bestellung_historie h FROM bestellung_historie h
LEFT JOIN users u ON u.id = h.erstellt_von LEFT JOIN users u ON u.id = h.erstellt_von
WHERE h.bestellung_id = $1 WHERE h.bestellung_id = $1

2
backend/src/services/equipment.service.ts
View File

@@ -525,7 +525,7 @@ class EquipmentService {
async getStatusHistory(equipmentId: string) { async getStatusHistory(equipmentId: string) {
try { try {
const result = await pool.query( const result = await pool.query(
`SELECT h.*, u.display_name AS geaendert_von_name `SELECT h.*, COALESCE(u.name, u.preferred_username, u.email) AS geaendert_von_name
FROM ausruestung_status_historie h FROM ausruestung_status_historie h
LEFT JOIN users u ON u.id = h.geaendert_von LEFT JOIN users u ON u.id = h.geaendert_von
WHERE h.ausruestung_id = $1 WHERE h.ausruestung_id = $1

2
backend/src/services/vehicle.service.ts
View File

@@ -653,7 +653,7 @@ class VehicleService {
async getStatusHistory(fahrzeugId: string) { async getStatusHistory(fahrzeugId: string) {
try { try {
const result = await pool.query( const result = await pool.query(
`SELECT h.*, u.display_name AS geaendert_von_name `SELECT h.*, COALESCE(u.name, u.preferred_username, u.email) AS geaendert_von_name
FROM fahrzeug_status_historie h FROM fahrzeug_status_historie h
LEFT JOIN users u ON u.id = h.geaendert_von LEFT JOIN users u ON u.id = h.geaendert_von
WHERE h.fahrzeug_id = $1 WHERE h.fahrzeug_id = $1

401
frontend/src/components/chat/ChatPanel.tsx
View File

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

28
frontend/src/components/chat/ChatRoomList.tsx
View File

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

4
frontend/src/components/dashboard/DashboardLayout.tsx
View File

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

4
frontend/src/components/shared/ChatAwareFab.tsx
View File

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

33
frontend/src/contexts/LayoutContext.tsx
View File

@@ -2,13 +2,17 @@ import React, { createContext, useContext, useState, useCallback, ReactNode } fr
export const DRAWER_WIDTH = 240; export const DRAWER_WIDTH = 240;
export const DRAWER_WIDTH_COLLAPSED = 64; export const DRAWER_WIDTH_COLLAPSED = 64;
export const CHAT_PANEL_MIN_WIDTH = 360;
export const CHAT_PANEL_MAX_WIDTH = 720;
interface LayoutContextType { interface LayoutContextType {
sidebarCollapsed: boolean; sidebarCollapsed: boolean;
chatPanelOpen: boolean; chatPanelOpen: boolean;
chatPanelWidth: number;
toggleSidebar: () => void; toggleSidebar: () => void;
toggleChatPanel: () => void; toggleChatPanel: () => void;
setChatPanelOpen: (open: boolean) => void; setChatPanelOpen: (open: boolean) => void;
setChatPanelWidth: (width: number) => void;
} }
const LayoutContext = createContext<LayoutContextType | undefined>(undefined); 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 { interface LayoutProviderProps {
children: ReactNode; children: ReactNode;
} }
@@ -29,6 +48,7 @@ interface LayoutProviderProps {
export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => { export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
const [sidebarCollapsed, setSidebarCollapsed] = useState(getInitialCollapsed); const [sidebarCollapsed, setSidebarCollapsed] = useState(getInitialCollapsed);
const [chatPanelOpen, setChatPanelOpenState] = useState(false); const [chatPanelOpen, setChatPanelOpenState] = useState(false);
const [chatPanelWidth, setChatPanelWidthState] = useState(getInitialChatPanelWidth);
const toggleSidebar = useCallback(() => { const toggleSidebar = useCallback(() => {
setSidebarCollapsed((prev) => { setSidebarCollapsed((prev) => {
@@ -50,12 +70,24 @@ export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
setChatPanelOpenState(open); 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 = { const value: LayoutContextType = {
sidebarCollapsed, sidebarCollapsed,
chatPanelOpen, chatPanelOpen,
chatPanelWidth,
toggleSidebar, toggleSidebar,
toggleChatPanel, toggleChatPanel,
setChatPanelOpen, setChatPanelOpen,
setChatPanelWidth,
}; };
return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>; return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
@@ -68,3 +100,4 @@ export const useLayout = (): LayoutContextType => {
} }
return context; return context;
}; };