From f30b459dfbc2b820f451108065a7414ee6df94cf Mon Sep 17 00:00:00 2001
From: Dani Moreno <hi@dazlog.com>
Date: Thu, 16 Jan 2025 16:06:59 +0100
Subject: [PATCH] drawer

---
 .../Information/Headers/BaseHeader/index.tsx  |  4 +-
 .../Information/Headers/Metadata/index.tsx    | 28 ++++++++++--
 .../Navigation/Dropdown/index.tsx             | 44 +++++++++++++------
 lib/ui/drawer.tsx                             |  4 +-
 lib/ui/dropdown-menu.tsx                      |  2 +-
 5 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/lib/experimental/Information/Headers/BaseHeader/index.tsx b/lib/experimental/Information/Headers/BaseHeader/index.tsx
index 0131d7094..4a7e50b58 100644
--- a/lib/experimental/Information/Headers/BaseHeader/index.tsx
+++ b/lib/experimental/Information/Headers/BaseHeader/index.tsx
@@ -84,7 +84,7 @@ export function BaseHeader({
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 md:hidden">
           {metadata && <Metadata items={allMetadata} />}
         </div>
-        <div className="flex w-full shrink-0 flex-wrap items-center gap-x-3 gap-y-4 md:w-fit md:flex-row-reverse md:gap-y-2 md:overflow-x-auto">
+        <div className="flex w-full shrink-0 flex-wrap items-center gap-x-2 gap-y-3 md:w-fit md:flex-row-reverse md:gap-y-2 md:overflow-x-auto">
           {primaryAction && (
             <>
               <div className="hidden md:block">
@@ -107,7 +107,7 @@ export function BaseHeader({
             </>
           )}
           {primaryAction && (secondaryActions || otherActions) && (
-            <div className="hidden h-4 w-px bg-f1-background-secondary md:block" />
+            <div className="mx-1 hidden h-4 w-px bg-f1-background-secondary md:block" />
           )}
           {secondaryActions &&
             secondaryActions.map((action) => (
diff --git a/lib/experimental/Information/Headers/Metadata/index.tsx b/lib/experimental/Information/Headers/Metadata/index.tsx
index 49292bac8..425ef1ecd 100644
--- a/lib/experimental/Information/Headers/Metadata/index.tsx
+++ b/lib/experimental/Information/Headers/Metadata/index.tsx
@@ -8,6 +8,7 @@ import {
   StatusTag,
   StatusVariant,
 } from "@/experimental/Information/Tags/StatusTag"
+import { MobileDropdown } from "@/experimental/Navigation/Dropdown"
 import { Tooltip } from "@/experimental/Overlays/Tooltip"
 import { cn } from "@/lib/utils"
 import { AnimatePresence, motion } from "framer-motion"
@@ -53,6 +54,7 @@ function renderMetadataValue(item: MetadataItem) {
 function MetadataItem({ item }: { item: MetadataItem }) {
   const [isActive, setIsActive] = useState(false)
   const isAction = item.actions?.length
+  const metadataValue = renderMetadataValue(item)
 
   return (
     <div className="flex h-8 items-center gap-2">
@@ -68,9 +70,29 @@ function MetadataItem({ item }: { item: MetadataItem }) {
         onBlur={() => isAction && setIsActive(false)}
         className="relative flex h-5 w-fit items-center hover:cursor-default"
       >
-        <div className="font-medium text-f1-foreground">
-          {renderMetadataValue(item)}
+        <div
+          className={cn(
+            "hidden font-medium text-f1-foreground md:block",
+            !isAction && "block"
+          )}
+        >
+          {metadataValue}
         </div>
+        {isAction && (
+          <div className="w-full md:hidden">
+            <MobileDropdown
+              items={
+                item.actions?.map((action) => ({
+                  label: action.label,
+                  icon: action.icon,
+                  onClick: action.onClick,
+                })) ?? []
+              }
+            >
+              {metadataValue}
+            </MobileDropdown>
+          </div>
+        )}
         <AnimatePresence>
           {isActive && isAction && (
             <motion.div
@@ -84,7 +106,7 @@ function MetadataItem({ item }: { item: MetadataItem }) {
               transition={{ duration: 0.1 }}
             >
               <div className="flex h-5 items-center font-medium text-f1-foreground">
-                {renderMetadataValue(item)}
+                {metadataValue}
               </div>
               {isAction && (
                 <motion.div
diff --git a/lib/experimental/Navigation/Dropdown/index.tsx b/lib/experimental/Navigation/Dropdown/index.tsx
index e7446d97b..0e01e93f4 100644
--- a/lib/experimental/Navigation/Dropdown/index.tsx
+++ b/lib/experimental/Navigation/Dropdown/index.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonProps } from "@/components/Actions/Button"
-import { IconType } from "@/components/Utilities/Icon"
+import { Icon, IconType } from "@/components/Utilities/Icon"
 import { AvatarVariant } from "@/experimental/Information/Avatars/utils"
-import { Ellipsis, EllipsisHorizontal } from "@/icons/app"
+import { EllipsisHorizontal } from "@/icons/app"
 import { Link } from "@/lib/linkHandler"
 import { cn } from "@/lib/utils"
 import {
@@ -17,7 +17,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/ui/dropdown-menu"
-import { Separator } from "@/ui/separator"
 import { useState } from "react"
 import { NavigationItem } from "../utils"
 import { DropdownItemContent } from "./DropdownItem"
@@ -71,7 +70,7 @@ const DropdownItem = ({ item }: { item: DropdownItemObject }) => {
 
 export function Dropdown({
   items,
-  icon = Ellipsis,
+  icon = EllipsisHorizontal,
   size,
   children,
 }: DropdownProps) {
@@ -89,7 +88,7 @@ export function Dropdown({
           />
         )}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="start">
         {items.map((item, index) =>
           item === "separator" ? (
             <DropdownMenuSeparator key={index} />
@@ -121,10 +120,13 @@ export const MobileDropdown = ({ items, children }: DropdownProps) => {
       </DrawerTrigger>
       <DrawerOverlay className="bg-f1-background-overlay" />
       <DrawerContent className="bg-f1-background">
-        <div className="flex flex-col gap-2 p-4">
+        <div className="flex flex-col px-2 pb-3 pt-2">
           {items.map((item, index) =>
             item === "separator" ? (
-              <Separator key={`separator-${index}`} />
+              <div
+                key={`separator-${index}`}
+                className="mx-[-8px] my-2 h-px w-[calc(100%+16px)] bg-f1-border-secondary"
+              />
             ) : item.href ? (
               <Link
                 {...item}
@@ -138,17 +140,33 @@ export const MobileDropdown = ({ items, children }: DropdownProps) => {
                 <DropdownItemContent item={item} />
               </Link>
             ) : (
-              <Button
+              <button
                 key={item.label}
-                label={item.label}
                 onClick={() => {
                   item.onClick?.()
                   setOpen(false)
                 }}
-                variant={item.critical ? "critical" : "outline"}
-                icon={item.icon}
-                size="lg"
-              />
+                className="flex w-full items-center gap-2 p-3"
+              >
+                {item.icon && (
+                  <span
+                    className={cn(
+                      "h-5 w-5 text-f1-icon",
+                      item.critical && "text-f1-icon-critical"
+                    )}
+                  >
+                    <Icon icon={item.icon} size="md" />
+                  </span>
+                )}
+                <span
+                  className={cn(
+                    "font-medium",
+                    item.critical && "text-f1-foreground-critical"
+                  )}
+                >
+                  {item.label}
+                </span>
+              </button>
             )
           )}
         </div>
diff --git a/lib/ui/drawer.tsx b/lib/ui/drawer.tsx
index 81af574e8..d496195c9 100644
--- a/lib/ui/drawer.tsx
+++ b/lib/ui/drawer.tsx
@@ -41,12 +41,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl",
         className
       )}
       {...props}
     >
-      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+      <div className="mx-auto mt-2 h-1 w-8 rounded-full bg-f1-border" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
diff --git a/lib/ui/dropdown-menu.tsx b/lib/ui/dropdown-menu.tsx
index d07aaa89f..b9b7685ca 100644
--- a/lib/ui/dropdown-menu.tsx
+++ b/lib/ui/dropdown-menu.tsx
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded px-3 py-2 text-base font-medium outline-none transition-colors after:absolute after:inset-x-1 after:inset-y-0 after:h-full after:rounded after:bg-f1-background-hover after:opacity-0 after:transition-opacity after:duration-75 after:content-[''] first:pt-3 first:after:top-1 first:after:h-[calc(100%-0.25rem)] last:pb-3 last:after:bottom-1 last:after:h-[calc(100%-0.25rem)] hover:after:opacity-100 focus:after:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded py-2 pl-3 pr-5 text-base font-medium outline-none transition-colors after:absolute after:inset-x-1 after:inset-y-0 after:h-full after:rounded after:bg-f1-background-hover after:opacity-0 after:transition-opacity after:duration-75 after:content-[''] first:pt-3 first:after:top-1 first:after:h-[calc(100%-0.25rem)] last:pb-3 last:after:bottom-1 last:after:h-[calc(100%-0.25rem)] hover:after:opacity-100 focus:after:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "focus:outline-none focus:ring-0 focus:ring-transparent", // Temporal fix for Gamma issue
       inset && "pl-8",
       className