src/app/common/components/sort-selector/sort-selector.component.ts

@@ -56,10 +56,10 @@ export class SortSelectorComponent implements OnInit, OnDestroy, AfterViewInit {
       id: '30d',
       label: '30d',
     },
-    /*{
+    {
       id: '1y',
-      label: '1y'
-    },*/
+      label: '1y',
+    },
   ];
 
   customTypes: Array<{ id; label; icon? }> = [

src/app/common/services/feeds.service.ts

@@ -16,6 +16,8 @@ import { switchMap, map, tap, first } from 'rxjs/operators';
 export class FeedsService {
   limit: BehaviorSubject<number> = new BehaviorSubject(12);
   offset: BehaviorSubject<number> = new BehaviorSubject(0);
+  fallbackAt: number | null = null;
+  fallbackAtIndex: BehaviorSubject<number | null> = new BehaviorSubject(null);
   pageSize: Observable<number>;
   pagingToken: string = '';
   canFetchMore: boolean = true;
@@ -50,6 +52,22 @@ export class FeedsService {
           .setCastToActivities(this.castToActivities)
           .getFromFeed(feed)
       ),
+      tap(feed => {
+        if (feed.length && this.fallbackAt) {
+          for (let i = 0; i < feed.length; i++) {
+            const entity: any = feed[i].getValue();
+
+            if (
+              entity &&
+              entity.time_created &&
+              entity.time_created < this.fallbackAt
+            ) {
+              this.fallbackAtIndex.next(i);
+              break;
+            }
+          }
+        }
+      }),
       tap(feed => {
         if (feed.length)
           // We should have skipped but..
@@ -143,6 +161,8 @@ export class FeedsService {
           response.entities = response.activity;
         }
         if (response.entities.length) {
+          this.fallbackAt = response['fallback_at'];
+          this.fallbackAtIndex.next(null);
           this.rawFeed.next(this.rawFeed.getValue().concat(response.entities));
           this.pagingToken = response['load-next'];
         } else {
@@ -168,6 +188,8 @@ export class FeedsService {
    * To clear data.
    */
   clear(): FeedsService {
+    this.fallbackAt = null;
+    this.fallbackAtIndex.next(null);
     this.offset.next(0);
     this.pagingToken = '';
     this.rawFeed.next([]);

src/app/modules/newsfeed/feeds/sorted.component.html

@@ -30,7 +30,7 @@
     [class.m-feeds-sortedList__flex]="!isActivityFeed()"
   >
     <ng-container
-      *ngFor="let entity of feedsService.feed | async; let i = index"
+      *ngFor="let entity$ of feedsService.feed | async; let i = index"
     >
       <ng-container *ngIf="isActivityFeed()">
         <m-featured-content
@@ -39,10 +39,21 @@
         ></m-featured-content>
       </ng-container>
 
-      <m-newsfeed__entity
-        [entity]="entity | async"
-        [slot]="i + 1"
-      ></m-newsfeed__entity>
+      <ng-container *mIfFeature="'top-feeds-by-age'">
+        <div
+          *ngIf="i === (feedsService.fallbackAtIndex | async)"
+          class="m-feeds-sorted__fallbackLegend"
+        >
+          <span i18n>Posts older than {{ period | uppercase }}</span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngIf="entity$ | async as entity">
+        <m-newsfeed__entity
+          [entity]="entity"
+          [slot]="i + 1"
+        ></m-newsfeed__entity>
+      </ng-container>
     </ng-container>
 
     <infinite-scroll

src/app/modules/newsfeed/feeds/sorted.component.scss

@@ -42,6 +42,36 @@ m-newsfeed--sorted {
   }
 }
 
+.m-feeds-sorted__fallbackLegend {
+  text-align: center;
+  margin: 32px auto 28px;
+  height: 0;
+  position: relative;
+  border-top: 1px solid;
+
+  @include m-theme() {
+    border-top-color: themed($m-grey-200);
+  }
+
+  > span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: inline-block;
+    padding: 0 12px;
+    font-size: 11px;
+    line-height: 1;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+
+    @include m-theme() {
+      color: themed($m-grey-400);
+      background: themed($m-body-bg);
+    }
+  }
+}
+
 .m-feeds-sorted__query {
   font-size: 16px;
   letter-spacing: 1px;

src/app/modules/newsfeed/feeds/sorted.component.ts

@@ -230,6 +230,7 @@ export class NewsfeedSortedComponent implements OnInit, OnDestroy {
           all,
           query,
           nsfw,
+          period_fallback: 1,
         })
         .setLimit(12)
         .setCastToActivities(true)