From 3e5c81fe1838e5da8fd0dbfb70bf6ef123c57aaa Mon Sep 17 00:00:00 2001 From: celine Date: Tue, 6 Jan 2026 16:16:29 -0500 Subject: [PATCH] moved menu into its own file --- .../home/Actions/CreateNewButton.tsx | 2 +- .../home/LeafletList/LeafletOptions.tsx | 2 +- app/[leaflet_id]/actions/PublishButton.tsx | 2 +- .../actions/ShareOptions/index.tsx | 2 +- .../[did]/[publication]/[rkey]/PostPages.tsx | 2 +- .../[did]/[publication]/dashboard/Actions.tsx | 3 +- .../dashboard/PublicationSubscribers.tsx | 3 +- .../dashboard/PublishedPostsLists.tsx | 2 +- components/Blocks/MailboxBlock.tsx | 3 +- components/Buttons.tsx | 10 +- components/Layout.tsx | 94 ------------------- components/Pages/PageOptions.tsx | 4 +- 12 files changed, 21 insertions(+), 108 deletions(-) diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx index bfd7dfe7..417c5dcd 100644 --- a/app/(home-pages)/home/Actions/CreateNewButton.tsx +++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx @@ -5,7 +5,7 @@ import { ActionButton } from "components/ActionBar/ActionButton"; import { AddTiny } from "components/Icons/AddTiny"; import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall"; import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall"; -import { Menu, MenuItem } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; import { useIsMobile } from "src/hooks/isMobile"; export const CreateNewLeafletButton = (props: {}) => { diff --git a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx index 99930da9..b87c4715 100644 --- a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx @@ -1,6 +1,6 @@ "use client"; -import { Menu, MenuItem } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; import { useState } from "react"; import { ButtonPrimary, ButtonTertiary } from "components/Buttons"; import { useToaster } from "components/Toast"; diff --git a/app/[leaflet_id]/actions/PublishButton.tsx b/app/[leaflet_id]/actions/PublishButton.tsx index 0991bffa..4c2e8a29 100644 --- a/app/[leaflet_id]/actions/PublishButton.tsx +++ b/app/[leaflet_id]/actions/PublishButton.tsx @@ -13,7 +13,7 @@ import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; import { PublishSmall } from "components/Icons/PublishSmall"; import { useIdentityData } from "components/IdentityProvider"; import { InputWithLabel } from "components/Input"; -import { Menu, MenuItem } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; import { useLeafletDomains, useLeafletPublicationData, diff --git a/app/[leaflet_id]/actions/ShareOptions/index.tsx b/app/[leaflet_id]/actions/ShareOptions/index.tsx index 7739150b..7ad067f8 100644 --- a/app/[leaflet_id]/actions/ShareOptions/index.tsx +++ b/app/[leaflet_id]/actions/ShareOptions/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"; import { getShareLink } from "./getShareLink"; import { useEntitySetContext } from "components/EntitySetProvider"; import { useSmoker } from "components/Toast"; -import { Menu, MenuItem } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; import { ActionButton } from "components/ActionBar/ActionButton"; import useSWR from "swr"; import LoginForm from "app/login/LoginForm"; diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx index 307628f2..76e689c4 100644 --- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx +++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx @@ -374,7 +374,7 @@ const PageOptions = (props: { return (
diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx index fbd807a0..fc1ae126 100644 --- a/app/lish/[did]/[publication]/dashboard/Actions.tsx +++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx @@ -4,8 +4,7 @@ import { NewDraftActionButton } from "./NewDraftButton"; import { PublicationSettingsButton } from "./PublicationSettings"; import { ActionButton } from "components/ActionBar/ActionButton"; import { ShareSmall } from "components/Icons/ShareSmall"; -import { Menu } from "components/Layout"; -import { MenuItem } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; import { usePublicationData } from "./PublicationSWRProvider"; import { useSmoker } from "components/Toast"; diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx index b3053fa6..ac1b27b2 100644 --- a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx @@ -4,7 +4,8 @@ import { usePublicationData } from "./PublicationSWRProvider"; import { ButtonPrimary } from "components/Buttons"; import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; import { useSmoker } from "components/Toast"; -import { Menu, MenuItem, Separator } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; +import { Separator } from "components/Layout"; import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; import { Checkbox } from "components/Checkbox"; import { useEffect, useState } from "react"; diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx index 83a5b00a..dba8f845 100644 --- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx @@ -7,7 +7,7 @@ import { usePublicationData } from "./PublicationSWRProvider"; import { Fragment, useState } from "react"; import { useParams } from "next/navigation"; import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; -import { Menu, MenuItem } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; import { deletePost } from "./deletePost"; import { ButtonPrimary } from "components/Buttons"; import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; diff --git a/components/Blocks/MailboxBlock.tsx b/components/Blocks/MailboxBlock.tsx index 17236337..ae68781b 100644 --- a/components/Blocks/MailboxBlock.tsx +++ b/components/Blocks/MailboxBlock.tsx @@ -1,6 +1,7 @@ import { ButtonPrimary } from "components/Buttons"; import { Popover } from "components/Popover"; -import { Menu, MenuItem, Separator } from "components/Layout"; +import { MenuItem } from "components/Menu"; +import { Separator } from "components/Layout"; import { useUIState } from "src/useUIState"; import { useState } from "react"; import { useSmoker, useToaster } from "components/Toast"; diff --git a/components/Buttons.tsx b/components/Buttons.tsx index 895051bd..aca2d3e0 100644 --- a/components/Buttons.tsx +++ b/components/Buttons.tsx @@ -165,7 +165,11 @@ export const TooltipButton = (props: { side={props.side ? props.side : undefined} sideOffset={6} alignOffset={12} - className="z-10 bg-border rounded-md py-1 px-[6px] font-bold text-secondary text-sm" + className="z-10 rounded-md py-1 px-[6px] font-bold text-secondary text-sm" + style={{ + backgroundColor: + "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 85%)", + }} > {props.tooltipContent} diff --git a/components/Layout.tsx b/components/Layout.tsx index cd754906..c465b185 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,101 +1,7 @@ -"use client"; -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; -import { theme } from "tailwind.config"; -import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; -import { PopoverArrow } from "./Icons/PopoverArrow"; -import { PopoverOpenContext } from "./Popover/PopoverContext"; -import { useState } from "react"; - export const Separator = (props: { classname?: string }) => { return
; }; -export const Menu = (props: { - open?: boolean; - trigger: React.ReactNode; - children: React.ReactNode; - align?: "start" | "end" | "center" | undefined; - alignOffset?: number; - side?: "top" | "bottom" | "right" | "left" | undefined; - background?: string; - border?: string; - className?: string; - onOpenChange?: (o: boolean) => void; - asChild?: boolean; -}) => { - let [open, setOpen] = useState(props.open || false); - return ( - { - setOpen(o); - props.onOpenChange?.(o); - }} - open={props.open} - > - - - {props.trigger} - - - - - {props.children} - - - - - - - - - ); -}; - -export const MenuItem = (props: { - children?: React.ReactNode; - className?: string; - onSelect: (e: Event) => void; - id?: string; -}) => { - return ( - { - props.onSelect(event); - }} - className={` - menuItem - z-10 py-1! px-2! - flex gap-2 - ${props.className} - `} - > - {props.children} - - ); -}; - export const ShortcutKey = (props: { children: React.ReactNode }) => { return ( diff --git a/components/Pages/PageOptions.tsx b/components/Pages/PageOptions.tsx index cb91d346..df608f46 100644 --- a/components/Pages/PageOptions.tsx +++ b/components/Pages/PageOptions.tsx @@ -7,7 +7,7 @@ import { useEntitySetContext } from "../EntitySetProvider"; import { useReplicache } from "src/replicache"; import { Media } from "../Media"; -import { MenuItem, Menu } from "../Layout"; +import { MenuItem, Menu } from "../Menu"; import { PageThemeSetter } from "../ThemeManager/PageThemeSetter"; import { PageShareMenu } from "./PageShareMenu"; import { useUndoState } from "src/undoManager"; @@ -61,7 +61,7 @@ export const PageOptions = (props: {
{!props.first && ( -- 2.51.2