import { useMemo, useState, useEffect, useCallback } from 'react'
import {
Button, IconButton, Tooltip, Divider, List, ListItemButton, ListItem,
Switch, Box, useMediaQuery,
} from '@mui/material'
import {
Power, PowerOff, DeleteForever, Edit, ModeComment, AddBox,
CheckBox, CheckBoxOutlineBlank,
ChevronRight, ExpandMore,
} from '@mui/icons-material'
import {
DndContext, closestCenter, PointerSensor, useSensor, useSensors,
DragEndEvent,
} from '@dnd-kit/core'
import {
SortableContext, verticalListSortingStrategy, useSortable, arrayMove,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import P3xrAccordion from '../../components/P3xrAccordion'
import P3xrButton from '../../components/P3xrButton'
import ConnectionDialog from '../../dialogs/ConnectionDialog'
import AiSettingsDialog from '../../dialogs/AiSettingsDialog'
import TreeSettingsDialog from '../../dialogs/TreeSettingsDialog'
import { useI18nStore } from '../../stores/i18n.store'
import { useRedisStateStore } from '../../stores/redis-state.store'
import { useSettingsStore } from '../../stores/settings.store'
import { useCommonStore } from '../../stores/common.store'
import { useOverlayStore } from '../../stores/overlay.store'
import { useMainCommandStore } from '../../stores/main-command.store'
import { request, onSocketEvent } from '../../stores/socket.service'
import { getPersistentItem, setPersistentItem } from '../../stores/electron-bridge'
// --- Sortable connection row (whole row is draggable) ---
function SortableConnectionItem({ conn, isLast, children }: {
conn: any, isLast: boolean, children: React.ReactNode
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: conn.id })
return (
<>
<Box
ref={setNodeRef}
{...attributes}
{...listeners}
sx={{
display: 'flex', alignItems: 'center', gap: 0.5,
px: 1, pl: 2, py: 1, minHeight: 56, boxSizing: 'border-box',
cursor: 'grab',
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.4 : 1,
bgcolor: isDragging ? 'action.hover' : undefined,
borderRadius: isDragging ? '4px' : undefined,
}}
>
{children}
</Box>
{!isLast && !isDragging && <Divider />}
</>
)
}
// --- Sortable group block (group header is drag handle, whole block moves) ---
function SortableGroupBlock({ group, children }: {
group: { name: string; connections: any[] }, children: React.ReactNode
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: `group-${group.name}` })
return (
<Box
ref={setNodeRef}
{...attributes}
sx={{
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.4 : 1,
bgcolor: isDragging ? 'action.hover' : undefined,
borderRadius: isDragging ? '4px' : undefined,
}}
>
{/* Group header is the drag handle */}
<Box {...listeners} sx={{ cursor: 'grab' }}>
{children}
</Box>
</Box>
)
}
export default function SettingsPage() {
const strings = useI18nStore(s => s.strings)
const connection = useRedisStateStore(s => s.connection)
const connections = useRedisStateStore(s => s.connections)
const cfg = useRedisStateStore(s => s.cfg)
const redisConnections = useRedisStateStore(s => s.redisConnections)
const settings = useSettingsStore()
const { toast, confirm, generalHandleError } = useCommonStore()
const { disconnect } = useMainCommandStore()
const isXs = useMediaQuery('(max-width: 599px)')
const connectionsList = connections?.list ?? []
const readonlyConnections = cfg?.readonlyConnections === true
const currentConnectionId = connection?.id
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
)
// Group mode
const [groupModeEnabled, setGroupModeEnabled] = useState(() => {
return getPersistentItem('p3xr-connection-group-mode') === 'true'
})
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => {
try {
const stored = getPersistentItem('p3xr-collapsed-connection-groups')
return stored ? new Set(JSON.parse(stored)) : new Set()
} catch { return new Set() }
})
// Force re-render on socket events
const [, setTick] = useState(0)
useEffect(() => {
const unsubs = [
onSocketEvent('connections', () => setTick(t => t + 1)),
onSocketEvent('configuration', () => setTick(t => t + 1)),
onSocketEvent('redis-status', () => setTick(t => t + 1)),
]
return () => unsubs.forEach(fn => fn())
}, [])
const toggleGroupMode = () => {
const next = !groupModeEnabled
setGroupModeEnabled(next)
setPersistentItem('p3xr-connection-group-mode', String(next))
}
const toggleGroup = (name: string) => {
setCollapsedGroups(prev => {
const next = new Set(prev)
next.has(name) ? next.delete(name) : next.add(name)
setPersistentItem('p3xr-collapsed-connection-groups', JSON.stringify([...next]))
return next
})
}
// Grouped connections
const groupedConnections = useMemo(() => {
const groups = new Map<string, any[]>()
for (const conn of connectionsList) {
const name = conn.group?.trim() || ''
if (!groups.has(name)) groups.set(name, [])
groups.get(name)!.push(conn)
}
return Array.from(groups, ([name, conns]) => ({ name, connections: conns }))
}, [connectionsList])
const getConnectionClients = useCallback((conn: any) => {
const results: { key: string; clients: number }[] = []
for (const key of Object.keys(redisConnections || {})) {
if (redisConnections[key]?.connection?.name === conn.name) {
results.push({ key, clients: redisConnections[key].clients?.length || 0 })
}
}
return results
}, [redisConnections])
// --- Drag & drop handlers ---
const handleDragEndFlat = async (event: DragEndEvent) => {
const { active, over } = event
if (!over || active.id === over.id) return
const oldIndex = connectionsList.findIndex((c: any) => c.id === active.id)
const newIndex = connectionsList.findIndex((c: any) => c.id === over.id)
if (oldIndex === -1 || newIndex === -1) return
const reordered = arrayMove(connectionsList, oldIndex, newIndex)
try {
await request({ action: 'connections-reorder', payload: { ids: reordered.map((c: any) => c.id) } })
} catch (e) { generalHandleError(e) }
}
// Reorder groups themselves
const handleDragEndGroupReorder = async (event: DragEndEvent) => {
const { active, over } = event
if (!over || active.id === over.id) return
const oldIndex = groupedConnections.findIndex(g => `group-${g.name}` === active.id)
const newIndex = groupedConnections.findIndex(g => `group-${g.name}` === over.id)
if (oldIndex === -1 || newIndex === -1) return
const reordered = arrayMove(groupedConnections, oldIndex, newIndex)
// Flatten all connections in new group order and persist
const allIds: string[] = []
for (const group of reordered) {
for (const conn of group.connections) {
allIds.push(conn.id)
}
}
try {
await request({ action: 'connections-reorder', payload: { ids: allIds } })
} catch (e) { generalHandleError(e) }
}
// Reorder connections within a group
const handleDragEndGroup = async (event: DragEndEvent, groupName: string) => {
const { active, over } = event
if (!over || active.id === over.id) return
const group = groupedConnections.find(g => g.name === groupName)
if (!group) return
const oldIndex = group.connections.findIndex((c: any) => c.id === active.id)
const newIndex = group.connections.findIndex((c: any) => c.id === over.id)
if (oldIndex === -1 || newIndex === -1) return
const reordered = arrayMove(group.connections, oldIndex, newIndex)
try {
await request({ action: 'connections-reorder', payload: { group: groupName || undefined, ids: reordered.map((c: any) => c.id) } })
} catch (e) { generalHandleError(e) }
}
// Dialog states
const [dialogOpen, setDialogOpen] = useState(false)
const [dialogType, setDialogType] = useState<'new' | 'edit'>('new')
const [dialogModel, setDialogModel] = useState<any>(undefined)
const [aiDialogOpen, setAiDialogOpen] = useState(false)
const [treeDialogOpen, setTreeDialogOpen] = useState(false)
const handleConnect = async (conn: any) => {
const cloned = structuredClone(conn)
const overlay = useOverlayStore.getState()
try {
const dbStorageKey = settings.getStorageKeyCurrentDatabase(cloned.id)
let db: string | undefined
try { db = localStorage.getItem(dbStorageKey) ?? undefined } catch {}
overlay.show({ message: strings?.title?.connectingRedis })
const response = await request({
action: 'connection-connect',
payload: { connection: cloned, db },
})
const databaseIndexes: number[] = []
let i = 0
while (i < response.databases) databaseIndexes.push(i++)
const commands: string[] = []
Object.keys(response.commands ?? {}).forEach(k => commands.push(response.commands[k][0]))
commands.sort()
const modules = Array.isArray(response.modules) ? response.modules : []
useRedisStateStore.setState({
page: 1, monitor: false, dbsize: response.dbsize,
databaseIndexes, connection: cloned, commands,
commandsMeta: response.commandsMeta ?? {}, modules,
hasReJSON: modules.some((m: any) => m.name === 'ReJSON'),
hasRediSearch: modules.some((m: any) => m.name === 'search'),
hasTimeSeries: modules.some((m: any) => m.name === 'timeseries' || m.name === 'Timeseries'),
})
useCommonStore.getState().loadRedisInfoResponse({ response })
try { localStorage.setItem(settings.connectInfoStorageKey, JSON.stringify(cloned)) } catch {}
} catch (error: any) {
try { localStorage.removeItem(settings.connectInfoStorageKey) } catch {}
useRedisStateStore.setState({ connection: undefined })
generalHandleError(error)
} finally {
overlay.hide()
}
}
const handleDelete = async (conn: any) => {
try {
await confirm({ message: strings?.confirm?.deleteConnectionText })
await request({ action: 'connection-delete', payload: { id: conn.id } })
toast(strings?.status?.deleted)
} catch (e: any) {
if (e !== undefined) generalHandleError(e)
}
}
const handleConnectionForm = (formType: 'new' | 'edit', formModel?: any) => {
setDialogType(formType)
setDialogModel(formModel)
setDialogOpen(true)
}
// AI settings
const isAiEnabled = cfg?.aiEnabled !== false
const groqApiKey = cfg?.groqApiKey || ''
const hasGroqApiKey = groqApiKey.startsWith('gsk_') && groqApiKey.length > 20
const isUseOwnKey = cfg?.aiUseOwnKey === true && hasGroqApiKey
const isAiReadonly = readonlyConnections || cfg?.groqApiKeyReadonly === true
const groqApiKeyDisplay = !groqApiKey
? strings?.label?.aiGroqApiKeyNotSet
: groqApiKey.length <= 8 ? '****' : `${groqApiKey.slice(0, 4)}...${groqApiKey.slice(-4)}`
const toggleAiEnabled = async (enabled: boolean) => {
try {
await request({ action: 'set-groq-api-key', payload: { apiKey: groqApiKey, aiEnabled: enabled } })
useRedisStateStore.setState({ cfg: { ...cfg, aiEnabled: enabled } })
} catch (e) { generalHandleError(e) }
}
const toggleUseOwnKey = async (useOwn: boolean) => {
if (useOwn && !hasGroqApiKey) return
try {
await request({ action: 'set-groq-api-key', payload: { apiKey: groqApiKey, aiEnabled: isAiEnabled, aiUseOwnKey: useOwn } })
useRedisStateStore.setState({ cfg: { ...cfg, aiUseOwnKey: useOwn } })
} catch (e) { generalHandleError(e) }
}
// --- Responsive action button (filled/contained, tooltip only when icon-only) ---
const ActionBtn = ({ icon, label, color, onClick }: {
icon: React.ReactNode, label: string, color: 'primary' | 'secondary' | 'error', onClick: () => void
}) => isXs ? (
<Tooltip title={label} placement="top">
<Button variant="contained" color={color} onClick={onClick}
sx={{ minWidth: 40, width: 40, height: 40, p: 0, borderRadius: '4px' }}
aria-label={label}>
{icon}
</Button>
</Tooltip>
) : (
<Button variant="contained" color={color} size="small" onClick={onClick}
sx={{ minWidth: 'auto', px: 1, textTransform: 'uppercase', letterSpacing: '0.01em' }}>
{icon}<span style={{ marginLeft: 3 }}>{label}</span>
</Button>
)
// --- Connection info + buttons (shared between flat and grouped) ---
const ConnectionButtons = ({ conn }: { conn: any }) => (
<>
<Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
<Box sx={{ fontWeight: 700 }}>{conn.name}</Box>
<Box sx={{ fontSize: 13, opacity: 0.7 }}>{conn.host}:{conn.port}</Box>
<Box sx={{ fontSize: 13, opacity: 0.7 }}>
{getConnectionClients(conn).map(entry => {
const fn = strings?.page?.overview?.connectedCount
return typeof fn === 'function' ? fn({ length: entry.clients }) : ''
}).join(' ')}
</Box>
</Box>
{currentConnectionId !== conn.id ? (
<ActionBtn icon={<Power fontSize="small" />} label={strings?.intention?.connect} color="secondary" onClick={() => handleConnect(conn)} />
) : (
<ActionBtn icon={<i className="fa fa-power-off" />} label={strings?.intention?.disconnect} color="secondary" onClick={() => disconnect()} />
)}
{!readonlyConnections && (
<>
<ActionBtn icon={<DeleteForever fontSize="small" />} label={strings?.intention?.delete} color="error" onClick={() => handleDelete(conn)} />
<ActionBtn icon={<Edit fontSize="small" />} label={strings?.intention?.edit} color="primary" onClick={() => handleConnectionForm('edit', conn)} />
</>
)}
{readonlyConnections && (
<ActionBtn icon={<ModeComment fontSize="small" />} label={strings?.intention?.view} color="primary" onClick={() => handleConnectionForm('edit', conn)} />
)}
</>
)
return (
<>
{/* === Connections === */}
<P3xrAccordion title={strings?.label?.connections} accordionKey="settings"
actions={
<>
<P3xrButton
label={strings?.label?.grouped}
icon={groupModeEnabled ? <CheckBox fontSize="small" /> : <CheckBoxOutlineBlank fontSize="small" />}
onClick={toggleGroupMode}
/>
{!readonlyConnections && (
<P3xrButton
label={strings?.intention?.connectionAdd}
icon={<AddBox fontSize="small" />}
onClick={() => handleConnectionForm('new')}
/>
)}
</>
}>
{connectionsList.length === 0 && (
<Box sx={{ p: 2 }}>{strings?.intention?.noConnectionsInSettings}</Box>
)}
{/* Grouped mode: groups are draggable + connections within each group are draggable */}
{connectionsList.length > 0 && groupModeEnabled && (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEndGroupReorder}>
<SortableContext items={groupedConnections.map(g => `group-${g.name}`)} strategy={verticalListSortingStrategy}>
{groupedConnections.map(group => (
<SortableGroupBlock key={group.name} group={group}>
<Box
onClick={() => toggleGroup(group.name)}
sx={(theme) => ({
display: 'flex', alignItems: 'center', gap: 1,
px: 2, py: 1, cursor: 'grab', fontWeight: 700,
fontSize: 13, userSelect: 'none', opacity: 0.8,
bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
borderBottom: 1,
borderColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.06)',
'&:hover': {
opacity: 1,
bgcolor: 'action.hover',
},
})}
>
{collapsedGroups.has(group.name) ? <ChevronRight sx={{ fontSize: 18 }} /> : <ExpandMore sx={{ fontSize: 18 }} />}
<span>{group.name || strings?.label?.ungrouped}</span>
<span style={{ opacity: 0.5, fontWeight: 400, fontSize: 12 }}>({group.connections.length})</span>
</Box>
{!collapsedGroups.has(group.name) && (
<DndContext sensors={sensors} collisionDetection={closestCenter}
onDragEnd={e => handleDragEndGroup(e, group.name)}>
<SortableContext items={group.connections.map((c: any) => c.id)} strategy={verticalListSortingStrategy}>
{group.connections.map((conn: any, i: number) => (
<SortableConnectionItem key={conn.id} conn={conn} isLast={i === group.connections.length - 1}>
<ConnectionButtons conn={conn} />
</SortableConnectionItem>
))}
</SortableContext>
</DndContext>
)}
</SortableGroupBlock>
))}
</SortableContext>
</DndContext>
)}
{/* Flat mode with drag & drop */}
{connectionsList.length > 0 && !groupModeEnabled && (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEndFlat}>
<SortableContext items={connectionsList.map((c: any) => c.id)} strategy={verticalListSortingStrategy}>
{connectionsList.map((conn: any, i: number) => (
<SortableConnectionItem key={conn.id} conn={conn} isLast={i === connectionsList.length - 1}>
<ConnectionButtons conn={conn} />
</SortableConnectionItem>
))}
</SortableContext>
</DndContext>
)}
</P3xrAccordion>
<br />
{/* === GUI Framework === */}
<P3xrAccordion title="GUI" accordionKey="gui-framework">
<Box sx={{ display: 'flex', justifyContent: 'flex-end', p: 2 }}>
<Box sx={{
display: 'inline-flex', borderRadius: '4px', overflow: 'hidden',
border: 1, borderColor: 'divider',
}}>
<Box component="span"
onClick={() => {
setPersistentItem('p3xr-frontend', 'ng')
location.href = '/ng/settings'
}}
sx={{
px: 3, py: 1, cursor: 'pointer', fontWeight: 500,
fontSize: 14, userSelect: 'none',
bgcolor: 'transparent', color: 'text.primary',
'&:hover': { bgcolor: 'action.hover' },
}}>
Angular
</Box>
<Box component="span"
sx={{
px: 3, py: 1, fontWeight: 700,
fontSize: 14, userSelect: 'none',
bgcolor: 'primary.main', color: 'primary.contrastText',
}}>
React
</Box>
</Box>
</Box>
</P3xrAccordion>
<br />
{/* === AI Settings === */}
<P3xrAccordion title={strings?.label?.aiSettings} accordionKey="ai-settings"
actions={
!readonlyConnections && !cfg?.groqApiKeyReadonly ? (
<P3xrButton
label={strings?.intention?.edit}
icon={<Edit fontSize="small" />}
onClick={() => setAiDialogOpen(true)}
/>
) : undefined
}>
<List disablePadding>
<ListItem>
<Box sx={{ display: 'flex', width: '100%', alignItems: 'center' }}>
<Box sx={{ flex: 1, fontWeight: 500 }}>{strings?.label?.aiEnabled}</Box>
<Switch checked={isAiEnabled} disabled={isAiReadonly} onChange={(_, checked) => toggleAiEnabled(checked)} />
</Box>
</ListItem>
{isAiEnabled && hasGroqApiKey && (
<>
<Divider />
<ListItem>
<Box sx={{ width: '100%' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ flex: 1, fontWeight: 500 }}>{strings?.label?.aiRouteViaNetwork}</Box>
<Switch checked={!isUseOwnKey} disabled={isAiReadonly} onChange={(_, checked) => toggleUseOwnKey(!checked)} />
</Box>
<Box sx={{ fontSize: 12, opacity: 0.7 }}>
{isUseOwnKey ? strings?.label?.aiRoutingDirect : strings?.label?.aiRoutingNetwork}
{!isUseOwnKey && (
<> <a href="https://console.groq.com" target="_blank" rel="noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>console.groq.com</a></>
)}
</Box>
</Box>
</ListItem>
<Divider />
<ListItem>
<Box sx={{ display: 'flex', width: '100%' }}>
<Box sx={{ flex: 1, fontWeight: 500 }}>{strings?.label?.aiGroqApiKey}</Box>
<Box sx={{ fontFamily: hasGroqApiKey ? 'monospace' : 'inherit' }}>{groqApiKeyDisplay}</Box>
</Box>
</ListItem>
</>
)}
</List>
</P3xrAccordion>
<br />
{/* === Tree/Redis Settings === */}
<P3xrAccordion title={strings?.form?.treeSettings?.label?.formName} accordionKey="tree-settings"
actions={
<P3xrButton
label={strings?.intention?.edit}
icon={<Edit fontSize="small" />}
onClick={() => setTreeDialogOpen(true)}
/>
}>
<List disablePadding>
{[
{ label: strings?.form?.treeSettings?.field?.treeSeparator, value: settings.redisTreeDivider || strings?.label?.treeSeparatorEmptyNote },
{ label: strings?.form?.treeSettings?.field?.page, value: settings.pageCount, hint: strings?.form?.treeSettings?.error?.page },
{ label: strings?.form?.treeSettings?.field?.keyPageCount, value: settings.keyPageCount, hint: strings?.form?.treeSettings?.error?.keyPageCount },
{ label: strings?.form?.treeSettings?.maxValueDisplay, value: settings.maxValueDisplay, hint: strings?.form?.treeSettings?.maxValueDisplayInfo },
{ label: strings?.form?.treeSettings?.maxKeys, value: settings.maxKeys, hint: strings?.form?.treeSettings?.maxKeysInfo },
{ label: strings?.form?.treeSettings?.field?.keysSort, value: settings.keysSort ? strings?.label?.keysSort?.on : strings?.label?.keysSort?.off },
{ label: strings?.form?.treeSettings?.field?.searchMode, value: settings.searchClientSide ? strings?.form?.treeSettings?.label?.searchModeClient : strings?.form?.treeSettings?.label?.searchModeServer },
{ label: strings?.form?.treeSettings?.field?.searchModeStartsWith, value: settings.searchStartsWith ? strings?.form?.treeSettings?.label?.searchModeStartsWith : strings?.form?.treeSettings?.label?.searchModeIncludes },
{ label: null, value: settings.jsonFormat === 2 ? strings?.form?.treeSettings?.label?.jsonFormatTwoSpace : strings?.form?.treeSettings?.label?.jsonFormatFourSpace },
{ label: null, value: settings.animation ? strings?.form?.treeSettings?.label?.animation : strings?.form?.treeSettings?.label?.noAnimation },
].map((item, i) => (
<Box key={i}>
<ListItemButton onClick={() => setTreeDialogOpen(true)} sx={{ px: 2, py: 1 }}>
<Box sx={{ width: '100%' }}>
<Box sx={{ display: 'flex', width: '100%' }}>
{item.label && <Box sx={{ flex: 1, fontWeight: 500 }}>{item.label}</Box>}
<Box sx={{ fontWeight: 400, opacity: 0.8 }}>{String(item.value)}</Box>
</Box>
{item.hint && <Box sx={{ fontSize: 12, opacity: 0.7 }}>{item.hint}</Box>}
</Box>
</ListItemButton>
{i < 9 && <Divider />}
</Box>
))}
</List>
</P3xrAccordion>
<Box sx={{ height: 8 }} />
{/* Dialogs */}
<ConnectionDialog
open={dialogOpen}
type={dialogType}
model={dialogModel}
onClose={() => setDialogOpen(false)}
/>
<AiSettingsDialog
open={aiDialogOpen}
onClose={() => setAiDialogOpen(false)}
/>
<TreeSettingsDialog
open={treeDialogOpen}
onClose={() => setTreeDialogOpen(false)}
/>
</>
)
}