feat: new groups

src/main/ipcs/ipcDarkMode.ts

@@ -1,6 +1,6 @@
 import { ipcMain, nativeTheme } from 'electron';
 
-import { ThemeSource } from 'types';
+import { ThemeSource } from 'types/Modal';
 
 import { settings } from '../settings';
 

src/main/ipcs/preload.ts

@@ -1,6 +1,6 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
-import { ThemeSource } from 'types';
+import { ThemeSource } from 'types/Modal';
 import { AppSettings } from 'types/appSettings';
 import { FoundEditor } from 'types/foundEditor';
 import { FoundShell } from 'types/foundShell';

src/main/settings.ts

@@ -19,13 +19,15 @@ export const settings = new Store<Settings>({
     appSettings: {
       editors: [],
       fetchInterval: 10000,
+      oldFashionGroups: false,
       projectActionCollapsed: true,
       shells: [],
       showLogo: true,
       soundEffects: true
     },
     collapsedGroups: [],
     groupAliases: [],
+    newGroups: [],
     projects: [],
     selectedGroups: [],
     themeSource: 'system',

src/rendered/Routing.tsx

@@ -12,7 +12,7 @@ export const Routing = () => (
 
     <Route
       element={<Settings />}
-      path="settings"
+      path="settings/:id?"
     />
 
     <Route

src/rendered/components/AppNavbar/AppNavbar.tsx

@@ -11,7 +11,7 @@ import { LeftGroup, Logo, RightGroup, StyledNavbar, Shadow, ShadowContainer, Tit
 export const AppNavbar = () => {
   const { pathname } = useLocation();
   const { themeSource, toggleDarkMode } = useDarkMode();
-  const { showLogo, projectActionCollapsed, set } = useAppSettings();
+  const { showLogo, projectActionCollapsed, set, oldFashionGroups } = useAppSettings();
   const { addProject } = useProjects();
 
   const refresh = () => {
@@ -37,7 +37,7 @@ export const AppNavbar = () => {
       </LeftGroup>
 
       <RightGroup align="right">
-        {pathname === '/' && (
+        {oldFashionGroups && pathname === '/' && (
           <>
             <Button
               minimal

src/rendered/components/GroupCollapse/GroupCollapse.tsx

@@ -1,8 +1,9 @@
 import { Classes, Icon } from '@blueprintjs/core';
 import type { FC } from 'react';
 
-import { Group } from 'types';
+import { Group } from 'types/Group';
 import { Projects } from 'types/project';
+import { useModal } from 'rendered/hooks/useModal';
 
 import { Project } from '../Project';
 import { GroupBody, GroupTitle, Root } from './GroupCollapse.styles';
@@ -14,35 +15,58 @@ type Props = {
   projects: Projects;
 };
 
-export const GroupCollapse: FC<Props> = ({ group, collapsed, onClick, projects }) => (
-  <Root key={group.id}>
-    <GroupTitle onClick={onClick}>
-      <div className={Classes.ALIGN_LEFT}>
-        <Icon icon={group.icon} />{' '}
-        <span>
-          {group.fullName} ({projects.length})
-        </span>
-      </div>
-
-      <div className={Classes.ALIGN_RIGHT}>
-        <Icon
-          icon={collapsed ? 'minimize' : 'maximize'}
-          intent={collapsed ? 'warning' : 'none'}
-          size={14}
-        />
-      </div>
-    </GroupTitle>
-    <GroupBody
-      $collapsed={collapsed}
-      $length={projects.length}
-    >
-      {!collapsed &&
-        projects.map((project) => (
-          <Project
-            key={project.id}
-            project={project}
-          />
-        ))}
-    </GroupBody>
-  </Root>
-);
+export const GroupCollapse: FC<Props> = ({ group, collapsed, onClick, projects }) => {
+  const { openModal } = useModal();
+
+  const removeGroup = () => {
+    openModal({
+      name: 'remove:group',
+      props: { group }
+    });
+  };
+
+  const isEmpty = !projects.length;
+
+  return (
+    <Root key={group.id}>
+      <GroupTitle onClick={() => !isEmpty && onClick()}>
+        <div className={Classes.ALIGN_LEFT}>
+          <Icon icon={group.icon} />{' '}
+          <span>
+            {group.fullName} ({projects.length})
+          </span>
+        </div>
+
+        <div className={Classes.ALIGN_RIGHT}>
+          {isEmpty && (
+            <Icon
+              icon="trash"
+              size={14}
+              onClick={removeGroup}
+            />
+          )}
+
+          {!isEmpty && (
+            <Icon
+              icon={collapsed ? 'minimize' : 'maximize'}
+              intent={collapsed ? 'warning' : 'none'}
+              size={14}
+            />
+          )}
+        </div>
+      </GroupTitle>
+      <GroupBody
+        $collapsed={collapsed}
+        $length={projects.length}
+      >
+        {!collapsed &&
+          projects.map((project) => (
+            <Project
+              key={project.id}
+              project={project}
+            />
+          ))}
+      </GroupBody>
+    </Root>
+  );
+};

src/rendered/components/GroupRenamer/GroupRenamer.tsx → src/rendered/components/GroupRename/GroupRename.tsx

@@ -3,11 +3,11 @@ import { Select } from '@blueprintjs/select';
 import { useState } from 'react';
 
 import { useGroups } from 'rendered/hooks/useGroups';
-import { Group } from 'types';
+import { Group } from 'types/Group';
 
-import { Actions, Block, GroupForm, Row } from './GroupRenamer.styles';
+import { Actions, Block, GroupForm, Row } from './GroupRename.styles';
 
-export const GroupRenamer = () => {
+export const GroupRename = () => {
   const { groups, groupAliases, setGroupAlias, removeGroupAlias: remooveGroupAlias } = useGroups();
   const [selectedGroup, setSelectedGroup] = useState<Group>(groupAliases[0] ?? groups[0]);
 

src/rendered/components/GroupRename/index.ts

@@ -0,0 +1 @@
+export { GroupRename } from './GroupRename';

src/rendered/components/Modals/GitMergeModal/GitMergeModal.tsx

@@ -1,7 +1,7 @@
 import { Button, Classes, Dialog, DialogBody, DialogFooter, Icon } from '@blueprintjs/core';
 import { FC, useState } from 'react';
 
-import { ModalProps } from 'types';
+import { ModalProps } from 'types/Modal';
 import { GitStatus } from 'types/project';
 import { useGit } from 'rendered/hooks/useGit';
 

src/rendered/components/Modals/GitResetModal/GitResetModal.tsx

@@ -2,7 +2,7 @@ import { Button, Classes, Dialog, DialogFooter, Intent, Switch } from '@blueprin
 import { FC, useState } from 'react';
 
 import { appToaster } from 'rendered/utils/appToaster';
-import { ModalProps } from 'types';
+import { ModalProps } from 'types/Modal';
 import { GitStatus } from 'types/project';
 
 import { StyledBranchSelect, StyledDialogBody, Row, Options } from './GitResetModal.styles';

src/rendered/components/Modals/GroupModal/GroupModal.styles.ts

@@ -0,0 +1,19 @@
+import { Colors, Dialog } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+export const StyledDialog = styled(Dialog)`
+  max-width: 250px;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+`;
+
+export const Error = styled.div`
+  color: ${Colors.RED3};
+  font-size: 12px;
+`;

src/rendered/components/Modals/GroupModal/GroupModal.tsx

@@ -0,0 +1,93 @@
+import { Button, Classes, DialogBody, InputGroup } from '@blueprintjs/core';
+import { ChangeEventHandler, FC, useState } from 'react';
+import { v4 } from 'uuid';
+
+import { useNewGroups } from 'rendered/hooks/useNewGroups';
+import { Group } from 'types/Group';
+import { ModalProps } from 'types/Modal';
+import { useProjects } from 'rendered/hooks/useProjects';
+import { appToaster } from 'rendered/utils/appToaster';
+
+import { Actions, Error, StyledDialog } from './GroupModal.styles';
+
+export type GroupModalProps = {
+  groupId?: string;
+  projectId?: string;
+};
+
+export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose, darkMode, groupId, projectId }) => {
+  const { groups, addGroup } = useNewGroups();
+  const [name, setName] = useState<Group['name']>('');
+  const [error, setError] = useState<string>();
+  const { addGroupId } = useProjects();
+
+  const title = groupId ? 'Edit group' : 'Add group';
+  const actionText = groupId ? 'Save' : 'Add';
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = ({ target: { value } }) => {
+    if (error) setError(undefined);
+
+    if (groups.some((group) => group.name.toLowerCase() === value.toLowerCase())) {
+      setError('Group name already exists');
+    }
+
+    setName(value);
+  };
+
+  const handleSave = async () => {
+    setError(undefined);
+
+    if (!name || groups.some((group) => group.name.toLowerCase() === name.toLowerCase())) {
+      setError('Group name already exists');
+      return;
+    }
+
+    const newGroup: Group = {
+      fullName: name,
+      id: v4(),
+      name
+    };
+
+    addGroup(newGroup);
+    projectId && addGroupId(projectId, newGroup.id);
+
+    (await appToaster).show({
+      intent: 'success',
+      message: `Group "${name}" added`
+    });
+
+    onClose();
+  };
+
+  console.log(groups);
+
+  return (
+    <StyledDialog
+      className={darkMode && Classes.DARK}
+      icon="group-item"
+      isOpen={isOpen}
+      title={title}
+      onClose={onClose}
+    >
+      <DialogBody>
+        <InputGroup
+          autoFocus
+          intent={error ? 'danger' : 'none'}
+          placeholder="group name..."
+          value={name}
+          onChange={handleChange}
+        />
+
+        <Actions>
+          <Button
+            intent="warning"
+            text={actionText}
+            onClick={handleSave}
+          />
+
+          {error && <Error>{error}</Error>}
+        </Actions>
+      </DialogBody>
+    </StyledDialog>
+  );
+};

src/rendered/components/Modals/GroupModal/index.ts

@@ -0,0 +1 @@
+export { GroupModal } from './GroupModal';

src/rendered/components/Project/Project.tsx

@@ -26,7 +26,7 @@ export const Project: FC<Props> = ({ project }) => {
 
   const { Actions, showActions, toggleActions, getActions } = useActions(gitStatus, project);
 
-  const { group, id, name } = project;
+  const { group, id, name, groupId } = project;
 
   const updateProject = () => {
     showActions && getActions();
@@ -115,6 +115,7 @@ export const Project: FC<Props> = ({ project }) => {
                   getStatus={updateProject}
                   gitStatus={gitStatus}
                   group={group}
+                  groupId={groupId}
                   id={id}
                   name={name}
                   pull={runPull}

src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx

@@ -0,0 +1,59 @@
+import { MenuDivider, MenuItem } from '@blueprintjs/core';
+import { FC } from 'react';
+
+import { useModal } from 'rendered/hooks/useModal';
+import { useNewGroups } from 'rendered/hooks/useNewGroups';
+import { useProjects } from 'rendered/hooks/useProjects';
+
+type Props = {
+  groupId: string;
+  id: string;
+};
+
+export const GroupsSelect: FC<Props> = ({ groupId, id }) => {
+  const { groups } = useNewGroups();
+  const { addGroupId } = useProjects();
+  const { openModal } = useModal();
+
+  const addGroup = () => openModal({ name: 'group', props: { projectId: id } });
+
+  const { name } = groups.find(({ id: _groupId }) => _groupId === groupId) ?? {};
+
+  return (
+    <MenuItem
+      icon="unresolve"
+      text="Group"
+    >
+      <MenuItem
+        icon="plus"
+        text="Add group"
+        onClick={addGroup}
+      />
+
+      {groupId && <MenuDivider />}
+
+      {groupId && (
+        <>
+          <MenuItem
+            icon="small-cross"
+            intent="warning"
+            key="blank"
+            text={`Remove from ${name}`}
+            onClick={() => addGroupId(id, undefined)}
+          />
+        </>
+      )}
+
+      {Boolean(groups.length) && <MenuDivider />}
+      {groups.map(({ fullName, id: _groupId, icon }) => (
+        <MenuItem
+          disabled={_groupId === groupId}
+          icon={icon}
+          key={_groupId}
+          text={fullName}
+          onClick={() => addGroupId(id, _groupId)}
+        />
+      ))}
+    </MenuItem>
+  );
+};

src/rendered/components/Project/components/GroupsSelect/index.ts

@@ -0,0 +1 @@
+export { GroupsSelect } from './GroupsSelect';