From 57b2527b55c957720750f77e6892edcea579d0bc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 6 Sep 2022 13:09:31 -0500
Subject: [PATCH 01/15] StatusActionBar: copy status.url --> status.uri

---
 app/soapbox/components/status-action-bar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index c07bf818d..5bce513a5 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -301,12 +301,12 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
-    const { url }  = status;
+    const { uri }  = status;
     const textarea = document.createElement('textarea');
 
     e.stopPropagation();
 
-    textarea.textContent    = url;
+    textarea.textContent    = uri;
     textarea.style.position = 'fixed';
 
     document.body.appendChild(textarea);

From 99e5e4492a732843f8993d2701764fb222ff5426 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 7 Sep 2022 08:09:32 -0400
Subject: [PATCH 02/15] Extend Divider with 'textSize' prop

---
 app/soapbox/components/ui/divider/divider.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/divider/divider.tsx b/app/soapbox/components/ui/divider/divider.tsx
index 033f139ae..343a1b948 100644
--- a/app/soapbox/components/ui/divider/divider.tsx
+++ b/app/soapbox/components/ui/divider/divider.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 
+import Text from '../text/text';
+
+import type { Sizes as TextSizes } from '../text/text';
+
 interface IDivider {
   text?: string
+  textSize?: TextSizes
 }
 
 /** Divider */
-const Divider = ({ text }: IDivider) => (
+const Divider = ({ text, textSize = 'md' }: IDivider) => (
   <div className='relative' data-testid='divider'>
     <div className='absolute inset-0 flex items-center' aria-hidden='true'>
       <div className='w-full border-t-2 border-gray-100 dark:border-gray-800 border-solid' />
@@ -13,7 +18,9 @@ const Divider = ({ text }: IDivider) => (
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='px-2 bg-white text-gray-400' data-testid='divider-text'>{text}</span>
+        <span className='px-2 bg-white dark:bg-gray-900 text-gray-400' data-testid='divider-text'>
+          <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
+        </span>
       </div>
     )}
   </div>

From 81ea892ff7e42b17d5e0e36a64b7853af3eeaa82 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 7 Sep 2022 08:11:25 -0400
Subject: [PATCH 03/15] Export TextSizes type

---
 app/soapbox/components/ui/text/text.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index d25554972..2e0736809 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
 type Weights = 'normal' | 'medium' | 'semibold' | 'bold'
-type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 type Alignments = 'left' | 'center' | 'right'
 type TrackingSizes = 'normal' | 'wide'
 type TransformProperties = 'uppercase' | 'normal'

From 268211615127a3c649dff50de7912a3dac896b5c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 7 Sep 2022 08:17:11 -0400
Subject: [PATCH 04/15] Update 'danger' button styles

---
 app/soapbox/components/ui/button/useButtonStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 286a7751f..ecec3de1f 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -25,7 +25,7 @@ const useButtonStyles = ({
     tertiary:
       'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
     accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
-    danger: 'border-transparent bg-danger-600 text-gray-100 hover:bg-danger-500 dark:hover:bg-danger-700 focus:bg-danger-600 dark:focus:bg-danger-600',
+    danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 dark:focus:bg-danger-600',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
     outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   };

From d4209c86b7183d90d9d282070efd30915eca3df9 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 7 Sep 2022 08:21:14 -0400
Subject: [PATCH 05/15] Extend input with new prepend/append options

---
 app/soapbox/components/ui/input/input.tsx | 39 ++++++++++++++++-------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 5ca748ebc..2bd77dbfa 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -20,7 +20,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   className?: string,
   /** Extra class names for the outer <div> element. */
   outerClassName?: string,
-  /** URL to the svg icon. Cannot be used with addon. */
+  /** URL to the svg icon. Cannot be used with prepend. */
   icon?: string,
   /** Internal input name. */
   name?: string,
@@ -30,12 +30,13 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   value?: string | number,
   /** Change event handler for the input. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
-  /** HTML input type. */
-  type?: 'text' | 'number' | 'email' | 'tel' | 'password',
   /** Whether to display the input in red. */
   hasError?: boolean,
   /** An element to display as prefix to input. Cannot be used with icon. */
-  addon?: React.ReactElement,
+  prepend?: React.ReactElement,
+  /** An element to display as suffix to input. Cannot be used with password type. */
+  append?: React.ReactElement,
+  isSearch?: boolean,
 }
 
 /** Form input element. */
@@ -43,7 +44,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, outerClassName, hasError, addon, ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, hasError, append, prepend, isSearch, ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -54,16 +55,23 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
     }, []);
 
     return (
-      <div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
+      <div
+        className={
+          classNames('mt-1 relative shadow-sm', outerClassName, {
+            'rounded-md': !isSearch,
+            'rounded-full': isSearch,
+          })
+        }
+      >
         {icon ? (
           <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
             <Icon src={icon} className='h-4 w-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
           </div>
         ) : null}
 
-        {addon ? (
+        {prepend ? (
           <div className='absolute inset-y-0 left-0 flex items-center'>
-            {addon}
+            {prepend}
           </div>
         ) : null}
 
@@ -72,15 +80,24 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           type={revealed ? 'text' : type}
           ref={ref}
           className={classNames({
-            'bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            'text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
               true,
-            'pr-7': isPassword,
+            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': !isSearch,
+            'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': isSearch,
+            'pr-7': isPassword || append,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
-            'pl-16': typeof addon !== 'undefined',
+            'pl-16': typeof prepend !== 'undefined',
           }, className)}
         />
 
+        {/* eslint-disable-next-line no-nested-ternary */}
+        {append ? (
+          <div className='absolute inset-y-0 right-0 flex items-center pr-3'>
+            {append}
+          </div>
+        ) : null}
+
         {isPassword ? (
           <Tooltip
             text={

From 494cd622a5ac84aec4cca99df73e4c9f8e5c34a9 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 7 Sep 2022 08:24:44 -0400
Subject: [PATCH 06/15] Update usage of input

---
 app/soapbox/components/ui/phone-input/phone-input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
index 81d2723c4..7de0437ce 100644
--- a/app/soapbox/components/ui/phone-input/phone-input.tsx
+++ b/app/soapbox/components/ui/phone-input/phone-input.tsx
@@ -67,7 +67,7 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
     <Input
       onChange={handleChange}
       value={nationalNumber}
-      addon={
+      prepend={
         <CountryCodeDropdown
           countryCode={countryCode}
           onChange={setCountryCode}

From 0940896448bd91a7254042351a9b0815859968f0 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 31 Aug 2022 14:31:31 -0400
Subject: [PATCH 07/15] Fix nested <div> within <p> error

---
 app/soapbox/components/scrollable_list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index d5bfd6025..941e130a6 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -162,7 +162,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
           {isLoading ? (
             <Spinner />
           ) : (
-            <Text>{emptyMessage}</Text>
+            emptyMessage
           )}
         </Card>
       </div>

From 6486f3b539ae10158e2bec3b496c43f5dd4ebc8a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 31 Aug 2022 14:31:44 -0400
Subject: [PATCH 08/15] Fix ref passed to Stack error

---
 app/soapbox/components/ui/stack/stack.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 3398d8df2..18796baaa 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -37,12 +37,13 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack: React.FC<IStack> = (props) => {
+const Stack: React.FC<IStack> = React.forwardRef((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
 
   return (
     <div
       {...filteredProps}
+      ref={ref}
       className={classNames('flex flex-col', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
@@ -54,6 +55,6 @@ const Stack: React.FC<IStack> = (props) => {
       }, className)}
     />
   );
-};
+});
 
 export default Stack;

From c47eda8a0ac1cc7d37fccc5e5e3018b4f769f228 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 31 Aug 2022 14:31:59 -0400
Subject: [PATCH 09/15] Fix non-valid DOM attributes getting passed to input

---
 .../features/compose/components/search.tsx    | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 9c1aab765..ec7c89468 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -115,27 +115,34 @@ const Search = (props: ISearch) => {
   ];
 
   const hasValue = value.length > 0 || submitted;
-  const Component = autosuggest ? AutosuggestAccountInput : 'input';
+  const componentProps: any = {
+    className: 'block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm',
+    type: 'text',
+    id: 'search',
+    placeholder: intl.formatMessage(messages.placeholder),
+    value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    autoFocus: autoFocus,
+  };
+
+  if (autosuggest) {
+    componentProps.onSelected = handleSelected;
+    componentProps.menu = makeMenu();
+    componentProps.autoSelect = false;
+  }
 
   return (
     <div className='w-full'>
       <label htmlFor='search' className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
 
       <div className='relative'>
-        <Component
-          className='block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm'
-          type='text'
-          id='search'
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onSelected={handleSelected}
-          autoFocus={autoFocus}
-          autoSelect={false}
-          menu={makeMenu()}
-        />
+        {autosuggest ? (
+          <AutosuggestAccountInput {...componentProps} />
+        ) : (
+          <input {...componentProps} />
+        )}
 
         <div
           role='button'

From a190eba0061366a1db227c8622a6582b774f9b89 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 31 Aug 2022 14:32:13 -0400
Subject: [PATCH 10/15] Add polyfill for ResizeObserver

---
 app/soapbox/hooks/useDimensions.ts | 3 ++-
 package.json                       | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/hooks/useDimensions.ts b/app/soapbox/hooks/useDimensions.ts
index 2a265c4a6..bf7fc78b8 100644
--- a/app/soapbox/hooks/useDimensions.ts
+++ b/app/soapbox/hooks/useDimensions.ts
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 
 type UseDimensionsRect = { width: number, height: number };
 type UseDimensionsResult = [Element | null, any, any]
@@ -14,7 +15,7 @@ const useDimensions = (): UseDimensionsResult => {
 
   const observer = useMemo(
     () =>
-      new (window as any).ResizeObserver((entries: any) => {
+      new ResizeObserver((entries: any) => {
         if (entries[0]) {
           const { width, height } = entries[0].contentRect;
           setRect({ width, height });
diff --git a/package.json b/package.json
index d5647cdec..eef743978 100644
--- a/package.json
+++ b/package.json
@@ -181,6 +181,7 @@
     "redux-thunk": "^2.2.0",
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.20.3",
     "sass-loader": "^13.0.0",
     "semver": "^7.3.2",

From 07cbd027376d8d22680b2bc7a3c37e0b6a5da425 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 31 Aug 2022 15:43:20 -0400
Subject: [PATCH 11/15] Lint

---
 app/soapbox/components/scrollable_list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index 941e130a6..cdb74e580 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -6,7 +6,7 @@ import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLo
 import { useSettings } from 'soapbox/hooks';
 
 import LoadMore from './load_more';
-import { Card, Spinner, Text } from './ui';
+import { Card, Spinner } from './ui';
 
 /** Custom Viruoso component context. */
 type Context = {

From 9aebaa96a8e464cf3b8259543eb21a33cd2c90ce Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 7 Sep 2022 10:30:11 -0400
Subject: [PATCH 12/15] Fix tests

---
 .../hooks/__mocks__/resize-observer.ts        | 25 +++++++++++++++
 .../hooks/__tests__/useDimensions.test.ts     | 32 ++++---------------
 2 files changed, 32 insertions(+), 25 deletions(-)
 create mode 100644 app/soapbox/hooks/__mocks__/resize-observer.ts

diff --git a/app/soapbox/hooks/__mocks__/resize-observer.ts b/app/soapbox/hooks/__mocks__/resize-observer.ts
new file mode 100644
index 000000000..c75e292ea
--- /dev/null
+++ b/app/soapbox/hooks/__mocks__/resize-observer.ts
@@ -0,0 +1,25 @@
+let listener: ((rect: any) => void) | undefined = undefined;
+const mockDisconnect = jest.fn();
+
+class ResizeObserver {
+
+  constructor(ls: any) {
+    listener = ls;
+  }
+
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    mockDisconnect();
+  }
+
+}
+
+// eslint-disable-next-line compat/compat
+(window as any).ResizeObserver = ResizeObserver;
+
+export { ResizeObserver as default, listener, mockDisconnect };
\ No newline at end of file
diff --git a/app/soapbox/hooks/__tests__/useDimensions.test.ts b/app/soapbox/hooks/__tests__/useDimensions.test.ts
index 78524ad77..4e97fdef3 100644
--- a/app/soapbox/hooks/__tests__/useDimensions.test.ts
+++ b/app/soapbox/hooks/__tests__/useDimensions.test.ts
@@ -1,21 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 
+import { listener, mockDisconnect } from '../__mocks__/resize-observer';
 import { useDimensions } from '../useDimensions';
 
-let listener: ((rect: any) => void) | undefined = undefined;
-
-(window as any).ResizeObserver = class ResizeObserver {
-
-  constructor(ls: any) {
-    listener = ls;
-  }
-
-  observe() {}
-  disconnect() {}
-
-};
-
 describe('useDimensions()', () => {
+  beforeEach(() => {
+    mockDisconnect.mockClear();
+  });
+
   it('defaults to 0', () => {
     const { result } = renderHook(() => useDimensions());
 
@@ -56,16 +48,6 @@ describe('useDimensions()', () => {
   });
 
   it('disconnects on unmount', () => {
-    const disconnect = jest.fn();
-    (window as any).ResizeObserver = class ResizeObserver {
-
-      observe() {}
-      disconnect() {
-        disconnect();
-      }
-
-    };
-
     const { result, unmount } = renderHook(() => useDimensions());
 
     act(() => {
@@ -73,8 +55,8 @@ describe('useDimensions()', () => {
       (result.current[1] as any)(div);
     });
 
-    expect(disconnect).toHaveBeenCalledTimes(0);
+    expect(mockDisconnect).toHaveBeenCalledTimes(0);
     unmount();
-    expect(disconnect).toHaveBeenCalledTimes(1);
+    expect(mockDisconnect).toHaveBeenCalledTimes(1);
   });
 });

From 7063ce759d735d0ba27353253ac79a96654ef1d4 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 8 Sep 2022 08:28:19 -0400
Subject: [PATCH 13/15] Add JSDOC

---
 app/soapbox/components/ui/input/input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 2bd77dbfa..c77ae8169 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -36,6 +36,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   prepend?: React.ReactElement,
   /** An element to display as suffix to input. Cannot be used with password type. */
   append?: React.ReactElement,
+  /** Adds specific styling to denote a searchabe input. */
   isSearch?: boolean,
 }
 

From ac52071e2fa7a8029c0dc86c10c0aa6c51388365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 9 Sep 2022 23:20:26 +0200
Subject: [PATCH 14/15] Do not reset tab/searched account when clearing search
 input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/search.ts                 | 19 +++++++++++++++----
 .../features/compose/components/search.tsx    |  3 ++-
 .../compose/components/search_results.tsx     |  6 +++---
 app/soapbox/reducers/search.ts                | 16 +++++++++++++++-
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/actions/search.ts b/app/soapbox/actions/search.ts
index e8718d479..a2f165ac0 100644
--- a/app/soapbox/actions/search.ts
+++ b/app/soapbox/actions/search.ts
@@ -8,9 +8,10 @@ import type { SearchFilter } from 'soapbox/reducers/search';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
 
-const SEARCH_CHANGE = 'SEARCH_CHANGE';
-const SEARCH_CLEAR  = 'SEARCH_CLEAR';
-const SEARCH_SHOW   = 'SEARCH_SHOW';
+const SEARCH_CHANGE        = 'SEARCH_CHANGE';
+const SEARCH_CLEAR         = 'SEARCH_CLEAR';
+const SEARCH_SHOW          = 'SEARCH_SHOW';
+const SEARCH_RESULTS_CLEAR = 'SEARCH_RESULTS_CLEAR';
 
 const SEARCH_FETCH_REQUEST = 'SEARCH_FETCH_REQUEST';
 const SEARCH_FETCH_SUCCESS = 'SEARCH_FETCH_SUCCESS';
@@ -28,7 +29,11 @@ const changeSearch = (value: string) =>
   (dispatch: AppDispatch) => {
     // If backspaced all the way, clear the search
     if (value.length === 0) {
-      return dispatch(clearSearch());
+      dispatch(clearSearchResults());
+      return dispatch({
+        type: SEARCH_CHANGE,
+        value,
+      });
     } else {
       return dispatch({
         type: SEARCH_CHANGE,
@@ -41,6 +46,10 @@ const clearSearch = () => ({
   type: SEARCH_CLEAR,
 });
 
+const clearSearchResults = () => ({
+  type: SEARCH_RESULTS_CLEAR,
+});
+
 const submitSearch = (filter?: SearchFilter) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const value = getState().search.value;
@@ -167,6 +176,7 @@ export {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
   SEARCH_SHOW,
+  SEARCH_RESULTS_CLEAR,
   SEARCH_FETCH_REQUEST,
   SEARCH_FETCH_SUCCESS,
   SEARCH_FETCH_FAIL,
@@ -177,6 +187,7 @@ export {
   SEARCH_ACCOUNT_SET,
   changeSearch,
   clearSearch,
+  clearSearchResults,
   submitSearch,
   fetchSearchRequest,
   fetchSearchSuccess,
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index ec7c89468..9402b8785 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom';
 import {
   changeSearch,
   clearSearch,
+  clearSearchResults,
   setSearchAccount,
   showSearch,
   submitSearch,
@@ -72,7 +73,7 @@ const Search = (props: ISearch) => {
     event.preventDefault();
 
     if (value.length > 0 || submitted) {
-      dispatch(clearSearch());
+      dispatch(clearSearchResults());
     }
   };
 
diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
index b1cb833ba..8f8fa5938 100644
--- a/app/soapbox/features/compose/components/search_results.tsx
+++ b/app/soapbox/features/compose/components/search_results.tsx
@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { clearSearch, expandSearch, setFilter } from 'soapbox/actions/search';
+import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
 import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
 import Hashtag from 'soapbox/components/hashtag';
 import IconButton from 'soapbox/components/icon_button';
@@ -43,7 +43,7 @@ const SearchResults = () => {
 
   const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
 
-  const handleClearSearch = () => dispatch(clearSearch());
+  const handleUnsetAccount = () => dispatch(setSearchAccount(null));
 
   const selectFilter = (newActiveFilter: SearchFilter) => dispatch(setFilter(newActiveFilter));
 
@@ -196,7 +196,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 pb-4 px-2 border-solid border-b border-gray-200 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleClearSearch} />
+          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} />
           <Text>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/app/soapbox/reducers/search.ts b/app/soapbox/reducers/search.ts
index eb2c1ed8d..c73dbf865 100644
--- a/app/soapbox/reducers/search.ts
+++ b/app/soapbox/reducers/search.ts
@@ -18,6 +18,7 @@ import {
   SEARCH_EXPAND_REQUEST,
   SEARCH_EXPAND_SUCCESS,
   SEARCH_ACCOUNT_SET,
+  SEARCH_RESULTS_CLEAR,
 } from '../actions/search';
 
 import type { AnyAction } from 'redux';
@@ -105,6 +106,13 @@ export default function search(state = ReducerRecord(), action: AnyAction) {
       return state.set('value', action.value);
     case SEARCH_CLEAR:
       return ReducerRecord();
+    case SEARCH_RESULTS_CLEAR:
+      return state.merge({
+        value: '',
+        results: ResultsRecord(),
+        submitted: false,
+        submittedValue: '',
+      });
     case SEARCH_SHOW:
       return state.set('hidden', false);
     case COMPOSE_REPLY:
@@ -123,7 +131,13 @@ export default function search(state = ReducerRecord(), action: AnyAction) {
     case SEARCH_EXPAND_SUCCESS:
       return paginateResults(state, action.searchType, action.results, action.searchTerm);
     case SEARCH_ACCOUNT_SET:
-      if (!action.accountId) return state.set('accountId', null);
+      if (!action.accountId) return state.merge({
+        results: ResultsRecord(),
+        submitted: false,
+        submittedValue: '',
+        filter: 'accounts',
+        accountId: null,
+      });
       return ReducerRecord({ accountId: action.accountId, filter: 'statuses' });
     default:
       return state;

From 30a420acaf7a13b6a7572847135181dac915a4ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 9 Sep 2022 23:06:18 +0200
Subject: [PATCH 15/15] Allow searching your own posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/account/components/header.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 3f4d239bf..c9620485b 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -74,6 +74,7 @@ const messages = defineMessages({
   suggestUser: { id: 'admin.users.actions.suggest_user', defaultMessage: 'Suggest @{name}' },
   unsuggestUser: { id: 'admin.users.actions.unsuggest_user', defaultMessage: 'Unsuggest @{name}' },
   search: { id: 'account.search', defaultMessage: 'Search from @{name}' },
+  searchSelf: { id: 'account.search_self', defaultMessage: 'Search your posts' },
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
   blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
@@ -378,6 +379,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         to: '/settings',
         icon: require('@tabler/icons/settings.svg'),
       });
+      if (features.searchFromAccount) {
+        menu.push({
+          text: intl.formatMessage(messages.searchSelf, { name: account.username }),
+          action: onSearch,
+          icon: require('@tabler/icons/search.svg'),
+        });
+      }
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),