Skip to content

アイマストドン独自コンポーネントをhooksに書き換え( #538 )をポート #540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
takayamaki merged 6 commits into from
May 24, 2026
Merged

アイマストドン独自コンポーネントをhooksに書き換え( #538 )をポート #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a1c6be
FoldButton: クラスからhookベースに書き換え
takayamaki May 9, 2026
d27ae53
FavouriteToggle: クラスからhookベースに書き換え
takayamaki May 9, 2026
58dc9f5
AvatarOverlayIcon: hook化 + upstream AvatarOverlayの構造に揃えてシンプル化
takayamaki May 9, 2026
062252c
FavouriteTags: hook化 + 同一name異visibilityタグの両方表示対応
takayamaki May 9, 2026
4665686
Foldable: JS高さ計算を撤廃しCSS Gridのgrid-template-rowsトリックに移行
takayamaki May 9, 2026
0f391e9
compose-panel: お気に入りタグを下詰め+干渉時のみshrinkするレイアウトに調整
takayamaki May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 209 additions & 0 deletions app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay_icon-test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`<AvatarOverlayIcon /> > animate=trueでアニメーションavatarが表示される 1`] = `
<div
className="account__avatar-overlay"
style={
{
"height": 46,
"width": 46,
}
}
>
<div
className="account__avatar-overlay-base"
>
<div
className="account__avatar account__avatar--loading"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
{
"height": "46px",
"width": "46px",
}
}
>
<img
alt=""
onError={[Function]}
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
</div>
<div
className="account__avatar-overlay-overlay"
>
<svg
aria-hidden={true}
className="icon icon-direct account__avatar-overlay-icon-overlay"
height={24}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h200v80H480Zm0-280q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"
/>
</svg>
</div>
</div>
`;

exports[`<AvatarOverlayIcon /> > directのときAlternateEmailアイコンと静止画avatarが表示される 1`] = `
<div
className="account__avatar-overlay"
style={
{
"height": 46,
"width": 46,
}
}
>
<div
className="account__avatar-overlay-base"
>
<div
className="account__avatar account__avatar--loading"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
{
"height": "46px",
"width": "46px",
}
}
>
<img
alt=""
onError={[Function]}
onLoad={[Function]}
src="/static/alice.jpg"
/>
</div>
</div>
<div
className="account__avatar-overlay-overlay"
>
<svg
aria-hidden={true}
className="icon icon-direct account__avatar-overlay-icon-overlay"
height={24}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h200v80H480Zm0-280q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"
/>
</svg>
</div>
</div>
`;

exports[`<AvatarOverlayIcon /> > privateのときLockアイコンが表示される 1`] = `
<div
className="account__avatar-overlay"
style={
{
"height": 46,
"width": 46,
}
}
>
<div
className="account__avatar-overlay-base"
>
<div
className="account__avatar account__avatar--loading"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
{
"height": "46px",
"width": "46px",
}
}
>
<img
alt=""
onError={[Function]}
onLoad={[Function]}
src="/static/alice.jpg"
/>
</div>
</div>
<div
className="account__avatar-overlay-overlay"
>
<svg
aria-hidden={true}
className="icon icon-private account__avatar-overlay-icon-overlay"
height={24}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"
/>
</svg>
</div>
</div>
`;

exports[`<AvatarOverlayIcon /> > unlistedのときQuietTimeアイコンが表示される 1`] = `
<div
className="account__avatar-overlay"
style={
{
"height": 46,
"width": 46,
}
}
>
<div
className="account__avatar-overlay-base"
>
<div
className="account__avatar account__avatar--loading"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
{
"height": "46px",
"width": "46px",
}
}
>
<img
alt=""
onError={[Function]}
onLoad={[Function]}
src="/static/alice.jpg"
/>
</div>
</div>
<div
className="account__avatar-overlay-overlay"
>
<svg
aria-hidden={true}
className="icon icon-unlisted account__avatar-overlay-icon-overlay"
height={24}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M484-80q-84 0-157.5-32t-128-86.5Q144-253 112-326.5T80-484q0-146 93-257.5T410-880q-18 99 11 193.5T521-521q71 71 165.5 100T880-410q-26 144-138 237T484-80Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T464-465q-61-61-97-138t-43-163q-77 43-120.5 118.5T160-484q0 135 94.5 229.5T484-160Zm-20-305Z"
/>
</svg>
</div>
</div>
`;
110 changes: 110 additions & 0 deletions app/javascript/mastodon/components/__tests__/__snapshots__/fold_button-test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`<FoldButton /> > applies transition styles when animate is true 1`] = `
<button
aria-label="toggle"
className="icon-button active"
onClick={[Function]}
style={
{
"fontSize": "20px",
"height": "25.7142858px",
"lineHeight": "20px",
"width": "25.7142858px",
}
}
title="toggle"
>
<svg
aria-hidden={true}
className="icon icon-down compose__extra__header__icon"
height={24}
style={
{
"transform": "rotate(180deg)",
"transition": "transform 300ms ease-in-out",
}
}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480-360 280-560h400L480-360Z"
/>
</svg>
</button>
`;

exports[`<FoldButton /> > renders a button element with default props 1`] = `
<button
aria-label="toggle"
className="icon-button"
onClick={[Function]}
style={
{
"fontSize": "20px",
"height": "25.7142858px",
"lineHeight": "20px",
"width": "25.7142858px",
}
}
title="toggle"
>
<svg
aria-hidden={true}
className="icon icon-down compose__extra__header__icon"
height={24}
style={
{
"transform": "rotate(0deg)",
}
}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480-360 280-560h400L480-360Z"
/>
</svg>
</button>
`;

exports[`<FoldButton /> > rotates icon 180deg when active 1`] = `
<button
aria-label="toggle"
className="icon-button active"
onClick={[Function]}
style={
{
"fontSize": "20px",
"height": "25.7142858px",
"lineHeight": "20px",
"width": "25.7142858px",
}
}
title="toggle"
>
<svg
aria-hidden={true}
className="icon icon-down compose__extra__header__icon"
height={24}
style={
{
"transform": "rotate(180deg)",
}
}
title=""
viewBox="0 -960 960 960"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M480-360 280-560h400L480-360Z"
/>
</svg>
</button>
`;
38 changes: 38 additions & 0 deletions app/javascript/mastodon/components/__tests__/avatar_overlay_icon-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Record } from 'immutable';

import renderer from 'react-test-renderer';

import AvatarOverlayIcon from '../avatar_overlay_icon';

const AccountRecord = Record({
id: '1',
acct: 'alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});

describe('<AvatarOverlayIcon />', () => {
const account = new AccountRecord();

it('directのときAlternateEmailアイコンと静止画avatarが表示される', () => {
const tree = renderer.create(<AvatarOverlayIcon account={account} visibility='direct' animate={false} />).toJSON();
expect(tree).toMatchSnapshot();
expect(JSON.stringify(tree)).toContain('/static/alice.jpg');
});

it('privateのときLockアイコンが表示される', () => {
const tree = renderer.create(<AvatarOverlayIcon account={account} visibility='private' animate={false} />).toJSON();
expect(tree).toMatchSnapshot();
});

it('unlistedのときQuietTimeアイコンが表示される', () => {
const tree = renderer.create(<AvatarOverlayIcon account={account} visibility='unlisted' animate={false} />).toJSON();
expect(tree).toMatchSnapshot();
});

it('animate=trueでアニメーションavatarが表示される', () => {
const tree = renderer.create(<AvatarOverlayIcon account={account} visibility='direct' animate />).toJSON();
expect(tree).toMatchSnapshot();
expect(JSON.stringify(tree)).toContain('/animated/alice.gif');
});
});
Loading
Loading