add separators grouped buttons

Author: devklick

src/components/AppSideBar/AppSideBar.tsx

@@ -11,9 +11,15 @@ interface SideBarItem {
 
 interface AppSideBarProps {
   items: Array<SideBarItem>;
+  itemSeparators?: boolean;
+  itemSeparatorColor?: string;
 }
 
-function AppSideBar({ items }: AppSideBarProps) {
+function AppSideBar({
+  items,
+  itemSeparators,
+  itemSeparatorColor,
+}: AppSideBarProps) {
   const [fontColor, buttonColor] = useSystemSettings((s) => [
     s.fontColor,
     s.mainColor,
@@ -34,6 +40,8 @@ function AppSideBar({ items }: AppSideBarProps) {
             active={item.isActive ?? false}
             justifyContent="start"
             key={item.title}
+            separators={itemSeparators}
+            separatorColor={itemSeparatorColor}
           >
             {item.title}
           </Button>

src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, PropsWithChildren, useCallback } from "react";
 import { StyledButton, StyledButtonProps } from "./styles";
 import { setRef } from "../../common/utils/htmlHelpers";
+import { adjustLuminance } from "../../common/utils/colorUtils";
 
 interface ButtonProps extends StyledButtonProps {
   onClick?: () => void;
@@ -13,8 +14,19 @@ const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(
       (el: HTMLButtonElement | null) => setRef(ref, el),
       [ref],
     );
+    const separatorColor =
+      rest.separatorColor ??
+      rest.backgroundColorHover ??
+      (rest.backgroundColor && adjustLuminance(0.2, rest.backgroundColor)) ??
+      "white";
+
     return (
-      <StyledButton {...rest} onClick={onClick} ref={onRef}>
+      <StyledButton
+        {...rest}
+        onClick={onClick}
+        ref={onRef}
+        separatorColor={separatorColor}
+      >
         {children}
       </StyledButton>
     );

src/components/Button/styles.ts

@@ -18,6 +18,8 @@ export interface StyledButtonProps {
   group?: "horizontal" | "vertical";
   padding?: CSSObject["padding"];
   justifyContent?: CSSProperties["justifyContent"];
+  separators?: boolean;
+  separatorColor?: string;
 }
 
 export const StyledButton = styled.button<StyledButtonProps>`
@@ -30,7 +32,8 @@ function buildStyledButton({
   justifyContent = "center",
   ...props
 }: StyledButtonProps): CSSObject {
-  return {
+  const styles: CSSObject = {
+    position: "relative",
     ...props,
     width: typeof width === "string" ? width : `${width}px`,
     height:
@@ -54,6 +57,31 @@ function buildStyledButton({
     },
     ...radiusStyles({ borderRadius, group: props.group }), // this breaks the return type somehow. Something funky when spreading the emotion type
   } as CSSObject;
+
+  if (props.group && props.separators) {
+    let width: string;
+    let height: string;
+    switch (props.group) {
+      case "horizontal":
+        width = "1px";
+        height = "100%";
+        break;
+      case "vertical":
+        width = "100%";
+        height = "1px";
+        break;
+    }
+    styles["&:not(:first-of-type)::before"] = {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width,
+      height,
+      background: props.separatorColor ?? props.color,
+    };
+  }
+  return styles;
 }
 
 function getBackgroundColorActive(props: StyledButtonProps) {

src/programs/Calendar/CalendarNavigation/styles.tsx

@@ -9,7 +9,6 @@ export const StyledCalendarNavigation = styled.div<StyledCalendarNavigationProps
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
   grid-area: nav;
-  padding-bottom: 5px;
 `;
 
 export const StyledCalendarNavigationSection = styled.div<StyledCalendarNavigationSectionProps>`

src/programs/Calendar/CalendarSidebar/CalendarSidebar.tsx

@@ -1,7 +1,7 @@
 // import useCalendarEvents from "../hooks/useCalendarEvents";
 import { useRef } from "react";
 import CalendarTimeSlot from "../CalendarTimeSlot/CalendarTimeSlot";
-import { StyledCalendarSidebar, StyledDayBreak } from "./styles";
+import { StyledCalendarSidebar } from "./styles";
 import useSystemSettings from "../../../stores/systemSettingsStore";
 
 interface CalendarSidebarProps {
@@ -13,10 +13,7 @@ interface CalendarSidebarProps {
 // eslint-disable-next-line no-empty-pattern
 export default function CalendarSidebar({}: CalendarSidebarProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const [breakColor, scrollbarColor] = useSystemSettings((s) => [
-    s.secondaryColor,
-    s.iconColor,
-  ]);
+  const [scrollbarColor] = useSystemSettings((s) => [s.iconColor]);
   return (
     <StyledCalendarSidebar
       scrollbarColor={scrollbarColor}
@@ -26,7 +23,6 @@ export default function CalendarSidebar({}: CalendarSidebarProps) {
       {Array.from({ length: 25 }).map((_, i) => (
         <>
           <CalendarTimeSlot hour={i} />
-          {i < 24 && <StyledDayBreak color={breakColor} />}
         </>
       ))}
     </StyledCalendarSidebar>

src/programs/Calendar/CalendarSidebar/styles.ts

@@ -9,16 +9,8 @@ export const StyledCalendarSidebar = styled.div<StyledCalendarSidebarProps>`
   grid-area: side;
   overflow-y: auto;
   overflow-x: hidden; // getting a tiny amount of overflow, I think because of flex gap's sub-pixel rounding
-  padding-left: 6px;
+  /* padding-left: 6px; */
   box-sizing: border-box;
   scrollbar-color: ${(p) => p.scrollbarColor} transparent;
-`;
-
-interface StyledDayBreakProps {
-  color: string;
-}
-export const StyledDayBreak = styled.hr<StyledDayBreakProps>`
-  width: 100%;
-  margin: 0;
-  background-color: ${(p) => p.color};
+  border-radius: 10px;
 `;

src/programs/Calendar/CalendarTimeSlot/CalendarTimeSlot.tsx

@@ -24,12 +24,13 @@ export default function CalendarTimeSlot({ hour }: CalendarTimeSlotProps) {
 
   return (
     <Button
-      borderRadius={0}
-      height={60}
+      height={"12%"}
       backgroundColor={backgroundColor}
       color={fontColor}
       justifyContent="start"
       ref={onRef}
+      group="vertical"
+      separators
     >
       {hour.toString().padStart(2, "0")}:00
     </Button>

src/programs/Calendar/styles.ts

@@ -15,6 +15,7 @@ export const StyledCalendarLayout = styled.div<StyledCalendarLayoutProps>`
     "nav nav nav"
     "days days side"
     "days days side";
+  gap: 6px;
   grid-template-rows: 40px 1fr 1fr;
   grid-template-columns: 1fr 1fr minmax(150px, 1fr);
 `;

src/programs/FileBrowser/FileBrowser.tsx

@@ -62,6 +62,7 @@ function TopBar({
           color={fontColor}
           group="horizontal"
           borderRadius={6}
+          separators
         >
           {"<"}
         </Button>
@@ -73,6 +74,7 @@ function TopBar({
           color={fontColor}
           group="horizontal"
           borderRadius={6}
+          separators
         >
           {">"}
         </Button>
@@ -129,6 +131,7 @@ const FileBrowser = forwardRef<FileBrowserHandles, FileBrowserProps>(
         />
 
         <AppSideBar
+          itemSeparators
           items={fs.favorites.map((fav) => ({
             title: fs.getNameFromPath(fav) ?? "",
             isActive: fav === fs.currentDirectory.path,