Refactor only formatting of file
This commit is contained in:
@@ -19,7 +19,7 @@ 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" };
|
||||
const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
|
||||
return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
|
||||
};
|
||||
|
||||
@@ -48,7 +48,7 @@ export function SettingsButton() {
|
||||
|
||||
const checkScroll = useCallback(() => {
|
||||
if (tabsRef.current) {
|
||||
const { scrollLeft, scrollWidth, clientWidth } = 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);
|
||||
@@ -99,10 +99,10 @@ export function SettingsButton() {
|
||||
css={tabStyles}
|
||||
data-state="open"
|
||||
onClick={() => setIsLibraryOpen(true)}
|
||||
color={{ base: "blue.500", _dark: "blue.300" }}
|
||||
_hover={{ bg: "rgba(66, 153, 225, 0.1)" }}
|
||||
color={{base: "blue.500", _dark: "blue.300"}}
|
||||
_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>
|
||||
|
||||
@@ -112,10 +112,10 @@ export function SettingsButton() {
|
||||
css={tabStyles}
|
||||
data-state="open"
|
||||
onClick={saveEdit}
|
||||
color={{ base: "green.600", _dark: "green.400" }}
|
||||
_hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
|
||||
color={{base: "green.600", _dark: "green.400"}}
|
||||
_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>
|
||||
|
||||
@@ -125,20 +125,20 @@ export function SettingsButton() {
|
||||
css={tabStyles}
|
||||
data-state="open"
|
||||
onClick={cancelEdit}
|
||||
color={{ base: "red.500", _dark: "red.400" }}
|
||||
_hover={{ bg: "rgba(245, 101, 101, 0.1)" }}
|
||||
color={{base: "red.500", _dark: "red.400"}}
|
||||
_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>
|
||||
</HStack>
|
||||
) : (
|
||||
// 👀 VIEW MODE: The Static Dropdown Menu
|
||||
<Menu.Root positioning={{ getAnchorRect }}>
|
||||
<Menu.Root positioning={{getAnchorRect}}>
|
||||
<Menu.Trigger asChild>
|
||||
<Box ref={menuRef} as="button" css={tabStyles}>
|
||||
{/* 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>
|
||||
</Menu.Trigger>
|
||||
@@ -148,9 +148,9 @@ export function SettingsButton() {
|
||||
<Menu.Item
|
||||
onClick={enterEditMode}
|
||||
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.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
|
||||
@@ -203,24 +203,27 @@ export function SettingsButton() {
|
||||
align="center" justify="center"
|
||||
zIndex={2}
|
||||
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
|
||||
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)"
|
||||
borderTopLeftRadius="full"
|
||||
borderBottomLeftRadius="full"
|
||||
// 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)" }}
|
||||
color={{ base: "gray.600", _dark: "gray.300" }}
|
||||
_hover={{ color: { base: "blue.500", _dark: "blue.300" } }}
|
||||
boxShadow={{
|
||||
base: "10px 0 15px -5px rgba(255,255,255,0.8)",
|
||||
_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>
|
||||
)}
|
||||
<Tabs.List
|
||||
ref={tabsRef}
|
||||
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}
|
||||
mx={3}
|
||||
mt={4}
|
||||
@@ -231,10 +234,10 @@ export function SettingsButton() {
|
||||
overflowX="auto"
|
||||
maxWidth="100%"
|
||||
border="1px solid"
|
||||
borderColor={{ base: "blackAlpha.50", _dark: "whiteAlpha.100" }}
|
||||
borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
|
||||
css={{
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": { display: "none" },
|
||||
"&::-webkit-scrollbar": {display: "none"},
|
||||
}}
|
||||
// This is for desktop users not on trackpad to scroll the
|
||||
onWheel={(e) => {
|
||||
@@ -252,15 +255,15 @@ export function SettingsButton() {
|
||||
borderRadius="full"
|
||||
whiteSpace="nowrap"
|
||||
flexShrink={0}
|
||||
color={{ base: "gray.500", _dark: "gray.400" }}
|
||||
color={{base: "gray.500", _dark: "gray.400"}}
|
||||
fontWeight="medium"
|
||||
transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
|
||||
_hover={{
|
||||
color: { base: "gray.800", _dark: "gray.200" }
|
||||
color: {base: "gray.800", _dark: "gray.200"}
|
||||
}}
|
||||
_selected={{
|
||||
bg: { base: "white", _dark: "rgba(255, 255, 255, 0.12)" },
|
||||
color: { base: "blue.600", _dark: "blue.200" },
|
||||
bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
|
||||
color: {base: "blue.600", _dark: "blue.200"},
|
||||
boxShadow: "sm",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
@@ -277,17 +280,20 @@ export function SettingsButton() {
|
||||
align="center" justify="center"
|
||||
zIndex={2}
|
||||
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
|
||||
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)"
|
||||
borderTopRightRadius="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)" }}
|
||||
color={{ base: "gray.600", _dark: "gray.300" }}
|
||||
_hover={{ color: { base: "blue.500", _dark: "blue.300" } }}
|
||||
boxShadow={{
|
||||
base: "-10px 0 15px -5px rgba(255,255,255,0.8)",
|
||||
_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>
|
||||
)}
|
||||
|
||||
@@ -332,7 +338,7 @@ export function SettingsButton() {
|
||||
h="24px"
|
||||
flexShrink={0}
|
||||
borderRadius="full"
|
||||
bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
|
||||
bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
|
||||
fontWeight="black"
|
||||
fontSize="xs"
|
||||
bg='transparent'
|
||||
@@ -353,7 +359,8 @@ export function SettingsButton() {
|
||||
))}
|
||||
</Tabs.Root>
|
||||
</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.Positioner>
|
||||
</Dialog.Root>
|
||||
|
||||
Reference in New Issue
Block a user