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(
`SELECT b.*,
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.items_count, 0) AS items_count
FROM bestellungen b
@@ -145,7 +145,7 @@ async function getOrderById(id: number) {
const orderResult = await pool.query(
`SELECT b.*,
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
LEFT JOIN lieferanten l ON l.id = b.lieferant_id
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 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 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 {
@@ -579,7 +579,7 @@ async function logAction(bestellungId: number, aktion: string, details: string,
async function getHistory(bestellungId: number) {
try {
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
LEFT JOIN users u ON u.id = h.erstellt_von
WHERE h.bestellung_id = $1

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

@@ -525,7 +525,7 @@ class EquipmentService {
async getStatusHistory(equipmentId: string) {
try {
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
LEFT JOIN users u ON u.id = h.geaendert_von
WHERE h.ausruestung_id = $1

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

@@ -653,7 +653,7 @@ class VehicleService {
async getStatusHistory(fahrzeugId: string) {
try {
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
LEFT JOIN users u ON u.id = h.geaendert_von
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 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>
);
};

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 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)}

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

@@ -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' }}>

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

@@ -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] : []),

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_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;
};