From fbdd8605695581856ba18939f2d1dfe7f179490e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 13 Oct 2025 13:21:06 +0200
Subject: [PATCH] pl-fe: remove remaining uses of tabler icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/package.json                        |  1 -
 packages/pl-fe/src/components/ui/avatar.tsx        |  2 +-
 .../plugins/floating-block-type-toolbar-plugin.tsx |  4 ++--
 .../edit-profile/components/avatar-picker.tsx      |  2 +-
 .../src/features/event/components/event-header.tsx |  8 ++++----
 .../components/instance-restrictions.tsx           | 10 +++++-----
 .../components/restricted-instance.tsx             |  2 +-
 .../group/components/group-header-image.tsx        |  2 +-
 .../src/features/group/components/group-header.tsx |  2 +-
 .../group/components/group-member-list-item.tsx    |  2 +-
 .../ui/components/panels/profile-info-panel.tsx    |  2 +-
 packages/pl-fe/src/modals/event-map-modal.tsx      |  2 +-
 packages/pl-fe/src/pages/developers/developers.tsx | 14 +++++++-------
 packages/pl-fe/src/pages/statuses/status.tsx       |  2 +-
 pnpm-lock.yaml                                     |  8 --------
 15 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json
index 1436ecfb6..1123baa4d 100644
--- a/packages/pl-fe/package.json
+++ b/packages/pl-fe/package.json
@@ -62,7 +62,6 @@
     "@reduxjs/toolkit": "^2.5.0",
     "@sentry/browser": "^8.47.0",
     "@sentry/react": "^8.47.0",
-    "@tabler/icons": "^3.26.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
diff --git a/packages/pl-fe/src/components/ui/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
index 3fbd12486..31d9c675e 100644
--- a/packages/pl-fe/src/components/ui/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -104,7 +104,7 @@ const Avatar = (props: IAvatar) => {
       >
         <div className='absolute inset-0 z-[1] flex items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-900'>
           <Icon
-            src={require('@tabler/icons/outline/photo-off.svg')}
+            src={require('@phosphor-icons/core/regular/image-square.svg')}
             className='size-4 text-gray-500 dark:text-gray-700'
           />
         </div>
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
index d3014c34b..2daf1b4b0 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
@@ -71,7 +71,7 @@ const UploadButton: React.FC<IUploadButton> = ({ onSelectFile }) => {
     fileElement.current?.click();
   };
 
-  const src = require('@tabler/icons/outline/photo.svg');
+  const src = require('@phosphor-icons/core/regular/image.svg');
 
   return (
     <label>
@@ -205,7 +205,7 @@ const BlockTypeFloatingToolbar = ({
           <ToolbarButton
             onClick={createHorizontalLine}
             aria-label={intl.formatMessage(messages.createHorizontalLine)}
-            icon={require('@tabler/icons/outline/line-dashed.svg')}
+            icon={require('@phosphor-icons/core/regular/minus.svg')}
           />
         </>
       )}
diff --git a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
index 59944537f..3c91d375e 100644
--- a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
@@ -74,7 +74,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
         })}
       >
         <Icon
-          src={require('@tabler/icons/outline/camera-plus.svg')}
+          src={require('@phosphor-icons/core/regular/camera-plus.svg')}
           className='size-5 text-white'
         />
       </HStack>
diff --git a/packages/pl-fe/src/features/event/components/event-header.tsx b/packages/pl-fe/src/features/event/components/event-header.tsx
index 5c98187a0..f399fef36 100644
--- a/packages/pl-fe/src/features/event/components/event-header.tsx
+++ b/packages/pl-fe/src/features/event/components/event-header.tsx
@@ -223,12 +223,12 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       {
         text: intl.formatMessage(messages.exportIcs),
         action: handleExportClick,
-        icon: require('@tabler/icons/outline/calendar-plus.svg'),
+        icon: require('@phosphor-icons/core/regular/calendar-plus.svg'),
       },
       {
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@phosphor-icons/core/regular/link-simple.svg'),
+        icon: require('@phosphor-icons/core/regular/clipboard.svg'),
       },
     ];
 
@@ -439,7 +439,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/flag-3.svg')} />
+            <Icon src={require('@phosphor-icons/core/regular/flag-banner.svg')} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -460,7 +460,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
           {event.join_mode !== 'external' || event.participants_count > 0 && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/users.svg')} />
+              <Icon src={require('@phosphor-icons/core/regular/users.svg')} />
               <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
                 <span>
                   <FormattedMessage
diff --git a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
index 67542e2c2..897902ab6 100644
--- a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -73,7 +73,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (fullMediaRemoval) {
       items.push((
-        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='fullMediaRemoval' icon={require('@phosphor-icons/core/regular/image-broken.svg')}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,7 +82,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='partialMediaRemoval' icon={require('@phosphor-icons/core/regular/image-broken.svg')}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -113,7 +113,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.federation.reject === true) {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-x.svg')}>
+        <Restriction icon={require('@phosphor-icons/core/regular/x.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -124,7 +124,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
     } else if (hasRestrictions(remoteInstance)) {
       return (
         <>
-          <Restriction icon={require('@tabler/icons/outline/shield-lock.svg')}>
+          <Restriction icon={require('@phosphor-icons/core/regular/lock.svg')}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -137,7 +137,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       );
     } else {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-check.svg')}>
+        <Restriction icon={require('@phosphor-icons/core/regular/check.svg')}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
diff --git a/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx b/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx
index f709a9385..8b10dfedd 100644
--- a/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/packages/pl-fe/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -26,7 +26,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
   return (
     <div>
       <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
+        <Icon src={expanded ? require('@phosphor-icons/core/regular/caret-down.svg') : require('@phosphor-icons/core/regular/caret-right.svg')} />
         <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
           {remoteInstance.host}
         </div>
diff --git a/packages/pl-fe/src/features/group/components/group-header-image.tsx b/packages/pl-fe/src/features/group/components/group-header-image.tsx
index f01ddc5cc..a6197d60e 100644
--- a/packages/pl-fe/src/features/group/components/group-header-image.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header-image.tsx
@@ -30,7 +30,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
         className={clsx(className, 'flex items-center justify-center bg-gray-200 dark:bg-gray-800/30')}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={require('@phosphor-icons/core/regular/image-square.svg')}
           className='size-6 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/packages/pl-fe/src/features/group/components/group-header.tsx b/packages/pl-fe/src/features/group/components/group-header.tsx
index 051578008..829e90cbc 100644
--- a/packages/pl-fe/src/features/group/components/group-header.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header.tsx
@@ -116,7 +116,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         className='flex h-32 w-full items-center justify-center bg-gray-200 dark:bg-gray-800/30 md:rounded-t-xl lg:h-52'
       >
         {isHeaderMissing ? (
-          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
+          <Icon src={require('@phosphor-icons/core/regular/image-square.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
         ) : header}
       </div>
     );
diff --git a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx
index 5c6043cc1..cbc89bf63 100644
--- a/packages/pl-fe/src/features/group/components/group-member-list-item.tsx
+++ b/packages/pl-fe/src/features/group/components/group-member-list-item.tsx
@@ -152,7 +152,7 @@ const GroupMemberListItem = ({ member, group }: IGroupMemberListItem) => {
     ) {
       items.push({
         text: intl.formatMessage(messages.groupModKick, { name: account.username }),
-        icon: require('@tabler/icons/outline/user-minus.svg'),
+        icon: require('@phosphor-icons/core/regular/user-minus.svg'),
         action: handleKickFromGroup,
       });
 
diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx
index 840fd1f4f..9426d810b 100644
--- a/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx
@@ -212,7 +212,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
               title={intl.formatMessage(messages.pronouns, { pronouns: account.pronouns.join('/') })}
             >
               <Icon
-                src={require('@tabler/icons/outline/tags.svg')}
+                src={require('@phosphor-icons/core/regular/tag.svg')}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
diff --git a/packages/pl-fe/src/modals/event-map-modal.tsx b/packages/pl-fe/src/modals/event-map-modal.tsx
index 2a609eff6..6760e29be 100644
--- a/packages/pl-fe/src/modals/event-map-modal.tsx
+++ b/packages/pl-fe/src/modals/event-map-modal.tsx
@@ -66,7 +66,7 @@ const EventMapModal: React.FC<BaseModalProps & EventMapModalProps> = ({ onClose,
     >
       <Stack alignItems='center' space={6}>
         <div className='h-96 w-full' id='event-map' />
-        <Button onClick={onClickNavigate} icon={require('@phosphor-icons/core/regular/gps.svg')}>
+        <Button onClick={onClickNavigate} icon={require('@phosphor-icons/core/regular/compass.svg')}>
           <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
         </Button>
       </Stack>
diff --git a/packages/pl-fe/src/pages/developers/developers.tsx b/packages/pl-fe/src/pages/developers/developers.tsx
index 1a10ec6f5..d82f90bec 100644
--- a/packages/pl-fe/src/pages/developers/developers.tsx
+++ b/packages/pl-fe/src/pages/developers/developers.tsx
@@ -45,7 +45,7 @@ const DevelopersPage: React.FC = () => {
       <Column label={intl.formatMessage(messages.heading)}>
         <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
           <DashWidget to='/developers/apps/create'>
-            <SvgIcon src={require('@tabler/icons/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/squares-four.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -53,7 +53,7 @@ const DevelopersPage: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/settings_store'>
-            <SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/code.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -61,7 +61,7 @@ const DevelopersPage: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/timeline'>
-            <SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/list-bullets.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -69,7 +69,7 @@ const DevelopersPage: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error'>
-            <SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/bug.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -77,7 +77,7 @@ const DevelopersPage: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error/network'>
-            <SvgIcon src={require('@phosphor-icons/core/regular/arrows-clockwise.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/wifi-x.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -85,7 +85,7 @@ const DevelopersPage: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/sw'>
-            <SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/app-window.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@@ -93,7 +93,7 @@ const DevelopersPage: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={showToast}>
-            <SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={require('@phosphor-icons/core/regular/warning.svg')} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />
diff --git a/packages/pl-fe/src/pages/statuses/status.tsx b/packages/pl-fe/src/pages/statuses/status.tsx
index 14a0dc683..61bf930e4 100644
--- a/packages/pl-fe/src/pages/statuses/status.tsx
+++ b/packages/pl-fe/src/pages/statuses/status.tsx
@@ -84,7 +84,7 @@ const StatusPage: React.FC<IStatusDetails> = (props) => {
       {
         text: intl.formatMessage(messages.treeView),
         action: () => dispatch(changeSetting(['threads', 'displayMode'], 'tree')),
-        icon: require('@tabler/icons/outline/list-tree.svg'),
+        icon: require('@phosphor-icons/core/regular/tree-view.svg'),
         type: 'radio',
         checked: displayMode === 'tree',
       },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95a7da6a1..0c11de762 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -187,9 +187,6 @@ importers:
       '@sentry/react':
         specifier: ^8.47.0
         version: 8.55.0(react@18.3.1)
-      '@tabler/icons':
-        specifier: ^3.26.0
-        version: 3.34.1
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
         version: 0.4.2(tailwindcss@3.4.17)
@@ -2307,9 +2304,6 @@ packages:
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
-  '@tabler/icons@3.34.1':
-    resolution: {integrity: sha512-9gTnUvd7Fd/DmQgr3MKY+oJLa1RfNsQo8c/ir3TJAWghOuZXodbtbVp0QBY2DxWuuvrSZFys0HEbv1CoiI5y6A==}
-
   '@tailwindcss/aspect-ratio@0.4.2':
     resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
     peerDependencies:
@@ -8592,8 +8586,6 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
-  '@tabler/icons@3.34.1': {}
-
   '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.17)':
     dependencies:
       tailwindcss: 3.4.17