+
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
index 2feec08fb22..8bdd47341f1 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
@@ -2,6 +2,8 @@ import { useCallback, useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
import {
PenNibIcon,
HouseIcon,
@@ -10,6 +12,7 @@ import {
BellIcon,
ChatCircleDotsIcon,
BookmarkSimpleIcon,
+ PlusIcon,
} from '@phosphor-icons/react';
import FediIcon from '@/images/icons/icon_fediverse.svg?react';
@@ -162,31 +165,44 @@ export const RedesignNavigationPanel: React.FC<{
defaultMessage='Custom Feeds'
/>
}
- action={{
- label: (
-
- ),
- link: '/lists/new',
- }}
emptyMessage={
-
+ <>
+ {' '}
+
+
+
+ >
}
>
- {customFeeds.map((feed) => (
-
- {feed.title}
-
- ))}
+ {customFeeds.length > 0 && (
+ <>
+
+
+
+ {customFeeds.map((feed) => (
+
+ {feed.title}
+
+ ))}
+ >
+ )}
{followedHashtags.length > 0 && (
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
index 4a3a753bfdb..0afbe64b065 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
@@ -1,45 +1,42 @@
@use '@/styles/mastodon/mixins';
+@use './navigation_link.module.scss' as navigation-link;
.root {
&:not(:last-child) {
margin-bottom: var(--space-md);
}
-}
-.titleWrapper {
- display: flex;
- align-items: center;
- padding-inline: var(--space-xs);
- padding-block: calc(var(--space-xs) - var(--space-3xs));
+ :any-link {
+ color: inherit;
+
+ &:hover,
+ &:focus-visible {
+ text-decoration: none;
+ }
+ }
}
.title {
- @include mixins.type-label-sm;
+ @include navigation-link.link-base;
+
+ min-height: 32px;
+ padding: var(--space-2xs) var(--space-xs);
+ margin-bottom: var(--space-3xs);
+
+ @include mixins.type-label-md;
color: var(--color-text-secondary);
- cursor: default;
}
-.toggleButton {
- // Compensate for the button's outer spacing
- --button-padding: calc(var(--space-xs) - var(--space-3xs));
-
- margin: calc(-1 * var(--button-padding));
- margin-inline-end: var(--button-padding);
-
- --fg: var(--color-text-tertiary);
-
- svg {
- transition: rotate 100ms ease-in;
- }
-
- &[aria-expanded='false'] svg {
- rotate: -90deg;
- }
-}
-
-.action {
+.toggleIcon {
+ width: 20px;
+ height: 20px;
margin-inline-start: auto;
+ transition: rotate 100ms ease-in;
+
+ .title[aria-expanded='true'] & {
+ rotate: -180deg;
+ }
}
.emptyState {
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.tsx
index bbc621418c4..618598b6945 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.tsx
@@ -1,12 +1,8 @@
import { useCallback } from 'react';
import type { ReactNode } from 'react';
-import { FormattedMessage } from 'react-intl';
-
import { CaretDownIcon } from '@phosphor-icons/react';
-import { Button, IconButton } from '@/mastodon/components/button/redesign';
-import type { MastodonLocationDescriptor } from '@/mastodon/components/router';
import { useStorageState } from '@/mastodon/hooks/useStorage';
import { useIdentity } from '@/mastodon/identity_context';
import { hasReactChildren } from '@/mastodon/utils/has_react_children';
@@ -15,10 +11,6 @@ import classes from './list_section.module.scss';
export const ListSection: React.FC<{
title: ReactNode;
- action?: {
- label: ReactNode;
- link: MastodonLocationDescriptor;
- };
/**
* Unique identifier of this section, used for storing the
* open/close state of the section in localStorage
@@ -26,7 +18,7 @@ export const ListSection: React.FC<{
id: string;
children: ReactNode;
emptyMessage?: ReactNode;
-}> = ({ title, action, id, children, emptyMessage }) => {
+}> = ({ title, id, children, emptyMessage }) => {
const hasContent = hasReactChildren(children);
const { accountId } = useIdentity();
@@ -39,33 +31,18 @@ export const ListSection: React.FC<{
return (
- {hasContent && (
-
-
-
- )}
- {title}
- {action && (
-
+ {title}
+
+
+ ) : (
+ {title}
)}
{hasContent
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
index 4febbf834e4..96f162766c0 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
@@ -9,7 +9,7 @@
padding-bottom: var(--space-md);
}
-.link {
+@mixin link-base {
--icon-size: 20px;
--border-radius: var(--radius-sm);
@@ -18,38 +18,23 @@
display: flex;
align-items: center;
width: 100%;
- min-height: 40px;
padding: var(--space-xs);
column-gap: var(--space-sm);
border-radius: var(--border-radius);
border: none;
- color: inherit;
+ color: var(--color-text-primary);
background-color: transparent;
-
- @include mixins.type-body-compact;
-
+ transition: background-color 200ms;
text-decoration: none;
text-align: start;
- &:not(:where(.linkStacked, .linkMobile)) {
- color: var(--color-text-secondary);
- }
-
- @media (width < variables.$mobile-menu-breakpoint) {
- min-height: 48px;
- }
-
- &:hover,
+ &:where(button, a):hover,
&:focus-visible,
&[aria-current='page'] {
background-color: var(--color-bg-highlight);
text-decoration: none;
}
- &[aria-current='page'] {
- color: var(--color-text-primary);
- }
-
&:focus-visible {
outline: var(--outline-focus-default);
}
@@ -60,6 +45,21 @@
}
}
+.link {
+ @include link-base;
+
+ min-height: 40px;
+ @include mixins.type-body;
+
+ @media (width < variables.$mobile-menu-breakpoint) {
+ min-height: 48px;
+ }
+
+ &[aria-current='page']:not(:where(.linkStacked, .linkMobile)) {
+ @include mixins.type-body-strong;
+ }
+}
+
.linkStacked {
--icon-size: 24px;
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index f9300a29abc..ca63a0ac192 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -147,6 +147,7 @@
"account.unmute": "Unmute @{name}",
"account.unmute_notifications_short": "Unmute notifications",
"account.unmute_short": "Unmute",
+ "account.view_profile": "View profile",
"account_edit.advanced_settings.bot_hint": "Signal to others that the account mainly performs automated actions and might not be monitored",
"account_edit.advanced_settings.bot_label": "Automated account",
"account_edit.advanced_settings.title": "Advanced settings",
@@ -1465,7 +1466,7 @@
"subscribed_languages.target": "Change subscribed languages for {target}",
"tab_bar.messages": "Messages",
"tabs_bar.account_settings": "Account settings",
- "tabs_bar.create_custom_feed": "Create",
+ "tabs_bar.create_custom_feed": "Create feed",
"tabs_bar.custom_feeds": "Custom Feeds",
"tabs_bar.custom_feeds_empty": "You have no custom feeds yet.",
"tabs_bar.explore": "Explore",
@@ -1476,7 +1477,6 @@
"tabs_bar.menu": "Menu",
"tabs_bar.messages": "Messages",
"tabs_bar.notifications": "Notifications",
- "tabs_bar.open_section": "Open {title} menu",
"tabs_bar.publish": "New Post",
"tabs_bar.quick_links": "Quick links",
"tabs_bar.saved": "Saved",