From f3c414f5237eff82b0403013a348fb8a4fa251c8 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 10:30:22 +0200
Subject: [PATCH 01/14] feat: new groups

---
 src/main/settings.ts                          |  1 +
 src/rendered/Routing.tsx                      |  2 +-
 .../GroupRename.styles.ts}                    |  0
 .../GroupRename.tsx}                          |  4 +-
 src/rendered/components/GroupRename/index.ts  |  1 +
 src/rendered/components/GroupRenamer/index.ts |  1 -
 src/rendered/components/Settings/Settings.tsx | 67 +++++++++++--------
 .../SettingsGroups/SettingsGroups.tsx         | 21 ++++--
 src/rendered/hooks/useAppSettings.ts          |  1 +
 src/types/appSettings.ts                      |  1 +
 10 files changed, 64 insertions(+), 35 deletions(-)
 rename src/rendered/components/{GroupRenamer/GroupRenamer.styles.ts => GroupRename/GroupRename.styles.ts} (100%)
 rename src/rendered/components/{GroupRenamer/GroupRenamer.tsx => GroupRename/GroupRename.tsx} (95%)
 create mode 100644 src/rendered/components/GroupRename/index.ts
 delete mode 100644 src/rendered/components/GroupRenamer/index.ts

diff --git a/src/main/settings.ts b/src/main/settings.ts
index 38a1338..b0c3c12 100644
--- a/src/main/settings.ts
+++ b/src/main/settings.ts
@@ -19,6 +19,7 @@ export const settings = new Store<Settings>({
     appSettings: {
       editors: [],
       fetchInterval: 10000,
+      oldFashionGroups: false,
       projectActionCollapsed: true,
       shells: [],
       showLogo: true,
diff --git a/src/rendered/Routing.tsx b/src/rendered/Routing.tsx
index 4f7694f..b364f60 100644
--- a/src/rendered/Routing.tsx
+++ b/src/rendered/Routing.tsx
@@ -12,7 +12,7 @@ export const Routing = () => (
 
     <Route
       element={<Settings />}
-      path="settings"
+      path="settings/:id?"
     />
 
     <Route
diff --git a/src/rendered/components/GroupRenamer/GroupRenamer.styles.ts b/src/rendered/components/GroupRename/GroupRename.styles.ts
similarity index 100%
rename from src/rendered/components/GroupRenamer/GroupRenamer.styles.ts
rename to src/rendered/components/GroupRename/GroupRename.styles.ts
diff --git a/src/rendered/components/GroupRenamer/GroupRenamer.tsx b/src/rendered/components/GroupRename/GroupRename.tsx
similarity index 95%
rename from src/rendered/components/GroupRenamer/GroupRenamer.tsx
rename to src/rendered/components/GroupRename/GroupRename.tsx
index 9ccacae..2f2a312 100644
--- a/src/rendered/components/GroupRenamer/GroupRenamer.tsx
+++ b/src/rendered/components/GroupRename/GroupRename.tsx
@@ -5,9 +5,9 @@ import { useState } from 'react';
 import { useGroups } from 'rendered/hooks/useGroups';
 import { Group } from 'types';
 
-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]);
 
diff --git a/src/rendered/components/GroupRename/index.ts b/src/rendered/components/GroupRename/index.ts
new file mode 100644
index 0000000..d85cd0b
--- /dev/null
+++ b/src/rendered/components/GroupRename/index.ts
@@ -0,0 +1 @@
+export { GroupRename } from './GroupRename';
diff --git a/src/rendered/components/GroupRenamer/index.ts b/src/rendered/components/GroupRenamer/index.ts
deleted file mode 100644
index ee661c9..0000000
--- a/src/rendered/components/GroupRenamer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { GroupRenamer } from './GroupRenamer';
diff --git a/src/rendered/components/Settings/Settings.tsx b/src/rendered/components/Settings/Settings.tsx
index 8964887..22ffe1e 100644
--- a/src/rendered/components/Settings/Settings.tsx
+++ b/src/rendered/components/Settings/Settings.tsx
@@ -1,36 +1,49 @@
 import { Tabs } from '@blueprintjs/core';
+import { useParams, useNavigate } from 'react-router-dom';
 
 import { Root } from './Settings.styles';
 import { SettingsAppearance } from '../SettingsAppearance';
 import { SettingsIntegrations } from '../SettingsIntegrations';
 import { SettingsGroups } from '../SettingsGroups';
 
-export const Settings = () => (
-  <Root>
-    <Tabs
-      vertical
-      defaultSelectedTabId="appearance"
-    >
-      <Tabs.Tab
-        icon="style"
-        id="appearance"
-        panel={<SettingsAppearance />}
-        title="Appearance"
-      />
+export const Settings = () => {
+  // take id from query string
+  const { id = 'appearance' } = useParams<{ id?: string }>();
+  const navigate = useNavigate();
 
-      <Tabs.Tab
-        icon="data-lineage"
-        id="integrations"
-        panel={<SettingsIntegrations />}
-        title="Integrations"
-      />
+  const handleTabChange = (id: string) => {
+    console.log('id', id);
+    navigate(`/settings/${id}`);
+  };
 
-      <Tabs.Tab
-        icon="group-objects"
-        id="groups"
-        panel={<SettingsGroups />}
-        title="Groups"
-      />
-    </Tabs>
-  </Root>
-);
+  return (
+    <Root>
+      <Tabs
+        vertical
+        defaultSelectedTabId={id}
+        onChange={handleTabChange}
+      >
+        <Tabs.Tab
+          icon="style"
+          id="appearance"
+          panel={<SettingsAppearance />}
+          title="Appearance"
+        />
+
+        <Tabs.Tab
+          icon="data-lineage"
+          id="integrations"
+          panel={<SettingsIntegrations />}
+          title="Integrations"
+        />
+
+        <Tabs.Tab
+          icon="group-objects"
+          id="groups"
+          panel={<SettingsGroups />}
+          title="Groups"
+        />
+      </Tabs>
+    </Root>
+  );
+};
diff --git a/src/rendered/components/SettingsGroups/SettingsGroups.tsx b/src/rendered/components/SettingsGroups/SettingsGroups.tsx
index c8f522e..2fb7216 100644
--- a/src/rendered/components/SettingsGroups/SettingsGroups.tsx
+++ b/src/rendered/components/SettingsGroups/SettingsGroups.tsx
@@ -1,17 +1,30 @@
-import { Divider } from '@blueprintjs/core';
+import { Divider, Switch } from '@blueprintjs/core';
 
-import { GroupRenamer } from '../GroupRenamer';
+import { useAppSettings } from 'rendered/hooks/useAppSettings';
+
+import { GroupRename } from '../GroupRename';
 import { Root } from './SettingsGroups.styles';
 
 export const SettingsGroups = () => {
+  const { oldFashionGroups, set } = useAppSettings();
   return (
     <Root>
-      <h2>Groups</h2>
+      <h2>Groups style</h2>
+      <Divider />
+
+      <h3>Style</h3>
+      <Switch
+        checked={oldFashionGroups}
+        label={'"Old fashion" groups'}
+        onChange={() => set({ oldFashionGroups: !oldFashionGroups })}
+      />
+
       <Divider />
 
+      <h3>Rename</h3>
       <p>You can change any group name</p>
 
-      <GroupRenamer />
+      <GroupRename />
     </Root>
   );
 };
diff --git a/src/rendered/hooks/useAppSettings.ts b/src/rendered/hooks/useAppSettings.ts
index bbf8753..692cd3f 100644
--- a/src/rendered/hooks/useAppSettings.ts
+++ b/src/rendered/hooks/useAppSettings.ts
@@ -9,6 +9,7 @@ type Actions = {
 export const useAppSettings = create<AppSettings & Actions>((set) => ({
   editors: [],
   fetchInterval: 10000,
+  oldFashionGroups: false,
   projectActionCollapsed: true,
   set: (newState, safe) => {
     set(() => {
diff --git a/src/types/appSettings.ts b/src/types/appSettings.ts
index e91dc66..d6ffab9 100644
--- a/src/types/appSettings.ts
+++ b/src/types/appSettings.ts
@@ -5,6 +5,7 @@ export type AppSettings = {
   editors: FoundEditor[];
   fetchInterval: number;
   gitHubToken?: string;
+  oldFashionGroups: boolean;
   projectActionCollapsed: boolean;
   selectedEditor?: FoundEditor;
   selectedShell?: FoundShell<string>;

From fb0ce0b90c64729b56803f90ab3c3218444b2fb5 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 10:34:19 +0200
Subject: [PATCH 02/14] feat: new groups

---
 src/rendered/components/Settings/Settings.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/rendered/components/Settings/Settings.tsx b/src/rendered/components/Settings/Settings.tsx
index 22ffe1e..28331e9 100644
--- a/src/rendered/components/Settings/Settings.tsx
+++ b/src/rendered/components/Settings/Settings.tsx
@@ -12,7 +12,6 @@ export const Settings = () => {
   const navigate = useNavigate();
 
   const handleTabChange = (id: string) => {
-    console.log('id', id);
     navigate(`/settings/${id}`);
   };
 

From bacfe26bd00f89ac543f0b7f6934d83158b24cc9 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 10:37:00 +0200
Subject: [PATCH 03/14] feat: new groups

---
 src/rendered/components/Settings/Settings.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/rendered/components/Settings/Settings.tsx b/src/rendered/components/Settings/Settings.tsx
index 28331e9..d865692 100644
--- a/src/rendered/components/Settings/Settings.tsx
+++ b/src/rendered/components/Settings/Settings.tsx
@@ -7,7 +7,6 @@ import { SettingsIntegrations } from '../SettingsIntegrations';
 import { SettingsGroups } from '../SettingsGroups';
 
 export const Settings = () => {
-  // take id from query string
   const { id = 'appearance' } = useParams<{ id?: string }>();
   const navigate = useNavigate();
 

From cbe17947a216ea9150cf927d8306bfb70c480fe2 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 10:41:46 +0200
Subject: [PATCH 04/14] feat: new groups

---
 src/rendered/components/AppNavbar/AppNavbar.tsx     |  4 ++--
 .../components/SettingsGroups/SettingsGroups.tsx    | 13 ++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/rendered/components/AppNavbar/AppNavbar.tsx b/src/rendered/components/AppNavbar/AppNavbar.tsx
index 15a42bb..af36ed9 100644
--- a/src/rendered/components/AppNavbar/AppNavbar.tsx
+++ b/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
diff --git a/src/rendered/components/SettingsGroups/SettingsGroups.tsx b/src/rendered/components/SettingsGroups/SettingsGroups.tsx
index 2fb7216..9f71471 100644
--- a/src/rendered/components/SettingsGroups/SettingsGroups.tsx
+++ b/src/rendered/components/SettingsGroups/SettingsGroups.tsx
@@ -19,12 +19,15 @@ export const SettingsGroups = () => {
         onChange={() => set({ oldFashionGroups: !oldFashionGroups })}
       />
 
-      <Divider />
-
-      <h3>Rename</h3>
-      <p>You can change any group name</p>
+      {oldFashionGroups && (
+        <>
+          <Divider />
+          <h3>Rename</h3>
+          <p>You can change any group name</p>
 
-      <GroupRename />
+          <GroupRename />
+        </>
+      )}
     </Root>
   );
 };

From 19b49976a3d08fe449112e33e483acd23570af3a Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 11:18:18 +0200
Subject: [PATCH 05/14] feat: new groups

---
 src/rendered/components/Projects/Projects.tsx | 41 +++++++++++++++----
 src/rendered/hooks/useGroups.ts               |  2 +-
 src/rendered/hooks/useNewGroups.ts            | 12 ++++++
 src/types/project.ts                          |  1 +
 4 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/rendered/hooks/useNewGroups.ts

diff --git a/src/rendered/components/Projects/Projects.tsx b/src/rendered/components/Projects/Projects.tsx
index 922ba0a..cfbc6b3 100644
--- a/src/rendered/components/Projects/Projects.tsx
+++ b/src/rendered/components/Projects/Projects.tsx
@@ -1,10 +1,12 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Button, NonIdealState } from '@blueprintjs/core';
 import Devkitty from 'rendered/assets/devkitty.svg?react';
 
 import { useGroups } from 'rendered/hooks/useGroups';
 import { useProjects } from 'rendered/hooks/useProjects';
 import { Group } from 'types';
+import { useAppSettings } from 'rendered/hooks/useAppSettings';
+import { useNewGroups } from 'rendered/hooks/useNewGroups';
 
 import { GroupCollapse } from '../GroupCollapse';
 import { Project } from '../Project';
@@ -14,11 +16,12 @@ import { ProjectsWrapper, Root } from './Projects.styles';
 const others: Group = { fullName: 'Ungrouped', icon: 'folder-open', id: 'ungrouped', name: 'Ungrouped' };
 
 export const Projects = () => {
+  const { oldFashionGroups } = useAppSettings();
   const { groupsWithAliases, selectedGroups, collapsedGroups, toggleCollapsed, selectAll } = useGroups();
+  const { groups } = useNewGroups();
   const { projects, addProject } = useProjects();
 
-  const sortedProjects = useMemo(() => {
-    // project group id not in groups
+  const sortOldFashionGroups = useCallback(() => {
     let sortedProjects = [...groupsWithAliases, others].map((group) => ({
       ...group,
       projects: projects.filter(
@@ -41,11 +44,35 @@ export const Projects = () => {
     return sortedProjects;
   }, [groupsWithAliases, projects, selectedGroups]);
 
-  const isEmpty = Boolean(selectedGroups.length) && !sortedProjects.length && projects.length > 0;
+  const sortedProjects = useMemo(() => {
+    if (oldFashionGroups) {
+      return sortOldFashionGroups();
+    }
+
+    const sortedProjects = [...groups, others].map((group) => ({
+      ...group,
+      projects: projects.filter(
+        ({ groupId }) =>
+          groupId === group.id ||
+          (group.id === 'ungrouped' && !groupId) ||
+          (group.id === 'ungrouped' && groupId && !groupsWithAliases.find(({ id }) => id === groupId))
+      )
+    }));
+
+    return sortedProjects;
+  }, [sortOldFashionGroups]);
+
+  const isEmpty = oldFashionGroups
+    ? Boolean(selectedGroups.length) && !sortedProjects.length && projects.length > 0
+    : false;
+
+  const withGroups = oldFashionGroups
+    ? Boolean(selectedGroups.length)
+    : groups.length > 0 && projects.length > 0 && selectedGroups.length > 1;
 
   return (
     <Root>
-      <GroupsSelector />
+      {oldFashionGroups && <GroupsSelector />}
 
       <ProjectsWrapper>
         {!projects.length && (
@@ -84,7 +111,7 @@ export const Projects = () => {
           />
         )}
 
-        {!selectedGroups.length &&
+        {!withGroups &&
           projects.map((project) => (
             <Project
               key={project.id}
@@ -92,7 +119,7 @@ export const Projects = () => {
             />
           ))}
 
-        {Boolean(selectedGroups.length) &&
+        {withGroups &&
           sortedProjects.map((group) => (
             <GroupCollapse
               collapsed={Boolean(collapsedGroups.includes(group.id))}
diff --git a/src/rendered/hooks/useGroups.ts b/src/rendered/hooks/useGroups.ts
index 7417f51..49df298 100644
--- a/src/rendered/hooks/useGroups.ts
+++ b/src/rendered/hooks/useGroups.ts
@@ -23,7 +23,7 @@ type Actions = {
   unselectCollapsed: () => void;
 };
 
-export const useGroups = create<State & Actions>()((set, get) => ({
+export const useGroups = create<State & Actions>((set, get) => ({
   collapsedGroups: [],
   groupAliases: [],
   groups,
diff --git a/src/rendered/hooks/useNewGroups.ts b/src/rendered/hooks/useNewGroups.ts
new file mode 100644
index 0000000..f144e05
--- /dev/null
+++ b/src/rendered/hooks/useNewGroups.ts
@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+import { Group, Groups } from 'types';
+
+type State = {
+  groups: Groups;
+};
+
+export const useNewGroups = create<State>((set) => ({
+  addGroup: (group: Group) => set((state) => ({ groups: [...state.groups, group] })),
+  groups: []
+}));
diff --git a/src/types/project.ts b/src/types/project.ts
index 9afa5d7..5e023c2 100644
--- a/src/types/project.ts
+++ b/src/types/project.ts
@@ -5,6 +5,7 @@ type Status = Omit<StatusResult, 'isClean'> & { isClean: boolean };
 export type Project = {
   filePath: string;
   group?: string;
+  groupId?: string; // new groups
   id: string;
   name: string;
 };

From 7d4c35b6b53d02fe3ac6f55b47e4bdf3cb946f53 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 11:26:50 +0200
Subject: [PATCH 06/14] feat: new groups

---
 .../OldFashionGroupsSelect.tsx                | 49 +++++++++++++++++++
 .../components/ProjectMenu/ProjectMenu.tsx    | 45 +++++------------
 2 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx

diff --git a/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx b/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx
new file mode 100644
index 0000000..331c3eb
--- /dev/null
+++ b/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx
@@ -0,0 +1,49 @@
+import { MenuDivider, MenuItem } from '@blueprintjs/core';
+import { FC } from 'react';
+
+import { useGroups } from 'rendered/hooks/useGroups';
+import { useProjects } from 'rendered/hooks/useProjects';
+
+type Props = {
+  group: string;
+  id: string;
+};
+
+export const OldFashionGroupsSelect: FC<Props> = ({ group, id }) => {
+  const { groupsWithAliases } = useGroups();
+  const { addGroup } = useProjects();
+
+  return (
+    <>
+      <MenuDivider />
+      <MenuItem
+        icon="unresolve"
+        text="Group"
+      >
+        {group && (
+          <>
+            <MenuItem
+              icon="small-cross"
+              intent="warning"
+              key="blank"
+              text={`Remove from ${group}`}
+              onClick={() => addGroup(id, undefined)}
+            />
+
+            <MenuDivider />
+          </>
+        )}
+
+        {groupsWithAliases.map(({ fullName, id: groupID, icon }) => (
+          <MenuItem
+            disabled={groupID === group}
+            icon={icon}
+            key={groupID}
+            text={fullName}
+            onClick={() => addGroup(id, groupID)}
+          />
+        ))}
+      </MenuItem>
+    </>
+  );
+};
diff --git a/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx b/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
index db257fa..65b6990 100644
--- a/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
+++ b/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
@@ -1,11 +1,12 @@
 import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { FC } from 'react';
 
-import { useGroups } from 'rendered/hooks/useGroups';
+import { useAppSettings } from 'rendered/hooks/useAppSettings';
 import { useModal } from 'rendered/hooks/useModal';
-import { useProjects } from 'rendered/hooks/useProjects';
 import { GitStatus } from 'types/project';
 
+import { OldFashionGroupsSelect } from '../OldFashionGroupsSelect/OldFashionGroupsSelect';
+
 type Props = {
   getStatus: () => void;
   gitStatus: GitStatus;
@@ -18,8 +19,8 @@ type Props = {
 
 export const ProjectMenu: FC<Props> = ({ getStatus, name, id, gitStatus, removeProject, pull, group }) => {
   const { openModal } = useModal();
-  const { groupsWithAliases } = useGroups();
-  const { addGroup } = useProjects();
+
+  const { oldFashionGroups } = useAppSettings();
 
   return (
     <Menu>
@@ -45,36 +46,12 @@ export const ProjectMenu: FC<Props> = ({ getStatus, name, id, gitStatus, removeP
         onClick={() => openModal({ name: 'git:reset', props: { gitStatus, id, name } })}
       />
 
-      <MenuDivider />
-
-      <MenuItem
-        icon="unresolve"
-        text="Group"
-      >
-        {group && (
-          <>
-            <MenuItem
-              icon="small-cross"
-              intent="warning"
-              key="blank"
-              text={`Remove from ${group}`}
-              onClick={() => addGroup(id, undefined)}
-            />
-
-            <MenuDivider />
-          </>
-        )}
-
-        {groupsWithAliases.map(({ fullName, id: groupID, icon }) => (
-          <MenuItem
-            disabled={groupID === group}
-            icon={icon}
-            key={groupID}
-            text={fullName}
-            onClick={() => addGroup(id, groupID)}
-          />
-        ))}
-      </MenuItem>
+      {oldFashionGroups && (
+        <OldFashionGroupsSelect
+          group={group}
+          id={id}
+        />
+      )}
 
       <MenuDivider title="Danger zone" />
 

From 169dceafcfed5fc0b0d11444caa9c602696196d1 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 11:40:41 +0200
Subject: [PATCH 07/14] feat: new groups

---
 src/rendered/components/Project/Project.tsx   |  3 +-
 .../components/GroupsSelect/GroupsSelect.tsx  | 56 +++++++++++++++++++
 .../Project/components/GroupsSelect/index.ts  |  1 +
 .../OldFashionGroupsSelect/index.ts           |  1 +
 .../components/ProjectMenu/ProjectMenu.tsx    | 13 ++++-
 src/rendered/hooks/useNewGroups.ts            |  6 +-
 src/rendered/hooks/useProjects.ts             | 11 ++++
 7 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
 create mode 100644 src/rendered/components/Project/components/GroupsSelect/index.ts
 create mode 100644 src/rendered/components/Project/components/OldFashionGroupsSelect/index.ts

diff --git a/src/rendered/components/Project/Project.tsx b/src/rendered/components/Project/Project.tsx
index 2a30af4..1b15565 100644
--- a/src/rendered/components/Project/Project.tsx
+++ b/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}
diff --git a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
new file mode 100644
index 0000000..db93fd1
--- /dev/null
+++ b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
@@ -0,0 +1,56 @@
+import { MenuDivider, MenuItem } from '@blueprintjs/core';
+import { FC } from 'react';
+
+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 }) => {
+  console.log('GroupsSelect', groupId, id);
+  const { groups } = useNewGroups();
+  const { addGroupId } = useProjects();
+
+  return (
+    <>
+      <MenuDivider />
+
+      <MenuItem
+        icon="unresolve"
+        text="Group"
+      >
+        <MenuItem
+          icon="plus"
+          text="Add group"
+        />
+
+        {groupId && (
+          <>
+            <MenuItem
+              icon="small-cross"
+              intent="warning"
+              key="blank"
+              text={`Remove from ${groupId}`}
+              onClick={() => addGroupId(id, undefined)}
+            />
+
+            <MenuDivider />
+          </>
+        )}
+
+        {groups.map(({ fullName, id: _groupId, icon }) => (
+          <MenuItem
+            disabled={_groupId === groupId}
+            icon={icon}
+            key={_groupId}
+            text={fullName}
+            onClick={() => addGroupId(id, _groupId)}
+          />
+        ))}
+      </MenuItem>
+    </>
+  );
+};
diff --git a/src/rendered/components/Project/components/GroupsSelect/index.ts b/src/rendered/components/Project/components/GroupsSelect/index.ts
new file mode 100644
index 0000000..f00d3b6
--- /dev/null
+++ b/src/rendered/components/Project/components/GroupsSelect/index.ts
@@ -0,0 +1 @@
+export { GroupsSelect } from './GroupsSelect';
diff --git a/src/rendered/components/Project/components/OldFashionGroupsSelect/index.ts b/src/rendered/components/Project/components/OldFashionGroupsSelect/index.ts
new file mode 100644
index 0000000..59417c9
--- /dev/null
+++ b/src/rendered/components/Project/components/OldFashionGroupsSelect/index.ts
@@ -0,0 +1 @@
+export { OldFashionGroupsSelect } from './OldFashionGroupsSelect';
diff --git a/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx b/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
index 65b6990..ed52121 100644
--- a/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
+++ b/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
@@ -5,19 +5,21 @@ import { useAppSettings } from 'rendered/hooks/useAppSettings';
 import { useModal } from 'rendered/hooks/useModal';
 import { GitStatus } from 'types/project';
 
-import { OldFashionGroupsSelect } from '../OldFashionGroupsSelect/OldFashionGroupsSelect';
+import { OldFashionGroupsSelect } from '../OldFashionGroupsSelect';
+import { GroupsSelect } from '../GroupsSelect';
 
 type Props = {
   getStatus: () => void;
   gitStatus: GitStatus;
   group?: string;
+  groupId?: string;
   id: string;
   name: string;
   pull: () => void;
   removeProject: () => void;
 };
 
-export const ProjectMenu: FC<Props> = ({ getStatus, name, id, gitStatus, removeProject, pull, group }) => {
+export const ProjectMenu: FC<Props> = ({ getStatus, name, id, gitStatus, removeProject, pull, group, groupId }) => {
   const { openModal } = useModal();
 
   const { oldFashionGroups } = useAppSettings();
@@ -53,6 +55,13 @@ export const ProjectMenu: FC<Props> = ({ getStatus, name, id, gitStatus, removeP
         />
       )}
 
+      {!oldFashionGroups && (
+        <GroupsSelect
+          groupId={groupId}
+          id={id}
+        />
+      )}
+
       <MenuDivider title="Danger zone" />
 
       <MenuItem
diff --git a/src/rendered/hooks/useNewGroups.ts b/src/rendered/hooks/useNewGroups.ts
index f144e05..a39fb9b 100644
--- a/src/rendered/hooks/useNewGroups.ts
+++ b/src/rendered/hooks/useNewGroups.ts
@@ -6,7 +6,11 @@ type State = {
   groups: Groups;
 };
 
-export const useNewGroups = create<State>((set) => ({
+type Actions = {
+  addGroup: (group: Group) => void;
+};
+
+export const useNewGroups = create<State & Actions>((set) => ({
   addGroup: (group: Group) => set((state) => ({ groups: [...state.groups, group] })),
   groups: []
 }));
diff --git a/src/rendered/hooks/useProjects.ts b/src/rendered/hooks/useProjects.ts
index c57911b..1602207 100644
--- a/src/rendered/hooks/useProjects.ts
+++ b/src/rendered/hooks/useProjects.ts
@@ -9,6 +9,7 @@ type State = {
 
 type Actions = {
   addGroup: (projectId: string, groupId: string) => void;
+  addGroupId: (id: string, groupId?: string) => void;
   addProject: () => void;
   removeProject: (id: string) => void;
 };
@@ -24,6 +25,16 @@ export const useProjects = create<State & Actions>((set, get) => ({
     const projects = await window.bridge.settings.get('projects');
     set({ projects });
   },
+  addGroupId: async (id, groupId) => {
+    const project = get().projects.find((project) => project.id === id);
+    if (!project) return;
+
+    project.groupId = groupId;
+
+    await window.bridge.projects.update(project);
+    const projects = await window.bridge.settings.get('projects');
+    set({ projects });
+  },
   addProject: async () => {
     const res = await window.bridge.projects.add();
     if (!res.success && !res.canceled) {

From 654a69c5f86d4eabad336a33f35ffa3ca5b68b23 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 12:23:51 +0200
Subject: [PATCH 08/14] feat: new groups

---
 .../Modals/GroupModal/GroupModal.tsx          | 23 +++++++++++++++++++
 .../components/Modals/GroupModal/index.ts     |  1 +
 .../components/GroupsSelect/GroupsSelect.tsx  |  5 ++++
 src/rendered/hooks/useModal.tsx               |  6 +++++
 4 files changed, 35 insertions(+)
 create mode 100644 src/rendered/components/Modals/GroupModal/GroupModal.tsx
 create mode 100644 src/rendered/components/Modals/GroupModal/index.ts

diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.tsx b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
new file mode 100644
index 0000000..c008253
--- /dev/null
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
@@ -0,0 +1,23 @@
+import { Classes, Dialog } from '@blueprintjs/core';
+import { FC } from 'react';
+
+import { ModalProps } from 'types';
+
+export type GroupModalProps = {
+  groupId?: string;
+  projectId: string;
+};
+
+export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose, darkMode }) => {
+  return (
+    <Dialog
+      className={darkMode && Classes.DARK}
+      icon="group-item"
+      isOpen={isOpen}
+      title={'Group'}
+      onClose={onClose}
+    >
+      Group Modal
+    </Dialog>
+  );
+};
diff --git a/src/rendered/components/Modals/GroupModal/index.ts b/src/rendered/components/Modals/GroupModal/index.ts
new file mode 100644
index 0000000..08b9c8b
--- /dev/null
+++ b/src/rendered/components/Modals/GroupModal/index.ts
@@ -0,0 +1 @@
+export { GroupModal } from './GroupModal';
diff --git a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
index db93fd1..09767db 100644
--- a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
+++ b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
@@ -1,6 +1,7 @@
 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';
 
@@ -13,6 +14,9 @@ export const GroupsSelect: FC<Props> = ({ groupId, id }) => {
   console.log('GroupsSelect', groupId, id);
   const { groups } = useNewGroups();
   const { addGroupId } = useProjects();
+  const { openModal } = useModal();
+
+  const addGroup = () => openModal({ name: 'group', props: { projectId: id } });
 
   return (
     <>
@@ -25,6 +29,7 @@ export const GroupsSelect: FC<Props> = ({ groupId, id }) => {
         <MenuItem
           icon="plus"
           text="Add group"
+          onClick={addGroup}
         />
 
         {groupId && (
diff --git a/src/rendered/hooks/useModal.tsx b/src/rendered/hooks/useModal.tsx
index cc5a9b9..5f4d50a 100644
--- a/src/rendered/hooks/useModal.tsx
+++ b/src/rendered/hooks/useModal.tsx
@@ -6,6 +6,7 @@ import { ModalProps } from 'types';
 import { GitMergeModal, GitMergeModalProps } from 'rendered/components/Modals/GitMergeModal';
 import { RemoveAlert } from 'rendered/components/Project/components/RemoveAlert';
 import { RemoveAlertProps } from 'rendered/components/Project/components/RemoveAlert/RemoveAlert';
+import { GroupModal, GroupModalProps } from 'rendered/components/Modals/GroupModal/GroupModal';
 
 import { useDarkModeStore } from './useDarkMode';
 
@@ -23,6 +24,10 @@ type ActiveModal = ModalProps &
         name: 'remove:project';
         props: RemoveAlertProps;
       }
+    | {
+        name: 'group';
+        props: GroupModalProps;
+      }
   );
 
 type State = {
@@ -34,6 +39,7 @@ type State = {
 const Modals: Record<ActiveModal['name'], FC<ActiveModal['props']>> = {
   'git:merge': GitMergeModal,
   'git:reset': GitResetModal,
+  group: GroupModal,
   'remove:project': RemoveAlert
 };
 

From b34b8eb2a101c74680c80d8a5e54bac9b51b31b9 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 12:37:22 +0200
Subject: [PATCH 09/14] feat: new groups

---
 src/main/ipcs/ipcDarkMode.ts                              | 2 +-
 src/main/ipcs/preload.ts                                  | 2 +-
 src/rendered/components/GroupCollapse/GroupCollapse.tsx   | 2 +-
 src/rendered/components/GroupRename/GroupRename.tsx       | 2 +-
 .../components/Modals/GitMergeModal/GitMergeModal.tsx     | 2 +-
 .../components/Modals/GitResetModal/GitResetModal.tsx     | 2 +-
 src/rendered/components/Modals/GroupModal/GroupModal.tsx  | 2 +-
 .../Project/components/RemoveAlert/RemoveAlert.tsx        | 2 +-
 src/rendered/components/Projects/Projects.tsx             | 2 +-
 src/rendered/hooks/useDarkMode.ts                         | 2 +-
 src/rendered/hooks/useGroups.ts                           | 2 +-
 src/rendered/hooks/useModal.tsx                           | 2 +-
 src/rendered/hooks/useNewGroups.ts                        | 2 +-
 src/rendered/hooks/utils/groups.ts                        | 2 +-
 src/types/{index.ts => Group.ts}                          | 8 --------
 src/types/Modal.ts                                        | 7 +++++++
 src/types/settings.ts                                     | 2 +-
 17 files changed, 22 insertions(+), 23 deletions(-)
 rename src/types/{index.ts => Group.ts} (53%)
 create mode 100644 src/types/Modal.ts

diff --git a/src/main/ipcs/ipcDarkMode.ts b/src/main/ipcs/ipcDarkMode.ts
index a917c08..7fcf628 100644
--- a/src/main/ipcs/ipcDarkMode.ts
+++ b/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';
 
diff --git a/src/main/ipcs/preload.ts b/src/main/ipcs/preload.ts
index 5854620..a708307 100644
--- a/src/main/ipcs/preload.ts
+++ b/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';
diff --git a/src/rendered/components/GroupCollapse/GroupCollapse.tsx b/src/rendered/components/GroupCollapse/GroupCollapse.tsx
index b595b04..159b156 100644
--- a/src/rendered/components/GroupCollapse/GroupCollapse.tsx
+++ b/src/rendered/components/GroupCollapse/GroupCollapse.tsx
@@ -1,7 +1,7 @@
 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 { Project } from '../Project';
diff --git a/src/rendered/components/GroupRename/GroupRename.tsx b/src/rendered/components/GroupRename/GroupRename.tsx
index 2f2a312..c64a796 100644
--- a/src/rendered/components/GroupRename/GroupRename.tsx
+++ b/src/rendered/components/GroupRename/GroupRename.tsx
@@ -3,7 +3,7 @@ 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 './GroupRename.styles';
 
diff --git a/src/rendered/components/Modals/GitMergeModal/GitMergeModal.tsx b/src/rendered/components/Modals/GitMergeModal/GitMergeModal.tsx
index c6bc585..e26e568 100644
--- a/src/rendered/components/Modals/GitMergeModal/GitMergeModal.tsx
+++ b/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';
 
diff --git a/src/rendered/components/Modals/GitResetModal/GitResetModal.tsx b/src/rendered/components/Modals/GitResetModal/GitResetModal.tsx
index 4b4f6da..73178b9 100644
--- a/src/rendered/components/Modals/GitResetModal/GitResetModal.tsx
+++ b/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';
diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.tsx b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
index c008253..c446104 100644
--- a/src/rendered/components/Modals/GroupModal/GroupModal.tsx
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
@@ -1,7 +1,7 @@
 import { Classes, Dialog } from '@blueprintjs/core';
 import { FC } from 'react';
 
-import { ModalProps } from 'types';
+import { ModalProps } from 'types/Modal';
 
 export type GroupModalProps = {
   groupId?: string;
diff --git a/src/rendered/components/Project/components/RemoveAlert/RemoveAlert.tsx b/src/rendered/components/Project/components/RemoveAlert/RemoveAlert.tsx
index 84ad728..fd57d25 100644
--- a/src/rendered/components/Project/components/RemoveAlert/RemoveAlert.tsx
+++ b/src/rendered/components/Project/components/RemoveAlert/RemoveAlert.tsx
@@ -2,7 +2,7 @@ import { Alert, Classes } from '@blueprintjs/core';
 import { FC } from 'react';
 
 import { useProjects } from 'rendered/hooks/useProjects';
-import { ModalProps } from 'types';
+import { ModalProps } from 'types/Modal';
 
 export type RemoveAlertProps = {
   id: string;
diff --git a/src/rendered/components/Projects/Projects.tsx b/src/rendered/components/Projects/Projects.tsx
index cfbc6b3..1fec87f 100644
--- a/src/rendered/components/Projects/Projects.tsx
+++ b/src/rendered/components/Projects/Projects.tsx
@@ -4,7 +4,7 @@ import Devkitty from 'rendered/assets/devkitty.svg?react';
 
 import { useGroups } from 'rendered/hooks/useGroups';
 import { useProjects } from 'rendered/hooks/useProjects';
-import { Group } from 'types';
+import { Group } from 'types/Group';
 import { useAppSettings } from 'rendered/hooks/useAppSettings';
 import { useNewGroups } from 'rendered/hooks/useNewGroups';
 
diff --git a/src/rendered/hooks/useDarkMode.ts b/src/rendered/hooks/useDarkMode.ts
index 6da0e95..bc60fba 100644
--- a/src/rendered/hooks/useDarkMode.ts
+++ b/src/rendered/hooks/useDarkMode.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-import { ThemeSource } from 'types';
+import { ThemeSource } from 'types/Modal';
 
 type Store = {
   darkMode: boolean;
diff --git a/src/rendered/hooks/useGroups.ts b/src/rendered/hooks/useGroups.ts
index 49df298..809ce36 100644
--- a/src/rendered/hooks/useGroups.ts
+++ b/src/rendered/hooks/useGroups.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-import { Group, Groups } from 'types';
+import { Group, Groups } from 'types/Group';
 import { appToaster } from 'rendered/utils/appToaster';
 
 import { groups } from './utils/groups';
diff --git a/src/rendered/hooks/useModal.tsx b/src/rendered/hooks/useModal.tsx
index 5f4d50a..742d977 100644
--- a/src/rendered/hooks/useModal.tsx
+++ b/src/rendered/hooks/useModal.tsx
@@ -2,7 +2,7 @@ import type { FC, JSX } from 'react';
 import { create } from 'zustand';
 
 import { GitResetModal, type GitResetModalProps } from 'rendered/components/Modals/GitResetModal';
-import { ModalProps } from 'types';
+import { ModalProps } from 'types/Modal';
 import { GitMergeModal, GitMergeModalProps } from 'rendered/components/Modals/GitMergeModal';
 import { RemoveAlert } from 'rendered/components/Project/components/RemoveAlert';
 import { RemoveAlertProps } from 'rendered/components/Project/components/RemoveAlert/RemoveAlert';
diff --git a/src/rendered/hooks/useNewGroups.ts b/src/rendered/hooks/useNewGroups.ts
index a39fb9b..b1b3adf 100644
--- a/src/rendered/hooks/useNewGroups.ts
+++ b/src/rendered/hooks/useNewGroups.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-import { Group, Groups } from 'types';
+import { Group, Groups } from 'types/Group';
 
 type State = {
   groups: Groups;
diff --git a/src/rendered/hooks/utils/groups.ts b/src/rendered/hooks/utils/groups.ts
index 7d2b66e..83cdac4 100644
--- a/src/rendered/hooks/utils/groups.ts
+++ b/src/rendered/hooks/utils/groups.ts
@@ -1,4 +1,4 @@
-import { Groups } from 'types';
+import { Groups } from 'types/Group';
 
 export const groups: Groups = [
   {
diff --git a/src/types/index.ts b/src/types/Group.ts
similarity index 53%
rename from src/types/index.ts
rename to src/types/Group.ts
index 3472bb6..5af786e 100644
--- a/src/types/index.ts
+++ b/src/types/Group.ts
@@ -1,13 +1,5 @@
 import { IconName } from '@blueprintjs/icons';
 
-export type ThemeSource = 'system' | 'dark' | 'light';
-
-export type ModalProps = {
-  darkMode?: boolean;
-  isOpen?: boolean;
-  onClose?: () => void;
-};
-
 export type Group = {
   fullName: string;
   icon?: IconName;
diff --git a/src/types/Modal.ts b/src/types/Modal.ts
new file mode 100644
index 0000000..294f68b
--- /dev/null
+++ b/src/types/Modal.ts
@@ -0,0 +1,7 @@
+export type ThemeSource = 'system' | 'dark' | 'light';
+
+export type ModalProps = {
+  darkMode?: boolean;
+  isOpen?: boolean;
+  onClose?: () => void;
+};
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 5228b66..32db256 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -1,6 +1,6 @@
 import { Rectangle, nativeTheme } from 'electron';
 
-import { Group, Groups } from 'types';
+import { Group, Groups } from 'types/Group';
 
 import { AppSettings } from './appSettings';
 import { Projects } from './project';

From 42cdc894d3acb65b6ebd5dcbd437f1392978f9cf Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 12:39:19 +0200
Subject: [PATCH 10/14] feat: new groups

---
 src/types/Group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/Group.ts b/src/types/Group.ts
index 5af786e..ee0e665 100644
--- a/src/types/Group.ts
+++ b/src/types/Group.ts
@@ -1,7 +1,7 @@
 import { IconName } from '@blueprintjs/icons';
 
 export type Group = {
-  fullName: string;
+  fullName?: string;
   icon?: IconName;
   id: string;
   name: string;

From aa65a258beb33a22bd0541623d3b98d28effadf8 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 12:53:49 +0200
Subject: [PATCH 11/14] feat: new groups

---
 .../Modals/GroupModal/GroupModal.tsx          | 37 ++++++++++++++++---
 .../components/GroupsSelect/GroupsSelect.tsx  |  1 -
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.tsx b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
index c446104..6b8085b 100644
--- a/src/rendered/components/Modals/GroupModal/GroupModal.tsx
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
@@ -1,6 +1,8 @@
-import { Classes, Dialog } from '@blueprintjs/core';
-import { FC } from 'react';
+import { Button, Classes, Dialog, DialogBody, DialogFooter, InputGroup } from '@blueprintjs/core';
+import { FC, useState } from 'react';
 
+import { useNewGroups } from 'rendered/hooks/useNewGroups';
+import { Group } from 'types/Group';
 import { ModalProps } from 'types/Modal';
 
 export type GroupModalProps = {
@@ -8,16 +10,41 @@ export type GroupModalProps = {
   projectId: string;
 };
 
-export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose, darkMode }) => {
+export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose, darkMode, groupId }) => {
+  const { groups } = useNewGroups();
+  const [name, setName] = useState<Group['name']>('');
+
+  const title = groupId ? 'Edit group' : 'Add group';
+  const actionText = groupId ? 'Save' : 'Add';
+
+  console.log(groups);
+
   return (
     <Dialog
       className={darkMode && Classes.DARK}
       icon="group-item"
       isOpen={isOpen}
-      title={'Group'}
+      title={title}
       onClose={onClose}
     >
-      Group Modal
+      <DialogBody>
+        <InputGroup
+          placeholder="group name..."
+          value={name}
+          onChange={({ target: { value } }) => {
+            setName(value ?? '');
+          }}
+        />
+      </DialogBody>
+      <DialogFooter
+        minimal
+        actions={
+          <Button
+            intent="primary"
+            text={actionText}
+          />
+        }
+      />
     </Dialog>
   );
 };
diff --git a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
index 09767db..6dd0cb1 100644
--- a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
+++ b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
@@ -11,7 +11,6 @@ type Props = {
 };
 
 export const GroupsSelect: FC<Props> = ({ groupId, id }) => {
-  console.log('GroupsSelect', groupId, id);
   const { groups } = useNewGroups();
   const { addGroupId } = useProjects();
   const { openModal } = useModal();

From f19f5b900ff191ab531e3f260d0bc015ce41f92b Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 14:17:24 +0200
Subject: [PATCH 12/14] feat: new groups

---
 src/main/settings.ts                          |  1 +
 .../Modals/GroupModal/GroupModal.styles.ts    | 13 ++++
 .../Modals/GroupModal/GroupModal.tsx          | 59 ++++++++++++----
 .../components/GroupsSelect/GroupsSelect.tsx  | 67 +++++++++----------
 .../OldFashionGroupsSelect.tsx                | 55 +++++++--------
 .../components/ProjectMenu/ProjectMenu.tsx    |  2 +
 src/rendered/components/Projects/Projects.tsx | 47 +++++++------
 src/rendered/hooks/useNewGroups.ts            | 15 ++++-
 src/types/settings.ts                         |  1 +
 9 files changed, 159 insertions(+), 101 deletions(-)
 create mode 100644 src/rendered/components/Modals/GroupModal/GroupModal.styles.ts

diff --git a/src/main/settings.ts b/src/main/settings.ts
index b0c3c12..3743de1 100644
--- a/src/main/settings.ts
+++ b/src/main/settings.ts
@@ -27,6 +27,7 @@ export const settings = new Store<Settings>({
     },
     collapsedGroups: [],
     groupAliases: [],
+    newGroups: [],
     projects: [],
     selectedGroups: [],
     themeSource: 'system',
diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts b/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts
new file mode 100644
index 0000000..6939aa3
--- /dev/null
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts
@@ -0,0 +1,13 @@
+import { 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: flex-end;
+`;
diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.tsx b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
index 6b8085b..f178ecd 100644
--- a/src/rendered/components/Modals/GroupModal/GroupModal.tsx
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
@@ -1,26 +1,58 @@
-import { Button, Classes, Dialog, DialogBody, DialogFooter, InputGroup } from '@blueprintjs/core';
+import { Button, Classes, DialogBody, InputGroup } from '@blueprintjs/core';
 import { 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, StyledDialog } from './GroupModal.styles';
 
 export type GroupModalProps = {
   groupId?: string;
   projectId: string;
 };
 
-export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose, darkMode, groupId }) => {
-  const { groups } = useNewGroups();
+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 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);
+    addGroupId(projectId, newGroup.id);
+
+    (await appToaster).show({
+      intent: 'success',
+      message: `Group "${name}" added`
+    });
+
+    onClose();
+  };
+
   console.log(groups);
 
   return (
-    <Dialog
+    <StyledDialog
       className={darkMode && Classes.DARK}
       icon="group-item"
       isOpen={isOpen}
@@ -29,22 +61,21 @@ export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose,
     >
       <DialogBody>
         <InputGroup
+          autoFocus
+          intent={error ? 'danger' : 'none'}
           placeholder="group name..."
           value={name}
-          onChange={({ target: { value } }) => {
-            setName(value ?? '');
-          }}
+          onChange={({ target: { value } }) => setName(value ?? '')}
         />
-      </DialogBody>
-      <DialogFooter
-        minimal
-        actions={
+
+        <Actions>
           <Button
             intent="primary"
             text={actionText}
+            onClick={handleSave}
           />
-        }
-      />
-    </Dialog>
+        </Actions>
+      </DialogBody>
+    </StyledDialog>
   );
 };
diff --git a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
index 6dd0cb1..fa79148 100644
--- a/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
+++ b/src/rendered/components/Project/components/GroupsSelect/GroupsSelect.tsx
@@ -17,44 +17,43 @@ export const GroupsSelect: FC<Props> = ({ groupId, id }) => {
 
   const addGroup = () => openModal({ name: 'group', props: { projectId: id } });
 
-  return (
-    <>
-      <MenuDivider />
+  const { name } = groups.find(({ id: _groupId }) => _groupId === groupId) ?? {};
 
+  return (
+    <MenuItem
+      icon="unresolve"
+      text="Group"
+    >
       <MenuItem
-        icon="unresolve"
-        text="Group"
-      >
-        <MenuItem
-          icon="plus"
-          text="Add group"
-          onClick={addGroup}
-        />
+        icon="plus"
+        text="Add group"
+        onClick={addGroup}
+      />
 
-        {groupId && (
-          <>
-            <MenuItem
-              icon="small-cross"
-              intent="warning"
-              key="blank"
-              text={`Remove from ${groupId}`}
-              onClick={() => addGroupId(id, undefined)}
-            />
-
-            <MenuDivider />
-          </>
-        )}
-
-        {groups.map(({ fullName, id: _groupId, icon }) => (
+      {groupId && <MenuDivider />}
+
+      {groupId && (
+        <>
           <MenuItem
-            disabled={_groupId === groupId}
-            icon={icon}
-            key={_groupId}
-            text={fullName}
-            onClick={() => addGroupId(id, _groupId)}
+            icon="small-cross"
+            intent="warning"
+            key="blank"
+            text={`Remove from ${name}`}
+            onClick={() => addGroupId(id, undefined)}
           />
-        ))}
-      </MenuItem>
-    </>
+        </>
+      )}
+
+      {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>
   );
 };
diff --git a/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx b/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx
index 331c3eb..914a151 100644
--- a/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx
+++ b/src/rendered/components/Project/components/OldFashionGroupsSelect/OldFashionGroupsSelect.tsx
@@ -14,36 +14,33 @@ export const OldFashionGroupsSelect: FC<Props> = ({ group, id }) => {
   const { addGroup } = useProjects();
 
   return (
-    <>
-      <MenuDivider />
-      <MenuItem
-        icon="unresolve"
-        text="Group"
-      >
-        {group && (
-          <>
-            <MenuItem
-              icon="small-cross"
-              intent="warning"
-              key="blank"
-              text={`Remove from ${group}`}
-              onClick={() => addGroup(id, undefined)}
-            />
-
-            <MenuDivider />
-          </>
-        )}
-
-        {groupsWithAliases.map(({ fullName, id: groupID, icon }) => (
+    <MenuItem
+      icon="unresolve"
+      text="Group"
+    >
+      {group && (
+        <>
           <MenuItem
-            disabled={groupID === group}
-            icon={icon}
-            key={groupID}
-            text={fullName}
-            onClick={() => addGroup(id, groupID)}
+            icon="small-cross"
+            intent="warning"
+            key="blank"
+            text={`Remove from ${group}`}
+            onClick={() => addGroup(id, undefined)}
           />
-        ))}
-      </MenuItem>
-    </>
+
+          <MenuDivider />
+        </>
+      )}
+
+      {groupsWithAliases.map(({ fullName, id: groupID, icon }) => (
+        <MenuItem
+          disabled={groupID === group}
+          icon={icon}
+          key={groupID}
+          text={fullName}
+          onClick={() => addGroup(id, groupID)}
+        />
+      ))}
+    </MenuItem>
   );
 };
diff --git a/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx b/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
index ed52121..16377a5 100644
--- a/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
+++ b/src/rendered/components/Project/components/ProjectMenu/ProjectMenu.tsx
@@ -48,6 +48,8 @@ export const ProjectMenu: FC<Props> = ({ getStatus, name, id, gitStatus, removeP
         onClick={() => openModal({ name: 'git:reset', props: { gitStatus, id, name } })}
       />
 
+      <MenuDivider />
+
       {oldFashionGroups && (
         <OldFashionGroupsSelect
           group={group}
diff --git a/src/rendered/components/Projects/Projects.tsx b/src/rendered/components/Projects/Projects.tsx
index 1fec87f..c40caf4 100644
--- a/src/rendered/components/Projects/Projects.tsx
+++ b/src/rendered/components/Projects/Projects.tsx
@@ -49,17 +49,17 @@ export const Projects = () => {
       return sortOldFashionGroups();
     }
 
-    const sortedProjects = [...groups, others].map((group) => ({
-      ...group,
-      projects: projects.filter(
-        ({ groupId }) =>
-          groupId === group.id ||
-          (group.id === 'ungrouped' && !groupId) ||
-          (group.id === 'ungrouped' && groupId && !groupsWithAliases.find(({ id }) => id === groupId))
-      )
-    }));
-
-    return sortedProjects;
+    return [...groups, others]
+      .map((group) => ({
+        ...group,
+        projects: projects.filter(
+          ({ groupId }) =>
+            groupId === group.id ||
+            (group.id === 'ungrouped' && !groupId) ||
+            (group.id === 'ungrouped' && groupId && !groupsWithAliases.find(({ id }) => id === groupId))
+        )
+      }))
+      .filter((group) => group.projects.length);
   }, [sortOldFashionGroups]);
 
   const isEmpty = oldFashionGroups
@@ -68,7 +68,9 @@ export const Projects = () => {
 
   const withGroups = oldFashionGroups
     ? Boolean(selectedGroups.length)
-    : groups.length > 0 && projects.length > 0 && selectedGroups.length > 1;
+    : groups.length > 0 && projects.length > 0 && sortedProjects.length > 1;
+
+  console.log(sortedProjects);
 
   return (
     <Root>
@@ -120,15 +122,18 @@ export const Projects = () => {
           ))}
 
         {withGroups &&
-          sortedProjects.map((group) => (
-            <GroupCollapse
-              collapsed={Boolean(collapsedGroups.includes(group.id))}
-              group={group}
-              key={group.id}
-              projects={group.projects}
-              onClick={() => toggleCollapsed(group.id)}
-            />
-          ))}
+          sortedProjects.map(
+            (group) =>
+              group.projects.length > 0 && (
+                <GroupCollapse
+                  collapsed={Boolean(collapsedGroups.includes(group.id))}
+                  group={group}
+                  key={group.id}
+                  projects={group.projects}
+                  onClick={() => toggleCollapsed(group.id)}
+                />
+              )
+          )}
       </ProjectsWrapper>
     </Root>
   );
diff --git a/src/rendered/hooks/useNewGroups.ts b/src/rendered/hooks/useNewGroups.ts
index b1b3adf..f194186 100644
--- a/src/rendered/hooks/useNewGroups.ts
+++ b/src/rendered/hooks/useNewGroups.ts
@@ -10,7 +10,16 @@ type Actions = {
   addGroup: (group: Group) => void;
 };
 
-export const useNewGroups = create<State & Actions>((set) => ({
-  addGroup: (group: Group) => set((state) => ({ groups: [...state.groups, group] })),
-  groups: []
+export const useNewGroups = create<State & Actions>((set, get) => ({
+  addGroup: (group: Group) => {
+    set((state) => ({ groups: [...state.groups, group] }));
+    window.bridge.settings.set('newGroups', get().groups);
+  },
+  groups: [],
+  updateGroup: (group: Group) => set((state) => ({ groups: state.groups.map((g) => (g.id === group.id ? group : g)) }))
 }));
+
+(async () => {
+  const groups = await window.bridge.settings.get('newGroups');
+  useNewGroups.setState({ groups });
+})();
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 32db256..769a2d1 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -9,6 +9,7 @@ export type Settings = {
   appSettings: AppSettings;
   collapsedGroups: Group['id'][];
   groupAliases: Groups;
+  newGroups: Groups;
   projects: Projects;
   selectedGroups: Group['id'][];
   themeSource: typeof nativeTheme.themeSource;

From ae371549cf709ee357971d6ac7c424218c38ab26 Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 14:26:53 +0200
Subject: [PATCH 13/14] feat: new groups

---
 .../Modals/GroupModal/GroupModal.styles.ts    | 10 ++++++++--
 .../Modals/GroupModal/GroupModal.tsx          | 20 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts b/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts
index 6939aa3..0decdf0 100644
--- a/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.styles.ts
@@ -1,4 +1,4 @@
-import { Dialog } from '@blueprintjs/core';
+import { Colors, Dialog } from '@blueprintjs/core';
 import styled from 'styled-components';
 
 export const StyledDialog = styled(Dialog)`
@@ -9,5 +9,11 @@ export const Actions = styled.div`
   display: flex;
   align-items: center;
   margin-top: 10px;
-  justify-content: flex-end;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+`;
+
+export const Error = styled.div`
+  color: ${Colors.RED3};
+  font-size: 12px;
 `;
diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.tsx b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
index f178ecd..8717b29 100644
--- a/src/rendered/components/Modals/GroupModal/GroupModal.tsx
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Classes, DialogBody, InputGroup } from '@blueprintjs/core';
-import { FC, useState } from 'react';
+import { ChangeEventHandler, FC, useState } from 'react';
 import { v4 } from 'uuid';
 
 import { useNewGroups } from 'rendered/hooks/useNewGroups';
@@ -8,7 +8,7 @@ import { ModalProps } from 'types/Modal';
 import { useProjects } from 'rendered/hooks/useProjects';
 import { appToaster } from 'rendered/utils/appToaster';
 
-import { Actions, StyledDialog } from './GroupModal.styles';
+import { Actions, Error, StyledDialog } from './GroupModal.styles';
 
 export type GroupModalProps = {
   groupId?: string;
@@ -24,6 +24,16 @@ export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose,
   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);
 
@@ -65,15 +75,17 @@ export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose,
           intent={error ? 'danger' : 'none'}
           placeholder="group name..."
           value={name}
-          onChange={({ target: { value } }) => setName(value ?? '')}
+          onChange={handleChange}
         />
 
         <Actions>
           <Button
-            intent="primary"
+            intent="warning"
             text={actionText}
             onClick={handleSave}
           />
+
+          {error && <Error>{error}</Error>}
         </Actions>
       </DialogBody>
     </StyledDialog>

From 36cff5965a98b0b4e7792c1811bdcb50a2304ebe Mon Sep 17 00:00:00 2001
From: Egor Stronhin <i@egor.xyz>
Date: Sun, 10 Mar 2024 14:57:41 +0200
Subject: [PATCH 14/14] feat: new groups

---
 .../GroupCollapse/GroupCollapse.tsx           | 88 ++++++++++++-------
 .../Modals/GroupModal/GroupModal.tsx          |  4 +-
 .../RemoveGroupAlert/RemoveGroupAlert.tsx     | 35 ++++++++
 .../components/RemoveGroupAlert/index.ts      |  1 +
 src/rendered/components/Projects/Projects.tsx | 45 ++++------
 src/rendered/hooks/useModal.tsx               |  9 ++
 src/rendered/hooks/useNewGroups.ts            |  8 +-
 7 files changed, 128 insertions(+), 62 deletions(-)
 create mode 100644 src/rendered/components/Project/components/RemoveGroupAlert/RemoveGroupAlert.tsx
 create mode 100644 src/rendered/components/Project/components/RemoveGroupAlert/index.ts

diff --git a/src/rendered/components/GroupCollapse/GroupCollapse.tsx b/src/rendered/components/GroupCollapse/GroupCollapse.tsx
index 159b156..3c11127 100644
--- a/src/rendered/components/GroupCollapse/GroupCollapse.tsx
+++ b/src/rendered/components/GroupCollapse/GroupCollapse.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react';
 
 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>
+  );
+};
diff --git a/src/rendered/components/Modals/GroupModal/GroupModal.tsx b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
index 8717b29..5e3f6e1 100644
--- a/src/rendered/components/Modals/GroupModal/GroupModal.tsx
+++ b/src/rendered/components/Modals/GroupModal/GroupModal.tsx
@@ -12,7 +12,7 @@ import { Actions, Error, StyledDialog } from './GroupModal.styles';
 
 export type GroupModalProps = {
   groupId?: string;
-  projectId: string;
+  projectId?: string;
 };
 
 export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose, darkMode, groupId, projectId }) => {
@@ -49,7 +49,7 @@ export const GroupModal: FC<ModalProps & GroupModalProps> = ({ isOpen, onClose,
     };
 
     addGroup(newGroup);
-    addGroupId(projectId, newGroup.id);
+    projectId && addGroupId(projectId, newGroup.id);
 
     (await appToaster).show({
       intent: 'success',
diff --git a/src/rendered/components/Project/components/RemoveGroupAlert/RemoveGroupAlert.tsx b/src/rendered/components/Project/components/RemoveGroupAlert/RemoveGroupAlert.tsx
new file mode 100644
index 0000000..97a0e46
--- /dev/null
+++ b/src/rendered/components/Project/components/RemoveGroupAlert/RemoveGroupAlert.tsx
@@ -0,0 +1,35 @@
+import { Alert, Classes } from '@blueprintjs/core';
+import { FC } from 'react';
+
+import { useNewGroups } from 'rendered/hooks/useNewGroups';
+import { Group } from 'types/Group';
+import { ModalProps } from 'types/Modal';
+
+export type RemoveGroupAlertProps = {
+  group: Group;
+};
+
+export const RemoveGroupAlert: FC<RemoveGroupAlertProps & ModalProps> = ({ isOpen, group, darkMode, onClose }) => {
+  const { deleteGroup } = useNewGroups();
+
+  const remove = () => {
+    deleteGroup(group.id);
+    onClose();
+  };
+
+  return (
+    <Alert
+      cancelButtonText="Cancel"
+      className={darkMode && Classes.DARK}
+      confirmButtonText="Remove"
+      icon="trash"
+      intent="danger"
+      isOpen={isOpen}
+      onClose={onClose}
+      onConfirm={remove}
+    >
+      Are you sure you want to delete the group <br />
+      <b>{group.name}</b>?
+    </Alert>
+  );
+};
diff --git a/src/rendered/components/Project/components/RemoveGroupAlert/index.ts b/src/rendered/components/Project/components/RemoveGroupAlert/index.ts
new file mode 100644
index 0000000..eb43e79
--- /dev/null
+++ b/src/rendered/components/Project/components/RemoveGroupAlert/index.ts
@@ -0,0 +1 @@
+export { RemoveGroupAlert } from './RemoveGroupAlert';
diff --git a/src/rendered/components/Projects/Projects.tsx b/src/rendered/components/Projects/Projects.tsx
index c40caf4..2be618e 100644
--- a/src/rendered/components/Projects/Projects.tsx
+++ b/src/rendered/components/Projects/Projects.tsx
@@ -49,18 +49,16 @@ export const Projects = () => {
       return sortOldFashionGroups();
     }
 
-    return [...groups, others]
-      .map((group) => ({
-        ...group,
-        projects: projects.filter(
-          ({ groupId }) =>
-            groupId === group.id ||
-            (group.id === 'ungrouped' && !groupId) ||
-            (group.id === 'ungrouped' && groupId && !groupsWithAliases.find(({ id }) => id === groupId))
-        )
-      }))
-      .filter((group) => group.projects.length);
-  }, [sortOldFashionGroups]);
+    return [...groups, others].map((group) => ({
+      ...group,
+      projects: projects.filter(
+        ({ groupId }) =>
+          groupId === group.id ||
+          (group.id === 'ungrouped' && !groupId) ||
+          (group.id === 'ungrouped' && groupId && !groupsWithAliases.find(({ id }) => id === groupId))
+      )
+    }));
+  }, [sortOldFashionGroups, groups]);
 
   const isEmpty = oldFashionGroups
     ? Boolean(selectedGroups.length) && !sortedProjects.length && projects.length > 0
@@ -70,8 +68,6 @@ export const Projects = () => {
     ? Boolean(selectedGroups.length)
     : groups.length > 0 && projects.length > 0 && sortedProjects.length > 1;
 
-  console.log(sortedProjects);
-
   return (
     <Root>
       {oldFashionGroups && <GroupsSelector />}
@@ -122,18 +118,15 @@ export const Projects = () => {
           ))}
 
         {withGroups &&
-          sortedProjects.map(
-            (group) =>
-              group.projects.length > 0 && (
-                <GroupCollapse
-                  collapsed={Boolean(collapsedGroups.includes(group.id))}
-                  group={group}
-                  key={group.id}
-                  projects={group.projects}
-                  onClick={() => toggleCollapsed(group.id)}
-                />
-              )
-          )}
+          sortedProjects.map((group) => (
+            <GroupCollapse
+              collapsed={Boolean(collapsedGroups.includes(group.id))}
+              group={group}
+              key={group.id}
+              projects={group.projects}
+              onClick={() => toggleCollapsed(group.id)}
+            />
+          ))}
       </ProjectsWrapper>
     </Root>
   );
diff --git a/src/rendered/hooks/useModal.tsx b/src/rendered/hooks/useModal.tsx
index 742d977..bcd951e 100644
--- a/src/rendered/hooks/useModal.tsx
+++ b/src/rendered/hooks/useModal.tsx
@@ -7,6 +7,10 @@ import { GitMergeModal, GitMergeModalProps } from 'rendered/components/Modals/Gi
 import { RemoveAlert } from 'rendered/components/Project/components/RemoveAlert';
 import { RemoveAlertProps } from 'rendered/components/Project/components/RemoveAlert/RemoveAlert';
 import { GroupModal, GroupModalProps } from 'rendered/components/Modals/GroupModal/GroupModal';
+import {
+  RemoveGroupAlert,
+  RemoveGroupAlertProps
+} from 'rendered/components/Project/components/RemoveGroupAlert/RemoveGroupAlert';
 
 import { useDarkModeStore } from './useDarkMode';
 
@@ -28,6 +32,10 @@ type ActiveModal = ModalProps &
         name: 'group';
         props: GroupModalProps;
       }
+    | {
+        name: 'remove:group';
+        props: RemoveGroupAlertProps;
+      }
   );
 
 type State = {
@@ -40,6 +48,7 @@ const Modals: Record<ActiveModal['name'], FC<ActiveModal['props']>> = {
   'git:merge': GitMergeModal,
   'git:reset': GitResetModal,
   group: GroupModal,
+  'remove:group': RemoveGroupAlert,
   'remove:project': RemoveAlert
 };
 
diff --git a/src/rendered/hooks/useNewGroups.ts b/src/rendered/hooks/useNewGroups.ts
index f194186..13fb10a 100644
--- a/src/rendered/hooks/useNewGroups.ts
+++ b/src/rendered/hooks/useNewGroups.ts
@@ -8,6 +8,7 @@ type State = {
 
 type Actions = {
   addGroup: (group: Group) => void;
+  deleteGroup: (id: string) => void;
 };
 
 export const useNewGroups = create<State & Actions>((set, get) => ({
@@ -15,8 +16,11 @@ export const useNewGroups = create<State & Actions>((set, get) => ({
     set((state) => ({ groups: [...state.groups, group] }));
     window.bridge.settings.set('newGroups', get().groups);
   },
-  groups: [],
-  updateGroup: (group: Group) => set((state) => ({ groups: state.groups.map((g) => (g.id === group.id ? group : g)) }))
+  deleteGroup: (id: string) => {
+    set((state) => ({ groups: state.groups.filter((group) => group.id !== id) }));
+    window.bridge.settings.set('newGroups', get().groups);
+  },
+  groups: []
 }));
 
 (async () => {