[ENG-1582 + ENG-1586] Add tab keybinds to shortcut + object.hasOwn bug fix (#2022)

* add tabs shortcuts to keybind page + fix object.hasOwn

* Update useShortcut.ts

interface/app/$libraryId/TopBar/index.tsx

@@ -1,14 +1,18 @@
 import { Plus, X } from '@phosphor-icons/react';
-import clsx from 'clsx';
-import { useLayoutEffect, useRef } from 'react';
-import { useKey } from 'rooks';
-import useResizeObserver from 'use-resize-observer';
 import { useSelector } from '@sd/client';
 import { Tooltip } from '@sd/ui';
-import { useKeyMatcher, useLocale, useOperatingSystem, useShowControls } from '~/hooks';
+import clsx from 'clsx';
+import { useLayoutEffect, useRef } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import { useRoutingContext } from '~/RoutingContext';
 import { useTabsContext } from '~/TabsContext';
-import { usePlatform } from '~/util/Platform';
+import {
+	useKeyMatcher,
+	useLocale,
+	useOperatingSystem,
+	useShortcut,
+	useShowControls
+} from '~/hooks';
 
 import { explorerStore } from '../Explorer/store';
 import { useTopBarContext } from './Layout';
@@ -39,8 +43,6 @@ const TopBar = () => {
 		ctx.setTopBarHeight.call(undefined, height);
 	}, [ctx.setTopBarHeight]);
 
-	const platform = usePlatform();
-
 	return (
 		<div
 			ref={ref}
@@ -155,34 +157,35 @@ function useTabKeybinds(props: { addTab(): void; removeTab(index: number): void
 	const os = useOperatingSystem();
 	const { visible } = useRoutingContext();
 
-	// these keybinds aren't part of the regular shortcuts system as they're desktop-only
-	useKey(['t'], (e) => {
+	useShortcut('newTab', (e) => {
 		if (!visible) return;
-		if ((os === 'macOS' && !e.metaKey) || (os !== 'macOS' && !e.ctrlKey)) return;
 
 		e.stopPropagation();
 
 		props.addTab();
 	});
 
-	useKey(['w'], (e) => {
+	useShortcut('closeTab', (e) => {
 		if (!visible) return;
-		if ((os === 'macOS' && !e.metaKey) || (os !== 'macOS' && !e.ctrlKey)) return;
 
 		e.stopPropagation();
 
 		props.removeTab(ctx.tabIndex);
 	});
 
-	useKey(['ArrowLeft', 'ArrowRight'], (e) => {
+	useShortcut('nextTab', (e) => {
 		if (!visible) return;
-		// TODO: figure out non-macos keybind
-		if ((os === 'macOS' && !(e.metaKey && e.altKey)) || os !== 'macOS') return;
 
 		e.stopPropagation();
 
-		const delta = e.key === 'ArrowLeft' ? -1 : 1;
+		ctx.setTabIndex(Math.min(ctx.tabIndex + 1, ctx.tabs.length - 1));
+	});
 
-		ctx.setTabIndex(Math.min(Math.max(0, ctx.tabIndex + delta), ctx.tabs.length - 1));
+	useShortcut('previousTab', (e) => {
+		if (!visible) return;
+
+		e.stopPropagation();
+
+		ctx.setTabIndex(Math.max(ctx.tabIndex - 1, 0));
 	});
 }

interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx

@@ -47,6 +47,7 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
 			title: 'Delete',
 			value: 'Are you sure you want to delete this rule?',
 			label: 'Confirm',
+			cancelBtn: true,
 			onSubmit: async () => {
 				setIsDeleting(true);
 				try {

interface/hooks/useShortcut.ts

@@ -20,6 +20,63 @@ export type ShortcutCategory = {
 };
 
 export const shortcutCategories = {
+	General: {
+		description: 'General usage shortcuts',
+		shortcuts: {
+			newTab: {
+				action: 'Open new tab',
+				keys: {
+					macOS: ['Meta', 'KeyT'],
+					all: ['Control', 'KeyT']
+				},
+				icons: {
+					macOS: [modifierSymbols.Meta.macOS as string, 'T'],
+					all: [modifierSymbols.Control.Other, 'T']
+				}
+			},
+			closeTab: {
+				action: 'Close current tab',
+				keys: {
+					macOS: ['Meta', 'KeyW'],
+					all: ['Control', 'KeyW']
+				},
+				icons: {
+					macOS: [modifierSymbols.Meta.macOS as string, 'W'],
+					all: [modifierSymbols.Control.Other, 'W']
+				}
+			},
+			nextTab: {
+				action: 'Switch to next tab',
+				keys: {
+					macOS: ['Meta', 'Alt', 'ArrowRight'],
+					all: ['Control', 'Alt', 'ArrowRight']
+				},
+				icons: {
+					macOS: [
+						modifierSymbols.Meta.macOS as string,
+						modifierSymbols.Alt.macOS as string,
+						'ArrowRight'
+					],
+					all: [modifierSymbols.Control.Other, modifierSymbols.Alt.Other, 'ArrowRight']
+				}
+			},
+			previousTab: {
+				action: 'Switch to previous tab',
+				keys: {
+					macOS: ['Meta', 'Alt', 'ArrowLeft'],
+					all: ['Control', 'Alt', 'ArrowLeft']
+				},
+				icons: {
+					macOS: [
+						modifierSymbols.Meta.macOS as string,
+						modifierSymbols.Alt.macOS as string,
+						'ArrowLeft'
+					],
+					all: [modifierSymbols.Control.Other, modifierSymbols.Alt.Other, 'ArrowLeft']
+				}
+			}
+		}
+	},
 	Dialogs: {
 		description: 'To perform actions and operations',
 		shortcuts: {
@@ -382,9 +439,8 @@ export const useShortcut = (shortcut: ShortcutName, func: (e: KeyboardEvent) =>
 		if (!visible) return [];
 
 		const category = Object.values(categories).find((category) =>
-			Object.hasOwn(category.shortcuts, shortcut)
+			Object.prototype.hasOwnProperty.call(category.shortcuts, shortcut)
 		) as ShortcutCategory | undefined;
-
 		const categoryShortcut = category?.shortcuts[shortcut];
 
 		return categoryShortcut?.keys[os] ?? categoryShortcut?.keys.all ?? [];