diff --git a/src/components/generic-accounts.css b/src/components/generic-accounts.css index ad33900a..ab82ee97 100644 --- a/src/components/generic-accounts.css +++ b/src/components/generic-accounts.css @@ -1,4 +1,24 @@ #generic-accounts-container { + .post-preview { + --max-height: 120px; + max-height: var(--max-height); + overflow: hidden; + margin-block: 8px; + border: 1px solid var(--outline-color); + border-radius: 8px; + pointer-events: none; + + .status { + font-size: calc(var(--text-size) * 0.9); + mask-image: linear-gradient( + to bottom, + black calc(var(--max-height) / 2), + transparent calc(var(--max-height) - 8px) + ); + filter: saturate(0.5); + } + } + .accounts-list { --list-gap: 16px; list-style: none; diff --git a/src/components/generic-accounts.jsx b/src/components/generic-accounts.jsx index 0fdd557e..1b502a94 100644 --- a/src/components/generic-accounts.jsx +++ b/src/components/generic-accounts.jsx @@ -12,10 +12,12 @@ import useLocationChange from '../utils/useLocationChange'; import AccountBlock from './account-block'; import Icon from './icon'; import Loader from './loader'; +import Status from './status'; export default function GenericAccounts({ instance, excludeRelationshipAttrs = [], + postID, onClose = () => {}, }) { const { masto, instance: currentInstance } = api(); @@ -129,6 +131,8 @@ export default function GenericAccounts({ } }, [snapStates.reloadGenericAccounts.counter]); + const post = states.statuses[postID]; + return (