From 1330db056a46c0317e90166c83cf3091486eb680 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 28 Nov 2023 22:10:35 +0200
Subject: [PATCH] DisplayAsSelector.tsx

---
 .../src/Element/Feed/DisplayAsSelector.tsx    | 29 +++++++++++++++++++
 packages/app/src/Element/Feed/Timeline.tsx    |  3 +-
 .../app/src/Element/Feed/TimelineFollows.tsx  |  3 +-
 .../app/src/Element/Feed/TimelineRenderer.tsx | 29 +------------------
 4 files changed, 34 insertions(+), 30 deletions(-)
 create mode 100644 packages/app/src/Element/Feed/DisplayAsSelector.tsx

diff --git a/packages/app/src/Element/Feed/DisplayAsSelector.tsx b/packages/app/src/Element/Feed/DisplayAsSelector.tsx
new file mode 100644
index 00000000..b005de89
--- /dev/null
+++ b/packages/app/src/Element/Feed/DisplayAsSelector.tsx
@@ -0,0 +1,29 @@
+import { FormattedMessage } from "react-intl";
+
+export type DisplayAs = "grid" | "feed";
+
+type DisplaySelectorProps = {
+  activeSelection: DisplayAs;
+  onSelect: (display: DisplayAs) => void;
+};
+
+export const DisplayAsSelector = ({ activeSelection, onSelect }: DisplaySelectorProps) => {
+  return (
+    <div className="flex mb-4">
+      <div
+        className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
+          activeSelection === "feed" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
+        }`}
+        onClick={() => onSelect("feed")}>
+        <FormattedMessage defaultMessage="Feed" id="eW/Bj9" />
+      </div>
+      <div
+        className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
+          activeSelection === "grid" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
+        }`}
+        onClick={() => onSelect("grid")}>
+        <FormattedMessage defaultMessage="Grid" id="HzfrYu" />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/app/src/Element/Feed/Timeline.tsx b/packages/app/src/Element/Feed/Timeline.tsx
index 8ca2fe28..e14601c2 100644
--- a/packages/app/src/Element/Feed/Timeline.tsx
+++ b/packages/app/src/Element/Feed/Timeline.tsx
@@ -8,7 +8,8 @@ import useTimelineFeed, { TimelineFeed, TimelineSubject } from "@/Feed/TimelineF
 import useModeration from "@/Hooks/useModeration";
 import { LiveStreams } from "@/Element/LiveStreams";
 import { unixNow } from "@snort/shared";
-import { DisplayAs, DisplayAsSelector, TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
+import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
+import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
 
 export interface TimelineProps {
   postsOnly: boolean;
diff --git a/packages/app/src/Element/Feed/TimelineFollows.tsx b/packages/app/src/Element/Feed/TimelineFollows.tsx
index a8e90cf0..8d50389a 100644
--- a/packages/app/src/Element/Feed/TimelineFollows.tsx
+++ b/packages/app/src/Element/Feed/TimelineFollows.tsx
@@ -12,7 +12,8 @@ import { LiveStreams } from "@/Element/LiveStreams";
 import useLogin from "@/Hooks/useLogin";
 import useHashtagsFeed from "@/Feed/HashtagsFeed";
 import { ShowMoreInView } from "@/Element/Event/ShowMore";
-import { DisplayAs, DisplayAsSelector, TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
+import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
+import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
 
 export interface TimelineFollowsProps {
   postsOnly: boolean;
diff --git a/packages/app/src/Element/Feed/TimelineRenderer.tsx b/packages/app/src/Element/Feed/TimelineRenderer.tsx
index d0a5b55c..64ea4e49 100644
--- a/packages/app/src/Element/Feed/TimelineRenderer.tsx
+++ b/packages/app/src/Element/Feed/TimelineRenderer.tsx
@@ -8,8 +8,7 @@ import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
 import { transformTextCached } from "@/Hooks/useTextTransformCache";
 import useImgProxy from "@/Hooks/useImgProxy";
 import { useNavigate } from "react-router-dom";
-
-export type DisplayAs = "grid" | "feed";
+import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
 
 export interface TimelineRendererProps {
   frags: Array<TimelineFragment>;
@@ -107,29 +106,3 @@ export function TimelineRenderer(props: TimelineRendererProps) {
     </>
   );
 }
-
-type DisplaySelectorProps = {
-  activeSelection: DisplayAs;
-  onSelect: (display: DisplayAs) => void;
-};
-
-export const DisplayAsSelector = ({ activeSelection, onSelect }: DisplaySelectorProps) => {
-  return (
-    <div className="flex mb-4">
-      <div
-        className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
-          activeSelection === "feed" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
-        }`}
-        onClick={() => onSelect("feed")}>
-        <FormattedMessage defaultMessage="Feed" id="eW/Bj9" />
-      </div>
-      <div
-        className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
-          activeSelection === "grid" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
-        }`}
-        onClick={() => onSelect("grid")}>
-        <FormattedMessage defaultMessage="Grid" id="HzfrYu" />
-      </div>
-    </div>
-  );
-};