From cfcaeff8ed6a068bb94fc1ede8c35e0bdad8d13f Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Tue, 30 Dec 2025 18:11:30 +0100
Subject: [PATCH] feat(settings): implement NumberInput component

---
 app/assets/app.css                            |   7 +
 app/assets/fonts/nds-39px.ttf                 | Bin 0 -> 3964 bytes
 .../Settings/BottomScreen/NumberInput.vue     | 190 ++++++++++++++++++
 .../number-input-down-disabled.png            | Bin 0 -> 6513 bytes
 .../number-input-down-xl-disabled.png         | Bin 0 -> 12669 bytes
 .../bottom-screen/number-input-down-xl.png    | Bin 0 -> 12669 bytes
 .../bottom-screen/number-input-down.png       | Bin 0 -> 6513 bytes
 .../number-input-up-disabled.png              | Bin 0 -> 6513 bytes
 .../number-input-up-xl-disabled.png           | Bin 0 -> 12669 bytes
 .../bottom-screen/number-input-up-xl.png      | Bin 0 -> 12669 bytes
 .../bottom-screen/number-input-up.png         | Bin 0 -> 6513 bytes
 11 files changed, 197 insertions(+)
 create mode 100644 app/assets/fonts/nds-39px.ttf
 create mode 100644 app/components/Settings/BottomScreen/NumberInput.vue
 create mode 100644 public/images/settings/bottom-screen/number-input-down-disabled.png
 create mode 100644 public/images/settings/bottom-screen/number-input-down-xl-disabled.png
 create mode 100644 public/images/settings/bottom-screen/number-input-down-xl.png
 create mode 100644 public/images/settings/bottom-screen/number-input-down.png
 create mode 100644 public/images/settings/bottom-screen/number-input-up-disabled.png
 create mode 100644 public/images/settings/bottom-screen/number-input-up-xl-disabled.png
 create mode 100644 public/images/settings/bottom-screen/number-input-up-xl.png
 create mode 100644 public/images/settings/bottom-screen/number-input-up.png

diff --git a/app/assets/app.css b/app/assets/app.css
index 70849ff..a491744 100644
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -12,6 +12,13 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "NDS39";
+  src: url("/assets/fonts/nds-39px.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 /* NOTE: woff2 version of this font doesn't work */
 @font-face {
   font-family: "Pokemon DP Pro";
diff --git a/app/assets/fonts/nds-39px.ttf b/app/assets/fonts/nds-39px.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..e345c837605f5474131f13c8379cc4681ff8a924
GIT binary patch
literal 3964
zcmeHKOKenC82;~TrY|0$K#-K=5Ya-go$2uC6l?+lBPCd4OBxbQ;CAMAW@u;bF!z?3
zvO$+dVjvphYvDp;!b-ye0<KgN7e*3@3s*!F4I85|k`QP+e*d}W&P+>*5SMZ$XU=#2
z^FP1;%%PA*MD6rC85G|?I`krTkgV{rw!AzVOH6)!><x&L*dI?9>=Iqny0HHa`**Wb
zGZSaOOm8RB&tcBy96J;5*~q$IVeZU9uzYjmW8l9rH{}X`b(^obuzw%>_>`NriB@G`
z`x^G!3wE_ct7r|**I_S;cERa-=JK0F)>)#~YbDq7={ijyzaxCkneu#P?BbbYE1tiD
zlp!Gcb>_r|<~7nS<t?O33uzN*MqY*9_DHvqvr#ZQq@;s7$&vy+JgBd_c}P2lQ`00<
z3WF7RLi>OPfwZn)2dU8`BeVzE4+J>`-wQGjM4Xwv3|@wLYHqNG`v+IJ=Nt{p)%a#+
zjv$3SSR+_9oFZbahP|M8tycTFc4I+I96T`ot9{@whlS@SnBRi@m6+(ahI^siM%sLT
zj$?j-IUDdTJEjA-;BKyf-lAdsGS@eksQs@0Fqg2tA)4z0zJ4!VyNYtV5hr0>nN3lr
zan-nT_pRu3fQjxVnC-imk}WdVV{cHj5kbF2G>`1&uYu$Bkh|7KqI<XI&nruf@2`GA
z+68&>ecsJ3>%KMKN#E@a&s+k_Il>%#vUgs2kKH9`{)AZ~x_=PyQN{du96XY*W}h(O
zjM!JW!l$gc;j0y=^$}Wg722nmvKj+fn3suWk(n_hJv8hexvnq=_B4MksOvtwE#QBV
zH_oTI2O&$E%T>*H2fb+W*2oLL)}XAgCT1CT0+E?nu)x2NM&BP2nOSJgAdGAr3^KSs
zRPVKX8Pq*`h&R4V&H0#@LNCqi$PUHz6z3<$<`CcxtfX+K({f6x69e*4-y}g}N^a3w
zI;C&~`glF%h(hB-g<I%3`cvUnYU5X3jy5`^J*#j#onqGH=%AwZo5IWJ1)X1D9-TCz
zzZXEXVV!=v{;I47)v`1AZZTFXtW(tJQrLj}X@yN%X>3*4qIP4q!V&1F6pqqX<0XY#
zXsuCIxRos9ZH3!tlktwi?X=stq;LoI8-FRhj5eBE6z-%g=Ai&1*$&g=*VDxBgEpII
z6bAq1=L&;={8j@U@NZsI82p<*Dh&S3I|_q;t6gF6Z#|_j__thz!N2v9!r<TfOkwbE
z{h=`Uk2ng0|Hw^+!GCm3fSLbjmiCcLC7Pi!<tdAo*CzqwP=(?&0Gz;@pdB<!`)L&W
zZIG6zN+Zz8(lkwx4co=1i}zxY{ur#w<ROwvMR@I_Uc?Ek!U!pO<|C>P-Dygz+&t*p
zm@Ks^15X8+!z5%b{=FBt<?MB#WiRYqXmW)<D)49*#qgO>x}NkGL<x24JczEv6^adr
zQ$bwLW*ph&!31+x0rC-L=`7kFEB?~i1)O=v-Get55o73368y#SJpe9as6K<!o_e<)
zr|PAny0TvjWA3DW`AH&vtm)P)#lHZ9+?5`A;|k~m-+(l%Y%nM2Fi;w@BJy_7!93n1
zM{>*eQqW0oY(rxbCq*eajq?&1;JeFRI064b4+@Y4-Kk0s4%pa>&jA_&8iRMAj)J#A
z8r<iWX3F_&&KG&75+4wWcw)!!{!y`Qpi~`kveQ#`IoyV;Q1UUS?B(5}=<AK+hz(M1
z(I558(`k6~gf0BCopB0wc~ZC&qH)-pb_+S*FL}FSu?d)X(uAclhZ|v_o1$WSVthJ3
z<%>$*&o#MN+Pujd67ynS&aK1}$#^_D&=)IaydF;SUrpU|Xt}e$zdxCX$*dabi($9e
zv(GIQoN_vEPl?0%v{Uq)RQ{AB#`9Tma@tN$=8IWz+9~B`%APpkqJY8-s;P=`C$o3&
rfuYP;%0F5e9DMTpJb8Z9(;hy$|EuSR{}hscV`BZD|F62_&{+BpWqE@5

literal 0
HcmV?d00001

diff --git a/app/components/Settings/BottomScreen/NumberInput.vue b/app/components/Settings/BottomScreen/NumberInput.vue
new file mode 100644
index 0000000..22e4eee
--- /dev/null
+++ b/app/components/Settings/BottomScreen/NumberInput.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+const APP_COLOR_TO_FONT_COLOR: Record<string, string> = {
+  "#61829a": "#fbfbfb", // cyan
+  "#ba4900": "#fbe3d3", // maroon
+  "#fb0018": "#fbcbd3", // red
+  "#fb8afb": "#fbebfb", // pink
+  "#fb9200": "#fbf3e3", // orange
+  "#f3e300": "#fbfbdb", // yellow
+  "#aafb00": "#fbfbfb", // lime
+  "#00fb00": "#fbfbfb", // green
+  "#00a238": "#fbfbfb", // dark green
+  "#49db8a": "#ebfbf3", // duck
+  "#30baf3": "#fbfbfb", // light blue
+  "#0059f3": "#dbebfb", // blue
+  "#000092": "#ebebfb", // dark blue
+  "#8a00d3": "#f3dbfb", // purple
+  "#d300eb": "#fbfbfb", // magenta
+  "#fb0092": "#ebe3f3", // fuschia
+};
+
+const value = defineModel<number>({ required: true });
+
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    title: string;
+    digits?: 2 | 4;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    selected?: boolean;
+  }>(),
+  {
+    digits: 2,
+    min: 0,
+    max: 99,
+    disabled: false,
+    selected: false,
+  },
+);
+
+const emit = defineEmits<{
+  select: [];
+}>();
+
+const app = useAppStore();
+const { assets } = useAssets();
+const { onRender, onClick } = useScreen();
+
+const Y = 30;
+const SQUARE_HEIGHT = 49;
+const ARROW_IMAGE_HEIGHT = assets.settings.bottomScreen.numberInputUp.height;
+
+const upImage = computed(() => {
+  if (props.digits === 2) {
+    return props.disabled
+      ? assets.settings.bottomScreen.numberInputUpDisabled
+      : assets.settings.bottomScreen.numberInputUp;
+  } else {
+    return props.disabled
+      ? assets.settings.bottomScreen.numberInputUpXlDisabled
+      : assets.settings.bottomScreen.numberInputUpXl;
+  }
+});
+
+const downImage = computed(() => {
+  if (props.digits === 2) {
+    return props.disabled
+      ? assets.settings.bottomScreen.numberInputDownDisabled
+      : assets.settings.bottomScreen.numberInputDown;
+  } else {
+    return props.disabled
+      ? assets.settings.bottomScreen.numberInputDownXlDisabled
+      : assets.settings.bottomScreen.numberInputDownXl;
+  }
+});
+
+const squareWidth = computed(() => upImage.value.width);
+
+const increase = () => {
+  const newValue = value.value + 1;
+  value.value = newValue > props.max ? props.min : newValue;
+};
+
+const decrease = () => {
+  const newValue = value.value - 1;
+  value.value = newValue < props.min ? props.max : newValue;
+};
+
+onRender((ctx) => {
+  // arrow up
+  ctx.drawImage(upImage.value, props.x, Y);
+
+  // outline
+  ctx.fillStyle = "#515151";
+  ctx.fillRect(
+    props.x,
+    Y + ARROW_IMAGE_HEIGHT,
+    squareWidth.value,
+    SQUARE_HEIGHT,
+  );
+
+  // background
+  ctx.fillStyle = props.selected ? app.color.hex : "#797979";
+  ctx.fillRect(
+    props.x + 1,
+    Y + ARROW_IMAGE_HEIGHT + 1,
+    squareWidth.value - 2,
+    SQUARE_HEIGHT - 2,
+  );
+
+  // value
+  ctx.font = "39px NDS39";
+  ctx.letterSpacing = "2px";
+  ctx.textBaseline = "top";
+  ctx.fillStyle = props.selected
+    ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
+    : "#fbfbfb";
+  ctx.fillText(
+    value.value.toString().padStart(props.digits, "0"),
+    props.x + 3,
+    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2) + 1,
+  );
+
+  // arrow down
+  ctx.drawImage(
+    downImage.value,
+    props.x,
+    Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT,
+  );
+
+  // title
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.letterSpacing = "0px";
+  fillTextCentered(
+    ctx,
+    props.title,
+    props.x + 1,
+    // TODO: -10 is needed because fillTextCentered isn't using top baseline
+    //       i will change that in the future (maybe)
+    Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT - 6,
+    downImage.value.width,
+  );
+});
+
+useKeyDown((key) => {
+  if (!props.selected || props.disabled) return;
+  switch (key) {
+    case "NDS_UP":
+      increase();
+      break;
+    case "NDS_DOWN":
+      decrease();
+      break;
+  }
+});
+
+onClick((x, y) => {
+  if (props.disabled) return;
+  if (
+    rectContains([props.x, Y, upImage.value.width, ARROW_IMAGE_HEIGHT], [x, y])
+  ) {
+    increase();
+    emit("select");
+  } else if (
+    rectContains(
+      [props.x, Y + ARROW_IMAGE_HEIGHT, SQUARE_HEIGHT + 2, SQUARE_HEIGHT + 2],
+      [x, y],
+    )
+  ) {
+    emit("select");
+  } else if (
+    rectContains(
+      [
+        props.x,
+        Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT + 2,
+        downImage.value.width,
+        ARROW_IMAGE_HEIGHT,
+      ],
+      [x, y],
+    )
+  ) {
+    decrease();
+    emit("select");
+  }
+});
+
+defineOptions({ render: () => null });
+</script>
diff --git a/public/images/settings/bottom-screen/number-input-down-disabled.png b/public/images/settings/bottom-screen/number-input-down-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..5986b6427d5cfa017f1c6753c51923793a4a477a
GIT binary patch
literal 6513
zcmdT|O-NKx6h2R;OiP+sB`qS50wJQd5y+ULvrtMx8dpYO=t{DNoJ|rXWQ(AMhO`JN
z1s6fkDk2vyA_x>*NGk;w{cOf{2=%@z-}Alez3<1~1an~Cne+SIbMLwLzL_Uid%Kz%
zPd183Q=z+~&*c~0&*>wFMVzm>SMOcH8SCq6cfNf&_rMi0xAQ%Dk$2CI?%X^C&s*Jn
zJtF0^A`_29e!HrPA0qcIi2NE9x%5Kh#OTWp*Dkw;hSBcgn8^7Se4P7l+Dfjn{%)bC
zv;OC?Q`s|h&+oMDh%|pLbmXt!XmCC@U-|BgkB|Rx-Heohc3@y&pK*SEUh1IT-rkl{
zsTAPQE91t-h7^lMnVg(d95Tp?>8!1-83&UAj)^kNsT&o>$jFGUx60Gg(|aWWZfIyo
zm4)yAk6({$-aNpmTrLOZf^$PXd_Zb=t*xy}i1S!qU$@VjErGMOwPl=7TYz<*Z2_uy
z8d0o?{Ca13c{wm7GzVsfq{{&WIKdfCAl(@{XKrpTfB+?EVPQeF;jXmz+=oCDde=mW
zd&`t0Oy~7tm{S@ywZYkw{)Akzsi`Ty+WI}rUxAn+XJ==X8aoPP17mXfn+9yHgw6~m
z7<-PbMEmCErW%atp+G8?ipi#Qv@sdMD6g!nSYv5Od^9jHF2_+~?fJM#;`pgb;y51E
zCxa6-pLg%eD$vr>QuU|F+O}yGRP}{60$|5-*T$(N%s+IBxVz(kz{ljT0Q3ahvE0Et
zE_A;*$A=Lh?3~d-Acy%Y0G>U1uwKdV@UU{3nVC_X_OP?bSOI~;0^t*7hfgQ~96%f?
z*MxFv0D2-_-W`VdX?^W5yC>HgH(K&E_K2zjRQ+bN*Orb2H>cOB)w*}m8LBx8?lh3M
z)I1MsjR%TQCDrJ|YbT69Y880!u~xn?N5#dpC(X}sc<n?*Epl%qFk9JdR;`AOFD@<y
zYV7at56D=VIC+?#uMte5=f~|ImXC2>5l}=e`|9c{<BU8iUbpK>Z29##%8U;bL1kR7
z&z!z8`iorD%-f2H8jn{5-pg{ioFw4@_4}K^!t8o{QhefhH#Yk8UrE0(^_9_Aj+fOz
zanV+R8~dP%{Bco(in9B2CHWpWV!2_`;`pNrKMTmy%F8?~)N3ayYK{N5zfP(>G3s<e
aHMLB~pFVDR{i$93>0IdS?ReWh`0y`|5wJ%9

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-down-xl-disabled.png b/public/images/settings/bottom-screen/number-input-down-xl-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..a56efcc6eb45f8668bf1c88cf2715414534e52cf
GIT binary patch
literal 12669
zcmeGiOGs2v^t>3eOkrpfw1|N~5F%!_6~vgLBPb;yjct@bQwRie&>=`7gxs{#kXBMI
zTm)_-a50Oa)d()6g($eOHo6X>-nnuv_Z{z>=X>6n_a4lJ>AZ8#x#xes`Qh<EPg~2)
z7653=^>z)~aMb>#u3QGNW}4bhY{Z%#?CG?A{k-$mMiS%M{w%=8$7?5}P00D8cd#Fz
z*bXrN9^kLtHGc>&lLq)R0&wpWz>TTT-=93N30J3j^V0x#Z{yFJ{ra$AcQ(Jy^>;V_
zZoQRkzy9U$&2w8M<hrs?Up84k(vK?E+}zwho6T2CAouX_@VN)At*yZ&<UT$=cKlMQ
zl)wq9bmSMB_V)JhTQ<a#$s}xUZpuFO!?#b?_V%_T2!%oc78e(VQ1zR%Sfx_QF#rh*
z3k!l?EEb7RLThz(^~?aIq93{@e3+b^)X|LeEiEmbMi)a~tzl}0hK58uh!<U5Utfo<
zt*vT91x<L;*VpIChz#j;S|~%|Zt3NM%H=W$B^@0doMsH)+1WW&Voah&kaciypsf-O
zZ=kLOCD3iOuGo>+t)I&|Gm|*Og{w(7^SBbKBAkhSN)_d3r#4rBI4SW{syNPdDL^7`
zZp#DbQ*p6osvXt7y$V7%w&rV-PN~U0x%Qb9s>%uyRdxJ%zeTDqsto5gHrnvKl>6oP
zlIN>l-Gq_x+&CT_zDaYsn|!Z+Bbgv2bb=sfCMG5XX?b~BK*EoXj%bJxD4Z}Yl#J!Z
z8?jg;#AqhC{Cqwyx=fV~mruAjEE5t}DE5iC8jp4-@I;x-+V`;-HatGZzKm)*nS&gz
z{1$?6!0#Z=Px}CEazuAqh1~dQoFCXIA&eFt^0DDX7#r=-yo4z7#J|74FZeI=kC75O
z&rMx5(uCn8&xivgj3Uc3K?ggc`*oP)>!5JJ)Vav(S;M5^<c!e_kWh*=WrFb7IKVT(
zadOlItVssQuzH+Ig#&II4jB?<82gPZ_72qikv7WZ7X{n!5nC=qalO|>A&^0BpdCg|
zWm-_<0@3lf*y?5{B~K=SIvTM45s-UACX=bZc10uI+^CD+wW&WSthIc<cJ01;wrl_Q
za~b~@0LNA;6~O(WF)RE=vIhKelg2d+-x$JzD=RAw_r}J?95}v%sP-YTnyqw8Cm~!u
zj;%Ic)m1A#vP~v|oC*t~qh5`82v)O|%W`|`Az5KTw9}CUZg`kDuUy^CQ0?=oe77X1
zGQ#?ndjh?IMFrxfg@Gfe3lO(e<x$6?3~Zb~Y@F<sCnf&oObk(h{3OR`2A??;_^8;g
zvjdkv$L(3i6s10|pnB1x<O{b&E=NcRYjX;s7vE{|&mjl~kr4%-(FVC3A<}5|k3i$H
kR{xl5HHsrDW~0%<i@^A7snA;5xQ`a(x(B+xb&kCI59LVmrT_o{

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-down-xl.png b/public/images/settings/bottom-screen/number-input-down-xl.png
new file mode 100644
index 0000000000000000000000000000000000000000..732b960a78c830e81ae692b3bb0f9df02bcdc401
GIT binary patch
literal 12669
zcmeHOPe>F|82=_TH_O;t(jis^@er}zB!XB|bOog(gghyM<xMb`+=IyyLS8x=(xrnQ
zJOo*Ih;9a17X>eN+Jg|)N$4Ue)O>II4Kr_NcILVBnjP2&<2UbpzxVxn-@JdU&u$O*
zw=`dFCZd+?K<|i2C(I|6I7?*AHg=qt6=P<kzsLCc`RWt1((oWNlp%Wa{QSv8BO~t*
zj0_RwJBSvZ68$!t7QPeBrip%z6J38nbZPqK`#U#G#<}T%dox7W+W9dauing=jZKfT
zLw!v@E?h~rH-Gt+956*vwl{P4VWaUOeQU><o16P%!jwt_qsPX^0(V+lTcb0KP9~F%
zr&uhCI;fq`c%iAawUytklFer6=;(+t88cEYMcF4~Z*R{Lgj_C1OG`^aw*4K-jDv#%
zM+at1PEHE`%E}6G7B!BKkIOnRm;G=n!iT}ZK{s9~ZJV2$rRZ|VD-|A^<>h4&4`A8V
zsi`UI>guZ0Rq(_RqN5j@1##SVc6Nj^7QVi|?gcMvcg>SB)V~JKAAVGea$YGb*xK51
z%@S2XUib#Tad1m^7UtD1D=PbvWI(mq<oe~wN{~gIQ7Wm*asnw}Ae3;bdd)<PlZ)q6
zAOpGXH9fdt(WayTom8myxk<&C(_pQ+?=+o*^zr-5g2)Jh2{gC*3F2>?3l_Yv@qY4z
z6Mi5+K8%;0kw>D^BJHQ65<irYfCB6wU@TU`(a})>K^^$8XsAxWC>X2Tc<2*OBoYbK
zL!}!V8==bc5+*jwUd*_(Yu_*F4un`qx3{-->(L^=ySuw|=F%elKMB<`Bf<8=!$Z7k
zqr!n|rOS&N<jIR0+P(1LtI*ibM4_Y*Z}PbyvRI+z6apW3l}LMGLrI|^Cw034ZEbD#
zYE|!{H~<R}S?rB45~zdk^=&|o3JoQNpb%$8zEg24sw3qlLv9Oo1RxxdmLm^-m{hF9
zr#TD<F+%swlsBVV9niJgwFgi8t%6;dj`!FvWU+TZoCgYpf{xLx%M1{K`T6<Moj+sa
zdaeoJXU#(ROvc6fl(9>R3uWWuVyl;(>;o5T5K7hh-zXwrtqJ@4`%&n(bmHWO23#nk
zUM<xvU)8>EtFKngZ}}7d7J&P9c6Ji45B0A?HIf?e)_INRFur4mistiqhkJ4s^Xc1e
zAA>8|inAhw%JTjC+jUjaQw<KbS%UzhqN41mUjYWRlC83=R4OGmi8^FOMcD|)Ah=o?
zQKOu>a%SUR3g*dtxj%5VNUb#?s!Z_Gn@*>RvlrAYcyeDm#@?4@aFOv**I}=<Q_^(}
z21V7<-Q8V>h{eT4M_tZ*1l|Fvu?pX?IZn?tW?z{(enIu)mkF$)25UNEn{f9T2g<)5
z;GaW)#=&N{7;~F72yt`5&7nB@;1~q1)JrrGi2cu8q6u5LT8qhdAKy+~H2=MUDBCyO
J`?_bm@E2vi<Ldwb

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-down.png b/public/images/settings/bottom-screen/number-input-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..89cca8c1b1264302baeaf3be1ded5622b14c9934
GIT binary patch
literal 6513
zcmds6Pe@c@5T6&8t7+KDr9&(PK@g!giJ;a$=o4JZLdug77~TYH(LHRkgpd#&4e8J&
z0}nwG9-^BE4T6L{b@tGolSj#*-VDy?d*giHz9;(%8+bc!W_~mC&3u3MbA58X(BIm8
zrWpWQ{ej-$fOiH@E^`9F`*ix{yFl=!hWop{FCQ;H3WSFH`Jp_(+h-?#-93)TdjrEm
z0HyN)vyTCO2CCU_01rC=evAQJeh$z+`QrVJD}kYDa^TJsz@>Bec+;=076WDD1AnNm
z@q5eJQx{r3uUDS}WY_)P{H@zf-iK_@S8rx!=63*7sR6a4qoW6mOG`^|47F`-ZBQ&0
zBOLYQnayTlWn~2lg#vLjAX#&I)oN88Oatc8$lKlBRXr%j;NYO<r0P~zSNBW8baQia
zR2II6pRgVynLZ$Bad9!y3+@f;5rbs<L(<*{_6mvlp4u>L-wZ;$cx!8GYIg+Ah}J$E
zgm|IiS%<}H6xMrNTU(JKjgOC0*Vs|YkqijJRw4*Vf=P)>LVJAQSM}C4MA4Lw#A{25
z;Z&Km=tR}QNXwAdWH=sA+5G%`SZ#fG;VFscSt^xC?Q%u{+ZnILvR1;?u`>t5WrV~_
ziS4;uj`Z4xH3@?|I)ZaKAPy#jvz_r8rzDw7Mzck9U0q!y+m4F}SO^Dpm9W=EOnhD?
z%}P6WV`C$!Uo1SfH}y8vTv4%x>Hwu)ftmm}8E-Vl;Ec(IceaRkw~18aMZ;49=_hwE
z9~TlQceu2ptR`@sGg=TAp7z1c&W`2>o12@Y$9oIX^71nAk&zMNT&eAB!lOv7fV_hb
zn`2x%;+zRM5RX)job4_iD}k&;%B}>7ZxOCwnoZqk8t|~X)DzJ6L8VeT>;V6{U%6b~
zU#V$*@1$8JUm46)^LcpGI5x=?k!HuzjvYCdYRv*4;XEk5o!9b<Yfl=V$MJv71a@nC
zdz=1_xABRI2`-+vyzJo2#EHZ4`5M7NWqj1T;;~<%<<!}UzeU+8?y_N=jAV<?c*)s6
zQUojGa@jfAS$UC@cIh8Cuf&->A*+ldW9RbuJTRBRQI>JS81`eX;ibQn(I+w!5|C7u
zovqdRr12%58xkpkm51dxD`8q#SO|+WYY|1Agh&y1CCBT2y*U1YP|tXBT-*b*ClG*i
n)HsgW6oJA~rPP0#`5TS7c5|wyx&3wUuMq&huh9FZd#v&YJ;9y@

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-up-disabled.png b/public/images/settings/bottom-screen/number-input-up-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..72c0b0098e1bb9a8f7a6b1df30945c9ad27bf938
GIT binary patch
literal 6513
zcmdT|OGs2v82+zJ`6yv#m9&VFC=e=aIT6U1qO(vM38|eC814jXXl9dC2)U`9AuWUu
z!9@_XiooR%1PU&sotx;favepT@5pz%_i)aAFf-!(aPNQr$N699@t>LJHz&t>d(QTV
zNN;I;WJ=+y>dAMV6!AXi*4`_^TbLRf_P%_&^jHy@`^AZ($h#M(e&0O-&3ofh6C$;X
zB8$&Neks=CcaevKB0pzDuDudDGynQS`MMHx&yU|(5V>+5kN0SOsG^vi4@wiGoj*>W
z%U-x#c+;^i(pN8y6mQ+`_CEIA_~uos)xS#33LW4U3I+Y_?Ckj8;A>$nmy?y16{*!~
z8iNL8@XBVhvb?;EPaosk=`#agHptNK;Gjxe0fGT|ySuyA@U@SDfdQ?R<h8fAcbF2Q
z4n7+j8&WQp1vtpZH$bP_-`}r^N~I#3o0|f9e}7-6ozLfGdV1O~LA_r8UmuKGU0s!f
zg9B|{TTw62;0M83x1dt+JCmjW7?@#FK`Z#i9M8?one4-gnOrEN2*4(EU?zhPl`*3n
z6qJW%nB_%j31)di1E>^*ok_a}rCwVuLoPnnqQ8S&O3mQwJ)Fi6X3I9MQ8siY+`v(a
zOG`^yjKc(A(wgabX(tYuX1k1~aps&8tV;k-J55+#lt<}1GvQ#1T`Ma}Upv{}-nI^G
z7BlsEmDX|U^DV7|)cfPuIdCpnTcq6Cwv*nbk0#af66p-$jt}l`bPxdgEr7dQ6P6b;
zaBet@zJKws$y~fh2WI5F*`&!N(Im5Hvc;2T)Z~*6VrvFG#2Be*kOnB{oY>AKs{<Nv
z8BQvPp0z~g1&an<I7+|e`=I3xbcwdMwp`ga%y0R<so@A?4EVnhV)Tx^xaDi<C@K(2
zf~QxzU>3;V6AYY!W?=Sn+Dh8jsUL^YJwtnfZMxam45StIBU_LeKpbsW-s~K+v$G)+
z&6=4|5{*_V6rm#G`f#)S`AJ|;V2!20yp=F`v+_tHXwQ_JGlLssP(Lmn`t_3_qY-Qd
zZQ6>HoBB!VP!gyDz=e5}rE#;es9e-|)2=z*oEhFD&2gj|M<@w0lVS#)RNvHVbUf|(
zNg%tpHHgY2(TlU=lBc!LB>ZMqEUN#w+YE3s4mG<ri$4^uUQWmcPrJg}`qQqLLtp<O
O{?h2=$lKwWC;tHNimt!_

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-up-xl-disabled.png b/public/images/settings/bottom-screen/number-input-up-xl-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..592d87d0975e34897e9b098ad06b26343a74077b
GIT binary patch
literal 12669
zcmeHNPe_zO6n|f>ZCTRpDd-R@h9E?&UCIbzP0>9lB_(uI0?Si^x#V7w2q`Ze4e2C=
z;34Q5fwz`UD|irZ9;=hLzy$k#6Ypbo{KoH(GwXh`559fhym|B9oA+nFnPK1EA0B9H
zz1&JfZN<U95f_iUPwwm)B4?(hbI)x!(<1}D&eo4>uiQrJX<?{9^yU5ez3~=sJ{cSt
zA}V(h&AlPobxCtSiDvRdzsHDfe;~Rv_3`V2J8s9hslmt7MAtj;I4?ilExE+>i{em!
z`qzaknXBo)r+06-BB|I{c=)Wv`If&|b!KO0_g%I~kOFs4PtSoti;IgiIXQWNUa3^*
z6sXy3w&uZra=A>vY9IK8rc5S-cMld876`PZr6rFhzeJu>%5N^RMD;xdTUE&C-JrOz
zzP_$@k+ZR};p=8~Zah-Vp{uKl+s5(c=BB@Qb(#>O)zwuR9UT=R)A7l4Pf2@wyG%du
zUMiJ@aPVz!ZxceC%jJYJya$1Ao~VP6FFQLsB6qkCZCxHQ597#r#RJ3Ql+A#{h?Fkf
z{4CTJvmY<hL>#zr7><)okmp-@s-pS%d67-1#HcB&tyEURsfsjZh?1&-3Roy`lz8#D
zNI~X7QLy#3DT*<1c)evQj(fu>#Hvyc2wiS*j9FP(5ySjG=yBxf#)wJyeNc4+!qBk<
z0I<0LsBJ+s_+vB@s<E7={3XN^1mL!*d5B4{vbaLS8pp<m<qvC*kw~y{s#2YE!fqi{
zdAhckM73Jg^(TUEeZOSe3)c5zwkIIYT(*_ily9V%bq4B+S;rrhj$MF}B~_;wn`nT|
zFZ9VsAzRxEoGt)36a#ET!fFkumldWR<<)?2kAWZF8?onk0^H_E@W#)8N;^d?pC4f)
zPsD`5sthA3#2YpCG*3WXM!BCOq1#KTMjqBSG67b=hI3oRLH#O!n6|ULyu4p1xL3Ot
z!1i$y8_|>T9kAehAyTaY8+t?ytgWrtkX;v<iN80hi<c}a!M#`F>)4`y>L$7wgu1y}
zuc#&nynrVGC&5OzJ;+Y*c;5tO1~Cc1XK%LE#>tOm+rS+cZ$5WJRKb4%ARl|kn(qUj
z1e1dOoRk#X*-oB=(c=yawSoCG&a%~e@QH~D?h-gjRZ<fKj!>gw*~>xa*G8R#Y!@GC
zy&&NG0Ai!ypv*@QWLtwO1NT)je<RG5lgbMM6B-r6X|m%~JJq15{f*rAc1qpd-N$Mt
z-vhD{YGxw<Q2<#lgZj-daepYwkMoWjFz;U@aRk^N6V>UeJx3j{%Cp(_4sM(|$Ayvk
z$WF#VcEBk?JaWG*o2yLjk1EduKV$&B<;d2h_J1|aUq27v7P#iH=Eu~e)yD&3cZ6u*
bX~OY%VC&KMKV##!-a>n^f4J{+@7U{q$ujiQ

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-up-xl.png b/public/images/settings/bottom-screen/number-input-up-xl.png
new file mode 100644
index 0000000000000000000000000000000000000000..880bd62485f5fb570b6408b16ea986b9a51cb0f8
GIT binary patch
literal 12669
zcmeGiO-NKh_<OO|W(s>tI>cHa9wPJ-5<zH+uHaG<LPDSvmYoE1$vv1XVd$ZbhIH-X
zA@JfMyKARCc(Fq%c&Sc;7s-Ws-z?u_c6MgpoA;yhWCz~Po9}<VpLsLGF5b`fH#c5s
z1c2tuK<}{KkK0c=c^<%;X=p3i18aJ?zsLIi?Z#_+ka*TT)D5uq{!(eY0V$sh3=aY1
z+W_X@0Q|K<^S=OQIspER0o?uoaCz$Emj`!j#KozBN7Dc|uj6CA`gAvE124SH4E0_3
z-E=i|?N;gS<9D`5$n<tUeBNMv?YLL8W@l&r*<@NRfz<hYzKUsNWCT`MSF7L)3kz@#
zp$7*C6%R73tgHa`A`a=9d84DF_+HVFSk~6p*UL;YqzYyo9v*5rAt6&=EEbu9&d$y%
zMb`HAwp4>m5aY(U93LM?_Mm(g$D^a8DsyE34AJD|BrGp4vyjPXWH6>=Z*NbAb6~k#
zjtO5{T4FHl(VwV{U=Fe5h2_cM;GhH*4#-zt>8iFc;JQpY^a-!QMxm-=uBDI#yA}cA
zD4Vdy1;A^w_V@Q)T{JN<!LkV}k+R6E5@n^5g_NqTt*r!t-Q8X9sj6BE9BJH(a(Uor
z#8>I!BoYM~vtlb03PEI?D(~Ff9B8e5y4EI>NnI9S^q$MjkMwLd%h+TebU*S`JZutv
z5?v(_;kX1~qq4_!h99#*h(Do5LNuP7LtjF|(>Sbogc1o{AF+{fWV~o3;YE6pPInwi
zB*-{XxoR@B8CKy%Ic{S%iT3t(H#%eSC$e9PdiIg;$D*D9J99;?Bue?A6tl`eoz1XH
zMlCq*0@wtiQbZrMD8JBWBZb0Rmnq!z1;zt0wkRVJX$^>%6=6H7rKP1@1LV1&z36$8
zN0A^rZTtuyq-PNb+cW(65secg5yW7TH<T2jjT(8Hl!%TYJVipamm+?*KJ*k4Jue#I
zh8O9*jM-LVYir93tu{?6mD1+XVZe>(+4v6V%vy(5tN|Tfue7n>jmG}o$ZMobrNeu#
z*w?YC&egH29t0h4MMPT>1UjO{p^t-&7&A9Jk;d7Xx)Ga(rxPDe0vn#eO|!9<JsVA>
z4S>`p{uiJ;gYvIa6||*^OV3Y&-s56B*-3UgRY3q#dphHheRK~_V_B6D&h)+_2oxbx
zd)}GpbebPly_-4*-Yz`!V{?LlNId77(z|6o8qeD*R))xr_f<T-33J6cU~_^{9-8}$
zPU9UXT8fpyJ6Xh=Ja$gcJ3Bk4YA4+Tk`ZENV*qp-283_;XF<LNy+7n-`F+P5Fy~(*
zeuYHIr|WdlmZ1EiyeP-UY*8`uF*~WJOjh;i6ctVe=Veos$>?<D2BAk@Y|e5N)unb>
yP5oEqfv&DDwj4Q?AS0^7PR0YQ5>7@{U5m;CYtxIHFMj-diug=lw)b<-Sm8el+qz2t

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/number-input-up.png b/public/images/settings/bottom-screen/number-input-up.png
new file mode 100644
index 0000000000000000000000000000000000000000..48c90573bb02d34565913c3bc3b0e8823adfd104
GIT binary patch
literal 6513
zcmdT|O-L0{6h0%CPg5``e7J}wK?p_UP9i8x(Gh%<gcP_i0>hnQJ@PG79&K{d(vTKy
z+DHURC`8~U$RKdxDq1MG=w~Ikkqm6UTi-BqnLBTWH}lE^_nkTa_d9ccMjv0x_cb-N
zHi$@*-QP3h@D69>GDk(MPsg9XaRh5}sIS}l{PEn3Bh=pQ8tf8z{p8rM+ehGer+;Wr
zq<BVT_L0a>M>YFR<iQ1zAEP1{pNh0hJbQcnl4Gc!=)W~7a{e@i_3*{zf}^avZx8m?
zeQ!L~*m&~Fmznn>*$;M4*NvO?*1PQ0uh!Jm)Pds`Ofc^5?y6ziw)+fy4MKKyc4T;X
zSQZu*6o(9QjdOEz%849CV@(US;Gt73^RBP2D_chg+UTU(*w_e+5KM7@e?RhYA?@w$
ziFf4ld0AOm5pb^_&maYLYimm|(2Ld8RRP?#wl>8fLr)(BsTK?j4B$BuEiW&d`)0~u
zp#dgikiJF-NI3{RYzn-d31G*^#}#PZCfnQF2i}2YwY0RPbl{M^cHbK=6bdRcT1(p8
z+?4tGdDUv@d;xR{<L=@LbMo2ZuB|xh5WdJ?i;7%hzUm1Ifv+ztKVB_H98yTQfx`mF
z#>SKxhY5&<C@ZDmM-?&Hlv+<tUnV!%=?88^f^`YPwg;Ke(#~R(RnXrbBa$FzZ=n7h
z=C6vhx3}vtiOR-vKB+3P&$qaRWABguu7G;cQI8RBxW&cANI)`~Oz;g5DLSH)anpI@
zxuJ0FfQW><+w1Fn&StZJcC}X-_RJ5DFdyA!+|h8<XU<?Ep*;*qq!#hc<k>`-1*xY@
zZfp?`J<gN?I;WlfLFZCvi}ac51<Kjsua1hfwKY995xKLoGyQ##`dO6vX{zpnQmK?k
z&;Lb|>FMe8-*Yv9rM{M`4uV(QVc~3$d+?<(ao&O~hI>89I=KHq?sDQCk~Aj(@-*_h
zZ-PZC;d<wb#iB2rZjbuK<x3JE_&`+JB|U#Gm(x`~IjMRs2qbK7ZdQLzMdkd;;LP;S
zL+{P2+xfl4czkzx{mab*pGzPY1QS)l(RuGA^jziax_?yJ2LclSnYi9Ly|bn`lU|S4
z^Yc5>6i<*o5L8Cxc-@syrSYuof&kibYY?6B`XPx|E*D?U9ydQhxc3AnbeMP`2r3U7
dPyJsr)o94Q)|V&Fj*PURmff50dDT5y`VI9#);0hD

literal 0
HcmV?d00001