From 9abcb783273fd45c5b7b5860d34b22d1fb1c89e7 Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Fri, 21 Aug 2026 12:58:28 -0700
Subject: [PATCH] Refactor only formatting of file

---
 .../components/dashboard/SettingsButton.jsx   | 425 +++++++++---------
 1 file changed, 216 insertions(+), 209 deletions(-)

diff --git a/client/src/components/dashboard/SettingsButton.jsx b/client/src/components/dashboard/SettingsButton.jsx
index 436fc6b..8038b94 100644
--- a/client/src/components/dashboard/SettingsButton.jsx
+++ b/client/src/components/dashboard/SettingsButton.jsx
@@ -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,215 +148,222 @@ 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"}}/>
+              <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)}
-                size="xl"
-                placement="center"
-                closeOnInteractOutside={true}
-                closeOnEscapeKeyDown={true}
+              <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"
+                }}
               >
-                {/* Soft blur can be added to the background behind the modal */}
-                {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
-                <Dialog.Positioner>
+                <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
+      )}
 
-                  <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
+      {/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
+      <Dialog.Root
+        open={isLibraryOpen}
+        onOpenChange={(e) => setIsLibraryOpen(e.open)}
+        size="xl"
+        placement="center"
+        closeOnInteractOutside={true}
+        closeOnEscapeKeyDown={true}
+      >
+        {/* Soft blur can be added to the background behind the modal */}
+        {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
+        <Dialog.Positioner>
 
-                    <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
-                                    borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
-                      <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
-                    </Dialog.Header>
+          <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
 
-                    <Dialog.Body p={0}>
-                      <Tabs.Root defaultValue={categories[0]} variant="unstyled">
-                        <Box position="relative" display="flex" mx="auto" maxWidth="100%" mt={4} mb={6}>
+            <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
+                           borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+              <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
+            </Dialog.Header>
 
-                          {/* LEFT GLASS CRESCENT */}
-                          {canScrollLeft && (
-                            <Flex
-                              position="absolute"
-                              left="0" top="0" bottom="0"
-                              w="40px"
-                              align="center" justify="center"
-                              zIndex={2}
-                              cursor="pointer"
-                              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)" }}
-                              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" } }}
-                            >
-                              <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)" }}
-                            p={1}
-                            mx={3}
-                            mt={4}
-                            mb={6}
-                            borderRadius="full"
-                            display="flex"
-                            flexWrap="nowrap"
-                            overflowX="auto"
-                            maxWidth="100%"
-                            border="1px solid"
-                            borderColor={{ base: "blackAlpha.50", _dark: "whiteAlpha.100" }}
-                            css={{
-                              scrollbarWidth: "none",
-                              "&::-webkit-scrollbar": { display: "none" },
-                            }}
-                            // This is for desktop users not on trackpad to scroll the
-                            onWheel={(e) => {
-                            if (e.currentTarget) {
-                              e.currentTarget.scrollLeft += e.deltaY;
-                            }
-                          }}
-                          >
-                            {categories.map(cat => (
-                              <Tabs.Trigger
-                                key={cat}
-                                value={cat}
-                                px={5}
-                                py={2}
-                                borderRadius="full"
-                                whiteSpace="nowrap"
-                                flexShrink={0}
-                                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" }
-                                }}
-                                _selected={{
-                                  bg: { base: "white", _dark: "rgba(255, 255, 255, 0.12)" },
-                                  color: { base: "blue.600", _dark: "blue.200" },
-                                  boxShadow: "sm",
-                                  fontWeight: "bold",
-                                }}
-                              >
-                                {cat}
-                              </Tabs.Trigger>
-                            ))}
-                          </Tabs.List>
-                          {canScrollRight && (
-                            <Flex
-                              position="absolute"
-                              right="0" top="0" bottom="0"
-                              w="40px"
-                              align="center" justify="center"
-                              zIndex={2}
-                              cursor="pointer"
-                              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)" }}
-                              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" } }}
-                            >
-                              <ChevronRight size={18} />
-                            </Flex>
-                          )}
+            <Dialog.Body p={0}>
+              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
+                <Box position="relative" display="flex" mx="auto" maxWidth="100%" mt={4} mb={6}>
 
-                        </Box>
-                        {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"
+                  {/* LEFT GLASS CRESCENT */}
+                  {canScrollLeft && (
+                    <Flex
+                      position="absolute"
+                      left="0" top="0" bottom="0"
+                      w="40px"
+                      align="center" justify="center"
+                      zIndex={2}
+                      cursor="pointer"
+                      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)"}}
+                      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"}}}
+                    >
+                      <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)"}}
+                    p={1}
+                    mx={3}
+                    mt={4}
+                    mb={6}
+                    borderRadius="full"
+                    display="flex"
+                    flexWrap="nowrap"
+                    overflowX="auto"
+                    maxWidth="100%"
+                    border="1px solid"
+                    borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
+                    css={{
+                      scrollbarWidth: "none",
+                      "&::-webkit-scrollbar": {display: "none"},
+                    }}
+                    // This is for desktop users not on trackpad to scroll the
+                    onWheel={(e) => {
+                      if (e.currentTarget) {
+                        e.currentTarget.scrollLeft += e.deltaY;
+                      }
+                    }}
+                  >
+                    {categories.map(cat => (
+                      <Tabs.Trigger
+                        key={cat}
+                        value={cat}
+                        px={5}
+                        py={2}
+                        borderRadius="full"
+                        whiteSpace="nowrap"
+                        flexShrink={0}
+                        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"}
+                        }}
+                        _selected={{
+                          bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
+                          color: {base: "blue.600", _dark: "blue.200"},
+                          boxShadow: "sm",
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {cat}
+                      </Tabs.Trigger>
+                    ))}
+                  </Tabs.List>
+                  {canScrollRight && (
+                    <Flex
+                      position="absolute"
+                      right="0" top="0" bottom="0"
+                      w="40px"
+                      align="center" justify="center"
+                      zIndex={2}
+                      cursor="pointer"
+                      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)"}}
+                      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"}}}
+                    >
+                      <ChevronRight size={18}/>
+                    </Flex>
+                  )}
+
+                </Box>
+                {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"}}
                                 >
-                                  <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
-                                  <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
+                                  {/* 🚨 THE ABBREVIATION ICON: Always visible */}
+                                  <Flex
+                                    align="center"
+                                    justify="center"
+                                    w="24px"
+                                    h="24px"
+                                    flexShrink={0}
+                                    borderRadius="full"
+                                    bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
+                                    fontWeight="black"
+                                    fontSize="xs"
+                                    bg='transparent'
+                                  >
+                                    {getSizeAbbreviation(sizeKey)}
+                                  </Flex>
 
-                                  <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"
-                                            bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
-                                            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>
+                                  {/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
+                                  <Box as="span">Add Widget</Box>
+                                </Box>
                               ))}
-                            </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>
+                            </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>
     </>
   );
 }
\ No newline at end of file