impr: add monkey caret style

also moves caret images to a folder

Author: Miodec

frontend/src/styles/caret.scss

@@ -38,7 +38,7 @@
 
   &.carrot {
     background-color: transparent;
-    background-image: url("/images/carrot.png");
+    background-image: url("/images/caret/carrot.png");
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
@@ -47,7 +47,16 @@
 
   &.banana {
     background-color: transparent;
-    background-image: url("/images/banana.png");
+    background-image: url("/images/caret/banana.png");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 1em;
+  }
+
+  &.monkey {
+    background-color: transparent;
+    background-image: url("/images/caret/monkey.png");
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;

frontend/src/ts/commandline/commandline-metadata.ts

@@ -457,7 +457,7 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
   caretStyle: {
     subgroup: {
       options: "fromSchema",
-      isVisible: (value) => !["banana", "carrot"].includes(value),
+      isVisible: (value) => !["banana", "carrot", "monkey"].includes(value),
     },
   },
   paceCaret: {
@@ -489,7 +489,7 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
   paceCaretStyle: {
     subgroup: {
       options: "fromSchema",
-      isVisible: (value) => !["banana", "carrot"].includes(value),
+      isVisible: (value) => !["banana", "carrot", "monkey"].includes(value),
     },
   },
 

frontend/src/ts/utils/caret.ts

@@ -55,7 +55,16 @@ export class Caret {
     this.style = style;
     this.element.style.width = "";
     this.element.classList.remove(
-      ...["off", "default", "underline", "outline", "block", "carrot", "banana"]
+      ...[
+        "off",
+        "default",
+        "underline",
+        "outline",
+        "block",
+        "carrot",
+        "banana",
+        "monkey",
+      ]
     );
     this.element.classList.add(style);
   }

frontend/static/images/banana.png frontend/static/images/caret/banana.pngfrontend/static/images/banana.png renamed to frontend/static/images/caret/banana.png

@@ -44,6 +44,7 @@ export const CaretStyleSchema = z.enum([
   "underline",
   "carrot",
   "banana",
+  "monkey",
 ]);
 export type CaretStyle = z.infer<typeof CaretStyleSchema>;