feat: IDE layout by cguedes · Pull Request #62 · refstudio/refstudio

cguedes · 2023-05-30T10:11:23Z

This PR closes #1, and closes #44, by adding the following features:

Side panels for file browsing, references browsing and AI interactions (on the right)
Central panel for document edit and view with tabs and side-panel (support for two: LEFT and RIGHT)
New dependency with visual studio icons (and others if we need them)

Implementation details

App state - using Jotai
- openFilesAtom - The main (read-write) state for the open files (overall and per pane)
- leftPaneAtom - Read-only atom with the left pane files (and active file)
- rightPaneAtom - Read-only atom with the right pane files (and active file)
- write-only atoms (actions)
  - openFileInPaneAtom - that will open a file in a given tab
  - activateFileInPaneAtom - that will activate a file open in a tab (selected in the explorer or in the tabs)
  - closeFileInPaneAtom - that will close a file in a tab
  - splitFileToPaneAtom - that will move a file between two tabs (UI via explorer -> open files)
react-icons library with vs code icons
- Library containing multiple sets of icons, including VS Code
- Closes issue [Discussion] Icons library #44
Updated terminology: view -> panel
- The main UI components used by the App
- ExplorerPanel - contains the open files and project tree
- ReferencesPanel - contains the uploaded references
- AIPanel - contains the AI interactions
- CenterPanel - contains the split view (LEFT, RIGHT) with two tabled areas with file-rendered-view components
View components (used by the CenterPanel - component that renders in the central area with open files
- EmptyView - view (splash screen) for when no file is selected
- TextView - generic view that displays text content (used for .xml and .json files)
- PdfViewer - PDF presenter (for .pdf files)
- TipTapView - the TipTap editor (used for any other file not listed above)
Reusable UI components (/components)
- GOAL: Split UI from the business logic and start a component library (related to [Discussion] Component libraries #3)
- PanelSection - This is a panel section with a title and a collapsible, and scrollable, content
- PanelWrapper - This is a side panel with multiple PanelSection components, and a title
- TabPane - This is a x-scrollable list of tabs with an x (close) icon/action. Used for the open files tab.
- PrimarySideBar - Not actually reusable (maybe will be used for the right side also) but a UI component

IDE Panels

Left
- Explorer
  - "Open Files" section
  - "Project files" section
  - both sections render a tree of files/folders
- References
  - "Library" section - List the project references (unchanged by this PR)
  - "Upload" section - upload component moved from the folders view - UX to be improved by Populate new references in ReferencesView after PDF ingestion #49
Right
- AI
  - "Selection" section - existing code for selected text and interaction with the sidecar

Empty Center	Center Tabs

- Adds react-icons dependency

- views -> panels

hammer · 2023-05-31T14:04:24Z

This looks very cool! It doesn't have to be in this PR, but it would be nice to make the left and right sidebars collapsible. I also think it could be useful to have the writing and reading tabs all part of the same component rather than having them separated right now, though I could be convinced otherwise. Overall though I think this is looking good!

Another small nit: the toolbar in the TipTap component does not behave well when the window size is small. Below you can see the strikethrough symbol exceeding the shaded area. We don't need to nail all of these small issues while getting the high-level layout solved, but just wanted to mention it now so that we get to it at some point.

… and pre-push)

Will open a new PR

cguedes · 2023-06-01T13:41:26Z

Another small nit: the toolbar in the TipTap component does not behave well when the window size is small. Below you can see the strikethrough symbol exceeding the shaded area. We don't need to nail all of these small issues while getting the high-level layout solved, but just wanted to mention it now so that we get to it at some point.

@hammer fixed this and improved (I think 😅) the UX of this component.

cguedes · 2023-06-01T13:42:59Z

This looks very cool! It doesn't have to be in this PR, but it would be nice to make the left and right sidebars collapsible. I also think it could be useful to have the writing and reading tabs all part of the same component rather than having them separated right now, though I could be convinced otherwise. Overall though I think this is looking good!

Created a ticket for this feature #68

danvk

Left a bunch of comments. I really like the VS Code look!

I think there are a few high level things that we should hash out:

We should pick a system for doing async calls in React before our application gets too big. React has <Suspense> built in but there are also many other tools out there like react-query. Basically, calling an async function in a useEffect is extremely error-prone and something that should be avoided.
The way we're using Jotai in this PR feels like it's mostly acting as a wrapper around how you'd do everything with Redux. I think we'll get more value from Jotai if we have several atoms rather than just one big one.

danvk · 2023-06-01T17:15:16Z

+  return {
+    ...state,
+    panes: {
+      ...state.panes,


There is a Jotai Immer integration which could cut down on all this object spreading: https://jotai.org/docs/integrations/immer

Will try that integration. Was trying to keep the code as clean of external dependencies as possible. But I understand that this type of code is harder to maintain and read.

danvk · 2023-06-01T20:04:20Z

Oh, and a UI nit I'm noticing while developing locally: I'm getting a ton of empty scrollbars that I don't see in your screenshot:

danvk · 2023-06-01T20:15:35Z

Here's what it might look like to roll our own hook to safely wrap Promises (there's a little bit of diff noise due to the capital/lowercase C thing): 35aab1b

Pros: Forces you to model loading, error and success states as mutually exclusive options and handle all of them. Handles set-after-unmount errors for you.
Cons: Sometimes you don't want to think about loading/error states. Forces wrapping of async functions in React.useCallback.

hammer · 2023-06-02T00:35:43Z

The way we're using Jotai in this PR feels like it's mostly acting as a wrapper around how you'd do everything with Redux.

if Redux patterns are more comfortable to the team perhaps we should use Zustand?

cguedes · 2023-06-02T12:43:32Z

Oh, and a UI nit I'm noticing while developing locally: I'm getting a ton of empty scrollbars that I don't see in your screenshot:

@danvk were are you testing? I'm in OSX with safari (Tauri's browser).

cguedes · 2023-06-02T12:45:19Z

if Redux patterns are more comfortable to the team perhaps we should use Zustand?

We would keep Jotai for this PR so that we can merge and move forward with the project.
But I think that worth spending some time investigating (in a new PR) how Zustand would work in our project as we have more state.

cguedes · 2023-06-02T13:31:09Z

@sehyod can you review this again.

cguedes · 2023-06-02T14:00:34Z

Oh, and a UI nit I'm noticing while developing locally: I'm getting a ton of empty scrollbars that I don't see in your screenshot:

I was able to reproduce that by configuring the system to always display scrollbars.

Now it loos like this:

No scroll	Scroll

closes #1 #44

cguedes added 9 commits May 26, 2023 15:44

Adds a PrimarySideBar to the App and reorganize panels

0b3004e

- Adds react-icons dependency

Merge main into 1-vscode-layout

4599097

Fix lint

f9bb590

Merge branch 'main' into 1-vscode-layout

7d171c4

Create PanelSection and adjust UI elements

2a71658

Adjust styles for the FoldersView

4beb097

Adds TabPane for open files selection

77dc2bb

Fix lint

a6074cb

Fix open/close files

47258fd

cguedes linked an issue May 30, 2023 that may be closed by this pull request

Design high-level layout of writing, references, and AI interactions components #1

Closed

cguedes added 3 commits May 30, 2023 15:03

Adds Split view (central pane) and use reducer state for open files

e43f930

Merge branch 'main' into 1-vscode-layout

407cb7a

Reorganize CenterView

8f70e82

cguedes requested a review from sehyod May 30, 2023 14:39

cguedes added 3 commits May 30, 2023 22:33

Rename views and fix scroll

69dca37

- views -> panels

lint

38a7c3d

Merge branch 'main' into 1-vscode-layout

44094a8

cguedes added 4 commits June 1, 2023 09:18

Implement the openFiles state with Jotai

8f90817

Rewrite atom and adjust panels

8c04827

Make menu bar icons scroll and hide scrollbar

51ce911

Improve editor styles

b7c98cf

sehyod requested changes Jun 1, 2023

View reviewed changes

Comment thread src/atoms/openFilesState.ts Outdated

Comment thread src/atoms/openFilesState.ts Outdated

Comment thread src/atoms/openFilesState.ts Outdated

Comment thread src/panels/ExplorerPanel.tsx Outdated

cguedes added 4 commits June 1, 2023 14:00

Fix PR comments

47afb5f

Fix typo

2e42e89

Fix typescript error and add script to check typescript (package.json…

617d3cb

… and pre-push)

Revert ts:check changes

db1c051

Will open a new PR

cguedes marked this pull request as ready for review June 1, 2023 13:38

sehyod previously approved these changes Jun 1, 2023

View reviewed changes

cguedes requested a review from danvk June 1, 2023 13:46

danvk reviewed Jun 1, 2023

View reviewed changes

cguedes referenced this pull request Jun 2, 2023

Example of usePromise approach

35aab1b

Fix PR comments

df178ea

cguedes dismissed sehyod’s stale review via df178ea June 2, 2023 12:46

cguedes mentioned this pull request Jun 2, 2023

Create an internal FileEntry type #75

Closed

cguedes requested a review from sehyod June 2, 2023 13:31

Fix overflow scrolls behavior

4297372

sehyod previously approved these changes Jun 2, 2023

View reviewed changes

Comment thread src/Components/FileTree.tsx

Comment thread src/filesystem.tsx Outdated

Fix typo

b921f86

cguedes dismissed sehyod’s stale review via b921f86 June 2, 2023 15:03

sehyod approved these changes Jun 2, 2023

View reviewed changes

sergioramos merged commit 5729640 into main Jun 2, 2023

sergioramos deleted the 1-vscode-layout branch June 2, 2023 15:05

cguedes mentioned this pull request Jun 2, 2023

FileTree Component #77

Open

sergioramos pushed a commit that referenced this pull request Jun 2, 2023

feat: IDE layout (#62)

51e96d8

closes #1 #44

Uh oh!

Conversation

cguedes commented May 30, 2023 • edited by danvk Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation details

IDE Panels

Uh oh!

hammer commented May 31, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cguedes commented Jun 1, 2023

Uh oh!

cguedes commented Jun 1, 2023

Uh oh!

danvk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danvk Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

cguedes Jun 2, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danvk commented Jun 1, 2023

Uh oh!

danvk commented Jun 1, 2023

Uh oh!

hammer commented Jun 2, 2023

Uh oh!

cguedes commented Jun 2, 2023

Uh oh!

cguedes commented Jun 2, 2023

Uh oh!

cguedes commented Jun 2, 2023

Uh oh!

cguedes commented Jun 2, 2023

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cguedes commented May 30, 2023 •

edited by danvk

Loading