tact-305: separated input shortcuts and context menu

components/pages/Goals/modals/GoalCreationModal/modals/GoalCreationCloseSubmitModal.tsx

@@ -21,7 +21,7 @@ export const GoalCreationCloseSubmitModal = observer(
   function GoalCreationCloseSubmitModal({ onClose, onSubmit }: GoalCreationCloseSubmitModalProps) {
     const initialRef = useRef(null);
 
-    useHotkeysHandler({ STAY: ['meta+enter'] }, { STAY: onClose });
+    useHotkeysHandler({ STAY: ['meta+enter', 'ctrl+enter'] }, { STAY: onClose });
 
     return (
       <Modal

components/pages/Goals/modals/GoalCreationModal/store.ts

@@ -35,7 +35,7 @@ export class GoalCreationModalStore {
   modals = new ModalsController(GoalsModals);
 
   keyMap = {
-    CREATE: ['meta+enter', 'meta+s'],
+    CREATE: ['meta+enter', 'meta+s', 'ctrl+enter'],
     CANCEL: ['escape'],
   };
 

components/pages/Goals/modals/GoalWontDoSubmitModal/store.ts

@@ -31,7 +31,7 @@ export class GoalWontDoSubmitModalStore {
 
   callbacks: Pick<GoalWontDoSubmitModalProps, 'onClose' | 'onSubmit'>;
   keymap = {
-    SAVE: ['meta+enter']
+    SAVE: ['meta+enter', 'ctrl+enter']
   };
 
   constructor() {

components/pages/Spaces/modals/SpaceCreationModal/view.tsx

@@ -28,9 +28,10 @@ import { TextAreaLengthCounter } from '../../../../shared/TextAreaLengthCounter'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAlignLeft, faTrashCan } from '@fortawesome/pro-light-svg-icons';
 import { EmojiSelect } from "../../../../shared/EmojiSelect";
+import { isMac } from '../../../../../helpers/os';
 
 const keyMap = {
-  CREATE: ['meta+enter', 'meta+s'],
+  CREATE: ['meta+enter', 'meta+s', 'ctrl+enter'],
   CANCEL: ['escape'],
 };
 
@@ -151,7 +152,7 @@ export const SpaceCreationModalView = observer(function SpaceCreationModal() {
           >
             Save
             <Text ml={1} fontSize='xs' color='whiteAlpha.700'>
-              ⌘ + Enter
+              {`${isMac() ? '⌘' : 'Ctrl'} + Enter`}
             </Text>
           </Button>
         </ModalFooter>

components/shared/GoalsSelection/view.tsx

@@ -13,6 +13,7 @@ import { GoalsSelectionProps, useGoalsSelectionStore } from './store';
 import React, { useRef } from 'react';
 import { LargePlusIcon } from '../Icons/LargePlusIcon';
 import { GoalIcon } from '../GoalIcon';
+import { HeavyPlusIcon } from '../Icons/HeavyPlusIcon';
 
 type GoalSelectionListItemProps = {
   id: string | null;
@@ -112,6 +113,49 @@ export const GoalsSelectionView = observer(function GoalsSelectionView(
           checkboxContent={index < 9 ? index + 1 : null}
         />
       ))}
+      {store.root.resources.goals.list?.length < 9 &&
+        <ListItem
+          h={10}
+          display='flex'
+          alignItems='center'
+          borderBottom='1px'
+          borderColor='gray.100'
+          key={'add-space'}
+          cursor='pointer'
+          onClick={store.callbacks.onGoalCreateClick}
+        >
+          <Checkbox
+            ref={(el) => props.setRefs(store.root.resources.goals.list.length + 1, el)}
+            isChecked={false}
+            size='xl'
+            position='relative'
+            width='100%'
+            icon={
+              <chakra.div
+                display='flex'
+                justifyContent='center'
+                alignItems='center'
+              >
+                <HeavyPlusIcon />
+              </chakra.div>}
+            css={{
+              '.chakra-checkbox__label': {
+                width: 'calc(100% - 2rem)',
+              },
+              '.chakra-checkbox__control': {
+                borderRadius: '100%',
+              }
+            }}
+          >
+            <chakra.span
+              fontSize='sm'
+              fontWeight='normal'
+              lineHeight={5}>
+              Create new goal
+            </chakra.span>
+          </Checkbox>
+        </ListItem>
+      }
     </List>
   ) : (
     <Box ref={ref}>

components/shared/PrioritySelection/components/PriorityListItem.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  chakra,
+  Checkbox,
+  ListItem,
+  forwardRef,
+} from '@chakra-ui/react';
+import { usePrioritySelectionStore } from '../store';
+import { TaskPriority, TaskPriorityNames } from '../../TasksList/types';
+import { TaskPriorityIcon } from '../../Icons/TaskPriorityIcon';
+
+type PriorityListItemProps = {
+  priority: TaskPriority;
+  checkboxContent?: React.ReactNode;
+};
+
+export const PriorityListItem = observer(
+  forwardRef(function PriorityListItem(
+    { priority, checkboxContent }: PriorityListItemProps,
+    ref
+  ) {
+    const store = usePrioritySelectionStore();
+
+    return (
+      <ListItem
+        h={10}
+        display='flex'
+        alignItems='center'
+        borderBottom='1px'
+        borderColor='gray.100'
+        key={priority}
+      >
+        <Checkbox
+          ref={ref}
+          isChecked={!!store.checkedPriority[priority]}
+          onChange={() => store.handlePriorityCheck(priority)}
+          size='xl'
+          position='relative'
+          fontWeight='semibold'
+          fontSize='lg'
+          width='100%'
+          icon={checkboxContent ? <></> : undefined}
+          css={{
+            '.chakra-checkbox__label': {
+              width: 'calc(100% - 2rem)',
+            }
+          }}
+        >
+          {checkboxContent ? (
+            <chakra.span
+              position='absolute'
+              left={0}
+              w={6}
+              top={0}
+              bottom={0}
+              display='flex'
+              alignItems='center'
+              justifyContent='center'
+              color={store.checkedPriority[priority] ? 'white' : 'gray.400'}
+            >
+              {checkboxContent}
+            </chakra.span>
+          ) : null}
+          <chakra.span
+            display='flex'
+            alignItems='center'
+            fontSize='sm'
+            fontWeight='normal'
+          >
+            <chakra.div
+              pt={1}
+              pb={1}
+              w='100%'
+              display='flex'
+              alignItems='center'
+              justifyContent='space-between'
+            >
+              <chakra.span display='flex' alignItems='center'>
+                <TaskPriorityIcon priority={priority} />
+                <chakra.span ml={3} mr={3} overflow='hidden' textOverflow='ellipsis'>
+                  {TaskPriorityNames[priority]}
+                </chakra.span>
+              </chakra.span>
+            </chakra.div>
+          </chakra.span>
+        </Checkbox>
+      </ListItem>
+    );
+  })
+);

components/shared/PrioritySelection/index.tsx

@@ -0,0 +1,13 @@
+import { observer } from 'mobx-react-lite';
+import { PrioritySelectionView } from './view';
+import { PrioritySelectionProps, PrioritySelectionStoreProvider } from './store';
+
+export const PrioritySelection = observer(function GoalsSelection(
+  props: PrioritySelectionProps
+) {
+  return (
+    <PrioritySelectionStoreProvider {...props}>
+      <PrioritySelectionView {...props} />
+    </PrioritySelectionStoreProvider>
+  );
+});

components/shared/PrioritySelection/store.ts

@@ -0,0 +1,61 @@
+import { makeAutoObservable } from 'mobx';
+import { RootStore } from '../../../stores/RootStore';
+import { getProvider } from '../../../helpers/StoreProvider';
+
+export type PrioritySelectionProps = {
+  callbacks?: {
+    onSelect?: (goalIds: string[]) => void;
+  };
+
+  setRefs?: (index: number, ref: HTMLElement) => void;
+  checked?: string[];
+};
+
+export class PrioritySelectionStore {
+  constructor(public root: RootStore) {
+    makeAutoObservable(this);
+  }
+
+  callbacks: PrioritySelectionProps['callbacks'] = {};
+
+  checkedPriority: Record<string, boolean> = {};
+  isFocused: boolean = false;
+  multiple: boolean = false;
+
+  get checked() {
+    return Object.keys(this.checkedPriority);
+  }
+
+  handlePriorityCheck = (key: string) => {
+    const priority = key === null ? null : key;
+    if (priority !== null) {
+      this.checkedPriority = {
+        [priority]: true,
+      };
+    } else {
+      this.checkedPriority = {};
+    }
+
+    this.callbacks.onSelect?.(this.checked);
+  };
+
+  uncheckAll = () => {
+    this.checkedPriority = {};
+    this.callbacks.onSelect?.(this.checked);
+  };
+
+  update = (props: PrioritySelectionProps) => {
+    this.callbacks = props.callbacks;
+
+    if (props.checked) {
+      this.checkedPriority = {
+        [props.checked[0]]: true,
+      };
+    }
+  };
+}
+
+export const {
+  StoreProvider: PrioritySelectionStoreProvider,
+  useStore: usePrioritySelectionStore,
+} = getProvider(PrioritySelectionStore);

components/shared/PrioritySelection/view.tsx

@@ -0,0 +1,26 @@
+import React, { useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { List } from '@chakra-ui/react';
+import { PrioritySelectionProps, usePrioritySelectionStore } from './store';
+import { PriorityListItem } from './components/PriorityListItem'
+import { TaskPriorityArray } from '../TasksList/types';
+
+export const PrioritySelectionView = observer(function SpaceSelectionView(
+  props: Partial<PrioritySelectionProps>
+) {
+  const store = usePrioritySelectionStore();
+  const ref = useRef();
+
+  return (
+    <List ref={ref} h='100%' overflowY='auto' pl={1} pr={1}>
+      {TaskPriorityArray.map((item, index) => (
+        <PriorityListItem
+          ref={(el) => props.setRefs(index + 1, el)}
+          key={item}
+          priority={item}
+          checkboxContent={index < 9 ? index + 1 : null}
+        />
+      ))}
+    </List>
+  )
+});

components/shared/TactTaskTag/index.tsx

@@ -0,0 +1,87 @@
+import { Button, Tag, IconButton, ButtonProps } from "@chakra-ui/react";
+import { faXmark } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { forwardRef } from "react";
+
+interface TactTaskTagProps {
+    buttonProps?: ButtonProps;
+    iconButtonProps?: ButtonProps;
+    tagProps?: ButtonProps;
+    showRemoveIcon?: boolean;
+    title: string;
+    selected?: boolean;
+}
+
+const TactTaskTag = forwardRef<HTMLButtonElement, TactTaskTagProps>(({
+    buttonProps,
+    iconButtonProps,
+    tagProps,
+    title,
+    showRemoveIcon = false,
+    selected = false,
+}, ref) => (
+    <Button
+        key={title}
+        variant='unstyled'
+        size='xs'
+        fontSize='initial'
+        verticalAlign='initial'
+        mr={2}
+        _hover={{
+            button: {
+                opacity: 100
+            },
+            span: {
+                bg: `var(--chakra-colors-blue-${selected ? 600 : 400})`
+            }
+        }}
+        _focus={{
+            boxShadow: 'none',
+            span: {
+                boxShadow: `inset 0px 0px 0px 3px var(--chakra-colors-blue-${selected ? 300 : 600})`
+            }
+        }}
+        ref={ref}
+        {...buttonProps}
+    >
+        <Tag
+            bg={`blue.${selected ? 500 : 300}`}
+            color='white'
+            cursor='pointer'
+            boxSizing='border-box'
+            {...tagProps}
+        >
+            {title}
+        </Tag>
+        {showRemoveIcon && (
+            <IconButton
+                variant='unstyled'
+                aria-label='Remove'
+                w='12px'
+                h='12px'
+                minW='12px'
+                top='-4px'
+                right='-4px'
+                position='absolute'
+                backgroundColor='var(--chakra-colors-blue-300)'
+                opacity='0'
+                display='flex'
+                alignItems='center'
+                justifyContent='center'
+                tabIndex={-1}
+                isRound
+                {...iconButtonProps}
+            >
+                <FontAwesomeIcon
+                    icon={faXmark}
+                    fontSize={10}
+                    color='var(--chakra-colors-white)'
+                />
+            </IconButton>
+        )}
+    </Button>
+));
+
+TactTaskTag.displayName = 'TactTaskTag';
+
+export {TactTaskTag};