Merge branch 'wip' into develop

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

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

@@ -1,171 +1,99 @@
-import React, { useCallback, useState } from 'react';
-import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
+import React, { useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { deactivateUserModal, deleteUserModal } from 'pl-fe/actions/moderation';
-import DropdownMenu from 'pl-fe/components/dropdown-menu';
 import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
-import Accordion from 'pl-fe/components/ui/accordion';
 import Avatar from 'pl-fe/components/ui/avatar';
-import Button from 'pl-fe/components/ui/button';
 import HStack from 'pl-fe/components/ui/hstack';
 import Stack from 'pl-fe/components/ui/stack';
 import Text from 'pl-fe/components/ui/text';
-import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
+import Emojify from 'pl-fe/features/emoji/emojify';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
-import { useReport, useResolveReport } from 'pl-fe/queries/admin/use-reports';
+import { useReport } from 'pl-fe/queries/admin/use-reports';
 import { makeGetReport } from 'pl-fe/selectors';
-import toast from 'pl-fe/toast';
-
-import ReportStatus from './report-status';
-
-const messages = defineMessages({
-  reportClosed: { id: 'admin.reports.report_closed_message', defaultMessage: 'Report on @{name} was closed' },
-  deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
-  deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
-});
 
 interface IReport {
   id: string;
 }
 
 const Report: React.FC<IReport> = ({ id }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
   const { data: minifiedReport } = useReport(id);
-  const { mutate: resolveReport } = useResolveReport(id);
 
   const getReport = useCallback(makeGetReport(), []);
 
   const report = useAppSelector((state) => getReport(state, minifiedReport));
 
-  const [accordionExpanded, setAccordionExpanded] = useState(false);
-
   if (!report) return null;
 
   const account = report.account;
   const targetAccount = report.target_account!;
 
-  const makeMenu = () => [{
-    text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
-    action: handleDeactivateUser,
-    icon: require('@tabler/icons/outline/hourglass-empty.svg'),
-  }, {
-    text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
-    action: handleDeleteUser,
-    icon: require('@tabler/icons/outline/trash.svg'),
-    destructive: true,
-  }];
-
-  const handleCloseReport = () => {
-    resolveReport(undefined, {
-      onSuccess: () => {
-        const message = intl.formatMessage(messages.reportClosed, { name: targetAccount.username as string });
-        toast.success(message);
-      },
-    });
-  };
-
-  const handleDeactivateUser = () => {
-    const accountId = targetAccount.id;
-    dispatch(deactivateUserModal(intl, accountId!, () => handleCloseReport()));
-  };
-
-  const handleDeleteUser = () => {
-    const accountId = targetAccount.id as string;
-    dispatch(deleteUserModal(intl, accountId!, () => handleCloseReport()));
-  };
-
-  const handleAccordionToggle = (setting: boolean) => {
-    setAccordionExpanded(setting);
-  };
-
-  const menu = makeMenu();
   const statuses = report.statuses;
   const statusCount = statuses.length;
-  const acct = targetAccount.acct;
   const reporterAcct = account?.acct;
 
   return (
-    <HStack space={3} className='p-3' key={report.id}>
-      <Link to={`/@${acct}`} title={acct}>
+    <Link to={`/pl-fe/admin/reports/${id}`} className='block rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2} className='h-full justify-between'>
         <HoverAccountWrapper accountId={targetAccount.id} element='span'>
-          <Avatar
-            src={targetAccount.avatar}
-            alt={targetAccount.avatar_description}
-            size={32}
-            isCat={targetAccount.is_cat}
-            username={targetAccount.username}
-          />
-        </HoverAccountWrapper>
-      </Link>
-
-      <Stack space={3} className='overflow-hidden' grow>
-        <Text tag='h4' weight='bold'>
-          <FormattedMessage
-            id='admin.reports.report_title'
-            defaultMessage='Report on {acct}'
-            values={{ acct: (
-              <Link to={`/@${acct}`} title={acct}>
-                <HoverAccountWrapper accountId={targetAccount.id} element='span'>
-                  @{acct}
-                </HoverAccountWrapper>
-              </Link>
-            ) }}
-          />
-        </Text>
-
-        {statusCount > 0 && (
-          <Accordion
-            headline={`Reported posts (${statusCount})`}
-            expanded={accordionExpanded}
-            onToggle={handleAccordionToggle}
-          >
-            <Stack space={4}>
-              {statuses.map(status => (
-                <ReportStatus
-                  key={status.id}
-                  status={status}
-                />
-              ))}
+          <HStack alignItems='center' space={2}>
+            <Avatar
+              src={targetAccount.avatar}
+              alt={targetAccount.avatar_description}
+              size={40}
+              isCat={targetAccount.is_cat}
+              username={targetAccount.username}
+            />
+            <Stack>
+              <Text size='sm' weight='semibold' truncate>
+                <Emojify text={targetAccount.display_name} emojis={targetAccount.emojis} />
+              </Text>
+              <Text size='sm' theme='muted' direction='ltr' truncate>
+                @{targetAccount.fqn}
+              </Text>
             </Stack>
-          </Accordion>
+          </HStack>
+        </HoverAccountWrapper>
+
+        {!!account && (
+          <HStack space={1} alignItems='center' wrap>
+            <Text size='sm' theme='muted'>
+              <FormattedMessage
+                id='admin.reports.account'
+                defaultMessage='Reported by:'
+              />
+            </Text>
+            <HoverAccountWrapper accountId={account.id} element='span'>
+              @{reporterAcct}
+            </HoverAccountWrapper>
+          </HStack>
         )}
 
-        <Stack>
-          {!!report.comment && report.comment.length > 0 && (
-            <Text tag='blockquote'>
-              {report.comment}
+        {!!report.comment && report.comment.length > 0 && (
+          <HStack space={1} alignItems='center' wrap>
+            <Text size='sm' theme='muted'>
+              <FormattedMessage
+                id='admin.reports.comment'
+                defaultMessage='Comment:'
+              />
             </Text>
-          )}
+            {report.comment}
+          </HStack>
+        )}
 
-          {!!account && (
-            <HStack space={1}>
-              <Text theme='muted' tag='span'>&mdash;</Text>
-
-              <Link
-                to={`/@${reporterAcct}`}
-                title={reporterAcct}
-                className='text-primary-600 hover:underline dark:text-accent-blue'
-              >
-                <HoverAccountWrapper accountId={account.id} element='span'>
-                  @{reporterAcct}
-                </HoverAccountWrapper>
-              </Link>
-            </HStack>
-          )}
-        </Stack>
+        {statusCount > 0 && (
+          <HStack space={1} alignItems='center' wrap>
+            <Text size='sm' theme='muted'>
+              <FormattedMessage
+                id='admin.reports.statuses'
+                defaultMessage='Reported posts:'
+              />
+            </Text>
+            {statusCount}
+          </HStack>
+        )}
       </Stack>
-
-      <HStack space={2} alignItems='start' className='flex-none'>
-        <Button onClick={handleCloseReport}>
-          <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
-        </Button>
-
-        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
-      </HStack>
-    </HStack>
+    </Link>
   );
 };
 

packages/pl-fe/src/features/ui/index.tsx

@@ -135,6 +135,7 @@ import {
   RegistrationPage,
   Relays,
   RemoteTimeline,
+  Report,
   Rules,
   ScheduledStatuses,
   Search,
@@ -330,6 +331,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = React.memo(({ chil
       <WrappedRoute path='/pl-fe/admin' staffOnly layout={AdminLayout} component={Dashboard} content={children} exact />
       <WrappedRoute path='/pl-fe/admin/approval' staffOnly layout={AdminLayout} component={Dashboard} content={children} exact />
       <WrappedRoute path='/pl-fe/admin/reports' staffOnly layout={AdminLayout} component={Dashboard} content={children} exact />
+      <WrappedRoute path='/pl-fe/admin/reports/:reportId' staffOnly layout={AdminLayout} component={Report} content={children} exact />
       <WrappedRoute path='/pl-fe/admin/log' staffOnly layout={AdminLayout} component={ModerationLog} content={children} exact />
       <WrappedRoute path='/pl-fe/admin/users' staffOnly layout={AdminLayout} component={UserIndex} content={children} exact />
       <WrappedRoute path='/pl-fe/admin/theme' staffOnly layout={AdminLayout} component={ThemeEditor} content={children} exact />

packages/pl-fe/src/features/ui/util/async-components.ts

@@ -78,6 +78,7 @@ export const PinnedStatuses = lazy(() => import('pl-fe/pages/status-lists/pinned
 export const PlFeConfig = lazy(() => import('pl-fe/pages/dashboard/pl-fe-config'));
 export const PublicTimeline = lazy(() => import('pl-fe/pages/timelines/public-timeline'));
 export const Quotes = lazy(() => import('pl-fe/pages/status-lists/quotes'));
+export const Report = lazy(() => import('pl-fe/pages/dashboard/report'));
 export const RegisterInvite = lazy(() => import('pl-fe/pages/auth/register-with-invite'));
 export const RegistrationPage = lazy(() => import('pl-fe/pages/auth/registration'));
 export const Relays = lazy(() => import('pl-fe/pages/dashboard/relays'));

packages/pl-fe/src/hooks/use-features.ts

@@ -1,8 +1,13 @@
-import { Features } from 'pl-api';
+import * as plapi from 'pl-api';
+import { type Features } from 'pl-api';
+import * as v from 'valibot';
 
 import { useAppSelector } from './use-app-selector';
 
+(window as any).v = v;
+(window as any).plapi = plapi;
+
 /** Get features for the current instance. */
-const useFeatures = (): Features => useAppSelector(state => state.auth.client.features);
+const useFeatures = (): Features => ({ ...useAppSelector(state => state.auth.client.features), emojiReacts: true, emojiReactsList: true });
 
 export { useFeatures };

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

@@ -188,11 +188,11 @@
   "admin.relays.new.url_placeholder": "Instance relay URL",
   "admin.relays.unfollow": "Unfollow",
   "admin.relays.url": "Instance URL:",
-  "admin.reports.actions.close": "Close",
+  "admin.reports.account": "Reported by:",
   "admin.reports.actions.view_status": "View post",
+  "admin.reports.comment": "Comment:",
   "admin.reports.empty_message": "There are no open reports. If a user gets reported, they will show up here.",
-  "admin.reports.report_closed_message": "Report on @{name} was closed",
-  "admin.reports.report_title": "Report on {acct}",
+  "admin.reports.statuses": "Reported posts:",
   "admin.rule.priority": "Priority:",
   "admin.rules.action": "Create rule",
   "admin.rules.delete": "Delete",
@@ -459,6 +459,7 @@
   "column.reactions": "Reactions",
   "column.reblogs": "Reposts",
   "column.registration": "Sign up",
+  "column.report": "Report #{id}",
   "column.scheduled_statuses": "Scheduled posts",
   "column.search": "Search",
   "column.settings_store": "Settings store",

packages/pl-fe/src/pages/dashboard/report.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import Column from 'pl-fe/components/ui/column';
+import { useReport } from 'pl-fe/queries/admin/use-reports';
+
+const messages = defineMessages({
+  columnHeading: { id: 'column.report', defaultMessage: 'Report #{id}' },
+});
+
+type RouteParams = { reportId: string };
+
+interface IReportPage {
+  params: RouteParams;
+}
+
+const ReportPage: React.FC<IReportPage> = ({ params }) => {
+  const intl = useIntl();
+  const { data: report } = useReport(params.reportId);
+
+  return (
+    <Column label={intl.formatMessage(messages.columnHeading, { id: params.reportId })}>
+      {report?.category}
+    </Column>
+  );
+};
+
+export { ReportPage as default };

packages/pl-fe/src/reducers/list-editor.ts

@@ -63,6 +63,7 @@ const listEditorReducer = (state: State = initialState, action: ListsAction): St
     case LIST_EDITOR_RESET:
       return initialState;
     case LIST_EDITOR_SETUP:
+      console.log(action.list);
       return create(state, (draft) => {
         draft.listId = action.list.id;
         draft.title = action.list.title;