diff --git a/renderer/components/Workspaces/WorkspaceConfigurer/index.js b/renderer/components/Workspaces/WorkspaceConfigurer/index.js
new file mode 100644
index 000000000..25ea54d8a
--- /dev/null
+++ b/renderer/components/Workspaces/WorkspaceConfigurer/index.js
@@ -0,0 +1,39 @@
+import Modal from "components/Modal/index";
+import React from "react";
+import { useSelector } from "react-redux";
+
+const WorkspaceConfigurer = ({onClose}) => {
+ const { workspaces } = useSelector((state) => state.workspaces);
+
+ const onSubmit = () => {
+ onClose();
+ }
+
+ return (
+
+
+
+ )
+
+}
+
+export default WorkspaceConfigurer;
diff --git a/renderer/components/Workspaces/WorkspaceSelector/StyledWrapper.js b/renderer/components/Workspaces/WorkspaceSelector/StyledWrapper.js
new file mode 100644
index 000000000..615e17d54
--- /dev/null
+++ b/renderer/components/Workspaces/WorkspaceSelector/StyledWrapper.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ .current-workspace {
+ margin-inline: .5rem;
+ background: #fff;
+ border-radius: 5px;
+
+ .caret {
+ margin-left: 0.25rem;
+ color: rgb(140, 140, 140);
+ fill: rgb(140, 140, 140);
+ }
+ }
+`;
+
+export default Wrapper;
diff --git a/renderer/components/Workspaces/WorkspaceSelector/index.js b/renderer/components/Workspaces/WorkspaceSelector/index.js
new file mode 100644
index 000000000..6f6eabc41
--- /dev/null
+++ b/renderer/components/Workspaces/WorkspaceSelector/index.js
@@ -0,0 +1,68 @@
+import React, { useRef, forwardRef, useState, useEffect } from 'react';
+import Dropdown from 'components/Dropdown';
+import { IconAdjustmentsHorizontal, IconCaretDown, IconBox } from '@tabler/icons';
+import WorkspaceConfigurer from "../WorkspaceConfigurer";
+import { useDispatch, useSelector } from 'react-redux';
+import { selectWorkspace } from 'providers/ReduxStore/slices/workspaces';
+import StyledWrapper from './StyledWrapper';
+
+const WorkspaceSelector = () => {
+ const dropdownTippyRef = useRef();
+ const [openWorkspacesModal, setOpenWorkspacesModal] = useState(false);
+ const [activeWorkspace, setActiveWorkspace] = useState({});
+ const dispatch = useDispatch();
+
+ const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
+
+ useEffect(() => {
+ setActiveWorkspace(workspaces.find((workspace) => workspace.uid === activeWorkspaceUid));
+ }, [activeWorkspaceUid]);
+
+ const Icon = forwardRef((props, ref) => {
+ return (
+
+
+
+
+
+
+ {activeWorkspace.name}
+
+
+
+
+ );
+ });
+
+ const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+
+ const handleSelectWorkspace = (workspace) => {
+ dispatch(selectWorkspace(workspace));
+ }
+
+ return (
+
+
+
} placement='bottom-end'>
+ {workspaces && workspaces.length && workspaces.map((workspace) => (
+
handleSelectWorkspace(workspace)}>
+ {workspace.name}
+
+ ))}
+
+
{
+ setOpenWorkspacesModal(true);
+ }}>
+
+
+
+
Configure
+
+
+
+ {openWorkspacesModal && setOpenWorkspacesModal(false)}/>}
+
+ );
+};
+
+export default WorkspaceSelector;
diff --git a/renderer/providers/ReduxStore/index.js b/renderer/providers/ReduxStore/index.js
index d86b18fc4..f0bdebf72 100644
--- a/renderer/providers/ReduxStore/index.js
+++ b/renderer/providers/ReduxStore/index.js
@@ -2,12 +2,14 @@ import { configureStore } from '@reduxjs/toolkit';
import appReducer from './slices/app';
import collectionsReducer from './slices/collections';
import tabsReducer from './slices/tabs';
+import workspacesReducer from './slices/workspaces';
export const store = configureStore({
reducer: {
app: appReducer,
collections: collectionsReducer,
- tabs: tabsReducer
+ tabs: tabsReducer,
+ workspaces: workspacesReducer
}
});
diff --git a/renderer/providers/ReduxStore/slices/workspaces.js b/renderer/providers/ReduxStore/slices/workspaces.js
new file mode 100644
index 000000000..2d9aa4470
--- /dev/null
+++ b/renderer/providers/ReduxStore/slices/workspaces.js
@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+ workspaces: [{
+ uid: 123,
+ name: 'My Workspace'
+ },{
+ uid: 234,
+ name: 'workspace B'
+ },{
+ uid: 345,
+ name: 'workspace C'
+ }],
+ activeWorkspaceUid: 123
+};
+
+export const workspacesSlice = createSlice({
+ name: 'workspaces',
+ initialState,
+ reducers: {
+ selectWorkspace: (state, action) => {
+ state.activeWorkspaceUid = action.payload.uid;
+ },
+ }
+});
+
+export const {
+ selectWorkspace
+} = workspacesSlice.actions;
+
+export default workspacesSlice.reducer;