Adding devtools to make it easier to create snippets

[Mathys-Gasnier]

A first sketch of what devtools could look like, i'm not too good with css so it's ugly...
Feel free to contribute to this PR !

ATM the devtools is a form accessible only when in dev mode in vite.
They can be openned with a button that replaces the "Add your snippet" button in the header.
Openning them reveals a modal, with a form, taking infos about the snippet, and instantly generating JSON to match your input.

[netlify]

✅ Deploy Preview for quicksnip ready!

Name	Link
🔨 Latest commit	e407ce7
🔍 Latest deploy log	https://app.netlify.com/sites/quicksnip/deploys/6773e8f23199830008070161
😎 Deploy Preview	https://deploy-preview-39--quicksnip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[GreenMan36]

Maybe instead of only checking the env, you could also check the url for dev=true.

[Mathys-Gasnier]

The idea of the check is to exclude the component from being build in production mode, but yeah we could just make it an url param... We didn't really discuss much on how it should be handled

[GreenMan36]

If it's not in the main bundle and dynamically loaded, it shouldn't matter. And it adds some flexibility as there wouldn't be a need to run locally. I could be at someone's house, login to GH and make a pr, given I follow the guides.

[Mathys-Gasnier]

Yeah you're right, let me try something else for accessing the tool

[saminjay]

It doesn't seem right that a tool for one of the more defining feature of this product, adding your own snippet, is in the footer of the page.
Wouldn't it be better to add a button somewhere in the SnippetsList component, or somewhere close to the snippets.
And I think instead of showing the json in the bottom of the model, we can just provide a copy to json button.
And also there should be syntax highlighting in the code editor text area.

[technoph1le]

It doesn't seem right that a tool for one of the more defining feature of this product, adding your own snippet, is in the footer of the page. Wouldn't it be better to add a button somewhere in the SnippetsList component, or somewhere close to the snippets. And I think instead of showing the json in the bottom of the model, we can just provide a copy to json button. And also there should be syntax highlighting in the code editor text area.

Either we can put a single button in the top right corner in navbar or we could create a huge button before each SnippetList, in which they will not have to enter category and language. I think, first option might be easier to handle and more intuitive.

[Mathys-Gasnier]

It doesn't seem right that a tool for one of the more defining feature of this product, adding your own snippet, is in the footer of the page. Wouldn't it be better to add a button somewhere in the SnippetsList component, or somewhere close to the snippets. And I think instead of showing the json in the bottom of the model, we can just provide a copy to json button. And also there should be syntax highlighting in the code editor text area.

Either we acn put a single button in the top right corner in navbar or we could create a huge button before each SnippetList, in which they will not have to enter category and language. I think, first option might be easier to handle and more intuitive.

Note that the user doesn't enter the language or category, the tool only generates the json for a single snippet, it's up to the user to then copy paste it, and create a PR adding it

[technoph1le]

Note that the user doesn't enter the language or category, the tool only generates the json for a single snippet, it's up to the user to then copy paste it, and create a PR adding it

I see. 👍

[technoph1le]

They can be openned with a button that replaces the "Add your snippet" button in the header.

I like this idea, too. In DEV mode, link button wouldn't be necessary. So, replacing it with "Open DevTools" button is a great idea.

[psychlone77]

I made some changes in my fork to the Devtools UI, and used the CodePreview component already available to display the generated snippet, which give the copy to clipboard button as well. I set the styling as plaintext to stop any syntax highlighting, but it could be changed to 'json' as well.

[Mathys-Gasnier]

I really like what you did, Thanks

[psychlone77]

They can be openned with a button that replaces the "Add your snippet" button in the header.

I like this idea, too. In DEV mode, link button wouldn't be necessary. So, replacing it with "Open DevTools" button is a great idea.

Shall I move forward with feature?

[Mathys-Gasnier]

I think it's a good idea, you can do it

[psychlone77]

Added the 'Open Snippets Devtools' button in the top right corner but kept the Footer the same. Changed the Devtools modal to a more horizontal layout, to make more use of screen space as most people will be working from PCs. Also, it's more convenient when code snippets are large. I have still kept it responsive for small screen sizes where it will default back to the original column layout.

Some more suggested features

• Disable modal close when clicking outside, as I ran into many scenarios where the modal accidentally closed losing the typed inputs. This would mean adding the 'X' or 'Close' button in the corner
• Persisting inputs in localStorage, so even after Devtools is closed, when re-opened the user can get the previous values back. Useful if the user midway wants to check out some added snippets for reference, which I also ran into. (If this is implemented the previous feature won't be neccessary)

[technoph1le]

Thanks for all the contributions.

I will review it later today or tomorrow morning. If you have additional suggestions or feedback, write here.