From 2f3f1ebd8ae32c2fc26b796caa8600ad66f94ceb Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 14 Jun 2026 11:02:56 -0400 Subject: [PATCH 1/2] Migrate app icons to Phosphor --- .changeset/migrate-icons-to-phosphor.md | 5 + src/app/components/AccountDataEditor.tsx | 3 +- src/app/components/BackupRestore.tsx | 3 +- src/app/components/DefaultErrorPage.tsx | 3 +- src/app/components/DeviceVerification.tsx | 3 +- .../components/DeviceVerificationSetup.tsx | 16 +- src/app/components/IncomingCallModal.tsx | 3 +- src/app/components/JoinRulesSwitcher.tsx | 6 +- src/app/components/ManualVerification.tsx | 3 +- src/app/components/Pdf-viewer/PdfViewer.tsx | 3 +- .../components/RoomNotificationSwitcher.tsx | 3 +- .../components/SwipeableMessageWrapper.tsx | 3 +- src/app/components/UIAFlowOverlay.tsx | 3 +- .../create-room/AdditionalCreatorInput.tsx | 3 +- .../create-room/CreateRoomAccessSelector.tsx | 5 +- .../create-room/CreateRoomAliasInput.tsx | 3 +- .../create-room/CreateRoomTypeSelector.tsx | 5 +- .../create-room/RoomVersionSelector.tsx | 3 +- .../DirectInvitePrompt.tsx | 3 +- src/app/components/editor/MarkdownToolbar.tsx | 6 +- .../autocomplete/RoomMentionAutocomplete.tsx | 3 +- .../autocomplete/UserMentionAutocomplete.tsx | 3 +- src/app/components/emoji-board/EmojiBoard.tsx | 3 +- .../emoji-board/components/NoStickerPacks.tsx | 3 +- .../emoji-board/components/SearchInput.tsx | 3 +- .../emoji-board/components/Sidebar.tsx | 17 +- .../emoji-board/useEmojiGroupIcons.ts | 4 +- .../components/event-history/EventHistory.tsx | 3 +- .../components/event-readers/EventReaders.tsx | 15 +- .../components/image-editor/ImageEditor.tsx | 3 +- .../image-pack-view/ImagePackView.tsx | 3 +- .../components/image-pack-view/ImageTile.tsx | 3 +- .../components/image-pack-view/PackMeta.tsx | 3 +- .../image-pack-view/UsageSwitcher.tsx | 3 +- .../components/image-viewer/ImageViewer.tsx | 3 +- .../invite-user-prompt/InviteUserPrompt.tsx | 3 +- .../join-address-prompt/JoinAddressPrompt.tsx | 3 +- .../knock-room-prompt/KnockRoomPrompt.tsx | 3 +- .../leave-room-prompt/LeaveRoomPrompt.tsx | 3 +- .../leave-space-prompt/LeaveSpacePrompt.tsx | 3 +- src/app/components/member-tile/MemberTile.tsx | 3 +- src/app/components/message/FileHeader.tsx | 3 +- .../components/message/MsgTypeRenderers.tsx | 3 +- src/app/components/message/Reaction.tsx | 3 +- src/app/components/message/Reply.tsx | 5 +- .../message/content/AudioContent.tsx | 3 +- .../message/content/EventContent.tsx | 5 +- .../message/content/FallbackContent.tsx | 3 +- .../message/content/FileContent.tsx | 3 +- .../message/content/ImageContent.tsx | 3 +- .../message/content/VideoContent.tsx | 3 +- .../message/modals/MessageDelete.tsx | 3 +- .../message/modals/MessageEditHistory.tsx | 3 +- .../message/modals/MessageForward.tsx | 3 +- .../message/modals/MessageReactions.tsx | 3 +- .../message/modals/MessageReadRecipts.tsx | 3 +- .../message/modals/MessageReport.tsx | 3 +- .../message/modals/MessageSource.tsx | 3 +- .../NotificationBanner.tsx | 3 +- .../password-input/PasswordInput.tsx | 3 +- src/app/components/room-avatar/RoomAvatar.tsx | 3 +- src/app/components/room-card/RoomCard.tsx | 3 +- src/app/components/room-intro/RoomIntro.tsx | 3 +- .../room-topic-viewer/RoomTopicViewer.tsx | 3 +- .../SettingMenuSelector.tsx | 3 +- .../components/setting-tile/SettingTile.tsx | 3 +- .../TelemetryConsentBanner.tsx | 3 +- src/app/components/text-viewer/TextViewer.tsx | 3 +- .../components/theme/ThemeMigrationBanner.tsx | 3 +- src/app/components/theme/ThemePreviewCard.tsx | 14 +- .../components/uia-stages/PasswordStage.tsx | 3 +- src/app/components/uia-stages/SSOStage.tsx | 3 +- .../components/upload-board/UploadBoard.tsx | 3 +- .../upload-card/CompactUploadCardRenderer.tsx | 3 +- src/app/components/upload-card/UploadCard.tsx | 3 +- .../upload-card/UploadCardRenderer.tsx | 3 +- .../upload-card/UploadDescriptionEditor.tsx | 3 +- .../components/url-preview/ClientPreview.tsx | 3 +- .../url-preview/ThemeThirdPartyBanner.tsx | 3 +- .../url-preview/TweakPreviewUrlCard.tsx | 3 +- .../components/url-preview/UrlPreviewCard.tsx | 15 +- .../components/user-profile/CreatorChip.tsx | 3 +- src/app/components/user-profile/PowerChip.tsx | 3 +- src/app/components/user-profile/UserChips.tsx | 3 +- src/app/components/user-profile/UserHero.tsx | 3 +- .../user-profile/UserModeration.tsx | 3 +- .../user-profile/UserRoomProfile.tsx | 15 +- src/app/features/add-existing/AddExisting.tsx | 3 +- .../features/bug-report/BugReportModal.tsx | 3 +- src/app/features/call-status/CallControl.tsx | 3 +- src/app/features/call-status/LiveChip.tsx | 3 +- src/app/features/call-status/MemberGlance.tsx | 3 +- .../features/call-status/MemberSpeaking.tsx | 3 +- src/app/features/call/CallControls.tsx | 3 +- src/app/features/call/CallMemberCard.tsx | 3 +- src/app/features/call/Controls.tsx | 3 +- src/app/features/call/PrescreenControls.tsx | 3 +- .../common-settings/appearance/Appearance.tsx | 3 +- .../common-settings/cosmetics/Cosmetics.tsx | 3 +- .../developer-tools/DevelopTools.tsx | 15 +- .../developer-tools/SendRoomEvent.tsx | 3 +- .../developer-tools/StateEventEditor.tsx | 3 +- .../emojis-stickers/EmojisStickers.tsx | 3 +- .../emojis-stickers/RoomPacks.tsx | 3 +- .../common-settings/general/RoomAddress.tsx | 3 +- .../general/RoomEncryption.tsx | 3 +- .../general/RoomHistoryVisibility.tsx | 3 +- .../common-settings/general/RoomProfile.tsx | 3 +- .../common-settings/general/RoomUpgrade.tsx | 3 +- .../common-settings/members/Members.tsx | 16 +- .../permissions/PermissionGroups.tsx | 3 +- .../permissions/PowersEditor.tsx | 3 +- src/app/features/create-chat/CreateChat.tsx | 3 +- src/app/features/create-room/CreateRoom.tsx | 16 +- .../features/create-room/CreateRoomModal.tsx | 3 +- src/app/features/create-space/CreateSpace.tsx | 16 +- .../create-space/CreateSpaceModal.tsx | 3 +- .../JoinBeforeNavigate.tsx | 3 +- src/app/features/lobby/DnD.tsx | 3 +- src/app/features/lobby/HierarchyItemMenu.tsx | 16 +- src/app/features/lobby/Lobby.tsx | 15 +- src/app/features/lobby/LobbyHeader.tsx | 3 +- src/app/features/lobby/RoomItem.tsx | 3 +- src/app/features/lobby/SpaceItem.tsx | 3 +- src/app/features/lobby/SpaceNavItem.tsx | 3 +- .../features/message-search/MessageSearch.tsx | 3 +- .../features/message-search/SearchFilters.tsx | 6 +- .../features/message-search/SearchInput.tsx | 3 +- .../message-search/SearchResultGroup.tsx | 3 +- .../SearchResultTimelineItem.tsx | 3 +- .../room-nav/RoomNavCategoryButton.tsx | 3 +- src/app/features/room-nav/RoomNavItem.tsx | 3 +- src/app/features/room-nav/RoomNavUser.tsx | 3 +- .../features/room-settings/RoomSettings.tsx | 6 +- .../abbreviations/RoomAbbreviations.tsx | 15 +- .../room-settings/general/General.tsx | 3 +- .../room-settings/permissions/Permissions.tsx | 3 +- src/app/features/room/CallChatView.tsx | 3 +- src/app/features/room/MembersDrawer.tsx | 3 +- src/app/features/room/PollCreator.tsx | 3 +- src/app/features/room/RoomCallButton.tsx | 3 +- src/app/features/room/RoomInput.tsx | 3 +- src/app/features/room/RoomInputTiptap.tsx | 3 +- src/app/features/room/RoomTimeline.tsx | 16 +- src/app/features/room/RoomViewFollowing.tsx | 3 +- src/app/features/room/RoomViewHeader.tsx | 3 +- src/app/features/room/RoomViewTyping.tsx | 3 +- src/app/features/room/ThreadBrowser.tsx | 3 +- src/app/features/room/ThreadDrawer.tsx | 3 +- .../features/room/jump-to-time/JumpToTime.tsx | 3 +- .../room/location-modal/LocationDialog.tsx | 3 +- src/app/features/room/message/Message.tsx | 3 +- .../features/room/message/MessageEditor.tsx | 3 +- .../room/message/MobileMessageMenu.tsx | 3 +- .../room/reaction-viewer/ReactionViewer.tsx | 16 +- .../room/room-pin-menu/RoomPinMenu.tsx | 3 +- .../schedule-send/SchedulePickerDialog.tsx | 3 +- .../schedule-send/ScheduledMessagesList.tsx | 3 +- .../TiptapMentionAutocomplete.tsx | 3 +- src/app/features/search/Search.tsx | 3 +- .../Persona/PerMessageProfileEditor.tsx | 3 +- src/app/features/settings/Settings.tsx | 6 +- .../features/settings/SettingsSectionPage.tsx | 3 +- src/app/features/settings/about/About.tsx | 3 +- .../features/settings/account/BioEditor.tsx | 3 +- .../settings/account/IgnoredUserList.tsx | 3 +- .../settings/account/NameColorEditor.tsx | 3 +- src/app/features/settings/account/Profile.tsx | 3 +- .../settings/account/StatusEditor.tsx | 3 +- .../settings/account/TimezoneEditor.tsx | 3 +- .../features/settings/cosmetics/Cosmetics.tsx | 3 +- .../cosmetics/ThemeCatalogOnboarding.tsx | 3 +- .../cosmetics/ThemeCatalogSettings.tsx | 3 +- .../settings/cosmetics/ThemeImportModal.tsx | 3 +- .../features/settings/cosmetics/Themes.tsx | 3 +- .../settings/developer-tools/AccountData.tsx | 3 +- .../developer-tools/SyncDiagnostics.tsx | 3 +- .../features/settings/devices/DeviceTile.tsx | 3 +- .../features/settings/devices/LocalBackup.tsx | 3 +- .../settings/devices/Verification.tsx | 3 +- .../settings/emojis-stickers/GlobalPacks.tsx | 3 +- .../settings/emojis-stickers/UserPack.tsx | 3 +- .../settings/experimental/Experimental.tsx | 3 +- src/app/features/settings/general/General.tsx | 3 +- .../DeregisterPushNotifications.tsx | 3 +- .../notifications/KeywordMessages.tsx | 3 +- .../notifications/NotificationLevelsHint.tsx | 3 +- .../notifications/SystemNotification.tsx | 3 +- src/app/features/space-nav/SpaceNavItem.tsx | 3 +- .../features/space-settings/SpaceSettings.tsx | 6 +- .../space-settings/general/General.tsx | 3 +- .../permissions/Permissions.tsx | 3 +- .../features/widgets/IntegrationManager.tsx | 3 +- src/app/features/widgets/WidgetsDrawer.tsx | 3 +- .../timeline/useTimelineEventRenderer.tsx | 3 +- src/app/hooks/useMemberEventParser.tsx | 6 +- .../hooks/useRoomsNotificationPreferences.ts | 4 +- src/app/icons/index.tsx | 439 ++++++++++++++++++ src/app/pages/auth/FiledError.tsx | 3 +- src/app/pages/auth/ServerPicker.tsx | 14 +- .../pages/auth/login/PasswordLoginForm.tsx | 3 +- src/app/pages/auth/login/TokenLogin.tsx | 14 +- src/app/pages/client/ClientRoot.tsx | 3 +- src/app/pages/client/WelcomePage.tsx | 3 +- .../pages/client/bookmarks/BookmarksList.tsx | 3 +- src/app/pages/client/create/Create.tsx | 3 +- src/app/pages/client/direct/Direct.tsx | 3 +- src/app/pages/client/direct/DirectCreate.tsx | 3 +- src/app/pages/client/direct/Search.tsx | 3 +- src/app/pages/client/explore/Explore.tsx | 3 +- src/app/pages/client/explore/Featured.tsx | 3 +- src/app/pages/client/explore/Server.tsx | 3 +- src/app/pages/client/home/CreateRoom.tsx | 3 +- src/app/pages/client/home/Home.tsx | 3 +- src/app/pages/client/home/Search.tsx | 3 +- src/app/pages/client/inbox/Inbox.tsx | 3 +- src/app/pages/client/inbox/Invites.tsx | 3 +- src/app/pages/client/inbox/Notifications.tsx | 15 +- .../client/sidebar/AccountSwitcherTab.tsx | 3 +- src/app/pages/client/sidebar/BookmarksTab.tsx | 3 +- src/app/pages/client/sidebar/CreateTab.tsx | 3 +- src/app/pages/client/sidebar/DirectTab.tsx | 3 +- src/app/pages/client/sidebar/ExploreTab.tsx | 2 +- src/app/pages/client/sidebar/HomeTab.tsx | 3 +- src/app/pages/client/sidebar/InboxTab.tsx | 3 +- src/app/pages/client/sidebar/SearchTab.tsx | 2 +- src/app/pages/client/sidebar/SpaceTabs.tsx | 3 +- .../pages/client/sidebar/UnverifiedTab.tsx | 3 +- src/app/pages/client/space/Search.tsx | 3 +- src/app/pages/client/space/Space.tsx | 3 +- src/app/plugins/react-custom-html-parser.tsx | 3 +- src/app/utils/common.ts | 2 +- src/app/utils/room.ts | 3 +- 233 files changed, 836 insertions(+), 551 deletions(-) create mode 100644 .changeset/migrate-icons-to-phosphor.md create mode 100644 src/app/icons/index.tsx diff --git a/.changeset/migrate-icons-to-phosphor.md b/.changeset/migrate-icons-to-phosphor.md new file mode 100644 index 000000000..05881f3be --- /dev/null +++ b/.changeset/migrate-icons-to-phosphor.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Migrate the app icon API to Phosphor-backed icons. diff --git a/src/app/components/AccountDataEditor.tsx b/src/app/components/AccountDataEditor.tsx index c0b903cd7..be5bd7e9b 100644 --- a/src/app/components/AccountDataEditor.tsx +++ b/src/app/components/AccountDataEditor.tsx @@ -3,8 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Box, Text, - Icon, - Icons, IconButton, Input, Button, @@ -24,6 +22,7 @@ import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor'; import { Page, PageHeader } from './page'; import { SequenceCard } from './sequence-card'; import { TextViewerContent } from './text-viewer'; +import { Icon, Icons } from '$app/icons'; const EDITOR_INTENT_SPACE_COUNT = 2; diff --git a/src/app/components/BackupRestore.tsx b/src/app/components/BackupRestore.tsx index 74f365eea..0487cbfb2 100644 --- a/src/app/components/BackupRestore.tsx +++ b/src/app/components/BackupRestore.tsx @@ -9,9 +9,7 @@ import { Button, color, config, - Icon, IconButton, - Icons, Menu, percent, PopOut, @@ -31,6 +29,7 @@ import { import { stopPropagation } from '$utils/keyboard'; import { useRestoreBackupOnVerification } from '$hooks/useRestoreBackupOnVerification'; import { InfoCard } from './info-card'; +import { Icon, Icons } from '$app/icons'; type BackupStatusProps = { enabled: boolean; diff --git a/src/app/components/DefaultErrorPage.tsx b/src/app/components/DefaultErrorPage.tsx index 62042cef1..603cfef0c 100644 --- a/src/app/components/DefaultErrorPage.tsx +++ b/src/app/components/DefaultErrorPage.tsx @@ -1,7 +1,8 @@ -import { Box, Button, Dialog, Icon, Icons, Text, color, config } from 'folds'; +import { Box, Button, Dialog, Text, color, config } from 'folds'; import * as Sentry from '@sentry/react'; import { SplashScreen } from '$components/splash-screen'; import { buildGitHubUrl } from '$features/bug-report/BugReportModal'; +import { Icon, Icons } from '$app/icons'; type ErrorPageProps = { error: Error; diff --git a/src/app/components/DeviceVerification.tsx b/src/app/components/DeviceVerification.tsx index aedfe8e1e..39e6d0078 100644 --- a/src/app/components/DeviceVerification.tsx +++ b/src/app/components/DeviceVerification.tsx @@ -8,9 +8,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -27,6 +25,7 @@ import { } from '$hooks/useVerificationRequest'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { ContainerColor } from '$styles/ContainerColor.css'; +import { Icon, Icons } from '$app/icons'; const DialogHeaderStyles: CSSProperties = { padding: `0 ${config.space.S200} 0 ${config.space.S400}`, diff --git a/src/app/components/DeviceVerificationSetup.tsx b/src/app/components/DeviceVerificationSetup.tsx index 34bfa8d90..4839aaa6c 100644 --- a/src/app/components/DeviceVerificationSetup.tsx +++ b/src/app/components/DeviceVerificationSetup.tsx @@ -1,19 +1,6 @@ import type { FormEventHandler } from 'react'; import { forwardRef, useCallback, useState } from 'react'; -import { - Dialog, - Header, - Box, - Text, - IconButton, - Icon, - Icons, - config, - Button, - Chip, - color, - Spinner, -} from 'folds'; +import { Dialog, Header, Box, Text, IconButton, config, Button, Chip, color, Spinner } from 'folds'; import FileSaver from 'file-saver'; import to from 'await-to-js'; import type { AuthDict, IAuthData, UIAuthCallback } from '$types/matrix-sdk'; @@ -27,6 +14,7 @@ import { useAlive } from '$hooks/useAlive'; import { PasswordInput } from './password-input'; import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA'; import { UseStateProvider } from './UseStateProvider'; +import { Icon, Icons } from '$app/icons'; type UIACallback = ( authDict: AuthDict | null diff --git a/src/app/components/IncomingCallModal.tsx b/src/app/components/IncomingCallModal.tsx index 9652adf5d..fcc68afd6 100644 --- a/src/app/components/IncomingCallModal.tsx +++ b/src/app/components/IncomingCallModal.tsx @@ -3,8 +3,6 @@ import { Dialog, Header, IconButton, - Icon, - Icons, Text, Button, Avatar, @@ -29,6 +27,7 @@ import { } from '$state/callEmbed'; import { createDebugLogger } from '$utils/debugLogger'; import { RoomAvatar } from './room-avatar'; +import { Icon, Icons } from '$app/icons'; const debugLog = createDebugLogger('IncomingCall'); diff --git a/src/app/components/JoinRulesSwitcher.tsx b/src/app/components/JoinRulesSwitcher.tsx index 970e7bb80..6a7f7a6ca 100644 --- a/src/app/components/JoinRulesSwitcher.tsx +++ b/src/app/components/JoinRulesSwitcher.tsx @@ -1,11 +1,13 @@ import type { MouseEventHandler } from 'react'; import { useCallback, useMemo, useState } from 'react'; -import type { IconSrc, RectCords } from 'folds'; -import { config, Box, MenuItem, Text, Icon, Icons, PopOut, Menu, Button, Spinner } from 'folds'; +import type { RectCords } from 'folds'; +import { config, Box, MenuItem, Text, PopOut, Menu, Button, Spinner } from 'folds'; import { JoinRule } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; import { getRoomIconSrc } from '$utils/room'; +import { Icon, Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; export type ExtraJoinRules = 'knock_restricted'; export type ExtendedJoinRules = JoinRule | ExtraJoinRules; diff --git a/src/app/components/ManualVerification.tsx b/src/app/components/ManualVerification.tsx index b0874622f..2856b9ab7 100644 --- a/src/app/components/ManualVerification.tsx +++ b/src/app/components/ManualVerification.tsx @@ -1,7 +1,7 @@ import type { MouseEventHandler, ReactNode } from 'react'; import { useCallback, useState } from 'react'; import type { RectCords } from 'folds'; -import { Box, Text, Chip, Icon, Icons, PopOut, Menu, config, MenuItem, color } from 'folds'; +import { Box, Text, Chip, PopOut, Menu, config, MenuItem, color } from 'folds'; import FocusTrap from 'focus-trap-react'; import type { SecretStorageKeyContent } from '$types/matrix/accountData'; import { storePrivateKey } from '$client/secretStorageKeys'; @@ -10,6 +10,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SettingTile } from './setting-tile'; import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage'; +import { Icon, Icons } from '$app/icons'; export enum ManualVerificationMethod { RecoveryPassphrase = 'passphrase', diff --git a/src/app/components/Pdf-viewer/PdfViewer.tsx b/src/app/components/Pdf-viewer/PdfViewer.tsx index dbd95ef46..0f73a4634 100644 --- a/src/app/components/Pdf-viewer/PdfViewer.tsx +++ b/src/app/components/Pdf-viewer/PdfViewer.tsx @@ -7,9 +7,7 @@ import { Button, Chip, Header, - Icon, IconButton, - Icons, Input, Menu, PopOut, @@ -26,6 +24,7 @@ import { useImageGestures } from '$hooks/useImageGestures'; import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '$plugins/pdfjs-dist'; import { stopPropagation } from '$utils/keyboard'; import * as css from './PdfViewer.css'; +import { Icon, Icons } from '$app/icons'; export type PdfViewerProps = { name: string; diff --git a/src/app/components/RoomNotificationSwitcher.tsx b/src/app/components/RoomNotificationSwitcher.tsx index ca2a0cc04..f0af15e49 100644 --- a/src/app/components/RoomNotificationSwitcher.tsx +++ b/src/app/components/RoomNotificationSwitcher.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, Text } from 'folds'; +import { Box, Text } from 'folds'; import type { ReactNode } from 'react'; import { type MouseEventHandler } from 'react'; import { SettingMenuSelector, type SettingMenuOption } from '$components/setting-menu-selector'; @@ -8,6 +8,7 @@ import { useSetRoomNotificationPreference, } from '$hooks/useRoomsNotificationPreferences'; import { AsyncStatus } from '$hooks/useAsyncCallback'; +import { Icon } from '$app/icons'; const ROOM_NOTIFICATION_MODE_LABELS: Record = { [RoomNotificationMode.Unset]: 'Default', diff --git a/src/app/components/SwipeableMessageWrapper.tsx b/src/app/components/SwipeableMessageWrapper.tsx index 656bf11c2..05e97160d 100644 --- a/src/app/components/SwipeableMessageWrapper.tsx +++ b/src/app/components/SwipeableMessageWrapper.tsx @@ -3,9 +3,10 @@ import { useDrag } from '@use-gesture/react'; import type { ReactNode } from 'react'; import { useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import { config, Icon, Icons } from 'folds'; +import { config } from 'folds'; import { mobileOrTablet } from '$utils/user-agent'; import { RightSwipeAction, settingsAtom } from '$state/settings'; +import { Icon, Icons } from '$app/icons'; function ActiveSwipeWrapper({ children, onReply }: { children: ReactNode; onReply: () => void }) { const x = useMotionValue(0); diff --git a/src/app/components/UIAFlowOverlay.tsx b/src/app/components/UIAFlowOverlay.tsx index 7ad14a7c5..a4ac8888b 100644 --- a/src/app/components/UIAFlowOverlay.tsx +++ b/src/app/components/UIAFlowOverlay.tsx @@ -7,12 +7,11 @@ import { Text, TooltipProvider, Tooltip, - Icons, - Icon, Chip, IconButton, } from 'folds'; import FocusTrap from 'focus-trap-react'; +import { Icon, Icons } from '$app/icons'; export type UIAFlowOverlayProps = { currentStep: number; diff --git a/src/app/components/create-room/AdditionalCreatorInput.tsx b/src/app/components/create-room/AdditionalCreatorInput.tsx index 1ac523a4d..dbaf45726 100644 --- a/src/app/components/create-room/AdditionalCreatorInput.tsx +++ b/src/app/components/create-room/AdditionalCreatorInput.tsx @@ -4,8 +4,6 @@ import { Button, Chip, config, - Icon, - Icons, Input, Line, Menu, @@ -28,6 +26,7 @@ import type { UseAsyncSearchOptions } from '$hooks/useAsyncSearch'; import { useAsyncSearch } from '$hooks/useAsyncSearch'; import { highlightText, makeHighlightRegex } from '$plugins/react-custom-html-parser'; import { SettingTile } from '$components/setting-tile'; +import { Icon, Icons } from '$app/icons'; export const useAdditionalCreators = (defaultCreators?: string[]) => { const mx = useMatrixClient(); diff --git a/src/app/components/create-room/CreateRoomAccessSelector.tsx b/src/app/components/create-room/CreateRoomAccessSelector.tsx index 3a2eeaf8e..a7612c3b9 100644 --- a/src/app/components/create-room/CreateRoomAccessSelector.tsx +++ b/src/app/components/create-room/CreateRoomAccessSelector.tsx @@ -1,8 +1,9 @@ -import type { IconSrc } from 'folds'; -import { Box, Text, Icon, Icons, config } from 'folds'; +import { Box, Text, config } from 'folds'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { CreateRoomAccess } from './types'; +import type { IconSrc } from '$app/icons'; +import { Icon, Icons } from '$app/icons'; type CreateRoomAccessSelectorProps = { value?: CreateRoomAccess; diff --git a/src/app/components/create-room/CreateRoomAliasInput.tsx b/src/app/components/create-room/CreateRoomAliasInput.tsx index f1d798307..ff06b0643 100644 --- a/src/app/components/create-room/CreateRoomAliasInput.tsx +++ b/src/app/components/create-room/CreateRoomAliasInput.tsx @@ -1,7 +1,7 @@ import type { FormEventHandler, KeyboardEventHandler } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; import { MatrixError } from '$types/matrix-sdk'; -import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds'; +import { Box, color, Input, Spinner, Text, toRem } from 'folds'; import { isKeyHotkey } from 'is-hotkey'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { replaceSpaceWithDash } from '$utils/common'; @@ -9,6 +9,7 @@ import type { AsyncState } from '$hooks/useAsyncCallback'; import { AsyncStatus, useAsync } from '$hooks/useAsyncCallback'; import { useDebounce } from '$hooks/useDebounce'; import { getMxIdServer } from '$utils/mxIdHelper'; +import { Icon, Icons } from '$app/icons'; export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) { const mx = useMatrixClient(); diff --git a/src/app/components/create-room/CreateRoomTypeSelector.tsx b/src/app/components/create-room/CreateRoomTypeSelector.tsx index 14fe06f7c..e360a14d9 100644 --- a/src/app/components/create-room/CreateRoomTypeSelector.tsx +++ b/src/app/components/create-room/CreateRoomTypeSelector.tsx @@ -1,9 +1,10 @@ -import type { IconSrc } from 'folds'; -import { Box, Text, Icon, Icons, config } from 'folds'; +import { Box, Text, config } from 'folds'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { BetaNoticeBadge } from '$components/BetaNoticeBadge'; import { CreateRoomType } from './types'; +import type { IconSrc } from '$app/icons'; +import { Icon, Icons } from '$app/icons'; type CreateRoomTypeSelectorProps = { value?: CreateRoomType; diff --git a/src/app/components/create-room/RoomVersionSelector.tsx b/src/app/components/create-room/RoomVersionSelector.tsx index dae1f0965..142fe7eb0 100644 --- a/src/app/components/create-room/RoomVersionSelector.tsx +++ b/src/app/components/create-room/RoomVersionSelector.tsx @@ -1,11 +1,12 @@ import type { MouseEventHandler } from 'react'; import { useState } from 'react'; import type { RectCords } from 'folds'; -import { Box, Button, Chip, config, Icon, Icons, Menu, PopOut, Text, toRem } from 'folds'; +import { Box, Button, Chip, config, Menu, PopOut, Text, toRem } from 'folds'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; +import { Icon, Icons } from '$app/icons'; export function RoomVersionSelector({ versions, diff --git a/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx b/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx index fbb83a864..bae3884dd 100644 --- a/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx +++ b/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx @@ -4,9 +4,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -16,6 +14,7 @@ import { config, } from 'folds'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; type DirectInvitePromptProps = { onCancel: () => void; diff --git a/src/app/components/editor/MarkdownToolbar.tsx b/src/app/components/editor/MarkdownToolbar.tsx index 64ebd6e60..b97f558a6 100644 --- a/src/app/components/editor/MarkdownToolbar.tsx +++ b/src/app/components/editor/MarkdownToolbar.tsx @@ -1,12 +1,10 @@ import FocusTrap from 'focus-trap-react'; -import type { IconSrc, RectCords } from 'folds'; +import type { RectCords } from 'folds'; import { Badge, Box, config, - Icon, IconButton, - Icons, Line, Menu, PopOut, @@ -32,6 +30,8 @@ import { INLINE_HOTKEYS, } from './keyboard'; import * as css from './Editor.css'; +import type { IconSrc } from '$app/icons'; +import { Icon, Icons } from '$app/icons'; function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) { return ( diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx index b7b935f6f..332c03d89 100644 --- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx @@ -2,7 +2,7 @@ import type { KeyboardEvent as ReactKeyboardEvent } from 'react'; import { useCallback, useEffect, useMemo } from 'react'; import type { Editor } from 'slate'; import { ReactEditor } from 'slate-react'; -import { Avatar, Icon, Icons, MenuItem, Text } from 'folds'; +import { Avatar, MenuItem, Text } from 'folds'; import type { MatrixClient } from '$types/matrix-sdk'; import { JoinRule } from '$types/matrix-sdk'; import { useAtomValue } from 'jotai'; @@ -23,6 +23,7 @@ import { createMentionElement, moveCursor, replaceWithElement } from '$component import { getMxIdServer } from '$utils/mxIdHelper'; import { AutocompleteMenu } from './AutocompleteMenu'; import type { AutocompleteQuery } from './autocompleteQuery'; +import { Icon, Icons } from '$app/icons'; type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void; diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx index 61a587e26..e49e71106 100644 --- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx @@ -2,7 +2,7 @@ import type { KeyboardEvent as ReactKeyboardEvent } from 'react'; import { useEffect } from 'react'; import type { Editor } from 'slate'; import { ReactEditor } from 'slate-react'; -import { Avatar, Icon, Icons, MenuItem, Text } from 'folds'; +import { Avatar, MenuItem, Text } from 'folds'; import type { MatrixClient, Room, RoomMember } from '$types/matrix-sdk'; import { useRoomMembers } from '$hooks/useRoomMembers'; @@ -28,6 +28,7 @@ import { getMxIdServer } from '$utils/mxIdHelper'; import { AutocompleteMenu } from './AutocompleteMenu'; import type { AutocompleteQuery } from './autocompleteQuery'; import { KnownMembership } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; type MentionAutoCompleteHandler = (userId: string, name: string) => void; diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 982ebce90..0b4e71b7c 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -6,7 +6,7 @@ import type { RefObject, } from 'react'; import { useCallback, useEffect, useMemo, useRef } from 'react'; -import { Box, config, Icons, Scroll } from 'folds'; +import { Box, config, Scroll } from 'folds'; import FocusTrap from 'focus-trap-react'; import { isKeyHotkey } from 'is-hotkey'; import type { Room } from '$types/matrix-sdk'; @@ -55,6 +55,7 @@ import { EmojiBoardLayout, } from './components'; import { EmojiBoardTab, EmojiType } from './types'; +import { Icons } from '$app/icons'; const RECENT_GROUP_ID = 'recent_group'; const SEARCH_GROUP_ID = 'search_group'; diff --git a/src/app/components/emoji-board/components/NoStickerPacks.tsx b/src/app/components/emoji-board/components/NoStickerPacks.tsx index 9b46229a6..1c742979a 100644 --- a/src/app/components/emoji-board/components/NoStickerPacks.tsx +++ b/src/app/components/emoji-board/components/NoStickerPacks.tsx @@ -1,4 +1,5 @@ -import { Box, toRem, config, Icons, Icon, Text } from 'folds'; +import { Box, toRem, config, Text } from 'folds'; +import { Icons, Icon } from '$app/icons'; export function NoStickerPacks() { return ( diff --git a/src/app/components/emoji-board/components/SearchInput.tsx b/src/app/components/emoji-board/components/SearchInput.tsx index bdd0df885..65bb84676 100644 --- a/src/app/components/emoji-board/components/SearchInput.tsx +++ b/src/app/components/emoji-board/components/SearchInput.tsx @@ -1,7 +1,8 @@ import type { ChangeEventHandler } from 'react'; import { useRef } from 'react'; -import { Input, Chip, Icon, Icons, Text } from 'folds'; +import { Input, Chip, Text } from 'folds'; import { mobileOrTablet } from '$utils/user-agent'; +import { Icon, Icons } from '$app/icons'; type SearchInputProps = { query?: string; diff --git a/src/app/components/emoji-board/components/Sidebar.tsx b/src/app/components/emoji-board/components/Sidebar.tsx index 5b000b247..b01313775 100644 --- a/src/app/components/emoji-board/components/Sidebar.tsx +++ b/src/app/components/emoji-board/components/Sidebar.tsx @@ -1,19 +1,10 @@ import type { ReactNode } from 'react'; -import type { IconSrc } from 'folds'; -import { - Box, - Scroll, - Line, - as, - TooltipProvider, - Tooltip, - Text, - IconButton, - Icon, - Icons, -} from 'folds'; + +import { Box, Scroll, Line, as, TooltipProvider, Tooltip, Text, IconButton } from 'folds'; import classNames from 'classnames'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; export function Sidebar({ children }: { children: ReactNode }) { return ( diff --git a/src/app/components/emoji-board/useEmojiGroupIcons.ts b/src/app/components/emoji-board/useEmojiGroupIcons.ts index 6ca067f35..bbd22427b 100644 --- a/src/app/components/emoji-board/useEmojiGroupIcons.ts +++ b/src/app/components/emoji-board/useEmojiGroupIcons.ts @@ -1,8 +1,8 @@ import { useMemo } from 'react'; -import type { IconSrc } from 'folds'; -import { Icons } from 'folds'; import { EmojiGroupId } from '$plugins/emoji'; +import { Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; export type IEmojiGroupIcons = Record; diff --git a/src/app/components/event-history/EventHistory.tsx b/src/app/components/event-history/EventHistory.tsx index 8850802f7..a94822f11 100644 --- a/src/app/components/event-history/EventHistory.tsx +++ b/src/app/components/event-history/EventHistory.tsx @@ -3,9 +3,7 @@ import { Avatar, Box, Header, - Icon, IconButton, - Icons, Menu, MenuItem, Scroll, @@ -42,6 +40,7 @@ import { usePowerLevelsContext } from '$hooks/usePowerLevels'; import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUrl'; import * as css from './EventHistory.css'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; export type EventHistoryProps = { room: Room; diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx index 88f7eac57..55399a375 100644 --- a/src/app/components/event-readers/EventReaders.tsx +++ b/src/app/components/event-readers/EventReaders.tsx @@ -1,17 +1,5 @@ import classNames from 'classnames'; -import { - Avatar, - Box, - Header, - Icon, - IconButton, - Icons, - MenuItem, - Scroll, - Text, - as, - config, -} from 'folds'; +import { Avatar, Box, Header, IconButton, MenuItem, Scroll, Text, as, config } from 'folds'; import type { Room } from '$types/matrix-sdk'; import { useRoomEventReaders } from '$hooks/useRoomEventReaders'; import { getMemberDisplayName } from '$utils/room'; @@ -25,6 +13,7 @@ import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { UserAvatar } from '$components/user-avatar'; import * as css from './EventReaders.css'; +import { Icon, Icons } from '$app/icons'; export type EventReadersProps = { room: Room; diff --git a/src/app/components/image-editor/ImageEditor.tsx b/src/app/components/image-editor/ImageEditor.tsx index 13adad954..f0569deb3 100644 --- a/src/app/components/image-editor/ImageEditor.tsx +++ b/src/app/components/image-editor/ImageEditor.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; -import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds'; +import { Box, Chip, Header, IconButton, Text, as } from 'folds'; import * as css from './ImageEditor.css'; +import { Icon, Icons } from '$app/icons'; export type ImageEditorProps = { name: string; diff --git a/src/app/components/image-pack-view/ImagePackView.tsx b/src/app/components/image-pack-view/ImagePackView.tsx index 4f4c51519..b1c4db8ea 100644 --- a/src/app/components/image-pack-view/ImagePackView.tsx +++ b/src/app/components/image-pack-view/ImagePackView.tsx @@ -1,9 +1,10 @@ -import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds'; +import { Box, IconButton, Text, Scroll, Chip } from 'folds'; import type { PackAddress } from '$plugins/custom-emoji'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { Page, PageHeader, PageContent } from '$components/page'; import { RoomImagePack } from './RoomImagePack'; import { UserImagePack } from './UserImagePack'; +import { Icon, Icons } from '$app/icons'; type ImagePackViewProps = { address: PackAddress | undefined; diff --git a/src/app/components/image-pack-view/ImageTile.tsx b/src/app/components/image-pack-view/ImageTile.tsx index f2f3bf0e8..bb354f6be 100644 --- a/src/app/components/image-pack-view/ImageTile.tsx +++ b/src/app/components/image-pack-view/ImageTile.tsx @@ -1,6 +1,6 @@ import type { FormEventHandler, ReactNode } from 'react'; import { useMemo, useState } from 'react'; -import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds'; +import { Badge, Box, Button, Chip, Input, Text } from 'folds'; import { mxcUrlToHttp } from '$utils/matrix'; import type { ImageUsage } from '$plugins/custom-emoji'; import { imageUsageEqual, PackImageReader } from '$plugins/custom-emoji'; @@ -13,6 +13,7 @@ import { SettingTile } from '$components/setting-tile'; import { AuthenticatedImg } from '$components/AuthenticatedImg'; import * as css from './style.css'; import { UsageSwitcher, useUsageStr } from './UsageSwitcher'; +import { Icon, Icons } from '$app/icons'; type ImageTileProps = { defaultShortcode: string; diff --git a/src/app/components/image-pack-view/PackMeta.tsx b/src/app/components/image-pack-view/PackMeta.tsx index f02cfb6dd..ceb3fc5ea 100644 --- a/src/app/components/image-pack-view/PackMeta.tsx +++ b/src/app/components/image-pack-view/PackMeta.tsx @@ -7,8 +7,6 @@ import { AvatarImage, AvatarFallback, Button, - Icon, - Icons, Input, TextArea, Chip, @@ -28,6 +26,7 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useRenderableMediaUrl } from '$hooks/useRenderableMediaUrl'; import { PackMetaReader } from '$plugins/custom-emoji'; import { CompactUploadCardRenderer } from '$components/upload-card'; +import { Icon, Icons } from '$app/icons'; type ImagePackAvatarProps = { url?: string; diff --git a/src/app/components/image-pack-view/UsageSwitcher.tsx b/src/app/components/image-pack-view/UsageSwitcher.tsx index d06f3c859..abe2dbb2e 100644 --- a/src/app/components/image-pack-view/UsageSwitcher.tsx +++ b/src/app/components/image-pack-view/UsageSwitcher.tsx @@ -1,10 +1,11 @@ import type { MouseEventHandler } from 'react'; import { useMemo, useState } from 'react'; import type { RectCords } from 'folds'; -import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, Text } from 'folds'; +import { Box, Button, config, Menu, MenuItem, PopOut, Text } from 'folds'; import FocusTrap from 'focus-trap-react'; import { ImageUsage } from '$plugins/custom-emoji'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; export const useUsageStr = (): ((usage: ImageUsage[]) => string) => { const getUsageStr = (usage: ImageUsage[]): string => { diff --git a/src/app/components/image-viewer/ImageViewer.tsx b/src/app/components/image-viewer/ImageViewer.tsx index f4796ed41..d7c9f4c46 100644 --- a/src/app/components/image-viewer/ImageViewer.tsx +++ b/src/app/components/image-viewer/ImageViewer.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from 'react'; import FileSaver from 'file-saver'; import classNames from 'classnames'; -import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds'; +import { Box, Chip, Header, IconButton, Text, as } from 'folds'; import { useImageGestures } from '$hooks/useImageGestures'; import { useSetting } from '$state/hooks/settings'; import { isPixelatedRendering, settingsAtom } from '$state/settings'; @@ -9,6 +9,7 @@ import { downloadMedia } from '$utils/matrix'; import * as css from './ImageViewer.css'; import type { IImageInfo } from '$types/matrix/common'; import { CheckerboardIcon } from '@phosphor-icons/react'; +import { Icon, Icons } from '$app/icons'; export type ImageViewerProps = { alt: string; diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx index 0d81bc5d7..e91e986f0 100644 --- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx +++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx @@ -9,8 +9,6 @@ import { config, Text, IconButton, - Icon, - Icons, Input, Button, Spinner, @@ -37,6 +35,7 @@ import { BreakWord } from '$styles/Text.css'; import { useAlive } from '$hooks/useAlive'; import { getMxIdServer } from '$utils/mxIdHelper'; import { KnownMembership } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; const SEARCH_OPTIONS: UseAsyncSearchOptions = { limit: 1000, diff --git a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx index fc33f55ca..ae7ac1caf 100644 --- a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx +++ b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx @@ -11,8 +11,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Button, Input, color, @@ -20,6 +18,7 @@ import { import { stopPropagation } from '$utils/keyboard'; import { isRoomAlias, isRoomId } from '$utils/matrix'; import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '$plugins/matrix-to'; +import { Icon, Icons } from '$app/icons'; type JoinAddressProps = { onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void; diff --git a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx index 5974cb0f6..02da631a7 100644 --- a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx +++ b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx @@ -11,8 +11,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Input, color, Button, @@ -24,6 +22,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { stopPropagation } from '$utils/keyboard'; import { createDebugLogger } from '$utils/debugLogger'; +import { Icon, Icons } from '$app/icons'; const debugLog = createDebugLogger('KnockRoomPrompt'); diff --git a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx index d9b97f0fc..eea04f47e 100644 --- a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx +++ b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx @@ -10,8 +10,6 @@ import { Box, Text, IconButton, - Icon, - Icons, color, Button, Spinner, @@ -21,6 +19,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { stopPropagation } from '$utils/keyboard'; import { createDebugLogger } from '$utils/debugLogger'; +import { Icon, Icons } from '$app/icons'; const debugLog = createDebugLogger('LeaveRoomPrompt'); diff --git a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx index c6aef838d..0b466bf23 100644 --- a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx +++ b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx @@ -10,8 +10,6 @@ import { Box, Text, IconButton, - Icon, - Icons, color, Button, Spinner, @@ -20,6 +18,7 @@ import type { MatrixError } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; type LeaveSpacePromptProps = { roomId: string; diff --git a/src/app/components/member-tile/MemberTile.tsx b/src/app/components/member-tile/MemberTile.tsx index 59ec7a673..e52a5abb9 100644 --- a/src/app/components/member-tile/MemberTile.tsx +++ b/src/app/components/member-tile/MemberTile.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { as, Avatar, Box, Icon, Icons, Text } from 'folds'; +import { as, Avatar, Box, Text } from 'folds'; import type { MatrixClient, Room, RoomMember } from '$types/matrix-sdk'; import { getMemberDisplayName } from '$utils/room'; import { getMxIdLocalPart } from '$utils/matrix'; @@ -11,6 +11,7 @@ import { UserAvatar } from '$components/user-avatar'; import { Presence, useUserPresence } from '$hooks/useUserPresence'; import { AvatarPresence, PresenceBadge } from '$components/presence'; import * as css from './style.css'; +import { Icon, Icons } from '$app/icons'; const getName = (room: Room, member: RoomMember, nicknames: Record) => getMemberDisplayName(room, member.userId, nicknames) ?? diff --git a/src/app/components/message/FileHeader.tsx b/src/app/components/message/FileHeader.tsx index 725eb8802..5231d8213 100644 --- a/src/app/components/message/FileHeader.tsx +++ b/src/app/components/message/FileHeader.tsx @@ -1,4 +1,4 @@ -import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds'; +import { Badge, Box, IconButton, Spinner, Text, as, toRem } from 'folds'; import type { ReactNode } from 'react'; import { useCallback } from 'react'; import type { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; @@ -13,6 +13,7 @@ import { downloadMedia, mxcUrlToHttp, } from '$utils/matrix'; +import { Icon, Icons } from '$app/icons'; const badgeStyles = { maxWidth: toRem(100) }; diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx index a306310b6..8fd3852a8 100644 --- a/src/app/components/message/MsgTypeRenderers.tsx +++ b/src/app/components/message/MsgTypeRenderers.tsx @@ -1,6 +1,6 @@ import type { CSSProperties, ReactNode } from 'react'; import { useMemo } from 'react'; -import { Box, Chip, Icon, Icons, Text, toRem } from 'folds'; +import { Box, Chip, Text, toRem } from 'folds'; import type { IContent, IPreviewUrlResponse } from '$types/matrix-sdk'; import { JUMBO_EMOJI_REG } from '$utils/regex'; import { trimReplyFromBody } from '$utils/room'; @@ -40,6 +40,7 @@ import { MapContainer, Marker, TileLayer } from 'react-leaflet'; import type { LatLngExpression } from 'leaflet'; import 'leaflet/dist/leaflet.css'; import * as css from './MsgTypeRenderers.css'; +import { Icon, Icons } from '$app/icons'; export interface BundleContent extends IPreviewUrlResponse { matched_url: string; diff --git a/src/app/components/message/Reaction.tsx b/src/app/components/message/Reaction.tsx index 58d8fee0d..a7d1e765f 100644 --- a/src/app/components/message/Reaction.tsx +++ b/src/app/components/message/Reaction.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Icon, Icons, Text, as } from 'folds'; +import { Box, Text, as } from 'folds'; import classNames from 'classnames'; import type { MatrixClient, MatrixEvent, Room } from '$types/matrix-sdk'; import { getHexcodeForEmoji, getShortcodeFor } from '$plugins/emoji'; @@ -9,6 +9,7 @@ import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { AuthenticatedImg } from '$components/AuthenticatedImg'; import * as css from './Reaction.css'; +import { Icon, Icons } from '$app/icons'; export const Reaction = as< 'button', diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx index f1d698e21..c66bb0c6c 100644 --- a/src/app/components/message/Reply.tsx +++ b/src/app/components/message/Reply.tsx @@ -1,5 +1,4 @@ -import type { IconSrc } from 'folds'; -import { Box, Chip, Icon, Icons, Text, as, color, toRem } from 'folds'; +import { Box, Chip, Text, as, color, toRem } from 'folds'; import type { EventTimelineSet, IMentions, Room, SessionMembershipData } from '$types/matrix-sdk'; import { EventType, MsgType } from '$types/matrix-sdk'; import type { MouseEventHandler, ReactNode } from 'react'; @@ -45,6 +44,8 @@ import { import * as css from './Reply.css'; import { LinePlaceholder } from './placeholder'; import { M_POLL_START, M_TEXT } from 'matrix-js-sdk'; +import type { IconSrc } from '$app/icons'; +import { Icon, Icons } from '$app/icons'; const ROOM_REPLY_TIMELINE_EVENT_TYPES = new Set([ EventType.RoomMessage as string, diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx index 6b498d8dc..ea5145d6c 100644 --- a/src/app/components/message/content/AudioContent.tsx +++ b/src/app/components/message/content/AudioContent.tsx @@ -1,7 +1,7 @@ /* oxlint-disable jsx-a11y/media-has-caption */ import type { ReactNode } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; -import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds'; +import { Badge, Chip, IconButton, ProgressBar, Spinner, Text, toRem } from 'folds'; import type { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; import { Range } from 'react-range'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -25,6 +25,7 @@ import { } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { MEDIA_VOLUME_KEY } from '$components/media'; +import { Icon, Icons } from '$app/icons'; const PLAY_TIME_THROTTLE_OPS = { wait: 500, diff --git a/src/app/components/message/content/EventContent.tsx b/src/app/components/message/content/EventContent.tsx index ac058985c..ac2493391 100644 --- a/src/app/components/message/content/EventContent.tsx +++ b/src/app/components/message/content/EventContent.tsx @@ -1,8 +1,9 @@ -import type { IconSrc } from 'folds'; -import { Box, Icon } from 'folds'; +import { Box } from 'folds'; import type { ReactNode } from 'react'; import { MessageLayout } from '$state/settings'; import { BubbleLayout, CompactLayout, ModernLayout } from '$components/message/layout'; +import type { IconSrc } from '$app/icons'; +import { Icon } from '$app/icons'; export type EventContentProps = { messageLayout: number; diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx index 638e830c3..b351c9c8f 100644 --- a/src/app/components/message/content/FallbackContent.tsx +++ b/src/app/components/message/content/FallbackContent.tsx @@ -1,6 +1,7 @@ -import { Box, Icon, Icons, Text, as, color, config } from 'folds'; +import { Box, Text, as, color, config } from 'folds'; import { BreakWord } from '$styles/Text.css'; +import { Icon, Icons } from '$app/icons'; const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 }; const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 }; diff --git a/src/app/components/message/content/FileContent.tsx b/src/app/components/message/content/FileContent.tsx index 1f3194d7f..f1699ee31 100644 --- a/src/app/components/message/content/FileContent.tsx +++ b/src/app/components/message/content/FileContent.tsx @@ -3,8 +3,6 @@ import { useCallback, useState } from 'react'; import { Box, Button, - Icon, - Icons, Modal, Overlay, OverlayBackdrop, @@ -37,6 +35,7 @@ import { } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { ModalWide } from '$styles/Modal.css'; +import { Icon, Icons } from '$app/icons'; const renderErrorButton = (retry: () => void, text: string) => ( , 'type' | 'size'> & { size: '400' | '500'; diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx index fa8acd4e5..f484f4cb9 100644 --- a/src/app/components/room-avatar/RoomAvatar.tsx +++ b/src/app/components/room-avatar/RoomAvatar.tsx @@ -1,11 +1,12 @@ import type { JoinRule } from '$types/matrix-sdk'; -import { AvatarFallback, Icon, Icons, color } from 'folds'; +import { AvatarFallback, color } from 'folds'; import type { ComponentProps, ReactNode } from 'react'; import { forwardRef, useEffect, useState } from 'react'; import { getRoomIconSrc } from '$utils/room'; import colorMXID from '$utils/colorMXID'; import * as css from './RoomAvatar.css'; import { AvatarImage } from './AvatarImage'; +import { Icon, Icons } from '$app/icons'; type RoomAvatarProps = { roomId: string; diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx index 0e48c5fed..f32b71ec7 100644 --- a/src/app/components/room-card/RoomCard.tsx +++ b/src/app/components/room-card/RoomCard.tsx @@ -8,8 +8,6 @@ import { Box, Button, Dialog, - Icon, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -41,6 +39,7 @@ import * as css from './style.css'; import type { RoomBannerContent } from '$types/matrix-sdk-events'; import { CustomStateEvent } from '$types/matrix/room'; import colorMXID from '$utils/colorMXID'; +import { Icon, Icons } from '$app/icons'; type GridColumnCount = '1' | '2' | '3'; const getGridColumnCount = (gridWidth: number): GridColumnCount => { diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx index 94fd6b66a..818e7ccf3 100644 --- a/src/app/components/room-intro/RoomIntro.tsx +++ b/src/app/components/room-intro/RoomIntro.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { Avatar, Box, Button, Icon, Icons, Spinner, Text, as } from 'folds'; +import { Avatar, Box, Button, Spinner, Text, as } from 'folds'; import type { Room } from '$types/matrix-sdk'; import { useAtomValue } from 'jotai'; import type { IRoomCreateContent } from '$types/matrix/room'; @@ -23,6 +23,7 @@ import { InviteUserPrompt } from '$components/invite-user-prompt'; import { InfoCard } from '$components/info-card'; import { DirectInvitePrompt } from '$components/direct-invite-prompt'; import { EventType, KnownMembership } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; export type RoomIntroProps = { room: Room; diff --git a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx index 8838cea25..db424ce16 100644 --- a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx +++ b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx @@ -1,8 +1,9 @@ -import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds'; +import { as, Box, Header, IconButton, Modal, Scroll, Text } from 'folds'; import classNames from 'classnames'; import Linkify from 'linkify-react'; import { LINKIFY_OPTS, scaleSystemEmoji } from '$plugins/react-custom-html-parser'; import * as css from './style.css'; +import { Icon, Icons } from '$app/icons'; export const RoomTopicViewer = as< 'div', diff --git a/src/app/components/setting-menu-selector/SettingMenuSelector.tsx b/src/app/components/setting-menu-selector/SettingMenuSelector.tsx index 6717313b2..e149ee7f3 100644 --- a/src/app/components/setting-menu-selector/SettingMenuSelector.tsx +++ b/src/app/components/setting-menu-selector/SettingMenuSelector.tsx @@ -1,6 +1,6 @@ import FocusTrap from 'focus-trap-react'; import type { RectCords } from 'folds'; -import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, Spinner, Text } from 'folds'; +import { Box, Button, config, Menu, MenuItem, PopOut, Spinner, Text } from 'folds'; import { type ComponentPropsWithoutRef, type MouseEventHandler, @@ -9,6 +9,7 @@ import { } from 'react'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; export type SettingMenuOption = { value: T; diff --git a/src/app/components/setting-tile/SettingTile.tsx b/src/app/components/setting-tile/SettingTile.tsx index 7c3982442..549838458 100644 --- a/src/app/components/setting-tile/SettingTile.tsx +++ b/src/app/components/setting-tile/SettingTile.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { Box, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, IconButton, Text } from 'folds'; import { BreakWord } from '$styles/Text.css'; import { buildSettingsLink } from '$features/settings/settingsLink'; import { copyToClipboard } from '$utils/dom'; @@ -15,6 +15,7 @@ import { settingTileRoot, settingTileTitleRow, } from './SettingTile.css'; +import { Icon, Icons } from '$app/icons'; type SettingTileProps = { focusId?: string; diff --git a/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx b/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx index 004eb3c0c..1949e3f76 100644 --- a/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx +++ b/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef, useState } from 'react'; -import { Box, Button, Icon, Icons, Text } from 'folds'; +import { Box, Button, Text } from 'folds'; import * as css from './TelemetryConsentBanner.css'; +import { Icon, Icons } from '$app/icons'; const SENTRY_KEY = 'sable_sentry_enabled'; diff --git a/src/app/components/text-viewer/TextViewer.tsx b/src/app/components/text-viewer/TextViewer.tsx index 74cd47188..edd613c93 100644 --- a/src/app/components/text-viewer/TextViewer.tsx +++ b/src/app/components/text-viewer/TextViewer.tsx @@ -1,10 +1,11 @@ import type { ComponentProps, HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import classNames from 'classnames'; -import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds'; +import { Box, Chip, Header, IconButton, Scroll, Text, as } from 'folds'; import { CodeHighlightRenderer } from '$components/code-highlight'; import { copyToClipboard } from '$utils/dom'; import * as css from './TextViewer.css'; +import { Icon, Icons } from '$app/icons'; type TextViewerContentProps = { text: string; diff --git a/src/app/components/theme/ThemeMigrationBanner.tsx b/src/app/components/theme/ThemeMigrationBanner.tsx index 793e84755..e034b7136 100644 --- a/src/app/components/theme/ThemeMigrationBanner.tsx +++ b/src/app/components/theme/ThemeMigrationBanner.tsx @@ -6,9 +6,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -26,6 +24,7 @@ import { usePatchSettings } from '$features/settings/cosmetics/themeSettingsPatc import { DEFAULT_THEME_CATALOG_BASE } from '../../theme/catalogDefaults'; import { needsLegacyThemeMigration } from '../../theme/legacyToCatalogMap'; import { runLegacyThemeMigration } from '../../theme/migrateLegacyThemes'; +import { Icon, Icons } from '$app/icons'; export function ThemeMigrationBanner() { const store = useStore(); diff --git a/src/app/components/theme/ThemePreviewCard.tsx b/src/app/components/theme/ThemePreviewCard.tsx index 2c6026ae2..215a29494 100644 --- a/src/app/components/theme/ThemePreviewCard.tsx +++ b/src/app/components/theme/ThemePreviewCard.tsx @@ -1,20 +1,10 @@ import { type ReactNode, useCallback, useMemo } from 'react'; -import { - Box, - Button, - Icon, - IconButton, - Icons, - Text, - Tooltip, - TooltipProvider, - toRem, - config, -} from 'folds'; +import { Box, Button, IconButton, Text, Tooltip, TooltipProvider, toRem, config } from 'folds'; import { useTimeoutToggle } from '$hooks/useTimeoutToggle'; import { copyToClipboard } from '$utils/dom'; import { buildPreviewStyleBlock, extractSafePreviewCustomProperties } from '../../theme/previewCss'; +import { Icon, Icons } from '$app/icons'; export type ThemePreviewCardProps = { title: string; diff --git a/src/app/components/uia-stages/PasswordStage.tsx b/src/app/components/uia-stages/PasswordStage.tsx index 5c8f04b44..5a912e5f9 100644 --- a/src/app/components/uia-stages/PasswordStage.tsx +++ b/src/app/components/uia-stages/PasswordStage.tsx @@ -1,9 +1,10 @@ -import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds'; import type { FormEventHandler } from 'react'; import { AuthType } from '$types/matrix-sdk'; import { PasswordInput } from '$components/password-input'; import type { StageComponentProps } from './types'; import { ErrorCode } from '../../cs-errorcode'; +import { Icon, Icons } from '$app/icons'; export function PasswordStage({ stageData, diff --git a/src/app/components/uia-stages/SSOStage.tsx b/src/app/components/uia-stages/SSOStage.tsx index 6de4cbdfd..495d1c3a0 100644 --- a/src/app/components/uia-stages/SSOStage.tsx +++ b/src/app/components/uia-stages/SSOStage.tsx @@ -1,6 +1,7 @@ -import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds'; import { useCallback, useEffect, useState } from 'react'; import type { StageComponentProps } from './types'; +import { Icon, Icons } from '$app/icons'; export function SSOStage({ ssoRedirectURL, diff --git a/src/app/components/upload-board/UploadBoard.tsx b/src/app/components/upload-board/UploadBoard.tsx index ff808124f..7e23f59e8 100644 --- a/src/app/components/upload-board/UploadBoard.tsx +++ b/src/app/components/upload-board/UploadBoard.tsx @@ -1,12 +1,13 @@ import type { MutableRefObject, ReactNode } from 'react'; import { useImperativeHandle, useRef } from 'react'; -import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds'; +import { Badge, Box, Chip, Header, Spinner, Text, as, percent } from 'folds'; import classNames from 'classnames'; import { useAtomValue } from 'jotai'; import type { TUploadFamilyObserverAtom, Upload, UploadSuccess } from '$state/upload'; import { UploadStatus } from '$state/upload'; import * as css from './UploadBoard.css'; +import { Icon, Icons } from '$app/icons'; type UploadBoardProps = { header: ReactNode; diff --git a/src/app/components/upload-card/CompactUploadCardRenderer.tsx b/src/app/components/upload-card/CompactUploadCardRenderer.tsx index 06378d450..5581f8ed2 100644 --- a/src/app/components/upload-card/CompactUploadCardRenderer.tsx +++ b/src/app/components/upload-card/CompactUploadCardRenderer.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { Chip, Icon, IconButton, Icons, Text, color } from 'folds'; +import { Chip, IconButton, Text, color } from 'folds'; import type { TUploadAtom, UploadSuccess } from '$state/upload'; import { UploadStatus, useBindUploadAtom } from '$state/upload'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -7,6 +7,7 @@ import type { TUploadContent } from '$utils/matrix'; import { bytesToSize, getFileTypeIcon } from '$utils/common'; import { useMediaConfig } from '$hooks/useMediaConfig'; import { UploadCard, UploadCardError, CompactUploadCardProgress } from './UploadCard'; +import { Icon, Icons } from '$app/icons'; type CompactUploadCardRendererProps = { isEncrypted?: boolean; diff --git a/src/app/components/upload-card/UploadCard.tsx b/src/app/components/upload-card/UploadCard.tsx index bbab67a25..04097e83a 100644 --- a/src/app/components/upload-card/UploadCard.tsx +++ b/src/app/components/upload-card/UploadCard.tsx @@ -1,9 +1,10 @@ -import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds'; +import { Badge, Box, ProgressBar, Text, percent } from 'folds'; import type { ReactNode } from 'react'; import { forwardRef } from 'react'; import { bytesToSize } from '$utils/common'; import * as css from './UploadCard.css'; +import { Icon, Icons } from '$app/icons'; type UploadCardProps = { before?: ReactNode; diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx index 54fb22f53..4ad0bff03 100644 --- a/src/app/components/upload-card/UploadCardRenderer.tsx +++ b/src/app/components/upload-card/UploadCardRenderer.tsx @@ -3,9 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { Box, Chip, - Icon, IconButton, - Icons, Scroll, Text, Tooltip, @@ -36,6 +34,7 @@ import { settingsAtom } from '$state/settings'; import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard'; import * as css from './UploadCard.css'; import { DescriptionEditor } from './UploadDescriptionEditor'; +import { Icon, Icons } from '$app/icons'; type PreviewImageProps = { fileItem: TUploadItem; diff --git a/src/app/components/upload-card/UploadDescriptionEditor.tsx b/src/app/components/upload-card/UploadDescriptionEditor.tsx index 2805668ca..aeeb5c16f 100644 --- a/src/app/components/upload-card/UploadDescriptionEditor.tsx +++ b/src/app/components/upload-card/UploadDescriptionEditor.tsx @@ -2,7 +2,7 @@ import type { KeyboardEventHandler } from 'react'; import { useCallback, useEffect, useState, useRef } from 'react'; import type { Room } from '$types/matrix-sdk'; import type { RectCords } from 'folds'; -import { Box, Chip, Icon, IconButton, Icons, PopOut, Spinner, Text, config } from 'folds'; +import { Box, Chip, IconButton, PopOut, Spinner, Text, config } from 'folds'; import { Editor, Transforms } from 'slate'; import { ReactEditor } from 'slate-react'; import { isKeyHotkey } from 'is-hotkey'; @@ -30,6 +30,7 @@ import { UseStateProvider } from '$components/UseStateProvider'; import { EmojiBoard } from '$components/emoji-board'; import { mobileOrTablet } from '$utils/user-agent'; import * as css from './UploadDescriptionEditor.css'; +import { Icon, Icons } from '$app/icons'; type DescriptionEditorProps = { value?: string; diff --git a/src/app/components/url-preview/ClientPreview.tsx b/src/app/components/url-preview/ClientPreview.tsx index 720afbc6d..42555a18d 100644 --- a/src/app/components/url-preview/ClientPreview.tsx +++ b/src/app/components/url-preview/ClientPreview.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; import { useCallback, useEffect, useState } from 'react'; -import { Box, Badge, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds'; +import { Box, Badge, IconButton, Spinner, Text, as, toRem } from 'folds'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; @@ -11,6 +11,7 @@ import { Image } from '../media'; import { UrlPreview } from './UrlPreview'; import { VideoContent } from '../message'; import { MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME } from '../../../unstable/prefixes'; +import { Icon, Icons } from '$app/icons'; interface OEmbed { type: 'photo' | 'video' | 'link' | 'rich'; diff --git a/src/app/components/url-preview/ThemeThirdPartyBanner.tsx b/src/app/components/url-preview/ThemeThirdPartyBanner.tsx index 220382c06..a49555c89 100644 --- a/src/app/components/url-preview/ThemeThirdPartyBanner.tsx +++ b/src/app/components/url-preview/ThemeThirdPartyBanner.tsx @@ -1,4 +1,5 @@ -import { Box, Icon, Icons, Text, toRem, config } from 'folds'; +import { Box, Text, toRem, config } from 'folds'; +import { Icon, Icons } from '$app/icons'; type ThemeThirdPartyBannerProps = { hostLabel: string; diff --git a/src/app/components/url-preview/TweakPreviewUrlCard.tsx b/src/app/components/url-preview/TweakPreviewUrlCard.tsx index c3c632745..54d6dc4ec 100644 --- a/src/app/components/url-preview/TweakPreviewUrlCard.tsx +++ b/src/app/components/url-preview/TweakPreviewUrlCard.tsx @@ -2,9 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { Box, - Icon, IconButton, - Icons, Spinner, Switch, Text, @@ -27,6 +25,7 @@ import { buildPreviewStyleBlock, extractSafePreviewCustomProperties } from '../. import { isApprovedCatalogHostUrl, isThirdPartyThemeUrl } from '../../theme/themeApproval'; import { SableChatPreviewPlaceholder } from './SableChatPreviewPlaceholder'; import { ThemeThirdPartyBanner } from './ThemeThirdPartyBanner'; +import { Icon, Icons } from '$app/icons'; function baseLabel(url: string): string { try { diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx index 89f25b267..a004d7891 100644 --- a/src/app/components/url-preview/UrlPreviewCard.tsx +++ b/src/app/components/url-preview/UrlPreviewCard.tsx @@ -1,19 +1,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import type { MatrixClient } from '$types/matrix-sdk'; import type { IPreviewUrlResponse } from '$types/matrix-sdk'; -import { - Box, - Icon, - IconButton, - Icons, - Scroll, - Spinner, - Text, - as, - color, - config, - toRem, -} from 'folds'; +import { Box, IconButton, Scroll, Spinner, Text, as, color, config, toRem } from 'folds'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { mxcUrlToHttp, downloadMedia } from '$utils/matrix'; @@ -29,6 +17,7 @@ import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import type { IImageInfo } from '$types/matrix/common'; import { MATRIX_UNSTABLE_BLUR_HASH_PROPERTY_NAME } from '$unstable/prefixes'; +import { Icon, Icons } from '$app/icons'; const linkStyles = { color: color.Success.Main }; diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx index 29ccbaafb..f2816e985 100644 --- a/src/app/components/user-profile/CreatorChip.tsx +++ b/src/app/components/user-profile/CreatorChip.tsx @@ -1,5 +1,5 @@ import type { RectCords } from 'folds'; -import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, Text } from 'folds'; +import { Chip, config, Menu, MenuItem, PopOut, Text } from 'folds'; import type { CSSProperties } from 'react'; import type { MouseEventHandler } from 'react'; import { useState } from 'react'; @@ -19,6 +19,7 @@ import { RoomSettingsPage } from '$state/roomSettings'; import { PowerColorBadge, PowerIcon } from '$components/power'; import { heroMenuItemStyle } from './heroMenuItemStyle'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; export function CreatorChip({ innerColor, diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx index dbb6ae579..098634aa2 100644 --- a/src/app/components/user-profile/PowerChip.tsx +++ b/src/app/components/user-profile/PowerChip.tsx @@ -6,9 +6,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -48,6 +46,7 @@ import { PowerColorBadge, PowerIcon } from '$components/power'; import { EventType } from '$types/matrix-sdk'; import { heroMenuItemStyle } from './heroMenuItemStyle'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; type SelfDemoteAlertProps = { power: number; diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx index 2adeb5fbe..4ace19138 100644 --- a/src/app/components/user-profile/UserChips.tsx +++ b/src/app/components/user-profile/UserChips.tsx @@ -14,8 +14,6 @@ import { Text, Line, Chip, - Icon, - Icons, Spinner, toRem, Box, @@ -50,6 +48,7 @@ import { SettingTile } from '$components/setting-tile'; import { RoomAvatar, RoomIcon } from '$components/room-avatar'; import { heroMenuItemStyle } from './heroMenuItemStyle'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; export function ServerChip({ server, diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index 7825adf06..7c1408213 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -4,8 +4,6 @@ import { Avatar, Box, color as standardColors, - Icon, - Icons, Modal, Overlay, OverlayBackdrop, @@ -33,6 +31,7 @@ import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze'; import { useUserProfile } from '$hooks/useUserProfile'; import { shadeColor, areColorsTooSimilar } from '$utils/shadeColor'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; type UserHeroProps = { userId: string; diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx index fb7b679da..7f9797897 100644 --- a/src/app/components/user-profile/UserModeration.tsx +++ b/src/app/components/user-profile/UserModeration.tsx @@ -1,4 +1,4 @@ -import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds'; +import { Box, Button, color, config, Spinner, Text, Input } from 'folds'; import { useCallback, useRef } from 'react'; import { useRoom } from '$hooks/useRoom'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; @@ -9,6 +9,7 @@ import { settingsAtom } from '$state/settings'; import { timeDayMonYear, timeHourMinute } from '$utils/time'; import { SettingTile } from '$components/setting-tile'; import { CutoutCard } from '$components/cutout-card'; +import { Icon, Icons } from '$app/icons'; type UserKickAlertProps = { reason?: string; diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index e09ad78be..2a11c9172 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -1,16 +1,4 @@ -import { - Box, - Button, - color, - config, - Icon, - Icons, - Menu, - MenuItem, - Scroll, - Text, - toRem, -} from 'folds'; +import { Box, Button, color, config, Menu, MenuItem, Scroll, Text, toRem } from 'folds'; import type { CSSProperties, SyntheticEvent } from 'react'; import { useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -63,6 +51,7 @@ import { UserHero, UserHeroName } from './UserHero'; import { KnownMembership } from '$types/matrix-sdk'; import * as css from './styles.css'; import * as prefix from '$unstable/prefixes'; +import { Icon, Icons } from '$app/icons'; const KNOWN_KEYS = new Set([ prefix.MATRIX_SABLE_UNSTABLE_PROFILE_BIOGRAPHY_PROPERTY_NAME, diff --git a/src/app/features/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx index 1a589ced4..c0aae5849 100644 --- a/src/app/features/add-existing/AddExisting.tsx +++ b/src/app/features/add-existing/AddExisting.tsx @@ -5,9 +5,7 @@ import { Button, config, Header, - Icon, IconButton, - Icons, Input, Menu, MenuItem, @@ -46,6 +44,7 @@ import { getViaServers } from '$plugins/via-servers'; import { rateLimitedActions } from '$utils/matrix'; import { useAlive } from '$hooks/useAlive'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; const SEARCH_OPTS: UseAsyncSearchOptions = { limit: 500, diff --git a/src/app/features/bug-report/BugReportModal.tsx b/src/app/features/bug-report/BugReportModal.tsx index 8426fb48c..3d2b63e23 100644 --- a/src/app/features/bug-report/BugReportModal.tsx +++ b/src/app/features/bug-report/BugReportModal.tsx @@ -6,9 +6,7 @@ import { Chip, config, Header, - Icon, IconButton, - Icons, Input, Modal, Overlay, @@ -26,6 +24,7 @@ import { stopPropagation } from '$utils/keyboard'; import { getDebugLogger } from '$utils/debugLogger'; import { fetch } from '$utils/fetch'; import { APP_NAME, APP_SOURCE_URL } from '$app/config/brand'; +import { Icon, Icons } from '$app/icons'; type ReportType = 'bug' | 'feature'; diff --git a/src/app/features/call-status/CallControl.tsx b/src/app/features/call-status/CallControl.tsx index 4fc81b642..241a515bc 100644 --- a/src/app/features/call-status/CallControl.tsx +++ b/src/app/features/call-status/CallControl.tsx @@ -1,4 +1,4 @@ -import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds'; +import { Box, Chip, IconButton, Spinner, Text, Tooltip, TooltipProvider } from 'folds'; import { useCallback } from 'react'; import { useSetAtom } from 'jotai'; import { StatusDivider } from './components'; @@ -6,6 +6,7 @@ import type { CallEmbed } from '../../plugins/call'; import { useCallControlState } from '../../plugins/call'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { callEmbedAtom } from '../../state/callEmbed'; +import { Icon, Icons } from '$app/icons'; type MicrophoneButtonProps = { enabled: boolean; diff --git a/src/app/features/call-status/LiveChip.tsx b/src/app/features/call-status/LiveChip.tsx index ea7f82e81..1b9accfeb 100644 --- a/src/app/features/call-status/LiveChip.tsx +++ b/src/app/features/call-status/LiveChip.tsx @@ -7,8 +7,6 @@ import { Box, Chip, config, - Icon, - Icons, Menu, MenuItem, PopOut, @@ -29,6 +27,7 @@ import { useCachedMxcConverter } from '../../hooks/useCachedMxcConverter'; import { UserAvatar } from '../../components/user-avatar'; import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile'; import { getMouseEventCords } from '../../utils/dom'; +import { Icon, Icons } from '$app/icons'; type LiveChipProps = { room: Room; diff --git a/src/app/features/call-status/MemberGlance.tsx b/src/app/features/call-status/MemberGlance.tsx index c5da20c7e..ce4b89db8 100644 --- a/src/app/features/call-status/MemberGlance.tsx +++ b/src/app/features/call-status/MemberGlance.tsx @@ -1,4 +1,4 @@ -import { Box, config, Icon, Icons, Text } from 'folds'; +import { Box, config, Text } from 'folds'; import type { CallMembership } from '$types/matrix-sdk'; import type { Room } from '$types/matrix-sdk'; import { UserAvatar } from '../../components/user-avatar'; @@ -10,6 +10,7 @@ import { StackedAvatar } from '../../components/stacked-avatar'; import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile'; import { getMouseEventCords } from '../../utils/dom'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; type MemberGlanceProps = { room: Room; diff --git a/src/app/features/call-status/MemberSpeaking.tsx b/src/app/features/call-status/MemberSpeaking.tsx index f513a07f5..5e4c98a20 100644 --- a/src/app/features/call-status/MemberSpeaking.tsx +++ b/src/app/features/call-status/MemberSpeaking.tsx @@ -1,7 +1,8 @@ import type { Room } from '$types/matrix-sdk'; -import { Box, Icon, Icons, Text } from 'folds'; +import { Box, Text } from 'folds'; import { getMemberDisplayName } from '../../utils/room'; import { getMxIdLocalPart } from '../../utils/matrix'; +import { Icon, Icons } from '$app/icons'; type MemberSpeakingProps = { room: Room; diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx index 2fc48de0c..f42a7308d 100644 --- a/src/app/features/call/CallControls.tsx +++ b/src/app/features/call/CallControls.tsx @@ -5,9 +5,7 @@ import { Box, Button, config, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -33,6 +31,7 @@ import { SoundButton, VideoButton, } from './Controls'; +import { Icon, Icons } from '$app/icons'; type CallControlsProps = { callEmbed: CallEmbed; diff --git a/src/app/features/call/CallMemberCard.tsx b/src/app/features/call/CallMemberCard.tsx index c6b451728..2cb0f6b65 100644 --- a/src/app/features/call/CallMemberCard.tsx +++ b/src/app/features/call/CallMemberCard.tsx @@ -1,6 +1,6 @@ import type { CallMembership, SessionMembershipData } from '$types/matrix-sdk'; import { useState } from 'react'; -import { Avatar, Box, Icon, Icons, Text } from 'folds'; +import { Avatar, Box, Text } from 'folds'; import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile'; @@ -11,6 +11,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix'; import { UserAvatar } from '../../components/user-avatar'; import { getMouseEventCords } from '../../utils/dom'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; interface MemberWithMembershipData { membershipData?: SessionMembershipData & { diff --git a/src/app/features/call/Controls.tsx b/src/app/features/call/Controls.tsx index 3fe6d68fe..67a77ea7a 100644 --- a/src/app/features/call/Controls.tsx +++ b/src/app/features/call/Controls.tsx @@ -1,7 +1,8 @@ -import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds'; +import { IconButton, Line, Text, Tooltip, TooltipProvider } from 'folds'; import { useAtom } from 'jotai'; import * as css from './styles.css'; import { callChatAtom } from '../../state/callEmbed'; +import { Icon, Icons } from '$app/icons'; export function ControlDivider() { return ( diff --git a/src/app/features/call/PrescreenControls.tsx b/src/app/features/call/PrescreenControls.tsx index 7ac8ac6ac..67349b9d9 100644 --- a/src/app/features/call/PrescreenControls.tsx +++ b/src/app/features/call/PrescreenControls.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Icon, Icons, Spinner, Text, toRem } from 'folds'; +import { Box, Button, Spinner, Text, toRem } from 'folds'; import { SequenceCard } from '../../components/sequence-card'; import * as css from './styles.css'; import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls'; @@ -6,6 +6,7 @@ import { useIsDirectRoom, useRoom } from '../../hooks/useRoom'; import { useCallEmbed, useCallJoined, useCallStart } from '../../hooks/useCallEmbed'; import { useCallPreferences } from '../../state/hooks/callPreferences'; import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize'; +import { Icon, Icons } from '$app/icons'; type PrescreenControlsProps = { canJoin?: boolean; diff --git a/src/app/features/common-settings/appearance/Appearance.tsx b/src/app/features/common-settings/appearance/Appearance.tsx index b7bc803e0..ca270409f 100644 --- a/src/app/features/common-settings/appearance/Appearance.tsx +++ b/src/app/features/common-settings/appearance/Appearance.tsx @@ -3,8 +3,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Scroll, Button, config, @@ -25,6 +23,7 @@ import type { ShowRoomIcon } from '$state/settings'; import { settingsAtom } from '$state/settings'; import { stopPropagation } from '$utils/keyboard'; import FocusTrap from 'focus-trap-react'; +import { Icon, Icons } from '$app/icons'; export function SelectShowPerRoomRoomIcon({ roomId }: { roomId: string }) { const [menuCords, setMenuCords] = useState(); diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx index 1ad7107ef..adf5c00f1 100644 --- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx +++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx @@ -4,8 +4,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Scroll, Switch, Avatar, @@ -57,6 +55,7 @@ import { PronounEditor } from '$features/settings/account/PronounEditor'; import type { PronounSet } from '$utils/pronouns'; import { EventType } from '$types/matrix-sdk'; import { CustomStateEvent } from '$types/matrix/room'; +import { Icon, Icons } from '$app/icons'; const log = createLogger('Cosmetics'); diff --git a/src/app/features/common-settings/developer-tools/DevelopTools.tsx b/src/app/features/common-settings/developer-tools/DevelopTools.tsx index 589381772..840bfb6e2 100644 --- a/src/app/features/common-settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/common-settings/developer-tools/DevelopTools.tsx @@ -1,18 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import { - Box, - Text, - IconButton, - Icon, - Icons, - Scroll, - Switch, - Button, - MenuItem, - config, - color, -} from 'folds'; +import { Box, Text, IconButton, Scroll, Switch, Button, MenuItem, config, color } from 'folds'; import { EventType, NotificationCountType } from '$types/matrix-sdk'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; @@ -36,6 +24,7 @@ import { SequenceCardStyle } from '$features/common-settings/styles.css'; import { SendRoomEvent } from './SendRoomEvent'; import type { StateEventInfo } from './StateEventEditor'; import { StateEventEditor } from './StateEventEditor'; +import { Icon, Icons } from '$app/icons'; const formatSyncReason = (reason: string): string => { if (reason === 'sliding_active') return 'Sliding Sync active'; diff --git a/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx index ad9f844e1..d4fb0fb2f 100644 --- a/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx +++ b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx @@ -4,8 +4,6 @@ import type { MatrixError, StateEvents, TimelineEvents } from '$types/matrix-sdk import { Box, Chip, - Icon, - Icons, IconButton, Text, config, @@ -23,6 +21,7 @@ import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { syntaxErrorPosition } from '$utils/dom'; import { Cursor } from '$plugins/text-area'; +import { Icon, Icons } from '$app/icons'; const EDITOR_INTENT_SPACE_COUNT = 2; diff --git a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx index 031d7d3da..ebe2128c1 100644 --- a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx +++ b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx @@ -3,8 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Box, Text, - Icon, - Icons, IconButton, Chip, Scroll, @@ -32,6 +30,7 @@ import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { Icon, Icons } from '$app/icons'; const EDITOR_INTENT_SPACE_COUNT = 2; diff --git a/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx b/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx index cb26be3f2..d497f6e70 100644 --- a/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx +++ b/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx @@ -1,9 +1,10 @@ import { useState } from 'react'; -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; import { Page, PageContent, PageHeader } from '$components/page'; import type { ImagePack } from '$plugins/custom-emoji'; import { ImagePackView } from '$components/image-pack-view'; import { RoomPacks } from './RoomPacks'; +import { Icon, Icons } from '$app/icons'; type EmojisStickersProps = { requestClose: () => void; diff --git a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx index a3abb345b..17e431829 100644 --- a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx +++ b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx @@ -4,8 +4,6 @@ import { Box, Text, Button, - Icon, - Icons, Avatar, AvatarImage, AvatarFallback, @@ -38,6 +36,7 @@ import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; import { CustomStateEvent } from '$types/matrix/room'; +import { Icon, Icons } from '$app/icons'; function PackAvatarImage({ url }: { url: string }) { const resolved = useRenderableMediaUrl(url); diff --git a/src/app/features/common-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx index d7b6a400c..a575517a6 100644 --- a/src/app/features/common-settings/general/RoomAddress.tsx +++ b/src/app/features/common-settings/general/RoomAddress.tsx @@ -8,8 +8,6 @@ import { Chip, color, config, - Icon, - Icons, Input, Spinner, Text, @@ -35,6 +33,7 @@ import { getMxIdServer } from '$utils/mxIdHelper'; import type { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; type RoomPublishedAddressesProps = { permissions: RoomPermissionsAPI; diff --git a/src/app/features/common-settings/general/RoomEncryption.tsx b/src/app/features/common-settings/general/RoomEncryption.tsx index a54aacccb..c1db8f9c5 100644 --- a/src/app/features/common-settings/general/RoomEncryption.tsx +++ b/src/app/features/common-settings/general/RoomEncryption.tsx @@ -6,9 +6,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -29,6 +27,7 @@ import { useStateEvent } from '$hooks/useStateEvent'; import { stopPropagation } from '$utils/keyboard'; import type { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2'; diff --git a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx index 64ec50396..daed2d1b1 100644 --- a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx +++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx @@ -1,7 +1,7 @@ import type { MouseEventHandler } from 'react'; import { useCallback, useMemo, useState } from 'react'; import type { RectCords } from 'folds'; -import { Button, color, config, Icon, Icons, Menu, MenuItem, PopOut, Spinner, Text } from 'folds'; +import { Button, color, config, Menu, MenuItem, PopOut, Spinner, Text } from 'folds'; import type { MatrixError, RoomHistoryVisibilityEventContent, @@ -19,6 +19,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useStateEvent } from '$hooks/useStateEvent'; import { stopPropagation } from '$utils/keyboard'; import type { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; +import { Icon, Icons } from '$app/icons'; const useVisibilityStr = () => useMemo( diff --git a/src/app/features/common-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx index 622667f8c..2a9351d9a 100644 --- a/src/app/features/common-settings/general/RoomProfile.tsx +++ b/src/app/features/common-settings/general/RoomProfile.tsx @@ -7,9 +7,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Input, Overlay, OverlayBackdrop, @@ -53,6 +51,7 @@ import { CustomStateEvent } from '$types/matrix/room'; import { SettingTile } from '$components/setting-tile'; import { stopPropagation } from '$utils/keyboard'; import FocusTrap from 'focus-trap-react'; +import { Icon, Icons } from '$app/icons'; type RoomProfileEditProps = { canEditAvatar: boolean; diff --git a/src/app/features/common-settings/general/RoomUpgrade.tsx b/src/app/features/common-settings/general/RoomUpgrade.tsx index 70131e7f0..448c34776 100644 --- a/src/app/features/common-settings/general/RoomUpgrade.tsx +++ b/src/app/features/common-settings/general/RoomUpgrade.tsx @@ -12,8 +12,6 @@ import { config, Box, IconButton, - Icon, - Icons, } from 'folds'; import FocusTrap from 'focus-trap-react'; import type { MatrixError, RoomTombstoneEventContent } from '$types/matrix-sdk'; @@ -40,6 +38,7 @@ import { useAlive } from '$hooks/useAlive'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { BreakWord } from '$styles/Text.css'; import { creatorsSupported } from '$utils/roomSupport'; +import { Icon, Icons } from '$app/icons'; function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) { const mx = useMatrixClient(); diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx index cfdc7615e..443a305ab 100644 --- a/src/app/features/common-settings/members/Members.tsx +++ b/src/app/features/common-settings/members/Members.tsx @@ -1,20 +1,7 @@ import type { ChangeEventHandler, MouseEventHandler } from 'react'; import { useCallback, useMemo, useRef, useState } from 'react'; import type { RectCords } from 'folds'; -import { - Box, - Chip, - config, - Icon, - IconButton, - Icons, - Input, - PopOut, - Scroll, - Spinner, - Text, - toRem, -} from 'folds'; +import { Box, Chip, config, IconButton, Input, PopOut, Scroll, Spinner, Text, toRem } from 'folds'; import { useVirtualizer } from '@tanstack/react-virtual'; import type { RoomMember } from '$types/matrix-sdk'; import { Page, PageContent, PageHeader } from '$components/page'; @@ -45,6 +32,7 @@ import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '$hooks/useMembe import { useRoomCreators } from '$hooks/useRoomCreators'; import { getMouseEventCords } from '$utils/dom'; import { getMxIdServer } from '$utils/mxIdHelper'; +import { Icon, Icons } from '$app/icons'; const SEARCH_OPTIONS: UseAsyncSearchOptions = { limit: 1000, diff --git a/src/app/features/common-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx index 9508741cc..95d101cbf 100644 --- a/src/app/features/common-settings/permissions/PermissionGroups.tsx +++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } from 'folds'; +import { Badge, Box, Button, Chip, config, Menu, Spinner, Text } from 'folds'; import { produce } from 'immer'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -16,6 +16,7 @@ import { useAlive } from '$hooks/useAlive'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; import type { PermissionGroup } from './types'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; const USER_DEFAULT_LOCATION: PermissionLocation = { user: true, diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx index ba43bafa0..38f6a2909 100644 --- a/src/app/features/common-settings/permissions/PowersEditor.tsx +++ b/src/app/features/common-settings/permissions/PowersEditor.tsx @@ -5,8 +5,6 @@ import { Box, Text, Chip, - Icon, - Icons, IconButton, Scroll, Button, @@ -48,6 +46,7 @@ import { BetaNoticeBadge } from '$components/BetaNoticeBadge'; import { getPowerTagIconSrc } from '$hooks/useMemberPowerTag'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; import { creatorsSupported } from '$utils/roomSupport'; +import { Icon, Icons } from '$app/icons'; type EditPowerProps = { maxPower: number; diff --git a/src/app/features/create-chat/CreateChat.tsx b/src/app/features/create-chat/CreateChat.tsx index 492e9a1c4..0bd0ee4af 100644 --- a/src/app/features/create-chat/CreateChat.tsx +++ b/src/app/features/create-chat/CreateChat.tsx @@ -1,4 +1,4 @@ -import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds'; +import { Box, Button, color, config, Input, Spinner, Switch, Text } from 'folds'; import type { FormEventHandler } from 'react'; import { useCallback, useState } from 'react'; import type { ICreateRoomStateEvent } from '$types/matrix-sdk'; @@ -14,6 +14,7 @@ import { createRoomEncryptionState } from '$components/create-room'; import { useAlive } from '$hooks/useAlive'; import { getDirectRoomPath } from '$pages/pathUtils'; import { ErrorCode } from '../../cs-errorcode'; +import { Icon, Icons } from '$app/icons'; type CreateChatProps = { defaultUserId?: string; diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx index 59b2ec571..01ca6a21f 100644 --- a/src/app/features/create-room/CreateRoom.tsx +++ b/src/app/features/create-room/CreateRoom.tsx @@ -2,20 +2,7 @@ import type { FormEventHandler } from 'react'; import { useCallback, useEffect, useState } from 'react'; import type { Room } from '$types/matrix-sdk'; import { MatrixError, JoinRule, RoomType } from '$types/matrix-sdk'; -import { - Box, - Button, - Chip, - color, - config, - Icon, - Icons, - Input, - Spinner, - Switch, - Text, - TextArea, -} from 'folds'; +import { Box, Button, Chip, color, config, Input, Spinner, Switch, Text, TextArea } from 'folds'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -45,6 +32,7 @@ import { knockRestrictedSupported, } from '$utils/roomSupport'; import { ErrorCode } from '../../cs-errorcode'; +import { Icon, Icons } from '$app/icons'; const debugLog = createDebugLogger('CreateRoom'); diff --git a/src/app/features/create-room/CreateRoomModal.tsx b/src/app/features/create-room/CreateRoomModal.tsx index ba3f20a01..8e2d37b26 100644 --- a/src/app/features/create-room/CreateRoomModal.tsx +++ b/src/app/features/create-room/CreateRoomModal.tsx @@ -2,9 +2,7 @@ import { Box, config, Header, - Icon, IconButton, - Icons, Modal, Overlay, OverlayBackdrop, @@ -20,6 +18,7 @@ import type { CreateRoomModalState } from '$state/createRoomModal'; import { stopPropagation } from '$utils/keyboard'; import { CreateRoomType } from '$components/create-room/types'; import { CreateRoomForm } from './CreateRoom'; +import { Icon, Icons } from '$app/icons'; type CreateRoomModalProps = { state: CreateRoomModalState; diff --git a/src/app/features/create-space/CreateSpace.tsx b/src/app/features/create-space/CreateSpace.tsx index 8518110ad..213092005 100644 --- a/src/app/features/create-space/CreateSpace.tsx +++ b/src/app/features/create-space/CreateSpace.tsx @@ -2,20 +2,7 @@ import type { FormEventHandler } from 'react'; import { useCallback, useEffect, useState } from 'react'; import type { Room } from '$types/matrix-sdk'; import { MatrixError, RoomType } from '$types/matrix-sdk'; -import { - Box, - Button, - Chip, - color, - config, - Icon, - Icons, - Input, - Spinner, - Switch, - Text, - TextArea, -} from 'folds'; +import { Box, Button, Chip, color, config, Input, Spinner, Switch, Text, TextArea } from 'folds'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -41,6 +28,7 @@ import { } from '$utils/roomSupport'; import { ErrorCode } from '../../cs-errorcode'; +import { Icon, Icons } from '$app/icons'; const getCreateSpaceAccessToIcon = (access: CreateRoomAccess) => { if (access === CreateRoomAccess.Private) return Icons.SpaceLock; diff --git a/src/app/features/create-space/CreateSpaceModal.tsx b/src/app/features/create-space/CreateSpaceModal.tsx index 44d8acbf2..609c9baf3 100644 --- a/src/app/features/create-space/CreateSpaceModal.tsx +++ b/src/app/features/create-space/CreateSpaceModal.tsx @@ -2,9 +2,7 @@ import { Box, config, Header, - Icon, IconButton, - Icons, Modal, Overlay, OverlayBackdrop, @@ -19,6 +17,7 @@ import { useCloseCreateSpaceModal, useCreateSpaceModalState } from '$state/hooks import type { CreateSpaceModalState } from '$state/createSpaceModal'; import { stopPropagation } from '$utils/keyboard'; import { CreateSpaceForm } from './CreateSpace'; +import { Icon, Icons } from '$app/icons'; type CreateSpaceModalProps = { state: CreateSpaceModalState; diff --git a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx index 17cf86ec3..4c2b4f880 100644 --- a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx +++ b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds'; +import { Box, IconButton, Scroll, Text, toRem } from 'folds'; import { useAtomValue } from 'jotai'; import { RoomCard } from '$components/room-card'; import { RoomTopicViewer } from '$components/room-topic-viewer'; @@ -9,6 +9,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { allRoomsAtom } from '$state/room-list/roomList'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { Icon, Icons } from '$app/icons'; type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] }; export function JoinBeforeNavigate({ diff --git a/src/app/features/lobby/DnD.tsx b/src/app/features/lobby/DnD.tsx index c39949a09..250e3fdb9 100644 --- a/src/app/features/lobby/DnD.tsx +++ b/src/app/features/lobby/DnD.tsx @@ -8,9 +8,10 @@ import { import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'; import classNames from 'classnames'; -import { Box, Icon, Icons, as } from 'folds'; +import { Box, as } from 'folds'; import type { HierarchyItem } from '$hooks/useSpaceHierarchy'; import * as css from './DnD.css'; +import { Icon, Icons } from '$app/icons'; export type DropContainerData = { item: HierarchyItem; diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx index 165343c82..4f2fb6134 100644 --- a/src/app/features/lobby/HierarchyItemMenu.tsx +++ b/src/app/features/lobby/HierarchyItemMenu.tsx @@ -2,20 +2,7 @@ import type { MouseEventHandler } from 'react'; import { useCallback, useEffect, useState } from 'react'; import FocusTrap from 'focus-trap-react'; import type { RectCords } from 'folds'; -import { - Box, - IconButton, - Icon, - Icons, - PopOut, - Menu, - MenuItem, - Text, - config, - Line, - Spinner, - toRem, -} from 'folds'; +import { Box, IconButton, PopOut, Menu, MenuItem, Text, config, Line, Spinner, toRem } from 'folds'; import type { HierarchyItem } from '$hooks/useSpaceHierarchy'; import { useMatrixClient } from '$hooks/useMatrixClient'; import type { MSpaceChildContent } from '$types/matrix/room'; @@ -37,6 +24,7 @@ import { getCanonicalAliasOrRoomId } from '$utils/matrix'; import { useNavigate } from 'react-router-dom'; import { getSpaceLobbyPath } from '$pages/pathUtils'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; type HierarchyItemWithParent = HierarchyItem & { parentId: string; diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx index 8d2b826ac..9ff1ea246 100644 --- a/src/app/features/lobby/Lobby.tsx +++ b/src/app/features/lobby/Lobby.tsx @@ -1,18 +1,6 @@ import type { MouseEventHandler, ReactElement } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { - Box, - Chip, - Icon, - IconButton, - Icons, - Line, - Scroll, - Spinner, - Text, - color, - config, -} from 'folds'; +import { Box, Chip, IconButton, Line, Scroll, Spinner, Text, color, config } from 'folds'; import type { VirtualItem } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useAtom, useAtomValue } from 'jotai'; @@ -75,6 +63,7 @@ import { LobbyHero } from './LobbyHero'; import { LobbyHeader } from './LobbyHeader'; import { SpaceHierarchyNavItem } from './SpaceHierarchyNavItem'; import { CustomAccountDataEvent } from '$types/matrix/accountData'; +import { Icon, Icons } from '$app/icons'; const useCanDropLobbyItem = ( space: Room, diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx index 0b2c690b1..283a55f02 100644 --- a/src/app/features/lobby/LobbyHeader.tsx +++ b/src/app/features/lobby/LobbyHeader.tsx @@ -4,9 +4,7 @@ import type { RectCords } from 'folds'; import { Avatar, Box, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -39,6 +37,7 @@ import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { InviteUserPrompt } from '$components/invite-user-prompt'; import * as css from './LobbyHeader.css'; +import { Icon, Icons } from '$app/icons'; type LobbyMenuProps = { powerLevels: IPowerLevels; diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx index e1c926fb9..88024346f 100644 --- a/src/app/features/lobby/RoomItem.tsx +++ b/src/app/features/lobby/RoomItem.tsx @@ -5,8 +5,6 @@ import { Badge, Box, Chip, - Icon, - Icons, Line, Overlay, OverlayBackdrop, @@ -40,6 +38,7 @@ import { formatCompactNumber } from '$utils/formatCompactNumber'; import { ItemDraggableTarget, useDraggableItem } from './DnD'; import * as styleCss from './style.css'; import * as css from './RoomItem.css'; +import { Icon, Icons } from '$app/icons'; type RoomJoinButtonProps = { roomId: string; diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx index 9ca9298e5..88013a77a 100644 --- a/src/app/features/lobby/SpaceItem.tsx +++ b/src/app/features/lobby/SpaceItem.tsx @@ -6,8 +6,6 @@ import { Avatar, Text, Chip, - Icon, - Icons, as, Badge, toRem, @@ -38,6 +36,7 @@ import FocusTrap from 'focus-trap-react'; import * as css from './SpaceItem.css'; import * as styleCss from './style.css'; import { useDraggableItem } from './DnD'; +import { Icon, Icons } from '$app/icons'; function SpaceProfileLoading() { return ( diff --git a/src/app/features/lobby/SpaceNavItem.tsx b/src/app/features/lobby/SpaceNavItem.tsx index 95eb56977..d053db27d 100644 --- a/src/app/features/lobby/SpaceNavItem.tsx +++ b/src/app/features/lobby/SpaceNavItem.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; import { useRef } from 'react'; -import { Avatar, Badge, Box, Chip, Icon, Icons, as, Text } from 'folds'; +import { Avatar, Badge, Box, Chip, as, Text } from 'folds'; import classNames from 'classnames'; import type { IHierarchyRoom, MatrixClient, Room } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -16,6 +16,7 @@ import { getSpaceLobbyPath } from '$pages/pathUtils'; import { InaccessibleSpaceProfile, UnjoinedSpaceProfile } from './SpaceItem'; import * as css from './SpaceNavItem.css'; import { useDraggableItem } from './DnD'; +import { Icon, Icons } from '$app/icons'; type SpaceProfileProps = { roomId: string; diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx index 617f8556e..1ac791f41 100644 --- a/src/app/features/message-search/MessageSearch.tsx +++ b/src/app/features/message-search/MessageSearch.tsx @@ -1,6 +1,6 @@ import type { RefObject } from 'react'; import { useCallback, useEffect, useMemo, useRef } from 'react'; -import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem } from 'folds'; +import { Text, Box, config, Spinner, IconButton, Line, toRem } from 'folds'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useInfiniteQuery } from '@tanstack/react-query'; import { useSearchParams } from 'react-router-dom'; @@ -28,6 +28,7 @@ import { SearchResultGroup } from './SearchResultGroup'; import { SearchResultTimelineItem } from './SearchResultTimelineItem'; import { SearchInput } from './SearchInput'; import { SearchFilters } from './SearchFilters'; +import { Icon, Icons } from '$app/icons'; const useSearchPathSearchParams = (searchParams: URLSearchParams): SearchPathSearchParams => useMemo( diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx index b98ca0805..055b17160 100644 --- a/src/app/features/message-search/SearchFilters.tsx +++ b/src/app/features/message-search/SearchFilters.tsx @@ -6,8 +6,6 @@ import { Box, Chip, Text, - Icon, - Icons, Line, config, PopOut, @@ -20,7 +18,7 @@ import { Input, Badge, } from 'folds'; -import type { IconSrc } from 'folds'; + import { SearchOrderBy } from '$types/matrix-sdk'; import type { RoomMember } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; @@ -40,6 +38,8 @@ import { stopPropagation } from '$utils/keyboard'; import { UserAvatar } from '$components/user-avatar'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import type { SearchHasType } from './useMessageSearch'; +import type { IconSrc } from '$app/icons'; +import { Icon, Icons } from '$app/icons'; type GroupButtonProps = { grouped?: boolean; diff --git a/src/app/features/message-search/SearchInput.tsx b/src/app/features/message-search/SearchInput.tsx index dc5307603..8ec171b70 100644 --- a/src/app/features/message-search/SearchInput.tsx +++ b/src/app/features/message-search/SearchInput.tsx @@ -1,5 +1,6 @@ import type { FormEventHandler, RefObject } from 'react'; -import { Box, Text, Input, Icon, Icons, Spinner, Chip, config } from 'folds'; +import { Box, Text, Input, Spinner, Chip, config } from 'folds'; +import { Icon, Icons } from '$app/icons'; type SearchProps = { active?: boolean; diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx index ff1e72264..47ff3dbb1 100644 --- a/src/app/features/message-search/SearchResultGroup.tsx +++ b/src/app/features/message-search/SearchResultGroup.tsx @@ -4,7 +4,7 @@ import type { IEventWithRoomId, Room } from '$types/matrix-sdk'; import { JoinRule, RelationType, EventType } from '$types/matrix-sdk'; import type { IImageContent } from '$types/matrix/common'; import type { HTMLReactParserOptions } from 'html-react-parser'; -import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds'; +import { Avatar, Box, Chip, Header, Text, config } from 'folds'; import type { Opts as LinkifyOpts } from 'linkifyjs'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { @@ -59,6 +59,7 @@ import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUr import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import type { ResultItem } from './useMessageSearch'; +import { Icon, Icons } from '$app/icons'; type SearchResultGroupProps = { room: Room; diff --git a/src/app/features/message-search/SearchResultTimelineItem.tsx b/src/app/features/message-search/SearchResultTimelineItem.tsx index f35564daf..bd06c5109 100644 --- a/src/app/features/message-search/SearchResultTimelineItem.tsx +++ b/src/app/features/message-search/SearchResultTimelineItem.tsx @@ -4,7 +4,7 @@ import type { IEventWithRoomId, Room } from '$types/matrix-sdk'; import { JoinRule, RelationType, EventType } from '$types/matrix-sdk'; import type { IImageContent } from '$types/matrix/common'; import type { HTMLReactParserOptions } from 'html-react-parser'; -import { Avatar, Box, Chip, Icon, Icons, Text, config } from 'folds'; +import { Avatar, Box, Chip, Text, config } from 'folds'; import type { Opts as LinkifyOpts } from 'linkifyjs'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { @@ -59,6 +59,7 @@ import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUr import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import type { ResultItem } from './useMessageSearch'; +import { Icon, Icons } from '$app/icons'; type SearchResultTimelineItemProps = { room: Room; diff --git a/src/app/features/room-nav/RoomNavCategoryButton.tsx b/src/app/features/room-nav/RoomNavCategoryButton.tsx index 97f78d543..e5ba66924 100644 --- a/src/app/features/room-nav/RoomNavCategoryButton.tsx +++ b/src/app/features/room-nav/RoomNavCategoryButton.tsx @@ -1,6 +1,7 @@ -import { as, Chip, Icon, IconButton, Icons, Text } from 'folds'; +import { as, Chip, IconButton, Text } from 'folds'; import classNames from 'classnames'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; export const RoomNavCategoryButton = as<'button', { closed?: boolean }>( ({ className, closed, children, ...props }, ref) => { diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index 1c5d11f8f..39519b240 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -6,9 +6,7 @@ import type { RectCords } from 'folds'; import { Avatar, Box, - Icon, IconButton, - Icons, Text, Menu, MenuItem, @@ -79,6 +77,7 @@ import * as css from './styles.css'; import { useRoomLastMessage } from '$hooks/useRoomLastMessage'; import { RoomNavUser } from './RoomNavUser'; import { SidebarUnreadBadge } from '$components/sidebar'; +import { Icon, Icons } from '$app/icons'; /** * Reactively checks whether a room has unread messages. diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx index 488545b32..edfac812f 100644 --- a/src/app/features/room-nav/RoomNavUser.tsx +++ b/src/app/features/room-nav/RoomNavUser.tsx @@ -1,4 +1,4 @@ -import { Avatar, Box, Icon, Icons, Text } from 'folds'; +import { Avatar, Box, Text } from 'folds'; import type { MouseEventHandler } from 'react'; import { useAtomValue } from 'jotai'; import type { Room, CallMembership } from '$types/matrix-sdk'; @@ -12,6 +12,7 @@ import { useOpenUserRoomProfile } from '$state/hooks/userRoomProfile'; import { useSpaceOptionally } from '$hooks/useSpace'; import { nicknamesAtom } from '$state/nicknames'; import { useCallEmbed } from '$hooks/useCallEmbed'; +import { Icon, Icons } from '$app/icons'; type RoomNavUserProps = { room: Room; diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx index 97968637a..6250dbe88 100644 --- a/src/app/features/room-settings/RoomSettings.tsx +++ b/src/app/features/room-settings/RoomSettings.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import type { IconSrc } from 'folds'; -import { Avatar, Box, config, Icon, IconButton, Icons, MenuItem, Text } from 'folds'; + +import { Avatar, Box, config, IconButton, MenuItem, Text } from 'folds'; import { JoinRule } from '$types/matrix-sdk'; import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '$components/page'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; @@ -23,6 +23,8 @@ import { useSetting } from '$state/hooks/settings'; import { Permissions } from './permissions'; import { General } from './general'; import { RoomAbbreviations } from './abbreviations/RoomAbbreviations'; +import { Icon, Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; type RoomSettingsMenuItem = { page: RoomSettingsPage; diff --git a/src/app/features/room-settings/abbreviations/RoomAbbreviations.tsx b/src/app/features/room-settings/abbreviations/RoomAbbreviations.tsx index 913e6dbaf..1f13340a8 100644 --- a/src/app/features/room-settings/abbreviations/RoomAbbreviations.tsx +++ b/src/app/features/room-settings/abbreviations/RoomAbbreviations.tsx @@ -1,19 +1,7 @@ import type { FormEventHandler } from 'react'; import { useCallback, useMemo } from 'react'; import { useAtomValue } from 'jotai'; -import { - Box, - Button, - Chip, - Icon, - IconButton, - Icons, - Input, - Scroll, - Spinner, - Text, - config, -} from 'folds'; +import { Box, Button, Chip, IconButton, Input, Scroll, Spinner, Text, config } from 'folds'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -33,6 +21,7 @@ import { getAllParents, getStateEvent } from '$utils/room'; import { roomToParentsAtom } from '$state/room/roomToParents'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; import { CustomStateEvent } from '$types/matrix/room'; +import { Icon, Icons } from '$app/icons'; type AbbreviationsProps = { requestClose: () => void; diff --git a/src/app/features/room-settings/general/General.tsx b/src/app/features/room-settings/general/General.tsx index c4546b601..73a6c3a14 100644 --- a/src/app/features/room-settings/general/General.tsx +++ b/src/app/features/room-settings/general/General.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; import { Page, PageContent, PageHeader } from '$components/page'; import { usePowerLevels } from '$hooks/usePowerLevels'; import { useRoom } from '$hooks/useRoom'; @@ -14,6 +14,7 @@ import { } from '$features/common-settings/general'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { Icon, Icons } from '$app/icons'; type GeneralProps = { requestClose: () => void; diff --git a/src/app/features/room-settings/permissions/Permissions.tsx b/src/app/features/room-settings/permissions/Permissions.tsx index 7966b6eda..91b5654a9 100644 --- a/src/app/features/room-settings/permissions/Permissions.tsx +++ b/src/app/features/room-settings/permissions/Permissions.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; import { Page, PageContent, PageHeader } from '$components/page'; import { useRoom } from '$hooks/useRoom'; import { usePowerLevels } from '$hooks/usePowerLevels'; @@ -11,6 +11,7 @@ import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { usePermissionGroups } from './usePermissionItems'; import { EventType } from '$types/matrix-sdk'; import { CustomStateEvent } from '$types/matrix/room'; +import { Icon, Icons } from '$app/icons'; type PermissionsProps = { requestClose: () => void; diff --git a/src/app/features/room/CallChatView.tsx b/src/app/features/room/CallChatView.tsx index e73842f94..5431a2d0e 100644 --- a/src/app/features/room/CallChatView.tsx +++ b/src/app/features/room/CallChatView.tsx @@ -1,6 +1,6 @@ import { useSetAtom } from 'jotai'; import { useParams } from 'react-router-dom'; -import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds'; +import { Box, Text, TooltipProvider, Tooltip, IconButton, toRem } from 'folds'; import { Page, PageHeader } from '../../components/page'; import { callChatAtom } from '../../state/callEmbed'; import { RoomView } from './RoomView'; @@ -10,6 +10,7 @@ import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { mobileOrTablet } from '$utils/user-agent'; import { useState, useEffect } from 'react'; +import { Icon, Icons } from '$app/icons'; export function CallChatView() { const { eventId } = useParams(); diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index 9d11bd9f0..5b3a66902 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -7,9 +7,7 @@ import { Box, Chip, Header, - Icon, IconButton, - Icons, Input, MenuItem, PopOut, @@ -60,6 +58,7 @@ import * as css from './MembersDrawer.css'; import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer'; import { mobileOrTabletLayout } from '$utils/user-agent'; import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize'; +import { Icon, Icons } from '$app/icons'; type MemberDrawerHeaderProps = { room: Room; diff --git a/src/app/features/room/PollCreator.tsx b/src/app/features/room/PollCreator.tsx index 348b647be..fab4b8942 100644 --- a/src/app/features/room/PollCreator.tsx +++ b/src/app/features/room/PollCreator.tsx @@ -5,9 +5,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Input, Overlay, OverlayBackdrop, @@ -25,6 +23,7 @@ import { } from 'matrix-js-sdk/lib/@types/polls'; import type { Room } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; +import { Icon, Icons } from '$app/icons'; const MIN_ANSWERS = 2; const MAX_ANSWERS = 20; diff --git a/src/app/features/room/RoomCallButton.tsx b/src/app/features/room/RoomCallButton.tsx index 3c60e5935..4614d2141 100644 --- a/src/app/features/room/RoomCallButton.tsx +++ b/src/app/features/room/RoomCallButton.tsx @@ -1,10 +1,11 @@ -import { IconButton, Icon, Icons, TooltipProvider, Tooltip, Text } from 'folds'; +import { IconButton, TooltipProvider, Tooltip, Text } from 'folds'; import { useAtomValue } from 'jotai'; import type { Room, TimelineEvents } from '$types/matrix-sdk'; import { useCallStart, useCallJoined } from '$hooks/useCallEmbed'; import { callEmbedAtom } from '$state/callEmbed'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useCallPreferences } from '$state/hooks/callPreferences'; +import { Icon, Icons } from '$app/icons'; interface RoomCallButtonProps { room: Room; diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 9f1ac14f7..89da463f8 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -22,9 +22,7 @@ import { color, config, Dialog, - Icon, IconButton, - Icons, Menu, MenuItem, Overlay, @@ -169,6 +167,7 @@ import { AudioMessageRecorder } from './AudioMessageRecorder'; import { PollCreator } from './PollCreator'; import * as prefix from '$unstable/prefixes'; import { LocationDialog } from './location-modal'; +import { Icon, Icons } from '$app/icons'; // Returns the event ID of the most recent non-reaction/non-edit event in a thread, // falling back to the thread root if no replies exist yet. diff --git a/src/app/features/room/RoomInputTiptap.tsx b/src/app/features/room/RoomInputTiptap.tsx index efe5c1beb..932c39433 100644 --- a/src/app/features/room/RoomInputTiptap.tsx +++ b/src/app/features/room/RoomInputTiptap.tsx @@ -29,7 +29,7 @@ import { useCallback, useRef, useState } from 'react'; import type { Editor as TiptapEditorInstance } from '@tiptap/core'; import type { Room } from '$types/matrix-sdk'; import { MsgType } from '$types/matrix-sdk'; -import { Box, Icon, IconButton, Icons, Text, config, color } from 'folds'; +import { Box, IconButton, Text, config, color } from 'folds'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useSetting } from '$state/hooks/settings'; @@ -51,6 +51,7 @@ import { TiptapMentionAutocomplete } from './tiptap-autocomplete/TiptapMentionAu import { TiptapRoomMentionAutocomplete } from './tiptap-autocomplete/TiptapRoomMentionAutocomplete'; import { TiptapEmoticonAutocomplete } from './tiptap-autocomplete/TiptapEmoticonAutocomplete'; import { mobileOrTablet } from '$utils/user-agent'; +import { Icon, Icons } from '$app/icons'; // ─── Autocomplete detection ────────────────────────────────────────────────── diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 42b48bef7..b85c7b205 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -16,20 +16,7 @@ import classNames from 'classnames'; import type { VListHandle } from 'virtua'; import { VList } from 'virtua'; import type { ContainerColor } from 'folds'; -import { - as, - Box, - Chip, - Icon, - Icons, - Line, - Text, - Badge, - color, - config, - toRem, - Spinner, -} from 'folds'; +import { as, Box, Chip, Line, Text, Badge, color, config, toRem, Spinner } from 'folds'; import * as Sentry from '@sentry/react'; import { MessageBase, CompactPlaceholder, DefaultPlaceholder } from '$components/message'; import { RoomIntro } from '$components/room-intro'; @@ -93,6 +80,7 @@ import { } from '$hooks/timeline/useProcessedTimeline'; import { useTimelineEventRenderer } from '$hooks/timeline/useTimelineEventRenderer'; import * as css from './RoomTimeline.css'; +import { Icon, Icons } from '$app/icons'; const log = createLogger('RoomTimeline'); diff --git a/src/app/features/room/RoomViewFollowing.tsx b/src/app/features/room/RoomViewFollowing.tsx index 979ee6507..d978ccaa1 100644 --- a/src/app/features/room/RoomViewFollowing.tsx +++ b/src/app/features/room/RoomViewFollowing.tsx @@ -1,5 +1,5 @@ import { useAtomValue } from 'jotai'; -import { Box, Icon, Icons, Text, as, config } from 'folds'; +import { Box, Text, as, config } from 'folds'; import type { Room } from '$types/matrix-sdk'; import classNames from 'classnames'; import { useAtom } from 'jotai'; @@ -12,6 +12,7 @@ import { useRoomEventReaders } from '$hooks/useRoomEventReaders'; import { modalAtom, ModalType } from '$state/modal'; import { nicknamesAtom } from '$state/nicknames'; import * as css from './RoomViewFollowing.css'; +import { Icon, Icons } from '$app/icons'; export function RoomViewFollowingPlaceholder() { return
; diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx index 89396f1af..0c6e22320 100644 --- a/src/app/features/room/RoomViewHeader.tsx +++ b/src/app/features/room/RoomViewHeader.tsx @@ -11,8 +11,6 @@ import { OverlayCenter, OverlayBackdrop, IconButton, - Icon, - Icons, Tooltip, TooltipProvider, Menu, @@ -105,6 +103,7 @@ import * as css from './RoomViewHeader.css'; import { RoomCallButton } from './RoomCallButton'; import { CustomAccountDataEvent } from '$types/matrix/accountData'; import { useSelectedRooms } from '$state/hooks/roomList'; +import { Icon, Icons } from '$app/icons'; const log = createLogger('RoomViewHeader'); diff --git a/src/app/features/room/RoomViewTyping.tsx b/src/app/features/room/RoomViewTyping.tsx index 3d1120d52..cb6f0c163 100644 --- a/src/app/features/room/RoomViewTyping.tsx +++ b/src/app/features/room/RoomViewTyping.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, IconButton, Icons, Text, as } from 'folds'; +import { Box, IconButton, Text, as } from 'folds'; import type { Room } from '$types/matrix-sdk'; import classNames from 'classnames'; import { useSetAtom, useAtomValue } from 'jotai'; @@ -10,6 +10,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { useRoomTypingMember } from '$hooks/useRoomTypingMembers'; import { nicknamesAtom } from '$state/nicknames'; import * as css from './RoomViewTyping.css'; +import { Icon, Icons } from '$app/icons'; export type RoomViewTypingProps = { room: Room; diff --git a/src/app/features/room/ThreadBrowser.tsx b/src/app/features/room/ThreadBrowser.tsx index f8feaa70d..59f967d8b 100644 --- a/src/app/features/room/ThreadBrowser.tsx +++ b/src/app/features/room/ThreadBrowser.tsx @@ -3,9 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Box, Header, - Icon, IconButton, - Icons, Input, Scroll, Spinner, @@ -55,6 +53,7 @@ import * as css from './ThreadDrawer.css'; import { RenderMessageContent } from '$components/RenderMessageContent'; import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer'; import { mobileOrTablet } from '$utils/user-agent'; +import { Icon, Icons } from '$app/icons'; type ThreadPreviewProps = { room: Room; diff --git a/src/app/features/room/ThreadDrawer.tsx b/src/app/features/room/ThreadDrawer.tsx index c5ddc5f9a..0959c5d78 100644 --- a/src/app/features/room/ThreadDrawer.tsx +++ b/src/app/features/room/ThreadDrawer.tsx @@ -1,6 +1,6 @@ import type { MouseEventHandler } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { Box, Header, Icon, IconButton, Icons, Scroll, Spinner, Text, config, toRem } from 'folds'; +import { Box, Header, IconButton, Scroll, Spinner, Text, config, toRem } from 'folds'; import type { IEvent, Room } from '$types/matrix-sdk'; import { Direction, @@ -71,6 +71,7 @@ import * as css from './ThreadDrawer.css'; import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer'; import { mobileOrTablet } from '$utils/user-agent'; import { M_TEXT } from 'matrix-js-sdk'; +import { Icon, Icons } from '$app/icons'; /** * Resolve the list of reply events to show in the thread drawer. diff --git a/src/app/features/room/jump-to-time/JumpToTime.tsx b/src/app/features/room/jump-to-time/JumpToTime.tsx index 2f1318ed0..d0194205e 100644 --- a/src/app/features/room/jump-to-time/JumpToTime.tsx +++ b/src/app/features/room/jump-to-time/JumpToTime.tsx @@ -12,8 +12,6 @@ import { Box, Text, IconButton, - Icon, - Icons, color, Button, Spinner, @@ -33,6 +31,7 @@ import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '$utils import { DatePicker, TimePicker } from '$components/time-date'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { Icon, Icons } from '$app/icons'; type JumpToTimeProps = { onCancel: () => void; diff --git a/src/app/features/room/location-modal/LocationDialog.tsx b/src/app/features/room/location-modal/LocationDialog.tsx index 0e1683de2..c144640b5 100644 --- a/src/app/features/room/location-modal/LocationDialog.tsx +++ b/src/app/features/room/location-modal/LocationDialog.tsx @@ -9,8 +9,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Button, Input, Chip, @@ -30,6 +28,7 @@ import type { RoomMessageEventContent } from '$types/matrix-sdk'; import { settingsAtom } from '$state/settings'; import { useSetting } from '$state/hooks/settings'; import classNames from 'classnames'; +import { Icon, Icons } from '$app/icons'; export function filterLocationString(result: string) { // OSM format diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index c0b5f4528..01c3f29fa 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -3,9 +3,7 @@ import { Avatar, Box, Chip, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -89,6 +87,7 @@ import { convertBeeperFormatToOurPerMessageProfile } from '$hooks/usePerMessageP import { MessageEditor } from './MessageEditor'; import { MobileMessageMenu } from './MobileMessageMenu'; import * as css from './styles.css'; +import { Icon, Icons } from '$app/icons'; export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void; diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx index bc0566ad5..45349f46c 100644 --- a/src/app/features/room/message/MessageEditor.tsx +++ b/src/app/features/room/message/MessageEditor.tsx @@ -2,7 +2,7 @@ import type { KeyboardEventHandler, MouseEventHandler } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; import type { RectCords } from 'folds'; -import { Box, Chip, Icon, IconButton, Icons, PopOut, Spinner, Text, as, config } from 'folds'; +import { Box, Chip, IconButton, PopOut, Spinner, Text, as, config } from 'folds'; import { Editor, Transforms } from 'slate'; import { ReactEditor } from 'slate-react'; import type { @@ -67,6 +67,7 @@ import { readdAngleBracketsForHiddenPreviews, stripMarkdownEscapesForHiddenPreviews, } from './hiddenLinkPreviews'; +import { Icon, Icons } from '$app/icons'; type MessageEditorProps = { roomId: string; diff --git a/src/app/features/room/message/MobileMessageMenu.tsx b/src/app/features/room/message/MobileMessageMenu.tsx index b06494051..ce0805a4d 100644 --- a/src/app/features/room/message/MobileMessageMenu.tsx +++ b/src/app/features/room/message/MobileMessageMenu.tsx @@ -1,5 +1,5 @@ import { createPortal } from 'react-dom'; -import { Icon, Icons, MenuItem, Text } from 'folds'; +import { MenuItem, Text } from 'folds'; import * as messageCss from './styles.css'; import type { MouseEventHandler, ReactNode, TouchEvent as ReactTouchEvent } from 'react'; import { useEffect, useCallback, useRef, useState } from 'react'; @@ -29,6 +29,7 @@ import { useIsBookmarked, useBookmarkActions } from '$features/bookmarks/useBook import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import * as css from './MobileMessageMenu.css'; +import { Icon, Icons } from '$app/icons'; export type MobileMessageMenuProps = { room: Room; diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx index 19e5be0fa..4a9b478bf 100644 --- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx +++ b/src/app/features/room/reaction-viewer/ReactionViewer.tsx @@ -1,19 +1,6 @@ import { useCallback, useState } from 'react'; import classNames from 'classnames'; -import { - Avatar, - Box, - Header, - Icon, - IconButton, - Icons, - Line, - MenuItem, - Scroll, - Text, - as, - config, -} from 'folds'; +import { Avatar, Box, Header, IconButton, Line, MenuItem, Scroll, Text, as, config } from 'folds'; import type { MatrixEvent, Room, RoomMember, Relations } from '$types/matrix-sdk'; import { getMemberDisplayName } from '$utils/room'; import { eventWithShortcode, getMxIdLocalPart } from '$utils/matrix'; @@ -30,6 +17,7 @@ import { useOpenUserRoomProfile } from '$state/hooks/userRoomProfile'; import { useSpaceOptionally } from '$hooks/useSpace'; import { getMouseEventCords } from '$utils/dom'; import * as css from './ReactionViewer.css'; +import { Icon, Icons } from '$app/icons'; export type ReactionViewerProps = { room: Room; diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx index 19d7211fc..f74b2a97f 100644 --- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx +++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx @@ -9,9 +9,7 @@ import { color, config, Header, - Icon, IconButton, - Icons, Menu, Scroll, Spinner, @@ -98,6 +96,7 @@ import { CustomAccountDataEvent } from '$types/matrix/accountData'; import { EventType } from '$types/matrix-sdk'; import { M_POLL_START } from 'matrix-js-sdk'; import { PollEvent } from '../poll/PollEvent'; +import { Icon, Icons } from '$app/icons'; const log = createLogger('RoomPinMenu'); diff --git a/src/app/features/room/schedule-send/SchedulePickerDialog.tsx b/src/app/features/room/schedule-send/SchedulePickerDialog.tsx index f699e2567..d45af89b4 100644 --- a/src/app/features/room/schedule-send/SchedulePickerDialog.tsx +++ b/src/app/features/room/schedule-send/SchedulePickerDialog.tsx @@ -14,8 +14,6 @@ import { Box, Text, IconButton, - Icon, - Icons, color, Button, Chip, @@ -26,6 +24,7 @@ import { timeDayMonthYear, timeHourMinute, hoursToMs, daysToMs } from '$utils/ti import { DatePicker, TimePicker } from '$components/time-date'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { Icon, Icons } from '$app/icons'; type SchedulePickerDialogProps = { initialTime?: number; diff --git a/src/app/features/room/schedule-send/ScheduledMessagesList.tsx b/src/app/features/room/schedule-send/ScheduledMessagesList.tsx index 13f241d49..477c2c349 100644 --- a/src/app/features/room/schedule-send/ScheduledMessagesList.tsx +++ b/src/app/features/room/schedule-send/ScheduledMessagesList.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react'; import { useQuery, useQueryClient } from '@tanstack/react-query'; -import { Box, Text, Chip, Icon, Icons, IconButton } from 'folds'; +import { Box, Text, Chip, IconButton } from 'folds'; import type { Room } from '$types/matrix-sdk'; import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -15,6 +15,7 @@ import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { SchedulePickerDialog } from './SchedulePickerDialog'; import * as css from './ScheduledMessagesList.css'; +import { Icon, Icons } from '$app/icons'; type ScheduledMessagesListProps = { room: Room; diff --git a/src/app/features/room/tiptap-autocomplete/TiptapMentionAutocomplete.tsx b/src/app/features/room/tiptap-autocomplete/TiptapMentionAutocomplete.tsx index ae66d341f..31a9131e5 100644 --- a/src/app/features/room/tiptap-autocomplete/TiptapMentionAutocomplete.tsx +++ b/src/app/features/room/tiptap-autocomplete/TiptapMentionAutocomplete.tsx @@ -1,6 +1,6 @@ import type { KeyboardEvent as ReactKbEvent } from 'react'; import { useEffect } from 'react'; -import { Avatar, Icon, Icons, MenuItem, Text } from 'folds'; +import { Avatar, MenuItem, Text } from 'folds'; import type { Room, RoomMember } from '$types/matrix-sdk'; import { useRoomMembers } from '$hooks/useRoomMembers'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -16,6 +16,7 @@ import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { KnownMembership } from '$types/matrix-sdk'; import { TiptapAutocompleteMenu } from './TiptapAutocompleteMenu'; +import { Icon, Icons } from '$app/icons'; const SEARCH_OPTIONS: UseAsyncSearchOptions = { limit: 1000, matchOptions: { contain: true } }; const mxIdToName = (id: string) => getMxIdLocalPart(id) ?? id; diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx index 8a9627103..0b52001dd 100644 --- a/src/app/features/search/Search.tsx +++ b/src/app/features/search/Search.tsx @@ -3,9 +3,7 @@ import { Avatar, Box, config, - Icon, IconButton, - Icons, Input, Line, MenuItem, @@ -54,6 +52,7 @@ import { useSelectedSpace } from '$hooks/router/useSelectedSpace'; import { getMxIdServer } from '$utils/mxIdHelper'; import { getHomeSearchPath, getDirectSearchPath, getSpaceSearchPath } from '$pages/pathUtils'; import { useCachedMxcConverter } from '$hooks/useCachedMxcConverter'; +import { Icon, Icons } from '$app/icons'; enum SearchRoomType { Rooms = '#', diff --git a/src/app/features/settings/Persona/PerMessageProfileEditor.tsx b/src/app/features/settings/Persona/PerMessageProfileEditor.tsx index ee1c77462..11d55d892 100644 --- a/src/app/features/settings/Persona/PerMessageProfileEditor.tsx +++ b/src/app/features/settings/Persona/PerMessageProfileEditor.tsx @@ -1,5 +1,5 @@ import { SequenceCard } from '$components/sequence-card'; -import { Box, Button, Text, Avatar, config, Icon, IconButton, Icons, Input } from 'folds'; +import { Box, Button, Text, Avatar, config, IconButton, Input } from 'folds'; import type { MatrixClient } from '$types/matrix-sdk'; import { useCallback, useMemo, useState } from 'react'; import { mxcUrlToHttp } from '$utils/matrix'; @@ -17,6 +17,7 @@ import { import type { PronounSet } from '$utils/pronouns'; import { parsePronounsStringToPronounsSetArray } from '$utils/pronouns'; import { SequenceCardStyle } from '../styles.css'; +import { Icon, Icons } from '$app/icons'; /** * the props we use for the per-message profile editor, which is used to edit a per-message profile. This is used in the settings page when the user wants to edit a profile. diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx index de124da17..8f9149304 100644 --- a/src/app/features/settings/Settings.tsx +++ b/src/app/features/settings/Settings.tsx @@ -1,13 +1,11 @@ import { useMemo, useState, type ComponentType } from 'react'; -import type { IconSrc } from 'folds'; + import { Avatar, Box, Button, config, - Icon, IconButton, - Icons, MenuItem, Overlay, OverlayBackdrop, @@ -51,6 +49,8 @@ import { settingsHeader } from './styles.css'; import { useSettingsFocus } from './useSettingsFocus'; import { SettingsLinkProvider } from './SettingsLinkContext'; import { useSettingsLinkBaseUrl } from './useSettingsLinkBaseUrl'; +import { Icon, Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; export enum SettingsPages { GeneralPage, diff --git a/src/app/features/settings/SettingsSectionPage.tsx b/src/app/features/settings/SettingsSectionPage.tsx index 152b2e52f..fadb0943c 100644 --- a/src/app/features/settings/SettingsSectionPage.tsx +++ b/src/app/features/settings/SettingsSectionPage.tsx @@ -1,8 +1,9 @@ import type { ReactNode } from 'react'; -import { Box, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, IconButton, Text } from 'folds'; import { Page, PageHeader } from '$components/page'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { settingsHeader } from './styles.css'; +import { Icon, Icons } from '$app/icons'; type SettingsSectionPageProps = { title: ReactNode; diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx index c99d145bc..ba83ad019 100644 --- a/src/app/features/settings/about/About.tsx +++ b/src/app/features/settings/about/About.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Text, Icon, Icons, Scroll, Button, config, toRem, Spinner } from 'folds'; +import { Box, Text, Scroll, Button, config, toRem, Spinner } from 'folds'; import { PageContent } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -18,6 +18,7 @@ import { SequenceCardStyle } from '$features/settings/styles.css'; import { Method } from '$types/matrix-sdk'; import { useOpenBugReportModal } from '$state/hooks/bugReportModal'; import { SettingsSectionPage } from '../SettingsSectionPage'; +import { Icon, Icons } from '$app/icons'; type VersionResult = | { error: { message: string } } diff --git a/src/app/features/settings/account/BioEditor.tsx b/src/app/features/settings/account/BioEditor.tsx index 100d12a27..36c35ffb3 100644 --- a/src/app/features/settings/account/BioEditor.tsx +++ b/src/app/features/settings/account/BioEditor.tsx @@ -2,7 +2,7 @@ import type { KeyboardEventHandler } from 'react'; import { useCallback, useEffect, useState, useRef } from 'react'; import type { Room } from '$types/matrix-sdk'; import type { RectCords } from 'folds'; -import { Box, Chip, Icon, IconButton, Icons, PopOut, Spinner, Text, config } from 'folds'; +import { Box, Chip, IconButton, PopOut, Spinner, Text, config } from 'folds'; import { Editor, Transforms } from 'slate'; import { ReactEditor } from 'slate-react'; import { isKeyHotkey } from 'is-hotkey'; @@ -31,6 +31,7 @@ import { EmojiBoard } from '$components/emoji-board'; import { mobileOrTablet } from '$utils/user-agent'; import { SettingTile } from '$components/setting-tile'; import * as css from './BioEditor.css'; +import { Icon, Icons } from '$app/icons'; type BioEditorProps = { value?: string; diff --git a/src/app/features/settings/account/IgnoredUserList.tsx b/src/app/features/settings/account/IgnoredUserList.tsx index 53d114650..ff50ff660 100644 --- a/src/app/features/settings/account/IgnoredUserList.tsx +++ b/src/app/features/settings/account/IgnoredUserList.tsx @@ -1,6 +1,6 @@ import type { ChangeEventHandler, FormEventHandler } from 'react'; import { useCallback, useState } from 'react'; -import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds'; +import { Box, Button, Chip, IconButton, Input, Spinner, Text, config } from 'folds'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -9,6 +9,7 @@ import { isUserId } from '$utils/matrix'; import { useIgnoredUsers } from '$hooks/useIgnoredUsers'; import { useAlive } from '$hooks/useAlive'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { Icon, Icons } from '$app/icons'; function IgnoreUserInput({ userList }: { userList: string[] }) { const mx = useMatrixClient(); diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx index cfd13c3ab..edf3e11e2 100644 --- a/src/app/features/settings/account/NameColorEditor.tsx +++ b/src/app/features/settings/account/NameColorEditor.tsx @@ -1,8 +1,9 @@ import { useState, useEffect } from 'react'; -import { Box, Button, config, Text, Input, IconButton, Icon, Icons } from 'folds'; +import { Box, Button, config, Text, Input, IconButton } from 'folds'; import { HexColorPicker } from 'react-colorful'; import { SettingTile } from '$components/setting-tile'; import { HexColorPickerPopOut } from '$components/HexColorPickerPopOut'; +import { Icon, Icons } from '$app/icons'; type NameColorEditorProps = { title: string; diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index c4aa8576b..5794cd8bb 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -4,8 +4,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Input, Avatar, Button, @@ -54,6 +52,7 @@ import { NameColorEditor } from './NameColorEditor'; import { StatusEditor } from './StatusEditor'; import { AnimalCosmetics } from './AnimalCosmetics'; import * as prefix from '$unstable/prefixes'; +import { Icon, Icons } from '$app/icons'; type PronounSet = { summary: string; diff --git a/src/app/features/settings/account/StatusEditor.tsx b/src/app/features/settings/account/StatusEditor.tsx index 60eadf3f1..b55310411 100644 --- a/src/app/features/settings/account/StatusEditor.tsx +++ b/src/app/features/settings/account/StatusEditor.tsx @@ -1,7 +1,8 @@ import type { ChangeEventHandler, FormEventHandler } from 'react'; import { useEffect, useState } from 'react'; -import { Box, Text, Button, Input, IconButton, Icon, Icons, Spinner, config } from 'folds'; +import { Box, Text, Button, Input, IconButton, Spinner, config } from 'folds'; import { SettingTile } from '$components/setting-tile'; +import { Icon, Icons } from '$app/icons'; type StatusEditorProps = { current?: string; diff --git a/src/app/features/settings/account/TimezoneEditor.tsx b/src/app/features/settings/account/TimezoneEditor.tsx index 800dc72a2..5e069213f 100644 --- a/src/app/features/settings/account/TimezoneEditor.tsx +++ b/src/app/features/settings/account/TimezoneEditor.tsx @@ -1,7 +1,8 @@ import type { ChangeEvent } from 'react'; import { useMemo, useState, useEffect } from 'react'; -import { Box, IconButton, Button, Icon, Icons, Input, Text } from 'folds'; +import { Box, IconButton, Button, Input, Text } from 'folds'; import { SettingTile } from '$components/setting-tile'; +import { Icon, Icons } from '$app/icons'; interface IntlWithSupportedValues { supportedValuesOf(key: 'timeZone' | (string & {})): string[]; diff --git a/src/app/features/settings/cosmetics/Cosmetics.tsx b/src/app/features/settings/cosmetics/Cosmetics.tsx index bb938a855..056cb0a84 100644 --- a/src/app/features/settings/cosmetics/Cosmetics.tsx +++ b/src/app/features/settings/cosmetics/Cosmetics.tsx @@ -5,8 +5,6 @@ import { Box, Button, config, - Icon, - Icons, Input, Menu, MenuItem, @@ -29,6 +27,7 @@ import { SequenceCardStyle } from '$features/settings/styles.css'; import { SettingsSectionPage } from '../SettingsSectionPage'; import { Appearance } from './Themes'; import { LanguageSpecificPronouns } from './LanguageSpecificPronouns'; +import { Icon, Icons } from '$app/icons'; function PronounPillMaxCountInput({ disabled }: { disabled: boolean }) { const [maxCount, setMaxCount] = useSetting(settingsAtom, 'pronounPillMaxCount'); diff --git a/src/app/features/settings/cosmetics/ThemeCatalogOnboarding.tsx b/src/app/features/settings/cosmetics/ThemeCatalogOnboarding.tsx index 86efad2d6..873796272 100644 --- a/src/app/features/settings/cosmetics/ThemeCatalogOnboarding.tsx +++ b/src/app/features/settings/cosmetics/ThemeCatalogOnboarding.tsx @@ -6,9 +6,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -16,6 +14,7 @@ import { } from 'folds'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; type ThemeCatalogOnboardingProps = { open: boolean; diff --git a/src/app/features/settings/cosmetics/ThemeCatalogSettings.tsx b/src/app/features/settings/cosmetics/ThemeCatalogSettings.tsx index 3141e3193..2d9c1072b 100644 --- a/src/app/features/settings/cosmetics/ThemeCatalogSettings.tsx +++ b/src/app/features/settings/cosmetics/ThemeCatalogSettings.tsx @@ -6,9 +6,7 @@ import { Box, Button, Chip, - Icon, IconButton, - Icons, Input, Scroll, Spinner, @@ -48,6 +46,7 @@ import { type SableThemeContrast, } from '../../../theme/metadata'; import { previewUrlFromFullThemeUrl } from '../../../theme/previewUrls'; +import { Icon, Icons } from '$app/icons'; export type CatalogPreviewRow = ThemePair & { previewText: string; diff --git a/src/app/features/settings/cosmetics/ThemeImportModal.tsx b/src/app/features/settings/cosmetics/ThemeImportModal.tsx index 10c50e951..9a57b0b2b 100644 --- a/src/app/features/settings/cosmetics/ThemeImportModal.tsx +++ b/src/app/features/settings/cosmetics/ThemeImportModal.tsx @@ -6,9 +6,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Input, Overlay, OverlayBackdrop, @@ -34,6 +32,7 @@ import { } from '../../../theme/processThemeImport'; import { usePatchSettings } from './themeSettingsPatch'; +import { Icon, Icons } from '$app/icons'; type ThemeImportModalProps = { open: boolean; diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index 95d44793c..33b39765a 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -5,8 +5,6 @@ import { Button, Chip, config, - Icon, - Icons, Input, Menu, MenuItem, @@ -39,6 +37,7 @@ import { useShowRoomIcon } from '$hooks/useShowRoomIcon'; import type { PanelSizetItem } from '$hooks/usePanelSizes'; import { usePanelSizeItems } from '$hooks/usePanelSizes'; import { SelectShowPerRoomRoomIcon } from '$features/common-settings/appearance/Appearance'; +import { Icon, Icons } from '$app/icons'; const clampIncomingInlineImageHeight = (n: number) => Math.max(1, Math.min(4096, n)); diff --git a/src/app/features/settings/developer-tools/AccountData.tsx b/src/app/features/settings/developer-tools/AccountData.tsx index da2169189..4cc28e09c 100644 --- a/src/app/features/settings/developer-tools/AccountData.tsx +++ b/src/app/features/settings/developer-tools/AccountData.tsx @@ -1,11 +1,12 @@ import { useCallback, useState } from 'react'; -import { Box, Text, Icon, Icons, Button, MenuItem } from 'folds'; +import { Box, Text, Button, MenuItem } from 'folds'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useAccountDataCallback } from '$hooks/useAccountDataCallback'; import { CutoutCard } from '$components/cutout-card'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { Icon, Icons } from '$app/icons'; type AccountDataProps = { expand: boolean; diff --git a/src/app/features/settings/developer-tools/SyncDiagnostics.tsx b/src/app/features/settings/developer-tools/SyncDiagnostics.tsx index 7feff143c..45eec990a 100644 --- a/src/app/features/settings/developer-tools/SyncDiagnostics.tsx +++ b/src/app/features/settings/developer-tools/SyncDiagnostics.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { Box, Button, Icon, Icons, Text } from 'folds'; +import { Box, Button, Text } from 'folds'; import { SequenceCard } from '$components/sequence-card'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { getClientSyncDiagnostics } from '$client/initMatrix'; @@ -8,6 +8,7 @@ import { Direction, EventType, NotificationCountType, KnownMembership } from '$t import { SequenceCardStyle } from '$features/settings/styles.css'; import { getUnreadInfo, isNotificationEvent } from '$utils/room'; +import { Icon, Icons } from '$app/icons'; type RoomRenderingDiagnostics = { totalRooms: number; diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx index 1ae4e5afa..ecc15e743 100644 --- a/src/app/features/settings/devices/DeviceTile.tsx +++ b/src/app/features/settings/devices/DeviceTile.tsx @@ -4,8 +4,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Chip, Input, Button, @@ -30,6 +28,7 @@ import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { toSettingsFocusIdPart } from '$features/settings/settingsLink'; +import { Icon, Icons } from '$app/icons'; export function DeviceTilePlaceholder() { return ( diff --git a/src/app/features/settings/devices/LocalBackup.tsx b/src/app/features/settings/devices/LocalBackup.tsx index eea175899..374270dea 100644 --- a/src/app/features/settings/devices/LocalBackup.tsx +++ b/src/app/features/settings/devices/LocalBackup.tsx @@ -1,6 +1,6 @@ import type { FormEventHandler } from 'react'; import { useCallback, useEffect, useState } from 'react'; -import { Box, Button, color, Icon, Icons, Spinner, Text, toRem } from 'folds'; +import { Box, Button, color, Spinner, Text, toRem } from 'folds'; import FileSaver from 'file-saver'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -16,6 +16,7 @@ import { import { useAlive } from '$hooks/useAlive'; import { useFilePicker } from '$hooks/useFilePicker'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { Icon, Icons } from '$app/icons'; type LocalBackupError = Error | FriendlyError; diff --git a/src/app/features/settings/devices/Verification.tsx b/src/app/features/settings/devices/Verification.tsx index ab5c1914f..c26f4ca35 100644 --- a/src/app/features/settings/devices/Verification.tsx +++ b/src/app/features/settings/devices/Verification.tsx @@ -7,8 +7,6 @@ import { Button, Chip, config, - Icon, - Icons, Spinner, Text, Overlay, @@ -37,6 +35,7 @@ import { stopPropagation } from '$utils/keyboard'; import { useAuthMetadata } from '$hooks/useAuthMetadata'; import { withSearchParam } from '$pages/pathUtils'; import { useAccountManagementActions } from '$hooks/useAccountManagement'; +import { Icon, Icons } from '$app/icons'; type VerificationStatusBadgeProps = { verificationStatus: VerificationStatus; diff --git a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx index e02a145de..0c5701129 100644 --- a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx +++ b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx @@ -5,8 +5,6 @@ import { Box, Text, Button, - Icon, - Icons, IconButton, Avatar, AvatarImage, @@ -42,6 +40,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { stopPropagation } from '$utils/keyboard'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { CustomAccountDataEvent } from '$types/matrix/accountData'; +import { Icon, Icons } from '$app/icons'; function PackAvatarImage({ url }: { url: string }) { const resolved = useRenderableMediaUrl(url); diff --git a/src/app/features/settings/emojis-stickers/UserPack.tsx b/src/app/features/settings/emojis-stickers/UserPack.tsx index ca3cc052f..08e66b924 100644 --- a/src/app/features/settings/emojis-stickers/UserPack.tsx +++ b/src/app/features/settings/emojis-stickers/UserPack.tsx @@ -1,4 +1,4 @@ -import { Avatar, AvatarFallback, AvatarImage, Box, Button, Icon, Icons, Text } from 'folds'; +import { Avatar, AvatarFallback, AvatarImage, Box, Button, Text } from 'folds'; import { useUserImagePack } from '$hooks/useImagePacks'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -8,6 +8,7 @@ import { mxcUrlToHttp } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useRenderableMediaUrl } from '$hooks/useRenderableMediaUrl'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { Icon, Icons } from '$app/icons'; type UserPackProps = { onViewPack: (imagePack: ImagePack) => void; diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx index e53deedd4..2d88d9835 100644 --- a/src/app/features/settings/experimental/Experimental.tsx +++ b/src/app/features/settings/experimental/Experimental.tsx @@ -1,4 +1,4 @@ -import { Box, Text, Icon, Icons, Scroll, Switch } from 'folds'; +import { Box, Text, Scroll, Switch } from 'folds'; import { PageContent } from '$components/page'; import { InfoCard } from '$components/info-card'; import { settingsAtom } from '$state/settings'; @@ -15,6 +15,7 @@ import { SearchIndexToggle } from './SearchIndexToggle'; import { EditInInput } from './EditInInput'; import { MessageGrouping } from './MessageGrouping'; import { MSC4438MessageBookmarks } from './MSC4438MessageBookmarks'; +import { Icon, Icons } from '$app/icons'; function PersonaToggle() { const [showPersonaSetting, setShowPersonaSetting] = useSetting( diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index a05245192..7b52dc068 100644 --- a/src/app/features/settings/general/General.tsx +++ b/src/app/features/settings/general/General.tsx @@ -13,9 +13,7 @@ import { Button, config, Header, - Icon, IconButton, - Icons, Input, Menu, MenuItem, @@ -47,6 +45,7 @@ import { isKeyHotkey } from 'is-hotkey'; import { settingsSyncLastSyncedAtom, settingsSyncStatusAtom } from '$hooks/useSettingsSync'; import { exportSettingsAsJson, importSettingsFromJson } from '$utils/settingsSync'; import { SettingsSectionPage } from '../SettingsSectionPage'; +import { Icon, Icons } from '$app/icons'; type DateHintProps = { hasChanges: boolean; diff --git a/src/app/features/settings/notifications/DeregisterPushNotifications.tsx b/src/app/features/settings/notifications/DeregisterPushNotifications.tsx index 7655d2bae..188df5791 100644 --- a/src/app/features/settings/notifications/DeregisterPushNotifications.tsx +++ b/src/app/features/settings/notifications/DeregisterPushNotifications.tsx @@ -7,9 +7,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -24,6 +22,7 @@ import { settingsAtom } from '../../../state/settings'; import { pushSubscriptionAtom } from '../../../state/pushSubscription'; import { deRegisterAllPushers } from './PushNotifications'; import { SettingTile } from '../../../components/setting-tile'; +import { Icon, Icons } from '$app/icons'; type ConfirmDeregisterDialogProps = { onClose: () => void; diff --git a/src/app/features/settings/notifications/KeywordMessages.tsx b/src/app/features/settings/notifications/KeywordMessages.tsx index 80128d94e..fd2b15134 100644 --- a/src/app/features/settings/notifications/KeywordMessages.tsx +++ b/src/app/features/settings/notifications/KeywordMessages.tsx @@ -2,7 +2,7 @@ import type { ChangeEventHandler, FormEventHandler } from 'react'; import { useCallback, useMemo, useState } from 'react'; import type { IPushRule, IPushRules } from '$types/matrix-sdk'; import { PushRuleKind, EventType } from '$types/matrix-sdk'; -import { Box, Text, Badge, Button, Input, config, IconButton, Icons, Icon, Spinner } from 'folds'; +import { Box, Text, Badge, Button, Input, config, IconButton, Spinner } from 'folds'; import { useAccountData } from '$hooks/useAccountData'; import { SequenceCard } from '$components/sequence-card'; @@ -21,6 +21,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { NotificationLevelsHint } from './NotificationLevelsHint'; import { notificationModeSelectorOptions } from './notificationModeOptions'; +import { Icon, Icons } from '$app/icons'; const NOTIFY_MODE_OPS: NotificationModeOptions = { highlight: true, diff --git a/src/app/features/settings/notifications/NotificationLevelsHint.tsx b/src/app/features/settings/notifications/NotificationLevelsHint.tsx index 6c00f6b6e..ae018bb24 100644 --- a/src/app/features/settings/notifications/NotificationLevelsHint.tsx +++ b/src/app/features/settings/notifications/NotificationLevelsHint.tsx @@ -1,9 +1,10 @@ import type { MouseEventHandler } from 'react'; import { useState } from 'react'; import type { RectCords } from 'folds'; -import { Box, config, Header, Icon, IconButton, Icons, Menu, PopOut, Text } from 'folds'; +import { Box, config, Header, IconButton, Menu, PopOut, Text } from 'folds'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; export function NotificationLevelsHint() { const [anchor, setAnchor] = useState(); diff --git a/src/app/features/settings/notifications/SystemNotification.tsx b/src/app/features/settings/notifications/SystemNotification.tsx index 4e5c1a3d4..30df49011 100644 --- a/src/app/features/settings/notifications/SystemNotification.tsx +++ b/src/app/features/settings/notifications/SystemNotification.tsx @@ -7,9 +7,7 @@ import { Button, color, config, - Icon, IconButton, - Icons, Input, Menu, MenuItem, @@ -68,6 +66,7 @@ import { setUnifiedPushDistributorSelection, switchUnifiedPushDistributorSelection, } from './UnifiedPushTransport'; +import { Icon, Icons } from '$app/icons'; type BackgroundPushKind = NotificationTransportProvider; type BackgroundPushPlatform = NotificationTransportPlatform; diff --git a/src/app/features/space-nav/SpaceNavItem.tsx b/src/app/features/space-nav/SpaceNavItem.tsx index 2f1c69dcb..eff08bced 100644 --- a/src/app/features/space-nav/SpaceNavItem.tsx +++ b/src/app/features/space-nav/SpaceNavItem.tsx @@ -2,10 +2,11 @@ import type { MouseEventHandler } from 'react'; import { useState } from 'react'; import type { Room } from '$types/matrix-sdk'; import type { RectCords } from 'folds'; -import { Box, Icon, Icons, Text, config, Avatar } from 'folds'; +import { Box, Text, config, Avatar } from 'folds'; import { useNavigate } from 'react-router-dom'; import { NavButton, NavItem, NavItemContent } from '$components/nav'; import { useRoomName } from '$hooks/useRoomMeta'; +import { Icon, Icons } from '$app/icons'; type SpaceNavItemProps = { room: Room; diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx index 6479d6de6..fa2b2e8e1 100644 --- a/src/app/features/space-settings/SpaceSettings.tsx +++ b/src/app/features/space-settings/SpaceSettings.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import type { IconSrc } from 'folds'; -import { Avatar, Box, config, Icon, IconButton, Icons, MenuItem, Text } from 'folds'; + +import { Avatar, Box, config, IconButton, MenuItem, Text } from 'folds'; import { JoinRule } from '$types/matrix-sdk'; import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '$components/page'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; @@ -21,6 +21,8 @@ import { Appearance } from '$features/common-settings/appearance/Appearance'; import { RoomAbbreviations } from '$features/room-settings/abbreviations/RoomAbbreviations'; import { General } from './general'; import { Permissions } from './permissions'; +import { Icon, Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; type SpaceSettingsMenuItem = { page: SpaceSettingsPage; diff --git a/src/app/features/space-settings/general/General.tsx b/src/app/features/space-settings/general/General.tsx index 8cee28c69..e990a1fa0 100644 --- a/src/app/features/space-settings/general/General.tsx +++ b/src/app/features/space-settings/general/General.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; import { Page, PageContent, PageHeader } from '$components/page'; import { usePowerLevels } from '$hooks/usePowerLevels'; import { useRoom } from '$hooks/useRoom'; @@ -12,6 +12,7 @@ import { } from '$features/common-settings/general'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { Icon, Icons } from '$app/icons'; type GeneralProps = { requestClose: () => void; diff --git a/src/app/features/space-settings/permissions/Permissions.tsx b/src/app/features/space-settings/permissions/Permissions.tsx index 46bf0a9d0..057edd21d 100644 --- a/src/app/features/space-settings/permissions/Permissions.tsx +++ b/src/app/features/space-settings/permissions/Permissions.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; import { Page, PageContent, PageHeader } from '$components/page'; import { useRoom } from '$hooks/useRoom'; import { usePowerLevels } from '$hooks/usePowerLevels'; @@ -11,6 +11,7 @@ import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { usePermissionGroups } from './usePermissionItems'; import { EventType } from '$types/matrix-sdk'; import { CustomStateEvent } from '$types/matrix/room'; +import { Icon, Icons } from '$app/icons'; type PermissionsProps = { requestClose: () => void; diff --git a/src/app/features/widgets/IntegrationManager.tsx b/src/app/features/widgets/IntegrationManager.tsx index cd90c0463..83eb60995 100644 --- a/src/app/features/widgets/IntegrationManager.tsx +++ b/src/app/features/widgets/IntegrationManager.tsx @@ -2,9 +2,7 @@ import { useEffect, useRef, useState } from 'react'; import { Box, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -16,6 +14,7 @@ import type { Room } from '$types/matrix-sdk'; import { useIntegrationManager, buildIntegrationManagerUrl } from '$hooks/useIntegrationManager'; import * as css from './IntegrationManager.css'; +import { Icon, Icons } from '$app/icons'; interface IntegrationManagerProps { room: Room; diff --git a/src/app/features/widgets/WidgetsDrawer.tsx b/src/app/features/widgets/WidgetsDrawer.tsx index dc43bc884..d6c7dec16 100644 --- a/src/app/features/widgets/WidgetsDrawer.tsx +++ b/src/app/features/widgets/WidgetsDrawer.tsx @@ -3,9 +3,7 @@ import { useEffect, useState } from 'react'; import { Box, Header, - Icon, IconButton, - Icons, Input, MenuItem, Scroll, @@ -37,6 +35,7 @@ import { IntegrationManager } from './IntegrationManager'; import { CustomStateEvent } from '$types/matrix/room'; import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer'; import { mobileOrTablet } from '$utils/user-agent'; +import { Icon, Icons } from '$app/icons'; type WidgetsDrawerHeaderProps = { activeWidget: RoomWidget | null; diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index 880064892..2c0d9e57d 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -15,7 +15,7 @@ import { NotificationCountType, RoomEvent, ThreadEvent, EventType } from '$types import type { SessionMembershipData } from '$types/matrix-sdk'; import type { HTMLReactParserOptions } from 'html-react-parser'; import type { Opts as LinkifyOpts } from 'linkifyjs'; -import { Box, Chip, Avatar, Text, Icons, config, toRem, Icon } from 'folds'; +import { Box, Chip, Avatar, Text, config, toRem } from 'folds'; import type { MessageSpacing } from '$state/settings'; import { MessageLayout } from '$state/settings'; import { nicknamesAtom } from '$state/nicknames'; @@ -60,6 +60,7 @@ import { PollEvent } from '$features/room/poll/PollEvent'; import { M_POLL_START } from '$types/matrix-sdk'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; +import { Icon, Icons } from '$app/icons'; function DecoratedUser({ room, userId, userName }: DecoratedUserProps) { const { color, font } = useSableCosmetics(userId, room ?? ({} as Room)); diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx index d37fee3fc..16b966301 100644 --- a/src/app/hooks/useMemberEventParser.tsx +++ b/src/app/hooks/useMemberEventParser.tsx @@ -1,7 +1,7 @@ import type { MouseEventHandler, ReactNode } from 'react'; import { useCallback } from 'react'; -import type { IconSrc } from 'folds'; -import { Icons, Text } from 'folds'; + +import { Text } from 'folds'; import type { MatrixEvent, Room } from '$types/matrix-sdk'; import type { IMemberContent } from '$types/matrix/room'; @@ -11,6 +11,8 @@ import { useOpenUserRoomProfile } from '$state/hooks/userRoomProfile'; import { useSableCosmetics } from './useSableCosmetics'; import { useMatrixClient } from './useMatrixClient'; import { KnownMembership } from '$types/matrix-sdk'; +import { Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; type DecoratedUserProps = { roomId: string; diff --git a/src/app/hooks/useRoomsNotificationPreferences.ts b/src/app/hooks/useRoomsNotificationPreferences.ts index 61ec8e32f..4a1044fe6 100644 --- a/src/app/hooks/useRoomsNotificationPreferences.ts +++ b/src/app/hooks/useRoomsNotificationPreferences.ts @@ -1,8 +1,6 @@ import { createContext, useCallback, useContext, useMemo } from 'react'; import type { IPushRules, MatrixClient } from '$types/matrix-sdk'; import { ConditionKind, PushRuleKind, EventType } from '$types/matrix-sdk'; -import type { IconSrc } from 'folds'; -import { Icons } from 'folds'; import { isRoomId } from '$utils/matrix'; import { useAccountData } from './useAccountData'; @@ -13,6 +11,8 @@ import { } from './useNotificationMode'; import { useAsyncCallback } from './useAsyncCallback'; import { useMatrixClient } from './useMatrixClient'; +import { Icons } from '$app/icons'; +import type { IconSrc } from '$app/icons'; export type RoomsNotificationPreferences = { mute: Set; diff --git a/src/app/icons/index.tsx b/src/app/icons/index.tsx new file mode 100644 index 000000000..7d62311c0 --- /dev/null +++ b/src/app/icons/index.tsx @@ -0,0 +1,439 @@ +import { forwardRef } from 'react'; +import type { CSSProperties, SVGProps } from 'react'; +import classNames from 'classnames'; +import { + ArrowBendUpLeft, + ArrowBendUpRight, + ArrowClockwise, + ArrowDown, + ArrowLeft, + ArrowRight, + ArrowSquareOut, + ArrowUp, + At, + Bell, + BellRinging, + BellSlash, + Bookmark, + Buildings, + CaretDown, + CaretLeft, + CaretRight, + CaretUp, + ChatCenteredText, + ChatCircle, + ChatCircleDots, + ChatCircleText, + Check, + Checks, + Clock, + ClockCounterClockwise, + Code, + CodeBlock, + Coffee, + Compass, + DotsThree, + DotsThreeVertical, + DownloadSimple, + Envelope, + EnvelopeSimple, + Eye, + EyeSlash, + File, + Flag, + Funnel, + Gear, + Globe, + HardDrives, + Hash, + Headphones, + Heart, + House, + Image, + Info, + Leaf, + Lightbulb, + Link, + ListBullets, + ListNumbers, + Lock, + MagnifyingGlass, + MarkdownLogo, + Microphone, + MicrophoneSlash, + Minus, + Monitor, + PaperPlaneRight, + Paperclip, + Pause, + Peace, + PencilSimple, + Phone, + PhoneDisconnect, + Planet, + Play, + Plus, + PlusCircle, + Power, + Prohibit, + ProhibitInset, + PushPin, + Quotes, + Screencast, + Shield, + ShieldCheck, + SlidersHorizontal, + Smiley, + SmileySticker, + SoccerBall, + SortAscending, + SpeakerHigh, + SpeakerSlash, + SquaresFour, + Star, + Sticker, + Sun, + Terminal, + TextAa, + TextB, + TextHOne, + TextHThree, + TextHTwo, + TextItalic, + TextStrikethrough, + TextT, + TextUnderline, + Trash, + Tray, + User, + UserPlus, + Video, + VideoCamera, + VideoCameraSlash, + Warning, + X, +} from '@phosphor-icons/react'; +import type { Icon as PhosphorIcon, IconWeight } from '@phosphor-icons/react'; +import { config } from 'folds'; + +export type IconName = + | 'Home' + | 'User' + | 'UserPlus' + | 'Mail' + | 'MailPlus' + | 'Star' + | 'PlusCircle' + | 'Explore' + | 'Smile' + | 'SmilePlus' + | 'Leaf' + | 'Sticker' + | 'Delete' + | 'Phone' + | 'PhoneDown' + | 'Headphone' + | 'HeadphoneMute' + | 'Send' + | 'Bell' + | 'BellRing' + | 'BellPing' + | 'BellMute' + | 'Message' + | 'MessageUnread' + | 'Setting' + | 'Search' + | 'Heart' + | 'Play' + | 'Pause' + | 'Sun' + | 'Photo' + | 'Lock' + | 'Vlc' + | 'Flag' + | 'Ball' + | 'Bulb' + | 'Terminal' + | 'Pencil' + | 'Info' + | 'Shield' + | 'ShieldLock' + | 'ShieldUser' + | 'Cup' + | 'Pin' + | 'VolumeHigh' + | 'VolumeHighLock' + | 'VolumeHighGlobe' + | 'VolumeMute' + | 'File' + | 'Category' + | 'Peace' + | 'Eye' + | 'EyeBlind' + | 'Warning' + | 'Funnel' + | 'Bookmark' + | 'Inbox' + | 'Thread' + | 'ThreadPlus' + | 'ThreadUnread' + | 'ThreadReply' + | 'Monitor' + | 'ScreenShare' + | 'Server' + | 'Prohibited' + | 'NoEntry' + | 'Mic' + | 'MicMute' + | 'VideoCamera' + | 'VideoCameraMute' + | 'BlockQuote' + | 'Hash' + | 'HashLock' + | 'HashGlobe' + | 'HashSearch' + | 'HashPlus' + | 'Space' + | 'SpaceLock' + | 'SpaceGlobe' + | 'SpaceSearch' + | 'SpacePlus' + | 'ChevronRight' + | 'ChevronLeft' + | 'ChevronTop' + | 'ChevronBottom' + | 'Plus' + | 'Minus' + | 'Cross' + | 'VerticalDots' + | 'HorizontalDots' + | 'Check' + | 'CheckTwice' + | 'Download' + | 'External' + | 'Clock' + | 'RecentClock' + | 'Power' + | 'ReplyArrow' + | 'ArrowGoRight' + | 'ArrowGoRightPlus' + | 'ArrowGoRightCross' + | 'ArrowGoLeft' + | 'Markdown' + | 'Attachment' + | 'Alphabet' + | 'AlphabetUnderline' + | 'Text' + | 'Heading1' + | 'Heading2' + | 'Heading3' + | 'Bold' + | 'Italic' + | 'Underline' + | 'Strike' + | 'Link' + | 'Code' + | 'BlockCode' + | 'OrderList' + | 'UnorderList' + | 'Mention' + | 'Filter' + | 'Sort' + | 'ArrowUpDown' + | 'ArrowRight' + | 'ArrowLeft' + | 'ArrowTop' + | 'ArrowBottom' + | 'ArrowDropRight' + | 'ArrowDropLeft' + | 'ArrowDropTop' + | 'ArrowDropBottom' + | 'Reload' + | 'Globe'; + +export type IconSrc = PhosphorIcon; + +export const Icons = { + Home: House, + User, + UserPlus, + Mail: Envelope, + MailPlus: EnvelopeSimple, + Star, + PlusCircle, + Explore: Compass, + Smile: Smiley, + SmilePlus: SmileySticker, + Leaf, + Sticker, + Delete: Trash, + Phone, + PhoneDown: PhoneDisconnect, + Headphone: Headphones, + HeadphoneMute: Headphones, + Send: PaperPlaneRight, + Bell, + BellRing: BellRinging, + BellPing: BellRinging, + BellMute: BellSlash, + Message: ChatCircle, + MessageUnread: ChatCircleDots, + Setting: Gear, + Search: MagnifyingGlass, + Heart, + Play, + Pause, + Sun, + Photo: Image, + Lock, + Vlc: Video, + Flag, + Ball: SoccerBall, + Bulb: Lightbulb, + Terminal, + Pencil: PencilSimple, + Info, + Shield, + ShieldLock: ShieldCheck, + ShieldUser: ShieldCheck, + Cup: Coffee, + Pin: PushPin, + VolumeHigh: SpeakerHigh, + VolumeHighLock: SpeakerHigh, + VolumeHighGlobe: SpeakerHigh, + VolumeMute: SpeakerSlash, + File, + Category: SquaresFour, + Peace, + Eye, + EyeBlind: EyeSlash, + Warning, + Funnel, + Bookmark, + Inbox: Tray, + Thread: ChatCenteredText, + ThreadPlus: ChatCircleText, + ThreadUnread: ChatCircleDots, + ThreadReply: ChatCenteredText, + Monitor, + ScreenShare: Screencast, + Server: HardDrives, + Prohibited: Prohibit, + NoEntry: ProhibitInset, + Mic: Microphone, + MicMute: MicrophoneSlash, + VideoCamera, + VideoCameraMute: VideoCameraSlash, + BlockQuote: Quotes, + Hash, + HashLock: Hash, + HashGlobe: Hash, + HashSearch: Hash, + HashPlus: Hash, + Space: Planet, + SpaceLock: Planet, + SpaceGlobe: Globe, + SpaceSearch: Planet, + SpacePlus: Buildings, + ChevronRight: CaretRight, + ChevronLeft: CaretLeft, + ChevronTop: CaretUp, + ChevronBottom: CaretDown, + Plus, + Minus, + Cross: X, + VerticalDots: DotsThreeVertical, + HorizontalDots: DotsThree, + Check, + CheckTwice: Checks, + Download: DownloadSimple, + External: ArrowSquareOut, + Clock, + RecentClock: ClockCounterClockwise, + Power, + ReplyArrow: ArrowBendUpLeft, + ArrowGoRight: ArrowBendUpRight, + ArrowGoRightPlus: ArrowBendUpRight, + ArrowGoRightCross: ArrowBendUpRight, + ArrowGoLeft: ArrowBendUpLeft, + Markdown: MarkdownLogo, + Attachment: Paperclip, + Alphabet: TextAa, + AlphabetUnderline: TextAa, + Text: TextT, + Heading1: TextHOne, + Heading2: TextHTwo, + Heading3: TextHThree, + Bold: TextB, + Italic: TextItalic, + Underline: TextUnderline, + Strike: TextStrikethrough, + Link, + Code, + BlockCode: CodeBlock, + OrderList: ListNumbers, + UnorderList: ListBullets, + Mention: At, + Filter: SlidersHorizontal, + Sort: SortAscending, + ArrowUpDown: SlidersHorizontal, + ArrowRight, + ArrowLeft, + ArrowTop: ArrowUp, + ArrowBottom: ArrowDown, + ArrowDropRight: CaretRight, + ArrowDropLeft: CaretLeft, + ArrowDropTop: CaretUp, + ArrowDropBottom: CaretDown, + Reload: ArrowClockwise, + Globe, +} satisfies Record; + +type IconSize = '50' | '100' | '200' | '300' | '400' | '500' | '600' | 'Inherit'; + +const iconSize: Record = { + '50': config.size.X50, + '100': config.size.X100, + '200': config.size.X200, + '300': config.size.X300, + '400': config.size.X400, + '500': config.size.X500, + '600': config.size.X600, + Inherit: config.size.XInherit, +}; + +export type IconProps = Omit, 'src'> & { + size?: IconSize; + filled?: boolean; + src: IconSrc; +}; + +export const Icon = forwardRef( + ({ className, size = '400', filled = false, src: IconComponent, style, ...props }, ref) => { + const phosphorSize = iconSize[size]; + const iconStyle: CSSProperties = { + flexShrink: 0, + width: phosphorSize, + height: phosphorSize, + minWidth: phosphorSize, + fontSize: phosphorSize, + lineHeight: phosphorSize, + ...style, + }; + const weight: IconWeight = filled ? 'fill' : 'regular'; + + return ( + + ); + } +); + +Icon.displayName = 'Icon'; diff --git a/src/app/pages/auth/FiledError.tsx b/src/app/pages/auth/FiledError.tsx index eddd65b69..64bf4edb3 100644 --- a/src/app/pages/auth/FiledError.tsx +++ b/src/app/pages/auth/FiledError.tsx @@ -1,4 +1,5 @@ -import { Box, Icon, Icons, color, Text } from 'folds'; +import { Box, color, Text } from 'folds'; +import { Icon, Icons } from '$app/icons'; export function FieldError({ message }: { message: string }) { return ( diff --git a/src/app/pages/auth/ServerPicker.tsx b/src/app/pages/auth/ServerPicker.tsx index a9164dad8..66305b8f4 100644 --- a/src/app/pages/auth/ServerPicker.tsx +++ b/src/app/pages/auth/ServerPicker.tsx @@ -6,22 +6,12 @@ import type { } from 'react'; import { useEffect, useRef, useState } from 'react'; import type { RectCords } from 'folds'; -import { - Header, - Icon, - IconButton, - Icons, - Input, - Menu, - MenuItem, - PopOut, - Text, - config, -} from 'folds'; +import { Header, IconButton, Input, Menu, MenuItem, PopOut, Text, config } from 'folds'; import FocusTrap from 'focus-trap-react'; import { useDebounce } from '$hooks/useDebounce'; import { stopPropagation } from '$utils/keyboard'; +import { Icon, Icons } from '$app/icons'; export function ServerPicker({ server, diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx index ab5f2364e..852c34206 100644 --- a/src/app/pages/auth/login/PasswordLoginForm.tsx +++ b/src/app/pages/auth/login/PasswordLoginForm.tsx @@ -5,9 +5,7 @@ import { Box, Button, Header, - Icon, IconButton, - Icons, Input, Menu, Overlay, @@ -35,6 +33,7 @@ import { deviceDisplayName } from '$utils/user-agent'; import { getMxIdServer } from '$utils/mxIdHelper'; import type { CustomLoginResponse } from './loginUtil'; import { LoginError, factoryGetBaseUrl, login, useLoginComplete } from './loginUtil'; +import { Icon, Icons } from '$app/icons'; function UsernameHint({ server }: { server: string }) { const [anchor, setAnchor] = useState(); diff --git a/src/app/pages/auth/login/TokenLogin.tsx b/src/app/pages/auth/login/TokenLogin.tsx index 0a5c3320d..4d2767e1c 100644 --- a/src/app/pages/auth/login/TokenLogin.tsx +++ b/src/app/pages/auth/login/TokenLogin.tsx @@ -1,15 +1,4 @@ -import { - Box, - Icon, - Icons, - Overlay, - OverlayBackdrop, - OverlayCenter, - Spinner, - Text, - color, - config, -} from 'folds'; +import { Box, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, color, config } from 'folds'; import { useCallback, useEffect } from 'react'; import type { MatrixError } from '$types/matrix-sdk'; import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo'; @@ -17,6 +6,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { deviceDisplayName } from '$utils/user-agent'; import type { CustomLoginResponse } from './loginUtil'; import { LoginError, login, useLoginComplete } from './loginUtil'; +import { Icon, Icons } from '$app/icons'; function LoginTokenError({ message }: { message: string }) { return ( diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx index e7d89d4e4..a9b85a25d 100644 --- a/src/app/pages/client/ClientRoot.tsx +++ b/src/app/pages/client/ClientRoot.tsx @@ -4,9 +4,7 @@ import { Button, config, Dialog, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -66,6 +64,7 @@ import { SyncStatus } from './SyncStatus'; import { SpecVersions } from './SpecVersions'; import { AutoDiscovery } from './AutoDiscovery'; import { ContainerColor } from '$styles/ContainerColor.css'; +import { Icon, Icons } from '$app/icons'; const log = createLogger('ClientRoot'); diff --git a/src/app/pages/client/WelcomePage.tsx b/src/app/pages/client/WelcomePage.tsx index 85e202242..57c88765c 100644 --- a/src/app/pages/client/WelcomePage.tsx +++ b/src/app/pages/client/WelcomePage.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds'; +import { Box, Button, Text, config, toRem } from 'folds'; import { Page, PageHero, PageHeroSection } from '$components/page'; import LogoSVG from '$public/res/svg/logo.svg'; import { @@ -8,6 +8,7 @@ import { APP_SOURCE_URL, APP_SUPPORT_URL, } from '$app/config/brand'; +import { Icon, Icons } from '$app/icons'; export function WelcomePage() { return ( diff --git a/src/app/pages/client/bookmarks/BookmarksList.tsx b/src/app/pages/client/bookmarks/BookmarksList.tsx index d4293d5a6..37ca427ab 100644 --- a/src/app/pages/client/bookmarks/BookmarksList.tsx +++ b/src/app/pages/client/bookmarks/BookmarksList.tsx @@ -6,9 +6,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Input, Line, Overlay, @@ -55,6 +53,7 @@ import { useBookmarkReminders, useBookmarkReminderActions, } from '$features/bookmarks/useBookmarks'; +import { Icon, Icons } from '$app/icons'; const REMINDER_PRESETS = [ { label: '30 min', ms: 30 * 60 * 1000 }, diff --git a/src/app/pages/client/create/Create.tsx b/src/app/pages/client/create/Create.tsx index 4fb781838..10644355c 100644 --- a/src/app/pages/client/create/Create.tsx +++ b/src/app/pages/client/create/Create.tsx @@ -1,7 +1,8 @@ -import { Box, Icon, Icons, Scroll } from 'folds'; +import { Box, Scroll } from 'folds'; import { Page, PageContent, PageContentCenter, PageHero, PageHeroSection } from '$components/page'; import { CreateSpaceForm } from '$features/create-space'; import { useRoomNavigate } from '$hooks/useRoomNavigate'; +import { Icon, Icons } from '$app/icons'; export function Create() { const { navigateSpace } = useRoomNavigate(); diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx index 3ea4dba53..2f9db2120 100644 --- a/src/app/pages/client/direct/Direct.tsx +++ b/src/app/pages/client/direct/Direct.tsx @@ -6,9 +6,7 @@ import { Avatar, Box, Button, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -59,6 +57,7 @@ import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer'; import { mobileOrTabletLayout } from '$utils/user-agent'; import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize'; import { usePullToRefresh } from '$hooks/usePullToRefresh'; +import { Icon, Icons } from '$app/icons'; type DirectMenuProps = { requestClose: () => void; diff --git a/src/app/pages/client/direct/DirectCreate.tsx b/src/app/pages/client/direct/DirectCreate.tsx index 19b278bce..3172d8973 100644 --- a/src/app/pages/client/direct/DirectCreate.tsx +++ b/src/app/pages/client/direct/DirectCreate.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; -import { Box, Icon, IconButton, Icons, Scroll } from 'folds'; +import { Box, IconButton, Scroll } from 'folds'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { getDirectCreateSearchParams } from '$pages/pathSearchParam'; import { getDirectRoomPath } from '$pages/pathUtils'; @@ -17,6 +17,7 @@ import { import { BackRouteHandler } from '$components/BackRouteHandler'; import { CreateChat } from '$features/create-chat'; import { useDirectRooms } from './useDirectRooms'; +import { Icon, Icons } from '$app/icons'; export function DirectCreate() { const mx = useMatrixClient(); diff --git a/src/app/pages/client/direct/Search.tsx b/src/app/pages/client/direct/Search.tsx index bc6eb4620..2be02cc17 100644 --- a/src/app/pages/client/direct/Search.tsx +++ b/src/app/pages/client/direct/Search.tsx @@ -1,10 +1,11 @@ import { useRef } from 'react'; -import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds'; +import { Box, Text, Scroll, IconButton } from 'folds'; import { Page, PageContent, PageContentCenter, PageHeader } from '$components/page'; import { MessageSearch } from '$features/message-search'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; import { useDirectRooms } from './useDirectRooms'; +import { Icon, Icons } from '$app/icons'; export function DirectSearch() { const scrollRef = useRef(null); diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx index 0c1469584..523f8c68d 100644 --- a/src/app/pages/client/explore/Explore.tsx +++ b/src/app/pages/client/explore/Explore.tsx @@ -8,9 +8,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Input, Overlay, OverlayBackdrop, @@ -35,6 +33,7 @@ import { useSetting } from '$state/hooks/settings'; import { mobileOrTabletLayout } from '$utils/user-agent'; import { getMxIdServer } from '$utils/mxIdHelper'; import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize'; +import { Icon, Icons } from '$app/icons'; export function AddServer({ hideText }: { hideText?: boolean }) { const mx = useMatrixClient(); diff --git a/src/app/pages/client/explore/Featured.tsx b/src/app/pages/client/explore/Featured.tsx index f3dba3425..77628e020 100644 --- a/src/app/pages/client/explore/Featured.tsx +++ b/src/app/pages/client/explore/Featured.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; import { useAtomValue } from 'jotai'; import { useClientConfig } from '$hooks/useClientConfig'; import { RoomCard, RoomCardGrid } from '$components/room-card'; @@ -17,6 +17,7 @@ import { useRoomNavigate } from '$hooks/useRoomNavigate'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; import * as css from './style.css'; +import { Icon, Icons } from '$app/icons'; export function FeaturedRooms() { const { featuredCommunities } = useClientConfig(); diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx index 3233ea66c..2c5792b42 100644 --- a/src/app/pages/client/explore/Server.tsx +++ b/src/app/pages/client/explore/Server.tsx @@ -5,9 +5,7 @@ import { Box, Button, Chip, - Icon, IconButton, - Icons, Input, Line, Menu, @@ -38,6 +36,7 @@ import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; import { getMxIdServer } from '$utils/mxIdHelper'; import * as css from './style.css'; +import { Icon, Icons } from '$app/icons'; const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams => useMemo( diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx index 30dc6b52c..9b74af40b 100644 --- a/src/app/pages/client/home/CreateRoom.tsx +++ b/src/app/pages/client/home/CreateRoom.tsx @@ -1,4 +1,4 @@ -import { Box, Icon, Icons, Scroll, IconButton } from 'folds'; +import { Box, Scroll, IconButton } from 'folds'; import { Page, PageContent, @@ -11,6 +11,7 @@ import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; import { CreateRoomForm } from '$features/create-room'; import { useRoomNavigate } from '$hooks/useRoomNavigate'; +import { Icon, Icons } from '$app/icons'; export function HomeCreateRoom() { const screenSize = useScreenSizeContext(); diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index 8b5ad249f..d57929277 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -6,9 +6,7 @@ import { Avatar, Box, Button, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -67,6 +65,7 @@ import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer'; import { mobileOrTabletLayout } from '$utils/user-agent'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { usePullToRefresh } from '$hooks/usePullToRefresh'; +import { Icon, Icons } from '$app/icons'; type HomeMenuProps = { requestClose: () => void; diff --git a/src/app/pages/client/home/Search.tsx b/src/app/pages/client/home/Search.tsx index 0deca3e14..581d03d10 100644 --- a/src/app/pages/client/home/Search.tsx +++ b/src/app/pages/client/home/Search.tsx @@ -1,10 +1,11 @@ import { useRef } from 'react'; -import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds'; +import { Box, Text, Scroll, IconButton } from 'folds'; import { Page, PageContent, PageContentCenter, PageHeader } from '$components/page'; import { MessageSearch } from '$features/message-search'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; import { useHomeRooms } from './useHomeRooms'; +import { Icon, Icons } from '$app/icons'; export function HomeSearch() { const scrollRef = useRef(null); diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx index 993053e6a..0623bb2b9 100644 --- a/src/app/pages/client/inbox/Inbox.tsx +++ b/src/app/pages/client/inbox/Inbox.tsx @@ -1,4 +1,4 @@ -import { Avatar, Box, Icon, Icons, Text, toRem } from 'folds'; +import { Avatar, Box, Text, toRem } from 'folds'; import { useAtomValue } from 'jotai'; import { NavCategory, NavItem, NavItemContent, NavLink } from '$components/nav'; import { @@ -21,6 +21,7 @@ import { settingsAtom } from '$state/settings'; import { useEffect, useState } from 'react'; import { mobileOrTabletLayout } from '$utils/user-agent'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; +import { Icon, Icons } from '$app/icons'; function InvitesNavItem({ hideText }: { hideText?: boolean }) { const invitesSelected = useInboxInvitesSelected(); diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx index efb3f38fb..a79a23553 100644 --- a/src/app/pages/client/inbox/Invites.tsx +++ b/src/app/pages/client/inbox/Invites.tsx @@ -5,9 +5,7 @@ import { Box, Button, Chip, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -70,6 +68,7 @@ import { useReportRoomSupported } from '$hooks/useReportRoomSupported'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { EventType } from '$types/matrix-sdk'; +import { Icon, Icons } from '$app/icons'; const COMPACT_CARD_WIDTH = 548; diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx index d7e0c5ab6..f3c246257 100644 --- a/src/app/pages/client/inbox/Notifications.tsx +++ b/src/app/pages/client/inbox/Notifications.tsx @@ -1,18 +1,6 @@ import type { MouseEventHandler } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { - Avatar, - Box, - Chip, - Header, - Icon, - IconButton, - Icons, - Scroll, - Text, - config, - toRem, -} from 'folds'; +import { Avatar, Box, Chip, Header, IconButton, Scroll, Text, config, toRem } from 'folds'; import { useSearchParams } from 'react-router-dom'; import type { INotification, INotificationsResponse, IRoomEvent, Room } from '$types/matrix-sdk'; import type { IImageContent } from '$types/matrix/common'; @@ -94,6 +82,7 @@ import { } from '$hooks/useMemberPowerTag'; import { useRoomCreatorsTag } from '$hooks/useRoomCreatorsTag'; import { useRoomCreators } from '$hooks/useRoomCreators'; +import { Icon, Icons } from '$app/icons'; type RoomNotificationsGroup = { roomId: string; diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx index f3e2451be..effc0dd9d 100644 --- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx +++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx @@ -7,8 +7,6 @@ import { Button, Dialog, Header, - Icon, - Icons, Menu, MenuItem, PopOut, @@ -51,6 +49,7 @@ import type { Presence } from '$hooks/useUserPresence'; import { AvatarPresence, PresenceBadge } from '$components/presence'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom, presenceAutoIdledAtom } from '$state/settings'; +import { Icon, Icons } from '$app/icons'; const log = createLogger('AccountSwitcherTab'); const debugLog = createDebugLogger('AccountSwitcherTab'); diff --git a/src/app/pages/client/sidebar/BookmarksTab.tsx b/src/app/pages/client/sidebar/BookmarksTab.tsx index 20124af49..dd29d3410 100644 --- a/src/app/pages/client/sidebar/BookmarksTab.tsx +++ b/src/app/pages/client/sidebar/BookmarksTab.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { Icon, Icons } from 'folds'; + import { SidebarAvatar, SidebarItem, @@ -11,6 +11,7 @@ import { useInboxBookmarksSelected } from '$hooks/router/useInbox'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { useFiredReminderCount } from '$features/bookmarks/useBookmarks'; +import { Icon, Icons } from '$app/icons'; export function BookmarksTab() { const navigate = useNavigate(); diff --git a/src/app/pages/client/sidebar/CreateTab.tsx b/src/app/pages/client/sidebar/CreateTab.tsx index 850db9456..f16e2dfb7 100644 --- a/src/app/pages/client/sidebar/CreateTab.tsx +++ b/src/app/pages/client/sidebar/CreateTab.tsx @@ -1,7 +1,7 @@ import type { MouseEventHandler } from 'react'; import { useState } from 'react'; import type { RectCords } from 'folds'; -import { Box, config, Icon, Icons, Menu, PopOut, Text } from 'folds'; +import { Box, config, Menu, PopOut, Text } from 'folds'; import FocusTrap from 'focus-trap-react'; import { useNavigate } from 'react-router-dom'; import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar'; @@ -17,6 +17,7 @@ import { } from '$pages/pathUtils'; import { useCreateSelected } from '$hooks/router/useCreateSelected'; import { JoinAddressPrompt } from '$components/join-address-prompt'; +import { Icon, Icons } from '$app/icons'; export function CreateTab() { const createSelected = useCreateSelected(); diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx index ba9509e78..045ee6452 100644 --- a/src/app/pages/client/sidebar/DirectTab.tsx +++ b/src/app/pages/client/sidebar/DirectTab.tsx @@ -2,7 +2,7 @@ import type { MouseEventHandler } from 'react'; import { forwardRef, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import type { RectCords } from 'folds'; -import { Box, Icon, Icons, Menu, MenuItem, PopOut, Text, config, toRem } from 'folds'; +import { Box, Menu, MenuItem, PopOut, Text, config, toRem } from 'folds'; import FocusTrap from 'focus-trap-react'; import { useAtomValue } from 'jotai'; import { useDirects } from '$state/hooks/roomList'; @@ -27,6 +27,7 @@ import { settingsAtom } from '$state/settings'; import { useSetting } from '$state/hooks/settings'; import { useDirectRooms } from '$pages/client/direct/useDirectRooms'; import { useSidebarDirectRoomIds } from './useSidebarDirectRoomIds'; +import { Icon, Icons } from '$app/icons'; type DirectMenuProps = { requestClose: () => void; diff --git a/src/app/pages/client/sidebar/ExploreTab.tsx b/src/app/pages/client/sidebar/ExploreTab.tsx index e255aeac9..156562b78 100644 --- a/src/app/pages/client/sidebar/ExploreTab.tsx +++ b/src/app/pages/client/sidebar/ExploreTab.tsx @@ -1,4 +1,3 @@ -import { Icon, Icons } from 'folds'; import { useNavigate } from 'react-router-dom'; import { useAtomValue } from 'jotai'; import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar'; @@ -14,6 +13,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { useNavToActivePathAtom } from '$state/hooks/navToActivePath'; import { getMxIdServer } from '$utils/mxIdHelper'; +import { Icon, Icons } from '$app/icons'; export function ExploreTab() { const mx = useMatrixClient(); diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx index bc8c2e552..487a2ca63 100644 --- a/src/app/pages/client/sidebar/HomeTab.tsx +++ b/src/app/pages/client/sidebar/HomeTab.tsx @@ -2,7 +2,7 @@ import type { MouseEventHandler } from 'react'; import { forwardRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import type { RectCords } from 'folds'; -import { Box, Icon, Icons, Menu, MenuItem, PopOut, Text, config, toRem } from 'folds'; +import { Box, Menu, MenuItem, PopOut, Text, config, toRem } from 'folds'; import { useAtomValue } from 'jotai'; import FocusTrap from 'focus-trap-react'; import { useOrphanRooms } from '$state/hooks/roomList'; @@ -27,6 +27,7 @@ import { stopPropagation } from '$utils/keyboard'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { useHomeRooms } from '$pages/client/home/useHomeRooms'; +import { Icon, Icons } from '$app/icons'; type HomeMenuProps = { requestClose: () => void; diff --git a/src/app/pages/client/sidebar/InboxTab.tsx b/src/app/pages/client/sidebar/InboxTab.tsx index c632335b0..f454a7444 100644 --- a/src/app/pages/client/sidebar/InboxTab.tsx +++ b/src/app/pages/client/sidebar/InboxTab.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { Icon, Icons } from 'folds'; + import { useAtomValue } from 'jotai'; import { SidebarAvatar, @@ -17,6 +17,7 @@ import { import { useInboxSelected } from '$hooks/router/useInbox'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { useNavToActivePathAtom } from '$state/hooks/navToActivePath'; +import { Icon, Icons } from '$app/icons'; export function InboxTab() { const screenSize = useScreenSizeContext(); diff --git a/src/app/pages/client/sidebar/SearchTab.tsx b/src/app/pages/client/sidebar/SearchTab.tsx index c3ef38c59..ee5c30c2c 100644 --- a/src/app/pages/client/sidebar/SearchTab.tsx +++ b/src/app/pages/client/sidebar/SearchTab.tsx @@ -1,7 +1,7 @@ -import { Icon, Icons } from 'folds'; import { useAtom } from 'jotai'; import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar'; import { searchModalAtom } from '$state/searchModal'; +import { Icon, Icons } from '$app/icons'; export function SearchTab() { const [opened, setOpen] = useAtom(searchModalAtom); diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx index bc650705b..7cc3d4b31 100644 --- a/src/app/pages/client/sidebar/SpaceTabs.tsx +++ b/src/app/pages/client/sidebar/SpaceTabs.tsx @@ -7,9 +7,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Input, Line, Menu, @@ -95,6 +93,7 @@ import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { InviteUserPrompt } from '$components/invite-user-prompt'; import { CustomAccountDataEvent } from '$types/matrix/accountData'; +import { Icon, Icons } from '$app/icons'; type SpaceMenuProps = { room: Room; diff --git a/src/app/pages/client/sidebar/UnverifiedTab.tsx b/src/app/pages/client/sidebar/UnverifiedTab.tsx index e22e024ad..7a1106e4b 100644 --- a/src/app/pages/client/sidebar/UnverifiedTab.tsx +++ b/src/app/pages/client/sidebar/UnverifiedTab.tsx @@ -1,4 +1,4 @@ -import { Badge, color, Icon, Icons, Text } from 'folds'; +import { Badge, color, Text } from 'folds'; import { SidebarAvatar, SidebarItem, @@ -15,6 +15,7 @@ import { import { useCrossSigningActive } from '$hooks/useCrossSigning'; import { useOpenSettings } from '$features/settings'; import * as css from './UnverifiedTab.css'; +import { Icon, Icons } from '$app/icons'; function UnverifiedIndicator() { const mx = useMatrixClient(); diff --git a/src/app/pages/client/space/Search.tsx b/src/app/pages/client/space/Search.tsx index c2b4c15ce..e420692c6 100644 --- a/src/app/pages/client/space/Search.tsx +++ b/src/app/pages/client/space/Search.tsx @@ -1,5 +1,5 @@ import { useRef } from 'react'; -import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds'; +import { Box, Text, Scroll, IconButton } from 'folds'; import { useAtomValue } from 'jotai'; import { Page, PageContent, PageContentCenter, PageHeader } from '$components/page'; import { MessageSearch } from '$features/message-search'; @@ -11,6 +11,7 @@ import { roomToParentsAtom } from '$state/room/roomToParents'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { Icon, Icons } from '$app/icons'; export function SpaceSearch() { const mx = useMatrixClient(); diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx index 746e2d797..6048eee68 100644 --- a/src/app/pages/client/space/Space.tsx +++ b/src/app/pages/client/space/Space.tsx @@ -6,9 +6,7 @@ import { Avatar, Box, Button, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -97,6 +95,7 @@ import { ModalWide } from '$styles/Modal.css'; import { ImageViewer } from '$components/image-viewer'; import * as css from './styles.css'; import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze'; +import { Icon, Icons } from '$app/icons'; const debugLog = createDebugLogger('Space'); diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx index 861eaa494..32b4fb19e 100644 --- a/src/app/plugins/react-custom-html-parser.tsx +++ b/src/app/plugins/react-custom-html-parser.tsx @@ -4,7 +4,7 @@ import type { HTMLReactParserOptions } from 'html-react-parser'; import { attributesToProps, domToReact, Element, Text as DOMText } from 'html-react-parser'; import type { MatrixClient } from '$types/matrix-sdk'; import classNames from 'classnames'; -import { Box, Chip, config, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds'; +import { Box, Chip, config, Header, IconButton, Scroll, Text, toRem } from 'folds'; import type { IntermediateRepresentation, OptFn, Opts as LinkifyOpts } from 'linkifyjs'; import Linkify from 'linkify-react'; import type { ChildNode } from 'domhandler'; @@ -36,6 +36,7 @@ import { testMatrixTo, } from './matrix-to'; import { getHexcodeForEmoji, getShortcodeFor } from './emoji'; +import { Icon, Icons } from '$app/icons'; const EMOJI_REG_G = new RegExp(`${URL_NEG_LB}(${EMOJI_PATTERN})`, 'g'); diff --git a/src/app/utils/common.ts b/src/app/utils/common.ts index e3a19dc1f..88916a743 100644 --- a/src/app/utils/common.ts +++ b/src/app/utils/common.ts @@ -1,4 +1,4 @@ -import type { IconName, IconSrc } from 'folds'; +import type { IconName, IconSrc } from '$app/icons'; export const bytesToSize = (bytes: number): string => { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 63c148fda..3f3713603 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -1,5 +1,3 @@ -import type { IconName, IconSrc } from 'folds'; - import type { AccountDataEvents, EventTimelineSet, @@ -31,6 +29,7 @@ import { import type { IRoomCreateContent, RoomToParents, UnreadInfo } from '$types/matrix/room'; import { NotificationType } from '$types/matrix/room'; import * as Sentry from '@sentry/react'; +import type { IconName, IconSrc } from '$app/icons'; export const getStateEvent = ( room: Room, From f414eba34af9c6ef54f6deb989982093a6c9c87c Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 14 Jun 2026 11:18:45 -0400 Subject: [PATCH 2/2] Use distinct Phosphor compatibility icons --- src/app/icons/index.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/app/icons/index.tsx b/src/app/icons/index.tsx index 7d62311c0..7f0bb6421 100644 --- a/src/app/icons/index.tsx +++ b/src/app/icons/index.tsx @@ -13,6 +13,7 @@ import { At, Bell, BellRinging, + BellSimpleRinging, BellSlash, Bookmark, Buildings, @@ -82,6 +83,7 @@ import { Screencast, Shield, ShieldCheck, + ShieldWarning, SlidersHorizontal, Smiley, SmileySticker, @@ -112,6 +114,7 @@ import { VideoCameraSlash, Warning, X, + XCircle, } from '@phosphor-icons/react'; import type { Icon as PhosphorIcon, IconWeight } from '@phosphor-icons/react'; import { config } from 'folds'; @@ -270,11 +273,11 @@ export const Icons = { Phone, PhoneDown: PhoneDisconnect, Headphone: Headphones, - HeadphoneMute: Headphones, + HeadphoneMute: SpeakerSlash, Send: PaperPlaneRight, Bell, BellRing: BellRinging, - BellPing: BellRinging, + BellPing: BellSimpleRinging, BellMute: BellSlash, Message: ChatCircle, MessageUnread: ChatCircleDots, @@ -295,7 +298,7 @@ export const Icons = { Info, Shield, ShieldLock: ShieldCheck, - ShieldUser: ShieldCheck, + ShieldUser: ShieldWarning, Cup: Coffee, Pin: PushPin, VolumeHigh: SpeakerHigh, @@ -326,8 +329,8 @@ export const Icons = { VideoCameraMute: VideoCameraSlash, BlockQuote: Quotes, Hash, - HashLock: Hash, - HashGlobe: Hash, + HashLock: Lock, + HashGlobe: Globe, HashSearch: Hash, HashPlus: Hash, Space: Planet, @@ -353,8 +356,8 @@ export const Icons = { Power, ReplyArrow: ArrowBendUpLeft, ArrowGoRight: ArrowBendUpRight, - ArrowGoRightPlus: ArrowBendUpRight, - ArrowGoRightCross: ArrowBendUpRight, + ArrowGoRightPlus: PlusCircle, + ArrowGoRightCross: XCircle, ArrowGoLeft: ArrowBendUpLeft, Markdown: MarkdownLogo, Attachment: Paperclip,