From d4f2b7532b8a3467bb937be2196559b0821a4a81 Mon Sep 17 00:00:00 2001 From: Barnaby Keene Date: Wed, 6 Nov 2024 13:51:40 +0000 Subject: [PATCH 1/3] consolidate most action icons into re-exports and migrate mostly to Lucide icons also fix some minor issues with the mobile menu, removed some rarely/never used components --- .../form/ColourInput/ColourInput.tsx | 5 +- web/src/components/graphics/CheckCircle.tsx | 29 -- web/src/components/graphics/CrownIcon.tsx | 12 - .../components/graphics/DragHandleIcon.tsx | 20 - web/src/components/graphics/LoginIcon.tsx | 28 -- web/src/components/graphics/LogoutIcon.tsx | 35 -- web/src/components/graphics/Mailbox.tsx | 426 ------------------ web/src/components/graphics/SendIcon.tsx | 28 -- .../components/graphics/SpeechPlusIcon.tsx | 21 - web/src/components/library/Breadcrumbs.tsx | 2 +- .../Actions => library}/CreatePage.tsx | 5 +- web/src/components/library/Header.tsx | 52 --- .../LibraryPageTree/LibraryPageTree.tsx | 2 +- .../notifications/NotificationsMenu.tsx | 6 +- .../NotificationsTrigger.tsx} | 20 +- web/src/components/role/PermissionList.tsx | 14 +- .../role/RoleEdit/RoleEditModal.tsx | 9 +- web/src/components/site/Action/Add.tsx | 12 - web/src/components/site/Action/Back.tsx | 15 - web/src/components/site/Action/Bookmark.tsx | 9 +- web/src/components/site/Action/Cancel.tsx | 4 +- web/src/components/site/Action/Close.tsx | 12 +- web/src/components/site/Action/Edit.tsx | 4 +- web/src/components/site/Action/More.tsx | 5 +- web/src/components/site/Action/Save.tsx | 4 +- web/src/components/site/Action/Send.tsx | 11 - web/src/components/site/Avatar/Avatar.tsx | 27 -- web/src/components/site/Avatar/useAvatar.ts | 5 - web/src/components/site/InfoTip.tsx | 5 +- .../Navigation/AccountMenu/AccountMenu.tsx | 7 +- .../site/Navigation/Actions/Menu.tsx | 13 - .../site/Navigation/Anchors/Admin.tsx | 8 +- .../site/Navigation/Anchors/Compose.tsx | 5 +- .../site/Navigation/Anchors/Drafts.tsx | 5 +- .../site/Navigation/Anchors/Home.tsx | 13 +- .../site/Navigation/Anchors/Library.tsx | 8 +- .../site/Navigation/Anchors/Logout.tsx | 8 +- .../site/Navigation/Anchors/Members.tsx | 8 +- .../site/Navigation/Anchors/Notifications.tsx | 5 +- .../site/Navigation/Anchors/Profile.tsx | 8 +- .../site/Navigation/Anchors/Queue.tsx | 8 +- .../site/Navigation/Anchors/Settings.tsx | 8 +- .../LibraryNavigationTree.tsx | 2 +- .../MobileCommandBar/MobileCommandBar.tsx | 49 +- .../Onboarding/Checklist/ChecklistItem.tsx | 9 +- .../components/site/ProfilePill/Handle.tsx | 39 -- .../site/ProfilePill/ProfilePill.tsx | 57 --- web/src/components/site/Toolpill/Toolpill.tsx | 2 +- .../components/thread/ReplyBox/ReplyBox.tsx | 6 +- web/src/components/ui/icons/Admin.tsx | 5 + web/src/components/ui/icons/Bookmark.tsx | 8 + web/src/components/ui/icons/Cancel.tsx | 5 + web/src/components/ui/icons/CheckCircle.tsx | 5 + web/src/components/ui/icons/Close.tsx | 5 + web/src/components/ui/icons/Create.tsx | 5 + web/src/components/ui/icons/Draft.tsx | 5 + web/src/components/ui/icons/DragHandle.tsx | 6 + web/src/components/ui/icons/Edit.tsx | 5 + web/src/components/ui/icons/Home.tsx | 5 + web/src/components/ui/icons/Info.tsx | 5 + web/src/components/ui/icons/Library.tsx | 5 + web/src/components/ui/icons/Logout.tsx | 5 + web/src/components/ui/icons/Members.tsx | 5 + web/src/components/ui/icons/Menu.tsx | 5 + web/src/components/ui/icons/More.tsx | 5 + web/src/components/ui/icons/Notification.tsx | 5 + web/src/components/ui/icons/Profile.tsx | 5 + web/src/components/ui/icons/Queue.tsx | 5 + web/src/components/ui/icons/Save.tsx | 5 + web/src/components/ui/icons/Settings.tsx | 5 + 70 files changed, 241 insertions(+), 963 deletions(-) delete mode 100644 web/src/components/graphics/CheckCircle.tsx delete mode 100644 web/src/components/graphics/CrownIcon.tsx delete mode 100644 web/src/components/graphics/DragHandleIcon.tsx delete mode 100644 web/src/components/graphics/LoginIcon.tsx delete mode 100644 web/src/components/graphics/LogoutIcon.tsx delete mode 100644 web/src/components/graphics/Mailbox.tsx delete mode 100644 web/src/components/graphics/SendIcon.tsx delete mode 100644 web/src/components/graphics/SpeechPlusIcon.tsx rename web/src/components/{site/Navigation/Actions => library}/CreatePage.tsx (93%) delete mode 100644 web/src/components/library/Header.tsx rename web/src/components/{site/Navigation/Actions/Notifications.tsx => notifications/NotificationsTrigger.tsx} (67%) delete mode 100644 web/src/components/site/Action/Add.tsx delete mode 100644 web/src/components/site/Action/Back.tsx delete mode 100644 web/src/components/site/Action/Send.tsx delete mode 100644 web/src/components/site/Avatar/Avatar.tsx delete mode 100644 web/src/components/site/Avatar/useAvatar.ts delete mode 100644 web/src/components/site/Navigation/Actions/Menu.tsx delete mode 100644 web/src/components/site/ProfilePill/Handle.tsx delete mode 100644 web/src/components/site/ProfilePill/ProfilePill.tsx create mode 100644 web/src/components/ui/icons/Admin.tsx create mode 100644 web/src/components/ui/icons/Bookmark.tsx create mode 100644 web/src/components/ui/icons/Cancel.tsx create mode 100644 web/src/components/ui/icons/CheckCircle.tsx create mode 100644 web/src/components/ui/icons/Close.tsx create mode 100644 web/src/components/ui/icons/Create.tsx create mode 100644 web/src/components/ui/icons/Draft.tsx create mode 100644 web/src/components/ui/icons/DragHandle.tsx create mode 100644 web/src/components/ui/icons/Edit.tsx create mode 100644 web/src/components/ui/icons/Home.tsx create mode 100644 web/src/components/ui/icons/Info.tsx create mode 100644 web/src/components/ui/icons/Library.tsx create mode 100644 web/src/components/ui/icons/Logout.tsx create mode 100644 web/src/components/ui/icons/Members.tsx create mode 100644 web/src/components/ui/icons/Menu.tsx create mode 100644 web/src/components/ui/icons/More.tsx create mode 100644 web/src/components/ui/icons/Notification.tsx create mode 100644 web/src/components/ui/icons/Profile.tsx create mode 100644 web/src/components/ui/icons/Queue.tsx create mode 100644 web/src/components/ui/icons/Save.tsx create mode 100644 web/src/components/ui/icons/Settings.tsx diff --git a/web/src/components/form/ColourInput/ColourInput.tsx b/web/src/components/form/ColourInput/ColourInput.tsx index bb5087786..77d1bde7f 100644 --- a/web/src/components/form/ColourInput/ColourInput.tsx +++ b/web/src/components/form/ColourInput/ColourInput.tsx @@ -1,9 +1,8 @@ import { CSSProperties, Ref, forwardRef } from "react"; import { Control, Controller } from "react-hook-form"; -import { DragHandleIcon } from "src/components/graphics/DragHandleIcon"; - import { FormControl } from "@/components/ui/form/FormControl"; +import { DragHandleIcon } from "@/components/ui/icons/DragHandle"; import { styled } from "@/styled-system/jsx"; import { C, L, Props, useColourInput } from "./useColourInput"; @@ -87,7 +86,7 @@ export function ColourInput(props: Props) { width: "var(--thumb-size)", }} > - + diff --git a/web/src/components/graphics/CheckCircle.tsx b/web/src/components/graphics/CheckCircle.tsx deleted file mode 100644 index 69dd4dc22..000000000 --- a/web/src/components/graphics/CheckCircle.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { SVGProps } from "react"; - -export function CheckCircle(props: SVGProps) { - return ( - - - - - - - - - - - - ); -} diff --git a/web/src/components/graphics/CrownIcon.tsx b/web/src/components/graphics/CrownIcon.tsx deleted file mode 100644 index 4dc9313b1..000000000 --- a/web/src/components/graphics/CrownIcon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { SVGProps } from "react"; - -export function CrownIcon(props: SVGProps) { - return ( - - - - ); -} diff --git a/web/src/components/graphics/DragHandleIcon.tsx b/web/src/components/graphics/DragHandleIcon.tsx deleted file mode 100644 index 81530d73b..000000000 --- a/web/src/components/graphics/DragHandleIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { SVGProps } from "react"; - -export function DragHandleIcon(props: SVGProps) { - return ( - - - - ); -} diff --git a/web/src/components/graphics/LoginIcon.tsx b/web/src/components/graphics/LoginIcon.tsx deleted file mode 100644 index 6c55b5033..000000000 --- a/web/src/components/graphics/LoginIcon.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { SVGProps } from "react"; - -export function LoginIcon(props: SVGProps) { - return ( - - - - - ); -} diff --git a/web/src/components/graphics/LogoutIcon.tsx b/web/src/components/graphics/LogoutIcon.tsx deleted file mode 100644 index 73785bae8..000000000 --- a/web/src/components/graphics/LogoutIcon.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { SVGProps } from "react"; - -export function LogoutIcon(props: SVGProps) { - return ( - - - - - - ); -} diff --git a/web/src/components/graphics/Mailbox.tsx b/web/src/components/graphics/Mailbox.tsx deleted file mode 100644 index 5302812ff..000000000 --- a/web/src/components/graphics/Mailbox.tsx +++ /dev/null @@ -1,426 +0,0 @@ -import { SVGProps } from "react"; - -export function Mailbox(props: SVGProps) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/web/src/components/graphics/SendIcon.tsx b/web/src/components/graphics/SendIcon.tsx deleted file mode 100644 index 1f39fbe24..000000000 --- a/web/src/components/graphics/SendIcon.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { SVGProps } from "react"; - -export function SendIcon(props: SVGProps) { - return ( - - - - - - - - - - - ); -} diff --git a/web/src/components/graphics/SpeechPlusIcon.tsx b/web/src/components/graphics/SpeechPlusIcon.tsx deleted file mode 100644 index 3dd61de0c..000000000 --- a/web/src/components/graphics/SpeechPlusIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { SVGProps } from "react"; - -export function SpeechPlusIcon(props: SVGProps) { - return ( - - - - ); -} diff --git a/web/src/components/library/Breadcrumbs.tsx b/web/src/components/library/Breadcrumbs.tsx index ae8068a34..c0a648efc 100644 --- a/web/src/components/library/Breadcrumbs.tsx +++ b/web/src/components/library/Breadcrumbs.tsx @@ -11,7 +11,7 @@ import { LinkButton } from "@/components/ui/link-button"; import { LibraryPath, joinLibraryPath } from "@/screens/library/library-path"; import { Box, HStack } from "@/styled-system/jsx"; -import { CreatePageAction } from "../site/Navigation/Actions/CreatePage"; +import { CreatePageAction } from "./CreatePage"; type Props = { libraryPath: LibraryPath; diff --git a/web/src/components/site/Navigation/Actions/CreatePage.tsx b/web/src/components/library/CreatePage.tsx similarity index 93% rename from web/src/components/site/Navigation/Actions/CreatePage.tsx rename to web/src/components/library/CreatePage.tsx index da8bf2f0a..260c008db 100644 --- a/web/src/components/site/Navigation/Actions/CreatePage.tsx +++ b/web/src/components/library/CreatePage.tsx @@ -1,8 +1,7 @@ -import { PlusIcon } from "@heroicons/react/24/outline"; - import { handle } from "@/api/client"; import { ButtonProps } from "@/components/ui/button"; import { IconButton } from "@/components/ui/icon-button"; +import { CreateIcon } from "@/components/ui/icons/Create"; import { Item } from "@/components/ui/menu"; import { useLibraryMutation } from "@/lib/library/library"; @@ -13,7 +12,7 @@ type Props = ButtonProps & { export const CreatePageID = "create-page"; export const CreatePageLabel = "Create"; -export const CreatePageIcon = ; +export const CreatePageIcon = ; export function CreatePageAction({ parentSlug, hideLabel, ...props }: Props) { const { createNode, revalidate } = useLibraryMutation(); diff --git a/web/src/components/library/Header.tsx b/web/src/components/library/Header.tsx deleted file mode 100644 index 5859d287d..000000000 --- a/web/src/components/library/Header.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Node } from "src/api/openapi-schema"; -import { ProfilePill } from "src/components/site/ProfilePill/ProfilePill"; - -import { Heading } from "@/components/ui/heading"; -import { LinkButton } from "@/components/ui/link-button"; -import { Box, HStack, Stack, VStack, styled } from "@/styled-system/jsx"; -import { getAssetURL } from "@/utils/asset"; - -type Props = Node; - -export function DatagraphHeader(props: Props) { - const asset = props.assets?.[0]; - return ( - - - {props.name} - - - Maintained by - - - - {props.link && ( - - - {props.link?.url} - - - )} - - {props.description} - - - {asset && ( - - - - )} - - ); -} diff --git a/web/src/components/library/LibraryPageTree/LibraryPageTree.tsx b/web/src/components/library/LibraryPageTree/LibraryPageTree.tsx index 87ab3a9df..f2c45319f 100644 --- a/web/src/components/library/LibraryPageTree/LibraryPageTree.tsx +++ b/web/src/components/library/LibraryPageTree/LibraryPageTree.tsx @@ -8,7 +8,7 @@ import Link from "next/link"; import { forwardRef, useState } from "react"; import { NodeWithChildren, Visibility } from "@/api/openapi-schema"; -import { CreatePageAction } from "@/components/site/Navigation/Actions/CreatePage"; +import { CreatePageAction } from "@/components/library/CreatePage"; import { NavigationHeader } from "@/components/site/Navigation/ContentNavigationList/NavigationHeader"; import { visibilityColour } from "@/lib/library/visibilityColours"; import { css, cx } from "@/styled-system/css"; diff --git a/web/src/components/notifications/NotificationsMenu.tsx b/web/src/components/notifications/NotificationsMenu.tsx index 7c9ed4bb6..72b5a7575 100644 --- a/web/src/components/notifications/NotificationsMenu.tsx +++ b/web/src/components/notifications/NotificationsMenu.tsx @@ -8,10 +8,10 @@ import { hstack } from "@/styled-system/patterns"; import { deriveError } from "@/utils/error"; import { MemberAvatar } from "../member/MemberBadge/MemberAvatar"; -import { NotificationAction } from "../site/Navigation/Actions/Notifications"; import { Button } from "../ui/button"; import { LinkButton } from "../ui/link-button"; +import { NotificationsTrigger } from "./NotificationsTrigger"; import { NotificationItem } from "./item"; import { Props, useNotifications } from "./useNotifications"; @@ -19,7 +19,7 @@ export function NotificationsMenu(props: Props) { const { ready, error, data, handlers } = useNotifications(props); if (!ready) { return ( - - + diff --git a/web/src/components/site/Navigation/Actions/Notifications.tsx b/web/src/components/notifications/NotificationsTrigger.tsx similarity index 67% rename from web/src/components/site/Navigation/Actions/Notifications.tsx rename to web/src/components/notifications/NotificationsTrigger.tsx index ce26a2123..ce8d5a6c5 100644 --- a/web/src/components/site/Navigation/Actions/Notifications.tsx +++ b/web/src/components/notifications/NotificationsTrigger.tsx @@ -1,21 +1,20 @@ -import { BellIcon } from "@heroicons/react/24/outline"; - import { ButtonProps } from "@/components/ui/button"; import { IconButton } from "@/components/ui/icon-button"; +import { NotificationIcon } from "@/components/ui/icons/Notification"; import { Box } from "@/styled-system/jsx"; -import { AnchorProps, MenuItem } from "../Anchors/Anchor"; +import { AnchorProps, MenuItem } from "../site/Navigation/Anchors/Anchor"; export const NotificationsID = "notifications"; export const NotificationsRoute = "/notifications"; export const NotificationsLabel = "Notifications"; -export const NotificationsIcon = ; +export const NotificationsIcon = ; type Props = { unread?: boolean; }; -export function NotificationAction({ +export function NotificationsTrigger({ hideLabel, unread, ...props @@ -43,14 +42,3 @@ export function NotificationAction({ ); } - -export function NotificationsMenuItem() { - return ( - - ); -} diff --git a/web/src/components/role/PermissionList.tsx b/web/src/components/role/PermissionList.tsx index eecbd57fa..d7af1bf22 100644 --- a/web/src/components/role/PermissionList.tsx +++ b/web/src/components/role/PermissionList.tsx @@ -1,7 +1,7 @@ import { PermissionList } from "@/api/openapi-schema"; import * as Popover from "@/components/ui/popover"; import { PermissionDetails } from "@/lib/permission/permission"; -import { LStack } from "@/styled-system/jsx"; +import { Box, LStack } from "@/styled-system/jsx"; import { Badge } from "../ui/badge"; import { Button } from "../ui/button"; @@ -37,9 +37,15 @@ export function PermissionSummary({ permissions }: Props) { - {permissions.map((p) => ( - {PermissionDetails[p].name} - ))} + {permissions.length > 0 ? ( + permissions.map((p) => ( + {PermissionDetails[p].name} + )) + ) : ( + +

No permissions.

+ + )} diff --git a/web/src/components/role/RoleEdit/RoleEditModal.tsx b/web/src/components/role/RoleEdit/RoleEditModal.tsx index 9e4f2c1c1..54e6c357a 100644 --- a/web/src/components/role/RoleEdit/RoleEditModal.tsx +++ b/web/src/components/role/RoleEdit/RoleEditModal.tsx @@ -6,9 +6,10 @@ import { useSWRConfig } from "swr"; import { handle } from "@/api/client"; import { getRoleListKey, roleCreate } from "@/api/openapi-client/roles"; import { Role } from "@/api/openapi-schema"; -import { AddAction } from "@/components/site/Action/Add"; import { EditAction } from "@/components/site/Action/Edit"; import { ModalDrawer } from "@/components/site/Modaldrawer/Modaldrawer"; +import { IconButton } from "@/components/ui/icon-button"; +import { CreateIcon } from "@/components/ui/icons/Create"; import { isDefaultRole } from "@/lib/role/defaults"; import { UseDisclosureProps, useDisclosure } from "@/utils/useDisclosure"; @@ -89,9 +90,9 @@ export function RoleCreateModalTrigger() { return ( <> - - Create role - + + Create role + {newRole && } diff --git a/web/src/components/site/Action/Add.tsx b/web/src/components/site/Action/Add.tsx deleted file mode 100644 index cb6f7fca6..000000000 --- a/web/src/components/site/Action/Add.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { PlusIcon } from "@heroicons/react/24/outline"; - -import { ButtonProps } from "@/components/ui/button"; -import { IconButton } from "@/components/ui/icon-button"; - -export function AddAction({ children, ...props }: ButtonProps) { - return ( - - {children} - - ); -} diff --git a/web/src/components/site/Action/Back.tsx b/web/src/components/site/Action/Back.tsx deleted file mode 100644 index ea8f34e32..000000000 --- a/web/src/components/site/Action/Back.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ArrowLeftIcon } from "@heroicons/react/24/outline"; -import { PropsWithChildren } from "react"; - -import { LinkButton, LinkProps } from "@/components/ui/link-button"; - -export function BackAction({ - children, - ...props -}: PropsWithChildren) { - return ( - - {children ?? } - - ); -} diff --git a/web/src/components/site/Action/Bookmark.tsx b/web/src/components/site/Action/Bookmark.tsx index 46b3e23a1..adfa20a7f 100644 --- a/web/src/components/site/Action/Bookmark.tsx +++ b/web/src/components/site/Action/Bookmark.tsx @@ -1,8 +1,9 @@ -import { BookmarkIcon as BookmarkNotSavedIcon } from "@heroicons/react/24/outline"; -import { BookmarkIcon as BookmarkSavedIcon } from "@heroicons/react/24/solid"; - import { ButtonProps } from "@/components/ui/button"; import { IconButton } from "@/components/ui/icon-button"; +import { + BookmarkIcon, + BookmarkSavedIcon, +} from "@/components/ui/icons/Bookmark"; type Props = ButtonProps & { bookmarked: boolean }; @@ -10,7 +11,7 @@ export function BookmarkAction(props: Props) { const { bookmarked, ...rest } = props; return ( - {bookmarked ? : } + {bookmarked ? : } ); } diff --git a/web/src/components/site/Action/Cancel.tsx b/web/src/components/site/Action/Cancel.tsx index afd6ebef6..4de648914 100644 --- a/web/src/components/site/Action/Cancel.tsx +++ b/web/src/components/site/Action/Cancel.tsx @@ -1,7 +1,7 @@ -import { XIcon } from "lucide-react"; import React, { PropsWithChildren } from "react"; import { Button, ButtonProps } from "@/components/ui/button"; +import { CancelIcon } from "@/components/ui/icons/Cancel"; export function CancelAction({ children, @@ -16,7 +16,7 @@ export function CancelAction({ px={hasLabel ? undefined : "0"} {...props} > - {children} + {children} ); } diff --git a/web/src/components/site/Action/Close.tsx b/web/src/components/site/Action/Close.tsx index fffb7ffa2..4a0e47b1f 100644 --- a/web/src/components/site/Action/Close.tsx +++ b/web/src/components/site/Action/Close.tsx @@ -1,11 +1,11 @@ -import { XMarkIcon } from "@heroicons/react/24/solid"; - -import { Button, ButtonProps } from "@/components/ui/button"; +import { ButtonProps } from "@/components/ui/button"; +import { IconButton } from "@/components/ui/icon-button"; +import { CloseIcon } from "@/components/ui/icons/Close"; export function CloseAction(props: ButtonProps) { return ( - + + + ); } diff --git a/web/src/components/site/Action/Edit.tsx b/web/src/components/site/Action/Edit.tsx index 3f9f125dc..023e5b81d 100644 --- a/web/src/components/site/Action/Edit.tsx +++ b/web/src/components/site/Action/Edit.tsx @@ -1,7 +1,7 @@ -import { EditIcon } from "lucide-react"; import { PropsWithChildren } from "react"; import { Button, ButtonProps } from "@/components/ui/button"; +import { EditIcon } from "@/components/ui/icons/Edit"; export function EditAction({ children, @@ -9,7 +9,7 @@ export function EditAction({ }: PropsWithChildren) { return ( ); diff --git a/web/src/components/site/Action/More.tsx b/web/src/components/site/Action/More.tsx index 762fe3cd9..78fd4c5fb 100644 --- a/web/src/components/site/Action/More.tsx +++ b/web/src/components/site/Action/More.tsx @@ -1,12 +1,11 @@ -import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline"; - import { ButtonProps } from "@/components/ui/button"; import { IconButton } from "@/components/ui/icon-button"; +import { MoreIcon } from "@/components/ui/icons/More"; export function MoreAction(props: ButtonProps) { return ( - + ); } diff --git a/web/src/components/site/Action/Save.tsx b/web/src/components/site/Action/Save.tsx index 9e59b0edb..a8ec1b937 100644 --- a/web/src/components/site/Action/Save.tsx +++ b/web/src/components/site/Action/Save.tsx @@ -1,7 +1,7 @@ -import { CloudArrowUpIcon } from "@heroicons/react/24/outline"; import { PropsWithChildren } from "react"; import { Button, ButtonProps } from "@/components/ui/button"; +import { SaveIcon } from "@/components/ui/icons/Save"; export function SaveAction({ children, @@ -9,7 +9,7 @@ export function SaveAction({ }: PropsWithChildren) { return ( ); } diff --git a/web/src/components/site/Action/Send.tsx b/web/src/components/site/Action/Send.tsx deleted file mode 100644 index 0257d1f7e..000000000 --- a/web/src/components/site/Action/Send.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SendIcon } from "src/components/graphics/SendIcon"; - -import { Button, ButtonProps } from "@/components/ui/button"; - -export function SendAction(props: ButtonProps) { - return ( - - ); -} diff --git a/web/src/components/site/Avatar/Avatar.tsx b/web/src/components/site/Avatar/Avatar.tsx deleted file mode 100644 index 58d874fbe..000000000 --- a/web/src/components/site/Avatar/Avatar.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Image from "next/image"; - -import { css } from "@/styled-system/css"; -import { Box, BoxProps } from "@/styled-system/jsx"; - -import { useAvatar } from "./useAvatar"; - -type Props = { - handle: string; -} & BoxProps; - -export function Avatar({ handle, ...props }: Props) { - const { src } = useAvatar(handle); - return ( - - {`${handle}'s - - ); -} diff --git a/web/src/components/site/Avatar/useAvatar.ts b/web/src/components/site/Avatar/useAvatar.ts deleted file mode 100644 index a37679e00..000000000 --- a/web/src/components/site/Avatar/useAvatar.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { API_ADDRESS } from "@/config"; - -export function useAvatar(handle: string) { - return { src: `${API_ADDRESS}/api/accounts/${handle}/avatar` }; -} diff --git a/web/src/components/site/InfoTip.tsx b/web/src/components/site/InfoTip.tsx index 2bbe9d2bf..bad8ccc07 100644 --- a/web/src/components/site/InfoTip.tsx +++ b/web/src/components/site/InfoTip.tsx @@ -1,11 +1,10 @@ -import { InfoIcon } from "lucide-react"; import { PropsWithChildren } from "react"; +import { IconButton } from "@/components/ui/icon-button"; +import { InfoIcon } from "@/components/ui/icons/Info"; import * as Popover from "@/components/ui/popover"; import { LStack } from "@/styled-system/jsx"; -import { IconButton } from "../ui/icon-button"; - type Props = { title: string; }; diff --git a/web/src/components/site/Navigation/AccountMenu/AccountMenu.tsx b/web/src/components/site/Navigation/AccountMenu/AccountMenu.tsx index aafb45b81..84061df9d 100644 --- a/web/src/components/site/Navigation/AccountMenu/AccountMenu.tsx +++ b/web/src/components/site/Navigation/AccountMenu/AccountMenu.tsx @@ -15,9 +15,10 @@ import { SettingsMenuItem } from "../Anchors/Settings"; type Props = { account: Account; + size?: "sm" | "md"; }; -export function AccountMenu({ account }: Props) { +export function AccountMenu({ account, size = "md" }: Props) { const isAdmin = hasPermission(account, "ADMINISTRATOR"); return ( @@ -27,11 +28,11 @@ export function AccountMenu({ account }: Props) { fitViewport: true, slide: true, placement: "bottom-end", - shift: 24, + shift: size === "md" ? 24 : 0, }} > - + diff --git a/web/src/components/site/Navigation/Actions/Menu.tsx b/web/src/components/site/Navigation/Actions/Menu.tsx deleted file mode 100644 index a1909a3e2..000000000 --- a/web/src/components/site/Navigation/Actions/Menu.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Bars3Icon } from "@heroicons/react/24/outline"; - -import { Button, ButtonProps } from "@/components/ui/button"; - -export const MenuIcon = ; - -export function MenuAction(props: ButtonProps) { - return ( - - ); -} diff --git a/web/src/components/site/Navigation/Anchors/Admin.tsx b/web/src/components/site/Navigation/Anchors/Admin.tsx index e725dba28..6afc3bf39 100644 --- a/web/src/components/site/Navigation/Anchors/Admin.tsx +++ b/web/src/components/site/Navigation/Anchors/Admin.tsx @@ -1,5 +1,4 @@ -import { CrownIcon } from "src/components/graphics/CrownIcon"; - +import { AdminIcon } from "@/components/ui/icons/Admin"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const AdminID = "admin"; export const AdminRoute = "/admin"; export const AdminLabel = "Admin"; -export const AdminIcon = ; type Props = AnchorProps & LinkButtonStyleProps; @@ -17,7 +15,7 @@ export function AdminAnchor(props: Props) { id={AdminID} route={AdminRoute} label={AdminLabel} - icon={AdminIcon} + icon={} {...props} /> ); @@ -29,7 +27,7 @@ export function AdminMenuItem() { id={AdminID} route={AdminRoute} label={AdminLabel} - icon={AdminIcon} + icon={} /> ); } diff --git a/web/src/components/site/Navigation/Anchors/Compose.tsx b/web/src/components/site/Navigation/Anchors/Compose.tsx index 0591378df..76134daac 100644 --- a/web/src/components/site/Navigation/Anchors/Compose.tsx +++ b/web/src/components/site/Navigation/Anchors/Compose.tsx @@ -1,5 +1,4 @@ -import { PlusIcon } from "lucide-react"; - +import { CreateIcon } from "@/components/ui/icons/Create"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,7 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const ComposeID = "compose"; export const ComposeRoute = "/new"; export const ComposeLabel = "Post"; -export const ComposeIcon = ; +export const ComposeIcon = ; export function ComposeAnchor(props: AnchorProps & LinkButtonStyleProps) { return ( diff --git a/web/src/components/site/Navigation/Anchors/Drafts.tsx b/web/src/components/site/Navigation/Anchors/Drafts.tsx index cecf2d5a5..39b0ad46f 100644 --- a/web/src/components/site/Navigation/Anchors/Drafts.tsx +++ b/web/src/components/site/Navigation/Anchors/Drafts.tsx @@ -1,5 +1,4 @@ -import { DocumentIcon } from "@heroicons/react/24/outline"; - +import { DraftIcon } from "@/components/ui/icons/Draft"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,7 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const DraftsID = "drafts"; export const DraftsRoute = "/drafts"; export const DraftsLabel = "Drafts"; -export const DraftsIcon = ; +export const DraftsIcon = ; export function DraftsAnchor(props: AnchorProps & LinkButtonStyleProps) { return ( diff --git a/web/src/components/site/Navigation/Anchors/Home.tsx b/web/src/components/site/Navigation/Anchors/Home.tsx index 27775f07b..6a3371f4b 100644 --- a/web/src/components/site/Navigation/Anchors/Home.tsx +++ b/web/src/components/site/Navigation/Anchors/Home.tsx @@ -1,5 +1,4 @@ -import { HomeIcon as HomeHeroIcon } from "@heroicons/react/24/outline"; - +import { HomeIcon } from "@/components/ui/icons/Home"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const HomeID = "home"; export const HomeRoute = "/"; export const HomeLabel = "Home"; -export const HomeIcon = ; export function HomeAnchor(props: AnchorProps & LinkButtonStyleProps) { return ( @@ -15,7 +13,7 @@ export function HomeAnchor(props: AnchorProps & LinkButtonStyleProps) { id={HomeID} route={HomeRoute} label={HomeLabel} - icon={HomeIcon} + icon={} {...props} /> ); @@ -23,6 +21,11 @@ export function HomeAnchor(props: AnchorProps & LinkButtonStyleProps) { export function HomeMenuItem() { return ( - + } + /> ); } diff --git a/web/src/components/site/Navigation/Anchors/Library.tsx b/web/src/components/site/Navigation/Anchors/Library.tsx index cb1e59ae1..042ff3b72 100644 --- a/web/src/components/site/Navigation/Anchors/Library.tsx +++ b/web/src/components/site/Navigation/Anchors/Library.tsx @@ -1,5 +1,4 @@ -import { BookOpenIcon } from "@heroicons/react/24/outline"; - +import { LibraryIcon } from "@/components/ui/icons/Library"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const LibraryID = "library"; export const LibraryRoute = "/l"; export const LibraryLabel = "Library"; -export const LibraryIcon = ; export function LibraryAnchor(props: AnchorProps & LinkButtonStyleProps) { return ( @@ -15,7 +13,7 @@ export function LibraryAnchor(props: AnchorProps & LinkButtonStyleProps) { id={LibraryID} route={LibraryRoute} label={LibraryLabel} - icon={LibraryIcon} + icon={} {...props} /> ); @@ -27,7 +25,7 @@ export function LibraryMenuItem() { id={LibraryID} route={LibraryRoute} label={LibraryLabel} - icon={LibraryIcon} + icon={} /> ); } diff --git a/web/src/components/site/Navigation/Anchors/Logout.tsx b/web/src/components/site/Navigation/Anchors/Logout.tsx index 412cd43d8..4d64bd56e 100644 --- a/web/src/components/site/Navigation/Anchors/Logout.tsx +++ b/web/src/components/site/Navigation/Anchors/Logout.tsx @@ -1,5 +1,4 @@ -import { LogoutIcon as LogoutGraphic } from "src/components/graphics/LogoutIcon"; - +import { LogoutIcon } from "@/components/ui/icons/Logout"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Item } from "@/components/ui/menu"; import { button } from "@/styled-system/recipes"; @@ -9,7 +8,6 @@ import { AnchorProps, MenuItem } from "./Anchor"; export const LogoutID = "logout"; export const LogoutRoute = "/logout"; export const LogoutLabel = "Logout"; -export const LogoutIcon = ; type Props = AnchorProps & LinkButtonStyleProps; @@ -20,7 +18,7 @@ export function LogoutAnchor({ hideLabel, ...props }: Props) { href={LogoutRoute} title={LogoutLabel} > - {LogoutIcon} + {} {!hideLabel && ( <>  {LogoutLabel} @@ -34,7 +32,7 @@ export function LogoutMenuItem({ hideLabel }: AnchorProps) { return ( - {LogoutIcon} + {} {!hideLabel && ( <>  {LogoutLabel} diff --git a/web/src/components/site/Navigation/Anchors/Members.tsx b/web/src/components/site/Navigation/Anchors/Members.tsx index 18461952a..f7cd1e19e 100644 --- a/web/src/components/site/Navigation/Anchors/Members.tsx +++ b/web/src/components/site/Navigation/Anchors/Members.tsx @@ -1,5 +1,4 @@ -import { UsersIcon } from "@heroicons/react/24/outline"; - +import { MembersIcon } from "@/components/ui/icons/Members"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const MembersID = "members"; export const MembersRoute = "/m"; export const MembersLabel = "Members"; -export const MembersIcon = ; export function MembersAnchor(props: AnchorProps & LinkButtonStyleProps) { return ( @@ -15,7 +13,7 @@ export function MembersAnchor(props: AnchorProps & LinkButtonStyleProps) { id={MembersID} route={MembersRoute} label={MembersLabel} - icon={MembersIcon} + icon={} {...props} /> ); @@ -27,7 +25,7 @@ export function MembersMenuItem() { id={MembersID} route={MembersRoute} label={MembersLabel} - icon={MembersIcon} + icon={} /> ); } diff --git a/web/src/components/site/Navigation/Anchors/Notifications.tsx b/web/src/components/site/Navigation/Anchors/Notifications.tsx index ea118c2da..93e24e0da 100644 --- a/web/src/components/site/Navigation/Anchors/Notifications.tsx +++ b/web/src/components/site/Navigation/Anchors/Notifications.tsx @@ -1,5 +1,4 @@ -import { BellIcon } from "@heroicons/react/24/outline"; - +import { NotificationIcon } from "@/components/ui/icons/Notification"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,7 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const NotificationsID = "notifications"; export const NotificationsRoute = "/notifications"; export const NotificationsLabel = "Notifications"; -export const NotificationsIcon = ; +export const NotificationsIcon = ; export function NotificationsAnchor(props: AnchorProps & LinkButtonStyleProps) { return ( diff --git a/web/src/components/site/Navigation/Anchors/Profile.tsx b/web/src/components/site/Navigation/Anchors/Profile.tsx index a22127423..0cb93b2a2 100644 --- a/web/src/components/site/Navigation/Anchors/Profile.tsx +++ b/web/src/components/site/Navigation/Anchors/Profile.tsx @@ -1,5 +1,4 @@ -import { CircleUserRoundIcon } from "lucide-react"; - +import { ProfileIcon } from "@/components/ui/icons/Profile"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, MenuItem } from "./Anchor"; export const ProfileID = "profile"; export const ProfileRoute = (handle: string) => `/m/${handle}`; export const ProfileLabel = "Profile"; -export const ProfileIcon = ; export function ProfileAnchor({ handle, @@ -18,7 +16,7 @@ export function ProfileAnchor({ id={ProfileID} route={ProfileRoute(handle)} label={ProfileLabel} - icon={ProfileIcon} + icon={} {...props} /> ); @@ -30,7 +28,7 @@ export function ProfileMenuItem({ handle }: { handle: string }) { id={ProfileID} route={ProfileRoute(handle)} label={ProfileLabel} - icon={ProfileIcon} + icon={} /> ); } diff --git a/web/src/components/site/Navigation/Anchors/Queue.tsx b/web/src/components/site/Navigation/Anchors/Queue.tsx index 603c95416..4dd920e38 100644 --- a/web/src/components/site/Navigation/Anchors/Queue.tsx +++ b/web/src/components/site/Navigation/Anchors/Queue.tsx @@ -1,5 +1,4 @@ -import { QueueListIcon } from "@heroicons/react/24/outline"; - +import { QueueIcon } from "@/components/ui/icons/Queue"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, MenuItem } from "./Anchor"; export const QueueID = "queue"; export const QueueRoute = "/queue"; export const QueueLabel = "Queue"; -export const QueueIcon = ; export function QueueAnchor(props: LinkButtonStyleProps) { return ( @@ -15,7 +13,7 @@ export function QueueAnchor(props: LinkButtonStyleProps) { id={QueueID} route={QueueRoute} label={QueueLabel} - icon={QueueIcon} + icon={} {...props} /> ); @@ -27,7 +25,7 @@ export function QueueMenuItem() { id={QueueID} route={QueueRoute} label={QueueLabel} - icon={QueueIcon} + icon={} /> ); } diff --git a/web/src/components/site/Navigation/Anchors/Settings.tsx b/web/src/components/site/Navigation/Anchors/Settings.tsx index 6a37e0231..6323df43b 100644 --- a/web/src/components/site/Navigation/Anchors/Settings.tsx +++ b/web/src/components/site/Navigation/Anchors/Settings.tsx @@ -1,5 +1,4 @@ -import { Cog6ToothIcon } from "@heroicons/react/24/outline"; - +import { SettingsIcon } from "@/components/ui/icons/Settings"; import { LinkButtonStyleProps } from "@/components/ui/link-button"; import { Anchor, AnchorProps, MenuItem } from "./Anchor"; @@ -7,7 +6,6 @@ import { Anchor, AnchorProps, MenuItem } from "./Anchor"; export const SettingsID = "settings"; export const SettingsRoute = "/settings"; export const SettingsLabel = "Settings"; -export const SettingsIcon = ; type Props = AnchorProps & LinkButtonStyleProps; @@ -17,7 +15,7 @@ export function SettingsAnchor(props: Props) { id={SettingsID} route={SettingsRoute} label={SettingsLabel} - icon={SettingsIcon} + icon={} {...props} /> ); @@ -29,7 +27,7 @@ export function SettingsMenuItem() { id={SettingsID} route={SettingsRoute} label={SettingsLabel} - icon={SettingsIcon} + icon={} /> ); } diff --git a/web/src/components/site/Navigation/LibraryNavigationTree/LibraryNavigationTree.tsx b/web/src/components/site/Navigation/LibraryNavigationTree/LibraryNavigationTree.tsx index 0b8ea700a..ecea8a5fd 100644 --- a/web/src/components/site/Navigation/LibraryNavigationTree/LibraryNavigationTree.tsx +++ b/web/src/components/site/Navigation/LibraryNavigationTree/LibraryNavigationTree.tsx @@ -3,8 +3,8 @@ import { LibraryPageTree } from "@/components/library/LibraryPageTree/LibraryPageTree"; import { LStack } from "@/styled-system/jsx"; +import { CreatePageAction } from "../../../library/CreatePage"; import { Unready } from "../../Unready"; -import { CreatePageAction } from "../Actions/CreatePage"; import { NavigationHeader } from "../ContentNavigationList/NavigationHeader"; import { Props, useLibraryNavigationTree } from "./useLibraryNavigationTree"; diff --git a/web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx b/web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx index b176a3cb9..13c4a8c97 100644 --- a/web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx +++ b/web/src/components/site/Navigation/MobileCommandBar/MobileCommandBar.tsx @@ -2,14 +2,17 @@ import { Presence } from "@ark-ui/react"; -import { ProfilePill } from "src/components/site/ProfilePill/ProfilePill"; import { Toolpill } from "src/components/site/Toolpill/Toolpill"; +import { MemberBadge } from "@/components/member/MemberBadge/MemberBadge"; +import { ButtonProps } from "@/components/ui/button"; +import { IconButton } from "@/components/ui/icon-button"; +import { MenuIcon } from "@/components/ui/icons/Menu"; import { HStack, WStack } from "@/styled-system/jsx"; import { vstack } from "@/styled-system/patterns"; import { CloseAction } from "../../Action/Close"; -import { MenuAction } from "../Actions/Menu"; +import { AccountMenu } from "../AccountMenu/AccountMenu"; import { AdminAnchor } from "../Anchors/Admin"; import { ComposeAnchor } from "../Anchors/Compose"; import { DraftsAnchor } from "../Anchors/Drafts"; @@ -59,41 +62,53 @@ export function MobileCommandBar() { {account ? ( - + {isExpanded ? ( <> - - + - + ) : ( <> - - - - - + + + + + )} - + ) : ( - + {isExpanded ? ( <> - + - + ) : ( <> - + )} - + )} ); } + +function ExpandTrigger(props: ButtonProps) { + return ( + + + + ); +} diff --git a/web/src/components/site/Onboarding/Checklist/ChecklistItem.tsx b/web/src/components/site/Onboarding/Checklist/ChecklistItem.tsx index 3b9116de4..80eaf8b9a 100644 --- a/web/src/components/site/Onboarding/Checklist/ChecklistItem.tsx +++ b/web/src/components/site/Onboarding/Checklist/ChecklistItem.tsx @@ -3,10 +3,10 @@ import { PropsWithChildren } from "react"; import { OnboardingStatus } from "src/api/openapi-schema"; -import { CheckCircle } from "src/components/graphics/CheckCircle"; import { Button } from "@/components/ui/button"; import { Heading } from "@/components/ui/heading"; +import { CheckCircleIcon } from "@/components/ui/icons/CheckCircle"; import { LinkButton } from "@/components/ui/link-button"; import { Box, Circle, HStack, styled } from "@/styled-system/jsx"; @@ -41,7 +41,12 @@ export function ChecklistItem(props: PropsWithChildren) { }} > {complete ? ( - + ) : ( {props.step} )} diff --git a/web/src/components/site/ProfilePill/Handle.tsx b/web/src/components/site/ProfilePill/Handle.tsx deleted file mode 100644 index 99117ad90..000000000 --- a/web/src/components/site/ProfilePill/Handle.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { ShieldCheckIcon } from "@heroicons/react/24/outline"; - -import { Permission, ProfileReference } from "src/api/openapi-schema"; - -import { styled } from "@/styled-system/jsx"; - -export type Props = { - profileReference: ProfileReference; - size?: "sm" | "lg"; -}; - -export function Handle({ profileReference, size }: Props) { - const isAdmin = profileReference.roles.find((role) => - role.permissions.includes(Permission.ADMINISTRATOR), - ); - - return ( - - - @{profileReference.handle} - - - {isAdmin && ( - - - - )} - - ); -} diff --git a/web/src/components/site/ProfilePill/ProfilePill.tsx b/web/src/components/site/ProfilePill/ProfilePill.tsx deleted file mode 100644 index a1ed0c641..000000000 --- a/web/src/components/site/ProfilePill/ProfilePill.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { ProfileReference } from "src/api/openapi-schema"; -import { useSession } from "src/auth"; -import { Anchor } from "src/components/site/Anchor"; -import { Avatar } from "src/components/site/Avatar/Avatar"; - -import { css } from "@/styled-system/css"; -import { Box } from "@/styled-system/jsx"; - -import { Handle } from "./Handle"; - -type Props = { - profileReference: ProfileReference; - showHandle?: boolean; - showAvatar?: boolean; - size?: "sm" | "lg"; -}; - -export function ProfilePill({ - profileReference, - showHandle = true, - showAvatar = true, - size = "sm", -}: Props) { - const account = useSession(); - const self = account?.id === profileReference.id; - const title = self ? `Your profile` : `${profileReference.handle}'s profile`; - const large = size === "lg"; - - return ( - - {showAvatar && ( - - )} - {showHandle && ( - - - - )} - - ); -} diff --git a/web/src/components/site/Toolpill/Toolpill.tsx b/web/src/components/site/Toolpill/Toolpill.tsx index 8e0264012..57f3c293c 100644 --- a/web/src/components/site/Toolpill/Toolpill.tsx +++ b/web/src/components/site/Toolpill/Toolpill.tsx @@ -34,7 +34,7 @@ export function Toolpill({ id="toolpill-content-container" ref={ref} className={Floating()} - p="1" + p="2" gap="2" flexDirection="column" borderRadius="xl" diff --git a/web/src/components/thread/ReplyBox/ReplyBox.tsx b/web/src/components/thread/ReplyBox/ReplyBox.tsx index ace3a9ba8..4f43f0a54 100644 --- a/web/src/components/thread/ReplyBox/ReplyBox.tsx +++ b/web/src/components/thread/ReplyBox/ReplyBox.tsx @@ -5,7 +5,7 @@ import { Thread } from "src/api/openapi-schema"; import { Anchor } from "src/components/site/Anchor"; import { ContentComposer } from "@/components/content/ContentComposer/ContentComposer"; -import { ProfilePill } from "@/components/site/ProfilePill/ProfilePill"; +import { MemberIdent } from "@/components/member/MemberBadge/MemberIdent"; import { Button } from "@/components/ui/button"; import { Box, HStack, styled } from "@/styled-system/jsx"; import { CardBox } from "@/styled-system/patterns"; @@ -39,8 +39,8 @@ export function ReplyBox(props: Thread) { > - Reply to{" "} - + Reply to + )} diff --git a/web/src/components/content/CollectionMenu/CollectionMenu.tsx b/web/src/components/content/CollectionMenu/CollectionMenu.tsx index 06b17e9bd..0209f9779 100644 --- a/web/src/components/content/CollectionMenu/CollectionMenu.tsx +++ b/web/src/components/content/CollectionMenu/CollectionMenu.tsx @@ -1,11 +1,12 @@ import { Portal } from "@ark-ui/react"; -import { MinusIcon, PlusIcon } from "@heroicons/react/24/solid"; import { KeyboardEvent, useState } from "react"; import { BookmarkAction } from "src/components/site/Action/Bookmark"; import { Unready } from "@/components/site/Unready"; import { Checkbox } from "@/components/ui/checkbox"; +import { AddIcon } from "@/components/ui/icons/Add"; +import { RemoveIcon } from "@/components/ui/icons/Remove"; import * as Menu from "@/components/ui/menu"; import { Box, Center, HStack } from "@/styled-system/jsx"; import { useDisclosure } from "@/utils/useDisclosure"; @@ -94,7 +95,7 @@ function LazyLoadedMenuContent(props: LazyLoadedMenuContentProps) { ) : (
- {c.has_queried_item ? : } + {c.has_queried_item ? : }
)} {c.name} diff --git a/web/src/components/feed/ThreadItem.tsx b/web/src/components/feed/ThreadItem.tsx index bff8d02b7..d9d0efdfa 100644 --- a/web/src/components/feed/ThreadItem.tsx +++ b/web/src/components/feed/ThreadItem.tsx @@ -1,5 +1,3 @@ -import { ChatBubbleLeftIcon as ChatBubbleLeftIconOutline } from "@heroicons/react/24/outline"; -import { ChatBubbleLeftIcon as ChatBubbleLeftIconSolid } from "@heroicons/react/24/solid"; import Link from "next/link"; import { ThreadReference } from "src/api/openapi-schema"; @@ -11,6 +9,11 @@ import { Card } from "@/components/ui/rich-card"; import { HStack, styled } from "@/styled-system/jsx"; import { getAssetURL } from "@/utils/asset"; +import { + DiscussionIcon, + DiscussionParticipatingIcon, +} from "../ui/icons/Discussion"; + import { FeedItemMenu } from "./FeedItemMenu/FeedItemMenu"; type Props = { @@ -61,9 +64,9 @@ export function ThreadItem({ thread }: Props) { {hasReplied ? ( - + ) : ( - + )} {replyCount} diff --git a/web/src/components/library/Breadcrumbs.tsx b/web/src/components/library/Breadcrumbs.tsx index c0a648efc..3ce3650a3 100644 --- a/web/src/components/library/Breadcrumbs.tsx +++ b/web/src/components/library/Breadcrumbs.tsx @@ -1,4 +1,3 @@ -import { ChevronRightIcon } from "@heroicons/react/24/outline"; import { last } from "lodash"; import { uniq } from "lodash/fp"; import { FormEventHandler, ForwardedRef, Fragment, forwardRef } from "react"; @@ -11,6 +10,8 @@ import { LinkButton } from "@/components/ui/link-button"; import { LibraryPath, joinLibraryPath } from "@/screens/library/library-path"; import { Box, HStack } from "@/styled-system/jsx"; +import { BreadcrumbIcon } from "../ui/icons/Breadcrumb"; + import { CreatePageAction } from "./CreatePage"; type Props = { @@ -67,7 +68,7 @@ export const Breadcrumbs_ = ( return ( - + - + @@ -109,7 +110,7 @@ export const Breadcrumbs_ = ( {isEditing && ( <> - + handleRemove(a)} > - + )} diff --git a/web/src/components/library/links/LinkIndexView/LinkIndexView.tsx b/web/src/components/library/links/LinkIndexView/LinkIndexView.tsx index 06068cf1c..48ccff1b2 100644 --- a/web/src/components/library/links/LinkIndexView/LinkIndexView.tsx +++ b/web/src/components/library/links/LinkIndexView/LinkIndexView.tsx @@ -1,9 +1,8 @@ -import { XMarkIcon } from "@heroicons/react/24/outline"; - import { PaginationControls } from "src/components/site/PaginationControls/PaginationControls"; import { Unready } from "src/components/site/Unready"; import { Button } from "@/components/ui/button"; +import { CancelIcon } from "@/components/ui/icons/Cancel"; import { Input } from "@/components/ui/input"; import { VStack, styled } from "@/styled-system/jsx"; @@ -42,7 +41,7 @@ export function LinkIndexView(props: Props) { type="reset" onClick={handlers.handleReset} > - + )} + + ) : ( - + + ); } diff --git a/web/src/components/notifications/NotificationsMenu.tsx b/web/src/components/notifications/NotificationsMenu.tsx index 72b5a7575..431d3b58f 100644 --- a/web/src/components/notifications/NotificationsMenu.tsx +++ b/web/src/components/notifications/NotificationsMenu.tsx @@ -1,16 +1,16 @@ import { Portal } from "@ark-ui/react"; -import { ArchiveBoxIcon, Cog6ToothIcon } from "@heroicons/react/24/outline"; import Link from "next/link"; +import { MemberAvatar } from "@/components/member/MemberBadge/MemberAvatar"; +import { Button } from "@/components/ui/button"; +import { ArchiveIcon } from "@/components/ui/icons/Archive"; +import { SettingsIcon } from "@/components/ui/icons/Settings"; +import { LinkButton } from "@/components/ui/link-button"; import * as Menu from "@/components/ui/menu"; -import { Center, HStack, LStack, WStack, styled } from "@/styled-system/jsx"; +import { Center, LStack, WStack, styled } from "@/styled-system/jsx"; import { hstack } from "@/styled-system/patterns"; import { deriveError } from "@/utils/error"; -import { MemberAvatar } from "../member/MemberBadge/MemberAvatar"; -import { Button } from "../ui/button"; -import { LinkButton } from "../ui/link-button"; - import { NotificationsTrigger } from "./NotificationsTrigger"; import { NotificationItem } from "./item"; import { Props, useNotifications } from "./useNotifications"; @@ -105,7 +105,7 @@ export function NotificationsMenu(props: Props) { handlers.handleMarkAs(notification.id, "read") } > - + @@ -124,5 +124,5 @@ export function NotificationAvatar(props: { notification: NotificationItem }) { return ; } - return ; + return ; } diff --git a/web/src/components/site/DeleteConfirmationButton.tsx b/web/src/components/site/DeleteConfirmationButton.tsx index f932b623d..067ca1dd8 100644 --- a/web/src/components/site/DeleteConfirmationButton.tsx +++ b/web/src/components/site/DeleteConfirmationButton.tsx @@ -1,16 +1,14 @@ "use client"; -import { TrashIcon } from "@heroicons/react/24/outline"; -import { XIcon } from "lucide-react"; - import { Button, ButtonProps } from "@/components/ui/button"; +import { IconButton } from "@/components/ui/icon-button"; +import { CancelIcon } from "@/components/ui/icons/Cancel"; +import { DeleteIcon } from "@/components/ui/icons/Delete"; import { cx } from "@/styled-system/css"; import { HStack } from "@/styled-system/jsx"; import { menuItemColorPalette } from "@/styled-system/patterns"; import { button } from "@/styled-system/recipes"; -import { IconButton } from "../ui/icon-button"; - import { useConfirmation } from "./useConfirmation"; export type Props = ButtonProps & { @@ -49,7 +47,7 @@ export function DeleteWithConfirmationButton({ onDelete, ...props }: Props) { title="Cancel delete" onClick={handleCancelAction} > - + ); @@ -64,7 +62,7 @@ export function DeleteWithConfirmationButton({ onDelete, ...props }: Props) { onClick={handleConfirmAction} > - Delete + Delete ); diff --git a/web/src/components/site/DeleteConfirmationMenuItem.tsx b/web/src/components/site/DeleteConfirmationMenuItem.tsx index 90ce6c1e4..190d0654c 100644 --- a/web/src/components/site/DeleteConfirmationMenuItem.tsx +++ b/web/src/components/site/DeleteConfirmationMenuItem.tsx @@ -1,8 +1,7 @@ "use client"; -import { TrashIcon } from "@heroicons/react/24/outline"; - import { CancelAction } from "@/components/site/Action/Cancel"; +import { DeleteIcon } from "@/components/ui/icons/Delete"; import * as Menu from "@/components/ui/menu"; import { HStack } from "@/styled-system/jsx"; import { menuItemColorPalette } from "@/styled-system/patterns"; @@ -45,7 +44,7 @@ export function DeleteWithConfirmationMenuItem(props: Props) { onClick={handleConfirmAction} > - Delete + Delete ); diff --git a/web/src/components/site/Empty.tsx b/web/src/components/site/Empty.tsx index 19ec1872a..760d78637 100644 --- a/web/src/components/site/Empty.tsx +++ b/web/src/components/site/Empty.tsx @@ -1,15 +1,13 @@ -import { CubeTransparentIcon } from "@heroicons/react/24/outline"; import { PropsWithChildren } from "react"; -import { css } from "@/styled-system/css"; import { HStack, styled } from "@/styled-system/jsx"; -const iconStyles = css({ width: "6" }); +import { EmptyIcon } from "../ui/icons/Empty"; export function Empty({ children }: PropsWithChildren) { return ( - + {children} diff --git a/web/src/components/site/Navigation/Search/Search.tsx b/web/src/components/site/Navigation/Search/Search.tsx index 43d266b08..1979ffc58 100644 --- a/web/src/components/site/Navigation/Search/Search.tsx +++ b/web/src/components/site/Navigation/Search/Search.tsx @@ -1,9 +1,8 @@ "use client"; -import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; -import { XMarkIcon } from "@heroicons/react/24/solid"; - import { Button } from "@/components/ui/button"; +import { CancelIcon } from "@/components/ui/icons/Cancel"; +import { SearchIcon } from "@/components/ui/icons/Search"; import { Input } from "@/components/ui/input"; import { styled } from "@/styled-system/jsx"; @@ -45,7 +44,7 @@ export function Search(props: Props) { type="reset" onClick={handlers.handleReset} > - + )} ); diff --git a/web/src/components/site/PaginatedSearch/PaginatedSearch.tsx b/web/src/components/site/PaginatedSearch/PaginatedSearch.tsx index 7b143d2fb..75a56f2a7 100644 --- a/web/src/components/site/PaginatedSearch/PaginatedSearch.tsx +++ b/web/src/components/site/PaginatedSearch/PaginatedSearch.tsx @@ -1,6 +1,5 @@ "use client"; -import { XMarkIcon } from "@heroicons/react/24/outline"; import { zodResolver } from "@hookform/resolvers/zod"; import { useRouter } from "next/navigation"; import { parseAsInteger, useQueryState } from "nuqs"; @@ -10,6 +9,7 @@ import { z } from "zod"; import { PaginationControls } from "src/components/site/PaginationControls/PaginationControls"; import { Button } from "@/components/ui/button"; +import { CancelIcon } from "@/components/ui/icons/Cancel"; import { Input } from "@/components/ui/input"; import { VStack, styled } from "@/styled-system/jsx"; @@ -96,7 +96,7 @@ export function PaginatedSearch(props: Props) { type="reset" onClick={handlers.handleReset} > - + )} )} diff --git a/web/src/screens/auth/RegisterScreen/RegisterForm.tsx b/web/src/screens/auth/RegisterScreen/RegisterForm.tsx index 5fcab54ac..2504cd8f4 100644 --- a/web/src/screens/auth/RegisterScreen/RegisterForm.tsx +++ b/web/src/screens/auth/RegisterScreen/RegisterForm.tsx @@ -1,8 +1,7 @@ "use client"; -import { FingerPrintIcon } from "@heroicons/react/24/outline"; - import { Button } from "@/components/ui/button"; +import { BiometricIcon } from "@/components/ui/icons/Biometric"; import { Input } from "@/components/ui/input"; import { Flex, styled } from "@/styled-system/jsx"; @@ -62,7 +61,7 @@ export function RegisterForm(props: Props) { > device - + diff --git a/web/src/screens/profile/ProfileScreen.tsx b/web/src/screens/profile/ProfileScreen.tsx index e19c5a9c7..46a3694f2 100644 --- a/web/src/screens/profile/ProfileScreen.tsx +++ b/web/src/screens/profile/ProfileScreen.tsx @@ -1,6 +1,5 @@ "use client"; -import { HeartIcon } from "@heroicons/react/24/outline"; import { formatDistanceToNow } from "date-fns"; import { Unready } from "src/components/site/Unready"; @@ -14,6 +13,7 @@ import { EditAction } from "@/components/site/Action/Edit"; import { MoreAction } from "@/components/site/Action/More"; import { SaveAction } from "@/components/site/Action/Save"; import { DotSeparator } from "@/components/site/Dot"; +import { LikeIcon } from "@/components/ui/icons/Like"; import { Input } from "@/components/ui/input"; import { Box, @@ -128,7 +128,7 @@ export function ProfileScreen(props: Props) { textWrap="nowrap" > - + {profile.like_score} likes diff --git a/web/src/screens/thread/ThreadScreen/ThreadScreen.tsx b/web/src/screens/thread/ThreadScreen/ThreadScreen.tsx index 36ff67594..bf06296f8 100644 --- a/web/src/screens/thread/ThreadScreen/ThreadScreen.tsx +++ b/web/src/screens/thread/ThreadScreen/ThreadScreen.tsx @@ -1,7 +1,5 @@ "use client"; -import { ChatBubbleLeftIcon as ChatBubbleLeftIconOutline } from "@heroicons/react/24/outline"; -import { ChatBubbleLeftIcon as ChatBubbleLeftIconSolid } from "@heroicons/react/24/solid"; import { Controller, ControllerProps } from "react-hook-form"; import { Unready } from "src/components/site/Unready"; @@ -16,10 +14,14 @@ import { Breadcrumbs } from "@/components/thread/Breadcrumbs"; import { ReplyBox } from "@/components/thread/ReplyBox/ReplyBox"; import { ReplyList } from "@/components/thread/ReplyList/ReplyList"; import { ThreadMenu } from "@/components/thread/ThreadMenu/ThreadMenu"; -import { TagListField, ThreadTagList } from "@/components/thread/ThreadTagList"; +import { TagListField } from "@/components/thread/ThreadTagList"; import { FormErrorText } from "@/components/ui/FormErrorText"; import { Heading } from "@/components/ui/heading"; import { HeadingInput } from "@/components/ui/heading-input"; +import { + DiscussionIcon, + DiscussionParticipatingIcon, +} from "@/components/ui/icons/Discussion"; import { HStack, LStack, WStack, styled } from "@/styled-system/jsx"; import { Form, Props, useThreadScreen } from "./useThreadScreen"; @@ -180,13 +182,13 @@ function ThreadReplyStatus({ reply_status }: Thread) { {reply_status.replied ? ( - ) : ( - )} From 8bf757f83c2bfeec20cddbee65521c0ae87b146c Mon Sep 17 00:00:00 2001 From: Barnaby Keene Date: Wed, 6 Nov 2024 15:44:14 +0000 Subject: [PATCH 3/3] move all leftover Lucide icons to use re-exported icon components --- .../components/asset/AssetUploadAction.tsx | 6 +-- .../CategoryCardList/CategoryCardList.tsx | 22 ++++++----- .../components/collection/CollectionCard.tsx | 6 +-- .../ContentComposer/ContentComposer.tsx | 8 ++-- .../components/feed/FeedConfig/FeedConfig.tsx | 29 ++++++++------- .../feed/FeedItemMenu/FeedItemMenu.tsx | 10 +++-- .../LibraryPageAssetList.tsx | 4 +- .../LibraryPageCoverImageControl.tsx | 5 +-- .../member/EditAvatar/EditAvatarScreen.tsx | 5 +-- .../member/MemberBadge/MemberAvatar.tsx | 4 +- .../member/MemberBadge/MemberBadge.tsx | 10 ++++- .../member/MemberBadge/MemberIdent.tsx | 6 +-- .../MemberOptions/MemberOptionsMenu.tsx | 4 +- .../role/RoleOptionsMenu/RoleOptionsMenu.tsx | 2 +- .../components/site/IconEditor/IconEditor.tsx | 9 ++--- .../components/thread/ReactList/ReactList.tsx | 4 +- web/src/components/ui/ColourPickerField.tsx | 4 +- web/src/components/ui/combotags.tsx | 6 ++- .../components/ui/form/CardGroupSelect.tsx | 9 ++--- web/src/components/ui/icons/Arrow.tsx | 8 ++++ web/src/components/ui/icons/Author.tsx | 5 +++ web/src/components/ui/icons/Calendar.tsx | 5 +++ web/src/components/ui/icons/Collection.tsx | 5 +++ web/src/components/ui/icons/Colour.tsx | 5 +++ web/src/components/ui/icons/Delete.tsx | 4 +- web/src/components/ui/icons/Media.tsx | 7 ++++ web/src/components/ui/icons/Participating.tsx | 5 +++ web/src/components/ui/icons/Reaction.tsx | 6 +++ web/src/components/ui/icons/Select.tsx | 5 +++ web/src/components/ui/icons/Slug.tsx | 5 +++ web/src/components/ui/icons/Tag.tsx | 5 +++ web/src/components/ui/icons/Typography.tsx | 37 +++++++++++++++++++ .../category/CategoryScreenContextPane.tsx | 10 ++--- .../ThreadScreen/ThreadScreenContextPane.tsx | 31 +++++++++------- 34 files changed, 203 insertions(+), 93 deletions(-) create mode 100644 web/src/components/ui/icons/Arrow.tsx create mode 100644 web/src/components/ui/icons/Author.tsx create mode 100644 web/src/components/ui/icons/Calendar.tsx create mode 100644 web/src/components/ui/icons/Collection.tsx create mode 100644 web/src/components/ui/icons/Colour.tsx create mode 100644 web/src/components/ui/icons/Media.tsx create mode 100644 web/src/components/ui/icons/Participating.tsx create mode 100644 web/src/components/ui/icons/Reaction.tsx create mode 100644 web/src/components/ui/icons/Select.tsx create mode 100644 web/src/components/ui/icons/Slug.tsx create mode 100644 web/src/components/ui/icons/Tag.tsx create mode 100644 web/src/components/ui/icons/Typography.tsx diff --git a/web/src/components/asset/AssetUploadAction.tsx b/web/src/components/asset/AssetUploadAction.tsx index 65bfcd267..39fc9ed5e 100644 --- a/web/src/components/asset/AssetUploadAction.tsx +++ b/web/src/components/asset/AssetUploadAction.tsx @@ -2,7 +2,6 @@ import { FileUploadFileAcceptDetails, FileUploadFileRejectDetails, } from "@ark-ui/react"; -import { ImageIcon, ImagePlusIcon } from "lucide-react"; import mime from "mime-db"; import { PropsWithChildren } from "react"; import { toast } from "sonner"; @@ -12,6 +11,7 @@ import { assetUpload } from "@/api/openapi-client/assets"; import { Asset, AssetID } from "@/api/openapi-schema"; import { Button } from "@/components/ui/button"; import * as FileUpload from "@/components/ui/file-upload"; +import { MediaAddIcon, MediaIcon } from "@/components/ui/icons/Media"; import { ButtonVariantProps, button } from "@/styled-system/recipes"; type AssetUploadActionProps = { @@ -116,12 +116,12 @@ export function AssetUploadAction({ > {props.operation === "add" ? ( <> - + {props.hideLabel ? "" : "add cover"} ) : ( <> - {props.hideLabel ? "" : "replace cover"} + {props.hideLabel ? "" : "replace cover"} )} diff --git a/web/src/components/category/CategoryCardList/CategoryCardList.tsx b/web/src/components/category/CategoryCardList/CategoryCardList.tsx index fa79b0122..4f01d57cd 100644 --- a/web/src/components/category/CategoryCardList/CategoryCardList.tsx +++ b/web/src/components/category/CategoryCardList/CategoryCardList.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import { Category } from "@/api/openapi-schema"; import { Heading } from "@/components/ui/heading"; +import { DiscussionIcon } from "@/components/ui/icons/Discussion"; import { CardGrid } from "@/components/ui/rich-card"; import { categoryColourCSS } from "@/lib/category/colours"; import { CardBox, HStack, LStack, WStack, styled } from "@/styled-system/jsx"; @@ -45,19 +46,20 @@ export function CategoryCard(props: Category) { display="flex" justifyContent="space-between" > - - - - {props.name} - + + + {props.name} + - - + + - {props.description} - + {props.description} - {props.postCount} threads + + + {props.postCount} threads + ); } diff --git a/web/src/components/collection/CollectionCard.tsx b/web/src/components/collection/CollectionCard.tsx index d66821bdb..f948f04fa 100644 --- a/web/src/components/collection/CollectionCard.tsx +++ b/web/src/components/collection/CollectionCard.tsx @@ -1,11 +1,11 @@ -import { BoxesIcon } from "lucide-react"; - import { Collection } from "@/api/openapi-schema"; import { MemberBadge } from "@/components/member/MemberBadge/MemberBadge"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/rich-card"; import { HStack, WStack } from "@/styled-system/jsx"; +import { CollectionIcon } from "../ui/icons/Collection"; + import { CollectionMenu } from "./CollectionMenu/CollectionMenu"; type Props = { @@ -47,7 +47,7 @@ function CollectionItems(props: Props) { const itemsLabel = props.collection.item_count === 1 ? "item" : "items"; return ( - {" "} + {" "} {props.collection.item_count} {itemsLabel} diff --git a/web/src/components/content/ContentComposer/ContentComposer.tsx b/web/src/components/content/ContentComposer/ContentComposer.tsx index ac6fd4b4e..42cc0ae56 100644 --- a/web/src/components/content/ContentComposer/ContentComposer.tsx +++ b/web/src/components/content/ContentComposer/ContentComposer.tsx @@ -1,5 +1,8 @@ import { Portal } from "@ark-ui/react"; import { EditorContent } from "@tiptap/react"; +import { match } from "ts-pattern"; + +import { Button } from "@/components/ui/button"; import { BoldIcon, CodeIcon, @@ -17,10 +20,7 @@ import { StrikethroughIcon, TextIcon, TextQuoteIcon, -} from "lucide-react"; -import { match } from "ts-pattern"; - -import { Button } from "@/components/ui/button"; +} from "@/components/ui/icons/Typography"; import * as Menu from "@/components/ui/menu"; import { css } from "@/styled-system/css"; import { LStack, styled } from "@/styled-system/jsx"; diff --git a/web/src/components/feed/FeedConfig/FeedConfig.tsx b/web/src/components/feed/FeedConfig/FeedConfig.tsx index 2ff9d4028..6121b4439 100644 --- a/web/src/components/feed/FeedConfig/FeedConfig.tsx +++ b/web/src/components/feed/FeedConfig/FeedConfig.tsx @@ -6,7 +6,6 @@ import { createListCollection, } from "@ark-ui/react"; import { zodResolver } from "@hookform/resolvers/zod"; -import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import { useRouter } from "next/navigation"; import { useQueryState } from "nuqs"; import { Controller, ControllerProps, useForm } from "react-hook-form"; @@ -22,6 +21,10 @@ import { EditingSchema, } from "@/components/site/SiteContextPane/useSiteContextPane"; import { Unready } from "@/components/site/Unready"; +import { CheckIcon } from "@/components/ui/icons/Check"; +import { DiscussionIcon } from "@/components/ui/icons/Discussion"; +import { LibraryIcon } from "@/components/ui/icons/Library"; +import { SelectIcon } from "@/components/ui/icons/Select"; import * as Select from "@/components/ui/select"; import { FeedLayoutConfigSchema, @@ -30,7 +33,7 @@ import { import { useSettingsMutation } from "@/lib/settings/mutation"; import { Settings } from "@/lib/settings/settings"; import { useSettings } from "@/lib/settings/settings-client"; -import { HStack } from "@/styled-system/jsx"; +import { HStack, styled } from "@/styled-system/jsx"; import { hasPermission } from "@/utils/permissions"; import { refreshFeed } from "../../../lib/feed/refresh"; @@ -124,10 +127,12 @@ const sources = [ { label: "Threads", value: "threads" as const, + icon: , }, { label: "Library", value: "library" as const, + icon: , }, ]; @@ -167,15 +172,6 @@ export function FeedConfig(props: Props) { ); } -function getFeedSourceName(metadata: Settings["metadata"]) { - switch (metadata.feed.source.type) { - case "threads": - return "Feed"; - case "library": - return "Library"; - } -} - function SelectField({ collection, defaultValue, @@ -201,20 +197,25 @@ function SelectField({ size="xs" defaultValue={[defaultValue]} collection={collection} - positioning={{ sameWidth: true }} + positioning={{ sameWidth: false }} onValueChange={handleChange} > - + {sources.map((item) => ( - {item.label} + + + {item.icon} + {item.label} + + diff --git a/web/src/components/feed/FeedItemMenu/FeedItemMenu.tsx b/web/src/components/feed/FeedItemMenu/FeedItemMenu.tsx index 14f556da3..77d47f025 100644 --- a/web/src/components/feed/FeedItemMenu/FeedItemMenu.tsx +++ b/web/src/components/feed/FeedItemMenu/FeedItemMenu.tsx @@ -1,9 +1,11 @@ import { Portal } from "@ark-ui/react"; import { format } from "date-fns/format"; -import { LinkIcon, ShareIcon, TrashIcon } from "lucide-react"; import { CancelAction } from "@/components/site/Action/Cancel"; import { MoreAction } from "@/components/site/Action/More"; +import { DeleteIcon } from "@/components/ui/icons/Delete"; +import { LinkIcon } from "@/components/ui/icons/Link"; +import { ShareIcon } from "@/components/ui/icons/Share"; import * as Menu from "@/components/ui/menu"; import { HStack, styled } from "@/styled-system/jsx"; import { menuItemColorPalette } from "@/styled-system/patterns"; @@ -39,14 +41,14 @@ export function FeedItemMenu(props: Props) { - Copy link + Copy link {isSharingEnabled && ( - Share + Share )} @@ -81,7 +83,7 @@ export function FeedItemMenu(props: Props) { closeOnSelect={false} > - Delete + Delete ))} diff --git a/web/src/components/library/LibraryPageAssetList/LibraryPageAssetList.tsx b/web/src/components/library/LibraryPageAssetList/LibraryPageAssetList.tsx index 7a0f7ee48..e3a7e7d4f 100644 --- a/web/src/components/library/LibraryPageAssetList/LibraryPageAssetList.tsx +++ b/web/src/components/library/LibraryPageAssetList/LibraryPageAssetList.tsx @@ -1,4 +1,3 @@ -import { ImagePlusIcon } from "lucide-react"; import { parseAsBoolean, useQueryState } from "nuqs"; import { handle } from "@/api/client"; @@ -8,6 +7,7 @@ import { AssetUploadAction } from "@/components/asset/AssetUploadAction"; import { Button } from "@/components/ui/button"; import { IconButton } from "@/components/ui/icon-button"; import { DeleteIcon } from "@/components/ui/icons/Delete"; +import { MediaAddIcon } from "@/components/ui/icons/Media"; import { useLibraryMutation } from "@/lib/library/library"; import { Box, HStack } from "@/styled-system/jsx"; @@ -118,7 +118,7 @@ export function LibraryPageAssetList(props: Props) { type="button" variant="outline" > - + )} diff --git a/web/src/components/library/LibraryPageCoverImageControl/LibraryPageCoverImageControl.tsx b/web/src/components/library/LibraryPageCoverImageControl/LibraryPageCoverImageControl.tsx index 557b25434..b8c5a469f 100644 --- a/web/src/components/library/LibraryPageCoverImageControl/LibraryPageCoverImageControl.tsx +++ b/web/src/components/library/LibraryPageCoverImageControl/LibraryPageCoverImageControl.tsx @@ -1,7 +1,6 @@ -import { ImageMinusIcon } from "lucide-react"; - import { AssetUploadAction } from "@/components/asset/AssetUploadAction"; import { Button } from "@/components/ui/button"; +import { MediaRemoveIcon } from "@/components/ui/icons/Media"; import { Props, @@ -24,7 +23,7 @@ export function LibraryPageCoverImageControl(props: Props) { variant="outline" onClick={handleRemoveCoverImage} > - + remove cover )} diff --git a/web/src/components/member/EditAvatar/EditAvatarScreen.tsx b/web/src/components/member/EditAvatar/EditAvatarScreen.tsx index 213f0ba09..862255c69 100644 --- a/web/src/components/member/EditAvatar/EditAvatarScreen.tsx +++ b/web/src/components/member/EditAvatar/EditAvatarScreen.tsx @@ -1,7 +1,6 @@ -import { InfoIcon } from "lucide-react"; - import { IconEditor } from "@/components/site/IconEditor/IconEditor"; import { Unready } from "@/components/site/Unready"; +import { InfoIcon } from "@/components/ui/icons/Info"; import { HStack, VStack } from "@/styled-system/jsx"; import { Props, useEditAvatar } from "./useEditAvatar"; @@ -21,7 +20,7 @@ export function EditAvatarScreen(props: Props) { showPreviews /> - +

You can pinch or use a mouse wheel to zoom/crop.

 diff --git a/web/src/components/member/MemberBadge/MemberAvatar.tsx b/web/src/components/member/MemberBadge/MemberAvatar.tsx index 63fb95fc4..278b27ede 100644 --- a/web/src/components/member/MemberBadge/MemberAvatar.tsx +++ b/web/src/components/member/MemberBadge/MemberAvatar.tsx @@ -1,9 +1,9 @@ -import { ImagePlusIcon } from "lucide-react"; import Image from "next/image"; import { getAccountGetAvatarKey } from "@/api/openapi-client/accounts"; import { Identifier, ProfileReference } from "@/api/openapi-schema"; import { Button } from "@/components/ui/button"; +import { MediaAddIcon } from "@/components/ui/icons/Media"; import { API_ADDRESS } from "@/config"; import { css } from "@/styled-system/css"; import { Box } from "@/styled-system/jsx"; @@ -42,7 +42,7 @@ export function MemberAvatar({ profile, size, editable }: Props) { color="bg.default" size="2xl" > - + diff --git a/web/src/components/member/MemberBadge/MemberBadge.tsx b/web/src/components/member/MemberBadge/MemberBadge.tsx index 41818ccdc..465a470f2 100644 --- a/web/src/components/member/MemberBadge/MemberBadge.tsx +++ b/web/src/components/member/MemberBadge/MemberBadge.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { ProfileReference } from "@/api/openapi-schema"; import { WEB_ADDRESS } from "@/config"; +import { css } from "@/styled-system/css"; import { HStack } from "@/styled-system/jsx"; import { MemberOptionsMenu } from "../MemberOptions/MemberOptionsMenu"; @@ -21,6 +22,11 @@ export type Props = { as?: "menu" | "link"; }; +const identContainerStyles = css({ + maxW: "full", + flexShrink: "0", +}); + export function MemberBadge({ profile, size = "md", @@ -33,7 +39,7 @@ export function MemberBadge({ if (as === "menu") { return ( - + + + + + - {children} + + {children} + diff --git a/web/src/components/role/RoleOptionsMenu/RoleOptionsMenu.tsx b/web/src/components/role/RoleOptionsMenu/RoleOptionsMenu.tsx index bcad5e847..54d97a338 100644 --- a/web/src/components/role/RoleOptionsMenu/RoleOptionsMenu.tsx +++ b/web/src/components/role/RoleOptionsMenu/RoleOptionsMenu.tsx @@ -1,10 +1,10 @@ import { MenuSelectionDetails, Portal } from "@ark-ui/react"; -import { EditIcon } from "lucide-react"; import { PropsWithChildren } from "react"; import { handle } from "@/api/client"; import { Role } from "@/api/openapi-schema"; import { DeleteWithConfirmationMenuItem } from "@/components/site/DeleteConfirmationMenuItem"; +import { EditIcon } from "@/components/ui/icons/Edit"; import * as Menu from "@/components/ui/menu"; import { HStack } from "@/styled-system/jsx"; diff --git a/web/src/components/site/IconEditor/IconEditor.tsx b/web/src/components/site/IconEditor/IconEditor.tsx index a0a596dbb..d49a72889 100644 --- a/web/src/components/site/IconEditor/IconEditor.tsx +++ b/web/src/components/site/IconEditor/IconEditor.tsx @@ -1,13 +1,10 @@ -import { ArrowLeft } from "lucide-react"; -import { borderRadius } from "polished"; import { CSSProperties } from "react"; import AvatarEditor from "react-avatar-editor"; import { avatarSize } from "@/components/member/MemberBadge/MemberAvatar"; import { Button } from "@/components/ui/button"; -import { css } from "@/styled-system/css"; -import { Box, Flex, HStack, LStack, VStack } from "@/styled-system/jsx"; -import { styled } from "@/styled-system/jsx"; +import { ArrowLeftIcon } from "@/components/ui/icons/Arrow"; +import { Box, Flex, HStack, LStack, styled } from "@/styled-system/jsx"; import { button } from "@/styled-system/recipes"; import { Props, useIconEditor } from "./useIconEditor"; @@ -50,7 +47,7 @@ export function IconEditor(props: Props) { position={position} onPositionChange={onPositionChange} /> - +

How it'll look on posts

 )} diff --git a/web/src/components/thread/ReactList/ReactList.tsx b/web/src/components/thread/ReactList/ReactList.tsx index 6f3f1a1a0..3f0489e48 100644 --- a/web/src/components/thread/ReactList/ReactList.tsx +++ b/web/src/components/thread/ReactList/ReactList.tsx @@ -2,12 +2,12 @@ import { Portal } from "@ark-ui/react"; import { EmojiClickData, EmojiStyle } from "emoji-picker-react"; import { motion } from "framer-motion"; import { throttle } from "lodash"; -import { SmilePlusIcon } from "lucide-react"; import dynamic from "next/dynamic"; import { useCallback, useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { IconButton } from "@/components/ui/icon-button"; +import { ReactionAddIcon } from "@/components/ui/icons/Reaction"; import * as Popover from "@/components/ui/popover"; import { css } from "@/styled-system/css"; import { HStack } from "@/styled-system/jsx"; @@ -202,7 +202,7 @@ function ReactionPickerTrigger(props: ReactionPickerTriggerProps) { borderRadius="md" color="fg.muted" > - + diff --git a/web/src/components/ui/ColourPickerField.tsx b/web/src/components/ui/ColourPickerField.tsx index 9b53c4bd1..60da53f4a 100644 --- a/web/src/components/ui/ColourPickerField.tsx +++ b/web/src/components/ui/ColourPickerField.tsx @@ -2,13 +2,13 @@ import { ColorPickerValueChangeDetails, parseColor, } from "@ark-ui/react/color-picker"; -import { PipetteIcon } from "lucide-react"; import { Control, Controller, FieldValues, Path } from "react-hook-form"; import * as ColorPicker from "@/components/ui/color-picker"; import { HStack, Stack } from "@/styled-system/jsx"; import { IconButton } from "./icon-button"; +import { ColourPipetteIcon } from "./icons/Colour"; import { Input } from "./input"; const presets = [ @@ -71,7 +71,7 @@ export function ColourPickerField(props: Props) { variant="outline" aria-label="Pick a color" > - + diff --git a/web/src/components/ui/combotags.tsx b/web/src/components/ui/combotags.tsx index 618392011..581a0ab16 100644 --- a/web/src/components/ui/combotags.tsx +++ b/web/src/components/ui/combotags.tsx @@ -1,11 +1,13 @@ import { createListCollection, useTagsInput } from "@ark-ui/react"; -import { XIcon } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import * as Combobox from "@/components/ui/combobox"; import { IconButton } from "@/components/ui/icon-button"; import * as TagsInput from "@/components/ui/tags-input"; +import { CancelIcon } from "./icons/Cancel"; +import { DeleteSmallIcon } from "./icons/Delete"; + export type Props = { initialValue?: string[]; onQuery: (query: string) => Promise; @@ -96,7 +98,7 @@ export function Combotags(props: Props) { {value} - + diff --git a/web/src/components/ui/form/CardGroupSelect.tsx b/web/src/components/ui/form/CardGroupSelect.tsx index d1bc6c49d..2a1d985a9 100644 --- a/web/src/components/ui/form/CardGroupSelect.tsx +++ b/web/src/components/ui/form/CardGroupSelect.tsx @@ -1,11 +1,12 @@ import { CheckboxCheckedChangeDetails } from "@ark-ui/react"; -import { CheckIcon } from "lucide-react"; import { Controller, ControllerProps, FieldValues } from "react-hook-form"; import * as Checkbox from "@/components/ui/checkbox"; import { Box, CardBox } from "@/styled-system/jsx"; import { hstack, lstack } from "@/styled-system/patterns"; +import { CheckIcon } from "../icons/Check"; + type CollectionItem = { label: string; description: string; @@ -30,11 +31,7 @@ export function CardGroupSelect({ const defaultValue = formState.defaultValues![props.name]; return ( - + {items.map((item) => { function handleChange({ checked }: CheckboxCheckedChangeDetails) { const current = field.value; diff --git a/web/src/components/ui/icons/Arrow.tsx b/web/src/components/ui/icons/Arrow.tsx new file mode 100644 index 000000000..af7fceab3 --- /dev/null +++ b/web/src/components/ui/icons/Arrow.tsx @@ -0,0 +1,8 @@ +import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const ArrowLeftIcon = styled(ArrowLeft); +export const ArrowRightIcon = styled(ArrowRight); +export const ArrowUpIcon = styled(ArrowUp); +export const ArrowDownIcon = styled(ArrowDown); diff --git a/web/src/components/ui/icons/Author.tsx b/web/src/components/ui/icons/Author.tsx new file mode 100644 index 000000000..01a0cd6cc --- /dev/null +++ b/web/src/components/ui/icons/Author.tsx @@ -0,0 +1,5 @@ +import { Pencil } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const AuthorIcon = styled(Pencil); diff --git a/web/src/components/ui/icons/Calendar.tsx b/web/src/components/ui/icons/Calendar.tsx new file mode 100644 index 000000000..f43fbdd25 --- /dev/null +++ b/web/src/components/ui/icons/Calendar.tsx @@ -0,0 +1,5 @@ +import { Calendar } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const CalendarIcon = styled(Calendar); diff --git a/web/src/components/ui/icons/Collection.tsx b/web/src/components/ui/icons/Collection.tsx new file mode 100644 index 000000000..aedd8b6e7 --- /dev/null +++ b/web/src/components/ui/icons/Collection.tsx @@ -0,0 +1,5 @@ +import { BoxesIcon } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const CollectionIcon = styled(BoxesIcon); diff --git a/web/src/components/ui/icons/Colour.tsx b/web/src/components/ui/icons/Colour.tsx new file mode 100644 index 000000000..685779c8e --- /dev/null +++ b/web/src/components/ui/icons/Colour.tsx @@ -0,0 +1,5 @@ +import { PipetteIcon } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const ColourPipetteIcon = styled(PipetteIcon); diff --git a/web/src/components/ui/icons/Delete.tsx b/web/src/components/ui/icons/Delete.tsx index 5c3dcb7e9..0ad543717 100644 --- a/web/src/components/ui/icons/Delete.tsx +++ b/web/src/components/ui/icons/Delete.tsx @@ -1,5 +1,7 @@ -import { Trash2 } from "lucide-react"; +import { Trash2, XIcon } from "lucide-react"; import { styled } from "@/styled-system/jsx"; export const DeleteIcon = styled(Trash2); + +export const DeleteSmallIcon = styled(XIcon); diff --git a/web/src/components/ui/icons/Media.tsx b/web/src/components/ui/icons/Media.tsx new file mode 100644 index 000000000..ca4976646 --- /dev/null +++ b/web/src/components/ui/icons/Media.tsx @@ -0,0 +1,7 @@ +import { Image, ImageMinus, ImagePlus } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const MediaIcon = styled(Image); +export const MediaAddIcon = styled(ImagePlus); +export const MediaRemoveIcon = styled(ImageMinus); diff --git a/web/src/components/ui/icons/Participating.tsx b/web/src/components/ui/icons/Participating.tsx new file mode 100644 index 000000000..2c7df7c46 --- /dev/null +++ b/web/src/components/ui/icons/Participating.tsx @@ -0,0 +1,5 @@ +import { HandHeart } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const ParticipatingIcon = styled(HandHeart); diff --git a/web/src/components/ui/icons/Reaction.tsx b/web/src/components/ui/icons/Reaction.tsx new file mode 100644 index 000000000..3a2ab1b06 --- /dev/null +++ b/web/src/components/ui/icons/Reaction.tsx @@ -0,0 +1,6 @@ +import { SmileIcon, SmilePlusIcon } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const ReactionIcon = styled(SmileIcon); +export const ReactionAddIcon = styled(SmilePlusIcon); diff --git a/web/src/components/ui/icons/Select.tsx b/web/src/components/ui/icons/Select.tsx new file mode 100644 index 000000000..67fdf805d --- /dev/null +++ b/web/src/components/ui/icons/Select.tsx @@ -0,0 +1,5 @@ +import { ChevronsUpDownIcon } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const SelectIcon = styled(ChevronsUpDownIcon); diff --git a/web/src/components/ui/icons/Slug.tsx b/web/src/components/ui/icons/Slug.tsx new file mode 100644 index 000000000..9723e6164 --- /dev/null +++ b/web/src/components/ui/icons/Slug.tsx @@ -0,0 +1,5 @@ +import { SlashSquare } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const SlugIcon = styled(SlashSquare); diff --git a/web/src/components/ui/icons/Tag.tsx b/web/src/components/ui/icons/Tag.tsx new file mode 100644 index 000000000..3cb8ec362 --- /dev/null +++ b/web/src/components/ui/icons/Tag.tsx @@ -0,0 +1,5 @@ +import { Tag } from "lucide-react"; + +import { styled } from "@/styled-system/jsx"; + +export const TagIcon = styled(Tag); diff --git a/web/src/components/ui/icons/Typography.tsx b/web/src/components/ui/icons/Typography.tsx new file mode 100644 index 000000000..de4e10e56 --- /dev/null +++ b/web/src/components/ui/icons/Typography.tsx @@ -0,0 +1,37 @@ +import { + BoldIcon, + CodeIcon, + CodeSquareIcon, + Heading1Icon, + Heading2Icon, + Heading3Icon, + Heading4Icon, + Heading5Icon, + Heading6Icon, + ImageIcon, + ItalicIcon, + ListIcon, + ListOrderedIcon, + StrikethroughIcon, + TextIcon, + TextQuoteIcon, +} from "lucide-react"; + +export { + BoldIcon, + CodeIcon, + CodeSquareIcon, + Heading1Icon, + Heading2Icon, + Heading3Icon, + Heading4Icon, + Heading5Icon, + Heading6Icon, + ImageIcon, + ItalicIcon, + ListIcon, + ListOrderedIcon, + StrikethroughIcon, + TextIcon, + TextQuoteIcon, +}; diff --git a/web/src/screens/category/CategoryScreenContextPane.tsx b/web/src/screens/category/CategoryScreenContextPane.tsx index 67aa39f24..4cd75798c 100644 --- a/web/src/screens/category/CategoryScreenContextPane.tsx +++ b/web/src/screens/category/CategoryScreenContextPane.tsx @@ -1,9 +1,9 @@ "use client"; -import { TagIcon, UsersIcon } from "lucide-react"; - import { CategoryBadge } from "@/components/category/CategoryBadge"; import { Unready } from "@/components/site/Unready"; +import { DiscussionIcon } from "@/components/ui/icons/Discussion"; +import { SlugIcon } from "@/components/ui/icons/Slug"; import * as Table from "@/components/ui/table"; import { cva } from "@/styled-system/css"; import { HStack, LStack, styled } from "@/styled-system/jsx"; @@ -38,13 +38,13 @@ export function CategoryScreenContextPane(props: Props) { const tableData = [ { label: "slug", - icon: TagIcon, + icon: SlugIcon, value: category.slug, style: "numeric" as const, }, { label: "threads", - icon: UsersIcon, + icon: DiscussionIcon, value: `${category.postCount}`, }, ]; @@ -60,7 +60,7 @@ export function CategoryScreenContextPane(props: Props) { - + {item.label} diff --git a/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx b/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx index 397fdbebc..fd8913565 100644 --- a/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx +++ b/web/src/screens/thread/ThreadScreen/ThreadScreenContextPane.tsx @@ -1,17 +1,15 @@ "use client"; import { formatDate } from "date-fns"; -import { - CalendarIcon, - HandHeartIcon, - PencilLineIcon, - TagIcon, - UsersIcon, -} from "lucide-react"; import { MemberBadge } from "@/components/member/MemberBadge/MemberBadge"; import { Unready } from "@/components/site/Unready"; import { Heading } from "@/components/ui/heading"; +import { AuthorIcon } from "@/components/ui/icons/Author"; +import { CalendarIcon } from "@/components/ui/icons/Calendar"; +import { MembersIcon } from "@/components/ui/icons/Members"; +import { ParticipatingIcon } from "@/components/ui/icons/Participating"; +import { SlugIcon } from "@/components/ui/icons/Slug"; import * as Table from "@/components/ui/table"; import { cva } from "@/styled-system/css"; import { HStack, LStack, styled } from "@/styled-system/jsx"; @@ -47,13 +45,13 @@ export function ThreadScreenContextPane(props: Props) { const tableData = [ { label: "ID", - icon: TagIcon, + icon: SlugIcon, value: thread.id, style: "numeric" as const, }, { label: "author", - icon: PencilLineIcon, + icon: AuthorIcon, value: ( {thread.title} {thread.description} - + {tableData.map((item) => ( - - + + {item.label} @@ -101,6 +99,11 @@ export function ThreadScreenContextPane(props: Props) { justifyContent="flex-end" alignItems="center" textAlign="right" + overflow="hidden" + textOverflow="ellipsis" + width="full" + maxWidth="full" + minW="0" > {item.value}