chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor only formatting of file

Browse Source
This commit is contained in:
chight
2026-08-21 12:58:28 -07:00
parent f5f09e31fe
commit 9abcb78327
1 changed files with 216 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dashboard/SettingsButton.jsx
+43 -36
View File
@@ -19,7 +19,7 @@ import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
// 🚨 NEW: Tiny helper to convert size keys into abbreviations // 🚨 NEW: Tiny helper to convert size keys into abbreviations
const getSizeAbbreviation = (key) => { const getSizeAbbreviation = (key) => {
const mapping = { small: "S", medium: "M", large: "L", xlarge: "XL" }; const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase(); return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
}; };
@@ -48,7 +48,7 @@ export function SettingsButton() {
const checkScroll = useCallback(() => { const checkScroll = useCallback(() => {
if (tabsRef.current) { if (tabsRef.current) {
const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current; const {scrollLeft, scrollWidth, clientWidth} = tabsRef.current;
setCanScrollLeft(scrollLeft > 0); setCanScrollLeft(scrollLeft > 0);
// We use -1 here to account for sub-pixel rendering in some browsers // We use -1 here to account for sub-pixel rendering in some browsers
setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1); setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
@@ -99,10 +99,10 @@ export function SettingsButton() {
css={tabStyles} css={tabStyles}
data-state="open" data-state="open"
onClick={() => setIsLibraryOpen(true)} onClick={() => setIsLibraryOpen(true)}
color={{ base: "blue.500", _dark: "blue.300" }} color={{base: "blue.500", _dark: "blue.300"}}
_hover={{ bg: "rgba(66, 153, 225, 0.1)" }} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
> >
<LayoutGrid size={20} style={{ flexShrink: 0 }} /> <LayoutGrid size={20} style={{flexShrink: 0}}/>
<Box as="span">Widget Library</Box> <Box as="span">Widget Library</Box>
</Box> </Box>
@@ -112,10 +112,10 @@ export function SettingsButton() {
css={tabStyles} css={tabStyles}
data-state="open" data-state="open"
onClick={saveEdit} onClick={saveEdit}
color={{ base: "green.600", _dark: "green.400" }} color={{base: "green.600", _dark: "green.400"}}
_hover={{ bg: "rgba(72, 187, 120, 0.1)" }} _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
> >
<Save size={20} style={{ flexShrink: 0 }} /> <Save size={20} style={{flexShrink: 0}}/>
<Box as="span">Save Layout</Box> <Box as="span">Save Layout</Box>
</Box> </Box>
@@ -125,20 +125,20 @@ export function SettingsButton() {
css={tabStyles} css={tabStyles}
data-state="open" data-state="open"
onClick={cancelEdit} onClick={cancelEdit}
color={{ base: "red.500", _dark: "red.400" }} color={{base: "red.500", _dark: "red.400"}}
_hover={{ bg: "rgba(245, 101, 101, 0.1)" }} _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
> >
<X size={20} style={{ flexShrink: 0 }} /> <X size={20} style={{flexShrink: 0}}/>
<Box as="span">Discard</Box> <Box as="span">Discard</Box>
</Box> </Box>
</HStack> </HStack>
) : ( ) : (
// 👀 VIEW MODE: The Static Dropdown Menu // 👀 VIEW MODE: The Static Dropdown Menu
<Menu.Root positioning={{ getAnchorRect }}> <Menu.Root positioning={{getAnchorRect}}>
<Menu.Trigger asChild> <Menu.Trigger asChild>
<Box ref={menuRef} as="button" css={tabStyles}> <Box ref={menuRef} as="button" css={tabStyles}>
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */} {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
<Settings size={24} style={{ flexShrink: 0 }} /> <Settings size={24} style={{flexShrink: 0}}/>
<Box as="span">Dashboard Settings</Box> <Box as="span">Dashboard Settings</Box>
</Box> </Box>
</Menu.Trigger> </Menu.Trigger>
@@ -148,9 +148,9 @@ export function SettingsButton() {
<Menu.Item <Menu.Item
onClick={enterEditMode} onClick={enterEditMode}
cursor="pointer" cursor="pointer"
_hover={{ WebkitTextStroke: "0.5px currentColor" }} _hover={{WebkitTextStroke: "0.5px currentColor"}}
> >
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
</Menu.Item> </Menu.Item>
<Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/> <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
@@ -203,24 +203,27 @@ export function SettingsButton() {
align="center" justify="center" align="center" justify="center"
zIndex={2} zIndex={2}
cursor="pointer" cursor="pointer"
onClick={() => tabsRef.current.scrollBy({ left: -200, behavior: 'smooth' })} onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
// The Glass Look hugging the left pill edge // The Glass Look hugging the left pill edge
bg={{ base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)" }} bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
backdropFilter="blur(8px)" backdropFilter="blur(8px)"
borderTopLeftRadius="full" borderTopLeftRadius="full"
borderBottomLeftRadius="full" borderBottomLeftRadius="full"
// Fades the inner edge so it blends into the track // Fades the inner edge so it blends into the track
boxShadow={{ base: "10px 0 15px -5px rgba(255,255,255,0.8)", _dark: "10px 0 15px -5px rgba(30,30,30,0.9)" }} boxShadow={{
color={{ base: "gray.600", _dark: "gray.300" }} base: "10px 0 15px -5px rgba(255,255,255,0.8)",
_hover={{ color: { base: "blue.500", _dark: "blue.300" } }} _dark: "10px 0 15px -5px rgba(30,30,30,0.9)"
}}
color={{base: "gray.600", _dark: "gray.300"}}
_hover={{color: {base: "blue.500", _dark: "blue.300"}}}
> >
<ChevronLeft size={18} /> <ChevronLeft size={18}/>
</Flex> </Flex>
)} )}
<Tabs.List <Tabs.List
ref={tabsRef} ref={tabsRef}
onScroll={checkScroll} onScroll={checkScroll}
bg={{ base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" }} bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
p={1} p={1}
mx={3} mx={3}
mt={4} mt={4}
@@ -231,10 +234,10 @@ export function SettingsButton() {
overflowX="auto" overflowX="auto"
maxWidth="100%" maxWidth="100%"
border="1px solid" border="1px solid"
borderColor={{ base: "blackAlpha.50", _dark: "whiteAlpha.100" }} borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
css={{ css={{
scrollbarWidth: "none", scrollbarWidth: "none",
"&::-webkit-scrollbar": { display: "none" }, "&::-webkit-scrollbar": {display: "none"},
}} }}
// This is for desktop users not on trackpad to scroll the // This is for desktop users not on trackpad to scroll the
onWheel={(e) => { onWheel={(e) => {
@@ -252,15 +255,15 @@ export function SettingsButton() {
borderRadius="full" borderRadius="full"
whiteSpace="nowrap" whiteSpace="nowrap"
flexShrink={0} flexShrink={0}
color={{ base: "gray.500", _dark: "gray.400" }} color={{base: "gray.500", _dark: "gray.400"}}
fontWeight="medium" fontWeight="medium"
transition="background-color 0.2s, color 0.2s, box-shadow 0.2s" transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
_hover={{ _hover={{
color: { base: "gray.800", _dark: "gray.200" } color: {base: "gray.800", _dark: "gray.200"}
}} }}
_selected={{ _selected={{
bg: { base: "white", _dark: "rgba(255, 255, 255, 0.12)" }, bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
color: { base: "blue.600", _dark: "blue.200" }, color: {base: "blue.600", _dark: "blue.200"},
boxShadow: "sm", boxShadow: "sm",
fontWeight: "bold", fontWeight: "bold",
}} }}
@@ -277,17 +280,20 @@ export function SettingsButton() {
align="center" justify="center" align="center" justify="center"
zIndex={2} zIndex={2}
cursor="pointer" cursor="pointer"
onClick={() => tabsRef.current.scrollBy({ left: 200, behavior: 'smooth' })} onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
// The Glass Look hugging the right pill edge // The Glass Look hugging the right pill edge
bg={{ base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)" }} bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
backdropFilter="blur(8px)" backdropFilter="blur(8px)"
borderTopRightRadius="full" borderTopRightRadius="full"
borderBottomRightRadius="full" borderBottomRightRadius="full"
boxShadow={{ base: "-10px 0 15px -5px rgba(255,255,255,0.8)", _dark: "-10px 0 15px -5px rgba(30,30,30,0.9)" }} boxShadow={{
color={{ base: "gray.600", _dark: "gray.300" }} base: "-10px 0 15px -5px rgba(255,255,255,0.8)",
_hover={{ color: { base: "blue.500", _dark: "blue.300" } }} _dark: "-10px 0 15px -5px rgba(30,30,30,0.9)"
}}
color={{base: "gray.600", _dark: "gray.300"}}
_hover={{color: {base: "blue.500", _dark: "blue.300"}}}
> >
<ChevronRight size={18} /> <ChevronRight size={18}/>
</Flex> </Flex>
)} )}
@@ -332,7 +338,7 @@ export function SettingsButton() {
h="24px" h="24px"
flexShrink={0} flexShrink={0}
borderRadius="full" borderRadius="full"
bg={{ base: "blue.50", _dark: "whiteAlpha.200" }} bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
fontWeight="black" fontWeight="black"
fontSize="xs" fontSize="xs"
bg='transparent' bg='transparent'
@@ -353,7 +359,8 @@ export function SettingsButton() {
))} ))}
</Tabs.Root> </Tabs.Root>
</Dialog.Body> </Dialog.Body>
<Dialog.CloseTrigger position="absolute" top={3} right={3} color={{ base: "gray.500", _dark: "whiteAlpha.800" }} _hover={{ color: "red.400" }} /> <Dialog.CloseTrigger position="absolute" top={3} right={3}
color={{base: "gray.500", _dark: "whiteAlpha.800"}} _hover={{color: "red.400"}}/>
</Dialog.Content> </Dialog.Content>
</Dialog.Positioner> </Dialog.Positioner>
</Dialog.Root> </Dialog.Root>