LoginSession.feedDisplayAs

packages/app/src/Element/Feed/DisplayAsSelector.tsx

@@ -1,6 +1,8 @@
 import Icon from "@/Icons/Icon";
+import { LoginStore } from "@/Login";
+import useLogin from "@/Hooks/useLogin";
 
-export type DisplayAs = "grid" | "feed";
+export type DisplayAs = "list" | "grid";
 
 type DisplaySelectorProps = {
   activeSelection: DisplayAs;
@@ -9,14 +11,22 @@ type DisplaySelectorProps = {
 };
 
 export const DisplayAsSelector = ({ activeSelection, onSelect, show }: DisplaySelectorProps) => {
+  const state = useLogin();
+
+  const myOnSelect = (display: DisplayAs) => {
+    onSelect(display);
+    state.feedDisplayAs = display;
+    LoginStore.updateSession(state);
+  };
+
   if (show === false) return null;
   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"
+          activeSelection === "list" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
         }`}
-        onClick={() => onSelect("feed")}>
+        onClick={() => myOnSelect("list")}>
         <span className="rotate-90">
           <Icon name="deck" />
         </span>
@@ -25,7 +35,7 @@ export const DisplayAsSelector = ({ activeSelection, onSelect, show }: DisplaySe
         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")}>
+        onClick={() => myOnSelect("grid")}>
         <Icon name="media" />
       </div>
     </div>

packages/app/src/Element/Feed/Timeline.tsx

@@ -10,6 +10,7 @@ import { LiveStreams } from "@/Element/LiveStreams";
 import { unixNow } from "@snort/shared";
 import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
 import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
+import useLogin from "@/Hooks/useLogin";
 
 export interface TimelineProps {
   postsOnly: boolean;
@@ -28,6 +29,7 @@ export interface TimelineProps {
  * A list of notes by "subject"
  */
 const Timeline = (props: TimelineProps) => {
+  const login = useLogin();
   const feedOptions = useMemo(() => {
     return {
       method: props.method,
@@ -36,7 +38,8 @@ const Timeline = (props: TimelineProps) => {
     };
   }, [props]);
   const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
-  const [displayAs, setDisplayAs] = useState<DisplayAs>(props.displayAs ?? "feed");
+  const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list";
+  const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
 
   const { muted, isEventMuted } = useModeration();
   const filterPosts = useCallback(

packages/app/src/Element/Feed/TimelineFollows.tsx

@@ -29,7 +29,9 @@ export interface TimelineFollowsProps {
  * A list of notes by "subject"
  */
 const TimelineFollows = (props: TimelineFollowsProps) => {
-  const [displayAs, setDisplayAs] = useState<"feed" | "grid">(props.displayAs ?? "feed");
+  const login = useLogin();
+  const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list";
+  const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
   const [latest, setLatest] = useState(unixNow());
   const feed = useSyncExternalStore(
     cb => FollowsFeed.hook(cb, "*"),
@@ -42,7 +44,6 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
     true,
   );
   const system = useContext(SnortContext);
-  const login = useLogin();
   const { muted, isEventMuted } = useModeration();
 
   const sortedFeed = useMemo(() => orderDescending(feed), [feed]);

packages/app/src/Login/LoginSession.ts

@@ -1,6 +1,7 @@
 import { HexKey, RelaySettings, u256, KeyStorage } from "@snort/system";
 import { UserPreferences } from "@/Login";
 import { SubscriptionEvent } from "@/Subscription";
+import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
 
 /**
  * Stores latest copy of an item
@@ -125,4 +126,9 @@ export interface LoginSession {
    * Is login session in stalker mode
    */
   stalker: boolean;
+
+  /**
+   * Display feed as list or grid
+   */
+  feedDisplayAs?: DisplayAs;
 }

packages/app/src/lang.json

@@ -377,9 +377,6 @@
   "CYkOCI": {
     "defaultMessage": "and {count} others you follow"
   },
-  "CbM2hK": {
-    "defaultMessage": "Trending hashtags"
-  },
   "CmZ9ls": {
     "defaultMessage": "{n} Muted"
   },
@@ -952,9 +949,6 @@
   "aWpBzj": {
     "defaultMessage": "Show more"
   },
-  "arZnG2": {
-    "defaultMessage": "Trending users"
-  },
   "b12Goz": {
     "defaultMessage": "Mnemonic"
   },

packages/app/src/translations/en.json

@@ -124,7 +124,6 @@
   "CHTbO3": "Failed to load invoice",
   "CVWeJ6": "Trending People",
   "CYkOCI": "and {count} others you follow",
-  "CbM2hK": "Trending hashtags",
   "CmZ9ls": "{n} Muted",
   "CsCUYo": "{n} sats",
   "Cu/K85": "Translated from {lang}",
@@ -313,7 +312,6 @@
   "aHje0o": "Name or nym",
   "aMaLBK": "Supported Extensions",
   "aWpBzj": "Show more",
-  "arZnG2": "Trending users",
   "b12Goz": "Mnemonic",
   "b5vAk0": "Your handle will act like a lightning address and will redirect to your chosen LNURL or Lightning address",
   "bLZL5a": "Get Address",