-
-
- {children}
-
+
+
+ );
+ },
+ parameters: {
+ state: {
+ accounts: {
+ '1': accountFactoryImmutable(),
+ },
+ },
+ redesign: true,
+ },
+} satisfies Meta;
+
+function tokenToSuggestions(token: string) {
+ let suggestions: Suggestion[] = [];
+ switch (token.charAt(0)) {
+ case '@':
+ suggestions = suggestionsMap.account;
+ break;
+ case ':':
+ suggestions = suggestionsMap.emoji;
+ break;
+ case '#':
+ suggestions = suggestionsMap.hashtag;
+ }
+ return suggestions;
+}
+
+export default meta;
+
+type Story = StoryObj
+ {Object.values(suggestionsMap)
+ .flat()
+ .map((suggestion) => (
+
+ );
+ },
+};
diff --git a/app/javascript/mastodon/components/autosuggest/hooks.tsx b/app/javascript/mastodon/components/autosuggest/hooks.tsx
new file mode 100644
index 00000000000000..9ee463a4d75f6b
--- /dev/null
+++ b/app/javascript/mastodon/components/autosuggest/hooks.tsx
@@ -0,0 +1,228 @@
+import { useCallback, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { useThrottledCallback } from 'use-debounce';
+
+import { getAllMenuItems } from '../menu';
+
+import type { AutosuggestMenuProps } from './list';
+import classes from './styles.module.scss';
+import type { AutosuggestSourceElements, Source, Suggestion } from './types';
+import { sourceToElement, textAtCursorMatchesToken } from './utils';
+
+export type OnSuggestionSelect = (
+ start: number,
+ token: string,
+ suggestion: Suggestion,
+) => void;
+
+interface UseAutosuggestMenuOptions {
+ suggestions: Suggestion[];
+ onSelect: OnSuggestionSelect;
+ onFetch?: (token: string) => void;
+ onClear?: () => void;
+}
+
+type SourceProps = React.DetailedHTMLProps<
+ React.HTMLAttributes
+ {selectedText}
+
+ );
+
+ return {
+ mirror,
+ getToken,
+ onUpdate,
+ ...autosuggestProps,
+
+ sourceProps: {
+ ...autosuggestProps.sourceProps,
+ onScroll,
+ onSelect,
+ } satisfies SourceProps,
+
+ suggestProps: {
+ ...autosuggestProps.suggestProps,
+ reference: mirrorElement,
+ updatePopoverCb,
+ } satisfies AutosuggestMenuProps,
+ };
+}
diff --git a/app/javascript/mastodon/components/autosuggest/items.tsx b/app/javascript/mastodon/components/autosuggest/items.tsx
new file mode 100644
index 00000000000000..1e293f0454d63b
--- /dev/null
+++ b/app/javascript/mastodon/components/autosuggest/items.tsx
@@ -0,0 +1,97 @@
+import type React from 'react';
+
+import classNames from 'classnames';
+
+import { selectPlainAccount } from '@/mastodon/selectors/accounts';
+import { useAppSelector } from '@/mastodon/store';
+
+import { Avatar } from '../avatar';
+import { DisplayName } from '../display_name';
+import { Emoji } from '../emoji';
+import { MenuItem } from '../menu';
+import { ShortNumber } from '../short_number';
+
+import classes from './styles.module.scss';
+import type {
+ EmojiSuggestion,
+ HashtagSuggestion,
+ LocalHashtagSuggestion,
+ Suggestion,
+} from './types';
+
+export const AutosuggestItem: React.FC<
+ {
+ suggestion: Suggestion;
+ className?: string;
+ } & React.ComponentPropsWithoutRef<'button'>
+> = ({ suggestion, className, ...props }) => {
+ let suggestComp: React.ReactNode = null;
+ if (suggestion.type === 'account') {
+ suggestComp =
+
+
+ );
+};
+
+const AutosuggestEmoji: React.FC{line}
) + : bodyText; + + const props = linked + ? ({ + as: 'a', + href: 'https://joinmastodon.org', + target: '_blank', + } as const) + : {}; + + return ( +
+
+ ),
+ ],
+ parameters: {
+ redesign: true,
+ },
+} satisfies Meta{image}
+ );
+
+ return (
+
+ {image && {image}}
+
+ {children}
+
+ {afterContent && (
+ // eslint-disable-next-line no-restricted-syntax -- Allow •
+
+ •
+ {afterContent}
+
+ )}
+
+ );
+};
+
+type CardBodyProps
+
= Merge<
+export type MenuCardProps = PolymorphicProps<
{
- as?: As;
children: React.ReactNode;
className?: string;
elevation?: 1 | 2;
maxWidth?: number | string;
style?: React.CSSProperties;
},
- React.ComponentProps
+ As
>;
-export const MenuCard = ({
+export const MenuCard = ({
as: asComp,
children,
className,
@@ -34,10 +33,13 @@ export const MenuCard = ({
{...props}
className={classNames(className, classes.card)}
data-elevation={elevation}
- style={{
- maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
- ...style,
- }}
+ style={
+ {
+ '--_max-card-width':
+ typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+ ...style,
+ } as React.CSSProperties
+ }
>
{children}
@@ -80,7 +82,7 @@ export const PopoverMenuCard = ({
{({ props: popoverChildProps }) => (
)}
className={classNames(
className,
props.maxWidth && classes.popoverCard,
diff --git a/app/javascript/mastodon/components/menu/index.tsx b/app/javascript/mastodon/components/menu/index.tsx
index de38d4f6107762..e83df85b59816d 100644
--- a/app/javascript/mastodon/components/menu/index.tsx
+++ b/app/javascript/mastodon/components/menu/index.tsx
@@ -1,4 +1,3 @@
-import type React from 'react';
import {
createContext,
use,
@@ -8,7 +7,7 @@ import {
useState,
} from 'react';
-import type { Merge } from 'type-fest';
+import type { PolymorphicProps } from '@/types/polymorphic';
import { Button } from '../button/redesign';
@@ -21,8 +20,8 @@ export const menuItemClass = classes.item;
export {
MenuItemDivider,
MenuItemGroup,
- MenuItemBase,
MenuItem,
+ MenuItemLink,
MenuItemRadio,
MenuItemCheckbox,
} from './items';
@@ -36,10 +35,10 @@ interface PopoverState {
reference: HTMLButtonElement | null;
}
-interface MenuButtonContextProps {
+interface MenuTriggerContextProps {
ref: (button: HTMLButtonElement | null) => void;
id: string;
- 'aria-haspopup': 'menu';
+ 'aria-haspopup'?: 'menu';
'aria-expanded': boolean;
'aria-controls'?: string;
onKeyDown: React.KeyboardEventHandler;
@@ -47,17 +46,20 @@ interface MenuButtonContextProps {
}
interface MenuListContextProps {
- ref: (button: HTMLDivElement | null) => void;
- role: 'menu';
+ ref: (list: HTMLDivElement | null) => void;
+ role?: 'menu'; // only for menus of type === 'actions'
tabIndex: -1;
id: string;
'aria-labelledby': string;
onKeyDown: React.KeyboardEventHandler;
}
+type MenuType = 'actions' | 'navigation';
+
interface MenuState {
+ type: MenuType;
popover: PopoverState;
- menuButtonProps: MenuButtonContextProps;
+ menuTriggerProps: MenuTriggerContextProps;
menuListProps: MenuListContextProps;
}
@@ -67,13 +69,13 @@ export function useMenuContext(): MenuState {
const context = use(MenuContext);
if (!context) {
- throw new Error('useMenu must be used within a
diff --git a/app/javascript/mastodon/features/followed_tags/index.tsx b/app/javascript/mastodon/features/followed_tags/index.tsx
index b2a4338c1e5c76..045e05c5ff7624 100644
--- a/app/javascript/mastodon/features/followed_tags/index.tsx
+++ b/app/javascript/mastodon/features/followed_tags/index.tsx
@@ -20,7 +20,7 @@ import ScrollableList from 'mastodon/components/scrollable_list';
import { useAppDispatch, useAppSelector } from 'mastodon/store';
const messages = defineMessages({
- heading: { id: 'followed_tags', defaultMessage: 'Followed hashtags' },
+ heading: { id: 'followed_tags', defaultMessage: 'Followed Hashtags' },
});
const FollowedTag: React.FC<{
diff --git a/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx b/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx
index 2d849b46ffb6cb..86634dc533455c 100644
--- a/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx
+++ b/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx
@@ -158,7 +158,7 @@ const Card: React.FC<{
)}
-
-
-
-
- );
-};
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
similarity index 76%
rename from app/javascript/mastodon/features/navigation_panel/redesign/account_card.module.scss
rename to app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
index 9679354469fc8a..20cbc147a37a1d 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/account_card.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
@@ -1,5 +1,3 @@
-@use '@/styles/mastodon/mixins';
-
.root {
display: flex;
align-items: center;
@@ -9,6 +7,7 @@
& > :global(.account) {
flex-grow: 1;
+ overflow: hidden;
--account-outer-spacing: 0;
--avatar-border-radius: var(--radius-round);
@@ -17,4 +16,9 @@
--account-handle-color: var(--color-text-secondary);
--account-handle-size: var(--fs-2xs);
}
+
+ & :global(.display-name) {
+ // Allow display name to wrap instead of truncating with ellipsis
+ white-space: normal;
+ }
}
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx
new file mode 100644
index 00000000000000..590afcab0c36d5
--- /dev/null
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx
@@ -0,0 +1,163 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+ DotsThreeIcon,
+ UserIcon,
+ GearIcon,
+ CirclesFourIcon,
+ HeartIcon,
+ UsersThreeIcon,
+ ProhibitIcon,
+ GavelIcon,
+ ShieldStarIcon,
+ SignOutIcon,
+} from '@phosphor-icons/react';
+
+import { openModal } from '@/mastodon/actions/modal';
+import { Account } from '@/mastodon/components/account';
+import { IconButton } from '@/mastodon/components/button/redesign';
+import {
+ Menu,
+ MenuItem,
+ MenuItemDivider,
+ MenuItemLink,
+ MenuList,
+ MenuTrigger,
+} from '@/mastodon/components/menu';
+import { useAccount } from '@/mastodon/hooks/useAccount';
+import { useIdentity } from '@/mastodon/identity_context';
+import {
+ canManageReports,
+ canViewAdminDashboard,
+} from '@/mastodon/permissions';
+import { useAppDispatch } from '@/mastodon/store';
+
+import classes from './account_card_and_menu.module.scss';
+
+export const NavigationAccountCardAndMenu: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const { accountId, permissions } = useIdentity();
+ const account = useAccount(accountId);
+
+ const confirmLogout = useCallback(() => {
+ dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT', modalProps: {} }));
+ }, [dispatch]);
+
+ if (!accountId) {
+ return null;
+ }
+
+ const isManager = canManageReports(permissions);
+ const isAdmin = canViewAdminDashboard(permissions);
+
+ const accountBasePath = `/@${account?.acct}`;
+
+ return (
+
+
+ );
+};
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
index 6aa093671dd533..016a048a2c3374 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
@@ -4,6 +4,7 @@
display: flex;
flex-wrap: wrap;
align-items: center;
+ gap: var(--space-xs);
margin-top: var(--space-xl);
@include mixins.type-label-sm;
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
index 140949cb8d48a9..544c8137c740d2 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
@@ -3,22 +3,48 @@
.root {
position: sticky;
top: 0;
+ z-index: 1;
display: flex;
align-items: center;
- padding: var(--space-xl) var(--space-lg);
- background: linear-gradient(
- to top,
- transparent,
- var(--color-bg-primary) var(--space-xl)
- );
+
+ // We're distributing the bottom spacing between padding and margin so that
+ // not too much of it overlaps the navigation links when scrolled down
+ --half-bottom-spacing: calc(var(--space-xl) / 2);
+
+ padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
+ margin-bottom: var(--half-bottom-spacing);
+ background: var(--color-bg-primary);
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ inset-inline: 0;
+ height: var(--space-2xl);
+ background: linear-gradient(
+ to bottom,
+ var(--color-bg-primary),
+ transparent
+ );
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity linear 200ms;
+ }
+
+ &[data-stuck='true']::after {
+ opacity: 1;
+ }
}
.siteNameLink {
+ --app-icon-size: 40px;
+
display: flex;
- flex-direction: column;
+ align-items: center;
+ column-gap: var(--space-xs);
+ min-width: 0;
color: inherit;
text-decoration: none;
- overflow-wrap: anywhere;
outline-offset: var(--space-3xs);
&:hover {
@@ -26,13 +52,30 @@
}
}
+.content {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.appIcon {
+ align-self: center;
+ width: var(--app-icon-size);
+ aspect-ratio: 1;
+}
+
.serverName {
@include mixins.type-heading-sm;
+
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.poweredBy {
@include mixins.type-label-sm;
+ grid-column: 2;
color: var(--color-text-tertiary);
svg {
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx
index 5c1b2e51f5b1e6..65b317e55ad639 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx
@@ -1,29 +1,35 @@
-import type React from 'react';
-
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { IconLogo } from '@/mastodon/components/logo';
-import { domain } from '@/mastodon/initial_state';
+import { customAppIcon, domain, title } from '@/mastodon/initial_state';
import classes from './header.module.scss';
-export const NavigationHeader: React.FC<{ siteName?: string }> = ({
- siteName = domain,
-}) => {
+export const NavigationHeader: React.FC<{
+ siteName?: string;
+ isStuck: boolean;
+}> = ({ siteName, isStuck }) => {
return (
-
+ {title}
+ {action && (
+
+ )}
+
+ {hasContent ? (
+ - {children}
{emptyMessage}
+ )}
+
+ {isLoading ? (
+ <>
+
+
+
+
+
+
+
+ );
+};
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss
new file mode 100644
index 00000000000000..a65a7432490e6d
--- /dev/null
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss
@@ -0,0 +1,80 @@
+@use '@/styles/mastodon/mixins';
+@use '@/styles/mastodon/variables' as *;
+
+.root {
+ position: fixed;
+ bottom: env(safe-area-inset-bottom);
+ inset-inline: 0;
+ padding: 0 var(--space-md) var(--space-md);
+ z-index: 100;
+ display: flex;
+
+ // This moves the compose FAB above the navigation,
+ // which somehow makes more sense for the focus order
+ flex-direction: column-reverse;
+ align-items: end;
+ gap: var(--space-xs);
+
+ // Allow clicking through this container
+ pointer-events: none;
+
+ & > * {
+ pointer-events: initial;
+ }
+
+ @media (width > $mobile-menu-breakpoint) {
+ display: none;
+ }
+}
+
+.list {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ padding: var(--space-2xs);
+ background-color: var(--color-bg-primary);
+ border-radius: var(--radius-round);
+ @include mixins.elevation-1;
+
+ > li {
+ flex-grow: 1;
+ }
+}
+
+.avatar,
+.avatar img {
+ border-radius: var(--radius-round);
+}
+
+.slideOutWrapper {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ pointer-events: none;
+ background: rgb(from var(--color-bg-overlay) r g b/50%);
+ opacity: 0;
+ transition: opacity 250ms ease;
+
+ &[data-is-open='true'] {
+ pointer-events: auto;
+ opacity: 1;
+ }
+}
+
+.slideOut {
+ // We extend the size of the slideOut to go beyond the viewport
+ // so that when it's pulled away from the side it was opened from,
+ // the background underneath the menu isn't revealed
+ --pull-tolerance: 70px;
+
+ position: fixed;
+ inset-block: 0;
+ inset-inline-start: calc(-1 * var(--pull-tolerance));
+ width: var(--navigation-max-width);
+ max-width: calc(100vw - var(--space-3xl));
+ padding-inline-start: var(--pull-tolerance);
+ touch-action: pan-y;
+ background: var(--color-bg-primary);
+ box-shadow: var(--dropdown-shadow);
+}
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
new file mode 100644
index 00000000000000..fed7ddf63bef84
--- /dev/null
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useLocation } from 'react-router';
+
+import {
+ BellIcon,
+ ChatCircleIcon,
+ HouseIcon,
+ MagnifyingGlassIcon,
+ HamburgerIcon,
+} from '@phosphor-icons/react';
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+
+import { closeNavigation, openNavigation } from '@/mastodon/actions/navigation';
+import { Avatar } from '@/mastodon/components/avatar';
+import { IconButton } from '@/mastodon/components/button/redesign';
+import { FOCUS_TARGET } from '@/mastodon/components/navigation_focus_target';
+import { ComposeRedesignButton } from '@/mastodon/features/compose/redesign/trigger';
+import { useAccount } from '@/mastodon/hooks/useAccount';
+import { useIdentity } from '@/mastodon/identity_context';
+import { selectUnreadNotificationGroupsCount } from '@/mastodon/selectors/notifications';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+
+import { RedesignNavigationPanel } from '.';
+import classes from './mobile_nav.module.scss';
+import { MobileNavLink } from './navigation_link';
+
+export const RedesignMobileNavigation: React.FC = () => {
+ const dispatch = useAppDispatch();
+
+ const { accountId, signedIn } = useIdentity();
+ const account = useAccount(accountId);
+
+ const notificationsCount = useAppSelector(
+ selectUnreadNotificationGroupsCount,
+ );
+
+ const handleOpenNavigation = useCallback(() => {
+ dispatch(openNavigation());
+ }, [dispatch]);
+
+ if (!signedIn) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
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 d195e8494cfc67..15f65d84bc62f3 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
@@ -1,4 +1,5 @@
@use '@/styles/mastodon/mixins';
+@use '@/styles/mastodon/variables';
.wrapper {
padding-bottom: var(--space-3xs);
@@ -9,13 +10,17 @@
}
.link {
+ --icon-size: 20px;
+ --border-radius: var(--radius-sm);
+
+ position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
padding: var(--space-xs);
- gap: var(--space-sm);
- border-radius: var(--radius-sm);
+ column-gap: var(--space-sm);
+ border-radius: var(--border-radius);
border: none;
color: inherit;
background-color: transparent;
@@ -25,6 +30,14 @@
text-decoration: none;
text-align: start;
+ &:not(:where(.linkStacked, .linkMobile)) {
+ color: var(--color-text-secondary);
+ }
+
+ @media (width < variables.$mobile-menu-breakpoint) {
+ min-height: 40px;
+ }
+
&:hover,
&:focus-visible,
&[aria-current='page'] {
@@ -32,17 +45,83 @@
text-decoration: none;
}
+ &[aria-current='page'] {
+ color: var(--color-text-primary);
+ }
+
&:focus-visible {
outline: var(--outline-focus-default);
}
+
+ &:focus {
+ // Override silly global focus style
+ border-radius: var(--border-radius);
+ }
+}
+
+.linkStacked {
+ --icon-size: 24px;
+
+ flex-direction: column;
+ row-gap: var(--space-2xs);
+ padding-inline: 0;
+ @include mixins.type-micro;
+}
+
+.linkMobile {
+ --icon-size: 24px;
+ --border-radius: var(--radius-round);
+
+ width: 100%;
+ justify-content: center;
+ gap: 0;
+ padding-block: var(--space-sm);
}
.icon {
- width: 20px;
- height: 20px;
+ width: var(--icon-size);
+ height: var(--icon-size);
+
+ & > svg {
+ width: inherit;
+ height: inherit;
+ }
+}
+
+// A dot is shown instead of a number badge on mobile
+.iconWithDot {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: var(--space-4xs);
+ left: calc(50% + var(--space-3xs));
+ width: var(--space-xs);
+ height: var(--space-xs);
+ border-radius: var(--radius-round);
+ background-color: var(--color-bg-brand-base);
+ border: 1px solid var(--color-bg-primary);
+ }
}
.label {
+ max-width: 100%;
min-width: 0;
flex-grow: 1;
+ flex-shrink: 1;
+ overflow-wrap: break-word;
+ hyphens: auto;
+
+ .linkStacked & {
+ text-align: center;
+ }
+}
+
+.badge {
+ .linkStacked & {
+ position: absolute;
+ top: var(--space-3xs);
+ inset-inline-start: calc(50% + var(--space-3xs));
+ }
}
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx
index afa886278429f2..9b872dbb4a0a3b 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx
@@ -1,15 +1,19 @@
+import type { ReactNode, SVGProps } from 'react';
+
import classNames from 'classnames';
-import { NavLink, matchPath, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
import type { NavLinkProps } from 'react-router-dom';
import type { Icon } from '@phosphor-icons/react';
import { Badge } from '@/mastodon/components/badge';
+import { useIsLinkActive } from '@/mastodon/hooks/useIsLinkActive';
import classes from './navigation_link.module.scss';
type NavigationLinkProps = {
- iconComponent: Icon;
+ stacked?: boolean;
+ iconComponent?: Icon | React.FC
-
- );
- }
-
- if (singleColumn) {
- return (
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
- );
- }
-
- return (
-
-
-
-
- {isRedesignEnabled() ? (
-
-
- ) : (
- <>
- {renderComposePanel &&
-
+
+ );
+ }
+
+ if (singleColumn) {
+ return (
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {renderComposePanel &&
+
+
+
+ {children}
+
+
+ );
+ }
+
+ if (singleColumn) {
+ return (
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ {isMobile ?
+
+
+ {children}
+ rel="me" som förhindrar personifiering på webbplatser med användargenererat innehåll. Du kan även använda en länk tagg i huvudet på sidan istället för en, men HTML:en måste vara tillgänglig utan att exekvera JavaScript.
+ extra_instructions_html: Tips: Länken på din webbplats kan vara osynlig. Den viktiga delen är rel="me", som förhindrar personifiering på webbplatser med användargenererat innehåll. Du kan även använda en link-tagg i sidhuvudet i stället för a, men HTML-koden måste vara tillgänglig utan att JavaScript körs.
here_is_how: Så här gör du
hint_html: "Verifiera din identitet på Mastodon är för alla. Baserat på öppna webbstandarder, nu och för evigt fria. Allt du behöver är en personlig webbplats som folk känner igen dig med. När du länkar till denna webbplats från din profil kommer vi att kontrollera att webbplatsen länkar tillbaka till din profil och visa en visuell indikator på den."
instructions_html: Kopiera och klistra in koden nedan in i HTML-koden på din webbplats. Lägg sedan till adressen till din webbplats i ett av de extra fälten på din profil från fliken "Redigera profil" och spara ändringar.
diff --git a/config/sidekiq.yml b/config/sidekiq.yml
index 07f695ab5c0690..ff5b82db0b032a 100644
--- a/config/sidekiq.yml
+++ b/config/sidekiq.yml
@@ -77,7 +77,3 @@
interval: 1 hour
class: Scheduler::CollectionItemCleanupScheduler
queue: scheduler
- repair_remote_collections_scheduler:
- every: ['24h', first_in: '1s']
- class: Scheduler::RepairRemoteCollectionsScheduler
- queue: scheduler
diff --git a/db/migrate/20160306172223_create_doorkeeper_tables.rb b/db/migrate/20160306172223_create_doorkeeper_tables.rb
index 0137520d27c17c..645c7c50d6bb9f 100644
--- a/db/migrate/20160306172223_create_doorkeeper_tables.rb
+++ b/db/migrate/20160306172223_create_doorkeeper_tables.rb
@@ -27,8 +27,8 @@ def change
add_index :oauth_access_grants, :token, unique: true
create_table :oauth_access_tokens do |t|
- t.integer :resource_owner_id
- t.integer :application_id
+ t.integer :resource_owner_id
+ t.integer :application_id
# If you use a custom token generator you may need to change this column
# from string to text, so that it accepts tokens larger than 255
diff --git a/db/migrate/20260629125939_add_index_account_id_local_fragment_to_keypair.rb b/db/migrate/20260629125939_add_index_account_id_local_fragment_to_keypair.rb
index 7e25c6adde3ce9..9388b935503634 100644
--- a/db/migrate/20260629125939_add_index_account_id_local_fragment_to_keypair.rb
+++ b/db/migrate/20260629125939_add_index_account_id_local_fragment_to_keypair.rb
@@ -3,7 +3,13 @@
class AddIndexAccountIdLocalFragmentToKeypair < ActiveRecord::Migration[8.1]
disable_ddl_transaction!
- def change
+ def up
add_index :keypairs, [:account_id, :local_fragment], unique: true, where: 'local_fragment IS NOT NULL', algorithm: :concurrently
+ rescue ActiveRecord::StatementInvalid
+ safety_assured { execute 'REINDEX INDEX CONCURRENTLY index_keypairs_on_account_id_and_local_fragment' }
+ end
+
+ def down
+ remove_index :keypairs, name: :index_keypairs_on_account_id_and_local_fragment
end
end
diff --git a/db/migrate/20260701161457_add_new_index_account_id_local_fragment_to_keypair.rb b/db/migrate/20260701161457_add_new_index_account_id_local_fragment_to_keypair.rb
index 8b5f26ae5ab955..984e92c2e1ba8c 100644
--- a/db/migrate/20260701161457_add_new_index_account_id_local_fragment_to_keypair.rb
+++ b/db/migrate/20260701161457_add_new_index_account_id_local_fragment_to_keypair.rb
@@ -3,7 +3,13 @@
class AddNewIndexAccountIdLocalFragmentToKeypair < ActiveRecord::Migration[8.1]
disable_ddl_transaction!
- def change
+ def up
add_index :keypairs, [:account_id, :local_fragment], unique: true, name: :index_keypairs_on_account_id_and_local_fragment, algorithm: :concurrently
+ rescue ActiveRecord::StatementInvalid
+ safety_assured { execute 'REINDEX INDEX CONCURRENTLY index_keypairs_on_account_id_and_local_fragment' }
+ end
+
+ def down
+ remove_index :keypairs, name: :index_keypairs_on_account_id_and_local_fragment
end
end
diff --git a/docker-compose.yml b/docker-compose.yml
index 4ae6ef3eb61f04..715e2751f2bd2a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -59,7 +59,7 @@ services:
web:
# You can uncomment the following line if you want to not use the prebuilt image, for example if you have local code changes
build: .
- image: kmyblue:25.0-dev
+ image: kmyblue:26.0-dev
restart: always
env_file: .env.production
command: bundle exec puma -C config/puma.rb
@@ -83,7 +83,7 @@ services:
build:
dockerfile: ./streaming/Dockerfile
context: .
- image: kmyblue-streaming:25.0-dev
+ image: kmyblue-streaming:26.0-dev
restart: always
env_file: .env.production
command: node ./streaming/index.js
@@ -101,7 +101,7 @@ services:
sidekiq:
build: .
- image: kmyblue:25.0-dev
+ image: kmyblue:26.0-dev
restart: always
env_file: .env.production
command: bundle exec sidekiq
diff --git a/lib/linter/haml_middle_dot.rb b/lib/linter/haml_middle_dot.rb
index 3b27711521e124..af4f39a778a553 100644
--- a/lib/linter/haml_middle_dot.rb
+++ b/lib/linter/haml_middle_dot.rb
@@ -5,9 +5,8 @@ module HamlLint
class Linter::MiddleDot < Linter
include LinterRegistry
- # rubocop:disable Style/MiddleDot
+ # rubocop:disable-next Style/MiddleDot
BULLET = '•'
- # rubocop:enable Style/MiddleDot
MIDDLE_DOT = '·'
MESSAGE = "Use '#{MIDDLE_DOT}' (middle dot) instead of '#{BULLET}' (bullet)".freeze
diff --git a/lib/linter/rubocop_middle_dot.rb b/lib/linter/rubocop_middle_dot.rb
index 3a1d97c0c98fd6..0147c1dcd2bfec 100644
--- a/lib/linter/rubocop_middle_dot.rb
+++ b/lib/linter/rubocop_middle_dot.rb
@@ -8,9 +8,8 @@ class MiddleDot < Base
extend AutoCorrector
extend Util
- # rubocop:disable Style/MiddleDot
+ # rubocop:disable-next Style/MiddleDot
BULLET = '•'
- # rubocop:enable Style/MiddleDot
MIDDLE_DOT = '·'
MESSAGE = "Use '#{MIDDLE_DOT}' (middle dot) instead of '#{BULLET}' (bullet)".freeze
diff --git a/lib/mastodon/cli/accounts.rb b/lib/mastodon/cli/accounts.rb
index 7b5d20324de41b..04bc71ca4a5877 100644
--- a/lib/mastodon/cli/accounts.rb
+++ b/lib/mastodon/cli/accounts.rb
@@ -102,7 +102,7 @@ def lookup_by_username(username)
With the --approve option, the account will be approved.
LONG_DESC
def create(username)
- role_id = nil
+ role_id = nil
if options[:role]
role = UserRole.find_by(name: options[:role])
@@ -287,16 +287,6 @@ def merge(from_acct, to_acct)
say('OK', :green)
end
- desc 'fix-duplicates', 'Find duplicate remote accounts and merge them'
- option :dry_run, type: :boolean
- long_desc <<-LONG_DESC
- This command is deprecated as of Mastodon v4.7.0.
- LONG_DESC
- def fix_duplicates
- # TODO: remove this after 4.7.0
- say('This command is deprecated as Mastodon v4.7.0 migrations enforce ActivityPub actor identifier uniqueness', :yellow)
- end
-
desc 'backup USERNAME', 'Request a backup for a user'
long_desc <<-LONG_DESC
Request a new backup for an account with a given USERNAME.
diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb
index 5b9df8f844b255..c0400e0cd60749 100644
--- a/lib/mastodon/version.rb
+++ b/lib/mastodon/version.rb
@@ -9,7 +9,7 @@ module Version
# If you change the version number, also change the image version in docker-compose.yml.
def kmyblue_major
- 25
+ 26
end
def kmyblue_minor
@@ -17,7 +17,7 @@ def kmyblue_minor
end
def kmyblue_flag
- # 'LTS'
+ # 'lts'
'dev'
# nil
end
diff --git a/lib/tasks/mastodon.rake b/lib/tasks/mastodon.rake
index 4bf23fe1ee93cf..69c75c658e6f70 100644
--- a/lib/tasks/mastodon.rake
+++ b/lib/tasks/mastodon.rake
@@ -549,6 +549,12 @@ namespace :mastodon do
require_relative '../../config/environment'
disable_log_stdout!
+ ActiveRecord::Encryption.configure(
+ primary_key: ENV.fetch('ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY'),
+ deterministic_key: ENV.fetch('ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY'),
+ key_derivation_salt: ENV.fetch('ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT')
+ )
+
username = prompt.ask('Username:') do |q|
q.required true
q.default 'admin'
diff --git a/spec/helpers/media_component_helper_spec.rb b/spec/helpers/media_component_helper_spec.rb
index 60c9f84da219a8..a625f5cd59b2f9 100644
--- a/spec/helpers/media_component_helper_spec.rb
+++ b/spec/helpers/media_component_helper_spec.rb
@@ -5,7 +5,7 @@
RSpec.describe MediaComponentHelper do
before { helper.extend controller_helpers }
- let(:media) { Fabricate.build(:media_attachment, type:, status: Fabricate.build(:status)) }
+ let(:media) { Fabricate.build(:media_attachment, type:, status: Fabricate.build(:status), id: 1234) }
describe 'render_video_component' do
let(:type) { :video }
diff --git a/spec/lib/private_address_check_spec.rb b/spec/lib/private_address_check_spec.rb
index 20a94983d9e492..0c02055187e662 100644
--- a/spec/lib/private_address_check_spec.rb
+++ b/spec/lib/private_address_check_spec.rb
@@ -4,7 +4,7 @@
RSpec.describe PrivateAddressCheck do
describe 'private_address?' do
- let(:private_ips) { %w(192.168.1.7 0.0.0.0 127.0.0.1 ::ffff:0.0.0.1) }
+ let(:private_ips) { %w(192.168.1.7 0.0.0.0 127.0.0.1 ::ffff:0.0.0.1 ::127.0.0.1 ::ffff:127.0.0.1 ::ffff:10.0.0.1 ::ffff:169.254.169.254 ::) }
it 'returns true for private addresses' do
expect(private_ips)
diff --git a/spec/lib/request_spec.rb b/spec/lib/request_spec.rb
index 80ea9efb98af51..4a237eac005058 100644
--- a/spec/lib/request_spec.rb
+++ b/spec/lib/request_spec.rb
@@ -1,7 +1,6 @@
# frozen_string_literal: true
require 'rails_helper'
-require 'securerandom'
RSpec.describe Request do
subject { described_class.new(:get, 'http://example.com', **options) }
diff --git a/spec/lib/text_formatter_spec.rb b/spec/lib/text_formatter_spec.rb
index 20b0a4a99f97c2..b21fc7857f18fd 100644
--- a/spec/lib/text_formatter_spec.rb
+++ b/spec/lib/text_formatter_spec.rb
@@ -304,7 +304,7 @@
end
context 'when given text containing a hashtag' do
- let(:text) { '#hashtag' }
+ let(:text) { '#hashtag' }
it 'creates a hashtag link' do
expect(subject).to include '/tags/hashtag" class="mention hashtag" rel="tag">#hashtag'
@@ -312,7 +312,7 @@
end
context 'when given text containing a hashtag with Unicode chars' do
- let(:text) { '#hashtagタグ' }
+ let(:text) { '#hashtagタグ' }
it 'creates a hashtag link' do
expect(subject).to include '/tags/hashtag%E3%82%BF%E3%82%B0" class="mention hashtag" rel="tag">#hashtagタグ'
diff --git a/spec/models/account_warning_preset_spec.rb b/spec/models/account_warning_preset_spec.rb
index e7a98551751373..1596cd7f5c9958 100644
--- a/spec/models/account_warning_preset_spec.rb
+++ b/spec/models/account_warning_preset_spec.rb
@@ -3,7 +3,11 @@
require 'rails_helper'
RSpec.describe AccountWarningPreset do
- describe 'alphabetical' do
+ describe 'Validations' do
+ it { is_expected.to validate_presence_of(:text) }
+ end
+
+ describe '.alphabetical' do
let(:first) { Fabricate(:account_warning_preset, title: 'aaa', text: 'aaa') }
let(:second) { Fabricate(:account_warning_preset, title: 'bbb', text: 'aaa') }
let(:third) { Fabricate(:account_warning_preset, title: 'bbb', text: 'bbb') }
diff --git a/spec/requests/api/v1/notifications_spec.rb b/spec/requests/api/v1/notifications_spec.rb
index f2ff396795c59d..896ef05dd0c5cc 100644
--- a/spec/requests/api/v1/notifications_spec.rb
+++ b/spec/requests/api/v1/notifications_spec.rb
@@ -5,7 +5,7 @@
RSpec.describe 'Notifications' do
include_context 'with API authentication', oauth_scopes: 'read:notifications write:notifications'
- let(:user) { Fabricate(:user, account_attributes: { username: 'alice' }) }
+ let(:user) { Fabricate(:user, account_attributes: { username: 'alice' }) }
describe 'GET /api/v1/notifications/unread_count', :inline_jobs do
subject do
diff --git a/spec/requests/media_proxy_spec.rb b/spec/requests/media_proxy_spec.rb
index fb4801ee67a866..816af7d27e2eff 100644
--- a/spec/requests/media_proxy_spec.rb
+++ b/spec/requests/media_proxy_spec.rb
@@ -59,6 +59,22 @@
end
end
+ context 'when an admin wants to see a suspended attachment' do
+ before do
+ sign_in Fabricate(:admin_user)
+ end
+
+ let(:account) { Fabricate(:account, suspended: true) }
+ let(:status) { Fabricate(:status, account:) }
+ let(:media_attachment) { Fabricate(:media_attachment, account:, status:, type: :image) }
+
+ it 'returns the media' do
+ get "/media_proxy/#{media_attachment.id}"
+
+ expect(response).to have_http_status(200)
+ end
+ end
+
def stub_attachment_request
stub_request(
:get,
diff --git a/spec/services/activitypub/process_activity_service_spec.rb b/spec/services/activitypub/process_activity_service_spec.rb
index 290058efd7a2fa..e716571ecad138 100644
--- a/spec/services/activitypub/process_activity_service_spec.rb
+++ b/spec/services/activitypub/process_activity_service_spec.rb
@@ -162,6 +162,46 @@
expect(ActivityPub::Activity).to_not have_received(:factory)
end
+ context 'when receiving a status with an unsupported JSON-LD keyword' do
+ let(:payload) do
+ {
+ '@context': 'https://www.w3.org/ns/activitystreams',
+ id: 'foo',
+ type: 'Announce',
+ actor: ActivityPub::TagManager.instance.uri_for(actor),
+ '@reverse': {
+ object: {
+ type: 'Undo',
+ id: 'bar',
+ actor: ActivityPub::TagManager.instance.uri_for(actor),
+ },
+ },
+ object: {
+ id: 'bar',
+ type: 'Note',
+ content: 'Lorem ipsum',
+ },
+ signature: {
+ type: 'RsaSignature2017',
+ creator: "#{ActivityPub::TagManager.instance.uri_for(actor)}#foo",
+ created: '2022-03-09T21:57:25Z',
+ signatureValue: 'foo',
+ },
+ }
+ end
+
+ it 'does not process payload' do
+ signature_double = instance_double(ActivityPub::LinkedDataSignature, verify_actor!: nil)
+ allow(ActivityPub::LinkedDataSignature).to receive(:new).and_return(signature_double)
+ allow(ActivityPub::Activity).to receive(:factory)
+
+ subject.call(json, forwarder)
+
+ expect(signature_double).to_not have_received(:verify_actor!)
+ expect(ActivityPub::Activity).to_not have_received(:factory)
+ end
+ end
+
context 'when receiving a fabricated status' do
let!(:actor) do
Fabricate(:account,
diff --git a/spec/system/admin/email_domain_blocks_spec.rb b/spec/system/admin/email_domain_blocks_spec.rb
index 4a54744afd6e53..b86a88a0ff49b5 100644
--- a/spec/system/admin/email_domain_blocks_spec.rb
+++ b/spec/system/admin/email_domain_blocks_spec.rb
@@ -98,7 +98,7 @@ def selection_error_text
end
it 'filters by domain' do
- fill_in 'domain', with: 'example.com'
+ fill_in 'by_domain', with: 'example.com'
click_on I18n.t('admin.email_domain_blocks.search')
expect(page).to have_text('example.com')
@@ -106,7 +106,7 @@ def selection_error_text
end
it 'shows empty page when no such domains are blocked' do
- fill_in 'domain', with: 'mydomain.com'
+ fill_in 'by_domain', with: 'mydomain.com'
click_on I18n.t('admin.email_domain_blocks.search')
expect(page).to have_no_text('mydomain.com')
@@ -114,7 +114,7 @@ def selection_error_text
end
it 'returns to the list when resetting the search' do
- fill_in 'domain', with: 'example.com'
+ fill_in 'by_domain', with: 'example.com'
click_on I18n.t('admin.email_domain_blocks.search')
click_on I18n.t('admin.email_domain_blocks.reset')
diff --git a/spec/validators/email_address_validator_spec.rb b/spec/validators/email_address_validator_spec.rb
new file mode 100644
index 00000000000000..17398269099a12
--- /dev/null
+++ b/spec/validators/email_address_validator_spec.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe EmailAddressValidator do
+ subject { record_class.new }
+
+ context 'with no options' do
+ let(:record_class) do
+ Class.new do
+ include ActiveModel::Validations
+
+ def self.name = 'Record'
+
+ attr_accessor :email
+
+ validates :email, email_address: true
+ end
+ end
+
+ it { is_expected.to allow_value('foo@example.com').for(:email) }
+ it { is_expected.to_not allow_value('foo @ example.com').for(:email) }
+ it { is_expected.to_not allow_value('foo@example.com%foo.example.com').for(:email) }
+ end
+end
diff --git a/spec/workers/web/push_notification_worker_spec.rb b/spec/workers/web/push_notification_worker_spec.rb
index 7ef4cd4fe5169f..ddcebb6a4e270c 100644
--- a/spec/workers/web/push_notification_worker_spec.rb
+++ b/spec/workers/web/push_notification_worker_spec.rb
@@ -68,7 +68,7 @@
end
# We allow subject stub to encrypt the same input than the RFC8291 example
- # rubocop:disable RSpec/SubjectStub
+ # rubocop:disable-next RSpec/SubjectStub
it 'Standard push calls the relevant service with the standard headers' do
# Mock server keys to match RFC example
allow(OpenSSL::PKey::EC).to receive(:generate).and_return(std_as_keys)
@@ -84,7 +84,6 @@
expect(standard_web_push_endpoint_request)
.to have_been_made
end
- # rubocop:enable RSpec/SubjectStub
context 'with invalid record that will fail' do
before do
diff --git a/streaming/package.json b/streaming/package.json
index 4dc8596ef7c05e..64230b9a0db53c 100644
--- a/streaming/package.json
+++ b/streaming/package.json
@@ -20,7 +20,7 @@
"cors": "2.8.6",
"dotenv": "17.4.2",
"express": "5.2.1",
- "ioredis": "5.11.1",
+ "ioredis": "6.0.0",
"jsdom": "30.0.1",
"pg": "8.23.0",
"pg-connection-string": "2.14.0",
diff --git a/vite.config.mts b/vite.config.mts
index 8bc48828940afa..0477177078cb74 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -24,7 +24,7 @@ import { MastodonThemes } from './config/vite/plugin-mastodon-themes';
import { MastodonServiceWorkerChunkPaths } from './config/vite/plugin-sw-chunk-paths';
import { MastodonServiceWorkerLocales } from './config/vite/plugin-sw-locales';
-const jsRoot = path.resolve(__dirname, 'app/javascript');
+const jsRoot = path.resolve(import.meta.dirname, 'app/javascript');
const cssAliasClasses: ReadonlyArray