Design the files menu in Figma

[natdink]

Problem (Why)

We do not have a Figma representation of the notebook menu that is currently in cfg-ai-dev/demo. We need to make a version with our latest styling applied (rounded chip header).

Impact (Who)

App Builders

Existing

Current menu in cfg-ai-demo:

Add a section in drag and drop to address this.

Requirements (What)

Start by mimicking the styling of the menu as it is in dev and THEN work on making small UX recommendations. Note: leadership did want the notebook menu to be in a file explorer so please keep that in mind.

UX consideration: how can we make the add notebook cta more apparent but still in line with a file explorer/tree setup?
UX consideration: rename the notebook

[sayalibhagat-Kanini]

I have designed the left panel for the Notebook Menu.
Figma - https://www.figma.com/proto/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=15123-150328&starting-point-node-id=15123%3A150328&scaling=scale-down-width&content-scaling=fixed&show-proto-sidebar=1&t=17wquOb4efvpkwXn-1

[natdink]

So remember that we need to have a file explorer setup as well as functionality so think nesting, adding folders, adding files, etc

Right now, you're missing features we have today and we need to make sure to account for them.

When i go to dev/demo, I don't see all of these features below but another dev showed this to me:

[sayalibhagat-Kanini]

@natdink I was reviewing the drag and drop and code applications and I noticed that the file explorer setup features are currently available only in the code application not in the drag and drop. I just want to confirm, are we planning to add these features to the drag and drop application as well?

[natdink]

No, they would be separately designed menus since their purpose is different. I think you can try to pull in some of the styling that we have from the drag and drop but at the end of the day, the notebook will need that tree view/file explorer type view. Does that make sense? @sayalibhagat-Kanini

[sayalibhagat-Kanini]

I have updated the Notebook left panel design similar to the other left panel, using a same styling.

[sayalibhagat-Kanini]

Added a Publish file and Recompile reactor features. Also Updated the interaction for Duplicate and Delete option. When a user select a folder to duplicate, I have provided an option to select a specific file with that folder for duplication. Similar functionality applied to Delete.
Figma Link - https://www.figma.com/proto/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=15123-150328&starting-point-node-id=15123%3A150328&show-proto-sidebar=1&scaling=scale-down-width&content-scaling=fixed&t=cUVVklmFgo3RdLqw-1

[bfekadu21]

@sayalibhagat-Kanini Looks good! Can you also create the delete modal that appears after the user tries to delete a folder or file?

[sayalibhagat-Kanini]

I have added the Delete model. It appears once the user selects files/folder and click on the delete, allowing the user to confirm it and proceed with the deletion.

[bfekadu21]

@sayalibhagat-Kanini @natdink Updated this ticket name to focus on the Files menu. I updated the text in the blue chip to "Files" instead of "Notebook" in Figma. Also I created a new ticket for creating the Notebook menu which will be similar. Here is the link to the notebook menu ticket.