feat(web): rebindable keyboard shortcuts and a Keybinds settings page

apps/native/scripts/ios.ts

@@ -65,7 +65,8 @@ const environment: Record<string, string> = release
 writeFileSync(`${app}/environment.json`, JSON.stringify(environment))
 cpSync(`${root}../web-foldkit/public`, `${app}/public`, { recursive: true })
 
-const info: Record<string, unknown> = {
+/** The app's Info.plist, as JSON for `plutil`: Apple's keys, and what the asset catalog adds. */
+const info = {
 	CFBundleExecutable: "hazel-ios",
 	CFBundleIdentifier: bundleId,
 	CFBundleName: "Hazel",
@@ -81,10 +82,10 @@ const info: Record<string, unknown> = {
 	// Motion may run above 60 Hz on a ProMotion iPhone (Rune's display link asks for 120).
 	CADisableMinimumFrameDurationOnPhone: true,
 	UIRequiredDeviceCapabilities: ["arm64"],
-}
+} satisfies Record<string, unknown>
 // A dev stack on this Mac (http://localhost); everything else is HTTPS.
 if ((environment.VITE_BACKEND_URL ?? "http://").startsWith("http://"))
-	info.NSAppTransportSecurity = { NSAllowsLocalNetworking: true }
+	Object.assign(info, { NSAppTransportSecurity: { NSAllowsLocalNetworking: true } })
 
 if (release) {
 	const version = process.env.HAZEL_IOS_VERSION || "0.1.0"
@@ -165,10 +166,11 @@ if (!release) {
 
 // Signed for the App Store with what the profile grants: its team's identifier for this app, and
 // the app's own keychain group (the sign-in vault, `hazel_native::sign_in`).
-// SAFETY: `release` checked `profile` above.
-cpSync(profile!, `${app}/embedded.mobileprovision`)
+if (profile === undefined)
+	throw new Error("--release needs HAZEL_IOS_PROFILE (an App Store .mobileprovision)")
+cpSync(profile, `${app}/embedded.mobileprovision`)
 const decoded = `${out}/build/profile.plist`
-writeFileSync(decoded, execFileSync("security", ["cms", "-D", "-i", profile!]))
+writeFileSync(decoded, execFileSync("security", ["cms", "-D", "-i", profile]))
 const team = read("plutil", ["-extract", "TeamIdentifier.0", "raw", "-o", "-", decoded])
 const granted = read("plutil", ["-extract", "Entitlements.application-identifier", "raw", "-o", "-", decoded])
 const appId = `${team}.${bundleId}`

apps/web-foldkit/package.json

@@ -23,7 +23,6 @@
 		"@simplewebauthn/browser": "^14.0.0",
 		"@tanstack/browser-db-sqlite-persistence": "1.0.0-rc.1.1",
 		"@tanstack/db": "1.0.0-rc.1.1",
-		"@tanstack/hotkeys": "0.22.0",
 		"@yielded/auth": "0.1.0-beta.47",
 		"@yielded/auth-simplewebauthn": "0.1.0-beta.47",
 		"clsx": "^2.1.1",

apps/web-foldkit/src/app/command.ts

@@ -6,6 +6,8 @@ import { readAccessToken } from "~/lib/access-token"
 import { isRetryableError } from "~/lib/error-messages"
 import { catchCommon } from "../data/actions"
 import { saveSoundSettings, SoundSettings } from "../notification-sound"
+import { saveKeybindingOverrides } from "../keybindings"
+import { Overrides } from "~/lib/keybindings/keymap"
 import { clearNoteDrafts } from "../page/customers/detail/note-drafts"
 import { HazelRpc } from "../rpc"
 import { applyTheme, ResolvedTheme, saveThemePreference, ThemeCustomization, ThemePreference } from "../theme"
@@ -74,6 +76,16 @@ export const SaveSoundSettings = Command.define("SaveSoundSettings", {
 		),
 })
 
+export const SaveKeybindings = Command.define("SaveKeybindings", {
+	args: { overrides: Overrides },
+	messages: [Message.CompletedSaveKeybindings, Message.FailedSaveKeybindings],
+	execute: ({ overrides }) =>
+		saveKeybindingOverrides(overrides).pipe(
+			Effect.as(Message.CompletedSaveKeybindings()),
+			Effect.catchTag("StorageWriteError", () => Effect.succeed(Message.FailedSaveKeybindings())),
+		),
+})
+
 /** `notificationOrchestrator.enqueue(events)`; it skips what it has already processed. */
 export const DeliverNotifications = Command.define("DeliverNotifications", {
 	args: { ids: Schema.Array(NotificationId) },

apps/web-foldkit/src/app/hotkeys.story.test.ts

@@ -3,8 +3,7 @@ import { NotificationId, OrganizationId } from "@hazel/schema"
 import { Schema } from "effect"
 import { Command, given, message, model, story } from "foldkit/story"
 import { describe, expect, test } from "vitest"
-import { HOTKEY_DEFINITIONS_BY_ID } from "~/lib/hotkeys/hotkey-registry"
-import { SHORTCUT_SECTIONS } from "~/lib/hotkeys/shortcut-catalog"
+import { appKeymap } from "~/lib/keybindings/app-keymap"
 import { update } from "../main"
 import { LayoutHotkeyActionId } from "../overlay/hotkeys"
 import * as ShellModel from "../shell/model"
@@ -165,12 +164,11 @@ describe("Mod+[ / Mod+] (Slack)", () => {
 	})
 })
 
-describe("the Mod+/ dialog lists every bound layout hotkey", () => {
-	test("each layout action appears in the catalog with its default keys", () => {
-		const listed = new Set(SHORTCUT_SECTIONS.flatMap((section) => section.shortcuts.map((s) => s.label)))
-		// Mod+Alt+Shift+Arrows run the unread-channel step until there is mention data: not listed twice.
-		const aliases: ReadonlyArray<LayoutHotkeyActionId> = ["mention.previous", "mention.next"]
-		for (const actionId of LayoutHotkeyActionId.literals.filter((id) => !aliases.includes(id)))
-			expect(listed, actionId).toContain(HOTKEY_DEFINITIONS_BY_ID[actionId].label)
+describe("the layout hotkeys are keymap actions", () => {
+	test("each layout action is rebindable and has a default key", () => {
+		for (const actionId of LayoutHotkeyActionId.literals) {
+			expect(appKeymap.byId[actionId].rebindable, actionId).toBe(true)
+			expect(appKeymap.byId[actionId].defaultKey, actionId).not.toBeNull()
+		}
 	})
 })

apps/web-foldkit/src/app/loading.test.ts

@@ -46,6 +46,8 @@ const boot = (path: string): Model =>
 					sessionStartMs: 0,
 					isMobile: false,
 					isCreateChannelHintDismissed: false,
+					keybindingOverrides: {},
+					keyboardPlatform: "linux",
 				},
 				url,
 			).model,

apps/web-foldkit/src/app/message.ts

@@ -40,6 +40,8 @@ export const Message = defineMessageUnion({
 	FailedSaveThemePreference: {},
 	CompletedSaveSoundSettings: {},
 	FailedSaveSoundSettings: {},
+	CompletedSaveKeybindings: {},
+	FailedSaveKeybindings: {},
 	/** The member's latest notifications (newest first), for the sound and native sinks. */
 	UpdatedRecentNotifications: { ids: Schema.Array(NotificationId) },
 	CompletedDeliverNotifications: {},

apps/web-foldkit/src/app/model.ts

@@ -12,6 +12,9 @@ import { PageSlot } from "../page/registry"
 import { AppRoute, orgSectionOf, orgSlugOf } from "../route"
 import { type Auth, CurrentUser, Member, Organization } from "../session"
 import { SoundSettings } from "../notification-sound"
+import { appKeymap } from "~/lib/keybindings/app-keymap"
+import { Platform as KeyboardPlatform } from "~/lib/keybindings/key-combo"
+import { Overrides } from "~/lib/keybindings/keymap"
 import * as Platform from "../platform"
 import * as Updates from "../platform/updates"
 import * as Shell from "../shell/model"
@@ -86,6 +89,10 @@ export const Model = Schema.Struct({
 	systemTheme: ResolvedTheme,
 	/** `notificationSoundSettingsAtom`, stored like legacy. */
 	soundSettings: SoundSettings,
+	/** The user's keybinding changes (`keybindings.ts`), stored per device. */
+	keybindingOverrides: Overrides,
+	/** The keyboard's platform: what `Mod` means, and how keys are labeled. */
+	keyboardPlatform: KeyboardPlatform,
 	/** When this app load started (from Flags), for the notification sinks. */
 	sessionStartMs: Schema.Number,
 	page: Schema.NullOr(PageSlot),
@@ -151,6 +158,9 @@ export const sharedOf = (model: Model): Shared => ({
 	isMobile: model.isMobile,
 	theme: { ...model.themePreference, resolved: resolvedThemeOf(model) },
 	soundSettings: model.soundSettings,
+	keys: appKeymap.resolve(model.keybindingOverrides, model.keyboardPlatform),
+	keybindingOverrides: model.keybindingOverrides,
+	keyboardPlatform: model.keyboardPlatform,
 	desktopUpdate: model.desktopUpdate,
 	isOverlayOpen: model.modal.current !== null || model.commandPalette.isOpen,
 })

apps/web-foldkit/src/app/out-messages.story.test.ts

@@ -18,18 +18,20 @@ import { BroadcastActivity, SendPresenceUpdate } from "../platform/presence/upda
 import { ada, hazelOrg, plainMember, signedIn, urlOf } from "../test/root-fixtures"
 import * as CommandMenu from "../ui/command-menu"
 import { DEFAULT_SOUND_SETTINGS } from "../notification-sound"
+import { combo } from "~/lib/keybindings/key-combo"
 import * as Menu from "../ui/menu"
 import {
 	ApplyTheme,
 	CreateDm,
 	LoadExternal,
 	NavigateInternal,
+	SaveKeybindings,
 	SaveSoundSettings,
 	SaveThemePreference,
 	SignOut,
 } from "./command"
 import { Message } from "./message"
-import { dmRequestKey, type Model } from "./model"
+import { dmRequestKey, type Model, sharedOf } from "./model"
 import { Message as HomeMessage } from "../page/home/message"
 import type { DirectoryMember } from "../page/home/model"
 
@@ -300,6 +302,38 @@ describe("RequestedSoundSettings", () => {
 	})
 })
 
+describe("RequestedKeybindings", () => {
+	test("the Keybinds page's new key is stored by the root and rebinds the hotkeys", () => {
+		const overrides = { "inbox.open": combo("Mod+J") }
+		story(
+			update,
+			given(signedIn("/hazel/my-settings/keybinds")),
+			message(
+				Message.GotPageMessage({
+					message: {
+						_tag: "MySettingsKeybinds",
+						message: { _tag: "ClickedRecord", actionId: "inbox.open" },
+					},
+				}),
+			),
+			message(
+				Message.GotPageMessage({
+					message: {
+						_tag: "MySettingsKeybinds",
+						message: { _tag: "PressedCombo", combo: combo("Mod+J") },
+					},
+				}),
+			),
+			Command.expectHas(SaveKeybindings({ overrides })),
+			Command.resolveAll([SaveKeybindings, Message.CompletedSaveKeybindings()]),
+			model((m) => {
+				expect(m.keybindingOverrides).toEqual(overrides)
+				expect(sharedOf(m).keys["inbox.open"]).toBe("Mod+J")
+			}),
+		)
+	})
+})
+
 describe("hotkeys", () => {
 	test("create channel needs the channel.create permission", () => {
 		story(

apps/web-foldkit/src/app/subscription.ts

@@ -17,7 +17,7 @@ import { chatChannelIdOf, isChatRoute, orgSlugOf } from "../route"
 import type { Member, Organization } from "../session"
 import * as ShellSubscription from "../shell/subscription"
 import * as CommandPalette from "../overlay/command-palette"
-import { layoutHotkeys } from "../overlay/hotkeys"
+import { LayoutKeys, layoutHotkeys, layoutKeysOf } from "../overlay/hotkeys"
 import * as Modal from "../overlay/modal"
 import * as Platform from "../platform"
 import { desktopMenuItems } from "../platform/desktop-menu"
@@ -218,6 +218,7 @@ const overlaySubscriptions = Subscription.make<Model, Message>()((entry) => ({
 			isEnabled: Schema.Boolean,
 			isChannelNavigationEnabled: Schema.Boolean,
 			isOverlayOpen: Schema.Boolean,
+			keys: LayoutKeys,
 		},
 		{
 			modelToDependencies: (model) => {
@@ -226,11 +227,12 @@ const overlaySubscriptions = Subscription.make<Model, Message>()((entry) => ({
 					isEnabled: authOf(model.session) === "SignedIn" && orgSlugOf(model.route) !== undefined,
 					isChannelNavigationEnabled: isChatRoute(model.route) && !isOverlayOpen,
 					isOverlayOpen,
+					keys: layoutKeysOf(sharedOf(model).keys),
 				}
 			},
-			dependenciesToStream: ({ isEnabled, isChannelNavigationEnabled, isOverlayOpen }) =>
+			dependenciesToStream: ({ isEnabled, isChannelNavigationEnabled, isOverlayOpen, keys }) =>
 				isEnabled
-					? layoutHotkeys((actionId) => Message.PressedHotkey({ actionId }), {
+					? layoutHotkeys((actionId) => Message.PressedHotkey({ actionId }), keys, {
 							isChannelNavigationEnabled,
 							isOverlayOpen,
 						})

apps/web-foldkit/src/app/view.ts

@@ -78,6 +78,8 @@ const shellContextOf = (model: Model, data: ShellData): ShellContext => ({
 		avatarUrl: data.user.avatarUrl,
 	},
 	appVersion: __APP_VERSION__,
+	paletteKey: sharedOf(model).keys["commandPalette.open"],
+	createChannelKey: sharedOf(model).keys["channel.create"],
 })
 
 /** The routed page, or an empty placeholder until its page is ported. */