pl-fe: wip filtering reports

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/admin/components/admin-tabs.tsx

@@ -26,7 +26,7 @@ const AdminTabs: React.FC = () => {
   }, {
     name: '/pl-fe/admin/reports',
     text: intl.formatMessage(messages.reports),
-    to: '/pl-fe/admin/reports',
+    to: '/pl-fe/admin/reports?resolved=false',
     count: pendingReportsCount,
   }, {
     name: '/pl-fe/admin/approval',

packages/pl-fe/src/features/admin/tabs/dashboard.tsx

@@ -93,14 +93,14 @@ const Dashboard: React.FC = () => {
               measure='opened_reports'
               startAt={monthAgo}
               endAt={today}
-              to='/pl-fe/admin/reports'
+              to='/pl-fe/admin/reports?resolved=false'
               label={<FormattedMessage id='admin.counters.opened_reports' defaultMessage='reports opened' />}
             />
             <Counter
               measure='resolved_reports'
               startAt={monthAgo}
               endAt={today}
-              to='/pl-fe/admin/reports'
+              to='/pl-fe/admin/reports?resolved=true'
               label={<FormattedMessage id='admin.counters.resolved_reports' defaultMessage='reports resolved' />}
             />
           </>
@@ -115,7 +115,7 @@ const Dashboard: React.FC = () => {
           label={<FormattedMessage id='admin.dashcounters.domain_count_label' defaultMessage='peers' />}
         />
         <List>
-          <ListItem size='sm' to='/pl-fe/admin/reports' label={<FormattedMessage id='admin.links.pending_reports' defaultMessage='{count, plural, one {{formattedCount} pending report} other {{formattedCount} pending reports}}' values={{ count: pendingReportsCount, formattedCount: <strong><FormattedNumber value={pendingReportsCount} /></strong> }} />} />
+          <ListItem size='sm' to='/pl-fe/admin/reports?resolved=false' label={<FormattedMessage id='admin.links.pending_reports' defaultMessage='{count, plural, one {{formattedCount} pending report} other {{formattedCount} pending reports}}' values={{ count: pendingReportsCount, formattedCount: <strong><FormattedNumber value={pendingReportsCount} /></strong> }} />} />
           <ListItem size='sm' to='/pl-fe/admin/users' label={<FormattedMessage id='admin.links.pending_users' defaultMessage='{count, plural, one {{formattedCount} pending user} other {{formattedCount} pending users}}' values={{ count: awaitingApprovalCount, formattedCount: <strong><FormattedNumber value={awaitingApprovalCount} /></strong> }} />} />
           {/* <ListItem size='sm' to='/pl-fe/admin' label={<FormattedMessage id='admin.links.pending_tags' defaultMessage='{count} pending tags' values={{ count: <strong>0</strong> }} />} />
           <ListItem size='sm' to='/pl-fe/admin' label={<FormattedMessage id='admin.links.pending_appeals' defaultMessage='{count} pending appeals' values={{ count: <strong>0</strong> }} />} /> */}

packages/pl-fe/src/features/admin/tabs/reports.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedList, FormattedMessage, useIntl } from 'react-intl';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 
+import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import ScrollableList from 'pl-fe/components/scrollable-list';
+import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Text from 'pl-fe/components/ui/text';
 import { useReports } from 'pl-fe/queries/admin/use-reports';
 
 import Report from '../components/report';
@@ -14,21 +19,63 @@ const messages = defineMessages({
 
 const Reports: React.FC = () => {
   const intl = useIntl();
+  const [params, setParams] = useSearchParams();
+
+  const resolved = params.get('resolved');
+  const accountId = params.get('account_id') || undefined;
+  const targetAccountId = params.get('target_account_id') || undefined;
+
+  const { account } = useAccount(accountId);
+  const { account: targetAccount } = useAccount(targetAccountId);
 
   const { data: reportIds = [], isPending } = useReports({
-    resolved: false,
+    resolved: resolved === 'true' ? true : resolved === 'false' ? false : undefined,
+    account_id: accountId,
+    target_account_id: targetAccountId,
   });
 
+  const handleUnsetAccounts = () => {
+    params.delete('account_id');
+    params.delete('target_account_id');
+    setParams(params => Object.fromEntries(params.entries()));
+  };
+
   return (
-    <ScrollableList
-      scrollKey='adminReports'
-      isLoading={isPending}
-      showLoading={isPending}
-      emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
-    >
-      {reportIds.map(report => report && <Report id={report} key={report} />)}
-    </ScrollableList>
+    <>
+      {(accountId || targetAccountId) && (
+        <HStack className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800' alignItems='center' space={2}>
+          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccounts} />
+          <Text>
+            <FormattedMessage
+              id='column.admin.reports.filter_message'
+              defaultMessage='You are displaying reports {query}.'
+              values={{ query: <FormattedList value={[
+                account && <FormattedMessage
+                  id='column.admin.reports.filter_message.account'
+                  defaultMessage='from @{acct}'
+                  values={{ acct: <strong className='break-words'>{account?.acct}</strong> }}
+                />,
+                targetAccount && <FormattedMessage
+                  id='column.admin.reports.filter_message.target_account'
+                  defaultMessage='targeting @{acct}'
+                  values={{ acct: <strong className='break-words'>{targetAccount?.acct}</strong> }}
+                />,
+              ]}
+              /> }}
+            />
+          </Text>
+        </HStack>
+      )}
+      <ScrollableList
+        scrollKey='adminReports'
+        isLoading={isPending}
+        showLoading={isPending}
+        emptyMessage={intl.formatMessage(messages.emptyMessage)}
+        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      >
+        {reportIds.map(report => report && <Report id={report} key={report} />)}
+      </ScrollableList>
+    </>
   );
 };
 

packages/pl-fe/src/locales/en.json

@@ -359,6 +359,9 @@
   "column.admin.moderation_log": "Moderation log",
   "column.admin.relays": "Instance relays",
   "column.admin.reports": "Reports",
+  "column.admin.reports.filter_message": "You are displaying reports {query}.",
+  "column.admin.reports.filter_message.account": "from @{acct}",
+  "column.admin.reports.filter_message.target_account": "targeting @{acct}",
   "column.admin.reports.menu.moderation_log": "Moderation log",
   "column.admin.rules": "Instance rules",
   "column.admin.users": "Users",

packages/pl-fe/src/pages/search/search.tsx

@@ -326,7 +326,7 @@ const SearchResults = () => {
   return (
     <>
       {accountId ? (
-        <HStack className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800' space={2}>
+        <HStack className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800' alignItems='center' space={2}>
           <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccount} />
           <Text truncate>
             <FormattedMessage