matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: replace some icons

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-04 21:17:41 +02:00
parent 0946eceebc
commit 67bf76b035
6 changed files with 100 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/pl-fe/package.json
View File

@ -55,6 +55,7 @@
"@lexical/selection": "^0.29.0", "@lexical/selection": "^0.29.0",
"@lexical/utils": "^0.29.0", "@lexical/utils": "^0.29.0",
"@mkljczk/url-purify": "^0.0.3", "@mkljczk/url-purify": "^0.0.3",
"@phosphor-icons/core": "^2.1.1",
"@reach/combobox": "^0.18.0", "@reach/combobox": "^0.18.0",
"@reach/rect": "^0.18.0", "@reach/rect": "^0.18.0",
"@reach/tabs": "^0.18.0", "@reach/tabs": "^0.18.0",

58
packages/pl-fe/src/components/dropdown-navigation.tsx
View File

@ -149,7 +149,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
}; };
const renderAccount = (account: AccountEntity) => ( const renderAccount = (account: AccountEntity) => (
<a href='#' onClick={handleSwitchAccount(account)} key={account.id}> <a className='⁂-dropdown-navigation__account-switcher__account' href='#' onClick={handleSwitchAccount(account)} key={account.id}>
<div> <div>
<Account account={account} showAccountHoverCard={false} withRelationship={false} withLinkToProfile={false} /> <Account account={account} showAccountHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</div> </div>
@ -222,7 +222,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
to={`/@${account.acct}`} to={`/@${account.acct}`}
icon={require('@tabler/icons/outline/user.svg')} icon={require('@phosphor-icons/core/regular/user.svg')}
text={intl.formatMessage(messages.profile)} text={intl.formatMessage(messages.profile)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -230,7 +230,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{(account.locked || followRequestsCount > 0) && ( {(account.locked || followRequestsCount > 0) && (
<DropdownNavigationLink <DropdownNavigationLink
to='/follow_requests' to='/follow_requests'
icon={require('@tabler/icons/outline/user-plus.svg')} icon={require('@phosphor-icons/core/regular/user-plus.svg')}
text={intl.formatMessage(messages.followRequests)} text={intl.formatMessage(messages.followRequests)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -239,7 +239,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{(interactionRequestsCount > 0) && ( {(interactionRequestsCount > 0) && (
<DropdownNavigationLink <DropdownNavigationLink
to='/interaction_requests' to='/interaction_requests'
icon={require('@tabler/icons/outline/flag-question.svg')} icon={require('@phosphor-icons/core/regular/heart-half.svg')}
text={intl.formatMessage(messages.interactionRequests)} text={intl.formatMessage(messages.interactionRequests)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -248,7 +248,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.conversations && ( {features.conversations && (
<DropdownNavigationLink <DropdownNavigationLink
to='/conversations' to='/conversations'
icon={require('@tabler/icons/outline/mail.svg')} icon={require('@phosphor-icons/core/regular/envelope-simple.svg')}
text={intl.formatMessage(messages.conversations)} text={intl.formatMessage(messages.conversations)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -257,7 +257,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.bookmarks && ( {features.bookmarks && (
<DropdownNavigationLink <DropdownNavigationLink
to='/bookmarks' to='/bookmarks'
icon={require('@tabler/icons/outline/bookmark.svg')} icon={require('@phosphor-icons/core/regular/bookmarks.svg')}
text={intl.formatMessage(messages.bookmarks)} text={intl.formatMessage(messages.bookmarks)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -266,7 +266,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.groups && ( {features.groups && (
<DropdownNavigationLink <DropdownNavigationLink
to='/groups' to='/groups'
icon={require('@tabler/icons/outline/circles.svg')} icon={require('@phosphor-icons/core/regular/users-three.svg')}
text={intl.formatMessage(messages.groups)} text={intl.formatMessage(messages.groups)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -275,7 +275,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.lists && ( {features.lists && (
<DropdownNavigationLink <DropdownNavigationLink
to='/lists' to='/lists'
icon={require('@tabler/icons/outline/list.svg')} icon={require('@phosphor-icons/core/regular/list-dashes.svg')}
text={intl.formatMessage(messages.lists)} text={intl.formatMessage(messages.lists)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -284,7 +284,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.circles && ( {features.circles && (
<DropdownNavigationLink <DropdownNavigationLink
to='/circles' to='/circles'
icon={require('@tabler/icons/outline/chart-circles.svg')} icon={require('@phosphor-icons/core/regular/circles-three.svg')}
text={intl.formatMessage(messages.circles)} text={intl.formatMessage(messages.circles)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -293,7 +293,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.events && ( {features.events && (
<DropdownNavigationLink <DropdownNavigationLink
to='/events' to='/events'
icon={require('@tabler/icons/outline/calendar-event.svg')} icon={require('@phosphor-icons/core/regular/calendar-dot.svg')}
text={intl.formatMessage(messages.events)} text={intl.formatMessage(messages.events)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -302,7 +302,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.profileDirectory && ( {features.profileDirectory && (
<DropdownNavigationLink <DropdownNavigationLink
to='/directory' to='/directory'
icon={require('@tabler/icons/outline/address-book.svg')} icon={require('@phosphor-icons/core/regular/address-book.svg')}
text={intl.formatMessage(messages.profileDirectory)} text={intl.formatMessage(messages.profileDirectory)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -311,7 +311,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{scheduledStatusCount > 0 && ( {scheduledStatusCount > 0 && (
<DropdownNavigationLink <DropdownNavigationLink
to='/scheduled_statuses' to='/scheduled_statuses'
icon={require('@tabler/icons/outline/calendar-stats.svg')} icon={require('@phosphor-icons/core/regular/hourglass.svg')}
text={intl.formatMessage(messages.scheduledStatuses)} text={intl.formatMessage(messages.scheduledStatuses)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -320,7 +320,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{draftCount > 0 && ( {draftCount > 0 && (
<DropdownNavigationLink <DropdownNavigationLink
to='/draft_statuses' to='/draft_statuses'
icon={require('@tabler/icons/outline/notes.svg')} icon={require('@phosphor-icons/core/regular/pencil-simple.svg')}
text={intl.formatMessage(messages.drafts)} text={intl.formatMessage(messages.drafts)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -331,7 +331,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
to='/timeline/local' to='/timeline/local'
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')} icon={require('@phosphor-icons/core/regular/planet.svg')}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />} text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -339,7 +339,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.bubbleTimeline && ( {features.bubbleTimeline && (
<DropdownNavigationLink <DropdownNavigationLink
to='/timeline/bubble' to='/timeline/bubble'
icon={require('@tabler/icons/outline/chart-bubble.svg')} icon={require('@phosphor-icons/core/regular/graph.svg')}
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />} text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -348,7 +348,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.federating && ( {features.federating && (
<DropdownNavigationLink <DropdownNavigationLink
to='/timeline/fediverse' to='/timeline/fediverse'
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')} icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />} text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -359,7 +359,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
to='/settings/preferences' to='/settings/preferences'
icon={require('@tabler/icons/outline/settings.svg')} icon={require('@phosphor-icons/core/regular/sliders-horizontal.svg')}
text={intl.formatMessage(messages.preferences)} text={intl.formatMessage(messages.preferences)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -367,7 +367,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.followedHashtagsList && ( {features.followedHashtagsList && (
<DropdownNavigationLink <DropdownNavigationLink
to='/followed_tags' to='/followed_tags'
icon={require('@tabler/icons/outline/hash.svg')} icon={require('@phosphor-icons/core/regular/hash.svg')}
text={intl.formatMessage(messages.followedTags)} text={intl.formatMessage(messages.followedTags)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -376,7 +376,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{(account.is_admin || account.is_moderator) && ( {(account.is_admin || account.is_moderator) && (
<DropdownNavigationLink <DropdownNavigationLink
to='/admin' to='/admin'
icon={require('@tabler/icons/outline/dashboard.svg')} icon={require('@phosphor-icons/core/regular/gauge.svg')}
text={intl.formatMessage(messages.dashboard)} text={intl.formatMessage(messages.dashboard)}
onClick={closeSidebar} onClick={closeSidebar}
// count={dashboardCount} WIP // count={dashboardCount} WIP
@ -387,7 +387,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
to='/logout' to='/logout'
icon={require('@tabler/icons/outline/logout.svg')} icon={require('@phosphor-icons/core/regular/sign-out.svg')}
text={intl.formatMessage(messages.logout)} text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut} onClick={onClickLogOut}
/> />
@ -396,7 +396,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
href={sourceCode.url} href={sourceCode.url}
icon={require('@tabler/icons/outline/code.svg')} icon={require('@phosphor-icons/core/regular/code.svg')}
text={intl.formatMessage(messages.sourceCode)} text={intl.formatMessage(messages.sourceCode)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -414,7 +414,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
</Text> </Text>
<Icon <Icon
src={require('@tabler/icons/outline/chevron-down.svg')} src={require('@phosphor-icons/core/regular/caret-down.svg')}
/> />
</button> </button>
@ -423,7 +423,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{otherAccounts.map(account => renderAccount(account))} {otherAccounts.map(account => renderAccount(account))}
<NavLink className='⁂-dropdown-navigation__account-switcher__add' to='/login/add' onClick={handleClose}> <NavLink className='⁂-dropdown-navigation__account-switcher__add' to='/login/add' onClick={handleClose}>
<Icon src={require('@tabler/icons/outline/plus.svg')} /> <Icon src={require('@phosphor-icons/core/regular/plus.svg')} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text> <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink> </NavLink>
</div> </div>
@ -436,7 +436,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.publicTimeline && !restrictUnauth.timelines.local && <> {features.publicTimeline && !restrictUnauth.timelines.local && <>
<DropdownNavigationLink <DropdownNavigationLink
to='/timeline/local' to='/timeline/local'
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')} icon={require('@phosphor-icons/core/regular/planet.svg')}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />} text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -444,7 +444,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.bubbleTimeline && !restrictUnauth.timelines.bubble && ( {features.bubbleTimeline && !restrictUnauth.timelines.bubble && (
<DropdownNavigationLink <DropdownNavigationLink
to='/timeline/bubble' to='/timeline/bubble'
icon={require('@tabler/icons/outline/chart-bubble.svg')} icon={require('@phosphor-icons/core/regular/graph.svg')}
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />} text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -453,7 +453,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{features.federating && !restrictUnauth.timelines.federated && ( {features.federating && !restrictUnauth.timelines.federated && (
<DropdownNavigationLink <DropdownNavigationLink
to='/timeline/fediverse' to='/timeline/fediverse'
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')} icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />} text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -464,7 +464,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
to='/login' to='/login'
icon={require('@tabler/icons/outline/login.svg')} icon={require('@phosphor-icons/core/regular/sign-in.svg')}
text={intl.formatMessage(messages.login)} text={intl.formatMessage(messages.login)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -472,7 +472,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
{isOpen && ( {isOpen && (
<DropdownNavigationLink <DropdownNavigationLink
to='/signup' to='/signup'
icon={require('@tabler/icons/outline/user-plus.svg')} icon={require('@phosphor-icons/core/regular/user-plus.svg')}
text={intl.formatMessage(messages.register)} text={intl.formatMessage(messages.register)}
onClick={closeSidebar} onClick={closeSidebar}
/> />
@ -482,7 +482,7 @@ const DropdownNavigation: React.FC = React.memo((): JSX.Element | null => {
<DropdownNavigationLink <DropdownNavigationLink
href={sourceCode.url} href={sourceCode.url}
icon={require('@tabler/icons/outline/code.svg')} icon={require('@phosphor-icons/core/regular/code.svg')}
text={intl.formatMessage(messages.sourceCode)} text={intl.formatMessage(messages.sourceCode)}
onClick={closeSidebar} onClick={closeSidebar}
/> />

82
packages/pl-fe/src/components/sidebar-navigation.tsx
View File

@ -86,7 +86,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/conversations', to: '/conversations',
text: intl.formatMessage(messages.conversations), text: intl.formatMessage(messages.conversations),
icon: require('@tabler/icons/outline/mail.svg'), icon: require('@phosphor-icons/core/regular/envelope-simple.svg'),
}); });
} }
@ -94,7 +94,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/follow_requests', to: '/follow_requests',
text: intl.formatMessage(messages.followRequests), text: intl.formatMessage(messages.followRequests),
icon: require('@tabler/icons/outline/user-plus.svg'), icon: require('@phosphor-icons/core/regular/user-plus.svg'),
count: followRequestsCount, count: followRequestsCount,
}); });
} }
@ -103,7 +103,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/interaction_requests', to: '/interaction_requests',
text: intl.formatMessage(messages.interactionRequests), text: intl.formatMessage(messages.interactionRequests),
icon: require('@tabler/icons/outline/flag-question.svg'), icon: require('@phosphor-icons/core/regular/heart-half.svg'),
count: interactionRequestsCount, count: interactionRequestsCount,
}); });
} }
@ -112,7 +112,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/bookmarks', to: '/bookmarks',
text: intl.formatMessage(messages.bookmarks), text: intl.formatMessage(messages.bookmarks),
icon: require('@tabler/icons/outline/bookmark.svg'), icon: require('@phosphor-icons/core/regular/bookmarks.svg'),
}); });
} }
@ -120,7 +120,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/lists', to: '/lists',
text: intl.formatMessage(messages.lists), text: intl.formatMessage(messages.lists),
icon: require('@tabler/icons/outline/list.svg'), icon: require('@phosphor-icons/core/regular/list-dashes.svg'),
}); });
} }
@ -128,7 +128,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/circles', to: '/circles',
text: intl.formatMessage(messages.circles), text: intl.formatMessage(messages.circles),
icon: require('@tabler/icons/outline/chart-circles.svg'), icon: require('@phosphor-icons/core/regular/circles-three.svg'),
}); });
} }
@ -136,7 +136,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/events', to: '/events',
text: intl.formatMessage(messages.events), text: intl.formatMessage(messages.events),
icon: require('@tabler/icons/outline/calendar-event.svg'), icon: require('@phosphor-icons/core/regular/calendar-dot.svg'),
}); });
} }
@ -144,7 +144,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/directory', to: '/directory',
text: intl.formatMessage(messages.profileDirectory), text: intl.formatMessage(messages.profileDirectory),
icon: require('@tabler/icons/outline/address-book.svg'), icon: require('@phosphor-icons/core/regular/address-book.svg'),
}); });
} }
@ -152,14 +152,14 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push({ menu.push({
to: '/followed_tags', to: '/followed_tags',
text: intl.formatMessage(messages.followedTags), text: intl.formatMessage(messages.followedTags),
icon: require('@tabler/icons/outline/hash.svg'), icon: require('@phosphor-icons/core/regular/hash.svg'),
}); });
} }
if (scheduledStatusCount > 0) { if (scheduledStatusCount > 0) {
menu.push({ menu.push({
to: '/scheduled_statuses', to: '/scheduled_statuses',
icon: require('@tabler/icons/outline/calendar-stats.svg'), icon: require('@phosphor-icons/core/regular/hourglass.svg'),
text: intl.formatMessage(messages.scheduledStatuses), text: intl.formatMessage(messages.scheduledStatuses),
count: scheduledStatusCount, count: scheduledStatusCount,
}); });
@ -168,7 +168,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
if (draftCount > 0) { if (draftCount > 0) {
menu.push({ menu.push({
to: '/draft_statuses', to: '/draft_statuses',
icon: require('@tabler/icons/outline/notes.svg'), icon: require('@phosphor-icons/core/regular/pencil-simple.svg'),
text: intl.formatMessage(messages.drafts), text: intl.formatMessage(messages.drafts),
count: draftCount, count: draftCount,
}); });
@ -177,18 +177,18 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
menu.push(null); menu.push(null);
menu.push({ menu.push({
icon: require('@tabler/icons/outline/help-circle.svg'), icon: require('@phosphor-icons/core/regular/question.svg'),
text: intl.formatMessage(messages.help), text: intl.formatMessage(messages.help),
items: [ items: [
{ {
action: () => openModal('HOTKEYS'), action: () => openModal('HOTKEYS'),
icon: require('@tabler/icons/outline/keyboard.svg'), icon: require('@phosphor-icons/core/regular/keyboard.svg'),
text: intl.formatMessage(messages.keyboardShortcuts), text: intl.formatMessage(messages.keyboardShortcuts),
}, },
{ {
href: sourceCode.url, href: sourceCode.url,
target: '_blank', target: '_blank',
icon: require('@tabler/icons/outline/code.svg'), icon: require('@phosphor-icons/core/regular/code.svg'),
text: intl.formatMessage(messages.sourceCode), text: intl.formatMessage(messages.sourceCode),
}, },
], ],
@ -218,7 +218,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
) : ( ) : (
<Account <Account
account={account} account={account}
action={<Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' />} action={<Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' />}
disabled disabled
withLinkToProfile={false} withLinkToProfile={false}
/> />
@ -236,15 +236,16 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
<Stack space={1.5}> <Stack space={1.5}>
<SidebarNavigationLink <SidebarNavigationLink
to='/' to='/'
icon={require('@tabler/icons/outline/home.svg')} icon={require('@phosphor-icons/core/regular/house.svg')}
activeIcon={require('@tabler/icons/filled/home.svg')} activeIcon={require('@phosphor-icons/core/fill/house-fill.svg')}
text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />} text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
shrink={shrink} shrink={shrink}
/> />
<SidebarNavigationLink <SidebarNavigationLink
to='/search' to='/search'
icon={require('@tabler/icons/outline/search.svg')} icon={require('@phosphor-icons/core/regular/magnifying-glass.svg')}
activeIcon={require('@phosphor-icons/core/fill/magnifying-glass-fill.svg')}
text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />} text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
shrink={shrink} shrink={shrink}
/> />
@ -253,8 +254,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
<> <>
<SidebarNavigationLink <SidebarNavigationLink
to='/notifications' to='/notifications'
icon={require('@tabler/icons/outline/bell.svg')} icon={require('@phosphor-icons/core/regular/bell-simple.svg')}
activeIcon={require('@tabler/icons/filled/bell.svg')} activeIcon={require('@phosphor-icons/core/fill/bell-simple-fill.svg')}
count={notificationCount} count={notificationCount}
text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />} text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
shrink={shrink} shrink={shrink}
@ -263,7 +264,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{features.chats && ( {features.chats && (
<SidebarNavigationLink <SidebarNavigationLink
to='/chats' to='/chats'
icon={require('@tabler/icons/outline/messages.svg')} icon={require('@phosphor-icons/core/regular/chats-teardrop.svg')}
activeIcon={require('@phosphor-icons/core/fill/chats-teardrop-fill.svg')}
count={unreadChatsCount} count={unreadChatsCount}
countMax={9} countMax={9}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />} text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@ -274,8 +276,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{!features.chats && features.conversations && ( {!features.chats && features.conversations && (
<SidebarNavigationLink <SidebarNavigationLink
to='/conversations' to='/conversations'
icon={require('@tabler/icons/outline/mail.svg')} icon={require('@phosphor-icons/core/regular/envelope-simple.svg')}
activeIcon={require('@tabler/icons/filled/mail.svg')} activeIcon={require('@phosphor-icons/core/fill/envelope-simple-fill.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Direct messages' />} text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Direct messages' />}
shrink={shrink} shrink={shrink}
/> />
@ -284,8 +286,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{features.groups && ( {features.groups && (
<SidebarNavigationLink <SidebarNavigationLink
to='/groups' to='/groups'
icon={require('@tabler/icons/outline/circles.svg')} icon={require('@phosphor-icons/core/regular/users-three.svg')}
activeIcon={require('@tabler/icons/filled/circles.svg')} activeIcon={require('@phosphor-icons/core/fill/users-three-fill.svg')}
text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />} text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
shrink={shrink} shrink={shrink}
/> />
@ -293,16 +295,16 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
<SidebarNavigationLink <SidebarNavigationLink
to={`/@${account.acct}`} to={`/@${account.acct}`}
icon={require('@tabler/icons/outline/user.svg')} icon={require('@phosphor-icons/core/regular/user.svg')}
activeIcon={require('@tabler/icons/filled/user.svg')} activeIcon={require('@phosphor-icons/core/fill/user-fill.svg')}
text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />} text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
shrink={shrink} shrink={shrink}
/> />
<SidebarNavigationLink <SidebarNavigationLink
to='/settings' to='/settings'
icon={require('@tabler/icons/outline/settings.svg')} icon={require('@phosphor-icons/core/regular/sliders-horizontal.svg')}
activeIcon={require('@tabler/icons/filled/settings.svg')} activeIcon={require('@phosphor-icons/core/fill/sliders-horizontal-fill.svg')}
text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />} text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
shrink={shrink} shrink={shrink}
/> />
@ -310,7 +312,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{(account.is_admin || account.is_moderator) && ( {(account.is_admin || account.is_moderator) && (
<SidebarNavigationLink <SidebarNavigationLink
to='/pl-fe/admin' to='/pl-fe/admin'
icon={require('@tabler/icons/outline/dashboard.svg')} icon={require('@phosphor-icons/core/regular/gauge.svg')}
activeIcon={require('@phosphor-icons/core/fill/gauge-fill.svg')}
count={dashboardCount} count={dashboardCount}
text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />} text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
shrink={shrink} shrink={shrink}
@ -324,8 +327,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{(account || !restrictUnauth.timelines.local) && ( {(account || !restrictUnauth.timelines.local) && (
<SidebarNavigationLink <SidebarNavigationLink
to='/timeline/local' to='/timeline/local'
icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')} icon={require('@phosphor-icons/core/regular/planet.svg')}
activeIcon={features.federating ? require('@tabler/icons/filled/affiliate.svg') : undefined} activeIcon={require('@phosphor-icons/core/fill/planet-fill.svg')}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />} text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
shrink={shrink} shrink={shrink}
/> />
@ -334,8 +337,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{(features.bubbleTimeline && (account || !restrictUnauth.timelines.bubble)) && ( {(features.bubbleTimeline && (account || !restrictUnauth.timelines.bubble)) && (
<SidebarNavigationLink <SidebarNavigationLink
to='/timeline/bubble' to='/timeline/bubble'
icon={require('@tabler/icons/outline/chart-bubble.svg')} icon={require('@phosphor-icons/core/regular/graph.svg')}
activeIcon={require('@tabler/icons/filled/chart-bubble.svg')} activeIcon={require('@phosphor-icons/core/fill/graph-fill.svg')}
text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />} text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Bubble' />}
shrink={shrink} shrink={shrink}
/> />
@ -344,7 +347,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{(features.federating && (account || !restrictUnauth.timelines.federated)) && ( {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
<SidebarNavigationLink <SidebarNavigationLink
to='/timeline/fediverse' to='/timeline/fediverse'
icon={require('@tabler/icons/outline/topology-star-ring-3.svg')} icon={require('@phosphor-icons/core/regular/fediverse-logo.svg')}
activeIcon={require('@phosphor-icons/core/fill/fediverse-logo-fill.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />} text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
shrink={shrink} shrink={shrink}
/> />
@ -355,7 +359,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
{menu.length > 0 && ( {menu.length > 0 && (
<DropdownMenu items={menu} placement='top' width='16rem'> <DropdownMenu items={menu} placement='top' width='16rem'>
<SidebarNavigationLink <SidebarNavigationLink
icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')} icon={require('@phosphor-icons/core/regular/dots-three-circle.svg')}
text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />} text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
shrink={shrink} shrink={shrink}
/> />
@ -366,14 +370,16 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
<Stack className='xl:hidden' space={1.5}> <Stack className='xl:hidden' space={1.5}>
<SidebarNavigationLink <SidebarNavigationLink
to='/login' to='/login'
icon={require('@tabler/icons/outline/login.svg')} icon={require('@phosphor-icons/core/regular/sign-in.svg')}
activeIcon={require('@phosphor-icons/core/fill/sign-in-fill.svg')}
text={<FormattedMessage id='account.login' defaultMessage='Log in' />} text={<FormattedMessage id='account.login' defaultMessage='Log in' />}
shrink={shrink} shrink={shrink}
/> />
{isOpen && <SidebarNavigationLink {isOpen && <SidebarNavigationLink
to='/signup' to='/signup'
icon={require('@tabler/icons/outline/user-plus.svg')} icon={require('@phosphor-icons/core/regular/user-plus.svg')}
activeIcon={require('@phosphor-icons/core/fill/user-plus-fill.svg')}
text={<FormattedMessage id='account.register' defaultMessage='Sign up' />} text={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
shrink={shrink} shrink={shrink}
/>} />}

22
packages/pl-fe/src/components/thumb-navigation.tsx
View File

@ -57,7 +57,7 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
onClick={handleOpenComposeModal} onClick={handleOpenComposeModal}
title={intl.formatMessage(messages.compose)} title={intl.formatMessage(messages.compose)}
> >
<Icon src={require('@tabler/icons/outline/square-rounded-plus.svg')} /> <Icon src={require('@phosphor-icons/core/regular/plus-square.svg')} />
</button> </button>
); );
@ -68,12 +68,12 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
onClick={isSidebarOpen ? closeSidebar : openSidebar} onClick={isSidebarOpen ? closeSidebar : openSidebar}
title={intl.formatMessage(isSidebarOpen ? messages.closeSidebar : messages.openSidebar)} title={intl.formatMessage(isSidebarOpen ? messages.closeSidebar : messages.openSidebar)}
> >
<Icon src={require('@tabler/icons/outline/menu-2.svg')} /> <Icon src={require('@phosphor-icons/core/regular/list.svg')} />
</button> </button>
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/outline/home.svg')} src={require('@phosphor-icons/core/regular/house.svg')}
activeSrc={require('@tabler/icons/filled/home.svg')} activeSrc={require('@phosphor-icons/core/fill/house-fill.svg')}
text={intl.formatMessage(messages.home)} text={intl.formatMessage(messages.home)}
to='/' to='/'
exact exact
@ -81,8 +81,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
{/* {features.groups && ( {/* {features.groups && (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/outline/circles.svg')} src={require('@phosphor-icons/core/regular/users-three.svg')}
activeSrc={require('@tabler/icons/filled/circles.svg')} activeSrc={require('@phosphor-icons/core/fill/users-three-fill.svg')}
text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />} text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
to='/groups' to='/groups'
exact exact
@ -93,7 +93,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
{(!standalone || account) && ( {(!standalone || account) && (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/outline/search.svg')} src={require('@phosphor-icons/core/regular/magnifying-glass.svg')}
activeSrc={require('@phosphor-icons/core/fill/magnifying-glass-fill.svg')}
text={intl.formatMessage(messages.search)} text={intl.formatMessage(messages.search)}
to='/search' to='/search'
exact exact
@ -102,8 +103,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
{account && ( {account && (
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/outline/bell.svg')} src={require('@phosphor-icons/core/regular/bell-simple.svg')}
activeSrc={require('@tabler/icons/filled/bell.svg')} activeSrc={require('@phosphor-icons/core/fill/bell-simple-fill.svg')}
text={intl.formatMessage(messages.notifications)} text={intl.formatMessage(messages.notifications)}
to='/notifications' to='/notifications'
exact exact
@ -114,7 +115,8 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
{account && features.chats && ( {account && features.chats && (
<> <>
<ThumbNavigationLink <ThumbNavigationLink
src={require('@tabler/icons/outline/messages.svg')} src={require('@phosphor-icons/core/regular/chats-teardrop.svg')}
activeSrc={require('@phosphor-icons/core/fill/chats-teardrop-fill.svg')}
text={intl.formatMessage(messages.chats)} text={intl.formatMessage(messages.chats)}
to='/chats' to='/chats'
exact exact

10
packages/pl-fe/src/styles/new/layout.scss
View File

@ -80,13 +80,13 @@ body {
&__accounts { &__accounts {
@apply border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800; @apply border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800;
}
> a { &__account {
@apply block py-2; @apply block py-2;
> div { > div {
@apply pointer-events-none; @apply pointer-events-none;
}
} }
} }

10
pnpm-lock.yaml generated
View File

@ -166,6 +166,9 @@ importers:
'@mkljczk/url-purify': '@mkljczk/url-purify':
specifier: ^0.0.3 specifier: ^0.0.3
version: 0.0.3 version: 0.0.3
'@phosphor-icons/core':
specifier: ^2.1.1
version: 2.1.1
'@reach/combobox': '@reach/combobox':
specifier: ^0.18.0 specifier: ^0.18.0
version: 0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -1962,6 +1965,9 @@ packages:
resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==} resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
engines: {node: '>= 10.0.0'} engines: {node: '>= 10.0.0'}
'@phosphor-icons/core@2.1.1':
resolution: {integrity: sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==}
'@pkgjs/parseargs@0.11.0': '@pkgjs/parseargs@0.11.0':
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -8211,6 +8217,8 @@ snapshots:
'@parcel/watcher-win32-x64': 2.5.1 '@parcel/watcher-win32-x64': 2.5.1
optional: true optional: true
'@phosphor-icons/core@2.1.1': {}
'@pkgjs/parseargs@0.11.0': '@pkgjs/parseargs@0.11.0':
optional: true optional: true
@ -10272,7 +10280,7 @@ snapshots:
tinyglobby: 0.2.14 tinyglobby: 0.2.14
unrs-resolver: 1.11.1 unrs-resolver: 1.11.1
optionalDependencies: optionalDependencies:
eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.38.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-typescript@4.4.4)(eslint@8.57.1) eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.38.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@4.4.4)(eslint@8.57.1)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color