279 lines
11 KiB
React
279 lines
11 KiB
React
import {useState, useMemo, useRef, useEffect, useCallback} from "react";
|
|
import {
|
|
Button,
|
|
Box,
|
|
Text,
|
|
Flex,
|
|
Grid,
|
|
Dialog,
|
|
Tabs,
|
|
Badge,
|
|
Menu,
|
|
HStack,
|
|
useRecipe,
|
|
useSlotRecipe
|
|
} from "@chakra-ui/react";
|
|
import {Settings, LayoutGrid, Move, Save, X, ChevronRight, ChevronLeft} from 'lucide-react';
|
|
import {useDashboardStore} from "../../store/useDashboardStore.jsx";
|
|
import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
|
|
|
|
// 🚨 NEW: Tiny helper to convert size keys into abbreviations
|
|
const getSizeAbbreviation = (key) => {
|
|
const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
|
|
return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
|
|
};
|
|
|
|
export function SettingsButton() {
|
|
// 1. ☁Store connections
|
|
const isEditing = useDashboardStore(state => state.isEditing);
|
|
const enterEditMode = useDashboardStore(state => state.enterEditMode);
|
|
const saveEdit = useDashboardStore(state => state.saveEdit);
|
|
const cancelEdit = useDashboardStore(state => state.cancelEdit);
|
|
const addWidget = useDashboardStore(state => state.addWidget);
|
|
|
|
const glassTabRecipe = useRecipe({key: "glassTab"});
|
|
const tabStyles = glassTabRecipe();
|
|
|
|
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
|
|
// Pull the glass container styles for the dropdown and modal
|
|
const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
|
|
const popoverStyles = popoverRecipe();
|
|
|
|
const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
|
|
const dialogStyles = dialogRecipe();
|
|
|
|
const [isLibraryOpen, setIsLibraryOpen] = useState(false);
|
|
|
|
// ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
|
|
const tabsRef = useRef(null);
|
|
|
|
const checkScroll = useCallback(() => {
|
|
if (tabsRef.current) {
|
|
const {scrollLeft, scrollWidth, clientWidth} = tabsRef.current;
|
|
setCanScrollLeft(scrollLeft > 0);
|
|
// We use -1 here to account for sub-pixel rendering in some browsers
|
|
setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isLibraryOpen) {
|
|
// Small timeout ensures the DOM has rendered the tabs before measuring
|
|
setTimeout(checkScroll, 50);
|
|
window.addEventListener('resize', checkScroll);
|
|
return () => window.removeEventListener('resize', checkScroll);
|
|
}
|
|
}, [isLibraryOpen, checkScroll]);
|
|
|
|
// Smart Add Handler
|
|
const handleAddWidget = (widgetId, sizeKey) => {
|
|
enterEditMode();
|
|
addWidget(widgetId, sizeKey);
|
|
};
|
|
|
|
const categorizedWidgets = useMemo(() => {
|
|
return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
|
|
const cat = widget.category || 'General';
|
|
if (!acc[cat]) acc[cat] = [];
|
|
acc[cat].push({id, ...widget});
|
|
return acc;
|
|
}, {});
|
|
}, []);
|
|
|
|
const categories = Object.keys(categorizedWidgets);
|
|
|
|
// use ref to capture html node for placing menu accordingly
|
|
const menuRef = useRef(null);
|
|
const getAnchorRect = () => {
|
|
if (!menuRef.current) return null;
|
|
return menuRef.current.getBoundingClientRect();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{isEditing ? (
|
|
// 📝 EDIT MODE: The 3-Pill Layout
|
|
<HStack>
|
|
{/* 1. The Add Widget Button */}
|
|
<Box as="button" css={tabStyles} data-state="open" onClick={() => setIsLibraryOpen(true)}
|
|
color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
|
|
>
|
|
<LayoutGrid size={20} style={{flexShrink: 0}}/>
|
|
<Box as="span">Widget Library</Box>
|
|
</Box>
|
|
|
|
{/* 2. The Save Button */}
|
|
<Box as="button" css={tabStyles} data-state="open" onClick={saveEdit} color={{base: "green.600", _dark: "green.400"}}
|
|
_hover={{bg: "rgba(72, 187, 120, 0.1)"}}
|
|
>
|
|
<Save size={20} style={{flexShrink: 0}}/>
|
|
<Box as="span">Save Layout</Box>
|
|
</Box>
|
|
|
|
{/* 3. The Discard Button */}
|
|
<Box as="button" css={tabStyles} data-state="open" onClick={cancelEdit} color={{base: "red.500", _dark: "red.400"}}
|
|
_hover={{bg: "rgba(245, 101, 101, 0.1)"}}
|
|
>
|
|
<X size={20} style={{flexShrink: 0}}/>
|
|
<Box as="span">Discard</Box>
|
|
</Box>
|
|
</HStack>
|
|
) : (
|
|
// 👀 VIEW MODE: The Static Dropdown Menu
|
|
<Menu.Root positioning={{getAnchorRect}}>
|
|
<Menu.Trigger asChild>
|
|
<Box ref={menuRef} as="button" css={tabStyles}>
|
|
{/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
|
|
<Settings size={24} style={{flexShrink: 0}}/>
|
|
<Box as="span">Dashboard Settings</Box>
|
|
</Box>
|
|
</Menu.Trigger>
|
|
|
|
<Menu.Positioner>
|
|
<Menu.Content css={popoverStyles.content} zIndex="dropdown" minW="200px">
|
|
<Menu.Item
|
|
onClick={enterEditMode}
|
|
cursor="pointer"
|
|
_hover={{WebkitTextStroke: "0.5px currentColor"}}
|
|
>
|
|
<Move size={16} style={{marginRight: '8px'}}/> Edit Layout
|
|
</Menu.Item>
|
|
|
|
<Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
|
|
|
|
<Menu.Item
|
|
onClick={() => setIsLibraryOpen(true)}
|
|
cursor="pointer"
|
|
_hover={{
|
|
bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
|
|
WebkitTextStroke: "0.5px currentColor"
|
|
}}
|
|
>
|
|
<LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
|
|
</Menu.Item>
|
|
</Menu.Content>
|
|
</Menu.Positioner>
|
|
</Menu.Root>
|
|
)}
|
|
|
|
{/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
|
|
<Dialog.Root
|
|
open={isLibraryOpen}
|
|
onOpenChange={(e) => setIsLibraryOpen(e.open)}
|
|
closeOnInteractOutside={true}
|
|
closeOnEscapeKeyDown={true}
|
|
size="xl"
|
|
placement="center"
|
|
>
|
|
{/* Soft blur can be added to the background behind the modal */}
|
|
{/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
|
|
<Dialog.Positioner>
|
|
<Dialog.Content css={dialogStyles.content}>
|
|
|
|
<Dialog.Header css={dialogStyles.header}>
|
|
<Dialog.Title>Widgets Shop</Dialog.Title>
|
|
</Dialog.Header>
|
|
|
|
<Dialog.Body css={dialogStyles.body}>
|
|
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
|
|
{/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
|
|
<Box>
|
|
{/* left glass crescent */}
|
|
{canScrollLeft && (
|
|
<Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
|
|
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
|
|
</Flex>
|
|
)}
|
|
|
|
{/* the categories */}
|
|
<Tabs.List ref={tabsRef} onScroll={checkScroll}
|
|
// For desktop users (not on trackpad) to scroll
|
|
onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
|
|
>
|
|
{categories.map(cat => (
|
|
<Tabs.Trigger key={cat} value={cat}>
|
|
{cat}
|
|
</Tabs.Trigger>
|
|
))}
|
|
</Tabs.List>
|
|
|
|
{/* right glass crescent */}
|
|
{canScrollRight && (
|
|
<Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
|
|
{/* Shifted slightly right to optically center it in the crescent mass */}
|
|
<ChevronRight size={18} style={{ marginRight: "-30px" }}/>
|
|
</Flex>
|
|
)}
|
|
</Box>
|
|
|
|
{/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
|
|
{categories.map(cat => (
|
|
<Tabs.Content key={cat} value={cat} p={6}>
|
|
<Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
|
|
{categorizedWidgets[cat].map(widget => (
|
|
<Flex
|
|
key={widget.id}
|
|
direction="column"
|
|
bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
|
|
p={4}
|
|
borderRadius="xl"
|
|
border="1px solid"
|
|
borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
|
|
boxShadow="sm"
|
|
>
|
|
<Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
|
|
<Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
|
|
|
|
<Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
|
|
pt={3}>
|
|
<Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
|
|
mb={2}>
|
|
Add to Dashboard:
|
|
</Text>
|
|
<HStack gap={2} flexWrap="wrap">
|
|
{Object.keys(widget.allowedSizes).map(sizeKey => (
|
|
<Box
|
|
key={sizeKey}
|
|
as="button"
|
|
css={tabStyles}
|
|
onClick={() => handleAddWidget(widget.id, sizeKey)}
|
|
color={{base: "blue.600", _dark: "blue.300"}}
|
|
>
|
|
{/* THE ABBREVIATION ICON: Always visible */}
|
|
<Flex
|
|
align="center"
|
|
justify="center"
|
|
w="24px"
|
|
h="24px"
|
|
flexShrink={0}
|
|
borderRadius="full"
|
|
fontWeight="black"
|
|
fontSize="xs"
|
|
bg='transparent'
|
|
>
|
|
{getSizeAbbreviation(sizeKey)}
|
|
</Flex>
|
|
|
|
{/* THE EXPANDED TEXT: Only visible on hover */}
|
|
<Box as="span">Add Widget</Box>
|
|
</Box>
|
|
))}
|
|
</HStack>
|
|
</Box>
|
|
</Flex>
|
|
))}
|
|
</Grid>
|
|
</Tabs.Content>
|
|
))}
|
|
</Tabs.Root>
|
|
</Dialog.Body>
|
|
<Dialog.CloseTrigger position="absolute" top={3} right={3}
|
|
color={{base: "gray.500", _dark: "whiteAlpha.800"}} _hover={{color: "red.400"}}/>
|
|
</Dialog.Content>
|
|
</Dialog.Positioner>
|
|
</Dialog.Root>
|
|
</>
|
|
);
|
|
} |