95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import { bind, Variable } from 'astal';
|
|
import options from 'src/options';
|
|
import { hasCommand, isRecording, leftCardHidden } from '../helpers';
|
|
import {
|
|
LeftShortcut1,
|
|
LeftShortcut2,
|
|
LeftShortcut3,
|
|
LeftShortcut4,
|
|
RightShortcut1,
|
|
RightShortcut3,
|
|
} from '../buttons/ShortcutButtons';
|
|
import { LeftColumn, RightColumn } from './Column';
|
|
import { SettingsButton } from '../buttons/SettingsButton';
|
|
import { RecordingButton } from '../buttons/RecordingButton';
|
|
|
|
const { left, right } = options.menus.dashboard.shortcuts;
|
|
|
|
const leftBindings = [
|
|
bind(left.shortcut1.command),
|
|
bind(left.shortcut1.tooltip),
|
|
bind(left.shortcut1.icon),
|
|
bind(left.shortcut2.command),
|
|
bind(left.shortcut2.tooltip),
|
|
bind(left.shortcut2.icon),
|
|
bind(left.shortcut3.command),
|
|
bind(left.shortcut3.tooltip),
|
|
bind(left.shortcut3.icon),
|
|
bind(left.shortcut4.command),
|
|
bind(left.shortcut4.tooltip),
|
|
bind(left.shortcut4.icon),
|
|
];
|
|
|
|
const rightBindings = [
|
|
bind(right.shortcut1.command),
|
|
bind(right.shortcut1.tooltip),
|
|
bind(right.shortcut1.icon),
|
|
bind(right.shortcut3.command),
|
|
bind(right.shortcut3.tooltip),
|
|
bind(right.shortcut3.icon),
|
|
bind(leftCardHidden),
|
|
bind(isRecording),
|
|
];
|
|
|
|
export const LeftShortcuts = (): JSX.Element => {
|
|
return (
|
|
<box>
|
|
{Variable.derive(leftBindings, () => {
|
|
const isVisibleLeft = hasCommand(left.shortcut1) || hasCommand(left.shortcut2);
|
|
const isVisibleRight = hasCommand(left.shortcut3) || hasCommand(left.shortcut4);
|
|
|
|
if (!isVisibleLeft && !isVisibleRight) {
|
|
leftCardHidden.set(true);
|
|
return <box />;
|
|
}
|
|
|
|
leftCardHidden.set(false);
|
|
|
|
return (
|
|
<box className={'container most-used dashboard-card'}>
|
|
<LeftColumn isVisible={isVisibleRight && isVisibleLeft}>
|
|
<LeftShortcut1 />
|
|
<LeftShortcut2 />
|
|
</LeftColumn>
|
|
<RightColumn>
|
|
<LeftShortcut3 />
|
|
<LeftShortcut4 />
|
|
</RightColumn>
|
|
</box>
|
|
);
|
|
})()}
|
|
</box>
|
|
);
|
|
};
|
|
|
|
export const RightShortcuts = (): JSX.Element => {
|
|
return (
|
|
<box>
|
|
{Variable.derive(rightBindings, () => {
|
|
return (
|
|
<box className={`container utilities dashboard-card ${!leftCardHidden.get() ? 'paired' : ''}`}>
|
|
<LeftColumn isVisible={true}>
|
|
<RightShortcut1 />
|
|
<SettingsButton />
|
|
</LeftColumn>
|
|
<RightColumn>
|
|
<RightShortcut3 />
|
|
<RecordingButton />
|
|
</RightColumn>
|
|
</box>
|
|
);
|
|
})()}
|
|
</box>
|
|
);
|
|
};
|