@oneuptime/common 9.2.27 → 9.3.0

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -21,195 +21,148 @@ export interface ComponentProps {
 const SideMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
-  const badgeClasName: string = `p-1 rounded-full pr-3 pl-3 text-white  text-sm`;
-
-  let linkClassName: string = `text-gray-500 hover:text-gray-900 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-
-  if (Navigation.isOnThisPage(props.link.to)) {
-    linkClassName = `bg-gray-100 text-indigo-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-  }
-
-  let subItemLinkClassName: string = `text-gray-500 hover:text-gray-900 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-
-  if (props.subItemLink && Navigation.isOnThisPage(props.subItemLink.to)) {
-    subItemLinkClassName = `bg-gray-100 text-indigo-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-  }
-
-  /*
-   * if(props.badge && props.badge > 0){
-   *     if(props.badgeType === BadgeType.DANGER){
-   *         linkClassName = `text-red-400 hover:text-red-600 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             linkClassName = `bg-gray-100 text-red-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   *         }
-   */
-
-  //     }
-
-  /*
-   *     if(props.badgeType === BadgeType.WARNING){
-   *         linkClassName = `text-yellow-400 hover:text-yellow-600 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             linkClassName = `bg-gray-100 text-yellow-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   *         }
-   *     }
-   */
-
-  /*
-   *     if(props.badgeType === BadgeType.SUCCESS){
-   *         linkClassName = `text-emerald-400 hover:text-emerald-600 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             linkClassName = `bg-gray-100 text-emerald-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   *         }
-   *     }
-   * }
-   */
-
-  let iconClassName: string =
-    "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-
-  if (Navigation.isOnThisPage(props.link.to)) {
-    iconClassName = "text-indigo-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-  }
-
-  let subItemIconClassName: string =
-    "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-
-  if (props.subItemLink && Navigation.isOnThisPage(props.subItemLink.to)) {
-    subItemIconClassName = "text-indigo-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-  }
-
-  /*
-   * if(props.badge && props.badge > 0){
-   *     if(props.badgeType === BadgeType.DANGER){
-   *         iconClassName = `text-red-400 group-hover:text-red-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             iconClassName = `text-red-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   *         }
-   */
-
-  //     }
-
-  /*
-   *     if(props.badgeType === BadgeType.WARNING){
-   *         iconClassName = `text-yellow-400 group-hover:text-yellow-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             iconClassName = `text-yellow-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   *         }
-   *     }
-   */
-
-  /*
-   *     if(props.badgeType === BadgeType.SUCCESS){
-   *         iconClassName = `text-emerald-400 group-hover:text-emerald-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             iconClassName = `text-emerald-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   *         }
-   *     }
-   * }
-   */
+  const isActive: boolean = Navigation.isOnThisPage(props.link.to);
+  const isSubItemActive: boolean = props.subItemLink
+    ? Navigation.isOnThisPage(props.subItemLink.to)
+    : false;
 
   return (
     <>
+      {/* Main Menu Item */}
       <UILink
-        className={`${
-          props.className ? props.className : ""
-        }  ${linkClassName} flex justify-between`}
+        className={`
+          ${props.className || ""}
+          group relative flex items-center justify-between
+          px-2 py-1.5 rounded-lg
+          text-sm font-medium
+          transition-all duration-200 ease-out
+          ${
+            isActive
+              ? "bg-gradient-to-r from-indigo-50 to-indigo-50/50 text-indigo-700 shadow-sm"
+              : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+          }
+        `}
         to={props.link.to}
         onClick={() => {
           window.scrollTo({ top: 0, behavior: "smooth" });
         }}
       >
-        <div className="flex">
-          {props.icon ? (
-            <>
-              <Icon className={iconClassName} icon={props.icon} />
-            </>
-          ) : (
-            <></>
+        {/* Active Indicator Bar */}
+        <div
+          className={`
+            absolute left-0 top-1/2 -translate-y-1/2
+            w-0.5 rounded-full
+            transition-all duration-200 ease-out
+            ${isActive ? "h-5 bg-indigo-600" : "h-0 bg-transparent"}
+          `}
+        />
+
+        {/* Content Container */}
+        <div className="flex items-center min-w-0 gap-2">
+          {/* Icon with background on active */}
+          {props.icon && (
+            <div
+              className={`
+                flex items-center justify-center
+                w-6 h-6 rounded-md
+                transition-all duration-200
+                ${
+                  isActive
+                    ? "bg-indigo-100 text-indigo-600"
+                    : "bg-gray-100 text-gray-500 group-hover:bg-gray-200 group-hover:text-gray-700"
+                }
+              `}
+            >
+              <Icon icon={props.icon} className="h-3.5 w-3.5" />
+            </div>
           )}
 
-          <span className="truncate mt-1">{props.link.title}</span>
+          {/* Title */}
+          <span
+            className={`
+              truncate transition-colors duration-200
+              ${isActive ? "font-semibold" : ""}
+            `}
+          >
+            {props.link.title}
+          </span>
         </div>
 
-        {props.badge || props.showAlert || props.showWarning ? (
-          <div className={badgeClasName}>
-            {props.badge ? (
+        {/* Badge / Alert / Warning Container */}
+        {(props.badge !== undefined ||
+          props.showAlert ||
+          props.showWarning) && (
+          <div className="flex items-center gap-1.5 ml-2 flex-shrink-0">
+            {props.badge !== undefined && (
               <Badge badgeCount={props.badge} badgeType={props.badgeType} />
-            ) : (
-              <></>
             )}
-
-            {props.showAlert ? (
-              <>
-                <Icon
-                  className="float-end text-red-900"
-                  icon={IconProp.Error}
-                />
-              </>
-            ) : (
-              <></>
+            {props.showAlert && (
+              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-red-50 to-red-100 ring-1 ring-inset ring-red-200/60 shadow-sm">
+                <Icon icon={IconProp.Error} className="text-red-600 h-3 w-3" />
+              </div>
             )}
-            {props.showWarning ? (
-              <>
+            {props.showWarning && (
+              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-inset ring-amber-200/60 shadow-sm">
                 <Icon
-                  className="float-end text-yellow-900"
                   icon={IconProp.Alert}
+                  className="text-amber-600 h-3 w-3"
                 />
-              </>
-            ) : (
-              <></>
+              </div>
             )}
           </div>
-        ) : (
-          <></>
         )}
+
+        {/* Hover indicator */}
+        <div
+          className={`
+            absolute inset-0 rounded-lg
+            border-2 border-transparent
+            transition-all duration-200
+            ${!isActive ? "group-hover:border-gray-200" : ""}
+            pointer-events-none
+          `}
+        />
       </UILink>
-      {props.subItemLink ? (
+
+      {/* Sub Item */}
+      {props.subItemLink && (
         <UILink
-          className={`${
-            props.className ? props.className : ""
-          }  ${subItemLinkClassName} flex justify-between`}
+          className={`
+            ${props.className || ""}
+            group relative flex items-center justify-between
+            ml-8 px-2 py-1.5 rounded-lg
+            text-sm font-medium
+            transition-all duration-200 ease-out
+            ${
+              isSubItemActive
+                ? "bg-indigo-50/70 text-indigo-700"
+                : "text-gray-500 hover:bg-gray-50 hover:text-gray-700"
+            }
+          `}
           to={props.subItemLink.to}
           onClick={() => {
             window.scrollTo({ top: 0, behavior: "smooth" });
           }}
         >
-          <div className="ml-8 flex">
-            {props.icon ? (
-              <>
-                <Icon
-                  className={subItemIconClassName}
-                  icon={props.subItemIcon || IconProp.MinusSmall}
-                />
-              </>
-            ) : (
-              <></>
-            )}
-
-            <span className="truncate mt-1">{props.subItemLink.title}</span>
+          {/* Connector Line */}
+          <div className="absolute -left-3 top-1/2 w-2 h-px bg-gray-200" />
+
+          {/* Sub Item Icon */}
+          <div className="flex items-center min-w-0 gap-2">
+            <Icon
+              icon={props.subItemIcon || IconProp.MinusSmall}
+              className={`
+                h-4 w-4 transition-colors duration-200
+                ${
+                  isSubItemActive
+                    ? "text-indigo-500"
+                    : "text-gray-400 group-hover:text-gray-600"
+                }
+              `}
+            />
+            <span className="truncate">{props.subItemLink.title}</span>
           </div>
         </UILink>
-      ) : (
-        <> </>
       )}
     </>
   );

package/UI/Components/SideMenu/SideMenuSection.tsx

@@ -1,17 +1,67 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 
 export interface ComponentProps {
   title: string;
   children: ReactElement | Array<ReactElement>;
+  defaultCollapsed?: boolean;
+  collapsible?: boolean;
+  icon?: IconProp;
 }
 
 const SideMenuSection: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(
+    props.defaultCollapsed || false,
+  );
+
+  const isCollapsible: boolean = props.collapsible ?? true;
+
+  const handleToggle: () => void = (): void => {
+    if (isCollapsible) {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+
   return (
     <div className="mb-2">
-      <h6 className="text-sm text-gray-500">{props.title}</h6>
-      <div>{props.children}</div>
+      {/* Section Header */}
+      <button
+        type="button"
+        onClick={handleToggle}
+        className={`w-full flex items-center justify-between px-2 py-1.5 rounded-lg transition-colors duration-150 ${
+          isCollapsible ? "hover:bg-gray-50 cursor-pointer" : "cursor-default"
+        }`}
+        aria-expanded={!isCollapsed}
+      >
+        <div className="flex items-center gap-2">
+          {props.icon && (
+            <Icon icon={props.icon} className="h-4 w-4 text-gray-400" />
+          )}
+          <h6 className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            {props.title}
+          </h6>
+        </div>
+        {isCollapsible && (
+          <Icon
+            icon={IconProp.ChevronDown}
+            className={`h-4 w-4 text-gray-400 transition-transform duration-200 ${
+              isCollapsed ? "-rotate-90" : "rotate-0"
+            }`}
+          />
+        )}
+      </button>
+
+      {/* Section Content with Animation */}
+      <div
+        className={`overflow-hidden transition-all duration-200 ease-in-out ${
+          isCollapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
+        }`}
+      >
+        <div className="mt-0.5 space-y-0">{props.children}</div>
+      </div>
     </div>
   );
 };

package/UI/Components/Table/Table.tsx

@@ -321,7 +321,7 @@ const Table: TableFunction = <T extends GenericObject>(
             </div>
           </div>
         </div>
-        <div className="bg-gray-50 text-right md:-mx-6 -mb-6">
+        <div className="bg-gray-50 text-right md:-mx-6 -mb-6 rounded-b-xl">
           {!props.disablePagination && (
             <Pagination
               singularLabel={props.singularLabel}

package/UI/Components/Types/FieldType.ts

@@ -1,5 +1,6 @@
 enum FieldType {
   ObjectID = "ObjectID",
+  Heading = "Heading",
   Name = "Name",
   File = "File",
   Percent = "Percent",
@@ -35,6 +36,7 @@ enum FieldType {
   Minutes = "Minutes",
   ArrayOfText = "ArrayOfText",
   Code = "Code",
+  InlineCode = "InlineCode",
 }
 
 export default FieldType;

package/UI/Config.ts

@@ -253,3 +253,8 @@ export const SlackAppClientId: string | null =
 
 export const MicrosoftTeamsAppClientId: string | null =
   env("MICROSOFT_TEAMS_APP_CLIENT_ID") || null;
+
+export const GitHubAppClientId: string | null =
+  env("GITHUB_APP_CLIENT_ID") || null;
+
+export const GitHubAppName: string | null = env("GITHUB_APP_NAME") || null;