better display of scheduled statuses

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.html

@@ -1,5 +1,5 @@
 <div class="scheduled-status">
-    <div>
+    <div class="scheduled-status__date">
         {{ status.scheduled_at | date: 'MMM d, y, h:mm a' }}
     </div>
 
@@ -9,15 +9,18 @@
     </div>
 
     <div class="scheduled-status__content">
-
         <div class="scheduled-status__content--text scheduled-status__content--spoiler"
-            *ngIf="status.params.spoiler_text">
+            *ngIf="status.params.spoiler_text" title="spoiler">
-            spoiler text: {{ status.params.spoiler_text }}
+            {{ status.params.spoiler_text }}
         </div>
-        <div class="scheduled-status__content--text">
+        <div class="scheduled-status__content--text" title="status text">
             {{ status.params.text }}
         </div>
+    </div>
 
+    <div class="scheduled-status__edition">
+        <button class="scheduled-status__edition--button" title="delete status">Delete</button>
+        <button class="scheduled-status__edition--button" title="reschedule status">Reschedule</button>
 
     </div>
 </div>

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.scss

@@ -1,8 +1,14 @@
+@import "mixins";
 
 $avatar-size: 40px;
 
 .scheduled-status {
-    padding: 0 5px 10px 5px;
+    margin: 0 5px;
+    padding: 5px 5px 5px 5px;
+
+    &__date {
+        margin-bottom: 1px;
+    }
 
     &__avatar {
         float: left;
@@ -25,4 +31,21 @@ $avatar-size: 40px;
         }
     }
 
+    &__edition {
+        @include clearfix;      
+
+        &--button {
+            @include clearButton;
+            transition: all .2s;
+            float: right;
+            margin: 5px 0 5px 5px;
+            padding: 5px 10px;
+
+            background-color: #273047;
+
+            &:hover {
+                background-color: #3b4769;
+            }
+        }
+    }
 }

src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.html

@@ -2,10 +2,8 @@
     <h3 class="panel__title">Scheduled Statuses</h3>
 
     <div class="scheduled-statuses-display flexcroll">
-        <div *ngFor="let n of scheduledStatuses">
+        <div *ngFor="let n of scheduledStatuses" class="scheduled-status">
-            <div *ngFor="let s of n.statuses">
+            <app-scheduled-status [account]="n.account" [status]="n.status"></app-scheduled-status>
-                <app-scheduled-status [account]="n.account" [status]="s" ></app-scheduled-status>
-            </div>
         </div>
     </div>
 </div>

src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.scss

@@ -2,8 +2,22 @@
 @import "panel";
 @import "commons";
 
+.panel {
+    padding-left: 0px;
+    padding-right: 0px;
+}
 
 .scheduled-statuses-display {
     overflow: auto;
-    height: calc(100%);
+    // height: calc(100%);
+    height: calc(100% - 40px);
+}
+
+.scheduled-status {
+    display: block;
+    // outline: 1px dotted salmon;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid #141824;
+    }
 }

src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { ScheduledStatusService, ScheduledStatusNotification } from '../../../services/scheduled-status.service';
+import { ScheduledStatus } from '../../../services/models/mastodon.interfaces';
+import { AccountInfo } from '../../../states/accounts.state';
 
 @Component({
     selector: 'app-scheduled-statuses',
@@ -10,7 +12,8 @@ import { ScheduledStatusService, ScheduledStatusNotification } from '../../../se
 })
 export class ScheduledStatusesComponent implements OnInit, OnDestroy {
     private statusSub: Subscription;
-    scheduledStatuses: ScheduledStatusNotification[] = [];
+    // scheduledStatuses: ScheduledStatusNotification[] = [];
+    scheduledStatuses: ScheduledStatusWrapper[] = [];
 
     constructor(
         private readonly scheduledStatusService: ScheduledStatusService) {            
@@ -18,8 +21,16 @@ export class ScheduledStatusesComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.statusSub = this.scheduledStatusService.scheduledStatuses.subscribe((value: ScheduledStatusNotification[]) => {
-            console.warn(value);
+            this.scheduledStatuses.length = 0;
-            this.scheduledStatuses = value;
+
+            value.forEach(notification => {
+                notification.statuses.forEach(status => {
+                    let wrapper = new ScheduledStatusWrapper(notification.account, status);
+                    this.scheduledStatuses.push(wrapper);
+                });              
+            });
+
+            this.scheduledStatuses.sort((x, y) => new Date(x.status.scheduled_at).getTime() -new Date(y.status.scheduled_at).getTime());
         });
     }
 
@@ -27,3 +38,10 @@ export class ScheduledStatusesComponent implements OnInit, OnDestroy {
         if (this.statusSub) this.statusSub.unsubscribe();
     }
 }
+
+class ScheduledStatusWrapper {
+    constructor( 
+        public readonly account: AccountInfo,
+        public status: ScheduledStatus) {
+    }
+}