Notifications filter changes (#319)

## Issue
312 Save notification on back navigation, enable filter on mobile

## Changes
- Don't clear then filter when mounted and there are unread notifications.
   - We previously clear the filter because the user could be clicking the notification bell (which is showing some number) and we ended up with a blank page because of the filter.
- Allow the filter in mobile.
   - Previously, it was intentionally removed for mobile (see bd42418f). I believe it was just because we don't have the style set up for mobile. Here's my quick attempt.

ui/page/notifications/view.jsx

@@ -73,13 +73,6 @@ export default function NotificationsPage(props: Props) {
     }
   }, [doCommentReactList, list, activeChannel, fetching, initialFetchDone]);
 
-  React.useEffect(() => {
-    if (unseenCount > 0 || unreadCount > 0) {
-      // If there are unread notifications when entering the page, reset to All.
-      setName(NOTIFICATIONS.NOTIFICATION_NAME_ALL);
-    }
-  }, []);
-
   React.useEffect(() => {
     if (unseenCount > 0) {
       doSeeAllNotifications();
@@ -120,13 +113,7 @@ export default function NotificationsPage(props: Props) {
             <Button icon={ICONS.EYE} onClick={doReadNotifications} button="secondary" label={__('Mark all as read')} />
           )}
           {notificationCategories && (
-            <FormField
+            <FormField type="select" name="filter" value={name} onChange={(e) => setName(e.target.value)}>
-              className="notification__filter"
-              type="select"
-              name="filter"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            >
               {notificationCategories.map((category) => {
                 return (
                   <option key={category.name} value={category.name}>
@@ -170,7 +157,7 @@ export default function NotificationsPage(props: Props) {
   );
 
   return (
-    <Page>
+    <Page className="notification-page">
       {initialFetchDone ? (
         notificationListElement
       ) : fetching ? (

ui/scss/component/_notification.scss

@@ -279,10 +279,23 @@ $contentMaxWidth: 60rem;
   }
 }
 
-.notification__filter {
+.notification-page {
-  display: none;
+  @media (max-width: $breakpoint-small) {
-
+    .claim-list__header {
-  @media (min-width: $breakpoint-small) {
       display: block;
     }
+
+    .claim-list__alt-controls--wrap {
+      display: block;
+      text-align: right;
+
+      .button {
+        margin-bottom: var(--spacing-s);
+      }
+
+      fieldset-section {
+        margin-left: 0;
+      }
+    }
+  }
 }