From c61368821a4b4d77916142256d6c8381a5479013 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 2 May 2023 23:33:53 +0200
Subject: [PATCH] Use ListItem for 'Follow hashtag' setting
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/components/ui/column/column.tsx   |  6 ++++--
 .../features/hashtag-timeline/index.tsx       | 21 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 8813b107b..8d7c2da39 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -51,6 +51,8 @@ export interface IColumn {
   withHeader?: boolean
   /** Extra class name for top <div> element. */
   className?: string
+  /** Extra class name for the <CardBody> element. */
+  bodyClassName?: string
   /** Ref forwarded to column. */
   ref?: React.Ref<HTMLDivElement>
   /** Children to display in the column. */
@@ -63,7 +65,7 @@ export interface IColumn {
 
 /** A backdrop for the main section of the UI. */
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size } = props;
   const soapboxConfig = useSoapboxConfig();
   const [isScrolled, setIsScrolled] = useState(false);
 
@@ -109,7 +111,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
           />
         )}
 
-        <CardBody>
+        <CardBody className={bodyClassName}>
           {children}
         </CardBody>
       </Card>
diff --git a/app/soapbox/features/hashtag-timeline/index.tsx b/app/soapbox/features/hashtag-timeline/index.tsx
index 960b699df..e448bef8a 100644
--- a/app/soapbox/features/hashtag-timeline/index.tsx
+++ b/app/soapbox/features/hashtag-timeline/index.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useRef } from 'react';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { connectHashtagStream } from 'soapbox/actions/streaming';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/tags';
 import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines';
-import { Column } from 'soapbox/components/ui';
+import List, { ListItem } from 'soapbox/components/list';
+import { Column, Toggle } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 
@@ -19,8 +20,6 @@ const messages = defineMessages({
   any: { id: 'hashtag.column_header.tag_mode.any', defaultMessage: 'or {additional}' },
   all: { id: 'hashtag.column_header.tag_mode.all', defaultMessage: 'and {additional}' },
   none: { id: 'hashtag.column_header.tag_mode.none', defaultMessage: 'without {additional}' },
-  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
-  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
   empty: { id: 'empty_column.hashtag', defaultMessage: 'There is nothing in this hashtag yet.' },
 });
 
@@ -119,7 +118,19 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   }, [id]);
 
   return (
-    <Column label={title()} transparent>
+    <Column bodyClassName='space-y-3' label={title()} transparent>
+      {features.followHashtags && (
+        <List>
+          <ListItem
+            label={<FormattedMessage id='hashtag.follow' defaultMessage='Follow hashtag' />}
+          >
+            <Toggle
+              checked={tag?.following}
+              onChange={handleFollow}
+            />
+          </ListItem>
+        </List>
+      )}
       <Timeline
         scrollKey='hashtag_timeline'
         timelineId={`hashtag:${id}`}