add about page

commafeed-client/src/components/content/FeedEntries.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/macro"
+import { openModal } from "@mantine/modals"
 import { Constants } from "app/constants"
 import {
     loadMoreEntries,
@@ -10,6 +12,7 @@ import {
 } from "app/slices/entries"
 import { redirectToRootCategory } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
+import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
 import { useMousetrap } from "hooks/useMousetrap"
 import { useEffect, useRef } from "react"
@@ -129,6 +132,9 @@ export function FeedEntries() {
     useMousetrap("g a", () => {
         dispatch(redirectToRootCategory())
     })
+    useMousetrap("?", () => {
+        openModal({ title: t`Keyboard shortcuts`, size: "xl", children: <KeyboardShortcutsHelp /> })
+    })
 
     if (!entries) return <Loader />
     return (

commafeed-client/src/components/content/add/CategorySelect.tsx

@@ -1,9 +1,12 @@
+import { t } from "@lingui/macro"
 import { Select, SelectItem, SelectProps } from "@mantine/core"
 import { Constants } from "app/constants"
 import { useAppSelector } from "app/store"
 import { flattenCategoryTree } from "app/utils"
 
-export function CategorySelect(props: Partial<SelectProps>) {
+type CategorySelectProps = Partial<SelectProps> & { withAll?: boolean }
+
+export function CategorySelect(props: CategorySelectProps) {
     const rootCategory = useAppSelector(state => state.tree.rootCategory)
     const categories = rootCategory && flattenCategoryTree(rootCategory)
     const selectData: SelectItem[] | undefined = categories
@@ -13,6 +16,12 @@ export function CategorySelect(props: Partial<SelectProps>) {
             label: c.name,
             value: c.id,
         }))
+    if (props.withAll) {
+        selectData?.unshift({
+            label: t`All`,
+            value: Constants.categoryIds.all,
+        })
+    }
 
     return <Select {...props} data={selectData ?? []} disabled={!selectData} />
 }