Add keyboard shortcuts (#637)

* Add documentation
* Fix manual styling
* Add dialog for setting Movie images
* Mention manual in README

ui/v2.5/src/hooks/ListHook.tsx

@@ -69,6 +69,11 @@ interface IListHookOptions<T, E> {
     selected: E[],
     onClose: (confirmed: boolean) => void
   ) => JSX.Element | undefined;
+  addKeybinds?: (
+    result: T,
+    filter: ListFilterModel,
+    selectedIds: Set<string>
+  ) => () => void;
 }
 
 interface IDataItem {
@@ -112,6 +117,53 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
   const totalCount = options.getCount(result);
   const items = options.getData(result);
 
+  useEffect(() => {
+    Mousetrap.bind("right", () => {
+      const maxPage = totalCount / filter.itemsPerPage;
+      if (filter.currentPage < maxPage) {
+        onChangePage(filter.currentPage + 1);
+      }
+    });
+    Mousetrap.bind("left", () => {
+      if (filter.currentPage > 1) {
+        onChangePage(filter.currentPage - 1);
+      }
+    });
+
+    Mousetrap.bind("shift+right", () => {
+      const maxPage = totalCount / filter.itemsPerPage + 1;
+      onChangePage(Math.min(maxPage, filter.currentPage + 10));
+    });
+    Mousetrap.bind("shift+left", () => {
+      onChangePage(Math.max(1, filter.currentPage - 10));
+    });
+    Mousetrap.bind("ctrl+end", () => {
+      const maxPage = totalCount / filter.itemsPerPage + 1;
+      onChangePage(maxPage);
+    });
+    Mousetrap.bind("ctrl+home", () => {
+      onChangePage(1);
+    });
+
+    let unbindExtras: () => void;
+    if (options.addKeybinds) {
+      unbindExtras = options.addKeybinds(result, filter, selectedIds);
+    }
+
+    return () => {
+      Mousetrap.unbind("right");
+      Mousetrap.unbind("left");
+      Mousetrap.unbind("shift+right");
+      Mousetrap.unbind("shift+left");
+      Mousetrap.unbind("ctrl+end");
+      Mousetrap.unbind("ctrl+home");
+
+      if (unbindExtras) {
+        unbindExtras();
+      }
+    };
+  });
+
   const updateInterfaceConfig = useCallback(
     (updatedFilter: ListFilterModel) => {
       setInterfaceState((config) => {
@@ -354,6 +406,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
   const template = (
     <div>
       <ListFilter
+        subComponent={options.subComponent}
         onFilterUpdate={updateQueryParams}
         onSelectAll={onSelectAll}
         onSelectNone={onSelectNone}