diff --git a/packages/pl-fe/.gitpod.yml b/packages/pl-fe/.gitpod.yml deleted file mode 100644 index f2bf4259f..000000000 --- a/packages/pl-fe/.gitpod.yml +++ /dev/null @@ -1,11 +0,0 @@ -# This configuration file was automatically generated by Gitpod. -# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) -# and commit this file to your remote git repository to share the goodness with others. - -# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart - -tasks: - - init: yarn install && yarn run build - command: yarn run start - - diff --git a/packages/pl-fe/.npmrc b/packages/pl-fe/.npmrc deleted file mode 100644 index 41583e36c..000000000 --- a/packages/pl-fe/.npmrc +++ /dev/null @@ -1 +0,0 @@ -@jsr:registry=https://npm.jsr.io diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json index 28837b1f9..1b0bb1bc3 100644 --- a/packages/pl-fe/package.json +++ b/packages/pl-fe/package.json @@ -56,8 +56,6 @@ "@mkljczk/lexical-remark": "^0.4.0", "@mkljczk/react-hotkeys": "^1.2.2", "@reach/combobox": "^0.18.0", - "@reach/menu-button": "^0.18.0", - "@reach/popover": "^0.18.0", "@reach/rect": "^0.18.0", "@reach/tabs": "^0.18.0", "@reduxjs/toolkit": "^2.0.1", @@ -188,7 +186,7 @@ "husky": "^9.1.6", "jsdom": "^24.0.0", "lint-staged": ">=10", - "rollup-plugin-visualizer": "^5.12.0", + "rollup-plugin-bundle-stats": "^4.16.0", "stylelint": "^16.9.0", "stylelint-config-standard-scss": "^12.0.0", "tailwindcss": "^3.4.13", diff --git a/packages/pl-fe/src/components/ui/index.ts b/packages/pl-fe/src/components/ui/index.ts index eeb0b1eb4..16eccf912 100644 --- a/packages/pl-fe/src/components/ui/index.ts +++ b/packages/pl-fe/src/components/ui/index.ts @@ -27,15 +27,6 @@ export { default as Icon } from './icon/icon'; export { default as IconButton } from './icon-button/icon-button'; export { default as Input } from './input/input'; export { default as Layout } from './layout/layout'; -export { - Menu, - MenuButton, - MenuDivider, - MenuItem, - MenuItems, - MenuLink, - MenuList, -} from './menu/menu'; export { default as Modal } from './modal/modal'; export { default as Popover } from './popover/popover'; export { default as Portal } from './portal/portal'; diff --git a/packages/pl-fe/src/components/ui/menu/menu.css b/packages/pl-fe/src/components/ui/menu/menu.css deleted file mode 100644 index 123f0942a..000000000 --- a/packages/pl-fe/src/components/ui/menu/menu.css +++ /dev/null @@ -1,33 +0,0 @@ -[data-reach-menu-popover] { - @apply origin-top-right rtl:origin-top-left absolute mt-2 rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-gray-800 focus:outline-none z-[1003]; -} - -[data-reach-menu-button] { - @apply focus:ring-primary-500 focus:ring-2 focus:ring-offset-2; -} - -div:focus[data-reach-menu-list] { - outline: none; -} - -[data-reach-menu-item][data-selected] { - @apply bg-gray-100 dark:bg-gray-800; -} - -[data-reach-menu-list] { - @apply py-1; -} - -[data-reach-menu-item], -[data-reach-menu-link] { - @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 cursor-pointer; -} - -[data-reach-menu-link] { - @apply hover:bg-gray-100 dark:hover:bg-gray-800; -} - -[data-reach-menu-item][data-disabled], -[data-reach-menu-link][data-disabled] { - @apply opacity-25 cursor-default; -} diff --git a/packages/pl-fe/src/components/ui/menu/menu.tsx b/packages/pl-fe/src/components/ui/menu/menu.tsx deleted file mode 100644 index 78dc5db0f..000000000 --- a/packages/pl-fe/src/components/ui/menu/menu.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { - Menu, - MenuButton, - MenuItem, - MenuItems, - MenuPopover, - MenuLink, - MenuListProps, -} from '@reach/menu-button'; -import { positionDefault, positionRight } from '@reach/popover'; -import clsx from 'clsx'; -import React from 'react'; - -import './menu.css'; - -interface IMenuList extends Omit { - /** Position of the dropdown menu. */ - position?: 'left' | 'right'; - className?: string; -} - -/** Renders children as a dropdown menu. */ -const MenuList: React.FC = (props) => { - const { position, className, ...filteredProps } = props; - - return ( - - event.nativeEvent.stopImmediatePropagation()} - className={ - clsx(className, 'shadow-menu rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900') - } - {...filteredProps} - /> - - ); -}; - -/** Divides menu items. */ -const MenuDivider = () =>
; - -export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink }; diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx index 12648003a..23402b1d4 100644 --- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx @@ -3,7 +3,8 @@ import { defineMessages, useIntl } from 'react-intl'; import { Link, useHistory, useParams } from 'react-router-dom'; import { blockAccount, unblockAccount } from 'pl-fe/actions/accounts'; -import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text } from 'pl-fe/components/ui'; +import DropdownMenu, { type Menu } from 'pl-fe/components/dropdown-menu'; +import { Avatar, HStack, IconButton, Stack, Text } from 'pl-fe/components/ui'; import VerificationBadge from 'pl-fe/components/verification-badge'; import { useChatContext } from 'pl-fe/contexts/chat-context'; import { Entities } from 'pl-fe/entity-store/entities'; @@ -104,6 +105,20 @@ const ChatPageMain = () => { return null; } + const menuItems: Menu = [ + { + icon: require('@tabler/icons/outline/ban.svg'), + text: intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct }), + action: isBlocking ? handleUnblockUser : handleBlockUser, + }, + ]; + + if (features.chatsDelete) menuItems.push({ + icon: require('@tabler/icons/outline/logout.svg'), + text: intl.formatMessage(messages.leaveChat), + action: handleLeaveChat, + }); + return ( @@ -132,52 +147,19 @@ const ChatPageMain = () => { - - - - - - - - - {chat.account.display_name} - @{chat.account.acct} - - - - - -
- - {intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })} -
- - - {features.chatsDelete && ( - -
- - {intl.formatMessage(messages.leaveChat)} -
- - )} + ( + + + + {chat.account.display_name} + @{chat.account.acct} - - - + + )} + items={menuItems} + />
diff --git a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx index 7ac72b41b..b47af025b 100644 --- a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx +++ b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx @@ -7,7 +7,6 @@ import { Link } from 'react-router-dom'; import { fetchOwnAccounts, logOut, switchAccount } from 'pl-fe/actions/auth'; import Account from 'pl-fe/components/account'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; -import { MenuDivider } from 'pl-fe/components/ui'; import { useAppDispatch, useAppSelector, useFeatures } from 'pl-fe/hooks'; import { makeGetAccount } from 'pl-fe/selectors'; @@ -135,7 +134,7 @@ const MenuItem: React.FC = ({ className, menuItem }) => {
); } else if (!menuItem.text) { - return ; + return
; } else if (menuItem.action) { return (