Ids & classes to make it easier to customize Memos with CSS and Javascript

[samglover]

Describe the solution you'd like

It would be great if the div for each memo/note contained a unique id and classes to make it easier to target them.

Right now this is how the div container for a note renders:

<div class="group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700">
  [note]
</div>

I'd like it if the note included a unique id and classes like "memo" and "tagged-warning" for easier targeting. It would be great if the div looked something like this:

<div id="memo-123456" class="memo tagged-personal tagged-warning tagged-web-dev …">
  <div class="memo-header"><div>
  <div class="memo-body"></div>
</div>

Then it would be easy to customize notes with CSS and Javascript like these:

.memo {
  background: lightgray;
}

.tagged-warning {
  border-left: 5px solid red;
}

let memo123456 = document.getElementById('memo-123456');

let memos = document.querySelectorAll('.memo');
let warnings = document.querySelectorAll('.tagged-warning');

Type of feature

Other

Additional context

No response

[samglover]

In fact I couldn't come up with a reliable selector for the memo body. This works on the front page:

main > section > div > :first-child > div > :last-child > div > div > :last-child {
  background-color: red;
}

But it's a pretty ridiculous selector. It also doesn't work on the profile page and grabs random elements in the settings page.

[samglover]

I'd be happy to submit a pull request, but please see #4485 for a bug that's preventing me from working on the code.