[Glitch] Add UI support for displaying quotes of other people's posts

Port d51723bb57 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/quotes/index.tsx

@@ -12,6 +12,8 @@ import { ColumnHeader } from 'flavours/glitch/components/column_header';
 import { Icon } from 'flavours/glitch/components/icon';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import StatusList from 'flavours/glitch/components/status_list';
+import { useIdentity } from 'flavours/glitch/identity_context';
+import { domain } from 'flavours/glitch/initial_state';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
 
 import Column from '../ui/components/column';
@@ -31,9 +33,18 @@ export const Quotes: React.FC<{
 
   const statusId = params?.statusId;
 
+  const { accountId: me } = useIdentity();
+
   const isCorrectStatusId: boolean = useAppSelector(
     (state) => state.status_lists.getIn(['quotes', 'statusId']) === statusId,
   );
+  const quotedAccountId = useAppSelector(
+    (state) =>
+      state.statuses.getIn([statusId, 'account']) as string | undefined,
+  );
+  const quotedAccount = useAppSelector((state) =>
+    quotedAccountId ? state.accounts.get(quotedAccountId) : undefined,
+  );
   const statusIds = useAppSelector((state) =>
     state.status_lists.getIn(['quotes', 'items'], emptyList),
   );
@@ -74,6 +85,32 @@ export const Quotes: React.FC<{
     />
   );
 
+  let prependMessage;
+
+  if (me === quotedAccountId) {
+    prependMessage = null;
+  } else if (quotedAccount?.username === quotedAccount?.acct) {
+    // Local account, we know this to be exhaustive
+    prependMessage = (
+      <div className='follow_requests-unlocked_explanation'>
+        <FormattedMessage
+          id='status.quotes.local_other_disclaimer'
+          defaultMessage='Quotes rejected by the author will not be shown.'
+        />
+      </div>
+    );
+  } else {
+    prependMessage = (
+      <div className='follow_requests-unlocked_explanation'>
+        <FormattedMessage
+          id='status.quotes.remote_other_disclaimer'
+          defaultMessage='Only quotes from {domain} are guaranteed to be shown here. Quotes rejected by the author will not be shown.'
+          values={{ domain: <strong>{domain}</strong> }}
+        />
+      </div>
+    );
+  }
+
   return (
     <Column bindToDocument={!multiColumn}>
       <ColumnHeader
@@ -100,6 +137,7 @@ export const Quotes: React.FC<{
         isLoading={isLoading}
         emptyMessage={emptyMessage}
         bindToDocument={!multiColumn}
+        prepend={prependMessage}
       />
 
       <Helmet>

app/javascript/flavours/glitch/features/status/components/detailed_status.tsx

@@ -32,7 +32,7 @@ import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
 import { Audio } from 'flavours/glitch/features/audio';
 import scheduleIdleTask from 'flavours/glitch/features/ui/util/schedule_idle_task';
 import { Video } from 'flavours/glitch/features/video';
-import { me } from 'flavours/glitch/initial_state';
+import { useIdentity } from 'flavours/glitch/identity_context';
 import { useAppSelector } from 'flavours/glitch/store';
 
 import Card from './card';
@@ -95,6 +95,8 @@ export const DetailedStatus: React.FC<{
       state.local_settings.getIn(['media', 'fullwidth'], false) as boolean,
   );
 
+  const { signedIn } = useIdentity();
+
   const handleOpenVideo = useCallback(
     (options: VideoModalOptions) => {
       const lang = (status.getIn(['translation', 'language']) ||
@@ -327,7 +329,7 @@ export const DetailedStatus: React.FC<{
 
   if (['private', 'direct'].includes(status.get('visibility') as string)) {
     quotesLink = '';
-  } else if (status.getIn(['account', 'id']) === me) {
+  } else if (signedIn) {
     quotesLink = (
       <Link
         to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/quotes`}