Merge remote-tracking branch 'soapbox/develop' into translations

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/notifications.ts

@@ -11,7 +11,7 @@ import { getFilters, regexFromFilters } from 'soapbox/selectors';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features';
 import { unescapeHTML } from 'soapbox/utils/html';
-import { NOTIFICATION_TYPES } from 'soapbox/utils/notification';
+import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification';
 import { joinPublicPath } from 'soapbox/utils/static';
 
 import { fetchRelationships } from './accounts';
@@ -195,7 +195,9 @@ const expandNotifications = ({ maxId }: Record<string, any> = {}, done: () => an
 
     if (activeFilter === 'all') {
       if (features.notificationsIncludeTypes) {
-        params.types = NOTIFICATION_TYPES;
+        params.types = NOTIFICATION_TYPES.filter(type => !EXCLUDE_TYPES.includes(type as any));
+      } else {
+        params.exclude_types = EXCLUDE_TYPES;
       }
     } else {
       if (features.notificationsIncludeTypes) {

app/soapbox/components/ui/hstack/hstack.tsx

@@ -40,6 +40,8 @@ interface IHStack {
   space?: keyof typeof spaces
   /** Whether to let the flexbox grow. */
   grow?: boolean
+  /** HTML element to use for container. */
+  element?: keyof JSX.IntrinsicElements,
   /** Extra CSS styles for the <div> */
   style?: React.CSSProperties
   /** Whether to let the flexbox wrap onto multiple lines. */
@@ -48,10 +50,12 @@ interface IHStack {
 
 /** Horizontal row of child elements. */
 const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
-  const { space, alignItems, grow, justifyContent, wrap, className, ...filteredProps } = props;
+  const { space, alignItems, justifyContent, className, grow, element = 'div', wrap, ...filteredProps } = props;
+
+  const Elem = element as 'div';
 
   return (
-    <div
+    <Elem
       {...filteredProps}
       ref={ref}
       className={classNames('flex', {

app/soapbox/components/ui/stack/stack.tsx

@@ -26,24 +26,28 @@ const alignItemsOptions = {
 };
 
 interface IStack extends React.HTMLAttributes<HTMLDivElement> {
-  /** Size of the gap between elements. */
-  space?: keyof typeof spaces
   /** Horizontal alignment of children. */
   alignItems?: keyof typeof alignItemsOptions
+  /** Extra class names on the element. */
+  className?: string
   /** Vertical alignment of children. */
   justifyContent?: keyof typeof justifyContentOptions
-  /** Extra class names on the <div> element. */
-  className?: string
+  /** Size of the gap between elements. */
+  space?: keyof typeof spaces
   /** Whether to let the flexbox grow. */
   grow?: boolean
+  /** HTML element to use for container. */
+  element?: keyof JSX.IntrinsicElements,
 }
 
 /** Vertical stack of child elements. */
 const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
-  const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
+  const { space, alignItems, justifyContent, className, grow, element = 'div', ...filteredProps } = props;
+
+  const Elem = element as 'div';
 
   return (
-    <div
+    <Elem
       {...filteredProps}
       ref={ref}
       className={classNames('flex flex-col', {

app/soapbox/features/auth_token_list/index.tsx

@@ -1,26 +1,45 @@
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
+import { openModal } from 'soapbox/actions/modals';
 import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security';
 import { Button, Card, CardBody, CardHeader, CardTitle, Column, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { Token } from 'soapbox/reducers/security';
 
+import type { Map as ImmutableMap } from 'immutable';
+
 const messages = defineMessages({
   header: { id: 'security.headers.tokens', defaultMessage: 'Sessions' },
   revoke: { id: 'security.tokens.revoke', defaultMessage: 'Revoke' },
+  revokeSessionHeading: { id: 'confirmations.revoke_session.heading', defaultMessage: 'Revoke current session' },
+  revokeSessionMessage: { id: 'confirmations.revoke_session.message', defaultMessage: 'You are about to revoke your current session. You will be signed out.' },
+  revokeSessionConfirm: { id: 'confirmations.revoke_session.confirm', defaultMessage: 'Revoke' },
 });
 
 interface IAuthToken {
   token: Token,
+  isCurrent: boolean,
 }
 
-const AuthToken: React.FC<IAuthToken> = ({ token }) => {
+const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
   const handleRevoke = () => {
-    dispatch(revokeOAuthTokenById(token.id));
+    if (isCurrent)
+      dispatch(openModal('CONFIRM', {
+        icon: require('@tabler/icons/alert-triangle.svg'),
+        heading: intl.formatMessage(messages.revokeSessionHeading),
+        message: intl.formatMessage(messages.revokeSessionMessage),
+        confirm: intl.formatMessage(messages.revokeSessionConfirm),
+        onConfirm: () => {
+          dispatch(revokeOAuthTokenById(token.id));
+        },
+      }));
+    else {
+      dispatch(revokeOAuthTokenById(token.id));
+    }
   };
 
   return (
@@ -42,7 +61,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token }) => {
         </Stack>
 
         <div className='flex justify-end'>
-          <Button theme='primary' onClick={handleRevoke}>
+          <Button theme={isCurrent ? 'danger' : 'primary'} onClick={handleRevoke}>
             {intl.formatMessage(messages.revoke)}
           </Button>
         </div>
@@ -55,6 +74,11 @@ const AuthTokenList: React.FC = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const tokens = useAppSelector(state => state.security.get('tokens').reverse());
+  const currentTokenId = useAppSelector(state => {
+    const currentToken = state.auth.get('tokens').valueSeq().find((token: ImmutableMap<string, any>) => token.get('me') === state.auth.get('me'));
+
+    return currentToken?.get('id');
+  });
 
   useEffect(() => {
     dispatch(fetchOAuthTokens());
@@ -63,7 +87,7 @@ const AuthTokenList: React.FC = () => {
   const body = tokens ? (
     <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
       {tokens.map((token) => (
-        <AuthToken key={token.id} token={token} />
+        <AuthToken key={token.id} token={token} isCurrent={token.id === currentTokenId} />
       ))}
     </div>
   ) : <Spinner />;

app/soapbox/features/compose/components/compose-form.tsx

@@ -132,7 +132,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     setComposeFocused(true);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (e?: React.FormEvent<Element>) => {
     if (text !== autosuggestTextareaRef.current?.textarea?.value) {
       // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
       // Update the state to match the current text
@@ -142,6 +142,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     // Submit disabled:
     const fulltext = [spoilerText, countableText(text)].join('');
 
+    if (e) {
+      e.preventDefault();
+    }
+
     if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxTootChars || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
       return;
     }
@@ -261,7 +265,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   }
 
   return (
-    <Stack className='w-full' space={4} ref={formRef} onClick={handleClick}>
+    <Stack className='w-full' space={4} ref={formRef} onClick={handleClick} element='form' onSubmit={handleSubmit}>
       {scheduledStatusCount > 0 && (
         <Warning
           message={(
@@ -339,7 +343,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
             </div>
           )}
 
-          <Button theme='primary' text={publishText} onClick={handleSubmit} disabled={disabledButton} />
+          <Button type='submit' theme='primary' text={publishText} disabled={disabledButton} />
         </div>
       </div>
     </Stack>

app/soapbox/features/compose/components/polls/poll-form.tsx

@@ -168,7 +168,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
       <Divider />
 
-      <button onClick={handleToggleMultiple} className='text-left'>
+      <button type='button' onClick={handleToggleMultiple} className='text-left'>
         <HStack alignItems='center' justifyContent='between'>
           <Stack>
             <Text weight='medium'>
@@ -197,7 +197,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
       {/* Remove Poll */}
       <div className='text-center'>
-        <button className='text-danger-500' onClick={onRemovePoll}>
+        <button type='button' className='text-danger-500' onClick={onRemovePoll}>
           {intl.formatMessage(messages.removePoll)}
         </button>
       </div>

app/soapbox/features/compose/components/spoiler-input.tsx

@@ -68,7 +68,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
         />
 
         <div className='text-center'>
-          <button className='text-danger-500' onClick={handleRemove}>
+          <button type='button' className='text-danger-500' onClick={handleRemove}>
             {intl.formatMessage(messages.remove)}
           </button>
         </div>
@@ -77,4 +77,4 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
   );
 });
 
-export default SpoilerInput;
+export default SpoilerInput;

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -39,6 +39,8 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const features = useFeatures();
   const intl = useIntl();
 
+  useAppSelector((state) => console.log(state.auth.toJS()));
+
   const authUsers = useAppSelector((state) => state.auth.get('users'));
   const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
 

app/soapbox/utils/notification.ts

@@ -14,6 +14,12 @@ const NOTIFICATION_TYPES = [
   'update',
 ] as const;
 
+/** Notification types to exclude from the "All" filter by default. */
+const EXCLUDE_TYPES = [
+  'pleroma:chat_mention',
+  'chat', // TruthSocial
+] as const;
+
 type NotificationType = typeof NOTIFICATION_TYPES[number];
 
 /** Ensure the Notification is a valid, known type. */
@@ -21,6 +27,7 @@ const validType = (type: string): type is NotificationType => NOTIFICATION_TYPES
 
 export {
   NOTIFICATION_TYPES,
+  EXCLUDE_TYPES,
   NotificationType,
   validType,
 };