Post time range input

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<Props, State> {
           className="dropdown-menu dropdown-menu-end"
           id="time-interval-unit-dropdown"
         >
-          {/* Presets first, then the custom ones */}
-          {presets.map(p => (
-            <li>
-              <button
-                className="dropdown-item"
-                onClick={() => handlePresetSelect(this, p)}
-              >
-                {I18NextService.i18n.t(p.key)}
-              </button>
-            </li>
-          ))}
-          <hr className="dropdown-divider" />
           <li>
             <button className="dropdown-item disabled" aria-disabled="true">
               {I18NextService.i18n.t("custom_time")}
@@ -122,12 +94,6 @@ function handleTimeIntervalUnitChange(
   handleTimeIntervalChange(i, interval);
 }
 
-function handlePresetSelect(i: TimeIntervalFilter, preset: Preset) {
-  const interval = preset.interval;
-
-  handleTimeIntervalChange(i, interval);
-}
-
 function handleTimeIntervalChange(i: TimeIntervalFilter, interval: Interval) {
   i.setState({ interval });
 

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<CommunityRouteProps, State> {
     isIsomorphic: false,
     markPageAsReadLoading: false,
     postListingMode: defaultPostListingMode(this.isoData),
+    selectButtonsHidden: true,
   };
   private readonly mainContentRef: RefObject<HTMLDivElement>;
 
@@ -761,83 +763,95 @@ export class Community extends Component<CommunityRouteProps, State> {
     const myUserInfo = this.isoData.myUserInfo;
 
     return (
-      <div className="row row-cols-auto align-items-center g-3 mb-3">
-        <div className="d-block d-md-none col">
-          <ExpandChipCheckbox
-            option="show_sidebar"
-            isChecked={showSidebarMobile}
-            onCheck={show => handleShowSidebarMobile(this, show)}
-          />
-        </div>
-        <div className="col">
-          <PostOrCommentTypeDropdown
-            currentOption={postOrCommentType}
-            onSelect={val => handlePostOrCommentTypeChange(this, val)}
-          />
-        </div>
-        {postOrCommentType === "post" && myUserInfo && (
-          <>
+      <>
+        <div className="row row-cols-auto align-items-center g-3 mb-3">
+          <div className="d-block d-md-none col">
+            <ExpandChipCheckbox
+              option="show_sidebar"
+              isChecked={showSidebarMobile}
+              onCheck={show => handleShowSidebarMobile(this, show)}
+            />
+          </div>
+          <div className="col">
+            <PostOrCommentTypeDropdown
+              currentOption={postOrCommentType}
+              onSelect={val => handlePostOrCommentTypeChange(this, val)}
+            />
+          </div>
+          <div className="col">
+            <PostListingModeDropdown
+              currentOption={this.state.postListingMode}
+              onSelect={val =>
+                handlePostListingModeChange(this, val, myUserInfo)
+              }
+              showLabel
+            />
+          </div>
+          {this.props.postOrCommentType === "post" ? (
+            <>
+              <div className="col">
+                <PostSortDropdown
+                  currentOption={mixedToPostSortType(sort)}
+                  onSelect={val => handleSortChange(this, val)}
+                  showLabel
+                />
+              </div>
+              <div className="col">
+                <TimeIntervalFilter
+                  currentSeconds={postTimeRange}
+                  onChange={val => handlePostTimeRangeChange(this, val)}
+                />
+              </div>
+            </>
+          ) : (
             <div className="col">
-              <FilterChipCheckbox
-                option={"show_hidden_posts"}
-                isChecked={showHidden ?? false}
-                onCheck={hidden => handleShowHiddenChange(this, hidden)}
+              <CommentSortDropdown
+                currentOption={mixedToCommentSortType(sort)}
+                onSelect={val => handleCommentSortChange(this, val)}
+                showLabel
               />
             </div>
+          )}
+          {communityRss && (
             <div className="col">
-              <FilterChipCheckbox
-                option={"hide_read_posts"}
-                isChecked={!(showRead ?? false)}
-                onCheck={hideRead => handleHideReadChange(this, hideRead)}
+              <a href={communityRss} title="RSS" rel={relTags}>
+                <Icon icon="rss" classes="text-muted small" />
+              </a>
+              <link
+                rel="alternate"
+                type="application/atom+xml"
+                href={communityRss}
               />
             </div>
-          </>
-        )}
-        <div className="col">
-          <PostListingModeDropdown
-            currentOption={this.state.postListingMode}
-            onSelect={val => handlePostListingModeChange(this, val, myUserInfo)}
-            showLabel
-          />
+          )}
+          <button
+            className="col btn btn-ghost"
+            onclick={_ => handleHideSelectButtons(this)}
+          >
+            <Icon icon="chevrons-down" />
+          </button>
         </div>
-        {this.props.postOrCommentType === "post" ? (
-          <>
-            <div className="col">
-              <PostSortDropdown
-                currentOption={mixedToPostSortType(sort)}
-                onSelect={val => handleSortChange(this, val)}
-                showLabel
-              />
-            </div>
-            <div className="col">
-              <TimeIntervalFilter
-                currentSeconds={postTimeRange}
-                onChange={val => handlePostTimeRangeChange(this, val)}
-              />
+        {postOrCommentType === "post" &&
+          myUserInfo &&
+          !this.state.selectButtonsHidden && (
+            <div className="row row-cols-auto mt-2">
+              <div className="col">
+                <FilterChipCheckbox
+                  option={"show_hidden_posts"}
+                  isChecked={showHidden ?? false}
+                  onCheck={hidden => handleShowHiddenChange(this, hidden)}
+                />
+              </div>
+              <div className="col">
+                <FilterChipCheckbox
+                  option={"hide_read_posts"}
+                  isChecked={!(showRead ?? false)}
+                  onCheck={hideRead => handleHideReadChange(this, hideRead)}
+                />
+              </div>
             </div>
-          </>
-        ) : (
-          <div className="col">
-            <CommentSortDropdown
-              currentOption={mixedToCommentSortType(sort)}
-              onSelect={val => handleCommentSortChange(this, val)}
-              showLabel
-            />
-          </div>
-        )}
-        {communityRss && (
-          <div className="col">
-            <a href={communityRss} title="RSS" rel={relTags}>
-              <Icon icon="rss" classes="text-muted small" />
-            </a>
-            <link
-              rel="alternate"
-              type="application/atom+xml"
-              href={communityRss}
-            />
-          </div>
-        )}
-      </div>
+          )}
+      </>
     );
   }
 }
@@ -1471,3 +1485,7 @@ function DeadInstanceOrCommunityWarning() {
     </div>
   );
 }
+
+function handleHideSelectButtons(i: Community) {
+  i.setState({ selectButtonsHidden: !i.state.selectButtonsHidden });
+}