diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx index 61b71733..70b73e00 100644 --- a/commafeed-client/src/App.tsx +++ b/commafeed-client/src/App.tsx @@ -15,6 +15,7 @@ import { Tree } from "components/sidebar/Tree" import { useI18n } from "i18n" import { AdminUsersPage } from "pages/admin/AdminUsersPage" import { MetricsPage } from "pages/admin/MetricsPage" +import { AboutPage } from "pages/app/AboutPage" import { AddPage } from "pages/app/AddPage" import { CategoryDetailsPage } from "pages/app/CategoryDetailsPage" import { FeedDetailsPage } from "pages/app/FeedDetailsPage" @@ -81,6 +82,7 @@ function AppRoutes() { } /> } /> + } /> } /> diff --git a/commafeed-client/src/app/slices/redirect.ts b/commafeed-client/src/app/slices/redirect.ts index c138d470..2e0bc4e4 100644 --- a/commafeed-client/src/app/slices/redirect.ts +++ b/commafeed-client/src/app/slices/redirect.ts @@ -40,6 +40,7 @@ export const redirectToAdminUsers = createAsyncThunk("redirect/admin/users", (_, export const redirectToMetrics = createAsyncThunk("redirect/admin/metrics", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/admin/metrics")) ) +export const redirectToAbout = createAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about"))) export const redirectSlice = createSlice({ name: "redirect", diff --git a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx new file mode 100644 index 00000000..b7aedfb5 --- /dev/null +++ b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx @@ -0,0 +1,134 @@ +import { Trans } from "@lingui/macro" +import { Kbd, Table } from "@mantine/core" + +export function KeyboardShortcutsHelp() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Refresh + + R +
+ Open next entry + + J +
+ Open previous entry + + K +
+ Move the page down + + + Space + +
+ Move the page up + + + Shift + + + + + Space + +
+ Open/close current entry + + O, + + Enter + +
+ Open current entry in a new tab + + V +
+ Open current entry in a new tab in the background + + B +
+ Toggle read status of current entry + + M +
+ Mark all entries as read + + + Shift + + + + A +
+ Go to the All view + + G + + A +
+ Navigate to a subscription by entering its name + + G + + U +
+ Show keyboard shortcut help + + ? +
+ ) +} diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx index 6ef879ea..f77b7b2e 100644 --- a/commafeed-client/src/components/content/FeedEntries.tsx +++ b/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: }) + }) if (!entries) return return ( diff --git a/commafeed-client/src/components/content/add/CategorySelect.tsx b/commafeed-client/src/components/content/add/CategorySelect.tsx index 3a53972b..562d58a3 100644 --- a/commafeed-client/src/components/content/add/CategorySelect.tsx +++ b/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) { +type CategorySelectProps = Partial & { 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) { label: c.name, value: c.id, })) + if (props.withAll) { + selectData?.unshift({ + label: t`All`, + value: Constants.categoryIds.all, + }) + } return + + + + + +
+ + + + + + +
+ + + +
}> + +
+
}> + + + Browser extentions + + + + Firefox + + + + + Chrome + + + + + Opera + + + + + + Subscribe URL + + + rest/feed/subscribe?url=FEED_URL_HERE + + + + Next unread item bookmarklet + + + + + + +
+
}> + + Link to the API documentation. + +
+ + + ) +}