From 0b2637ce5c5becccae99194456e05625989173b8 Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Fri, 6 Mar 2026 12:36:44 +0100 Subject: [PATCH 01/10] Hide some feed select buttons by default --- src/assets/symbols.svg | 4 +- src/shared/components/home/home.tsx | 176 ++++++++++++++++------------ 2 files changed, 102 insertions(+), 78 deletions(-) diff --git a/src/assets/symbols.svg b/src/assets/symbols.svg index 0743fe0c67..b8a9d81f68 100644 --- a/src/assets/symbols.svg +++ b/src/assets/symbols.svg @@ -316,6 +316,8 @@ - + + + diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 64a0cd0a40..25bc3a306b 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -140,6 +140,7 @@ interface HomeState { isIsomorphic: boolean; markPageAsReadLoading: boolean; postListingMode: PostListingMode; + selectButtonsHidden: boolean; } interface HomeProps { @@ -289,6 +290,7 @@ export class Home extends Component { isIsomorphic: false, markPageAsReadLoading: false, postListingMode: defaultPostListingMode(this.isoData), + selectButtonsHidden: true, }; loadingSettled(): boolean { @@ -872,32 +874,105 @@ export class Home extends Component { const { showSubscribedMobile, showSidebarMobile } = this.state; return ( -
- {/* Only show these two selects on mobile */} - {this.hasFollows && ( +
+
+ {/* Only show these two selects on mobile */} + {this.hasFollows && ( +
+ handleShowSubscribedMobile(this, show)} + /> +
+ )}
handleShowSubscribedMobile(this, show)} + option="show_sidebar" + isChecked={showSidebarMobile} + onCheck={show => handleShowSidebarMobile(this, show)} />
- )} -
- handleShowSidebarMobile(this, show)} - /> -
-
- handlePostOrCommentTypeChange(this, val)} - /> +
+ handlePostOrCommentTypeChange(this, val)} + /> +
+ {/** TODO add show read posts also **/} +
+ handleListingTypeChange(this, val)} + /> +
+
+ handlePostListingModeChange(this, val)} + showLabel + /> +
+ {this.props.postOrCommentType === "post" ? ( + <> +
+ handleSortChange(this, val)} + showLabel + /> +
+
+ handlePostTimeRangeChange(this, seconds)} + /> +
+ + ) : ( +
+ handleCommentSortChange(this, val)} + showLabel + /> +
+ )} +
+ {getRss( + listingType ?? + this.state.siteRes.site_view.local_site + .default_post_listing_type, + sort, + )} +
+
{postOrCommentType === "post" && this.isoData.myUserInfo && ( - <> +
{ onCheck={hideRead => handleHideReadChange(this, hideRead)} />
- - )} - {/** TODO add show read posts also **/} -
- handleListingTypeChange(this, val)} - /> -
-
- handlePostListingModeChange(this, val)} - showLabel - /> -
- {this.props.postOrCommentType === "post" ? ( - <> -
- handleSortChange(this, val)} - showLabel - /> -
-
- handlePostTimeRangeChange(this, seconds)} - /> -
- - ) : ( -
- handleCommentSortChange(this, val)} - showLabel - />
)} -
- {getRss( - listingType ?? - this.state.siteRes.site_view.local_site.default_post_listing_type, - sort, - )} -
); } @@ -1494,3 +1512,7 @@ async function handleHideDonationDialog(myUserInfo?: MyUserInfo) { } } } + +function handleHideSelectButtons(i: Home) { + i.setState({ selectButtonsHidden: !i.state.selectButtonsHidden }); +} From 19ff490c408610e277e22e96548d936cf7dcdf8d Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Fri, 6 Mar 2026 12:45:47 +0100 Subject: [PATCH 02/10] same for community --- src/shared/components/community/community.tsx | 138 ++++++++++-------- src/shared/components/home/home.tsx | 2 +- 2 files changed, 81 insertions(+), 59 deletions(-) diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index 484083d422..e144de7166 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -149,6 +149,7 @@ interface State { isIsomorphic: boolean; markPageAsReadLoading: boolean; postListingMode: PostListingMode; + selectButtonsHidden: boolean; } interface CommunityProps { @@ -251,6 +252,7 @@ export class Community extends Component { isIsomorphic: false, markPageAsReadLoading: false, postListingMode: defaultPostListingMode(this.isoData), + selectButtonsHidden: true, }; private readonly mainContentRef: RefObject; @@ -761,22 +763,82 @@ export class Community extends Component { const myUserInfo = this.isoData.myUserInfo; return ( -
-
- handleShowSidebarMobile(this, show)} - /> -
-
- handlePostOrCommentTypeChange(this, val)} - /> +
+
+
+ handleShowSidebarMobile(this, show)} + /> +
+
+ handlePostOrCommentTypeChange(this, val)} + /> +
+
+ + handlePostListingModeChange(this, val, myUserInfo) + } + showLabel + /> +
+ {this.props.postOrCommentType === "post" ? ( + <> +
+ handleSortChange(this, val)} + showLabel + /> +
+
+ handlePostTimeRangeChange(this, val)} + /> +
+ + ) : ( +
+ handleCommentSortChange(this, val)} + showLabel + /> +
+ )} + {communityRss && ( +
+ + + + +
+ )} +
{postOrCommentType === "post" && myUserInfo && ( - <> +
{ onCheck={hideRead => handleHideReadChange(this, hideRead)} />
- - )} -
- handlePostListingModeChange(this, val, myUserInfo)} - showLabel - /> -
- {this.props.postOrCommentType === "post" ? ( - <> -
- handleSortChange(this, val)} - showLabel - /> -
-
- handlePostTimeRangeChange(this, val)} - /> -
- - ) : ( -
- handleCommentSortChange(this, val)} - showLabel - /> -
- )} - {communityRss && ( -
- - - -
)}
@@ -1471,3 +1489,7 @@ function DeadInstanceOrCommunityWarning() {
); } + +function handleHideSelectButtons(i: Community) { + i.setState({ selectButtonsHidden: !i.state.selectButtonsHidden }); +} diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 25bc3a306b..75ab275cef 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -959,7 +959,7 @@ export class Home extends Component { )}
- {postOrCommentType === "post" && myUserInfo && ( -
-
- handleShowHiddenChange(this, hidden)} - /> -
-
- handleHideReadChange(this, hideRead)} - /> + {postOrCommentType === "post" && + myUserInfo && + !this.state.selectButtonsHidden && ( +
+
+ handleShowHiddenChange(this, hidden)} + /> +
+
+ handleHideReadChange(this, hideRead)} + /> +
-
- )} -
+ )} + ); } } diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index dbab981acd..09d23a2003 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -965,30 +965,26 @@ export class Home extends Component {
- {postOrCommentType === "post" && this.isoData.myUserInfo && ( -
-
- handleShowHiddenChange(this, hidden)} - /> -
-
- handleHideReadChange(this, hideRead)} - /> + {postOrCommentType === "post" && + this.isoData.myUserInfo && + !this.state.selectButtonsHidden && ( +
+
+ handleShowHiddenChange(this, hidden)} + /> +
+
+ handleHideReadChange(this, hideRead)} + /> +
-
- )} + )}
); } From 40e6f79923a5859a8990e3227387c7ba2066da0c Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Tue, 10 Mar 2026 15:12:46 +0100 Subject: [PATCH 05/10] Better input for post time range --- src/shared/components/home/home.tsx | 66 +++++++++++++++++++++++------ 1 file changed, 54 insertions(+), 12 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 09d23a2003..d3f29cd071 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -26,7 +26,7 @@ import { scrollMixin } from "../mixins/scroll-mixin"; import type { ItemIdAndRes, QueryParams } from "@utils/types"; import { itemLoading, RouteDataResponse } from "@utils/types"; import { NoOptionI18nKeys } from "i18next"; -import { Component, InfernoNode } from "inferno"; +import { Component, FormEvent, InfernoNode } from "inferno"; import { T } from "inferno-i18next-dess"; import { Link } from "inferno-router"; import { @@ -113,7 +113,6 @@ import { IRoutePropsWithFetch } from "@utils/routes"; import { isBrowser } from "@utils/browser"; import { DonationDialog } from "./donation-dialog"; import { nowBoolean } from "@utils/date"; -import { TimeIntervalFilter } from "@components/common/time-interval-filter"; import { BannedDialog } from "./banned-dialog"; import { PostListingModeDropdown } from "@components/common/post-listing-mode-dropdown"; import { MultiCommunityLink } from "@components/multi-community/multi-community-link"; @@ -147,7 +146,7 @@ interface HomeProps { listingType?: ListingType; postOrCommentType: PostOrCommentType; sort: PostSortType | CommentSortType; - postTimeRange: number; + postTimeRange?: number; showHidden?: boolean; showRead?: boolean; cursor?: PaginationCursor; @@ -682,7 +681,7 @@ export class Home extends Component { listingType, cursor, sort, - postTimeRange: postTimeRange.toString(), + postTimeRange: postTimeRange?.toString(), showHidden: showHidden?.toString(), showRead: showRead?.toString(), }; @@ -934,12 +933,6 @@ export class Home extends Component { showLabel />
-
- handlePostTimeRangeChange(this, seconds)} - /> -
) : (
@@ -965,6 +958,17 @@ export class Home extends Component {
+ + handlePostTimeRangeChange(this, e)} + /> {postOrCommentType === "post" && this.isoData.myUserInfo && !this.state.selectButtonsHidden && ( @@ -1151,8 +1155,46 @@ function handleSortChange(i: Home, val: PostSortType) { i.updateUrl({ sort: val, cursor: undefined }); } -function handlePostTimeRangeChange(i: Home, val: number) { - i.updateUrl({ postTimeRange: val, cursor: undefined }); +const DAY = 24 * 60 * 60; + +function handlePostTimeRangeChange( + i: Home, + event: FormEvent, +) { + event.preventDefault(); + let x: number | undefined = undefined; + switch (event.target.value) { + case "0": + x = DAY; + break; // one day + case "1": + x = 7 * DAY; + break; // one week + case "2": + x = 30 * DAY; + break; // one month + case "3": + x = 365 * DAY; + break; // one year + case "4": + x = undefined; + } + i.updateUrl({ postTimeRange: x, cursor: undefined }); +} + +function postTimeRangeValue(value?: number): string { + switch (value) { + case DAY: + return "1 Day"; + case 7 * DAY: + return "1 Week"; + case 30 * DAY: + return "1 Month"; + case 365 * DAY: + return "1 Year"; + default: + return "All"; + } } function handleCommentSortChange(i: Home, val: CommentSortType) { From 5e7576f0a51236d9ca83e7784aa3ba7140c8eb57 Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Tue, 10 Mar 2026 15:36:02 +0100 Subject: [PATCH 06/10] changes --- src/shared/components/home/home.tsx | 74 +++++++++++++---------------- 1 file changed, 33 insertions(+), 41 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index d3f29cd071..bb13189d1d 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -872,6 +872,7 @@ export class Home extends Component { const { showSubscribedMobile, showSidebarMobile } = this.state; + const hidePostTimeRange = sort === "new" || sort === "old"; return (
@@ -958,17 +959,25 @@ export class Home extends Component {
- - handlePostTimeRangeChange(this, e)} - /> + {!hidePostTimeRange && ( + <> + + x.seconds === postTimeRange) + ?.step ?? 4 + } + onInput={e => handlePostTimeRangeChange(this, e)} + /> + + )} {postOrCommentType === "post" && this.isoData.myUserInfo && !this.state.selectButtonsHidden && ( @@ -1157,44 +1166,27 @@ function handleSortChange(i: Home, val: PostSortType) { const DAY = 24 * 60 * 60; +const POST_TIME_RANGE_STEPS = [ + { step: 0, label: "1 Day", seconds: DAY }, + { step: 1, label: "1 Week", seconds: 7 * DAY }, + { step: 2, label: "1 Month", seconds: 30 * DAY }, + { step: 3, label: "1 Year", seconds: 365 * DAY }, + { step: 4, label: "All", seconds: undefined }, +]; + function handlePostTimeRangeChange( i: Home, event: FormEvent, ) { event.preventDefault(); - let x: number | undefined = undefined; - switch (event.target.value) { - case "0": - x = DAY; - break; // one day - case "1": - x = 7 * DAY; - break; // one week - case "2": - x = 30 * DAY; - break; // one month - case "3": - x = 365 * DAY; - break; // one year - case "4": - x = undefined; - } - i.updateUrl({ postTimeRange: x, cursor: undefined }); + const postTimeRange = POST_TIME_RANGE_STEPS.find( + x => x.step === Number(event.target.value), + )?.seconds; + i.updateUrl({ postTimeRange, cursor: undefined }); } function postTimeRangeValue(value?: number): string { - switch (value) { - case DAY: - return "1 Day"; - case 7 * DAY: - return "1 Week"; - case 30 * DAY: - return "1 Month"; - case 365 * DAY: - return "1 Year"; - default: - return "All"; - } + return POST_TIME_RANGE_STEPS.find(x => x.seconds === value)?.label ?? "All"; } function handleCommentSortChange(i: Home, val: CommentSortType) { From 244d2a85de7399370df664c581123688fc3d6b71 Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Tue, 10 Mar 2026 16:00:56 +0100 Subject: [PATCH 07/10] more steps --- src/shared/components/home/home.tsx | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index bb13189d1d..2265a4fde7 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -969,10 +969,10 @@ export class Home extends Component { type="range" className="form-range mt-0" min="0" - max="4" + max={POST_TIME_RANGE_STEPS.length - 1} value={ POST_TIME_RANGE_STEPS.find(x => x.seconds === postTimeRange) - ?.step ?? 4 + ?.step ?? POST_TIME_RANGE_STEPS.length - 1 } onInput={e => handlePostTimeRangeChange(this, e)} /> @@ -1164,14 +1164,21 @@ function handleSortChange(i: Home, val: PostSortType) { i.updateUrl({ sort: val, cursor: undefined }); } -const DAY = 24 * 60 * 60; +const HOUR = 60 * 60; +const DAY = 24 * HOUR; +const MONTH = 30 * DAY; const POST_TIME_RANGE_STEPS = [ - { step: 0, label: "1 Day", seconds: DAY }, - { step: 1, label: "1 Week", seconds: 7 * DAY }, - { step: 2, label: "1 Month", seconds: 30 * DAY }, - { step: 3, label: "1 Year", seconds: 365 * DAY }, - { step: 4, label: "All", seconds: undefined }, + { step: 0, label: "1 Hour", seconds: HOUR }, + { step: 1, label: "6 Hours", seconds: 6 * HOUR }, + { step: 2, label: "12 Hours", seconds: 12 * HOUR }, + { step: 3, label: "1 Day", seconds: DAY }, + { step: 4, label: "1 Week", seconds: 7 * DAY }, + { step: 5, label: "1 Month", seconds: MONTH }, + { step: 6, label: "3 Months", seconds: 3 * MONTH }, + { step: 7, label: "6 Months", seconds: 6 * MONTH }, + { step: 8, label: "1 Year", seconds: 365 * DAY }, + { step: 9, label: "All", seconds: undefined }, ]; function handlePostTimeRangeChange( From 848601a001705eced03a12fdc9d78b4177bf3fb8 Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Tue, 10 Mar 2026 16:06:06 +0100 Subject: [PATCH 08/10] move label --- src/shared/components/home/home.tsx | 42 ++++++++++++++--------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 2265a4fde7..fc9d838c13 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -874,8 +874,8 @@ export class Home extends Component { const hidePostTimeRange = sort === "new" || sort === "old"; return ( -
-
+
+
{/* Only show these two selects on mobile */} {this.hasFollows && (
@@ -958,26 +958,26 @@ export class Home extends Component { > + {!hidePostTimeRange && ( + <> + + x.seconds === postTimeRange) + ?.step ?? POST_TIME_RANGE_STEPS.length - 1 + } + onInput={e => handlePostTimeRangeChange(this, e)} + /> + + )}
- {!hidePostTimeRange && ( - <> - - x.seconds === postTimeRange) - ?.step ?? POST_TIME_RANGE_STEPS.length - 1 - } - onInput={e => handlePostTimeRangeChange(this, e)} - /> - - )} {postOrCommentType === "post" && this.isoData.myUserInfo && !this.state.selectButtonsHidden && ( From b854cfded8411d4953c0767e9de3cf0ec14158b0 Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Wed, 11 Mar 2026 11:18:40 +0100 Subject: [PATCH 09/10] reorder buttons --- src/shared/components/home/home.tsx | 50 ++++++++++++++--------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index fc9d838c13..870456b048 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -893,12 +893,25 @@ export class Home extends Component { onCheck={show => handleShowSidebarMobile(this, show)} />
-
- handlePostOrCommentTypeChange(this, val)} - /> -
+ {this.props.postOrCommentType === "post" ? ( + <> +
+ handleSortChange(this, val)} + showLabel + /> +
+ + ) : ( +
+ handleCommentSortChange(this, val)} + showLabel + /> +
+ )} {/** TODO add show read posts also **/}
{ showLabel />
- {this.props.postOrCommentType === "post" ? ( - <> -
- handleSortChange(this, val)} - showLabel - /> -
- - ) : ( -
- handleCommentSortChange(this, val)} - showLabel - /> -
- )} +
+ handlePostOrCommentTypeChange(this, val)} + /> +
{getRss( listingType ?? From 5b1eb794c347c7cef838e610bf4a55ad5afeabd4 Mon Sep 17 00:00:00 2001 From: Felix Ableitner Date: Thu, 12 Mar 2026 11:00:24 +0100 Subject: [PATCH 10/10] add back custom time interval, layout changes --- .../common/time-interval-filter.tsx | 34 ------------- src/shared/components/home/home.tsx | 51 +++++++++++-------- 2 files changed, 31 insertions(+), 54 deletions(-) diff --git a/src/shared/components/common/time-interval-filter.tsx b/src/shared/components/common/time-interval-filter.tsx index 493a323e4e..5ffcf335ee 100644 --- a/src/shared/components/common/time-interval-filter.tsx +++ b/src/shared/components/common/time-interval-filter.tsx @@ -10,22 +10,6 @@ type Interval = { unit: IntervalUnit; }; -type Preset = { key: NoOptionI18nKeys; interval: Interval }; - -const presets: Preset[] = [ - { key: "all_time", interval: { num: undefined, unit: "days" } }, - { key: "one_hour", interval: { num: 1, unit: "hours" } }, - { key: "six_hours", interval: { num: 6, unit: "hours" } }, - { key: "twelve_hours", interval: { num: 12, unit: "hours" } }, - { key: "one_day", interval: { num: 1, unit: "days" } }, - { key: "one_week", interval: { num: 1, unit: "weeks" } }, - { key: "one_month", interval: { num: 1, unit: "months" } }, - { key: "three_months", interval: { num: 3, unit: "months" } }, - { key: "six_months", interval: { num: 6, unit: "months" } }, - { key: "nine_months", interval: { num: 9, unit: "months" } }, - { key: "one_year", interval: { num: 1, unit: "years" } }, -]; - type Props = { currentSeconds: number | undefined; onChange: (seconds: number) => void; @@ -68,18 +52,6 @@ export class TimeIntervalFilter extends Component { className="dropdown-menu dropdown-menu-end" id="time-interval-unit-dropdown" > - {/* Presets first, then the custom ones */} - {presets.map(p => ( -
  • - -
    • - ))} -
  • {!hidePostTimeRange && ( - <> - - x.seconds === postTimeRange) - ?.step ?? POST_TIME_RANGE_STEPS.length - 1 - } - onInput={e => handlePostTimeRangeChange(this, e)} - /> - + )}
    • {postOrCommentType === "post" && this.isoData.myUserInfo && !this.state.selectButtonsHidden && ( -
    -
    +
    +
    handleShowHiddenChange(this, hidden)} />
    -
    +
    handleHideReadChange(this, hideRead)} />
    +
    + handlePostTimeRangeChange2(this, val)} + /> +
    )} + {!hidePostTimeRange && ( + x.seconds === postTimeRange) + ?.step ?? POST_TIME_RANGE_STEPS.length - 1 + } + onInput={e => handlePostTimeRangeChange(this, e)} + /> + )}
    ); } @@ -1192,6 +1199,10 @@ function handlePostTimeRangeChange( i.updateUrl({ postTimeRange, cursor: undefined }); } +function handlePostTimeRangeChange2(i: Home, val: number) { + i.updateUrl({ postTimeRange: val, cursor: undefined }); +} + function postTimeRangeValue(value?: number): string { return POST_TIME_RANGE_STEPS.find(x => x.seconds === value)?.label ?? "All"; }