jeffalo / noted

A very rough and experimental notes app

Hi there 👋

I'm Jeffalo, I got into coding through Scratch, and my life has changed since.

• 👨‍💻 website: jeffalo.net
• 🎉 favorite projects: kahoot-gui, noted, notifier, is.wasteof.money
• ⚡ fun fact: i use discord light mode! 😎

noted's Issues

prevent harmful stuff

this one is important because right now, you could probably input some harmful characters into the title of a new note and it'd do some wacky stuff and thats no good.

another thing to consider is that duplicate file names wil mess things up, so perhaps a warning or maybe in the future, files should be stored with a UUID, to allow duplicate names (but lets be honest why dould you want duplicate named items)

Context menu should be dark in dark theme

The white context menu looks a bit strange in dark theme.

more flexbox

it needs more flexbox according to:

https://www.internetingishard.com/html-and-css/flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

so hopefully this issue will remind me to do this later

fix self xss

ok so picture this....

you are go get coffee and someone modifies your localstorage in noted to have xss code in the content of a file.

thats a no good

this isn't a big deal because there are worse things to do with someones computer but whatever

basically only allow <b>, <i>, <u> with no attributes and xss solved

adding a note

this one is important because i feel like people will want to actually add notes.

this will require:
a button that runs createFile() and a prompt design that looks good

file ordering

right now, files seem like they are in a really weird order, (eg new files are at the end of the list)

im not sure yet, but perhaps most recently edited files should be at the top of the lit

Style the choose file button

No offense but it looks sorta bad lol:

Maybe add this to it:

.file-button {
	background-color: blue;
	/*Or whatever the color you want is lol */
	padding: 6px;
	border-radius: 5px;
	color: white;
	transition: 0.4s color, 0.4s background-color, 0.4s box-shadow;
	border: 1px solid blue;
}

.file-button:hover {
	border: 1px solid blue;
	background-color: white;
	color: #101010;
	box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .2);
}

.file-button:active {
	transform: translate(0, 2px);
}

.file-button:focus {
	outline: none;
}

theming

this one should be easy and i'll probably do it after i take a shower

change themes

simple as that

dark and light, basically copy discord

editing note weird behavior

with my current system, editing a note is kinda wack because you edit it, then you can go to another note, and if you click back it goes back to how it was earlier.

although if you reload, it goes to your edited version

this is because how loadFile(item) works and can be fixed by loading it from localstorage (i think)

remove a note

removing notes is important because i say so

this will need to:
remove the note from localstorage and also remove it from the dictionary fileList

Wrong URL

The url is incorrect. It says jeffalobob.github.io/noted, when it should be jeffalo.github.io/noted/. Ok @jeffalo?

you should move this to .jeffalo.net

wouldn't it fit in?

default screen

ok so this one requires some thinking.

when loading into the web app, i was thinking, instead of displaying the boring notes/text editor screen, it maybe could display a screen for making a new note? this would tie into issue #1 adding a note.

rename a note

this one will be tricky (or simple) because of how notes are stored

i'd imagine, you'd need to make a new localstorage item with the same value but new key, then remove old key, and fix the filename in fileList

Flex box the sidenav

Currently, the sidenav is not flexbox, which makes it a pain to work with.

perhaps i can make it into a flex box or something? im not really good with css so someone please help

this will also help with mobile layout

load note from url

should be as simple as changing the upload button to ask file or url and if url do a get request and make a new note using that as the response

selecting a file when there are many files

i have commited a new update to the css, html and js (mostly css) by @easrng , when a file is selected the sidenav gets remade and the scroll goes back to the top of the list and its kinda jarring.

i noticed this wasn't the case in @easrng's fork but i dont know how they did it

long file name

if a file has a really long file name, it doesn't make a new line and it makes the navbar like 1 px wide.

idk how flexbox works and i think this needs help

confusing design

right now, we have a download button with the icon of a save button, this gets people thinking that there is no autosave.

i have two solutions to fix this,

#1 replace save icon with download

#2 (the better one) remove the save button from the actions and add a custom context menu for when someone right clicks on a file. this would have another way to acess the rename and delete buttons and also have a download button.

^ i'm not sure how to make a custom context menu, but im sure i can find it on google

add some kind of default file list

if there is no file list, there will be an error of fileList is not iterable which is not good because you can't actually use the thing. also adding a file gives you oldFileList is not iterable which is also bad.

this could be solved by including a default file list and file if nothing is found.

this one should probably be fixed quick because it stops a normal human from using my amazing perfect notes app

settings menu

add a settings icon to the toolbox which opens a swal2 modal

some settings can be theme (system, light, dark) (currently noted uses system)

perhaps rich text support(????!!!) i had this earlier but i removed it because it was too easy to just copy and paste entire websites in and mess up the UI

Outline removed, impairing accessibility.

On the toolbar buttons, the outline is removed for better appearance, but that makes it hard to tell what is focused for keyboard only users. I added a glow in my fork, the pr fixes it.

when file is renamed a toast saying it was deleted shows up

easy fix, i can do it, i just need to pass a parameter when deleting a file

just a reminder to fix this