@oneuptime/common 9.2.27 → 9.3.0

package/UI/Components/ObjectID/ObjectIDView.tsx

@@ -0,0 +1,73 @@
+import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+export interface ComponentProps {
+  objectId: string;
+}
+
+const ObjectIDView: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy: () => Promise<void> = async (): Promise<void> => {
+    await navigator.clipboard?.writeText(props.objectId);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <div
+      className="inline-flex items-center gap-2 group/objectid cursor-pointer"
+      onClick={handleCopy}
+      role="button"
+      tabIndex={0}
+      onKeyDown={async (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" || e.key === " ") {
+          await handleCopy();
+        }
+      }}
+    >
+      <Tooltip text={copied ? "Copied!" : "Click to copy"}>
+        <div
+          className={`inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md font-mono text-sm transition-all duration-200 ${
+            copied
+              ? "bg-green-50 border border-green-200 text-green-700"
+              : "bg-gray-50 border border-gray-200 text-gray-700 hover:bg-gray-100 hover:border-gray-300"
+          }`}
+        >
+          <code className="break-all">{props.objectId}</code>
+          <div
+            className={`flex-shrink-0 transition-all duration-200 ${
+              copied
+                ? "text-green-500"
+                : "text-gray-400 group-hover/objectid:text-gray-600"
+            }`}
+          >
+            {copied ? (
+              <Icon
+                icon={IconProp.CheckCircle}
+                size={SizeProp.Small}
+                thick={ThickProp.Thick}
+                className="h-3.5 w-3.5"
+              />
+            ) : (
+              <Icon
+                icon={IconProp.Copy}
+                size={SizeProp.Small}
+                thick={ThickProp.Thick}
+                className="h-3.5 w-3.5"
+              />
+            )}
+          </div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ObjectIDView;

package/UI/Components/Page/Page.tsx

@@ -96,16 +96,14 @@ const Page: FunctionComponent<ComponentProps> = (
 
       {props.sideMenu && (
         <main className="mx-auto max-w-full pb-10">
-          <div className="lg:grid lg:grid-cols-12 lg:gap-x-5">
+          <div className="flex flex-col md:flex-row md:gap-4 lg:gap-5">
             {props.sideMenu}
 
             {!props.isLoading && (
-              <div className="space-y-6 md:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
-                {props.children}
-              </div>
+              <div className="space-y-6 flex-1 min-w-0">{props.children}</div>
             )}
             {props.isLoading && (
-              <div className="lg:col-span-10 md:col-span-9">
+              <div className="flex-1 min-w-0">
                 <PageLoader isVisible={true} />
               </div>
             )}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -4,7 +4,7 @@ import React, {
   useState,
   useEffect,
 } from "react";
-import Button, { ButtonStyleType } from "../Button/Button";
+import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
 import Navigation from "../../Utils/Navigation";
@@ -37,12 +37,17 @@ export interface SideMenuItemProps {
 export interface SideMenuSectionProps {
   title: string;
   items: SideMenuItemProps[];
+  icon?: IconProp;
+  defaultCollapsed?: boolean;
+  collapsible?: boolean;
 }
 
 export interface ComponentProps {
   sections?: SideMenuSectionProps[];
   items?: SideMenuItemProps[];
   className?: string;
+  header?: ReactElement;
+  footer?: ReactElement;
   // Keep children support for backward compatibility
   children?: ReactElement | Array<ReactElement>;
 }
@@ -89,19 +94,29 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   const findActiveMenuItem: () => {
     sectionTitle?: string;
     itemTitle?: string;
+    icon?: IconProp;
   } = (): {
     sectionTitle?: string;
     itemTitle?: string;
+    icon?: IconProp;
   } => {
     // Check sections first
     if (props.sections) {
       for (const section of props.sections) {
         for (const item of section.items) {
           if (Navigation.isOnThisPage(item.link.to)) {
-            return {
+            const result: {
+              sectionTitle: string;
+              itemTitle: string;
+              icon?: IconProp;
+            } = {
               sectionTitle: section.title,
               itemTitle: item.link.title,
             };
+            if (item.icon) {
+              result.icon = item.icon;
+            }
+            return result;
           }
         }
       }
@@ -111,9 +126,16 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.items) {
       for (const item of props.items) {
         if (Navigation.isOnThisPage(item.link.to)) {
-          return {
+          const result: {
+            itemTitle: string;
+            icon?: IconProp;
+          } = {
             itemTitle: item.link.title,
           };
+          if (item.icon) {
+            result.icon = item.icon;
+          }
+          return result;
         }
       }
     }
@@ -124,10 +146,11 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   const activeItem: {
     sectionTitle?: string;
     itemTitle?: string;
+    icon?: IconProp;
   } = findActiveMenuItem();
   const displayText: string =
     activeItem.sectionTitle && activeItem.itemTitle
-      ? `${activeItem.sectionTitle} - ${activeItem.itemTitle}`
+      ? `${activeItem.sectionTitle} / ${activeItem.itemTitle}`
       : activeItem.itemTitle || "Navigation";
 
   // Re-run active item detection when location changes
@@ -146,11 +169,30 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.sections) {
       props.sections.forEach(
         (section: SideMenuSectionProps, sectionIndex: number) => {
+          // Build section props conditionally to avoid undefined values
+          const sectionProps: {
+            key: string;
+            title: string;
+            icon?: IconProp;
+            defaultCollapsed?: boolean;
+            collapsible?: boolean;
+          } = {
+            key: `section-${sectionIndex}`,
+            title: section.title,
+          };
+
+          if (section.icon) {
+            sectionProps.icon = section.icon;
+          }
+          if (section.defaultCollapsed !== undefined) {
+            sectionProps.defaultCollapsed = section.defaultCollapsed;
+          }
+          if (section.collapsible !== undefined) {
+            sectionProps.collapsible = section.collapsible;
+          }
+
           content.push(
-            <SideMenuSection
-              key={`section-${sectionIndex}`}
-              title={section.title}
-            >
+            <SideMenuSection {...sectionProps}>
               {section.items.map(
                 (item: SideMenuItemProps, itemIndex: number) => {
                   // If item has modelType, render CountModelSideMenuItem
@@ -250,40 +292,105 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     return (
       <div className="md:hidden mb-6">
         {/* Mobile toggle button */}
-        <div className="flex items-center justify-between w-full mb-4 px-4 py-3 bg-white rounded-lg border border-gray-200">
-          <div className="flex-1 mr-3">
-            <h3 className="text-base font-medium text-gray-900 truncate">
-              {displayText}
-            </h3>
+        <button
+          type="button"
+          onClick={() => {
+            setIsMobileMenuOpen(!isMobileMenuVisible);
+          }}
+          className={`
+            w-full flex items-center justify-between
+            px-3 py-2.5
+            bg-white rounded-xl
+            border border-gray-200
+            shadow-sm
+            transition-all duration-200
+            ${isMobileMenuVisible ? "ring-2 ring-indigo-100 border-indigo-200" : "hover:border-gray-300"}
+          `}
+          aria-expanded={isMobileMenuVisible}
+          aria-label={
+            isMobileMenuVisible
+              ? "Close navigation menu"
+              : "Open navigation menu"
+          }
+          data-testid="mobile-sidemenu-toggle"
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {activeItem.icon && (
+              <div className="flex items-center justify-center w-6 h-6 rounded-md bg-indigo-50 text-indigo-600 flex-shrink-0">
+                <Icon icon={activeItem.icon} className="h-3.5 w-3.5" />
+              </div>
+            )}
+            <div className="min-w-0">
+              <p className="text-xs text-gray-400 font-medium">Navigate to</p>
+              <h3 className="text-sm font-semibold text-gray-900 truncate">
+                {displayText}
+              </h3>
+            </div>
           </div>
-          <Button
-            buttonStyle={ButtonStyleType.OUTLINE}
-            onClick={() => {
-              setIsMobileMenuOpen(!isMobileMenuVisible);
-            }}
-            className="p-2 flex-shrink-0"
-            icon={isMobileMenuVisible ? IconProp.Close : IconProp.Bars3}
-            dataTestId="mobile-sidemenu-toggle"
-            tooltip={
-              isMobileMenuVisible
-                ? "Close navigation menu"
-                : "Open navigation menu"
-            }
-          />
-        </div>
-
-        {/* Mobile collapsible menu */}
-        {isMobileMenuVisible && (
           <div
-            ref={mobileMenuRef}
-            className="bg-white rounded-lg border border-gray-200 py-4 px-4 mb-6 transition-all duration-200 ease-in-out"
-            role="navigation"
-            aria-label="Main navigation"
+            className={`
+              flex items-center justify-center
+              w-6 h-6 rounded-md
+              transition-all duration-200
+              ${isMobileMenuVisible ? "bg-indigo-100 text-indigo-600" : "bg-gray-100 text-gray-500"}
+            `}
           >
-            <nav className="space-y-3" onClick={handleMenuItemClick}>
-              {renderMenuContent()}
-            </nav>
+            <Icon
+              icon={isMobileMenuVisible ? IconProp.Close : IconProp.Bars3}
+              className="h-3.5 w-3.5"
+            />
           </div>
+        </button>
+
+        {/* Mobile collapsible menu with overlay */}
+        {isMobileMenuVisible && (
+          <>
+            {/* Backdrop */}
+            <div
+              className="fixed inset-0 bg-black/20 z-40 animate-in fade-in duration-200"
+              onClick={() => {
+                setIsMobileMenuOpen(false);
+              }}
+            />
+
+            {/* Menu Panel */}
+            <div
+              ref={mobileMenuRef}
+              className={`
+                relative z-50
+                mt-2
+                bg-white rounded-xl
+                border border-gray-200
+                shadow-xl
+                overflow-hidden
+                animate-in slide-in-from-top-2 fade-in duration-200
+              `}
+              role="navigation"
+              aria-label="Main navigation"
+            >
+              {/* Optional Header */}
+              {props.header && (
+                <div className="px-3 py-2 border-b border-gray-100 bg-gray-50/50">
+                  {props.header}
+                </div>
+              )}
+
+              {/* Menu Items */}
+              <nav
+                className="p-2 max-h-[60vh] overflow-y-auto"
+                onClick={handleMenuItemClick}
+              >
+                <div className="space-y-0.5">{renderMenuContent()}</div>
+              </nav>
+
+              {/* Optional Footer */}
+              {props.footer && (
+                <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+                  {props.footer}
+                </div>
+              )}
+            </div>
+          </>
         )}
       </div>
     );
@@ -292,11 +399,39 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   // Desktop view
   return (
     <aside
-      className={`hidden md:block py-6 px-2 sm:px-6 lg:col-span-2 md:col-span-3 lg:py-0 lg:px-0 mb-10 ${props.className || ""}`}
+      className={`hidden md:block w-52 lg:w-60 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >
-      <nav className="space-y-3">{renderMenuContent()}</nav>
+      <div className="sticky top-6">
+        <div
+          className={`
+            bg-white rounded-2xl
+            border border-gray-200/80
+            shadow-sm
+            overflow-hidden
+          `}
+        >
+          {/* Optional Header */}
+          {props.header && (
+            <div className="px-3 py-3 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
+              {props.header}
+            </div>
+          )}
+
+          {/* Menu Content */}
+          <nav className="p-2">
+            <div className="space-y-0.5">{renderMenuContent()}</div>
+          </nav>
+
+          {/* Optional Footer */}
+          {props.footer && (
+            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+              {props.footer}
+            </div>
+          )}
+        </div>
+      </div>
     </aside>
   );
 };

package/UI/Components/SideMenu/SideMenuDivider.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+
+export interface ComponentProps {
+  className?: string;
+}
+
+const SideMenuDivider: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+) => {
+  return (
+    <div className={`my-3 px-3 ${props.className || ""}`}>
+      <div className="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
+    </div>
+  );
+};
+
+export default SideMenuDivider;