feat: add main subtitle in sidebar

slater-notes · Apr 30, 2021 · 2f788f5 · 2f788f5
1 parent 74c12b9
commit 2f788f5
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 67 deletions.
diff --git a/src/components/SidebarComponents/FolderGroupTitle.tsx b/src/components/SidebarComponents/FolderGroupTitle.tsx
@@ -4,7 +4,7 @@ import DefaultIconButton from '../Buttons/DefaultIconButton';
 
 interface Props {
   title: string;
-  iconButton: {
+  iconButton?: {
     icon: Icon;
     onClick: () => void;
   };
@@ -16,13 +16,15 @@ const FolderGroupTitle = (props: Props) => {
   return (
     <List disablePadding>
       <ListItem className={classes.listItem}>{props.title}</ListItem>
-      <ListItemSecondaryAction>
-        <DefaultIconButton
-          label='Add Folder'
-          icon={props.iconButton.icon}
-          onClick={props.iconButton.onClick}
-        />
-      </ListItemSecondaryAction>
+      {props.iconButton && (
+        <ListItemSecondaryAction>
+          <DefaultIconButton
+            label='Add Folder'
+            icon={props.iconButton.icon}
+            onClick={props.iconButton.onClick}
+          />
+        </ListItemSecondaryAction>
+      )}
     </List>
   );
 };

diff --git a/src/containers/Sidebar/Folders/index.tsx b/src/containers/Sidebar/Folders/index.tsx
@@ -100,7 +100,9 @@ const Folders = () => {
           />
         </div>
 
-        <div style={{ marginBottom: theme.spacing(5) }}>
+        <div className={classes.groupContainer}>
+          <FolderGroupTitle title='Notes' />
+
           <ListGroup
             items={[
               {
@@ -128,67 +130,69 @@ const Folders = () => {
           />
         </div>
 
-        <FolderGroupTitle
-          title='Folders'
-          iconButton={{
-            icon: PlusCircle,
-            onClick: () => createNewFolder({ title: '', editOnCreate: true }),
-          }}
-        />
+        <div className={classes.groupContainer}>
+          <FolderGroupTitle
+            title='Folders'
+            iconButton={{
+              icon: PlusCircle,
+              onClick: () => createNewFolder({ title: '', editOnCreate: true }),
+            }}
+          />
 
-        {useMemo(
-          () => {
-            const items: ListGroupProps['items'] = fileCollection?.folders
-              ? fileCollection.folders
-                  .filter((f) => !f.isDeleted)
-                  .sort((f1, f2) => f2.created - f1.created)
-                  .map((folder) => ({
-                    key: folder.id,
-                    text:
-                      editingFolderId === folder.id ? (
-                        <FolderItemEdit
-                          folder={folder}
-                          onDone={(value) => {
-                            folder.updated = moment().unix();
-                            folder.title = value.trim();
-                            updateFolder({ id: folder.id, folder });
-                            setEditingFolderId(null);
-                          }}
-                        />
-                      ) : (
-                        folder.title || 'Untitled'
-                      ),
-                    icon: Folder,
-                    secondaryAction: editingFolderId ? null : (
-                      <IconButtonWithMenu
-                        icon={MoreVertical}
-                        menuItems={[
-                          {
-                            label: 'Rename',
-                            onClick: () => {
-                              if (activeFolderId !== folder.id) setActiveFolderId(folder.id);
-                              defer(() => setEditingFolderId(folder.id));
+          {useMemo(
+            () => {
+              const items: ListGroupProps['items'] = fileCollection?.folders
+                ? fileCollection.folders
+                    .filter((f) => !f.isDeleted)
+                    .sort((f1, f2) => f2.created - f1.created)
+                    .map((folder) => ({
+                      key: folder.id,
+                      text:
+                        editingFolderId === folder.id ? (
+                          <FolderItemEdit
+                            folder={folder}
+                            onDone={(value) => {
+                              folder.updated = moment().unix();
+                              folder.title = value.trim();
+                              updateFolder({ id: folder.id, folder });
+                              setEditingFolderId(null);
+                            }}
+                          />
+                        ) : (
+                          folder.title || 'Untitled'
+                        ),
+                      icon: Folder,
+                      secondaryAction: editingFolderId ? null : (
+                        <IconButtonWithMenu
+                          icon={MoreVertical}
+                          menuItems={[
+                            {
+                              label: 'Rename',
+                              onClick: () => {
+                                if (activeFolderId !== folder.id) setActiveFolderId(folder.id);
+                                defer(() => setEditingFolderId(folder.id));
+                              },
                             },
-                          },
-                          {
-                            label: 'Delete Folder...',
-                            onClick: () => {
-                              setDeleteFolderConfirm(folder);
+                            {
+                              label: 'Delete Folder...',
+                              onClick: () => {
+                                setDeleteFolderConfirm(folder);
+                              },
                             },
-                          },
-                        ]}
-                      />
-                    ),
-                    isActive: activeFolderId === folder.id,
-                    onClick: () => setActiveFolderId(folder.id),
-                  }))
-              : [];
+                          ]}
+                        />
+                      ),
+                      isActive: activeFolderId === folder.id,
+                      onClick: () => setActiveFolderId(folder.id),
+                    }))
+                : [];
 
-            return <ListGroup items={items} />;
-          },
-          //eslint-disable-next-line
-          [fileCollection, activeFolderId, editingFolderId],
-        )}
+              return <ListGroup items={items} />;
+            },
+            //eslint-disable-next-line
+            [fileCollection, activeFolderId, editingFolderId],
+          )}
+        </div>
 
         {deleteFolderConfirm && (
           <DefaultDialog
@@ -264,7 +268,10 @@ const useStyles = makeStyles((theme) => ({
   },
 
   mainButtonContainer: {
-    padding: `${theme.spacing(3)}px ${theme.spacing(3)}px`,
+    padding: theme.spacing(2),
+  },
+
+  groupContainer: {
     marginBottom: theme.spacing(2),
   },