diff --git a/interface/app/$libraryId/TopBar/index.tsx b/interface/app/$libraryId/TopBar/index.tsx
index d8b0b96a4..e1edeb976 100644
--- a/interface/app/$libraryId/TopBar/index.tsx
+++ b/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 (
{
+ 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));
});
}
diff --git a/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx b/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
index ff1880869..aca8b3980 100644
--- a/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
+++ b/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
@@ -47,6 +47,7 @@ export default function IndexerRuleEditor({
title: 'Delete',
value: 'Are you sure you want to delete this rule?',
label: 'Confirm',
+ cancelBtn: true,
onSubmit: async () => {
setIsDeleting(true);
try {
diff --git a/interface/hooks/useShortcut.ts b/interface/hooks/useShortcut.ts
index 4d1e28ab5..e64f31861 100644
--- a/interface/hooks/useShortcut.ts
+++ b/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 ?? [];