Allow popup and manage page lists to be sorted independently

Fixes #35, fixes #93.

* Default the manage page list to sort by name, but show the ListSort
  control to allow users to change it.

* Show a dynamic count of the current number of logins displayed on the
  manage page, including updates while searching/filtering the list.

* Persist the manage page sort state to localStorage, so that it
  persists across page loads.

* Default the popup to sort by last-used, and don't display any controls
  to change the popup sort.

* Ease unit test debugging: configure karma-mocha-reporter to show
  object diffs on failure.

Author: jaredhirsch

karma.conf.js

@@ -30,6 +30,9 @@ module.exports = (config) => {
         { type: "html", subdir: "html" },
       ],
     },
+    mochaReporter: {
+      showDiff: true,
+    },
 
     webpack: require("./webpack.config"),
     webpackMiddleware: {

src/common.js

@@ -8,6 +8,8 @@ export function makeItemSummary(item) {
     id: item.id,
     origins: item.origins,
     username: item.entry.username,
+    timeLastUsed: item.timeLastUsed,
+    timePasswordChanged: item.timePasswordChanged,
   };
 }
 

src/icons/arrow-dropdown.svg

@@ -29,6 +29,10 @@ export const CANCEL_EDITING = Symbol("CANCEL_EDITING");
 
 export const FILTER_ITEMS = Symbol("FILTER_ITEMS");
 
+export const SORT_BY_NAME = Symbol("SORT_BY_NAME");
+export const SORT_BY_LAST_USED = Symbol("SORT_BY_LAST_USED");
+export const SORT_BY_LAST_CHANGED = Symbol("SORT_BY_LAST_CHANGED");
+
 export const SHOW_MODAL = Symbol("SHOW_MODAL");
 export const HIDE_MODAL = Symbol("HIDE_MODAL");
 

src/list/actions.js

@@ -37,10 +37,12 @@ ItemList.propTypes = {
   ).isRequired,
   itemClassName: PropTypes.string,
   panel: PropTypes.bool,
+  sort: PropTypes.string,
 };
 
 ItemList.defaultProps = {
   itemClassName: "",
+  sort: "name",
 };
 
 export function ItemListPlaceholder({children}) {

src/list/components/item-list.js

@@ -41,7 +41,7 @@ body > main,
 
 .aside {
   grid-column: 1;
-  min-width: 150px;
+  min-width: 250px;
   min-height: 0;
   display: flex;
   flex-direction: column;

src/list/manage/components/app.css

@@ -2,17 +2,48 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.filter-toolbar > * + * {
-  margin-inline-start: 8px;
+.filter-toolbar {
+  flex-direction: column;
+  align-items: stretch;
 }
 
 .panel-header {
   composes: panel-header from "../../../widgets/panel.css";
   background: #fff;
+  height: auto;
+}
+
+.first-row, .second-row {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.first-row > * + * {
+  margin-inline-start: 8px;
+}
+
+.second-row {
+  font-weight: normal;
+  display: flex;
+  justify-content: space-between;
+  margin-inline-start: 0;
+  line-height: 32px;
+  height: 32px;
+  margin-bottom: -12px;
+  margin-top: 8px;
 }
 
 .item-filter {
   composes: item-filter from "../../../widgets/panel.css";
   background: #f3f3f5;
   height: 32px;
 }
+
+.flex-spacer {
+  flex-grow: 1;
+}
+
+.list-counter {
+  flex-grow: 0;
+  flex-shrink: 0;
+}

src/list/manage/components/item-list-panel.css

@@ -10,11 +10,13 @@ import { PanelHeader, PanelBody } from "../../../widgets/panel";
 import AddItem from "../containers/add-item";
 import ItemList, { ItemListPlaceholder } from "../../components/item-list";
 import ItemFilter from "../../containers/item-filter";
+import ListSort from "../containers/list-sort.js";
+import ListCounter from "../components/list-counter.js";
 
 import styles from "./item-list-panel.css";
 
 export default function ItemListPanel({className, inputRef, totalItemCount,
-                                       ...props}) {
+                                       sort, count, ...props}) {
   const hasItems = props.items.length !== 0;
   let list;
   if (!hasItems) {
@@ -35,9 +37,16 @@ export default function ItemListPanel({className, inputRef, totalItemCount,
       <PanelHeader className={styles.panelHeader}
                    border={hasItems ? "floating" : "none"}
                    toolbarClassName={styles.filterToolbar}>
-        <ItemFilter className={styles.itemFilter}
-                    inputRef={inputRef}/>
-        <AddItem/>
+        <div className={styles.firstRow}>
+          <ItemFilter className={styles.itemFilter}
+                      inputRef={inputRef}/>
+          <AddItem/>
+        </div>
+        <div className={styles.secondRow}>
+          <ListSort sort={sort} {...props} />
+          <div className={styles.flexSpacer}></div>
+          <ListCounter count={count} className={styles.listCounter} />
+        </div>
       </PanelHeader>
 
       <PanelBody scroll={false}>

src/list/manage/components/item-list-panel.js

@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+export default function ListCounter({count, className}) {
+  return (
+    <Localized id="list-count" $count={count}>
+      <div id="listCounter" className={className} >{count} eNTRIEs</div>
+    </Localized>
+  );
+}
+
+ListCounter.propTypes = {
+  count: PropTypes.number,
+  className: PropTypes.string,
+};
+
+ListCounter.defaultProps = {
+  count: 0,
+  className: "",
+};

src/list/manage/components/list-counter.js

@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.label {
+  color: #4a4a4f;
+}
+
+.select {
+  color: #0c0c0d;
+  appearance: none;
+  -moz-appearance: none;
+  border: none;
+  font-weight: bold;
+  background: url(/icons/arrow-dropdown.svg) right center no-repeat;
+  padding-inline-end: 18px;
+  border-radius: 0;
+}
+
+.select option {
+  font-weight: normal;
+}
+
+.select[disabled] {
+  cursor: not-allowed;
+}