feat: shorcuts tab in settings

src/renderer/src/lib/constants.tsx

@@ -62,6 +62,11 @@ export const settingTabs = [
     path: "actions",
     className: "i-mgc-magic-2-cute-re",
   },
+  {
+    name: "Shortcuts",
+    path: "shortcuts",
+    className: "i-mgc-hotkey-cute-re",
+  },
   {
     name: "Profile",
     path: "profile",

src/renderer/src/lib/shortcuts.ts

@@ -0,0 +1,50 @@
+export const shortcuts = {
+  subscriptions: {
+    previous: {
+      name: "Previous Subscription",
+      key: "p",
+    },
+    next: {
+      name: "Next Subscription",
+      key: "n",
+    },
+    toggleFolder: {
+      name: "Toggle Folder",
+      key: "x",
+    },
+    add: {
+      name: "Add Subscription",
+      key: "ctrl+t, ⌘+t",
+    },
+  },
+  entries: {
+    refetch: {
+      name: "Refetch",
+      key: "r",
+    },
+    previous: {
+      name: "Previous Entry",
+      key: "k, up",
+    },
+    next: {
+      name: "Next Entry",
+      key: "j, down",
+    },
+    toggleRead: {
+      name: "Toggle Read",
+      key: "m",
+    },
+    toggleStarred: {
+      name: "Toggle Starred",
+      key: "s",
+    },
+    openInBrower: {
+      name: "Open in Browser",
+      key: "b, ↩︎",
+    },
+    markAllAsRead: {
+      name: "Mark All as Read",
+      key: "a",
+    },
+  },
+}

src/renderer/src/pages/settings/shortcuts.tsx

@@ -0,0 +1,26 @@
+import { shortcuts } from "@renderer/lib/shortcuts"
+import { cn } from "@renderer/lib/utils"
+import { SettingsTitle } from "@renderer/modules/settings/title"
+
+export function Component() {
+  return (
+    <>
+      <SettingsTitle path="shortcuts" className="mb-4" />
+      <div className="space-y-6">
+        {Object.keys(shortcuts).map((type) => (
+          <section key={type}>
+            <div className="mb-2 text-sm capitalize">{type}</div>
+            <div className="rounded-md border text-[13px] text-zinc-600">
+              {Object.keys(shortcuts[type]).map((action, index) => (
+                <div key={`${type}-${action}`} className={cn("flex items-center justify-between px-3 py-1.5", index % 2 && "bg-native/40")}>
+                  <div>{shortcuts[type][action].name}</div>
+                  <div className="uppercase">{shortcuts[type][action].key}</div>
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </>
+  )
+}