### Description
refactored backend files to enhance type safety and reliability using
Zod validation and Redis instead of JSON.parse , I tried to avoid the
files that isn't necessary tho so I hope I don't miss any or included
unnecessary ones!! didn't fully test only verified code compilation and
partial tests without Redis!!.
Should Close#5881
Related to #6207
---------
Co-authored-by: Miodec <jack@monkeytype.com>
### Description
Add OPY layout
https://github.com/voidyourwarranty2/opy-layout
> OPY is a keyboard layout in the tradition of NEO2, AdNW and KOY
> for a split ortholinear keyboard with shift and space on thumb keys,
> optimized for mixed English and German usage [..]
I tweaked the rows so that it looks good in the matrix and split matrix
keyboard styles. The author did not define a row1 so I took the freedom
to include one which resembles row1 from the qwertz layout.
### Checks
- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [ ] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.
---------
Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>
Co-authored-by: Miodec <jack@monkeytype.com>
### Description
Just added a new theme (I tried my best to not make this similar to any
themes, but if it is similar to one, please tell me!)
#### Screenshots




### Checks
- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [x] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [x] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.
<!-- label(optional scope): pull request title (@your_github_username)
-->
<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->
### Description
Add xhosa_3k
### Checks
- [x] Adding a language or a theme?
- [x] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.
---------
Co-authored-by: Miodec <jack@monkeytype.com>
### Description
Added layout mirror item in the funbox with functionality.
Tweaked how active funbox items are detected in the commandline (names
included in other names no long appear as active if the item they're
included in is active).
### Checks
- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [ ] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [X] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [X] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [X] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.
<!-- label(optional scope): pull request title (@your_github_username)
-->
<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->
Closes#5573
<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->
<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
---------
Co-authored-by: jeffrey <jeffrey.tiger@telecom-paris.fr>
Co-authored-by: Miodec <jack@monkeytype.com>
### Description
Adds Vesper theme. Based on Vesper for VSCode theme from [Rauno
Freiberg](https://github.com/raunofreiberg/vesper)
<!-- Please describe the change(s) made in your PR -->
### Checks
- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [x] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [x] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.
<!-- label(optional scope): pull request title (@your_github_username)
-->
<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->
## Preview
### Main Page:

### Settings Page:

### Toasts:
#### Error Toast:

#### Info Toast:

#### Success Toast:

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->
<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
### Description
Add five Urdu Quotes
### Checks
- [x] Adding quotes?
- [x] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.
---------
Co-authored-by: Miodec <jack@monkeytype.com>
When changing the layoutfluid settings via cmdline the settings page did
not update.
This also happens on prod so it is not directly related to the change
#6445

***format:***
*file-name: line number on pr: `function name`*
*- message*
1. test-ui.ts: 448: `updateWordsInputPosition` & ui.ts: 109:
`debouncedEvent`
- calculate #wordsInput left position in tape mode same way when
tapeMode is off (because tape mode can have zen mode and will accept RTL
later. Also, now tape mode can have 3 lines, and #wordsInput needs to go
down to the 2nd line).
- call updateWordsInputPosition() on window resize which solves #6093 in
a simpler way than a2f6c1f.
2. test-ui.ts: 551: `updateWordsWrapperHeight`
- on zen mode make wrapper height 2 lines, and move conditions around.
- on tape mode make wrapper height min(#words.Height, .word.Height * 3)
because #words now have some padding to prevent hints from being cut off
in 1-line tap mode.
3. test-ui.ts: 285: `updateActiveElement`
- don't call scrollTape() on initial call of updateActiveElement()
because it'll be called by other functions (i.e, showWords() and
updateActiveWordLetters()).
4. test-ui.ts: 796: `updateActiveWordLetters`
- move activeWord definition to the top of the function to return if
it's not defined, and use type argument instead of "as".
5. test-ui.ts: 356: `getWordHTML` & test-ui.ts: 945:
`updateActiveWordLetters`
- add .beforeNewline and .afterNewline elements with each added .newline
element.
- the point of .afterNewline is to indent the next line, and the point
of .beforeNewline is to act as a filler for the top line when the words
of that line get removed in scrollTape() because they were overflown
horizontally.
6. test.scss: 176+188+279: `#words`+`#words.tape`
- change #words display from flex to block and make .word, .afterNewline
and .beforeNewline elements display: inline-block (but keep .newline as
block) in order to use white-space: nowrap, but still be able to break
on demand with block elements .newline.
- also, make default .word margin-bottom in tape mode 0.25em just like
in non-tape mode, since they are now practically similar.
- make the height of .beforeNewline identical to the height of .word so
that when all top-line-words are removed, the user won't feel a vertical
shift in lines.
- use vertical-align: top in .word and .beforeNewline, because in
lineJump(), we rely on their offsetTop to be the same if they are on the
same line.
- add padding-bottom: 0.5em to #words to prevent hints from being
cut-off in the last line of test when showAllLines= on and in 1-line
tape mode.
7. input-controller: 169: `backspaceToPrevious`
- remove .beforeNewline and .afterNewline elements with .newline
elements when backspacing to a higher line in zen mode.
8. test-ui.ts: 590: `updateWordsMargin`
- when tape mode is turned on, first adjust the margins and then remove
overflown elements (this is what passing true to scrollTape() does), and
when it's turned off unset the margins of both #words and .afterNewline.
9. test-ui.ts: 1168: `removeElementsBeforeWord`
- add a new helper function that removes all elements (except
.smoothScroller), before (and including) the input element and returns
the removed .word elements (removes
.newline/.afterNewline/.beforeNewline/.word elements, but returns number
of removed .words only)
10. test-ui.ts: 1191: `lineJump`
- some refactoring: save HTMLelements in const instead of repeatedly
querying the DOM.
- allow lineJump() to be called in force (even when currentTestLine ===
0), which is useful when changing Config.showAllLines to off
(currentTestLine stays at zero in showAllLines=on), in order to lineJump
and keep the active word on the 2nd line.
- make the conditions to run lineJump() similar in tapeMode on and off
(currentTestLine > 0, hideBound = currentTop - 10).
- when determining the elements to hide, save the index of the last
element to hide in a const and then remove it and everything before it
when the animation completes. It is done like this instead of saving
what needs to be hidden in an array, because .afterNewline elements have
offsetTops that cannot be relied upon to determine if they need to be
hidden or not. The new function removeElementsBeforeWord() does that.
- last element to hide is now the last .word or .newline that is higher
than the hideBound.
- #words margin-top animation is done in its own queue so that we only
.stop() margin-top animation without affecting margin-left animation.
11. test-logic.ts: 1434: `ConfigEvent.subscribe`
- remove the restriction to allow changing showAllLines without
restarting the test.
12. test-ui.ts: 492: `centerActiveLine` & ui.ts: 107: `debouncedEvent`
- add a function centerActiveLine() that finds the top of the previous
line and calls lineJump() passing that top to it. If the active word is
on the 1st line it does nothing.
- this is useful on window resize because it used to call lineJump()
passing the top of the previous word to it, causing unnecessary line
jumping if the active word was in the middle of the 2nd line (see gif
below).
- this is also useful when turning ShowAllLines off to hide (remove) all
lines higher than the previous line.

13. test-ui.ts: 190: `ConfigEvent.subscribe()`
- call updateWordsWrapperHeight() on showAllLines change, and if the
change was to 'off' call centerActiveLine() in order to keep the active
word in the middle line.
14. test-ui.ts: 954: `getNlCharWidth`
- add a new helper function that calculates the width of the nlChar
letter that is in the last .word element before the input element, and
check if the nlChar placeholder was incorrectly typed, if so return a
width of 0. This last check is to minimize next line shifting behavior,
see
[video](https://discord.com/channels/713194177403420752/713196019206324306/1283880903382274119)
15. test-ui.ts: 978: `scrollTape`
- remove leading .afterNewline elements.
- get last element to loop over which is the 2nd .afterNewline after
active word, or else the 1st one after active, or else stop at the
active word.
- in the main loop sum the widths of words before new line then add it
to the left margin of the next .afterNewline, while also determining the
widths of words before the active word (which will be in the new
margin-left of #words), and determine what words have overflown the
wrapper and need to be hidden.
- if there is anything to remove, remove the overflown elements, and
adjust margin-left of #words and .afterNewline by the width of what was
removed.
- calculate the width of the current word in tape=letter just like
before then animate the new #words margin-left and .afterNewline
elements' margin-left.
- #words margin-left animation is done in its own queue so that when we
use .stop() before the animation we'll only be stopping the margin-left
animation and not the margin-top animation which is performed in
lineJump().
16. test-ui.ts: 492: `centerActiveLine`
- scrollTape now awaits the promise centeringActiveLine which is always
resolved except if showAllLines was on and tape mode was turned on
through the commandline mid-test. In that case centeringActiveLine won't
be resolved until lineJump completes its animation/style-change, so that
scrollTape removing words won't conflict with lineJump removing words.
Closes#3907
---------
Co-authored-by: Miodec <jack@monkeytype.com>