This commit is contained in:
parent
83299f2feb
commit
1ffc2c6bf2
@ -1,6 +1,8 @@
|
|||||||
import Icon from "@/Icons/Icon";
|
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 = {
|
type DisplaySelectorProps = {
|
||||||
activeSelection: DisplayAs;
|
activeSelection: DisplayAs;
|
||||||
@ -9,14 +11,22 @@ type DisplaySelectorProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const DisplayAsSelector = ({ activeSelection, onSelect, show }: 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;
|
if (show === false) return null;
|
||||||
return (
|
return (
|
||||||
<div className="flex mb-4">
|
<div className="flex mb-4">
|
||||||
<div
|
<div
|
||||||
className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
|
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">
|
<span className="rotate-90">
|
||||||
<Icon name="deck" />
|
<Icon name="deck" />
|
||||||
</span>
|
</span>
|
||||||
@ -25,7 +35,7 @@ export const DisplayAsSelector = ({ activeSelection, onSelect, show }: DisplaySe
|
|||||||
className={`border-highlight cursor-pointer flex justify-center flex-1 p-3 ${
|
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"
|
activeSelection === "grid" ? "border-b border-1" : "hover:bg-nearly-bg-color text-secondary"
|
||||||
}`}
|
}`}
|
||||||
onClick={() => onSelect("grid")}>
|
onClick={() => myOnSelect("grid")}>
|
||||||
<Icon name="media" />
|
<Icon name="media" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,6 +10,7 @@ import { LiveStreams } from "@/Element/LiveStreams";
|
|||||||
import { unixNow } from "@snort/shared";
|
import { unixNow } from "@snort/shared";
|
||||||
import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
|
import { TimelineRenderer } from "@/Element/Feed/TimelineRenderer";
|
||||||
import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
|
import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
|
||||||
|
import useLogin from "@/Hooks/useLogin";
|
||||||
|
|
||||||
export interface TimelineProps {
|
export interface TimelineProps {
|
||||||
postsOnly: boolean;
|
postsOnly: boolean;
|
||||||
@ -28,6 +29,7 @@ export interface TimelineProps {
|
|||||||
* A list of notes by "subject"
|
* A list of notes by "subject"
|
||||||
*/
|
*/
|
||||||
const Timeline = (props: TimelineProps) => {
|
const Timeline = (props: TimelineProps) => {
|
||||||
|
const login = useLogin();
|
||||||
const feedOptions = useMemo(() => {
|
const feedOptions = useMemo(() => {
|
||||||
return {
|
return {
|
||||||
method: props.method,
|
method: props.method,
|
||||||
@ -36,7 +38,8 @@ const Timeline = (props: TimelineProps) => {
|
|||||||
};
|
};
|
||||||
}, [props]);
|
}, [props]);
|
||||||
const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
|
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 { muted, isEventMuted } = useModeration();
|
||||||
const filterPosts = useCallback(
|
const filterPosts = useCallback(
|
||||||
|
@ -29,7 +29,9 @@ export interface TimelineFollowsProps {
|
|||||||
* A list of notes by "subject"
|
* A list of notes by "subject"
|
||||||
*/
|
*/
|
||||||
const TimelineFollows = (props: TimelineFollowsProps) => {
|
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 [latest, setLatest] = useState(unixNow());
|
||||||
const feed = useSyncExternalStore(
|
const feed = useSyncExternalStore(
|
||||||
cb => FollowsFeed.hook(cb, "*"),
|
cb => FollowsFeed.hook(cb, "*"),
|
||||||
@ -42,7 +44,6 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
|
|||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
const system = useContext(SnortContext);
|
const system = useContext(SnortContext);
|
||||||
const login = useLogin();
|
|
||||||
const { muted, isEventMuted } = useModeration();
|
const { muted, isEventMuted } = useModeration();
|
||||||
|
|
||||||
const sortedFeed = useMemo(() => orderDescending(feed), [feed]);
|
const sortedFeed = useMemo(() => orderDescending(feed), [feed]);
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { HexKey, RelaySettings, u256, KeyStorage } from "@snort/system";
|
import { HexKey, RelaySettings, u256, KeyStorage } from "@snort/system";
|
||||||
import { UserPreferences } from "@/Login";
|
import { UserPreferences } from "@/Login";
|
||||||
import { SubscriptionEvent } from "@/Subscription";
|
import { SubscriptionEvent } from "@/Subscription";
|
||||||
|
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stores latest copy of an item
|
* Stores latest copy of an item
|
||||||
@ -125,4 +126,9 @@ export interface LoginSession {
|
|||||||
* Is login session in stalker mode
|
* Is login session in stalker mode
|
||||||
*/
|
*/
|
||||||
stalker: boolean;
|
stalker: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display feed as list or grid
|
||||||
|
*/
|
||||||
|
feedDisplayAs?: DisplayAs;
|
||||||
}
|
}
|
||||||
|
@ -377,9 +377,6 @@
|
|||||||
"CYkOCI": {
|
"CYkOCI": {
|
||||||
"defaultMessage": "and {count} others you follow"
|
"defaultMessage": "and {count} others you follow"
|
||||||
},
|
},
|
||||||
"CbM2hK": {
|
|
||||||
"defaultMessage": "Trending hashtags"
|
|
||||||
},
|
|
||||||
"CmZ9ls": {
|
"CmZ9ls": {
|
||||||
"defaultMessage": "{n} Muted"
|
"defaultMessage": "{n} Muted"
|
||||||
},
|
},
|
||||||
@ -952,9 +949,6 @@
|
|||||||
"aWpBzj": {
|
"aWpBzj": {
|
||||||
"defaultMessage": "Show more"
|
"defaultMessage": "Show more"
|
||||||
},
|
},
|
||||||
"arZnG2": {
|
|
||||||
"defaultMessage": "Trending users"
|
|
||||||
},
|
|
||||||
"b12Goz": {
|
"b12Goz": {
|
||||||
"defaultMessage": "Mnemonic"
|
"defaultMessage": "Mnemonic"
|
||||||
},
|
},
|
||||||
|
@ -124,7 +124,6 @@
|
|||||||
"CHTbO3": "Failed to load invoice",
|
"CHTbO3": "Failed to load invoice",
|
||||||
"CVWeJ6": "Trending People",
|
"CVWeJ6": "Trending People",
|
||||||
"CYkOCI": "and {count} others you follow",
|
"CYkOCI": "and {count} others you follow",
|
||||||
"CbM2hK": "Trending hashtags",
|
|
||||||
"CmZ9ls": "{n} Muted",
|
"CmZ9ls": "{n} Muted",
|
||||||
"CsCUYo": "{n} sats",
|
"CsCUYo": "{n} sats",
|
||||||
"Cu/K85": "Translated from {lang}",
|
"Cu/K85": "Translated from {lang}",
|
||||||
@ -313,7 +312,6 @@
|
|||||||
"aHje0o": "Name or nym",
|
"aHje0o": "Name or nym",
|
||||||
"aMaLBK": "Supported Extensions",
|
"aMaLBK": "Supported Extensions",
|
||||||
"aWpBzj": "Show more",
|
"aWpBzj": "Show more",
|
||||||
"arZnG2": "Trending users",
|
|
||||||
"b12Goz": "Mnemonic",
|
"b12Goz": "Mnemonic",
|
||||||
"b5vAk0": "Your handle will act like a lightning address and will redirect to your chosen LNURL or Lightning address",
|
"b5vAk0": "Your handle will act like a lightning address and will redirect to your chosen LNURL or Lightning address",
|
||||||
"bLZL5a": "Get Address",
|
"bLZL5a": "Get Address",
|
||||||
|
Loading…
Reference in New Issue
Block a user