restore F shortcut to hide sidebar (#1084)

commafeed-client/src/App.tsx

@@ -38,7 +38,7 @@ import useLocalStorage from "use-local-storage"
 function Providers(props: { children: React.ReactNode }) {
     const preferredColorScheme = useColorScheme()
     const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>("color-scheme", preferredColorScheme)
-    const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"))
+    const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value ?? (colorScheme === "dark" ? "light" : "dark"))
 
     return (
         <I18nProvider i18n={i18n}>
@@ -67,6 +67,8 @@ const ApiDocumentationPage = React.lazy(() => import("pages/app/ApiDocumentation
 
 function AppRoutes() {
     const sidebarWidth = useAppSelector(state => state.tree.sidebarWidth)
+    const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
+
     return (
         <Routes>
             <Route path="/" element={<Navigate to={`/app/category/${Constants.categories.all.id}`} replace />} />
@@ -75,7 +77,7 @@ function AppRoutes() {
             <Route path="register" element={<RegistrationPage />} />
             <Route path="passwordRecovery" element={<PasswordRecoveryPage />} />
             <Route path="api" element={<ApiDocumentationPage />} />
-            <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} sidebarWidth={sidebarWidth} />}>
+            <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} sidebarWidth={sidebarVisible ? sidebarWidth : 0} />}>
                 <Route path="category">
                     <Route path=":id" element={<FeedEntriesPage sourceType="category" />} />
                     <Route path=":id/details" element={<CategoryDetailsPage />} />

commafeed-client/src/app/slices/tree.ts

@@ -10,11 +10,13 @@ interface TreeState {
     rootCategory?: Category
     mobileMenuOpen: boolean
     sidebarWidth: number
+    sidebarVisible: boolean
 }
 
 const initialState: TreeState = {
     mobileMenuOpen: false,
     sidebarWidth: 350,
+    sidebarVisible: true,
 }
 
 export const reloadTree = createAsyncThunk("tree/reload", () => client.category.getRoot().then(r => r.data))
@@ -32,6 +34,9 @@ export const treeSlice = createSlice({
         setSidebarWidth: (state, action: PayloadAction<number>) => {
             state.sidebarWidth = action.payload
         },
+        toggleSidebar: state => {
+            state.sidebarVisible = !state.sidebarVisible
+        },
     },
     extraReducers: builder => {
         builder.addCase(reloadTree.fulfilled, (state, action) => {
@@ -59,5 +64,5 @@ export const treeSlice = createSlice({
     },
 })
 
-export const { setMobileMenuOpen, setSidebarWidth } = treeSlice.actions
+export const { setMobileMenuOpen, setSidebarWidth, toggleSidebar } = treeSlice.actions
 export default treeSlice.reducer

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -171,6 +171,14 @@ export function KeyboardShortcutsHelp() {
                             </Kbd>
                         </td>
                     </tr>
+                    <tr>
+                        <td>
+                            <Trans>Toggle sidebar</Trans>
+                        </td>
+                        <td>
+                            <Kbd>F</Kbd>
+                        </td>
+                    </tr>
                     <tr>
                         <td>
                             <Trans>Show keyboard shortcut help</Trans>

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

@@ -12,6 +12,7 @@ import {
     selectPreviousEntry,
 } from "app/slices/entries"
 import { redirectToRootCategory } from "app/slices/redirect"
+import { toggleSidebar } from "app/slices/tree"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
@@ -234,6 +235,7 @@ export function FeedEntries() {
         )
     })
     useMousetrap("g a", () => dispatch(redirectToRootCategory()))
+    useMousetrap("f", () => dispatch(toggleSidebar()))
     useMousetrap("?", () =>
         openModal({
             title: <Trans>Keyboard shortcuts</Trans>,

commafeed-client/src/locales/ar/messages.po

@@ -801,6 +801,10 @@ msgstr "الموضوع"
 msgid "Toggle read status of current entry"
 msgstr "تبديل قراءة حالة الإدخال الحالي"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "جرب CommaFeed باستخدام الحساب التجريبي: تجريبي / تجريبي"

commafeed-client/src/locales/ca/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Canvia l'estat de lectura de l'entrada actual"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proveu CommaFeed amb el compte de demostració: demo/demo"

commafeed-client/src/locales/cs/messages.po

@@ -801,6 +801,10 @@ msgstr "Téma"
 msgid "Toggle read status of current entry"
 msgstr "Přepne stav čtení aktuálního záznamu"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Vyzkoušejte CommaFeed s demo účtem: demo/demo"

commafeed-client/src/locales/cy/messages.po

@@ -801,6 +801,10 @@ msgstr "Thema"
 msgid "Toggle read status of current entry"
 msgstr "Toglo statws darllen y cofnod cyfredol"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Rhowch gynnig ar CommaFeed gyda'r cyfrif demo: demo / demo"

commafeed-client/src/locales/da/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Skift læsestatus for den aktuelle post"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prøv CommaFeed med demokontoen: demo/demo"

commafeed-client/src/locales/de/messages.po

@@ -801,6 +801,10 @@ msgstr "Thema"
 msgid "Toggle read status of current entry"
 msgstr "Lesestatus des aktuellen Eintrags umschalten"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Testen Sie CommaFeed mit dem Demokonto: demo/demo"

commafeed-client/src/locales/en/messages.po

@@ -801,6 +801,10 @@ msgstr "Theme"
 msgid "Toggle read status of current entry"
 msgstr "Toggle read status of current entry"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr "Toggle sidebar"
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Try out CommaFeed with the demo account: demo/demo"

commafeed-client/src/locales/es/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Alternar estado de lectura de la entrada actual"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Pruebe CommaFeed con la cuenta demo: demo/demo"

commafeed-client/src/locales/fa/messages.po

@@ -801,6 +801,10 @@ msgstr "تم"
 msgid "Toggle read status of current entry"
 msgstr "وضعیت خواندن ورودی فعلی را تغییر دهید"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "CommaFeed را با حساب آزمایشی امتحان کنید: دمو/دمو"

commafeed-client/src/locales/fi/messages.po

@@ -801,6 +801,10 @@ msgstr "Teema"
 msgid "Toggle read status of current entry"
 msgstr "Vaihda nykyisen merkinnän lukutila"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Kokeile CommaFeediä demotilillä: demo/demo"

commafeed-client/src/locales/fr/messages.po

@@ -801,6 +801,10 @@ msgstr "Thème"
 msgid "Toggle read status of current entry"
 msgstr "Marquer l'entrée actuelle comme lue/non lue"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Essayez CommaFeed avec le compte de démonstration : demo/demo"

commafeed-client/src/locales/gl/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "alternar o estado de lectura da entrada actual"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proba CommaFeed coa conta de demostración: demo/demo"

commafeed-client/src/locales/hu/messages.po

@@ -801,6 +801,10 @@ msgstr "Téma"
 msgid "Toggle read status of current entry"
 msgstr "Az aktuális bejegyzés olvasási állapotának váltása"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Próbálja ki a CommaFeed-et a demo fiókkal: demo/demo"

commafeed-client/src/locales/id/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Beralih status baca entri saat ini"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Cobalah CommaFeed dengan akun demo: demo/demo"

commafeed-client/src/locales/it/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Commuta lo stato di lettura della voce corrente"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prova CommaFeed con il conto demo: demo/demo"

commafeed-client/src/locales/ja/messages.po

@@ -801,6 +801,10 @@ msgstr "テーマ"
 msgid "Toggle read status of current entry"
 msgstr "現在のエントリの読み取りステータスを切り替えます"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "デモアカウントで CommaFeed を試す: demo/demo"

commafeed-client/src/locales/ko/messages.po

@@ -801,6 +801,10 @@ msgstr "테마"
 msgid "Toggle read status of current entry"
 msgstr "현재 항목의 읽기 상태 전환"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "데모 계정으로 CommaFeed를 사용해 보세요: demo/demo"

commafeed-client/src/locales/ms/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Togol status bacaan entri semasa"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Cuba CommaFeed dengan akaun demo: demo/demo"

commafeed-client/src/locales/nb/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Veksle lesestatus for gjeldende oppføring"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prøv CommaFeed med demokontoen: demo/demo"

commafeed-client/src/locales/nl/messages.po

@@ -801,6 +801,10 @@ msgstr "Thema"
 msgid "Toggle read status of current entry"
 msgstr "Toggle leesstatus van huidige invoer"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Probeer CommaFeed uit met het demo-account: demo/demo"

commafeed-client/src/locales/nn/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Veksle lesestatus for gjeldende oppføring"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prøv CommaFeed med demokontoen: demo/demo"

commafeed-client/src/locales/pl/messages.po

@@ -801,6 +801,10 @@ msgstr "Motyw"
 msgid "Toggle read status of current entry"
 msgstr "Przełącz stan odczytu bieżącego wpisu"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Wypróbuj CommaFeed z kontem demo: demo/demo"

commafeed-client/src/locales/pt/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Alternar o status de leitura da entrada atual"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Experimente o CommaFeed com a conta demo: demo/demo"

commafeed-client/src/locales/ru/messages.po

@@ -801,6 +801,10 @@ msgstr "Тема"
 msgid "Toggle read status of current entry"
 msgstr "Переключить статус чтения текущей записи"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Попробуйте CommaFeed на демо-счете: demo/demo"

commafeed-client/src/locales/sk/messages.po

@@ -801,6 +801,10 @@ msgstr "Téma"
 msgid "Toggle read status of current entry"
 msgstr "Prepne stav čítania aktuálneho záznamu"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Vyskúšajte CommaFeed s demo účtom: demo/demo"

commafeed-client/src/locales/sv/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Växla lässtatus för aktuell post"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Prova CommaFeed med demokontot: demo/demo"

commafeed-client/src/locales/tr/messages.po

@@ -801,6 +801,10 @@ msgstr "Tema"
 msgid "Toggle read status of current entry"
 msgstr "Geçerli girişin okuma durumunu değiştir"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "CommaFeed'i demo hesabıyla deneyin: demo/demo"

commafeed-client/src/locales/zh/messages.po

@@ -801,6 +801,10 @@ msgstr "主题"
 msgid "Toggle read status of current entry"
 msgstr "切换当前条目的读取状态"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "使用演示帐户试用 CommaFeed：demo/demo"

commafeed-client/src/pages/app/Layout.tsx

@@ -88,6 +88,7 @@ export default function Layout(props: LayoutProps) {
     const viewport = useViewportSize()
     const { loading } = useAppLoading()
     const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
+    const sidebarHidden = props.sidebarWidth === 0
     const dispatch = useAppDispatch()
     useWebSocket()
 
@@ -130,8 +131,8 @@ export default function Layout(props: LayoutProps) {
             navbar={
                 <Navbar
                     id="sidebar"
-                    hiddenBreakpoint={Constants.layout.mobileBreakpoint}
+                    hiddenBreakpoint={sidebarHidden ? 99999999 : Constants.layout.mobileBreakpoint}
-                    hidden={!mobileMenuOpen}
+                    hidden={sidebarHidden || !mobileMenuOpen}
                     width={{ md: props.sidebarWidth }}
                 >
                     <Resizable