feat: Add editor width setting

[tuur29]

Hi there, as mentioned on my discussions page, I've added a "editor width" setting. Feel free to review/merge if you feel this is something that fits in your idea of the editor 😄

Currently there are only 2 sizes with the ability to toggle between them on a page by page basis, with a default setting.

Screenshots

[QingWei-Li]

Good job!
My idea is that each page can be set to a specific width, just like Notion. I also like the current method, but if the width can be set separately, more users may accept it. What do you thinks?

[tuur29]

Thanks! Sorry for the late answer. I immediately wanted to get started on my ideas, but life got in the way.
I agree that a per-page setting could be useful and it's something that I can do. However, I'd like your input first: do you have an idea how/where to put this setting?

Initially I was thinking about adding it in the SidebarMenu, but adding a dropdown there would not look nice.
Maybe I could add a horizontal list of dots/icons or a slider there instead? In any case, this will increase the complexity of the SidebarMenu component.

An alternative idea is to only support 2 sizes: small (current) and big, with a simple list item called "Toggle editor width", then I would remove the other 2 options from the settings page as well.

EDIT: just another thought I had: What if the user wants to remove the page specific config? Do we then also need to foresee a way to reset the page specific setting like a second menu item "Reset editor width", or a button in the settings that will reset everything at once?

[QingWei-Li]

The settings of each note can be put in meta
https://github.com/QingWei-Li/notea/blob/main/libs/shared/meta.ts

We only need to support two widths in the top menu, the default and the larger width. https://github.com/QingWei-Li/notea/blob/main/components/note-nav.tsx#L138

If necessary in the future, we can add more width options and reset the width option.

[tuur29]

Seems like typescript didn't catch this because of the async import. Didn't notice any side effects when adding this.