From 28b9ffe71d1e033f8c144971a33d0e66ad499f2b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 22 Aug 2024 10:32:49 +0400
Subject: [PATCH 001/157] =?UTF-8?q?init:=20create=20next=20app=20?=
 =?UTF-8?q?=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json     |    3 +
 .gitignore         |   36 +
 app/favicon.ico    |  Bin 0 -> 25931 bytes
 app/globals.css    |   33 +
 app/layout.tsx     |   22 +
 app/page.tsx       |    3 +
 next.config.mjs    |    4 +
 package-lock.json  | 5251 ++++++++++++++++++++++++++++++++++++++++++++
 package.json       |   26 +
 postcss.config.mjs |    8 +
 tailwind.config.ts |   20 +
 tsconfig.json      |   26 +
 12 files changed, 5432 insertions(+)
 create mode 100644 .eslintrc.json
 create mode 100644 .gitignore
 create mode 100644 app/favicon.ico
 create mode 100644 app/globals.css
 create mode 100644 app/layout.tsx
 create mode 100644 app/page.tsx
 create mode 100644 next.config.mjs
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 postcss.config.mjs
 create mode 100644 tailwind.config.ts
 create mode 100644 tsconfig.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fd3dbb5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c
GIT binary patch
literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

literal 0
HcmV?d00001

diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..875c01e
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..7f2eff7
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "REST GraphQL Client",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..f4e7b5a
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <main>Home</main>;
+}
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..4678774
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..f3ca269
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,5251 @@
+{
+  "name": "graphiql-app",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "graphiql-app",
+      "version": "0.1.0",
+      "dependencies": {
+        "next": "14.2.6",
+        "react": "^18",
+        "react-dom": "^18"
+      },
+      "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^8",
+        "eslint-config-next": "14.2.6",
+        "postcss": "^8",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.6.tgz",
+      "integrity": "sha512-bs5DFKV+08EjWrl8EB+KKqev1ZTNONH1vFCaHh911aaB362NnP32UDTbE9VQhyiAgbFqJsfDkSxFERNDDb3j0g==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.6.tgz",
+      "integrity": "sha512-d3+p4AjIYmhqzYHhhmkRYYN6ZU35TwZAKX08xKRfnHkz72KhWL2kxMFsDptpZs5e8bBGdepn7vn1+9DaF8iX+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "10.3.10"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.6.tgz",
+      "integrity": "sha512-BtJZb+hYXGaVJJivpnDoi3JFVn80SHKCiiRUW3kk1SY6UCUy5dWFFSbh+tGi5lHAughzeduMyxbLt3pspvXNSg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.6.tgz",
+      "integrity": "sha512-ZHRbGpH6KHarzm6qEeXKSElSXh8dS2DtDPjQt3IMwY8QVk7GbdDYjvV4NgSnDA9huGpGgnyy3tH8i5yHCqVkiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.6.tgz",
+      "integrity": "sha512-O4HqUEe3ZvKshXHcDUXn1OybN4cSZg7ZdwHJMGCXSUEVUqGTJVsOh17smqilIjooP/sIJksgl+1kcf2IWMZWHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.6.tgz",
+      "integrity": "sha512-xUcdhr2hfalG8RDDGSFxQ75yOG894UlmFS4K2M0jLrUhauRBGOtUOxoDVwiIIuZQwZ3Y5hDsazNjdYGB0cQ9yQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.6.tgz",
+      "integrity": "sha512-InosKxw8UMcA/wEib5n2QttwHSKHZHNSbGcMepBM0CTcNwpxWzX32KETmwbhKod3zrS8n1vJ+DuJKbL9ZAB0Ag==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.6.tgz",
+      "integrity": "sha512-d4QXfJmt5pGJ7cG8qwxKSBnO5AXuKAFYxV7qyDRHnUNvY/dgDh+oX292gATpB2AAHgjdHd5ks1wXxIEj6muLUQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.6.tgz",
+      "integrity": "sha512-AlgIhk4/G+PzOG1qdF1b05uKTMsuRatFlFzAi5G8RZ9h67CVSSuZSbqGHbJDlcV1tZPxq/d4G0q6qcHDKWf4aQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.6.tgz",
+      "integrity": "sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.6.tgz",
+      "integrity": "sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
+      "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.16.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.1.tgz",
+      "integrity": "sha512-zJDo7wEadFtSyNz5QITDfRcrhqDvQI1xQNQ0VoizPjM/dVAODqqIUWbJPkvsxmTI0MYRGRikcdjMPhOssnPejQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
+      "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
+      "integrity": "sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "7.2.0",
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/typescript-estree": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.2.0.tgz",
+      "integrity": "sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.2.0.tgz",
+      "integrity": "sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
+      "integrity": "sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "7.2.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
+      "integrity": "sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-equal": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
+      "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.5",
+        "es-get-iterator": "^1.1.3",
+        "get-intrinsic": "^1.2.2",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.2",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.3",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.13",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-get-iterator": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
+      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "globalthis": "^1.0.3",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "iterator.prototype": "^1.1.2",
+        "safe-array-concat": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.6.tgz",
+      "integrity": "sha512-z0URA5LO6y8lS/YLN0EDW/C4LEkDODjJzA37dvLVdzCPzuewjzTe1os5g3XclZAZrQ8X8hPaSMQ2JuVWwMmrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "14.2.6",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
+      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "enhanced-resolve": "^5.12.0",
+        "eslint-module-utils": "^2.7.4",
+        "fast-glob": "^3.3.1",
+        "get-tsconfig": "^4.5.0",
+        "is-core-module": "^2.11.0",
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts/projects/eslint-import-resolver-ts"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.9.0.tgz",
+      "integrity": "sha512-nOFOCaJG2pYqORjK19lqPqxMO/JpvdCZdPtNdxY3kvom3jTvkAbOvQvD8wuD0G8BYR0IGAGYDlzqWJOh/ybn2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "~5.1.3",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.9.1",
+        "axobject-query": "~3.1.1",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "es-iterator-helpers": "^1.0.19",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.35.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
+      "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.0.19",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.0",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.6.tgz",
+      "integrity": "sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
+      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
+      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
+      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "reflect.getprototypeof": "^1.0.4",
+        "set-function-name": "^2.0.1"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.6.tgz",
+      "integrity": "sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.6",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.6",
+        "@next/swc-darwin-x64": "14.2.6",
+        "@next/swc-linux-arm64-gnu": "14.2.6",
+        "@next/swc-linux-arm64-musl": "14.2.6",
+        "@next/swc-linux-x64-gnu": "14.2.6",
+        "@next/swc-linux-x64-musl": "14.2.6",
+        "@next/swc-win32-arm64-msvc": "14.2.6",
+        "@next/swc-win32-ia32-msvc": "14.2.6",
+        "@next/swc-win32-x64-msvc": "14.2.6"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
+      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.1",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "globalthis": "^1.0.3",
+        "which-builtin-type": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.1.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
+      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "internal-slot": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.0.tgz",
+      "integrity": "sha512-E34CkBgyeqNDcrbU76cDjL5JLcVrtSdYq0MEh/B10r17pRP4ciHLwTgnuLV8Ay6cgEMLkcBkFCKyFZ43YldYzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
+      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.0.5",
+        "is-finalizationregistry": "^1.0.2",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.1.4",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
+      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..169c944
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "graphiql-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.6"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.6"
+  }
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..1a69fd2
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..7e4bd91
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e7ff90f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

From fff010958f05b46e5fc156cdf79b9916cb6133d8 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 22 Aug 2024 14:51:03 +0400
Subject: [PATCH 002/157] chore: config eslint, prettier, husky and lint-staged

---
 .editorconfig      |    7 +
 .eslintignore      |    2 +
 .eslintrc.cjs      |   46 +
 .eslintrc.json     |    3 -
 .husky/pre-commit  |    1 +
 .lintstagedrc.js   |    8 +
 .prettierignore    |    2 +
 .prettierrc        |    9 +
 app/globals.css    |    7 +-
 app/layout.tsx     |   12 +-
 app/page.tsx       |    2 +-
 next.config.mjs    |    5 +-
 package-lock.json  | 2478 +++++++++++++++++++++++++++++++++++++++-----
 package.json       |   36 +-
 tailwind.config.ts |   16 +-
 15 files changed, 2322 insertions(+), 312 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.cjs
 delete mode 100644 .eslintrc.json
 create mode 100644 .husky/pre-commit
 create mode 100644 .lintstagedrc.js
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..f3d80b5
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = auto
+indent_style = space
+indent_size = 2
+max_line_length = 80
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..b51ea71
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
\ No newline at end of file
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..994bf8b
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,46 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'next/core-web-vitals',
+    'prettier',
+    'plugin:prettier/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'react-compiler'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'error',
+    'react-compiler/react-compiler': 'error',
+    'react/jsx-uses-react': 'off',
+    'react/jsx-uses-vars': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'no-console': 'warn',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+  },
+};
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index bffb357..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..d0a7784
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
\ No newline at end of file
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
new file mode 100644
index 0000000..7009360
--- /dev/null
+++ b/.lintstagedrc.js
@@ -0,0 +1,8 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+};
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..b51ea71
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..bbab8d4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "endOfLine": "auto",
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/app/globals.css b/app/globals.css
index 875c01e..a0d367b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -18,12 +18,7 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
 
 @layer utilities {
diff --git a/app/layout.tsx b/app/layout.tsx
index 7f2eff7..83866ba 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,12 +1,12 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "REST GraphQL Client",
-  description: "Generated by create next app",
+  title: 'REST GraphQL Client',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({
diff --git a/app/page.tsx b/app/page.tsx
index f4e7b5a..0a73eeb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <main>Home</main>;
+  return <main>Home </main>;
 }
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..6a1ea92 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index f3ca269..68f129d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,19 +8,30 @@
       "name": "graphiql-app",
       "version": "0.1.0",
       "dependencies": {
-        "next": "14.2.6",
-        "react": "^18",
-        "react-dom": "^18"
+        "next": "14.2.5",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "@types/node": "^20",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "eslint": "^8",
-        "eslint-config-next": "14.2.6",
-        "postcss": "^8",
-        "tailwindcss": "^3.4.1",
-        "typescript": "^5"
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@typescript-eslint/eslint-plugin": "^7.13.1",
+        "@typescript-eslint/parser": "^7.13.1",
+        "eslint": "^8.57.0",
+        "eslint-config-next": "^14.2.5",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "husky": "^9.1.5",
+        "lint-staged": "^15.2.9",
+        "postcss": "^8.4.41",
+        "prettier": "3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.6",
+        "tailwindcss": "^3.4.10",
+        "typescript": "^5.2.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -36,6 +47,503 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
+      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/highlight": "^7.24.7",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz",
+      "integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
+      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-module-transforms": "^7.25.2",
+        "@babel/helpers": "^7.25.0",
+        "@babel/parser": "^7.25.0",
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.2",
+        "@babel/types": "^7.25.2",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz",
+      "integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
+      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
+      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.25.2",
+        "@babel/helper-validator-option": "^7.24.8",
+        "browserslist": "^4.23.1",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz",
+      "integrity": "sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/traverse": "^7.25.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
+      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
+      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
+      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-simple-access": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
+      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
+      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
+      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
+      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
+      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
+      "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
+      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-methods": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
+      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/parser": "^7.25.0",
+        "@babel/types": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
+      "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/parser": "^7.25.3",
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.2",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -86,6 +594,22 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@eslint/js": {
       "version": "8.57.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
@@ -228,32 +752,100 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
+      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz",
+      "integrity": "sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "10.3.10"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/@next/env": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.6.tgz",
-      "integrity": "sha512-bs5DFKV+08EjWrl8EB+KKqev1ZTNONH1vFCaHh911aaB362NnP32UDTbE9VQhyiAgbFqJsfDkSxFERNDDb3j0g==",
-      "license": "MIT"
-    },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.6.tgz",
-      "integrity": "sha512-d3+p4AjIYmhqzYHhhmkRYYN6ZU35TwZAKX08xKRfnHkz72KhWL2kxMFsDptpZs5e8bBGdepn7vn1+9DaF8iX+A==",
+    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "glob": "10.3.10"
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.6.tgz",
-      "integrity": "sha512-BtJZb+hYXGaVJJivpnDoi3JFVn80SHKCiiRUW3kk1SY6UCUy5dWFFSbh+tGi5lHAughzeduMyxbLt3pspvXNSg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
+      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
       "cpu": [
         "arm64"
       ],
@@ -267,9 +859,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.6.tgz",
-      "integrity": "sha512-ZHRbGpH6KHarzm6qEeXKSElSXh8dS2DtDPjQt3IMwY8QVk7GbdDYjvV4NgSnDA9huGpGgnyy3tH8i5yHCqVkiQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
+      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
       "cpu": [
         "x64"
       ],
@@ -283,9 +875,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.6.tgz",
-      "integrity": "sha512-O4HqUEe3ZvKshXHcDUXn1OybN4cSZg7ZdwHJMGCXSUEVUqGTJVsOh17smqilIjooP/sIJksgl+1kcf2IWMZWHg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
+      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
       "cpu": [
         "arm64"
       ],
@@ -299,9 +891,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.6.tgz",
-      "integrity": "sha512-xUcdhr2hfalG8RDDGSFxQ75yOG894UlmFS4K2M0jLrUhauRBGOtUOxoDVwiIIuZQwZ3Y5hDsazNjdYGB0cQ9yQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
+      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
       "cpu": [
         "arm64"
       ],
@@ -315,9 +907,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.6.tgz",
-      "integrity": "sha512-InosKxw8UMcA/wEib5n2QttwHSKHZHNSbGcMepBM0CTcNwpxWzX32KETmwbhKod3zrS8n1vJ+DuJKbL9ZAB0Ag==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
+      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
       "cpu": [
         "x64"
       ],
@@ -331,9 +923,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.6.tgz",
-      "integrity": "sha512-d4QXfJmt5pGJ7cG8qwxKSBnO5AXuKAFYxV7qyDRHnUNvY/dgDh+oX292gATpB2AAHgjdHd5ks1wXxIEj6muLUQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
+      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
       "cpu": [
         "x64"
       ],
@@ -347,9 +939,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.6.tgz",
-      "integrity": "sha512-AlgIhk4/G+PzOG1qdF1b05uKTMsuRatFlFzAi5G8RZ9h67CVSSuZSbqGHbJDlcV1tZPxq/d4G0q6qcHDKWf4aQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
+      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
       "cpu": [
         "arm64"
       ],
@@ -363,9 +955,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.6.tgz",
-      "integrity": "sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
+      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
       "cpu": [
         "ia32"
       ],
@@ -379,9 +971,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.6.tgz",
-      "integrity": "sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
+      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
       "cpu": [
         "x64"
       ],
@@ -443,6 +1035,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
@@ -511,21 +1116,55 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.1.tgz",
+      "integrity": "sha512-kZqi+WZQaZfPKnsflLJQCz6Ze9FFSMfXrrIOcyargekQxG37ES7DJNpJUE9Q/X5n3yTIP/WPutVNzgknQ7biLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/type-utils": "7.13.1",
+        "@typescript-eslint/utils": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
-      "integrity": "sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.13.1.tgz",
+      "integrity": "sha512-1ELDPlnLvDQ5ybTSrMhRTFDfOQEOXNM+eP+3HT/Yq7ruWpciQw+Avi73pdEbA4SooCawEWo3dtYbF68gN7Ed1A==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.2.0",
-        "@typescript-eslint/types": "7.2.0",
-        "@typescript-eslint/typescript-estree": "7.2.0",
-        "@typescript-eslint/visitor-keys": "7.2.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/typescript-estree": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -541,31 +1180,59 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.2.0.tgz",
-      "integrity": "sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.13.1.tgz",
+      "integrity": "sha512-adbXNVEs6GmbzaCpymHQ0MB6E4TqoiVbC0iqG3uijR8ZYfpAXMGttouQzF4Oat3P2GxDVIrg7bMI/P65LiQZdg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.2.0",
-        "@typescript-eslint/visitor-keys": "7.2.0"
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.13.1.tgz",
+      "integrity": "sha512-aWDbLu1s9bmgPGXSzNCxELu+0+HQOapV/y+60gPXafR8e2g1Bifxzevaa+4L2ytCWm+CHqpELq4CSoN9ELiwCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "7.13.1",
+        "@typescript-eslint/utils": "7.13.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz",
-      "integrity": "sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.13.1.tgz",
+      "integrity": "sha512-7K7HMcSQIAND6RBL4kDl24sG/xKM13cA85dc7JnmQXw2cBDngg7c19B++JzvJHRG3zG36n9j1i451GBzRuHchw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -573,23 +1240,23 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.2.0.tgz",
-      "integrity": "sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.1.tgz",
+      "integrity": "sha512-uxNr51CMV7npU1BxZzYjoVz9iyjckBduFBP0S5sLlh1tXYzHzgZ3BR9SVsNed+LmwKrmnqN3Kdl5t7eZ5TS1Yw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "7.2.0",
-        "@typescript-eslint/visitor-keys": "7.2.0",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -612,9 +1279,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -627,18 +1294,54 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.1.tgz",
+      "integrity": "sha512-h5MzFBD5a/Gh/fvNdp9pTfqJAbuQC4sCN2WzuXme71lqFJsZtLbjxfSk4r3p02WIArOF9N94pdsLiGutpDbrXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/typescript-estree": "7.13.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      }
+    },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
-      "integrity": "sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.1.tgz",
+      "integrity": "sha512-k/Bfne7lrP7hcb7m9zSsgcBmo+8eicqqfNAJ7uUY+jkTFpKeH2FSkWpFRtimBxgkyvqfu9jTPRbYOvud6isdXA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.2.0",
-        "eslint-visitor-keys": "^3.4.1"
+        "@typescript-eslint/types": "7.13.1",
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -692,6 +1395,22 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1018,6 +1737,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1106,42 +1858,129 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/client-only": {
@@ -1170,6 +2009,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1187,6 +2033,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1424,6 +2277,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
+      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1445,6 +2305,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -1614,118 +2487,288 @@
         "hasown": "^2.0.0"
       }
     },
-    "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.5.tgz",
+      "integrity": "sha512-zogs9zlOiZ7ka+wgUnmcM0KBEDjo4Jis7kxN1jvC0N4wynQ2MIx/KBkg4mVF63J5EK4W0QMCn7xO3vNisjaAoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "14.2.5",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/@typescript-eslint/parser": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
+      "integrity": "sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "7.2.0",
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/typescript-estree": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/@typescript-eslint/scope-manager": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.2.0.tgz",
+      "integrity": "sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/@typescript-eslint/types": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.2.0.tgz",
+      "integrity": "sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
+      "integrity": "sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "@typescript-eslint/types": "7.2.0",
+        "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+    "node_modules/eslint-config-next/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+    "node_modules/eslint-config-next/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
+      "license": "ISC",
       "bin": {
-        "eslint": "bin/eslint.js"
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+        "node": ">=10"
       }
     },
-    "node_modules/eslint-config-next": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.6.tgz",
-      "integrity": "sha512-z0URA5LO6y8lS/YLN0EDW/C4LEkDODjJzA37dvLVdzCPzuewjzTe1os5g3XclZAZrQ8X8hPaSMQ2JuVWwMmrTA==",
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@next/eslint-plugin-next": "14.2.6",
-        "@rushstack/eslint-patch": "^1.3.3",
-        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-import-resolver-typescript": "^3.5.2",
-        "eslint-plugin-import": "^2.28.1",
-        "eslint-plugin-jsx-a11y": "^6.7.1",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
       },
       "peerDependencies": {
-        "eslint": "^7.23.0 || ^8.0.0",
-        "typescript": ">=3.3.1"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "eslint": ">=7.0.0"
       }
     },
     "node_modules/eslint-import-resolver-node": {
@@ -1859,16 +2902,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/eslint-plugin-jsx-a11y": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.9.0.tgz",
@@ -1900,6 +2933,37 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.35.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
@@ -1933,6 +2997,27 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
+    "node_modules/eslint-plugin-react-compiler": {
+      "version": "0.0.0-experimental-8e3b87c-20240821",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-0.0.0-experimental-8e3b87c-20240821.tgz",
+      "integrity": "sha512-VSJDGcBGwI3UeMwAa+BLdVyTwyKfPtGvhSlcfrzjnQe0v+dx4Yo+hmVvPSZ42RsJpq58HIjkjSTY6TwLjpI0QQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "hermes-parser": "^0.20.1",
+        "zod": "^3.22.4",
+        "zod-validation-error": "^3.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=7"
+      }
+    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
@@ -1977,16 +3062,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -2017,6 +3092,22 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -2081,6 +3172,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2088,6 +3210,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -2295,6 +3424,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
+      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -2315,6 +3467,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -2347,24 +3512,22 @@
       }
     },
     "node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
@@ -2409,19 +3572,13 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=4"
       }
     },
     "node_modules/globalthis": {
@@ -2569,11 +3726,54 @@
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz",
+      "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz",
+      "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.20.1"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.5.tgz",
+      "integrity": "sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
       }
     },
     "node_modules/ignore": {
@@ -2971,6 +4171,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-string": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
@@ -3091,17 +4304,14 @@
       }
     },
     "node_modules/jackspeak": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
-      "engines": {
-        "node": ">=14"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       },
@@ -3138,6 +4348,19 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -3249,6 +4472,173 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lint-staged": {
+      "version": "15.2.9",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.9.tgz",
+      "integrity": "sha512-BZAt8Lk3sEnxw7tfxM7jeZlPRuT4M68O0/CwZhhaw6eeWu0Lz5eERE3m386InivXB64fp/mDID452h48tvKlRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "~5.3.0",
+        "commander": "~12.1.0",
+        "debug": "~4.3.6",
+        "execa": "~8.0.1",
+        "lilconfig": "~3.1.2",
+        "listr2": "~8.2.4",
+        "micromatch": "~4.0.7",
+        "pidtree": "~0.6.0",
+        "string-argv": "~0.3.2",
+        "yaml": "~2.5.0"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/lint-staged/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.4.tgz",
+      "integrity": "sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3272,6 +4662,144 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3291,6 +4819,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3307,12 +4842,38 @@
       "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/minimatch": {
@@ -3393,12 +4954,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.2.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.6.tgz",
-      "integrity": "sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
+      "integrity": "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.6",
+        "@next/env": "14.2.5",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -3413,15 +4974,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.6",
-        "@next/swc-darwin-x64": "14.2.6",
-        "@next/swc-linux-arm64-gnu": "14.2.6",
-        "@next/swc-linux-arm64-musl": "14.2.6",
-        "@next/swc-linux-x64-gnu": "14.2.6",
-        "@next/swc-linux-x64-musl": "14.2.6",
-        "@next/swc-win32-arm64-msvc": "14.2.6",
-        "@next/swc-win32-ia32-msvc": "14.2.6",
-        "@next/swc-win32-x64-msvc": "14.2.6"
+        "@next/swc-darwin-arm64": "14.2.5",
+        "@next/swc-darwin-x64": "14.2.5",
+        "@next/swc-linux-arm64-gnu": "14.2.5",
+        "@next/swc-linux-arm64-musl": "14.2.5",
+        "@next/swc-linux-x64-gnu": "14.2.5",
+        "@next/swc-linux-x64-musl": "14.2.5",
+        "@next/swc-win32-arm64-msvc": "14.2.5",
+        "@next/swc-win32-ia32-msvc": "14.2.5",
+        "@next/swc-win32-x64-msvc": "14.2.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -3470,6 +5031,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3480,6 +5048,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3636,6 +5233,22 @@
         "wrappy": "1"
       }
     },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3686,6 +5299,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3782,6 +5402,19 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -3985,6 +5618,114 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz",
+      "integrity": "sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4162,6 +5903,39 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -4173,6 +5947,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -4283,16 +6064,13 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
       }
     },
     "node_modules/set-function-length": {
@@ -4394,6 +6172,49 @@
         "node": ">=8"
       }
     },
+    "node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4424,6 +6245,16 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -4632,6 +6463,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4717,6 +6561,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
+      "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
@@ -4795,6 +6656,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4951,9 +6822,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -4987,6 +6858,37 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5221,6 +7123,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/yaml": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
@@ -5246,6 +7155,29 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.3.1.tgz",
+      "integrity": "sha512-uFzCZz7FQis256dqw4AhPQgD6f3pzNca/Zh62RNELavlumQB3nDIUFbF5JQfFLcMbO1s02Q7Xg/gpcOBlEnYZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.18.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 169c944..f01a6ec 100644
--- a/package.json
+++ b/package.json
@@ -6,21 +6,35 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "preview": "next build && next start",
+    "lint": "next lint",
+    "format:fix": "prettier . --write",
+    "prepare": "husky"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.6"
+    "next": "14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.6"
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.9",
+    "postcss": "^8.4.41",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.2.2"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..fade3d3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,19 +1,13 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
+    extend: {},
   },
   plugins: [],
 };

From 762cbcd69a3516f20a6bf517c9d29ee7669a7887 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 22 Aug 2024 15:25:09 +0400
Subject: [PATCH 003/157] chore: config vitest and other testing lib

---
 .husky/pre-push            |    0
 __test__/mock/handlers.ts  |    7 +
 __test__/mock/server.ts    |    4 +
 app/page.test.tsx          |   12 +
 app/page.tsx               |    2 +-
 package-lock.json          | 3455 ++++++++++++++++++++++++++++++++----
 package.json               |   17 +-
 public/assets/rss-logo.svg |    1 +
 tsconfig.json              |    5 +-
 vitest.config.mts          |   16 +
 vitest.setup.ts            |   14 +
 11 files changed, 3192 insertions(+), 341 deletions(-)
 create mode 100644 .husky/pre-push
 create mode 100644 __test__/mock/handlers.ts
 create mode 100644 __test__/mock/server.ts
 create mode 100644 app/page.test.tsx
 create mode 100644 public/assets/rss-logo.svg
 create mode 100644 vitest.config.mts
 create mode 100644 vitest.setup.ts

diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100644
index 0000000..e69de29
diff --git a/__test__/mock/handlers.ts b/__test__/mock/handlers.ts
new file mode 100644
index 0000000..47882d7
--- /dev/null
+++ b/__test__/mock/handlers.ts
@@ -0,0 +1,7 @@
+import { http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('', () => {
+    return HttpResponse.json('');
+  }),
+];
diff --git a/__test__/mock/server.ts b/__test__/mock/server.ts
new file mode 100644
index 0000000..e52fee0
--- /dev/null
+++ b/__test__/mock/server.ts
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);
diff --git a/app/page.test.tsx b/app/page.test.tsx
new file mode 100644
index 0000000..1b9fe6f
--- /dev/null
+++ b/app/page.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import Home from './page';
+
+describe('Home Component', () => {
+  it('should render the Home component', () => {
+    render(<Home />);
+
+    const mainElement = screen.getByRole('main');
+    expect(mainElement).toBeInTheDocument();
+    expect(mainElement).toHaveTextContent('Home');
+  });
+});
diff --git a/app/page.tsx b/app/page.tsx
index 0a73eeb..f4e7b5a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <main>Home </main>;
+  return <main>Home</main>;
 }
diff --git a/package-lock.json b/package-lock.json
index 68f129d..d579252 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,18 @@
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.4.8",
+        "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/node": "^20",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.13.1",
         "@typescript-eslint/parser": "^7.13.1",
+        "@vitejs/plugin-react": "^4.3.1",
+        "@vitest/coverage-v8": "^2.0.5",
+        "@vitest/ui": "^2.0.5",
         "eslint": "^8.57.0",
         "eslint-config-next": "^14.2.5",
         "eslint-config-prettier": "^9.1.0",
@@ -26,14 +33,24 @@
         "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
         "eslint-plugin-react-hooks": "^4.6.2",
         "husky": "^9.1.5",
+        "jsdom": "^24.1.1",
         "lint-staged": "^15.2.9",
+        "msw": "^2.3.5",
         "postcss": "^8.4.41",
         "prettier": "3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.6",
         "tailwindcss": "^3.4.10",
-        "typescript": "^5.2.2"
+        "typescript": "^5.2.2",
+        "vitest": "^2.0.5"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -495,6 +512,51 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
+      "integrity": "sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz",
+      "integrity": "sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
+      "integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
@@ -544,532 +606,1564 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
+    },
+    "node_modules/@bundled-es-modules/cookie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.0.tgz",
+      "integrity": "sha512-Or6YHg/kamKHpxULAdSqhGqnWFneIXu1NKvvfBBzKGwpVsYuFIQ5aBPHDnnoR3ghW1nvSkALd+EF9iMtY7Vjxw==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+        "cookie": "^0.5.0"
       }
     },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+    "node_modules/@bundled-es-modules/statuses": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz",
+      "integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      "license": "ISC",
+      "dependencies": {
+        "statuses": "^2.0.1"
       }
     },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+    "node_modules/@bundled-es-modules/tough-cookie": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz",
+      "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==",
       "dev": true,
-      "license": "MIT",
+      "license": "ISC",
       "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+        "@types/tough-cookie": "^4.0.5",
+        "tough-cookie": "^4.1.4"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
+      "optional": true,
+      "os": [
+        "aix"
+      ],
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=12"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
-      "deprecated": "Use @eslint/config-array instead",
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=10.10.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
+        "node": ">=12"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
-      "dev": true,
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
         "node": ">=12"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
         "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
         "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@next/env": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
-      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==",
-      "license": "MIT"
-    },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz",
-      "integrity": "sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==",
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "glob": "10.3.10"
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/jackspeak": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
       "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
-      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
       "cpu": [
-        "arm64"
+        "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "darwin"
+        "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
-      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "cpu": [
-        "x64"
+        "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "darwin"
+        "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
-      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
-      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "netbsd"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
-      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "openbsd"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
-      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "sunos"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
-      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
-      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
-      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
+        "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 8"
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@inquirer/confirm": {
+      "version": "3.1.22",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-3.1.22.tgz",
+      "integrity": "sha512-gsAKIOWBm2Q87CDfs9fEo7wJT3fwWIJfnDGMn9Qy74gBnNFOACDNfhUzovubbJjWnKLGBln7/NcSmZwj5DuEXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^9.0.10",
+        "@inquirer/type": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/core": {
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.0.10.tgz",
+      "integrity": "sha512-TdESOKSVwf6+YWDz8GhS6nKscwzkIyakEzCLJ5Vh6O3Co2ClhCJ0A4MG909MUWfaWdpJm7DE45ii51/2Kat9tA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/figures": "^1.0.5",
+        "@inquirer/type": "^1.5.2",
+        "@types/mute-stream": "^0.0.4",
+        "@types/node": "^22.1.0",
+        "@types/wrap-ansi": "^3.0.0",
+        "ansi-escapes": "^4.3.2",
+        "cli-spinners": "^2.9.2",
+        "cli-width": "^4.1.0",
+        "mute-stream": "^1.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^6.2.0",
+        "yoctocolors-cjs": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/@types/node": {
+      "version": "22.5.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
+      "integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@inquirer/core/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@inquirer/figures": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.5.tgz",
+      "integrity": "sha512-79hP/VWdZ2UVc9bFGJnoQ/lQMpL74mGgzSYX1xUqCVk7/v73vJCMw1VuyWN1jGkZ9B3z7THAbySqGbCNefcjfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/type": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.2.tgz",
+      "integrity": "sha512-w9qFkumYDCNyDZmNQjf/n6qQuvQ4dMC3BJesY4oF+yr0CxR5vxujflAVeIcS6U336uzi9GM0kAfZlLrZ9UTkpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mute-stream": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@mswjs/interceptors": {
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
+      "integrity": "sha512-3rDakgJZ77+RiQUuSK69t1F0m8BQKA8Vh5DCS5V0DWvNY67zob2JhhQrhCO0AKLGINTRSFd1tBaHcJTkhefoSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/logger": "^0.3.0",
+        "@open-draft/until": "^2.0.0",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.2.1",
+        "strict-event-emitter": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
+      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz",
+      "integrity": "sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "10.3.10"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
+      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
+      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
+      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
+      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
+      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
+      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
+      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
+      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
+      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@open-draft/logger": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz",
+      "integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.0"
+      }
+    },
+    "node_modules/@open-draft/until": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz",
+      "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.25",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
+      "integrity": "sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.0.tgz",
+      "integrity": "sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
+      "integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.0.tgz",
+      "integrity": "sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.0.tgz",
+      "integrity": "sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.0.tgz",
+      "integrity": "sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.0.tgz",
+      "integrity": "sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.0.tgz",
+      "integrity": "sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.0.tgz",
+      "integrity": "sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.0.tgz",
+      "integrity": "sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.0.tgz",
+      "integrity": "sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz",
+      "integrity": "sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.0.tgz",
+      "integrity": "sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.0.tgz",
+      "integrity": "sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.0.tgz",
+      "integrity": "sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.0.tgz",
+      "integrity": "sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
+      "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz",
+      "integrity": "sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz",
+      "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
+        "@babel/types": "^7.0.0"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
       }
     },
-    "node_modules/@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
+      "dependencies": {
+        "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@rushstack/eslint-patch": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
-      "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
-      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/counter": "^0.1.3",
-        "tslib": "^2.4.0"
-      }
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -1078,6 +2172,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mute-stream": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mute-stream/-/mute-stream-0.0.4.tgz",
+      "integrity": "sha512-CPM9nzrCPPJHQNA9keH9CVkVI+WR5kMa+7XEs5jcGQ0VoAGnLv242w8lIVgwAEfmE4oufJRaTc9PNLQl0ioAow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.16.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.1.tgz",
@@ -1116,6 +2220,27 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/statuses": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz",
+      "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/wrap-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
+      "integrity": "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.13.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.1.tgz",
@@ -1355,6 +2480,162 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
+      "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.5",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.1",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
+    "node_modules/@vitest/coverage-v8": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.0.5.tgz",
+      "integrity": "sha512-qeFcySCg5FLO2bHHSa0tAZAOnAUbp4L6/A5JDuj9+bt53JREl8hpLjLHEWF0e/gWc8INVpJaqA7+Ene2rclpZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@bcoe/v8-coverage": "^0.2.3",
+        "debug": "^4.3.5",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-lib-source-maps": "^5.0.6",
+        "istanbul-reports": "^3.1.7",
+        "magic-string": "^0.30.10",
+        "magicast": "^0.3.4",
+        "std-env": "^3.7.0",
+        "test-exclude": "^7.0.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "2.0.5"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
+      "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.0.5",
+        "@vitest/utils": "2.0.5",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
+      "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.5.tgz",
+      "integrity": "sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "2.0.5",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.5.tgz",
+      "integrity": "sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.0.5",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz",
+      "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/ui": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-2.0.5.tgz",
+      "integrity": "sha512-m+ZpVt/PVi/nbeRKEjdiYeoh0aOfI9zr3Ria9LO7V2PlMETtAXJS3uETEZkc8Be2oOl8mhd7Ew+5SRBXRYncNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "2.0.5",
+        "fast-glob": "^3.3.2",
+        "fflate": "^0.8.2",
+        "flatted": "^3.3.1",
+        "pathe": "^1.1.2",
+        "sirv": "^2.0.4",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "2.0.5"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
+      "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.0.5",
+        "estree-walker": "^3.0.3",
+        "loupe": "^3.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1378,6 +2659,19 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1650,6 +2944,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -1657,6 +2961,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1781,6 +3092,16 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -1841,6 +3162,23 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1858,6 +3196,16 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1912,6 +3260,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/cli-truncate": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
@@ -1983,12 +3344,77 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/cli-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2016,6 +3442,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2040,6 +3479,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2055,6 +3504,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2068,6 +3524,26 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
+      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rrweb-cssom": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cssstyle/node_modules/rrweb-cssom": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2082,6 +3558,20 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -2154,6 +3644,23 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2230,6 +3737,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2270,6 +3797,13 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2305,6 +3839,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/environment": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
@@ -2505,6 +4052,45 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -3162,6 +4748,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3271,6 +4867,13 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3363,6 +4966,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3434,6 +5052,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
@@ -3447,6 +5075,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -3645,6 +5283,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/graphql": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
+      "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -3733,6 +5381,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/headers-polyfill": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
+      "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/hermes-estree": {
       "version": "0.20.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz",
@@ -3750,6 +5405,54 @@
         "hermes-estree": "0.20.1"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/human-signals": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -3776,6 +5479,19 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3813,6 +5529,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -4089,6 +5815,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-node-process": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
+      "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4125,6 +5858,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -4289,6 +6029,60 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.23",
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
+      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
@@ -4348,6 +6142,47 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "24.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.1.tgz",
+      "integrity": "sha512-5O1wWV99Jhq4DV7rCLIoZ/UIhyQeDR7wHVyZAHAshbrvZsLs+Xzz7gtwnlJTJDjleiTKh54F4dXrX70vJQTyJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.0.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.4",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -4655,6 +6490,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4812,12 +6654,83 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+    "node_modules/loupe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/magicast": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.4.tgz",
+      "integrity": "sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.24.4",
+        "@babel/types": "^7.24.0",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -4850,6 +6763,29 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -4876,6 +6812,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4909,6 +6855,16 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4916,6 +6872,73 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/msw": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.3.5.tgz",
+      "integrity": "sha512-+GUI4gX5YC5Bv33epBrD+BGdmDvBg2XGruiWnI3GbIbRmMMBeZ5gs3mJ51OWSGHgJKztZ8AtZeYMMNMVrje2/Q==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bundled-es-modules/cookie": "^2.0.0",
+        "@bundled-es-modules/statuses": "^1.0.1",
+        "@bundled-es-modules/tough-cookie": "^0.1.6",
+        "@inquirer/confirm": "^3.0.0",
+        "@mswjs/interceptors": "^0.29.0",
+        "@open-draft/until": "^2.1.0",
+        "@types/cookie": "^0.6.0",
+        "@types/statuses": "^2.0.4",
+        "chalk": "^4.1.2",
+        "graphql": "^16.8.1",
+        "headers-polyfill": "^4.0.2",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.2",
+        "path-to-regexp": "^6.2.0",
+        "strict-event-emitter": "^0.5.1",
+        "type-fest": "^4.9.0",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "msw": "cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mswjs"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.7.x"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/msw/node_modules/type-fest": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.25.0.tgz",
+      "integrity": "sha512-bRkIGlXsnGBRBQRAY56UXBm//9qH4bmJfFvq83gSz41N282df+fjy8ofcEgc1sM8geNt5cl6mC2g9Fht1cs8Aw==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
+      "integrity": "sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -5077,6 +7100,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
+      "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5267,6 +7297,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz",
+      "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -5319,6 +7356,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5373,6 +7423,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+      "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -5383,6 +7440,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -5726,6 +7800,41 @@
         }
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5738,6 +7847,13 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5748,6 +7864,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5801,6 +7924,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5824,6 +7957,20 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -5846,6 +7993,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -5865,6 +8019,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -5993,6 +8164,49 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rollup": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
+      "integrity": "sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.21.0",
+        "@rollup/rollup-android-arm64": "4.21.0",
+        "@rollup/rollup-darwin-arm64": "4.21.0",
+        "@rollup/rollup-darwin-x64": "4.21.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.0",
+        "@rollup/rollup-linux-arm64-musl": "4.21.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.0",
+        "@rollup/rollup-linux-x64-gnu": "4.21.0",
+        "@rollup/rollup-linux-x64-musl": "4.21.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.0",
+        "@rollup/rollup-win32-x64-msvc": "4.21.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6054,6 +8268,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -6149,6 +8383,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -6162,6 +8403,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -6224,6 +8480,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -6245,6 +8525,13 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/strict-event-emitter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
+      "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -6476,6 +8763,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -6561,6 +8861,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/synckit": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
@@ -6626,6 +8933,47 @@
         "node": ">=6"
       }
     },
+    "node_modules/test-exclude": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz",
+      "integrity": "sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^10.4.1",
+        "minimatch": "^9.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/test-exclude/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/test-exclude/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6656,6 +9004,43 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinypool": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz",
+      "integrity": "sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
+      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -6679,6 +9064,45 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -6858,6 +9282,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
@@ -6899,6 +9333,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6906,6 +9351,214 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vite": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
+      "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.41",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.5.tgz",
+      "integrity": "sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.3.5",
+        "pathe": "^1.1.2",
+        "tinyrainbow": "^1.2.0",
+        "vite": "^5.0.0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.5.tgz",
+      "integrity": "sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@vitest/expect": "2.0.5",
+        "@vitest/pretty-format": "^2.0.5",
+        "@vitest/runner": "2.0.5",
+        "@vitest/snapshot": "2.0.5",
+        "@vitest/spy": "2.0.5",
+        "@vitest/utils": "2.0.5",
+        "chai": "^5.1.1",
+        "debug": "^4.3.5",
+        "execa": "^8.0.1",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.8.0",
+        "tinypool": "^1.0.0",
+        "tinyrainbow": "^1.2.0",
+        "vite": "^5.0.0",
+        "vite-node": "2.0.5",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "@vitest/browser": "2.0.5",
+        "@vitest/ui": "2.0.5",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7005,6 +9658,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7123,6 +9793,55 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -7143,6 +9862,57 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -7156,6 +9926,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoctocolors-cjs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
+      "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index f01a6ec..9587dbe 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,10 @@
     "preview": "next build && next start",
     "lint": "next lint",
     "format:fix": "prettier . --write",
-    "prepare": "husky"
+    "prepare": "husky",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "next": "14.2.5",
@@ -17,11 +20,18 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/ui": "^2.0.5",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
@@ -30,11 +40,14 @@
     "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.1.5",
+    "jsdom": "^24.1.1",
     "lint-staged": "^15.2.9",
+    "msw": "^2.3.5",
     "postcss": "^8.4.41",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.10",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vitest": "^2.0.5"
   }
 }
diff --git a/public/assets/rss-logo.svg b/public/assets/rss-logo.svg
new file mode 100644
index 0000000..5401fc6
--- /dev/null
+++ b/public/assets/rss-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64"><g clip-path="url(#a)"><circle cx="32" cy="32" r="32" fill="#000"/><path fill="#FFB749" fill-rule="evenodd" d="M13 21.51V42.5l6.307-.038v-8.515c.75 0 1.455.03 2.098.48.49.452.879 1.007 1.141 1.627l3.374 6.408H33c-1.404-2.795-2.53-6.33-4.945-8.452a6.3 6.3 0 0 0-1.644-.769 7.9 7.9 0 0 0 2.22-.833c1.755-1.07 2.76-3.027 2.713-5.07a5.9 5.9 0 0 0-.945-3.394c-1.473-2.256-4.465-2.523-6.933-2.434zm8.994 8.502H19.33v-4.314h2.773c1.377-.139 3.077.477 2.982 2.106.064 1.758-1.721 2.109-3.092 2.208" clip-rule="evenodd"/><path fill="#FFB749" d="M39.477 35.089 33 35.467c.126 1.9 1.002 3.693 2.464 5.042q2.172 1.985 7.788 1.985c3.104.088 6.654-.68 8.569-3.337A6.08 6.08 0 0 0 53 35.564c.022-2.38-1.566-4.334-3.696-5.25A29.7 29.7 0 0 0 42.92 28.5a5.8 5.8 0 0 1-2.278-.743c-.738-.497-.564-1.53.093-1.997 1.873-1.24 4.895-.206 5.126 2.143l6.424-.34c-.115-1.795-1.1-3.508-2.65-4.605a11.9 11.9 0 0 0-6.436-1.437 15.1 15.1 0 0 0-5.43.792c-2.16.8-3.94 2.751-3.935 5.14-.04 1.485.682 2.956 1.921 3.91a15.6 15.6 0 0 0 6.384 2.435 9 9 0 0 1 3.483 1.218c.966.715.959 2.151-.026 2.874-1.088.763-2.693.852-3.914.357-1.31-.531-2.077-1.769-2.205-3.158"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index e7ff90f..d1aa480 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,8 +19,9 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "types": ["vitest/globals", "vitest/jsdom", "@testing-library/jest-dom"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "vitest.config.mts"],
   "exclude": ["node_modules"]
 }
diff --git a/vitest.config.mts b/vitest.config.mts
new file mode 100644
index 0000000..a392d65
--- /dev/null
+++ b/vitest.config.mts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    coverage: {
+      provider: 'v8',
+      exclude: ['**/.eslintrc.cjs', 'vitest.config.mts', 'next.config.mjs', 'next-env.d.ts'],
+    },
+    css: false,
+  },
+});
diff --git a/vitest.setup.ts b/vitest.setup.ts
new file mode 100644
index 0000000..4a00608
--- /dev/null
+++ b/vitest.setup.ts
@@ -0,0 +1,14 @@
+/// <reference types="vitest/globals" />
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+import { server } from './__test__/mock/server';
+
+beforeAll(() => server.listen());
+
+afterEach(() => {
+  cleanup();
+  server.resetHandlers();
+});
+
+afterAll(() => server.close());

From 505db2285a9caa6532b434fa9406da214a9a0b9c Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 22 Aug 2024 15:51:17 +0400
Subject: [PATCH 004/157] chore: add necessary packages

---
 package-lock.json | 665 ++++++++++++++++++++++++++++++++++++++++++----
 package.json      |   9 +-
 2 files changed, 624 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d579252..ec11381 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,16 @@
       "name": "graphiql-app",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
+        "@hookform/resolvers": "^3.9.0",
+        "@mui/material": "^5.16.7",
         "next": "14.2.5",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-hook-form": "^7.52.2",
+        "sonner": "^1.5.0",
+        "yup": "^1.4.0"
       },
       "devDependencies": {
         "@testing-library/dom": "^10.4.0",
@@ -82,7 +89,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/highlight": "^7.24.7",
@@ -150,7 +156,6 @@
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz",
       "integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.25.0",
@@ -242,7 +247,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
       "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.24.7",
@@ -344,7 +348,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
       "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -354,7 +357,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
       "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -388,7 +390,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -404,7 +405,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^1.9.0"
@@ -417,7 +417,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
@@ -432,7 +431,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
@@ -442,14 +440,12 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -459,7 +455,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -469,7 +464,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
@@ -482,7 +476,6 @@
       "version": "7.25.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
       "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.25.2"
@@ -548,7 +541,6 @@
       "version": "7.25.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
       "integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -561,7 +553,6 @@
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
       "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
@@ -576,7 +567,6 @@
       "version": "7.25.3",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
       "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
@@ -595,7 +585,6 @@
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
       "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
@@ -644,6 +633,158 @@
         "tough-cookie": "^4.1.4"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
+      "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.1.tgz",
+      "integrity": "sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -1111,6 +1252,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
+      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1348,7 +1498,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1363,7 +1512,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1373,7 +1521,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1383,14 +1530,12 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1415,6 +1560,216 @@
         "node": ">=18"
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
+      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
+      "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.16.7",
+        "@mui/system": "^5.16.7",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.6",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz",
+      "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.16.6",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz",
+      "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
+      "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.16.6",
+        "@mui/styled-engine": "^5.16.6",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.6",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.15",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz",
+      "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/@next/env": {
       "version": "14.2.5",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
@@ -1737,6 +2092,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -2192,18 +2557,22 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
       "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -2220,6 +2589,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/statuses": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz",
@@ -3004,6 +3382,21 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3126,7 +3519,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -3415,6 +3807,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3489,6 +3890,31 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3548,7 +3974,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -3630,7 +4055,6 @@
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
       "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -3804,6 +4228,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3865,6 +4299,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -4105,7 +4548,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -4900,6 +5342,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -5007,7 +5455,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5213,7 +5660,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -5372,7 +5818,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -5405,6 +5850,15 @@
         "hermes-estree": "0.20.1"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -5506,7 +5960,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -5607,6 +6060,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -5683,7 +6142,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -6187,7 +6645,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -6203,6 +6660,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -6304,7 +6767,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lint-staged": {
@@ -6869,7 +7331,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/msw": {
@@ -7111,7 +7572,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7347,7 +7807,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -7356,6 +7815,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -7403,7 +7880,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -7434,7 +7910,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7839,7 +8314,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -7847,6 +8321,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -7917,11 +8397,26 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.52.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.2.tgz",
+      "integrity": "sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -7934,6 +8429,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7997,7 +8508,6 @@
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/regexp.prototype.flags": {
@@ -8040,7 +8550,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -8058,7 +8567,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -8471,6 +8979,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.5.0.tgz",
+      "integrity": "sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -8812,6 +9339,12 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -8852,7 +9385,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9004,6 +9536,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -9045,7 +9583,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -9064,6 +9601,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -9939,6 +10482,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index 9587dbe..8c1495a 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,16 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@mui/material": "^5.16.7",
     "next": "14.2.5",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.2",
+    "sonner": "^1.5.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",

From 7333df8e62221ad157b2efb4fe45c49afa28f021 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 22 Aug 2024 16:00:24 +0400
Subject: [PATCH 005/157] feat: create basic Layout template

---
 app/layout.tsx              |  8 +++++++-
 components/Footer/index.tsx | 10 ++++++++++
 components/Header/index.tsx | 25 +++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 components/Footer/index.tsx
 create mode 100644 components/Header/index.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 83866ba..a8d7205 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -16,7 +18,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${inter.className}`}>
+        <Header />
+        {children}
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
new file mode 100644
index 0000000..ff49d67
--- /dev/null
+++ b/components/Footer/index.tsx
@@ -0,0 +1,10 @@
+function Footer() {
+  return (
+    <footer className="flex h-14 items-center justify-between bg-blue-600 text-white">
+      <ul>Github Links</ul>
+      <p>2024</p>
+      <span>Course Logo</span>
+    </footer>
+  );
+}
+export default Footer;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
new file mode 100644
index 0000000..aac4ae0
--- /dev/null
+++ b/components/Header/index.tsx
@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import { routes } from '@/constants/routes';
+function Header() {
+  const isLogin = false;
+  return (
+    <header className="flex h-20 items-center justify-between bg-blue-600 text-white">
+      <div>
+        <Link href={routes.home}>Home</Link>
+      </div>
+      <div>
+        <button type="button">EN</button>
+        {isLogin ? (
+          <div>
+            <Link href="/login">Sign In</Link>
+          </div>
+        ) : (
+          <div>
+            <button type="button">Sign Out</button>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
+export default Header;

From 7b74e084fb5de28d817f120d54e8ca25d0f6a083 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 22 Aug 2024 16:03:01 +0400
Subject: [PATCH 006/157] feat: create empty pages and files for team

---
 app/[rest]/page.tsx                  |   3 +++
 app/favicon.ico                      | Bin 25931 -> 15406 bytes
 app/graphql/[[...endpoint]]/page.tsx |   4 ++++
 app/history/page.tsx                 |   3 +++
 app/login/page.tsx                   |   4 ++++
 app/not-found.tsx                    |  12 ++++++++++++
 constants/routes.ts                  |   8 ++++++++
 hooks/useLocalStorage.ts             |   0
 types/personType.ts                  |   0
 9 files changed, 34 insertions(+)
 create mode 100644 app/[rest]/page.tsx
 create mode 100644 app/graphql/[[...endpoint]]/page.tsx
 create mode 100644 app/history/page.tsx
 create mode 100644 app/login/page.tsx
 create mode 100644 app/not-found.tsx
 create mode 100644 constants/routes.ts
 create mode 100644 hooks/useLocalStorage.ts
 create mode 100644 types/personType.ts

diff --git a/app/[rest]/page.tsx b/app/[rest]/page.tsx
new file mode 100644
index 0000000..053cf6d
--- /dev/null
+++ b/app/[rest]/page.tsx
@@ -0,0 +1,3 @@
+export default function RESTfull() {
+  return <main className="">Rest</main>;
+}
diff --git a/app/favicon.ico b/app/favicon.ico
index 718d6fea4835ec2d246af9800eddb7ffb276240c..39f12fff2ad904a7c0f56211fe8cd27f00fe97d1 100644
GIT binary patch
literal 15406
zcmeHO30PI<nI>zKnV6+dCzEOG)XtNnX{Xc4)TT+?z$KX`vm~uWjheWlsJI}Cf(x3o
z+GZwWV)De@jHWdrC?J@)k|_JC2!hCt2#D;<g?rEW-+BLYIhVuboC|8Td7kNgo|pgp
z-+umc?z#W@z7H?2yS(o4dh}5*jzhfW-RtG`b1yHiAw!(=XCCwN+D+QC&vx^l_VP;l
z8!xYCC_@!$IO!ZLKNu0d7sC&>W5mH3x)6L055e&8QlbdYM}F5uA09cEv<}K{moyB`
zxDTVF6!=5|KGDZraz2M=IccPij+)#<k2<5#M@Mx*h9+(N+p$nF<xC64#*TK$jfj0r
z_{OJ+@uw5<{LzP9^f5<X7E{l*;gv6z>9me`e77qB#T^NFL8AQ({!a27$q02MLX+!A
z!gq9jS0XA~;_)qAzb*lT9I1%uO2y}0Daf>^<9{{%bn2%$_3ddmU{6I_w@ftR@qn%`
zNBE`;#jjId!#gE!D?6&c#Q3Dw)eovZRX1PRBaf9`wTbG6;<cL0_@sZ)b@6)kqnMZx
zj|u6xAxum^3EzxIFePUfCZB_bnHL~JiXi6YK?GfbSX=-RkniMCMyxIZrsufkn0$UG
zrsXwadLHT2SyKx2^Hzxex&n27J;cshh^;jmPx93hZ4j$UTyspj*nnA=uM?0EVU<wN
z+o7IrgBsBU@yT_lXFDK1s@3>vd^>$qXvf_;b(mZBA?B4qLj0x%BC87`mN7)PK>VQ*
z;skXvN!v(Xf(>GQwI=J-Dc_7Y&;K<RUOhwr!IUXdAPOA74(cADjXXO<u>!2S29eSU
z{H6|??1HKTSX%j@cJ1cpK7^%pDgmr+05&#4I}WV}HaAn3G|Ah*aoKfw+yOt_r(Z+O
z#`31)Sl)yIA*lI%qpqgEs_Pkqbkt*22YMl-!+}-pnWPD<vbAAl+h&C2-tVrj*$C@=
z5^EjdL^IYZHmq^PBg`>M<1NL52**8UdbdK8&zT{F4<VmV{eAFU_!Ag@AcoJ7PND?E
zBPLksz$gA*%D#tT;Z2mS=lBl1!tS<|A9ipC<tqpq<-_q}_&42UF(TqL0T)I_C>Ryt
z`aT-vF*0JUORh&}kx@oJ#>hk77!fIY%O5<X^W}(fCmw-!l;E?K&q@PEN3Au=>Bp4K
z>Ln+2ybqn$`Nom5@AZ{E?0|2$>zd=0qu;=on0Abg<}=xVF);x~Tlz6&PW6)0bYdcO
zzHy}78WY(%{TZ*z@)^IDfD7YdOBlEOsp|8APwY61jkCLC$Hv((I_~*Cf+WBv?g@;G
zyV@fweH>YAD(jcFNDa<~vMeVJBaiae()xp!j}28q@*L{QycQn+*jkb?ycGRyu_7l|
zT}j(-B~P=GmA^yw1i*e4`>kY*bjsTJ`&MnFSshdEb7{LP9`dVc`qBI+Q6>plok>_?
zggpf_+@BNnB>GS8?H{?g-=2&)MqPPKoB5QNwk`d)C*!B|11mUE;Mxbs6QG=pzq`H8
zUrEI;t@I@wsrbI>$&*O#U0rFI+L^+0H-NwKiTv${BNP8>)ODo8M)dZdiHTB{Iwy@b
z<gt<l%V(O=uKTf)g^%eQj&pAQGwDCm&Hp(})MT@;(cMmebA;h;?pI#oUgWp<RmyIR
zPvIUVWseBTFHkpdk1*%lah)bdb$yW{!Y+3hY4FeaQp$>@7jq2sU9|Z&ex2?EFWhAo
z2PURH$9>KP_@?1DBa8OAEAIJVQnnBGS{(%L5ZW*$d$^1MlXD)!<m_6!k&Qcw$=O%6
zJ?7M$HQX!0406w?oaNpss8HjpTdJU*Y6E8EI_HNPwf*2gbj@Ti^+E`y<z^5tgV<IB
zg<DARKKF2xQNL()&I3v0T*+6Voa3I(MBiQ4Oosc^bWAU3#&qt5O(1q$gIY}gTe!C*
zUp>zKtDFb%kDM2(P;=;i0J>%}n(tYc8!(gWYXY&W4l1|6V$XGmz!IombvWlMNTj@4
zME@7LuO$!u{C*m2xOC+n+d%JiJgcw)vx^c4m_hngxh;2xSV<yv)DqFdD-#gmjeJIM
zZOGGg#nx-4ww?Zp&tPtO0Opp$3}SBs#1)=@4)^MbybpQ4+B}p*>WFgstRRfMkGLO~
zJY9D?_vIG$;aBPp-^vH!Ur|VK4SPd;%6AoBda;Z9d-60ta=wOt<h+u;FY_Hj9=})T
zls(q&oa?$fox1L}InU+uR@<**LHR#oVO0$lRKW=G5#P0V`2^pc#6HGyh5o7p5O`IS
zlgFZhYqEpuB)_LpHnPRZ`(v|nzMI#?%`SaaVt(b5Jx@SBhvrue#-i#t1n}H+Ea7`o
z2H&x`ggUUF_PhDwD*YRH+FGn+5abKWNgnp_-AA`4$A#4qSX}$JM&J4|mR$WImhgTt
zB9PZ}Cw)fnx%1yV7bEXuzJnd+dQ0qU<$E3->iiHMAE1trCV2tXmis#R=H8FM>m3N>
z``zupvid^(T&+gFCmuo&&-1pRCD6*RPDgOd2&`xoSiv>_QzEz}L%-j3UsfYlw(lVD
zC&Q}tbcD2--g9O#AOPP$sO=bm0iqe9oq?1+%hBP~=@dN9MM&pjtM_s<-#QK3a39~-
ze~&eG2LVg0<!&zwKXU2G_xVr^Ce4)_(|I>D($13zQ-4pKBiacCVSEa&QzDs57*D?C
zd-u)w`~RjRUxwsnbUHDRJPE~^Qw+ZcBR>0Q4Ev1v+3*JDHJUN(KrCK7I1E1uH_ZV_
zJ>y4SH|9ZpPDIj13(?3t%3eGl@e`{(x=~*q!)MO}7;#`6^-fa1mAJ-Ow&KNzXFTR(
zyd$4uo;Z)WW%NcwEk;F7H0CDUed==zix^Mcn%?@-UPLKI9U7y{S&bOF?LOvl<}feQ
z=w^etnuF;W8SeT{x!b_V$S(+3AOSw%Pq^zC=NJ?I9p;2CSm@L4p;U|uf5fQcevDE3
z2Q&UW3mby;J?=Vkju*f9CPp0=%ooX=kqHiWVq}!%xob8?MZHShdUJivW(`I~4Kwqv
z)8G>`0^T0uXf?ZsFg)h(UG)R4wh+afnE|7tROXF(z2E6R^%0|@f5qBEQ!hQE4WH<1
z7#rOy*P!d_BWoJJu-0chvi9NI_q(X&F2}@FG2aGr94W`kF_t+B=^vvH52daL8!=_f
zcm0DNtJ#Qgu|K4ZM)MeCY)3N9^dyb8=Mx>hb84~7tHn8J_kZ|I(eme(`d)nYjEUP#
zeZ|BE^LlZ=v(nY+7@jbQx_c~av|&uFuP*C8VtDi*<^;nq?r1du4KE#SB<*9y^*wia
zvpIZ@d<!of-9lU=x@~-3#p6x<{y$`<<4$8<^au30mpW~RILbL+hW|M7SMKu0xm;uW
zj+!OPPQD{=uYqH0_4<MO)$PDH=|RVinvITa)vB_sx>Mb8ZKccw>->R?lz&*+S-X|`
zP<CB|@_yB%f!bi6^G!nLJ7G_RX|B1y7+A*(roKYh>`9p0pS&5r>nt|uaoEmateK1%
zjWNGT$k=Z!{zS%~cnk3-GXCy3ZaDsA#_mLZXEKhPf%Vd8B?YgV?e)kDroKYhSO@L1
z{(J+xhdEzgBG$~dq*1q|I|kU22EP8R-A?wD>viLuLPk$*SHGUD?*>y&A#BXs_KCke
z0pBJs)6JH3jyeh6y6yhP&Qv_jJaIN-XyDlB4%V2PNK?74Ad-=WKKlws2IEg<{Hf;g
zQ)e)3<ZCu)i#GfC(fl$7@{({KkM|e1&X@Z{SwBZMo-zaN4YOyUoH2s1jGsAlMds2~
zll9l)&p^Jk!Ru3ubo|)N7xU{+wVAAs9_!7F(w>ruA}ybuX%T-Gg2`71o0{48{=o&V
ze<tH+{$7r7>kqh@xZHKXR|iZ<c^I#y4aV!qLv+|T6hEh&w3R#JJK;Fdkp<3mo<6EE
zEt?#tJ5}X$XQvw36r$7h(Xpv)m~zTiByG@E5&X~pK<8=WYhMk<e<loak7*!tuvU%<
zDN|V+h$ixh64ne#U6_zsA!cSd#H?(H8Cjj++{M%7re-uqK4xVLF(v(aAHLL?k!9Cp
zIMPR1FBzxLi=;(heEN9!_FoIf^wJ05oBB)E5iW6Lz2fVHv>dMKt5(0k%yB)037NlR
zoulD~`buuJ59L<mCuY=PV%B=OKQZ1%T7GU)_I6Clv=jK6qYH0jeE`30T0e;PzWqk#
z4AyvB?`WOp*6K>ltWQlrSlHd{r+J*cL}y(+MS5?M**J^+M(?n1C-4$5^}MsMXbSs`
zIG1$z<@NL$vF}K%D`8HZb%VEZdgx|$X-n3k#M`VFOuyh+R@a|$E?$fMt(;d_Z?Y4N
z$urbXuS2<@K=w6Z9&1BVeqjNWFFTxc?sK(z66s=N1(YlYlr-ka!x)z*+Y1WV_hf^T
z!<x-j=E6P6x_B&pOuO(h-pbuUaE<zh?5C1-GbNj~sl}`<QAdQ7Xmd$d`Ra=~7oBuj
zV=EM_r7@Q;>ujFvv+kzV+@y^d=H5NY8hLN#Ze#r`2h-_u0MP1OEJ>;78UIoqP)CH8
zYI9Z6qv_kPz)9a;3-vPVP?s407RK+%eh_O`1+1A#8?m(EN!G}lmVX{I3hD{gKKqC4
zZBtp2(`ti(ysxPvR+njWjedl_=kmHp`c7G6Wc<7a;zQmOp6oAY4N%q`rR}3Fo@IO4
z$**VK?;2+E`#1oo3C=pBnx`-a&+qFz_V8_B4<F~U9;wFBw?A(J+S2NbrHsFb@yl8t
zWif~6X69!_sk3G&ZLpuvRK`qiW??O66{qO^g#C?bk_~D(eaLk^)~emBvTm)-CH*LU
z&*ycKy@|V7<7DkpJ1^D|<$Wy<vPW<;`y0DuT>gT~X@l!8ZP2cZ-reVDIiFpWggGVe
zYPC^WAMFQfGUKSE4=b<^j)i>I(2n?|-WiX(tgH>oHJ;0xMfbO=0;;@LQuYLSI=#Qq
zuXrP7m%aeMvUd2<Z$A*Joz6Nf{fNt~PZsidCu_HIF6+6+_*@O(BGQglr`74KCu_2d
zQInIh`&d7f^;_vP<chQAE9oa$AL=I#jX$@n6*DV-2LJNMSaUs$c`O>wqi+uo>5QL`
z62WUNK4k5EBl}%<vKA}nlFr^!EN0NOA@=cJVcAxz1s`I~a}#AhAx)mIlx6Lf{iIHR
ztFJoi)slXSHax`8&6BYnfM4+=@?DEH+g}iM1n*62h;;rI@%GjFTSKcgS?wHT53Hoi
zwOhhPqz&;0)|F*EvbHSi+|q7P6|`$8WiL@@wbKUHvaT!TB%Qx8o?>wFuGGN4)Z183
z!2B!ASdVVO0{XXr*4tZ49|ZRES-FOFXx6p0db6Y-;k~<<i%xwZ>)bLPS&Npk@_aww
zwJPKKOW8dBhAig^N?+?}N7l?GoxkN){=4ao@UNV0+<(erZ6CLwYBmC{7P6Ktw4Pzv
zV{F8`yl12zJ`OdM$aU|YvtExaT;~9%j#ej^@krTn#>{>K?OeKb5y^AymPHtQmF0O#
z-Wk>=jXryh1#8?FSkHgMJ$8LA-*K?8=ARHy6OBb&Ja;T6Z6DWL##~QdI#^Oi1mjuS
zqa*%EIT?>GqmNSdOU4+)lhf_5XODzj7s}u?*I%a_$AId+T>qyBR0CRE^Y5;Dzh3v(
z$E6JFeeQD-*xP-P_kbKXbFTCCaXo`cB9HgE3+yY$C;W{IV()=2C&v|>NAtdy{I_`x
zjXeFB>#DDFe<Kz(Kc)4L%O3Kt1D0HGhTm0>d1vD}Y4_2xhAJ%MT6`_gc+eQ%K#tjG
zvE}ykTHI(4N0SXfP2&a<vrz^snqMFqu$<4nKOfjH(sU3@8cqAPjq$o4^E)+&|GV%h
zg85web75s$1y;2G%=kOy9;c@{mbZHI94ZO!m+vInRsIi11y<U8JjK@^Py0;^vCT$^
zt+m(xn7IGX$$;m!TH5LKY|GX`{%7p*8QNcb1L5-=?q%Q2G_3AyCUDaTwH2^e=vl1p
zdYv|oaBO$8RY%%B{?Cm!f}!op1`^*uWVGk$nyyLg^(iD&%bp+8ejrB&|F0(&p&f&b
zzPK*;V>R>hVfLSL{JzY&8u_>57-3yM!8*sg>|eS>s06H`bWrvytX2K73YNWjw<AtZ
zHnnwo2j4@OGKsxT``Gi8Pqbsbko`~f98<7PeHUxsP1(n}qcQDk_vGU*yuYl#omzqa
E180lT<^TWy

literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/graphql/[[...endpoint]]/page.tsx
new file mode 100644
index 0000000..59d875f
--- /dev/null
+++ b/app/graphql/[[...endpoint]]/page.tsx
@@ -0,0 +1,4 @@
+function GraphQL() {
+  return <div>Endpoint</div>;
+}
+export default GraphQL;
diff --git a/app/history/page.tsx b/app/history/page.tsx
new file mode 100644
index 0000000..14f01fc
--- /dev/null
+++ b/app/history/page.tsx
@@ -0,0 +1,3 @@
+export default function Hisory() {
+  return <main>History</main>;
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..1789f35
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,4 @@
+function Login() {
+  return <main>Login Page</main>;
+}
+export default Login;
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..ab7c04b
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+function NotFound() {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center text-white">
+      <h3>404 Page Not Found</h3>
+      <Link href="/">Back to Home </Link>
+    </div>
+  );
+}
+
+export default NotFound;
diff --git a/constants/routes.ts b/constants/routes.ts
new file mode 100644
index 0000000..e8fae12
--- /dev/null
+++ b/constants/routes.ts
@@ -0,0 +1,8 @@
+export const routes = {
+  home: '/',
+  login: '/login',
+  loginOut: '/login-out',
+  graphql: '/graphql',
+  restfull: '/rest',
+  histor: '/history',
+};
diff --git a/hooks/useLocalStorage.ts b/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..e69de29
diff --git a/types/personType.ts b/types/personType.ts
new file mode 100644
index 0000000..e69de29

From 9d7cafb291a8f79fd832f781ca43170c0a02b385 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Thu, 22 Aug 2024 20:43:19 +0200
Subject: [PATCH 007/157] feat: add basic sign in form

---
 .gitignore                      |  3 +++
 app/login/page.tsx              | 10 ++++++++-
 components/FormSignIn/index.tsx | 37 +++++++++++++++++++++++++++++++++
 interfaces/signin.interface.ts  |  4 ++++
 validation/index.ts             | 12 +++++++++++
 5 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 components/FormSignIn/index.tsx
 create mode 100644 interfaces/signin.interface.ts
 create mode 100644 validation/index.ts

diff --git a/.gitignore b/.gitignore
index fd3dbb5..79064ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# WebStorm
+.idea
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 1789f35..af876f4 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,4 +1,12 @@
+import FormSignIn from '@/components/FormSignIn';
+
 function Login() {
-  return <main>Login Page</main>;
+  return (
+    <main>
+      Login Page
+      <FormSignIn></FormSignIn>
+    </main>
+  );
 }
+
 export default Login;
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
new file mode 100644
index 0000000..25e3f89
--- /dev/null
+++ b/components/FormSignIn/index.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { SignInData } from '@/interfaces/signin.interface';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { validationSchema } from '@/validation';
+
+function FormSignIn() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitted },
+  } = useForm<SignInData>({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const onFormSubmit = (data: SignInData) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <label htmlFor="email">Login</label>
+      <input type="email" id="login" {...register('login')} />
+      {errors.login && <div className="error">{errors.login.message}</div>}
+      <label htmlFor="password">Password</label>
+      <input type="password" id="password" {...register('password')} />
+      {errors.password && <div className="error">{errors.password.message}</div>}
+      <button type="submit" disabled={!isValid && isSubmitted}>
+        Sign in
+      </button>
+      <p>If you do not have an account, please Sign up</p>
+    </form>
+  );
+}
+
+export default FormSignIn;
diff --git a/interfaces/signin.interface.ts b/interfaces/signin.interface.ts
new file mode 100644
index 0000000..83f69b7
--- /dev/null
+++ b/interfaces/signin.interface.ts
@@ -0,0 +1,4 @@
+export interface SignInData {
+  login: string;
+  password: string;
+}
diff --git a/validation/index.ts b/validation/index.ts
new file mode 100644
index 0000000..853707f
--- /dev/null
+++ b/validation/index.ts
@@ -0,0 +1,12 @@
+import * as yup from 'yup';
+
+export const validationSchema = yup.object().shape({
+  login: yup.string().email('Invalid email address').required('Login is required'),
+  password: yup
+    .string()
+    .matches(/[0-9]/, 'Password must contain at least one number')
+    .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
+    .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
+    .matches(/[\W_]/, 'Password must contain at least one special character')
+    .required('Password is required'),
+});

From ecad1b8a66199f737b28ccbd11ded8e502b158dd Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 23 Aug 2024 06:05:29 +0400
Subject: [PATCH 008/157] refactor: using material ui nextjs integration

---
 app/globals.css    | 25 -------------------------
 app/layout.tsx     | 14 +++++++++++---
 package-lock.json  | 37 +++++++++++++++++++++++++++++++++++++
 package.json       |  2 ++
 tailwind.config.ts |  4 ++++
 5 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a0d367b..b5c61c9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,28 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index a8d7205..9b129c5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,7 @@
 import type { Metadata } from 'next';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { StyledEngineProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import { Inter } from 'next/font/google';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
@@ -19,9 +22,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${inter.className}`}>
-        <Header />
-        {children}
-        <Footer />
+        <CssBaseline />
+        <AppRouterCacheProvider>
+          <StyledEngineProvider injectFirst>
+            <Header />
+            {children}
+            <Footer />
+          </StyledEngineProvider>
+        </AppRouterCacheProvider>
       </body>
     </html>
   );
diff --git a/package-lock.json b/package-lock.json
index ec11381..18b6f6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,12 @@
       "name": "graphiql-app",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/cache": "^11.13.1",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@hookform/resolvers": "^3.9.0",
         "@mui/material": "^5.16.7",
+        "@mui/material-nextjs": "^5.16.6",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1615,6 +1617,41 @@
         }
       }
     },
+    "node_modules/@mui/material-nextjs": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-5.16.6.tgz",
+      "integrity": "sha512-Y64ybP5Pmy+GCUcu3SuMnc25CqFwBQkRn6XNXyhvc1mhR48Iq0oFKjoO5ncqfhm58OwPClIRW2tecP/PTdGNJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/cache": "^11.11.0",
+        "@emotion/server": "^11.11.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "next": "^13.0.0 || ^14.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/cache": {
+          "optional": true
+        },
+        "@emotion/server": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/package.json b/package.json
index 8c1495a..a66652a 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,12 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
     "@mui/material": "^5.16.7",
+    "@mui/material-nextjs": "^5.16.6",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fade3d3..a069ec2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,10 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
+  corePlugins: {
+    preflight: false,
+  },
+  important: true,
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',

From 0f910a5436010dd03b9967449dd6268ee4fc87e0 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 23 Aug 2024 09:02:01 +0200
Subject: [PATCH 009/157] feat: add basic layout for sign in form

---
 app/globals.css                 |  4 +++
 components/FormSignIn/index.tsx | 60 +++++++++++++++++++++++++++++----
 package-lock.json               | 27 +++++++++++++++
 package.json                    |  1 +
 4 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a0d367b..56af244 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,6 +8,10 @@
   --background-end-rgb: 255, 255, 255;
 }
 
+main {
+  background: yellow;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 25e3f89..b59609e 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -1,9 +1,21 @@
 'use client';
 
+import React from 'react';
 import { useForm } from 'react-hook-form';
 import { SignInData } from '@/interfaces/signin.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { validationSchema } from '@/validation';
+import {
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+  FormHelperText,
+  TextField,
+} from '@mui/material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 function FormSignIn() {
   const {
@@ -18,14 +30,50 @@ function FormSignIn() {
     console.log(data);
   };
 
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
-      <label htmlFor="email">Login</label>
-      <input type="email" id="login" {...register('login')} />
-      {errors.login && <div className="error">{errors.login.message}</div>}
-      <label htmlFor="password">Password</label>
-      <input type="password" id="password" {...register('password')} />
-      {errors.password && <div className="error">{errors.password.message}</div>}
+      <div>
+        <TextField
+          error={!!errors.login}
+          required
+          id="login"
+          label="Login"
+          type="email"
+          helperText={errors.login ? errors.login.message : ''}
+          {...register('login')}
+        />
+        <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" error={!!errors.password}>
+          <InputLabel htmlFor="password">Password</InputLabel>
+          <OutlinedInput
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            endAdornment={
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            }
+            label="Password"
+            autoComplete="current-password"
+            {...register('password')}
+          />
+          <FormHelperText>{errors.password ? errors.password.message : ''}</FormHelperText>
+        </FormControl>
+      </div>
       <button type="submit" disabled={!isValid && isSubmitted}>
         Sign in
       </button>
diff --git a/package-lock.json b/package-lock.json
index ec11381..6ad6f5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@hookform/resolvers": "^3.9.0",
+        "@mui/icons-material": "^5.16.7",
         "@mui/material": "^5.16.7",
         "next": "14.2.5",
         "react": "^18.3.1",
@@ -1570,6 +1571,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
+      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
diff --git a/package.json b/package.json
index 8c1495a..eb6362f 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
+    "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "next": "14.2.5",
     "react": "^18.3.1",

From 9d86cfde3fb2ede2947066427744027604fa212a Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 23 Aug 2024 10:22:45 +0200
Subject: [PATCH 010/157] feat: add redirect to home page after successful sign
 in

---
 app/login/page.tsx              |  2 +-
 components/FormSignIn/index.tsx | 81 +++++++++++++++++----------------
 constants/routes.ts             |  1 +
 validation/index.ts             |  3 +-
 4 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/app/login/page.tsx b/app/login/page.tsx
index af876f4..b3c352a 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -2,7 +2,7 @@ import FormSignIn from '@/components/FormSignIn';
 
 function Login() {
   return (
-    <main>
+    <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
       Login Page
       <FormSignIn></FormSignIn>
     </main>
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index b59609e..c68e05a 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -6,6 +6,7 @@ import { SignInData } from '@/interfaces/signin.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { validationSchema } from '@/validation';
 import {
+  Button,
   FormControl,
   IconButton,
   InputAdornment,
@@ -16,8 +17,11 @@ import {
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { useRouter } from 'next/navigation';
 
 function FormSignIn() {
+  const router = useRouter();
+
   const {
     register,
     handleSubmit,
@@ -26,8 +30,8 @@ function FormSignIn() {
     resolver: yupResolver(validationSchema),
   });
 
-  const onFormSubmit = (data: SignInData) => {
-    console.log(data);
+  const onFormSubmit = () => {
+    router.push('/');
   };
 
   const [showPassword, setShowPassword] = React.useState(false);
@@ -39,45 +43,44 @@ function FormSignIn() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div>
-        <TextField
-          error={!!errors.login}
-          required
-          id="login"
-          label="Login"
-          type="email"
-          helperText={errors.login ? errors.login.message : ''}
-          {...register('login')}
+    <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <TextField
+        error={!!errors.login}
+        id="login"
+        label="Login"
+        helperText={errors.login ? errors.login.message : ''}
+        {...register('login')}
+      />
+      <FormControl variant="outlined" error={!!errors.password}>
+        <InputLabel htmlFor="password">Password</InputLabel>
+        <OutlinedInput
+          id="password"
+          type={showPassword ? 'text' : 'password'}
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge="end"
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          }
+          label="Password"
+          autoComplete="current-password"
+          {...register('password')}
         />
-        <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined" error={!!errors.password}>
-          <InputLabel htmlFor="password">Password</InputLabel>
-          <OutlinedInput
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            endAdornment={
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  onClick={handleClickShowPassword}
-                  onMouseDown={handleMouseDownPassword}
-                  edge="end"
-                >
-                  {showPassword ? <VisibilityOff /> : <Visibility />}
-                </IconButton>
-              </InputAdornment>
-            }
-            label="Password"
-            autoComplete="current-password"
-            {...register('password')}
-          />
-          <FormHelperText>{errors.password ? errors.password.message : ''}</FormHelperText>
-        </FormControl>
-      </div>
-      <button type="submit" disabled={!isValid && isSubmitted}>
+        <FormHelperText>{errors.password ? errors.password.message : ''}</FormHelperText>
+      </FormControl>
+      <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
         Sign in
-      </button>
-      <p>If you do not have an account, please Sign up</p>
+      </Button>
+      <div className="flex flex-col items-center">
+        <p className="m-0">If you don&apos;t have an account, please</p>
+        <Button href="/signup">Sign up</Button>
+      </div>
     </form>
   );
 }
diff --git a/constants/routes.ts b/constants/routes.ts
index e8fae12..3fbb30a 100644
--- a/constants/routes.ts
+++ b/constants/routes.ts
@@ -2,6 +2,7 @@ export const routes = {
   home: '/',
   login: '/login',
   loginOut: '/login-out',
+  signup: '/signup',
   graphql: '/graphql',
   restfull: '/rest',
   histor: '/history',
diff --git a/validation/index.ts b/validation/index.ts
index 853707f..e2b4c23 100644
--- a/validation/index.ts
+++ b/validation/index.ts
@@ -4,9 +4,10 @@ export const validationSchema = yup.object().shape({
   login: yup.string().email('Invalid email address').required('Login is required'),
   password: yup
     .string()
+    .required('Password is required')
     .matches(/[0-9]/, 'Password must contain at least one number')
     .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
     .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
     .matches(/[\W_]/, 'Password must contain at least one special character')
-    .required('Password is required'),
+    .min(8, 'Password must be at least 8 characters long'),
 });

From b5d936d224dddbd8377aaa2ad0a95a45a2569f58 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 23 Aug 2024 10:52:45 +0200
Subject: [PATCH 011/157] feat: add signup page

---
 app/login/page.tsx                            |   2 +-
 app/signup/page.tsx                           |  12 ++
 components/FormSignIn/index.tsx               |   4 +-
 components/FormSignUp/index.tsx               | 112 ++++++++++++++++++
 interfaces/signin.interface.ts                |   4 +
 validation/{index.ts => signin.validation.ts} |   2 +-
 validation/signup.validation.ts               |  17 +++
 7 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 app/signup/page.tsx
 create mode 100644 components/FormSignUp/index.tsx
 rename validation/{index.ts => signin.validation.ts} (90%)
 create mode 100644 validation/signup.validation.ts

diff --git a/app/login/page.tsx b/app/login/page.tsx
index b3c352a..3190843 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -3,7 +3,7 @@ import FormSignIn from '@/components/FormSignIn';
 function Login() {
   return (
     <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
-      Login Page
+      Login
       <FormSignIn></FormSignIn>
     </main>
   );
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
new file mode 100644
index 0000000..a8db93f
--- /dev/null
+++ b/app/signup/page.tsx
@@ -0,0 +1,12 @@
+import FormSignUp from '@/components/FormSignUp';
+
+function SignUp() {
+  return (
+    <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
+      SignUp
+      <FormSignUp></FormSignUp>
+    </main>
+  );
+}
+
+export default SignUp;
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index c68e05a..a28f6c3 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { SignInData } from '@/interfaces/signin.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { validationSchema } from '@/validation';
+import { signInValidationSchema } from '@/validation/signin.validation';
 import {
   Button,
   FormControl,
@@ -27,7 +27,7 @@ function FormSignIn() {
     handleSubmit,
     formState: { errors, isValid, isSubmitted },
   } = useForm<SignInData>({
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(signInValidationSchema),
   });
 
   const onFormSubmit = () => {
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
new file mode 100644
index 0000000..00e41ec
--- /dev/null
+++ b/components/FormSignUp/index.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { SignUpData } from '@/interfaces/signin.interface';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import {
+  Button,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+  FormHelperText,
+  TextField,
+} from '@mui/material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { useRouter } from 'next/navigation';
+import { signUpValidationSchema } from '@/validation/signup.validation';
+
+function FormSignUp() {
+  const router = useRouter();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitted },
+  } = useForm<SignUpData>({
+    resolver: yupResolver(signUpValidationSchema),
+  });
+
+  const onFormSubmit = () => {
+    router.push('/');
+  };
+
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <TextField
+        error={!!errors.login}
+        id="login"
+        label="Login"
+        helperText={errors.login ? errors.login.message : ''}
+        {...register('login')}
+      />
+      <FormControl variant="outlined" error={!!errors.password}>
+        <InputLabel htmlFor="password">Password</InputLabel>
+        <OutlinedInput
+          id="password"
+          type={showPassword ? 'text' : 'password'}
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge="end"
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          }
+          label="Password"
+          autoComplete="current-password"
+          {...register('password')}
+        />
+        <FormHelperText>{errors.password ? errors.password.message : ''}</FormHelperText>
+      </FormControl>
+      <FormControl variant="outlined" error={!!errors.confirmPassword}>
+        <InputLabel htmlFor="confirm-password">Confirm password</InputLabel>
+        <OutlinedInput
+          id="confirm-password"
+          type={showPassword ? 'text' : 'password'}
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge="end"
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          }
+          label="Confirm password"
+          autoComplete="current-password"
+          {...register('confirmPassword')}
+        />
+        <FormHelperText>{errors.confirmPassword ? errors.confirmPassword.message : ''}</FormHelperText>
+      </FormControl>
+      <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
+        Sign up
+      </Button>
+      <div className="flex flex-col items-center">
+        <p className="m-0">If you already have an account, please</p>
+        <Button href="/login">Sign in</Button>
+      </div>
+    </form>
+  );
+}
+
+export default FormSignUp;
diff --git a/interfaces/signin.interface.ts b/interfaces/signin.interface.ts
index 83f69b7..c559357 100644
--- a/interfaces/signin.interface.ts
+++ b/interfaces/signin.interface.ts
@@ -2,3 +2,7 @@ export interface SignInData {
   login: string;
   password: string;
 }
+
+export interface SignUpData extends SignInData {
+  confirmPassword: string;
+}
diff --git a/validation/index.ts b/validation/signin.validation.ts
similarity index 90%
rename from validation/index.ts
rename to validation/signin.validation.ts
index e2b4c23..d47c4fb 100644
--- a/validation/index.ts
+++ b/validation/signin.validation.ts
@@ -1,6 +1,6 @@
 import * as yup from 'yup';
 
-export const validationSchema = yup.object().shape({
+export const signInValidationSchema = yup.object().shape({
   login: yup.string().email('Invalid email address').required('Login is required'),
   password: yup
     .string()
diff --git a/validation/signup.validation.ts b/validation/signup.validation.ts
new file mode 100644
index 0000000..eae3cbe
--- /dev/null
+++ b/validation/signup.validation.ts
@@ -0,0 +1,17 @@
+import * as yup from 'yup';
+
+export const signUpValidationSchema = yup.object().shape({
+  login: yup.string().email('Invalid email address').required('Login is required'),
+  password: yup
+    .string()
+    .required('Password is required')
+    .matches(/[0-9]/, 'Password must contain at least one number')
+    .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
+    .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
+    .matches(/[\W_]/, 'Password must contain at least one special character')
+    .min(8, 'Password must be at least 8 characters long'),
+  confirmPassword: yup
+    .string()
+    .required('Please confirm your password')
+    .oneOf([yup.ref('password')], 'Passwords must match'),
+});

From f34dd23e4f5eabe5c73347ad0c00a9b30c3e4ca1 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 23 Aug 2024 13:32:41 +0200
Subject: [PATCH 012/157] feat: install and configure firebase

---
 .gitignore                      |   3 +
 app/signup/page.tsx             |   2 +-
 components/FormSignIn/index.tsx |  11 +-
 firebase.js                     |  15 +
 package-lock.json               | 755 +++++++++++++++++++++++++++++++-
 package.json                    |   1 +
 6 files changed, 764 insertions(+), 23 deletions(-)
 create mode 100644 firebase.js

diff --git a/.gitignore b/.gitignore
index 79064ec..eb2b034 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,6 @@ next-env.d.ts
 
 # WebStorm
 .idea
+
+# environment
+.env
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index a8db93f..91a1353 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -3,7 +3,7 @@ import FormSignUp from '@/components/FormSignUp';
 function SignUp() {
   return (
     <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
-      SignUp
+      Sign Up
       <FormSignUp></FormSignUp>
     </main>
   );
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index a28f6c3..444e082 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -18,6 +18,8 @@ import {
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useRouter } from 'next/navigation';
+import { signInWithEmailAndPassword } from '@firebase/auth';
+import { auth } from '@/firebase';
 
 function FormSignIn() {
   const router = useRouter();
@@ -30,8 +32,13 @@ function FormSignIn() {
     resolver: yupResolver(signInValidationSchema),
   });
 
-  const onFormSubmit = () => {
-    router.push('/');
+  const onFormSubmit = async (data: SignInData) => {
+    try {
+      await signInWithEmailAndPassword(auth, data.login, data.password);
+      router.push('/');
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const [showPassword, setShowPassword] = React.useState(false);
diff --git a/firebase.js b/firebase.js
new file mode 100644
index 0000000..6d7ecd3
--- /dev/null
+++ b/firebase.js
@@ -0,0 +1,15 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyBgFPLNfI511O6GMgeUDlAy3n84mltB65M',
+  authDomain: 'graphiql-3af07.firebaseapp.com',
+  projectId: 'graphiql-3af07',
+  storageBucket: 'graphiql-3af07.appspot.com',
+  messagingSenderId: '893745075087',
+  appId: '1:893745075087:web:cf0c4e7640dee39bf231fa',
+  measurementId: 'G-4KHH98N733',
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
diff --git a/package-lock.json b/package-lock.json
index 3de28d3..94ee004 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@mui/icons-material": "^5.16.7",
         "@mui/material": "^5.16.7",
         "@mui/material-nextjs": "^5.16.6",
+        "firebase": "^10.13.0",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1255,6 +1256,547 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.7.tgz",
+      "integrity": "sha512-GE29uTT6y/Jv2EP0OjpTezeTQZ5FTCTaZXKrrdVGjb/t35AU4u/jiU+hUwUPpuK8fqhhiHkS/AawE3a3ZK/a9Q==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.13.tgz",
+      "integrity": "sha512-aZ4wGfNDMsCxhKzDbK2g1aV0JKsdQ9FbeIsjpNJPzhahV0XYj+z36Y4RNLPpG/6hHU4gxnezxs+yn3HhHkNL8w==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.7",
+        "@firebase/analytics-types": "0.8.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.2.tgz",
+      "integrity": "sha512-EnzNNLh+9/sJsimsA/FGqzakmrAUKLeJvjRHlg8df1f97NLUlFidk9600y0ZgWOp3CAxn6Hjtk+08tixlUOWyw=="
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.10.9",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.9.tgz",
+      "integrity": "sha512-AmGlPg/4SoDhwCdvVDeZsN5Yn+czYD/m/NAEOOCOhwn3Cz1xmEFKAKcyZKKahLrh5QPmge5Adyw+sk3cBTubBg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.8.7.tgz",
+      "integrity": "sha512-EkOeJcMKVR0zZ6z/jqcFTqHb/xq+TVIRIuBNGHdpcIuFU1czhSlegvqv2+nC+nFrkD8M6Xvd3tAlUOkdbMeS6A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.14.tgz",
+      "integrity": "sha512-kK3bPfojAfXE53W+20rxMqIxrloFswXG9vh4kEdYL6Wa2IB3sD5++2dPiK3yGxl8oQiqS8qL2wcKB5/xLpEVEg==",
+      "dependencies": {
+        "@firebase/app-check": "0.8.7",
+        "@firebase/app-check-types": "0.5.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.2.tgz",
+      "integrity": "sha512-LMs47Vinv2HBMZi49C09dJxp0QT5LwDzFaVGf/+ITHe3BlIhUiLNttkATSXplc89A2lAaeTqjgqVkiRfUGyQiQ=="
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.2.tgz",
+      "integrity": "sha512-FSOEzTzL5bLUbD2co3Zut46iyPWML6xc4x+78TeaXMSuJap5QObfb+rVvZJtla3asN4RwU7elaQaduP+HFizDA=="
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.2.39",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.39.tgz",
+      "integrity": "sha512-NnTFywe+M/jxZn751NIEhidgDePiDvlcfabvGxBy4YbU1E+b0TpEuJUnm3L6YDZtaZLVEz8ieoq9wbJkgGZ2rg==",
+      "dependencies": {
+        "@firebase/app": "0.10.9",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.2.tgz",
+      "integrity": "sha512-oMEZ1TDlBz479lmABwWsWjzHwheQKiAgnuKxE0pz0IXCVx7/rtlkx1fQ6GfgK24WCrxDKMplZrT50Kh04iMbXQ=="
+    },
+    "node_modules/@firebase/auth": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.7.7.tgz",
+      "integrity": "sha512-gMB0uRRNiIvYorEDLtIq1mc7x5D080EsoghTIph9xnbLqcQS3qRBREEC2o21nMEhviAeiGJMelRkKhAkkggjmA==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.12.tgz",
+      "integrity": "sha512-K47inLqjTREez85D7pP0TmRv5aQcap22cJW67poLwJoJ6BVVH0I2NOfIoMqENetCrgGS+7vXSIZaLjvHFHwS+g==",
+      "dependencies": {
+        "@firebase/auth": "1.7.7",
+        "@firebase/auth-types": "0.12.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.3.tgz",
+      "integrity": "sha512-Fc9wuJGgxoxQeavybiuwgyi+0rssr76b+nHpj+eGhXFYAdudMWyfBHvFL/I5fEHniUM/UQdFzi9VXJK2iZF7FQ=="
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.12.2.tgz",
+      "integrity": "sha512-qsEBaRMoGvHO10unlDJhaKSuPn4pyoTtlQuP1ghZfzB6rNQPuhp/N/DcFZxm9i4v0SogjCbf9reWupwIvfmH6w==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.8.tgz",
+      "integrity": "sha512-LcNvxGLLGjBwB0dJUsBGCej2fqAepWyBubs4jt1Tiuns7QLbXHuyObZ4aMeBjZjWx4m8g1LoVI9QFpSaq/k4/g==",
+      "dependencies": {
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.7.tgz",
+      "integrity": "sha512-wjXr5AO8RPxVVg7rRCYffT7FMtBjHRfJ9KMwi19MbOf0vBf0H9YqW3WCgcnLpXI6ehiUcU3z3qgPnnU0nK6SnA==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-1.0.7.tgz",
+      "integrity": "sha512-R/3B+VVzEFN5YcHmfWns3eitA8fHLTL03io+FIoMcTYkajFnrBdS3A+g/KceN9omP7FYYYGTQWF9lvbEx6eMEg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/database": "1.0.7",
+        "@firebase/database-types": "1.0.4",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.4.tgz",
+      "integrity": "sha512-mz9ZzbH6euFXbcBo+enuJ36I5dR5w+enJHHjy9Y5ThCdKUseqfDjW3vCp1YxE9zygFCSjJJ/z1cQ+zodvUcwPQ==",
+      "dependencies": {
+        "@firebase/app-types": "0.9.2",
+        "@firebase/util": "1.9.7"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.7.0.tgz",
+      "integrity": "sha512-wGOp84P1qa1pfpdct6lckfyowTuvIlUDHoiRcN8dFDT4WnZDh0tZW1X77SMiBUVejK8xIRLBCK3yDTejlRVrUA==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "@firebase/webchannel-wrapper": "1.0.1",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.3.35",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.35.tgz",
+      "integrity": "sha512-VdYQtMIrPjsgZpuBwvry6LgcS0vbUhHzpebaKm5oc9oTTvP4K7oxvR/ZJdDjIE5rBugn1SdY++uGMatcIvBkZg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/firestore": "4.7.0",
+        "@firebase/firestore-types": "3.0.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.2.tgz",
+      "integrity": "sha512-wp1A+t5rI2Qc/2q7r2ZpjUXkRVPtGMd6zCLsiWurjsQpqPgFin3AhNibKcIzoF2rnToNa/XYtyWXuifjOOwDgg==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.11.6.tgz",
+      "integrity": "sha512-GPfIBPtpwQvsC7SQbgaUjLTdja0CsNwMoKSgrzA1FGGRk4NX6qO7VQU6XCwBiAFWbpbQex6QWkSMsCzLx1uibQ==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.8",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.12.tgz",
+      "integrity": "sha512-r3XUb5VlITWpML46JymfJPkK6I9j4SNlO7qWIXUc0TUmkv0oAfVoiIt1F83/NuMZXaGr4YWA/794nVSy4GV8tw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/functions": "0.11.6",
+        "@firebase/functions-types": "0.6.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.2.tgz",
+      "integrity": "sha512-0KiJ9lZ28nS2iJJvimpY4nNccV21rkQyor5Iheu/nq8aKXJqtJdeSlZDspjPSBBiHRzo7/GMUttegnsEITqR+w=="
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.8.tgz",
+      "integrity": "sha512-57V374qdb2+wT5v7+ntpLXBjZkO6WRgmAUbVkRfFTM/4t980p0FesbqTAcOIiM8U866UeuuuF8lYH70D3jM/jQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.8.tgz",
+      "integrity": "sha512-pI2q8JFHB7yIq/szmhzGSWXtOvtzl6tCUmyykv5C8vvfOVJUH6mP4M4iwjbK8S1JotKd/K70+JWyYlxgQ0Kpyw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/installations-types": "0.5.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.2.tgz",
+      "integrity": "sha512-que84TqGRZJpJKHBlF2pkvc1YcXrtEDOVGiDjovP/a3s6W4nlbohGXEsBJo0JCeeg/UG9A+DEZVDUV9GpklUzA==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.2.tgz",
+      "integrity": "sha512-Q1VuA5M1Gjqrwom6I6NUU4lQXdo9IAQieXlujeHZWvRt1b7qQ0KwBaNAjgxG27jgF9/mUwsNmO8ptBCGVYhB0A==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.10.tgz",
+      "integrity": "sha512-fGbxJPKpl2DIKNJGhbk4mYPcM+qE2gl91r6xPoiol/mN88F5Ym6UeRdMVZah+pijh9WxM55alTYwXuW40r1Y2Q==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.7",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.10.tgz",
+      "integrity": "sha512-FXQm7rcowkDm8kFLduHV35IRYCRo+Ng0PIp/t1+EBuEbyplaKkGjZ932pE+owf/XR+G/60ku2QRBptRGLXZydg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/messaging": "0.12.10",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.2.tgz",
+      "integrity": "sha512-l68HXbuD2PPzDUOFb3aG+nZj5KA3INcPwlocwLZOzPp9rFM9yeuI9YLl6DQfguTX5eAGxO0doTR+rDLDvQb5tA=="
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.6.8.tgz",
+      "integrity": "sha512-F+alziiIZ6Yn8FG47mxwljq+4XkgkT2uJIFRlkyViUQRLzrogaUJW6u/+6ZrePXnouKlKIwzqos3PVJraPEcCA==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.8.tgz",
+      "integrity": "sha512-o7TFClRVJd3VIBoY7KZQqtCeW0PC6v9uBzM6Lfw3Nc9D7hM6OonqecYvh7NwJ6R14k+xM27frLS4BcCvFHKw2A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/performance": "0.6.8",
+        "@firebase/performance-types": "0.2.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.2.tgz",
+      "integrity": "sha512-gVq0/lAClVH5STrIdKnHnCo2UcPLjJlDUoEB/tB4KM+hAeHUxWKnpT0nemUPvxZ5nbdY/pybeyMe8Cs29gEcHA=="
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.4.8.tgz",
+      "integrity": "sha512-AMLqe6wfIRnjc6FkCWOSUjhc1fSTEf8o+cv1NolFvbiJ/tU+TqN4pI7pT+MIKQzNiq5fxLehkOx+xtAQBxPJKQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.8.tgz",
+      "integrity": "sha512-UxSFOp6dzFj2AHB8Bq/BYtbq5iFyizKx4Rd6WxAdaKYM8cnPMeK+l2v+Oogtjae+AeyHRI+MfL2acsfVe5cd2A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/remote-config": "0.4.8",
+        "@firebase/remote-config-types": "0.3.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.3.2.tgz",
+      "integrity": "sha512-0BC4+Ud7y2aPTyhXJTMTFfrGGLqdYXrUB9sJVAB8NiqJswDTc4/2qrE/yfUbnQJhbSi6ZaTTBKyG3n1nplssaA=="
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.0.tgz",
+      "integrity": "sha512-3RQaYpkR4TwPnPR1XlmDUAXiYt5QVQRGRGY1+/yNyS9ohHOCNNgbcs6a+QYvaDInbYTywrdddKYMFFXKKb1pRg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.10.tgz",
+      "integrity": "sha512-KcikeV5dK1H1cXi0zEb7gJ3IZ4dKKCjpyucVK8r/Qv5eNAqeQAzPgKKhsSv67wT1N6DTxmqsNEXwMo0dcrKOEg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/storage": "0.13.0",
+        "@firebase/storage-types": "0.8.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.2.tgz",
+      "integrity": "sha512-0vWu99rdey0g53lA7IShoA2Lol1jfnPovzLDUBuon65K7uKG9G+L5uO05brD9pMw+l4HRFw23ah3GwTGpEav6g==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz",
+      "integrity": "sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/vertexai-preview": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/vertexai-preview/-/vertexai-preview-0.0.3.tgz",
+      "integrity": "sha512-KVtUWLp+ScgiwkDKAvNkVucAyhLVQp6C6lhnVEuIg4mWhWcS3oerjAeVhZT4uNofKwWxRsOaB2Yec7DMTXlQPQ==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz",
+      "integrity": "sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ=="
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
+      "integrity": "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+      "integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
@@ -2166,6 +2708,60 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -2615,7 +3211,6 @@
       "version": "20.16.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.1.tgz",
       "integrity": "sha512-zJDo7wEadFtSyNz5QITDfRcrhqDvQI1xQNQ0VoizPjM/dVAODqqIUWbJPkvsxmTI0MYRGRikcdjMPhOssnPejQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -3151,7 +3746,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3161,7 +3755,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -3820,7 +4413,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
       "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^4.2.0",
@@ -3835,14 +4427,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cliui/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -3857,7 +4447,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -3884,7 +4473,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -3897,7 +4485,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/colorette": {
@@ -4602,7 +5189,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
       "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5373,6 +5959,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -5429,6 +6026,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/firebase": {
+      "version": "10.13.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.13.0.tgz",
+      "integrity": "sha512-a8gm8c9CYO98QuXJn7m5W5Gj7kHV8fme81/mQ9dBs+VMz9uI5HdavnMVPXCILputpZFMFpiKK+u7VVsn5lQg+w==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.7",
+        "@firebase/analytics-compat": "0.2.13",
+        "@firebase/app": "0.10.9",
+        "@firebase/app-check": "0.8.7",
+        "@firebase/app-check-compat": "0.3.14",
+        "@firebase/app-compat": "0.2.39",
+        "@firebase/app-types": "0.9.2",
+        "@firebase/auth": "1.7.7",
+        "@firebase/auth-compat": "0.5.12",
+        "@firebase/database": "1.0.7",
+        "@firebase/database-compat": "1.0.7",
+        "@firebase/firestore": "4.7.0",
+        "@firebase/firestore-compat": "0.3.35",
+        "@firebase/functions": "0.11.6",
+        "@firebase/functions-compat": "0.3.12",
+        "@firebase/installations": "0.6.8",
+        "@firebase/installations-compat": "0.2.8",
+        "@firebase/messaging": "0.12.10",
+        "@firebase/messaging-compat": "0.2.10",
+        "@firebase/performance": "0.6.8",
+        "@firebase/performance-compat": "0.2.8",
+        "@firebase/remote-config": "0.4.8",
+        "@firebase/remote-config-compat": "0.2.8",
+        "@firebase/storage": "0.13.0",
+        "@firebase/storage-compat": "0.3.10",
+        "@firebase/util": "1.9.7",
+        "@firebase/vertexai-preview": "0.0.3"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -5567,7 +6198,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -5943,6 +6573,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -6010,6 +6645,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6276,7 +6916,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7023,6 +7662,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7168,6 +7812,11 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -8391,6 +9040,29 @@
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
       "license": "MIT"
     },
+    "node_modules/protobufjs": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.4.0.tgz",
+      "integrity": "sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -8597,7 +9269,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -8822,6 +9493,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -9308,7 +9998,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -9882,11 +10571,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/universalify": {
@@ -10129,6 +10828,27 @@
         "node": ">=12"
       }
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
@@ -10443,7 +11163,6 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=10"
@@ -10473,7 +11192,6 @@
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
       "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cliui": "^8.0.1",
@@ -10492,7 +11210,6 @@
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -10502,14 +11219,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/yargs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
diff --git a/package.json b/package.json
index d546e4c..591d873 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",
+    "firebase": "^10.13.0",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

From ca024d46d24376b347ea93776415d0a98ae780f7 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 23 Aug 2024 15:07:11 +0200
Subject: [PATCH 013/157] feat: integrate auth wih firebase

---
 app/page.tsx                                  |  8 +++-
 components/FormSignIn/index.tsx               |  2 +-
 components/FormSignUp/index.tsx               | 21 +++++++--
 components/Header/index.tsx                   | 37 ++++++++++++---
 components/Welcome/index.tsx                  | 47 +++++++++++++++++++
 constants/routes.ts                           |  1 -
 firebase.js                                   | 21 +++++----
 ...{signin.interface.ts => auth.interface.ts} |  1 +
 package-lock.json                             | 10 ++++
 package.json                                  |  1 +
 validation/signup.validation.ts               |  1 +
 11 files changed, 129 insertions(+), 21 deletions(-)
 create mode 100644 components/Welcome/index.tsx
 rename interfaces/{signin.interface.ts => auth.interface.ts} (90%)

diff --git a/app/page.tsx b/app/page.tsx
index f4e7b5a..5661eb1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,9 @@
+import Welcome from '@/components/Welcome';
+
 export default function Home() {
-  return <main>Home</main>;
+  return (
+    <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
+      <Welcome></Welcome>
+    </main>
+  );
 }
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 444e082..ee1b5d6 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { useForm } from 'react-hook-form';
-import { SignInData } from '@/interfaces/signin.interface';
+import { SignInData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { signInValidationSchema } from '@/validation/signin.validation';
 import {
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 00e41ec..9a51dd3 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { useForm } from 'react-hook-form';
-import { SignUpData } from '@/interfaces/signin.interface';
+import { SignUpData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 import {
@@ -19,6 +19,8 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useRouter } from 'next/navigation';
 import { signUpValidationSchema } from '@/validation/signup.validation';
+import { createUserWithEmailAndPassword, updateProfile } from '@firebase/auth';
+import { auth } from '@/firebase';
 
 function FormSignUp() {
   const router = useRouter();
@@ -31,8 +33,14 @@ function FormSignUp() {
     resolver: yupResolver(signUpValidationSchema),
   });
 
-  const onFormSubmit = () => {
-    router.push('/');
+  const onFormSubmit = async (data: SignUpData) => {
+    try {
+      const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
+      await updateProfile(userCredential.user, { displayName: data.name });
+      router.push('/');
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const [showPassword, setShowPassword] = React.useState(false);
@@ -45,6 +53,13 @@ function FormSignUp() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <TextField
+        error={!!errors.name}
+        id="name"
+        label="Name"
+        helperText={errors.name ? errors.name.message : ''}
+        {...register('name')}
+      />
       <TextField
         error={!!errors.login}
         id="login"
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index aac4ae0..174a297 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,21 +1,46 @@
+'use client';
 import Link from 'next/link';
 import { routes } from '@/constants/routes';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { auth, logout } from '@/firebase';
+import { useRouter } from 'next/navigation';
+import { Button } from '@mui/material';
+
 function Header() {
-  const isLogin = false;
+  const [user] = useAuthState(auth);
+  const router = useRouter();
+
+  const onLogout = async () => {
+    try {
+      await logout();
+      router.push(routes.home);
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
     <header className="flex h-20 items-center justify-between bg-blue-600 text-white">
       <div>
         <Link href={routes.home}>Home</Link>
       </div>
-      <div>
-        <button type="button">EN</button>
-        {isLogin ? (
+      <div className="flex">
+        <Button variant="outlined" color="inherit">
+          EN
+        </Button>
+        {!user ? (
           <div>
-            <Link href="/login">Sign In</Link>
+            <Button href="/login" color="inherit">
+              Sign In
+            </Button>
+            <Button href="/signup" color="inherit">
+              Sign Up
+            </Button>
           </div>
         ) : (
           <div>
-            <button type="button">Sign Out</button>
+            <Button color="inherit" onClick={onLogout}>
+              Sign Out
+            </Button>
           </div>
         )}
       </div>
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
new file mode 100644
index 0000000..bfe6d80
--- /dev/null
+++ b/components/Welcome/index.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { auth } from '@/firebase';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { Button } from '@mui/material';
+
+const Welcome = () => {
+  const [user] = useAuthState(auth);
+  console.log(user);
+
+  return (
+    <div>
+      <div>
+        {!user ? (
+          <div>
+            <h2 className="text-center">Welcome!</h2>
+            <div className="flex gap-2">
+              <Button href="/login" color="inherit" variant="outlined">
+                Sign In
+              </Button>
+              <Button href="/signup" color="inherit" variant="outlined">
+                Sign Up
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <h2 className="text-center">Welcome Back, {user.displayName}</h2>
+            <div className="flex gap-2">
+              <Button href="/rest" color="inherit" variant="outlined">
+                REST Client
+              </Button>
+              <Button color="inherit" variant="outlined">
+                GraphiQL Client
+              </Button>
+              <Button color="inherit" variant="outlined">
+                History
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;
diff --git a/constants/routes.ts b/constants/routes.ts
index 3fbb30a..a74c405 100644
--- a/constants/routes.ts
+++ b/constants/routes.ts
@@ -1,7 +1,6 @@
 export const routes = {
   home: '/',
   login: '/login',
-  loginOut: '/login-out',
   signup: '/signup',
   graphql: '/graphql',
   restfull: '/rest',
diff --git a/firebase.js b/firebase.js
index 6d7ecd3..959f0f7 100644
--- a/firebase.js
+++ b/firebase.js
@@ -1,15 +1,18 @@
 import { initializeApp } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
+import { getAuth, signOut } from 'firebase/auth';
 
 const firebaseConfig = {
-  apiKey: 'AIzaSyBgFPLNfI511O6GMgeUDlAy3n84mltB65M',
-  authDomain: 'graphiql-3af07.firebaseapp.com',
-  projectId: 'graphiql-3af07',
-  storageBucket: 'graphiql-3af07.appspot.com',
-  messagingSenderId: '893745075087',
-  appId: '1:893745075087:web:cf0c4e7640dee39bf231fa',
-  measurementId: 'G-4KHH98N733',
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
 const app = initializeApp(firebaseConfig);
-export const auth = getAuth(app);
+const auth = getAuth(app);
+const logout = () => signOut(auth);
+
+export { auth, logout };
diff --git a/interfaces/signin.interface.ts b/interfaces/auth.interface.ts
similarity index 90%
rename from interfaces/signin.interface.ts
rename to interfaces/auth.interface.ts
index c559357..54f8eeb 100644
--- a/interfaces/signin.interface.ts
+++ b/interfaces/auth.interface.ts
@@ -4,5 +4,6 @@ export interface SignInData {
 }
 
 export interface SignUpData extends SignInData {
+  name: string;
   confirmPassword: string;
 }
diff --git a/package-lock.json b/package-lock.json
index 94ee004..a3f1714 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-firebase-hooks": "^5.1.1",
         "react-hook-form": "^7.52.2",
         "sonner": "^1.5.0",
         "yup": "^1.4.0"
@@ -9133,6 +9134,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-firebase-hooks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-firebase-hooks/-/react-firebase-hooks-5.1.1.tgz",
+      "integrity": "sha512-y2UpWs82xs+39q5Rc/wq316ca52QsC0n8m801V+yM4IC4hbfOL4yQPVSh7w+ydstdvjN9F+lvs1WrO2VYxpmdA==",
+      "peerDependencies": {
+        "firebase": ">= 9.0.0",
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.52.2",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.2.tgz",
diff --git a/package.json b/package.json
index 591d873..d0ed750 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.52.2",
     "sonner": "^1.5.0",
     "yup": "^1.4.0"
diff --git a/validation/signup.validation.ts b/validation/signup.validation.ts
index eae3cbe..35f993d 100644
--- a/validation/signup.validation.ts
+++ b/validation/signup.validation.ts
@@ -1,6 +1,7 @@
 import * as yup from 'yup';
 
 export const signUpValidationSchema = yup.object().shape({
+  name: yup.string().required('Name is required').min(3, 'Name must be at least 3 characters long'),
   login: yup.string().email('Invalid email address').required('Login is required'),
   password: yup
     .string()

From 10355dfd664ed856c3be2a0a996f216f0d2c7957 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 24 Aug 2024 11:44:36 +0200
Subject: [PATCH 014/157] feat: add private route

---
 app/layout.tsx                    | 13 ++++++----
 components/FormSignIn/index.tsx   |  5 ++--
 components/FormSignUp/index.tsx   |  5 ++--
 components/Header/index.tsx       |  4 +--
 components/PrivateRoute/index.tsx | 41 +++++++++++++++++++++++++++++++
 components/Welcome/index.tsx      |  7 +++---
 6 files changed, 61 insertions(+), 14 deletions(-)
 create mode 100644 components/PrivateRoute/index.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 9b129c5..2e7d548 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import { Inter } from 'next/font/google';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import './globals.css';
+import PrivateRoute from '@/components/PrivateRoute';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -24,11 +25,13 @@ export default function RootLayout({
       <body className={`${inter.className}`}>
         <CssBaseline />
         <AppRouterCacheProvider>
-          <StyledEngineProvider injectFirst>
-            <Header />
-            {children}
-            <Footer />
-          </StyledEngineProvider>
+          <PrivateRoute>
+            <StyledEngineProvider injectFirst>
+              <Header />
+              {children}
+              <Footer />
+            </StyledEngineProvider>
+          </PrivateRoute>
         </AppRouterCacheProvider>
       </body>
     </html>
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index ee1b5d6..53b91c0 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -20,6 +20,7 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useRouter } from 'next/navigation';
 import { signInWithEmailAndPassword } from '@firebase/auth';
 import { auth } from '@/firebase';
+import { routes } from '@/constants/routes';
 
 function FormSignIn() {
   const router = useRouter();
@@ -35,7 +36,7 @@ function FormSignIn() {
   const onFormSubmit = async (data: SignInData) => {
     try {
       await signInWithEmailAndPassword(auth, data.login, data.password);
-      router.push('/');
+      router.push(routes.home);
     } catch (error) {
       console.log(error);
     }
@@ -86,7 +87,7 @@ function FormSignIn() {
       </Button>
       <div className="flex flex-col items-center">
         <p className="m-0">If you don&apos;t have an account, please</p>
-        <Button href="/signup">Sign up</Button>
+        <Button href={routes.signup}>Sign up</Button>
       </div>
     </form>
   );
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 9a51dd3..9d1b4c8 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -21,6 +21,7 @@ import { useRouter } from 'next/navigation';
 import { signUpValidationSchema } from '@/validation/signup.validation';
 import { createUserWithEmailAndPassword, updateProfile } from '@firebase/auth';
 import { auth } from '@/firebase';
+import { routes } from '@/constants/routes';
 
 function FormSignUp() {
   const router = useRouter();
@@ -37,7 +38,7 @@ function FormSignUp() {
     try {
       const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
       await updateProfile(userCredential.user, { displayName: data.name });
-      router.push('/');
+      router.push(routes.home);
     } catch (error) {
       console.log(error);
     }
@@ -118,7 +119,7 @@ function FormSignUp() {
       </Button>
       <div className="flex flex-col items-center">
         <p className="m-0">If you already have an account, please</p>
-        <Button href="/login">Sign in</Button>
+        <Button href={routes.login}>Sign in</Button>
       </div>
     </form>
   );
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 174a297..affabd8 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -29,10 +29,10 @@ function Header() {
         </Button>
         {!user ? (
           <div>
-            <Button href="/login" color="inherit">
+            <Button href={routes.login} color="inherit">
               Sign In
             </Button>
-            <Button href="/signup" color="inherit">
+            <Button href={routes.signup} color="inherit">
               Sign Up
             </Button>
           </div>
diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
new file mode 100644
index 0000000..1b747fe
--- /dev/null
+++ b/components/PrivateRoute/index.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { auth } from '@/firebase';
+import { usePathname, useRouter } from 'next/navigation';
+import { routes } from '@/constants/routes';
+
+const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
+  const [user, loading] = useAuthState(auth);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (
+      !user &&
+      !loading &&
+      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.histor)
+    ) {
+      router.push(routes.login);
+    }
+
+    if (user && !loading && (pathname === routes.signup || pathname === routes.login)) {
+      router.push(routes.home);
+    }
+  }, [user, loading, pathname, router]);
+
+  return loading ||
+    (user && !loading && (pathname === routes.signup || pathname === routes.login)) ||
+    (!user &&
+      !loading &&
+      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.histor)) ? (
+    <div className="flex h-screen w-screen items-center justify-center">
+      <span>...loading</span>
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default PrivateRoute;
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index bfe6d80..2fb4227 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -3,6 +3,7 @@
 import { auth } from '@/firebase';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { Button } from '@mui/material';
+import { routes } from '@/constants/routes';
 
 const Welcome = () => {
   const [user] = useAuthState(auth);
@@ -15,10 +16,10 @@ const Welcome = () => {
           <div>
             <h2 className="text-center">Welcome!</h2>
             <div className="flex gap-2">
-              <Button href="/login" color="inherit" variant="outlined">
+              <Button href={routes.login} color="inherit" variant="outlined">
                 Sign In
               </Button>
-              <Button href="/signup" color="inherit" variant="outlined">
+              <Button href={routes.signup} color="inherit" variant="outlined">
                 Sign Up
               </Button>
             </div>
@@ -27,7 +28,7 @@ const Welcome = () => {
           <div>
             <h2 className="text-center">Welcome Back, {user.displayName}</h2>
             <div className="flex gap-2">
-              <Button href="/rest" color="inherit" variant="outlined">
+              <Button href={routes.restfull} color="inherit" variant="outlined">
                 REST Client
               </Button>
               <Button color="inherit" variant="outlined">

From 8e7aaf3ad215ed003ceae41fea9e3d5aeeb9478b Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 25 Aug 2024 07:59:52 +0200
Subject: [PATCH 015/157] feat: add logout on token expiration

---
 components/FormSignIn/index.tsx | 16 ++++++++++------
 components/FormSignUp/index.tsx | 20 +++++++++++--------
 components/Header/index.tsx     |  1 +
 components/Welcome/index.tsx    |  3 +--
 firebase.js                     | 34 +++++++++++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 53b91c0..b663237 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { SignInData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -14,6 +14,7 @@ import {
   OutlinedInput,
   FormHelperText,
   TextField,
+  Alert,
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
@@ -21,9 +22,12 @@ import { useRouter } from 'next/navigation';
 import { signInWithEmailAndPassword } from '@firebase/auth';
 import { auth } from '@/firebase';
 import { routes } from '@/constants/routes';
+import { Box } from '@mui/system';
 
 function FormSignIn() {
   const router = useRouter();
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [signInError, setSignInError] = useState<string | null>(null);
 
   const {
     register,
@@ -34,16 +38,15 @@ function FormSignIn() {
   });
 
   const onFormSubmit = async (data: SignInData) => {
+    setSignInError(null);
     try {
       await signInWithEmailAndPassword(auth, data.login, data.password);
       router.push(routes.home);
     } catch (error) {
-      console.log(error);
+      setSignInError('Failed to sign in. Please try again.');
     }
   };
 
-  const [showPassword, setShowPassword] = React.useState(false);
-
   const handleClickShowPassword = () => setShowPassword((show) => !show);
 
   const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -52,11 +55,12 @@ function FormSignIn() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <Box>{signInError ? <Alert severity="error">{signInError}</Alert> : <Box height={48} />}</Box>
       <TextField
         error={!!errors.login}
         id="login"
         label="Login"
-        helperText={errors.login ? errors.login.message : ''}
+        helperText={errors.login ? errors.login.message : ' '}
         {...register('login')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
@@ -80,7 +84,7 @@ function FormSignIn() {
           autoComplete="current-password"
           {...register('password')}
         />
-        <FormHelperText>{errors.password ? errors.password.message : ''}</FormHelperText>
+        <FormHelperText>{errors.password ? errors.password.message : ' '}</FormHelperText>
       </FormControl>
       <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
         Sign in
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 9d1b4c8..14d4710 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { SignUpData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -14,6 +14,7 @@ import {
   OutlinedInput,
   FormHelperText,
   TextField,
+  Alert,
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
@@ -22,9 +23,12 @@ import { signUpValidationSchema } from '@/validation/signup.validation';
 import { createUserWithEmailAndPassword, updateProfile } from '@firebase/auth';
 import { auth } from '@/firebase';
 import { routes } from '@/constants/routes';
+import { Box } from '@mui/system';
 
 function FormSignUp() {
   const router = useRouter();
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [signUpError, setSignUpError] = useState<string | null>(null);
 
   const {
     register,
@@ -35,17 +39,16 @@ function FormSignUp() {
   });
 
   const onFormSubmit = async (data: SignUpData) => {
+    setSignUpError(null);
     try {
       const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
       await updateProfile(userCredential.user, { displayName: data.name });
       router.push(routes.home);
     } catch (error) {
-      console.log(error);
+      setSignUpError('Failed to sign up. Please try again.');
     }
   };
 
-  const [showPassword, setShowPassword] = React.useState(false);
-
   const handleClickShowPassword = () => setShowPassword((show) => !show);
 
   const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -54,18 +57,19 @@ function FormSignUp() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <Box>{signUpError ? <Alert severity="error">{signUpError}</Alert> : <Box height={48} />}</Box>
       <TextField
         error={!!errors.name}
         id="name"
         label="Name"
-        helperText={errors.name ? errors.name.message : ''}
+        helperText={errors.name ? errors.name.message : ' '}
         {...register('name')}
       />
       <TextField
         error={!!errors.login}
         id="login"
         label="Login"
-        helperText={errors.login ? errors.login.message : ''}
+        helperText={errors.login ? errors.login.message : ' '}
         {...register('login')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
@@ -89,7 +93,7 @@ function FormSignUp() {
           autoComplete="current-password"
           {...register('password')}
         />
-        <FormHelperText>{errors.password ? errors.password.message : ''}</FormHelperText>
+        <FormHelperText>{errors.password ? errors.password.message : ' '}</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" error={!!errors.confirmPassword}>
         <InputLabel htmlFor="confirm-password">Confirm password</InputLabel>
@@ -112,7 +116,7 @@ function FormSignUp() {
           autoComplete="current-password"
           {...register('confirmPassword')}
         />
-        <FormHelperText>{errors.confirmPassword ? errors.confirmPassword.message : ''}</FormHelperText>
+        <FormHelperText>{errors.confirmPassword ? errors.confirmPassword.message : ' '}</FormHelperText>
       </FormControl>
       <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
         Sign up
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index affabd8..9edca6d 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import Link from 'next/link';
 import { routes } from '@/constants/routes';
 import { useAuthState } from 'react-firebase-hooks/auth';
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index 2fb4227..7855aa5 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -7,7 +7,6 @@ import { routes } from '@/constants/routes';
 
 const Welcome = () => {
   const [user] = useAuthState(auth);
-  console.log(user);
 
   return (
     <div>
@@ -26,7 +25,7 @@ const Welcome = () => {
           </div>
         ) : (
           <div>
-            <h2 className="text-center">Welcome Back, {user.displayName}</h2>
+            <h2 className="text-center">Welcome Back, {user.displayName}!</h2>
             <div className="flex gap-2">
               <Button href={routes.restfull} color="inherit" variant="outlined">
                 REST Client
diff --git a/firebase.js b/firebase.js
index 959f0f7..3acfcb6 100644
--- a/firebase.js
+++ b/firebase.js
@@ -14,5 +14,39 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
 const logout = () => signOut(auth);
+let timeout;
+
+function diff(expirationTime) {
+  const exp = new Date(expirationTime).getTime();
+  return exp - Date.now();
+}
+
+function timeoutCallback() {
+  auth.currentUser?.getIdTokenResult();
+}
+
+function checkToken(idTokenResult) {
+  clearTimeout(timeout);
+  if (idTokenResult.authTime !== idTokenResult.issuedAtTime) {
+    void logout().then(() => (window.location.href = '/'));
+  } else {
+    timeout = setTimeout(timeoutCallback, diff(idTokenResult.expirationTime));
+  }
+}
+
+function visibilityCallback() {
+  if (document.visibilityState === 'visible') {
+    auth.currentUser?.getIdTokenResult().then(checkToken);
+  }
+}
+
+auth.onIdTokenChanged((user) => {
+  user?.getIdTokenResult().then(checkToken);
+});
+
+if (typeof window !== 'undefined') {
+  window.removeEventListener('visibilitychange', visibilityCallback);
+  window.addEventListener('visibilitychange', visibilityCallback);
+}
 
 export { auth, logout };

From f7ecbc5b040642211996681f21c2c610d68f543b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:42:00 +0400
Subject: [PATCH 016/157] feat: add and configure redux-toolkit, codemirror
 packages

---
 .eslintrc.cjs         |   3 +-
 app/StoreProvider.tsx |  28 ++
 app/layout.tsx        |  23 +-
 package-lock.json     | 642 +++++++++++++++++++++++++++++-------------
 package.json          |  10 +-
 5 files changed, 501 insertions(+), 205 deletions(-)
 create mode 100644 app/StoreProvider.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 994bf8b..5e357a6 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -21,7 +21,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'react-compiler'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
   settings: {
     react: {
       version: 'detect',
@@ -29,7 +29,6 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/no-explicit-any': 'error',
-    'react-compiler/react-compiler': 'error',
     'react/jsx-uses-react': 'off',
     'react/jsx-uses-vars': 'off',
     'react/react-in-jsx-scope': 'off',
diff --git a/app/StoreProvider.tsx b/app/StoreProvider.tsx
new file mode 100644
index 0000000..770c790
--- /dev/null
+++ b/app/StoreProvider.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { makeStore } from '@/redux/store';
+import type { AppStore } from '@/redux/store';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import { Provider } from 'react-redux';
+
+interface Props {
+  readonly children: ReactNode;
+}
+
+export const StoreProvider = ({ children }: Props) => {
+  const storeRef = useRef<AppStore | null>(null);
+
+  if (!storeRef.current) {
+    storeRef.current = makeStore();
+  }
+
+  useEffect(() => {
+    if (storeRef.current != null) {
+      const unsubscribe = setupListeners(storeRef.current.dispatch);
+      return unsubscribe;
+    }
+  }, []);
+
+  return <Provider store={storeRef.current}>{children}</Provider>;
+};
diff --git a/app/layout.tsx b/app/layout.tsx
index 9b129c5..539a049 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
+import { StoreProvider } from './StoreProvider';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
-import { StyledEngineProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import { Inter } from 'next/font/google';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import { StyledEngineProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -22,14 +23,16 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${inter.className}`}>
-        <CssBaseline />
-        <AppRouterCacheProvider>
-          <StyledEngineProvider injectFirst>
-            <Header />
-            {children}
-            <Footer />
-          </StyledEngineProvider>
-        </AppRouterCacheProvider>
+        <StoreProvider>
+          <CssBaseline />
+          <AppRouterCacheProvider options={{ key: 'css' }}>
+            <StyledEngineProvider injectFirst>
+              <Header />
+              {children}
+              <Footer />
+            </StyledEngineProvider>
+          </AppRouterCacheProvider>
+        </StoreProvider>
       </body>
     </html>
   );
diff --git a/package-lock.json b/package-lock.json
index 18b6f6d..b3dddea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,25 @@
       "name": "graphiql-app",
       "version": "0.1.0",
       "dependencies": {
+        "@codemirror/commands": "^6.6.0",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/view": "^6.33.0",
         "@emotion/cache": "^11.13.1",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@hookform/resolvers": "^3.9.0",
         "@mui/material": "^5.16.7",
         "@mui/material-nextjs": "^5.16.6",
+        "@reduxjs/toolkit": "^2.2.7",
+        "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
+        "@uiw/codemirror-theme-vscode": "^4.23.0",
+        "@uiw/react-codemirror": "^4.23.0",
+        "firebase": "^10.13.0",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.52.2",
+        "react-redux": "^9.1.2",
         "sonner": "^1.5.0",
         "yup": "^1.4.0"
       },
@@ -39,7 +48,6 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
         "eslint-plugin-react-hooks": "^4.6.2",
         "husky": "^9.1.5",
         "jsdom": "^24.1.1",
@@ -169,19 +177,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
-      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
@@ -209,42 +204,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz",
-      "integrity": "sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-member-expression-to-functions": "^7.24.8",
-        "@babel/helper-optimise-call-expression": "^7.24.7",
-        "@babel/helper-replace-supers": "^7.25.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
-        "@babel/traverse": "^7.25.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
-      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.8",
-        "@babel/types": "^7.24.8"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
@@ -277,19 +236,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
-      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
@@ -300,24 +246,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
-      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.24.8",
-        "@babel/helper-optimise-call-expression": "^7.24.7",
-        "@babel/traverse": "^7.25.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
@@ -332,20 +260,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
-      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
@@ -489,24 +403,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
@@ -635,6 +531,111 @@
         "tough-cookie": "^4.1.4"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
+      "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.0.tgz",
+      "integrity": "sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
+      "integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
+      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.33.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.33.0.tgz",
+      "integrity": "sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
@@ -1544,6 +1545,41 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
+      "integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.29.1",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
@@ -2139,6 +2175,84 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
+      "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -2649,6 +2763,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "license": "MIT"
+    },
     "node_modules/@types/wrap-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
@@ -2888,6 +3008,90 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uiw/codemirror-extensions-basic-setup": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.0.tgz",
+      "integrity": "sha512-+k5nkRpUWGaHr1JWT8jcKsVewlXw5qBgSopm9LW8fZ6KnSNZBycz8kHxh0+WSvckmXEESGptkIsb7dlkmJT/hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
+        "@codemirror/commands": ">=6.0.0",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-vscode": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.23.0.tgz",
+      "integrity": "sha512-zl1FD7U1b58tqlF216jYv2okvVkTe+FP1ztqO/DF129bcH99QjszkakshyfxQEvvF4ys3zyzqZ7vU3VYBir8tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.23.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-themes": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.0.tgz",
+      "integrity": "sha512-9fiji9xooZyBQozR1i6iTr56YP7j/Dr/VgsNWbqf5Szv+g+4WM1iZuiDGwNXmFMWX8gbkDzp6ASE21VCPSofWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.23.0.tgz",
+      "integrity": "sha512-MnqTXfgeLA3fsUUQjqjJgemEuNyoGALgsExVm0NQAllAAi1wfj+IoKFeK+h3XXMlTFRCFYOUh4AHDv0YXJLsOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@codemirror/commands": "^6.1.0",
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.23.0",
+        "codemirror": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
+        "codemirror": ">=6.0.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -3853,6 +4057,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3952,6 +4171,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -5062,27 +5287,6 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
-    "node_modules/eslint-plugin-react-compiler": {
-      "version": "0.0.0-experimental-8e3b87c-20240821",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-0.0.0-experimental-8e3b87c-20240821.tgz",
-      "integrity": "sha512-VSJDGcBGwI3UeMwAa+BLdVyTwyKfPtGvhSlcfrzjnQe0v+dx4Yo+hmVvPSZ42RsJpq58HIjkjSTY6TwLjpI0QQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/parser": "^7.24.4",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "hermes-parser": "^0.20.1",
-        "zod": "^3.22.4",
-        "zod-validation-error": "^3.0.3"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
-      },
-      "peerDependencies": {
-        "eslint": ">=7"
-      }
-    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
@@ -5870,23 +6074,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/hermes-estree": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz",
-      "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/hermes-parser": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz",
-      "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hermes-estree": "0.20.1"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -5993,6 +6180,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7449,24 +7646,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7524,6 +7703,24 @@
         }
       }
     },
+    "node_modules/next/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -8194,6 +8391,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -8456,6 +8672,29 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -8519,6 +8758,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -8583,6 +8837,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -9353,6 +9613,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
+      "license": "MIT"
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -9924,6 +10190,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -10079,6 +10354,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -10542,29 +10823,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
-    "node_modules/zod-validation-error": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.3.1.tgz",
-      "integrity": "sha512-uFzCZz7FQis256dqw4AhPQgD6f3pzNca/Zh62RNELavlumQB3nDIUFbF5JQfFLcMbO1s02Q7Xg/gpcOBlEnYZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "zod": "^3.18.0"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index a66652a..306258a 100644
--- a/package.json
+++ b/package.json
@@ -15,16 +15,25 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/view": "^6.33.0",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",
+    "@reduxjs/toolkit": "^2.2.7",
+    "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
+    "@uiw/codemirror-theme-vscode": "^4.23.0",
+    "@uiw/react-codemirror": "^4.23.0",
+    "firebase": "^10.13.0",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
+    "react-redux": "^9.1.2",
     "sonner": "^1.5.0",
     "yup": "^1.4.0"
   },
@@ -46,7 +55,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.1.5",
     "jsdom": "^24.1.1",

From 9386a51edc120d20246ce69934cdf18357f4cafb Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:43:23 +0400
Subject: [PATCH 017/157] feat: fetch data from endpoint base on params

---
 app/[...rest]/page.tsx | 35 +++++++++++++++++++++++++++++++++++
 app/[rest]/page.tsx    |  3 ---
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 app/[...rest]/page.tsx
 delete mode 100644 app/[rest]/page.tsx

diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
new file mode 100644
index 0000000..9262da5
--- /dev/null
+++ b/app/[...rest]/page.tsx
@@ -0,0 +1,35 @@
+import RestForm from '@/components/RestClient/Form';
+
+import ResponseSection from '@/components/RestClient/ResponseSection';
+import { fetchData } from './actions/fetchData';
+
+type PropsType = {
+  params: {
+    rest: string[];
+  };
+  searchParams: {
+    key: string;
+    value: string;
+  };
+};
+
+export default async function RESTfull({ params, searchParams }: PropsType) {
+  const headers = searchParams;
+  const [method, ...url] = params.rest;
+
+  const urlDecodedData = decodeURIComponent(url.join('/'));
+
+  const convertedUrl = atob(urlDecodedData);
+
+  const response = await fetchData(convertedUrl, method, headers);
+
+  const data = await response?.json();
+
+  const stringfy = JSON.stringify(data, null, 1);
+  return (
+    <main className="h-[calc(100vh-8.5rem)]">
+      <RestForm />
+      <ResponseSection data={stringfy} />
+    </main>
+  );
+}
diff --git a/app/[rest]/page.tsx b/app/[rest]/page.tsx
deleted file mode 100644
index 053cf6d..0000000
--- a/app/[rest]/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function RESTfull() {
-  return <main className="">Rest</main>;
-}

From cd6fb03f037b9ffbd33fd68a3f33d2bffef41eda Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:44:28 +0400
Subject: [PATCH 018/157] feat: create fetchData function

---
 app/[...rest]/actions/fetchData.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 app/[...rest]/actions/fetchData.ts

diff --git a/app/[...rest]/actions/fetchData.ts b/app/[...rest]/actions/fetchData.ts
new file mode 100644
index 0000000..83bd8a1
--- /dev/null
+++ b/app/[...rest]/actions/fetchData.ts
@@ -0,0 +1,27 @@
+type RequestOptions = {
+  method: string;
+  headers: object;
+  body?: string;
+};
+export async function fetchData(url: string, method = 'GET', headers = {}, body = {}) {
+  try {
+    const options: RequestOptions = {
+      method: method,
+      headers: headers,
+    };
+
+    if (body && method !== 'GET') {
+      options.body = JSON.stringify(body);
+    }
+
+    const response = await fetch(url, options);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    return response;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}

From c741ecafcffdf3dceb75a007830b682263875d69 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:45:01 +0400
Subject: [PATCH 019/157] feat: create response section

---
 components/RestClient/ResponseSection.tsx | 24 +++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 components/RestClient/ResponseSection.tsx

diff --git a/components/RestClient/ResponseSection.tsx b/components/RestClient/ResponseSection.tsx
new file mode 100644
index 0000000..8d06de7
--- /dev/null
+++ b/components/RestClient/ResponseSection.tsx
@@ -0,0 +1,24 @@
+'use client';
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
+import { Box } from '@mui/material';
+
+function ResponseSection({ data }: { data: string }) {
+  return (
+    <Box component="section" className="p-3">
+      <CodeMirror
+        className="w-full"
+        height="500px"
+        readOnly
+        value={data}
+        theme={vscodeDark}
+        basicSetup={{
+          foldGutter: true,
+        }}
+        extensions={[json()]}
+      />
+    </Box>
+  );
+}
+export default ResponseSection;

From 3a781c707fac2ec532bb3ba219a2040ea1f81e07 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:46:01 +0400
Subject: [PATCH 020/157] feat: create rest-client form

---
 components/RestClient/Form/index.tsx | 169 +++++++++++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 components/RestClient/Form/index.tsx

diff --git a/components/RestClient/Form/index.tsx b/components/RestClient/Form/index.tsx
new file mode 100644
index 0000000..5f11d07
--- /dev/null
+++ b/components/RestClient/Form/index.tsx
@@ -0,0 +1,169 @@
+'use client';
+import { useState } from 'react';
+import InputTable from '@/components/RestClient/Table/InputTable';
+import { restClientValidationSchema } from '@/validation/restclient.validation';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { methods, QueryParam, type Method } from '@/constants/restClientData';
+import { useRouter } from 'next/navigation';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import CustomTabPanel from './CustomTabPanel';
+import { selectAll, setHeaders, setMethod, setQueryParam, setURL } from '@/redux/features/restfullClient/restfullSlice';
+import { createQueryString } from '@/utils/createQueryString';
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export type Inputs = {
+  method: Method;
+  url: string;
+  queryParams?: QueryParam[];
+  headers?: QueryParam[];
+  body?: string;
+};
+
+function RestForm() {
+  const dispatch = useAppDispatch();
+  const { method, url, queryParams, headers } = useAppSelector(selectAll);
+  const [activeTab, setActiveTab] = useState(0);
+  const router = useRouter();
+
+  const form = useForm<Inputs>({
+    resolver: yupResolver(restClientValidationSchema),
+    defaultValues: {
+      method,
+      url,
+      queryParams,
+      headers,
+    },
+  });
+  const {
+    register,
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = form;
+
+  const onSubmit: SubmitHandler<Inputs> = (data) => {
+    dispatch(setMethod(data.method));
+    dispatch(setURL(data.url));
+    if (data.queryParams) {
+      dispatch(setQueryParam(data.queryParams));
+    }
+
+    if (data.headers) {
+      dispatch(setHeaders(data.headers));
+    }
+
+    const finalQueryString = createQueryString(data.queryParams);
+    const headersQuery = createQueryString(data.headers);
+    const base64Encoded = btoa(`${data.url}${finalQueryString}`);
+    router.push(`/${data.method}/${base64Encoded}${headersQuery}`);
+  };
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  };
+
+  const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
+  return (
+    <section>
+      <FormProvider {...form}>
+        <form className="p-3" onSubmit={handleSubmit(onSubmit)}>
+          <Box component="div" className="mb-2 flex w-full items-start justify-between">
+            <Controller
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  className={`min-w-28 rounded-e-none font-medium ${selectedColor ? selectedColor : 'text-green-500'}`}
+                  defaultValue="GET"
+                  autoWidth
+                  size="small"
+                >
+                  {methods.map((method, idx) => (
+                    <MenuItem key={idx} value={method?.name} className={`font-medium ${method.color}`}>
+                      {method?.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )}
+              name="method"
+              control={control}
+            />
+            <FormControl fullWidth>
+              <OutlinedInput
+                type="text"
+                {...register('url')}
+                error={!!errors.url}
+                placeholder="https://example.com"
+                size="small"
+                className="rounded-s-none"
+              />
+            </FormControl>
+
+            <Button variant="contained" className="ml-2 h-10" type="submit">
+              SEND
+            </Button>
+          </Box>
+
+          <Box component="div">
+            <Tabs
+              value={activeTab}
+              className=""
+              onChange={handleChange}
+              aria-label="basic tabs example"
+              TabIndicatorProps={{ className: 'bg-orange-500 mb-0 h-[2px] bottom-2' }}
+            >
+              <Tab label="Params" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
+              <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
+              <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
+            </Tabs>
+          </Box>
+
+          <CustomTabPanel value={activeTab} index={0}>
+            <Typography className="text-sm">Query Params</Typography>
+            <InputTable inputName="queryParams" />
+          </CustomTabPanel>
+
+          <CustomTabPanel value={activeTab} index={1}>
+            <Typography className="text-sm">Headers</Typography>
+            <InputTable inputName="headers" />
+          </CustomTabPanel>
+
+          <CustomTabPanel value={activeTab} index={2}>
+            <Controller
+              render={({ field }) => (
+                <CodeMirror
+                  {...field}
+                  width="100%"
+                  height="200"
+                  theme={vscodeDark}
+                  extensions={[json()]}
+                  basicSetup={{
+                    foldGutter: false,
+                    dropCursor: false,
+                    allowMultipleSelections: false,
+                    indentOnInput: false,
+                  }}
+                />
+              )}
+              name="body"
+              control={control}
+            />
+            Body
+          </CustomTabPanel>
+        </form>
+      </FormProvider>
+    </section>
+  );
+}
+export default RestForm;

From a32415674575e4a25c8c6e7b7bcc2afacc53b5af Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:48:33 +0400
Subject: [PATCH 021/157] feat: create InputTable dynamic form for getting
 variables

---
 components/RestClient/Table/InputTable.tsx    | 25 +++++++
 components/RestClient/Table/InputTableRow.tsx | 67 +++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 components/RestClient/Table/InputTable.tsx
 create mode 100644 components/RestClient/Table/InputTableRow.tsx

diff --git a/components/RestClient/Table/InputTable.tsx b/components/RestClient/Table/InputTable.tsx
new file mode 100644
index 0000000..3404f8c
--- /dev/null
+++ b/components/RestClient/Table/InputTable.tsx
@@ -0,0 +1,25 @@
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import InputTableRow from './InputTableRow';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+
+export default function InputTable({ inputName }: { inputName: string }) {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell className="w-2 py-0 pt-1">
+              <CheckBoxIcon className="p-0" />
+            </TableCell>
+            <TableCell className="py-2">Key</TableCell>
+            <TableCell className="py-2">Value</TableCell>
+            <TableCell className="py-2"></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <InputTableRow inputName={inputName} />
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/components/RestClient/Table/InputTableRow.tsx b/components/RestClient/Table/InputTableRow.tsx
new file mode 100644
index 0000000..7cd9f26
--- /dev/null
+++ b/components/RestClient/Table/InputTableRow.tsx
@@ -0,0 +1,67 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Checkbox, IconButton, OutlinedInput, TableCell, TableRow } from '@mui/material';
+import { useEffect } from 'react';
+
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+function InputTableRow({ inputName }: { inputName: string }) {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: inputName,
+  });
+
+  const lastKey = useWatch({
+    name: `${inputName}.${fields.length - 1}.key`,
+    control,
+  });
+  const lastValue = useWatch({
+    name: `${inputName}.${fields.length - 1}.value`,
+    control,
+  });
+
+  useEffect(() => {
+    if (lastKey !== '' || lastValue !== '') {
+      append({ isChecked: true, key: '', value: '' }, { shouldFocus: false });
+    }
+  }, [lastKey, lastValue, append]);
+
+  return (
+    <>
+      {fields.map((row, index) => (
+        <TableRow key={row.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+          <TableCell className="">
+            <Controller
+              name={`${inputName}.${index}.isChecked`}
+              control={control}
+              render={({ field }) => <Checkbox checked={!!field.value} className="m-0 p-0" {...field} />}
+            />
+          </TableCell>
+
+          <TableCell className="">
+            <Controller
+              render={({ field }) => <OutlinedInput {...field} fullWidth inputProps={{ className: 'py-1' }} />}
+              name={`${inputName}.${index}.key`}
+              control={control}
+            />
+          </TableCell>
+
+          <TableCell className="">
+            <Controller
+              render={({ field }) => <OutlinedInput {...field} fullWidth inputProps={{ className: 'py-1' }} />}
+              name={`${inputName}.${index}.value`}
+              control={control}
+            />
+          </TableCell>
+
+          <TableCell className="">
+            <IconButton aria-label="delete" disabled={index === fields.length - 1} onClick={() => remove(index)}>
+              <DeleteIcon />
+            </IconButton>
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
+  );
+}
+export default InputTableRow;

From ef7be16048341e88bac7dcc5ef4c55c93fb8e659 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:49:58 +0400
Subject: [PATCH 022/157] feat: create custom tab panel for restfull form

---
 components/RestClient/Form/CustomTabPanel.tsx | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 components/RestClient/Form/CustomTabPanel.tsx

diff --git a/components/RestClient/Form/CustomTabPanel.tsx b/components/RestClient/Form/CustomTabPanel.tsx
new file mode 100644
index 0000000..4aef449
--- /dev/null
+++ b/components/RestClient/Form/CustomTabPanel.tsx
@@ -0,0 +1,25 @@
+import { Box } from '@mui/material';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+export default CustomTabPanel;

From c6b316b6ddb6b35eb0d8c08a40d9e264c535d9e0 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:51:41 +0400
Subject: [PATCH 023/157] feat: create store and restfullSlice to get form
 state

---
 constants/restClientData.ts                   | 17 +++++++
 .../features/restfullClient/restfullSlice.ts  | 48 +++++++++++++++++++
 redux/hooks.ts                                |  6 +++
 redux/store.ts                                | 18 +++++++
 validation/restclient.validation.ts           | 30 ++++++++++++
 5 files changed, 119 insertions(+)
 create mode 100644 constants/restClientData.ts
 create mode 100644 redux/features/restfullClient/restfullSlice.ts
 create mode 100644 redux/hooks.ts
 create mode 100644 redux/store.ts
 create mode 100644 validation/restclient.validation.ts

diff --git a/constants/restClientData.ts b/constants/restClientData.ts
new file mode 100644
index 0000000..99ce57e
--- /dev/null
+++ b/constants/restClientData.ts
@@ -0,0 +1,17 @@
+export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
+
+export const methods: { name: Method; color: string }[] = [
+  { name: 'GET', color: 'text-green-500' },
+  { name: 'POST', color: 'text-yellow-500' },
+  { name: 'PUT', color: 'text-blue-500' },
+  { name: 'PATCH', color: 'text-purple-500' },
+  { name: 'DELETE', color: 'text-red-500' },
+  { name: 'HEAD', color: 'text-green-700' },
+  { name: 'OPTIONS', color: 'text-pink-500' },
+];
+
+export type QueryParam = {
+  isChecked?: boolean;
+  key?: string;
+  value?: string;
+};
diff --git a/redux/features/restfullClient/restfullSlice.ts b/redux/features/restfullClient/restfullSlice.ts
new file mode 100644
index 0000000..a54f397
--- /dev/null
+++ b/redux/features/restfullClient/restfullSlice.ts
@@ -0,0 +1,48 @@
+import { Method, QueryParam } from '@/constants/restClientData';
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export interface RestfullSliceState {
+  method: Method;
+  url: string;
+  queryParams: QueryParam[];
+  headers: QueryParam[];
+  status: 'idle' | 'loading' | 'failed';
+}
+
+const initialState: RestfullSliceState = {
+  method: 'GET',
+  url: '',
+  queryParams: [{ isChecked: true, key: '', value: '' }],
+  headers: [{ isChecked: true, key: 'Content-Type', value: 'text/html; charset=utf-8' }],
+  status: 'idle',
+};
+
+export const restfullSlice = createSlice({
+  name: 'restfull',
+  initialState,
+  reducers: (create) => ({
+    setMethod: create.reducer((state, action: PayloadAction<Method>) => {
+      state.method = action.payload;
+    }),
+    setURL: create.reducer((state, action: PayloadAction<string>) => {
+      state.url = action.payload;
+    }),
+    setQueryParam: create.reducer((state, action: PayloadAction<QueryParam[]>) => {
+      state.queryParams = action.payload;
+    }),
+    setHeaders: create.reducer((state, action: PayloadAction<QueryParam[]>) => {
+      state.headers = action.payload;
+    }),
+  }),
+
+  selectors: {
+    selectAll: (restfull) => restfull,
+    selectMethod: (restfull) => restfull.method,
+    selectUrl: (restfull) => restfull.url,
+    selectStatus: (restfull) => restfull.status,
+  },
+});
+
+export const { setMethod, setURL, setQueryParam, setHeaders } = restfullSlice.actions;
+
+export const { selectAll, selectMethod, selectStatus } = restfullSlice.selectors;
diff --git a/redux/hooks.ts b/redux/hooks.ts
new file mode 100644
index 0000000..da470df
--- /dev/null
+++ b/redux/hooks.ts
@@ -0,0 +1,6 @@
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { AppDispatch, AppStore, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppStore = useStore.withTypes<AppStore>();
diff --git a/redux/store.ts b/redux/store.ts
new file mode 100644
index 0000000..80a3016
--- /dev/null
+++ b/redux/store.ts
@@ -0,0 +1,18 @@
+import type { Action, ThunkAction } from '@reduxjs/toolkit';
+import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import { restfullSlice } from './features/restfullClient/restfullSlice';
+
+const rootReducer = combineSlices(restfullSlice);
+
+export type RootState = ReturnType<typeof rootReducer>;
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: rootReducer,
+  });
+};
+
+export type AppStore = ReturnType<typeof makeStore>;
+
+export type AppDispatch = AppStore['dispatch'];
+export type AppThunk<ThunkReturnType = void> = ThunkAction<ThunkReturnType, RootState, unknown, Action>;
diff --git a/validation/restclient.validation.ts b/validation/restclient.validation.ts
new file mode 100644
index 0000000..beb942e
--- /dev/null
+++ b/validation/restclient.validation.ts
@@ -0,0 +1,30 @@
+import * as yup from 'yup';
+
+export const restClientValidationSchema = yup.object().shape({
+  method: yup
+    .string()
+    .oneOf(['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'])
+    .required('Method is required'),
+  url: yup.string().required('URL is required'),
+  queryParams: yup
+    .array()
+    .of(
+      yup.object().shape({
+        isChecked: yup.boolean(),
+        key: yup.string(),
+        value: yup.string(),
+      }),
+    )
+    .optional(),
+  headerParams: yup
+    .array()
+    .of(
+      yup.object().shape({
+        isChecked: yup.boolean(),
+        key: yup.string(),
+        value: yup.string(),
+      }),
+    )
+    .optional(),
+  body: yup.string(),
+});

From e88a5586ad638a062cf5a90e5aad82a3d39d7c42 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:52:10 +0400
Subject: [PATCH 024/157] feat: create useLocalStorage custom hook

---
 hooks/useLocalStorage.ts | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/hooks/useLocalStorage.ts b/hooks/useLocalStorage.ts
index e69de29..a5337f0 100644
--- a/hooks/useLocalStorage.ts
+++ b/hooks/useLocalStorage.ts
@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        window.localStorage.setItem(key, JSON.stringify(storedValue));
+      } catch (error) {
+        console.error(`Error setting localStorage key "${key}":`, error);
+      }
+    }
+  }, [key, storedValue]);
+
+  const setValue = (value: T) => {
+    try {
+      setStoredValue(value);
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(value));
+      }
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue];
+}

From 083bbf194e4a3155da919143deea375720d44b6a Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 15:53:36 +0400
Subject: [PATCH 025/157] feat: create createQueryString util fn encode param
 for url

---
 utils/createQueryString.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 utils/createQueryString.ts

diff --git a/utils/createQueryString.ts b/utils/createQueryString.ts
new file mode 100644
index 0000000..89ab9fc
--- /dev/null
+++ b/utils/createQueryString.ts
@@ -0,0 +1,16 @@
+import { QueryParam } from '@/constants/restClientData';
+
+export const createQueryString = (query: QueryParam[] | undefined) => {
+  if (!query) return '';
+  const queryString = query
+    .map((item) => {
+      if (item.isChecked && item.key && item.value) {
+        return `${item.key}=${encodeURIComponent(item.value)}`;
+      }
+      return null;
+    })
+    .filter(Boolean)
+    .join('&');
+
+  return `?${queryString}`;
+};

From 1504e6ce1d9edaa7f28d8034d0148b9b0e8d6034 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 26 Aug 2024 16:21:06 +0400
Subject: [PATCH 026/157] Merge pull request #3 from shd-mn/restfull-client

---
 .eslintrc.cjs                                 |   3 +-
 app/StoreProvider.tsx                         |  28 +
 app/[...rest]/actions/fetchData.ts            |  27 +
 app/[...rest]/page.tsx                        |  35 ++
 app/[rest]/page.tsx                           |   3 -
 app/layout.tsx                                |  27 +-
 components/RestClient/Form/CustomTabPanel.tsx |  25 +
 components/RestClient/Form/index.tsx          | 169 +++++
 components/RestClient/ResponseSection.tsx     |  24 +
 components/RestClient/Table/InputTable.tsx    |  25 +
 components/RestClient/Table/InputTableRow.tsx |  67 ++
 constants/restClientData.ts                   |  17 +
 hooks/useLocalStorage.ts                      |  40 ++
 package-lock.json                             | 587 ++++++++++++------
 package.json                                  |   9 +-
 .../features/restfullClient/restfullSlice.ts  |  48 ++
 redux/hooks.ts                                |   6 +
 redux/store.ts                                |  18 +
 utils/createQueryString.ts                    |  16 +
 validation/restclient.validation.ts           |  30 +
 20 files changed, 994 insertions(+), 210 deletions(-)
 create mode 100644 app/StoreProvider.tsx
 create mode 100644 app/[...rest]/actions/fetchData.ts
 create mode 100644 app/[...rest]/page.tsx
 delete mode 100644 app/[rest]/page.tsx
 create mode 100644 components/RestClient/Form/CustomTabPanel.tsx
 create mode 100644 components/RestClient/Form/index.tsx
 create mode 100644 components/RestClient/ResponseSection.tsx
 create mode 100644 components/RestClient/Table/InputTable.tsx
 create mode 100644 components/RestClient/Table/InputTableRow.tsx
 create mode 100644 constants/restClientData.ts
 create mode 100644 redux/features/restfullClient/restfullSlice.ts
 create mode 100644 redux/hooks.ts
 create mode 100644 redux/store.ts
 create mode 100644 utils/createQueryString.ts
 create mode 100644 validation/restclient.validation.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 994bf8b..5e357a6 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -21,7 +21,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'react-compiler'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
   settings: {
     react: {
       version: 'detect',
@@ -29,7 +29,6 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/no-explicit-any': 'error',
-    'react-compiler/react-compiler': 'error',
     'react/jsx-uses-react': 'off',
     'react/jsx-uses-vars': 'off',
     'react/react-in-jsx-scope': 'off',
diff --git a/app/StoreProvider.tsx b/app/StoreProvider.tsx
new file mode 100644
index 0000000..770c790
--- /dev/null
+++ b/app/StoreProvider.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { makeStore } from '@/redux/store';
+import type { AppStore } from '@/redux/store';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import { Provider } from 'react-redux';
+
+interface Props {
+  readonly children: ReactNode;
+}
+
+export const StoreProvider = ({ children }: Props) => {
+  const storeRef = useRef<AppStore | null>(null);
+
+  if (!storeRef.current) {
+    storeRef.current = makeStore();
+  }
+
+  useEffect(() => {
+    if (storeRef.current != null) {
+      const unsubscribe = setupListeners(storeRef.current.dispatch);
+      return unsubscribe;
+    }
+  }, []);
+
+  return <Provider store={storeRef.current}>{children}</Provider>;
+};
diff --git a/app/[...rest]/actions/fetchData.ts b/app/[...rest]/actions/fetchData.ts
new file mode 100644
index 0000000..83bd8a1
--- /dev/null
+++ b/app/[...rest]/actions/fetchData.ts
@@ -0,0 +1,27 @@
+type RequestOptions = {
+  method: string;
+  headers: object;
+  body?: string;
+};
+export async function fetchData(url: string, method = 'GET', headers = {}, body = {}) {
+  try {
+    const options: RequestOptions = {
+      method: method,
+      headers: headers,
+    };
+
+    if (body && method !== 'GET') {
+      options.body = JSON.stringify(body);
+    }
+
+    const response = await fetch(url, options);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    return response;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
new file mode 100644
index 0000000..9262da5
--- /dev/null
+++ b/app/[...rest]/page.tsx
@@ -0,0 +1,35 @@
+import RestForm from '@/components/RestClient/Form';
+
+import ResponseSection from '@/components/RestClient/ResponseSection';
+import { fetchData } from './actions/fetchData';
+
+type PropsType = {
+  params: {
+    rest: string[];
+  };
+  searchParams: {
+    key: string;
+    value: string;
+  };
+};
+
+export default async function RESTfull({ params, searchParams }: PropsType) {
+  const headers = searchParams;
+  const [method, ...url] = params.rest;
+
+  const urlDecodedData = decodeURIComponent(url.join('/'));
+
+  const convertedUrl = atob(urlDecodedData);
+
+  const response = await fetchData(convertedUrl, method, headers);
+
+  const data = await response?.json();
+
+  const stringfy = JSON.stringify(data, null, 1);
+  return (
+    <main className="h-[calc(100vh-8.5rem)]">
+      <RestForm />
+      <ResponseSection data={stringfy} />
+    </main>
+  );
+}
diff --git a/app/[rest]/page.tsx b/app/[rest]/page.tsx
deleted file mode 100644
index 053cf6d..0000000
--- a/app/[rest]/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function RESTfull() {
-  return <main className="">Rest</main>;
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index 2e7d548..7226ffa 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
+import { StoreProvider } from './StoreProvider';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
-import { StyledEngineProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import { Inter } from 'next/font/google';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import { StyledEngineProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import './globals.css';
 import PrivateRoute from '@/components/PrivateRoute';
 
@@ -23,16 +24,18 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${inter.className}`}>
-        <CssBaseline />
-        <AppRouterCacheProvider>
-          <PrivateRoute>
-            <StyledEngineProvider injectFirst>
-              <Header />
-              {children}
-              <Footer />
-            </StyledEngineProvider>
-          </PrivateRoute>
-        </AppRouterCacheProvider>
+        <StoreProvider>
+          <CssBaseline />
+          <AppRouterCacheProvider options={{ key: 'css' }}>
+            <PrivateRoute>
+              <StyledEngineProvider injectFirst>
+                <Header />
+                {children}
+                <Footer />
+              </StyledEngineProvider>
+            </PrivateRoute>
+          </AppRouterCacheProvider>
+        </StoreProvider>
       </body>
     </html>
   );
diff --git a/components/RestClient/Form/CustomTabPanel.tsx b/components/RestClient/Form/CustomTabPanel.tsx
new file mode 100644
index 0000000..4aef449
--- /dev/null
+++ b/components/RestClient/Form/CustomTabPanel.tsx
@@ -0,0 +1,25 @@
+import { Box } from '@mui/material';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+export default CustomTabPanel;
diff --git a/components/RestClient/Form/index.tsx b/components/RestClient/Form/index.tsx
new file mode 100644
index 0000000..5f11d07
--- /dev/null
+++ b/components/RestClient/Form/index.tsx
@@ -0,0 +1,169 @@
+'use client';
+import { useState } from 'react';
+import InputTable from '@/components/RestClient/Table/InputTable';
+import { restClientValidationSchema } from '@/validation/restclient.validation';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { methods, QueryParam, type Method } from '@/constants/restClientData';
+import { useRouter } from 'next/navigation';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import CustomTabPanel from './CustomTabPanel';
+import { selectAll, setHeaders, setMethod, setQueryParam, setURL } from '@/redux/features/restfullClient/restfullSlice';
+import { createQueryString } from '@/utils/createQueryString';
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export type Inputs = {
+  method: Method;
+  url: string;
+  queryParams?: QueryParam[];
+  headers?: QueryParam[];
+  body?: string;
+};
+
+function RestForm() {
+  const dispatch = useAppDispatch();
+  const { method, url, queryParams, headers } = useAppSelector(selectAll);
+  const [activeTab, setActiveTab] = useState(0);
+  const router = useRouter();
+
+  const form = useForm<Inputs>({
+    resolver: yupResolver(restClientValidationSchema),
+    defaultValues: {
+      method,
+      url,
+      queryParams,
+      headers,
+    },
+  });
+  const {
+    register,
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = form;
+
+  const onSubmit: SubmitHandler<Inputs> = (data) => {
+    dispatch(setMethod(data.method));
+    dispatch(setURL(data.url));
+    if (data.queryParams) {
+      dispatch(setQueryParam(data.queryParams));
+    }
+
+    if (data.headers) {
+      dispatch(setHeaders(data.headers));
+    }
+
+    const finalQueryString = createQueryString(data.queryParams);
+    const headersQuery = createQueryString(data.headers);
+    const base64Encoded = btoa(`${data.url}${finalQueryString}`);
+    router.push(`/${data.method}/${base64Encoded}${headersQuery}`);
+  };
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  };
+
+  const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
+  return (
+    <section>
+      <FormProvider {...form}>
+        <form className="p-3" onSubmit={handleSubmit(onSubmit)}>
+          <Box component="div" className="mb-2 flex w-full items-start justify-between">
+            <Controller
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  className={`min-w-28 rounded-e-none font-medium ${selectedColor ? selectedColor : 'text-green-500'}`}
+                  defaultValue="GET"
+                  autoWidth
+                  size="small"
+                >
+                  {methods.map((method, idx) => (
+                    <MenuItem key={idx} value={method?.name} className={`font-medium ${method.color}`}>
+                      {method?.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )}
+              name="method"
+              control={control}
+            />
+            <FormControl fullWidth>
+              <OutlinedInput
+                type="text"
+                {...register('url')}
+                error={!!errors.url}
+                placeholder="https://example.com"
+                size="small"
+                className="rounded-s-none"
+              />
+            </FormControl>
+
+            <Button variant="contained" className="ml-2 h-10" type="submit">
+              SEND
+            </Button>
+          </Box>
+
+          <Box component="div">
+            <Tabs
+              value={activeTab}
+              className=""
+              onChange={handleChange}
+              aria-label="basic tabs example"
+              TabIndicatorProps={{ className: 'bg-orange-500 mb-0 h-[2px] bottom-2' }}
+            >
+              <Tab label="Params" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
+              <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
+              <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
+            </Tabs>
+          </Box>
+
+          <CustomTabPanel value={activeTab} index={0}>
+            <Typography className="text-sm">Query Params</Typography>
+            <InputTable inputName="queryParams" />
+          </CustomTabPanel>
+
+          <CustomTabPanel value={activeTab} index={1}>
+            <Typography className="text-sm">Headers</Typography>
+            <InputTable inputName="headers" />
+          </CustomTabPanel>
+
+          <CustomTabPanel value={activeTab} index={2}>
+            <Controller
+              render={({ field }) => (
+                <CodeMirror
+                  {...field}
+                  width="100%"
+                  height="200"
+                  theme={vscodeDark}
+                  extensions={[json()]}
+                  basicSetup={{
+                    foldGutter: false,
+                    dropCursor: false,
+                    allowMultipleSelections: false,
+                    indentOnInput: false,
+                  }}
+                />
+              )}
+              name="body"
+              control={control}
+            />
+            Body
+          </CustomTabPanel>
+        </form>
+      </FormProvider>
+    </section>
+  );
+}
+export default RestForm;
diff --git a/components/RestClient/ResponseSection.tsx b/components/RestClient/ResponseSection.tsx
new file mode 100644
index 0000000..8d06de7
--- /dev/null
+++ b/components/RestClient/ResponseSection.tsx
@@ -0,0 +1,24 @@
+'use client';
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
+import { Box } from '@mui/material';
+
+function ResponseSection({ data }: { data: string }) {
+  return (
+    <Box component="section" className="p-3">
+      <CodeMirror
+        className="w-full"
+        height="500px"
+        readOnly
+        value={data}
+        theme={vscodeDark}
+        basicSetup={{
+          foldGutter: true,
+        }}
+        extensions={[json()]}
+      />
+    </Box>
+  );
+}
+export default ResponseSection;
diff --git a/components/RestClient/Table/InputTable.tsx b/components/RestClient/Table/InputTable.tsx
new file mode 100644
index 0000000..3404f8c
--- /dev/null
+++ b/components/RestClient/Table/InputTable.tsx
@@ -0,0 +1,25 @@
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import InputTableRow from './InputTableRow';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+
+export default function InputTable({ inputName }: { inputName: string }) {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell className="w-2 py-0 pt-1">
+              <CheckBoxIcon className="p-0" />
+            </TableCell>
+            <TableCell className="py-2">Key</TableCell>
+            <TableCell className="py-2">Value</TableCell>
+            <TableCell className="py-2"></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <InputTableRow inputName={inputName} />
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/components/RestClient/Table/InputTableRow.tsx b/components/RestClient/Table/InputTableRow.tsx
new file mode 100644
index 0000000..7cd9f26
--- /dev/null
+++ b/components/RestClient/Table/InputTableRow.tsx
@@ -0,0 +1,67 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Checkbox, IconButton, OutlinedInput, TableCell, TableRow } from '@mui/material';
+import { useEffect } from 'react';
+
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+function InputTableRow({ inputName }: { inputName: string }) {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: inputName,
+  });
+
+  const lastKey = useWatch({
+    name: `${inputName}.${fields.length - 1}.key`,
+    control,
+  });
+  const lastValue = useWatch({
+    name: `${inputName}.${fields.length - 1}.value`,
+    control,
+  });
+
+  useEffect(() => {
+    if (lastKey !== '' || lastValue !== '') {
+      append({ isChecked: true, key: '', value: '' }, { shouldFocus: false });
+    }
+  }, [lastKey, lastValue, append]);
+
+  return (
+    <>
+      {fields.map((row, index) => (
+        <TableRow key={row.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+          <TableCell className="">
+            <Controller
+              name={`${inputName}.${index}.isChecked`}
+              control={control}
+              render={({ field }) => <Checkbox checked={!!field.value} className="m-0 p-0" {...field} />}
+            />
+          </TableCell>
+
+          <TableCell className="">
+            <Controller
+              render={({ field }) => <OutlinedInput {...field} fullWidth inputProps={{ className: 'py-1' }} />}
+              name={`${inputName}.${index}.key`}
+              control={control}
+            />
+          </TableCell>
+
+          <TableCell className="">
+            <Controller
+              render={({ field }) => <OutlinedInput {...field} fullWidth inputProps={{ className: 'py-1' }} />}
+              name={`${inputName}.${index}.value`}
+              control={control}
+            />
+          </TableCell>
+
+          <TableCell className="">
+            <IconButton aria-label="delete" disabled={index === fields.length - 1} onClick={() => remove(index)}>
+              <DeleteIcon />
+            </IconButton>
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
+  );
+}
+export default InputTableRow;
diff --git a/constants/restClientData.ts b/constants/restClientData.ts
new file mode 100644
index 0000000..99ce57e
--- /dev/null
+++ b/constants/restClientData.ts
@@ -0,0 +1,17 @@
+export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
+
+export const methods: { name: Method; color: string }[] = [
+  { name: 'GET', color: 'text-green-500' },
+  { name: 'POST', color: 'text-yellow-500' },
+  { name: 'PUT', color: 'text-blue-500' },
+  { name: 'PATCH', color: 'text-purple-500' },
+  { name: 'DELETE', color: 'text-red-500' },
+  { name: 'HEAD', color: 'text-green-700' },
+  { name: 'OPTIONS', color: 'text-pink-500' },
+];
+
+export type QueryParam = {
+  isChecked?: boolean;
+  key?: string;
+  value?: string;
+};
diff --git a/hooks/useLocalStorage.ts b/hooks/useLocalStorage.ts
index e69de29..a5337f0 100644
--- a/hooks/useLocalStorage.ts
+++ b/hooks/useLocalStorage.ts
@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        window.localStorage.setItem(key, JSON.stringify(storedValue));
+      } catch (error) {
+        console.error(`Error setting localStorage key "${key}":`, error);
+      }
+    }
+  }, [key, storedValue]);
+
+  const setValue = (value: T) => {
+    try {
+      setStoredValue(value);
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(value));
+      }
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
diff --git a/package-lock.json b/package-lock.json
index a3f1714..3f1fa97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "graphiql-app",
       "version": "0.1.0",
       "dependencies": {
+        "@codemirror/commands": "^6.6.0",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/view": "^6.33.0",
         "@emotion/cache": "^11.13.1",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
@@ -15,12 +18,17 @@
         "@mui/icons-material": "^5.16.7",
         "@mui/material": "^5.16.7",
         "@mui/material-nextjs": "^5.16.6",
+        "@reduxjs/toolkit": "^2.2.7",
+        "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
+        "@uiw/codemirror-theme-vscode": "^4.23.0",
+        "@uiw/react-codemirror": "^4.23.0",
         "firebase": "^10.13.0",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-firebase-hooks": "^5.1.1",
         "react-hook-form": "^7.52.2",
+        "react-redux": "^9.1.2",
         "sonner": "^1.5.0",
         "yup": "^1.4.0"
       },
@@ -42,7 +50,6 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
         "eslint-plugin-react-hooks": "^4.6.2",
         "husky": "^9.1.5",
         "jsdom": "^24.1.1",
@@ -172,19 +179,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
-      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
@@ -212,42 +206,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz",
-      "integrity": "sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.24.7",
-        "@babel/helper-member-expression-to-functions": "^7.24.8",
-        "@babel/helper-optimise-call-expression": "^7.24.7",
-        "@babel/helper-replace-supers": "^7.25.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
-        "@babel/traverse": "^7.25.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
-      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.8",
-        "@babel/types": "^7.24.8"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
@@ -280,19 +238,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
-      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
@@ -303,24 +248,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
-      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.24.8",
-        "@babel/helper-optimise-call-expression": "^7.24.7",
-        "@babel/traverse": "^7.25.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
@@ -335,20 +262,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
-      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
@@ -492,24 +405,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
@@ -638,6 +533,111 @@
         "tough-cookie": "^4.1.4"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
+      "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.0.tgz",
+      "integrity": "sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
+      "integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
+      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
+      "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.33.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.33.0.tgz",
+      "integrity": "sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
@@ -2088,6 +2088,41 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
+      "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+      "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
+      "integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.29.1",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
@@ -2763,6 +2798,30 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
+      "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -3272,6 +3331,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "license": "MIT"
+    },
     "node_modules/@types/wrap-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
@@ -3511,6 +3576,90 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uiw/codemirror-extensions-basic-setup": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.0.tgz",
+      "integrity": "sha512-+k5nkRpUWGaHr1JWT8jcKsVewlXw5qBgSopm9LW8fZ6KnSNZBycz8kHxh0+WSvckmXEESGptkIsb7dlkmJT/hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
+        "@codemirror/commands": ">=6.0.0",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-vscode": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.23.0.tgz",
+      "integrity": "sha512-zl1FD7U1b58tqlF216jYv2okvVkTe+FP1ztqO/DF129bcH99QjszkakshyfxQEvvF4ys3zyzqZ7vU3VYBir8tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.23.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/codemirror-themes": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.0.tgz",
+      "integrity": "sha512-9fiji9xooZyBQozR1i6iTr56YP7j/Dr/VgsNWbqf5Szv+g+4WM1iZuiDGwNXmFMWX8gbkDzp6ASE21VCPSofWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.23.0.tgz",
+      "integrity": "sha512-MnqTXfgeLA3fsUUQjqjJgemEuNyoGALgsExVm0NQAllAAi1wfj+IoKFeK+h3XXMlTFRCFYOUh4AHDv0YXJLsOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@codemirror/commands": "^6.1.0",
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.23.0",
+        "codemirror": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
+        "codemirror": ">=6.0.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -4470,6 +4619,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4567,6 +4731,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -5676,27 +5846,6 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
-    "node_modules/eslint-plugin-react-compiler": {
-      "version": "0.0.0-experimental-8e3b87c-20240821",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-0.0.0-experimental-8e3b87c-20240821.tgz",
-      "integrity": "sha512-VSJDGcBGwI3UeMwAa+BLdVyTwyKfPtGvhSlcfrzjnQe0v+dx4Yo+hmVvPSZ42RsJpq58HIjkjSTY6TwLjpI0QQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/parser": "^7.24.4",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "hermes-parser": "^0.20.1",
-        "zod": "^3.22.4",
-        "zod-validation-error": "^3.0.3"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
-      },
-      "peerDependencies": {
-        "eslint": ">=7"
-      }
-    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
@@ -6528,23 +6677,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/hermes-estree": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz",
-      "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/hermes-parser": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz",
-      "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hermes-estree": "0.20.1"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -6661,6 +6793,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8126,24 +8268,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -8201,6 +8325,24 @@
         }
       }
     },
+    "node_modules/next/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -8871,6 +9013,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -9165,6 +9326,29 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -9228,6 +9412,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -9291,6 +9490,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -10079,6 +10284,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+      "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
+      "license": "MIT"
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -10660,6 +10871,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -10815,6 +11035,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -11294,29 +11520,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
-    "node_modules/zod-validation-error": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.3.1.tgz",
-      "integrity": "sha512-uFzCZz7FQis256dqw4AhPQgD6f3pzNca/Zh62RNELavlumQB3nDIUFbF5JQfFLcMbO1s02Q7Xg/gpcOBlEnYZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "zod": "^3.18.0"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index d0ed750..839528a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/view": "^6.33.0",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -22,12 +25,17 @@
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",
+    "@reduxjs/toolkit": "^2.2.7",
+    "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
+    "@uiw/codemirror-theme-vscode": "^4.23.0",
+    "@uiw/react-codemirror": "^4.23.0",
     "firebase": "^10.13.0",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.52.2",
+    "react-redux": "^9.1.2",
     "sonner": "^1.5.0",
     "yup": "^1.4.0"
   },
@@ -49,7 +57,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-compiler": "^0.0.0-experimental-8e3b87c-20240821",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.1.5",
     "jsdom": "^24.1.1",
diff --git a/redux/features/restfullClient/restfullSlice.ts b/redux/features/restfullClient/restfullSlice.ts
new file mode 100644
index 0000000..a54f397
--- /dev/null
+++ b/redux/features/restfullClient/restfullSlice.ts
@@ -0,0 +1,48 @@
+import { Method, QueryParam } from '@/constants/restClientData';
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export interface RestfullSliceState {
+  method: Method;
+  url: string;
+  queryParams: QueryParam[];
+  headers: QueryParam[];
+  status: 'idle' | 'loading' | 'failed';
+}
+
+const initialState: RestfullSliceState = {
+  method: 'GET',
+  url: '',
+  queryParams: [{ isChecked: true, key: '', value: '' }],
+  headers: [{ isChecked: true, key: 'Content-Type', value: 'text/html; charset=utf-8' }],
+  status: 'idle',
+};
+
+export const restfullSlice = createSlice({
+  name: 'restfull',
+  initialState,
+  reducers: (create) => ({
+    setMethod: create.reducer((state, action: PayloadAction<Method>) => {
+      state.method = action.payload;
+    }),
+    setURL: create.reducer((state, action: PayloadAction<string>) => {
+      state.url = action.payload;
+    }),
+    setQueryParam: create.reducer((state, action: PayloadAction<QueryParam[]>) => {
+      state.queryParams = action.payload;
+    }),
+    setHeaders: create.reducer((state, action: PayloadAction<QueryParam[]>) => {
+      state.headers = action.payload;
+    }),
+  }),
+
+  selectors: {
+    selectAll: (restfull) => restfull,
+    selectMethod: (restfull) => restfull.method,
+    selectUrl: (restfull) => restfull.url,
+    selectStatus: (restfull) => restfull.status,
+  },
+});
+
+export const { setMethod, setURL, setQueryParam, setHeaders } = restfullSlice.actions;
+
+export const { selectAll, selectMethod, selectStatus } = restfullSlice.selectors;
diff --git a/redux/hooks.ts b/redux/hooks.ts
new file mode 100644
index 0000000..da470df
--- /dev/null
+++ b/redux/hooks.ts
@@ -0,0 +1,6 @@
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { AppDispatch, AppStore, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppStore = useStore.withTypes<AppStore>();
diff --git a/redux/store.ts b/redux/store.ts
new file mode 100644
index 0000000..80a3016
--- /dev/null
+++ b/redux/store.ts
@@ -0,0 +1,18 @@
+import type { Action, ThunkAction } from '@reduxjs/toolkit';
+import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import { restfullSlice } from './features/restfullClient/restfullSlice';
+
+const rootReducer = combineSlices(restfullSlice);
+
+export type RootState = ReturnType<typeof rootReducer>;
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: rootReducer,
+  });
+};
+
+export type AppStore = ReturnType<typeof makeStore>;
+
+export type AppDispatch = AppStore['dispatch'];
+export type AppThunk<ThunkReturnType = void> = ThunkAction<ThunkReturnType, RootState, unknown, Action>;
diff --git a/utils/createQueryString.ts b/utils/createQueryString.ts
new file mode 100644
index 0000000..89ab9fc
--- /dev/null
+++ b/utils/createQueryString.ts
@@ -0,0 +1,16 @@
+import { QueryParam } from '@/constants/restClientData';
+
+export const createQueryString = (query: QueryParam[] | undefined) => {
+  if (!query) return '';
+  const queryString = query
+    .map((item) => {
+      if (item.isChecked && item.key && item.value) {
+        return `${item.key}=${encodeURIComponent(item.value)}`;
+      }
+      return null;
+    })
+    .filter(Boolean)
+    .join('&');
+
+  return `?${queryString}`;
+};
diff --git a/validation/restclient.validation.ts b/validation/restclient.validation.ts
new file mode 100644
index 0000000..beb942e
--- /dev/null
+++ b/validation/restclient.validation.ts
@@ -0,0 +1,30 @@
+import * as yup from 'yup';
+
+export const restClientValidationSchema = yup.object().shape({
+  method: yup
+    .string()
+    .oneOf(['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'])
+    .required('Method is required'),
+  url: yup.string().required('URL is required'),
+  queryParams: yup
+    .array()
+    .of(
+      yup.object().shape({
+        isChecked: yup.boolean(),
+        key: yup.string(),
+        value: yup.string(),
+      }),
+    )
+    .optional(),
+  headerParams: yup
+    .array()
+    .of(
+      yup.object().shape({
+        isChecked: yup.boolean(),
+        key: yup.string(),
+        value: yup.string(),
+      }),
+    )
+    .optional(),
+  body: yup.string(),
+});

From 0b04fd3b4f0cf76a0e3f0870e963b2f811ee85a6 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Tue, 27 Aug 2024 23:57:57 +0400
Subject: [PATCH 027/157] refactor: useLocalStorage export props individually

---
 hooks/useLocalStorage.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/hooks/useLocalStorage.ts b/hooks/useLocalStorage.ts
index a5337f0..aed8eab 100644
--- a/hooks/useLocalStorage.ts
+++ b/hooks/useLocalStorage.ts
@@ -1,6 +1,9 @@
 import { useState, useEffect } from 'react';
 
-export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): { storedValue: T; setLocalStorageValue: (value: T) => void } {
   const [storedValue, setStoredValue] = useState<T>(() => {
     if (typeof window === 'undefined') {
       return initialValue;
@@ -25,7 +28,7 @@ export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T)
     }
   }, [key, storedValue]);
 
-  const setValue = (value: T) => {
+  const setLocalStorageValue = (value: T) => {
     try {
       setStoredValue(value);
       if (typeof window !== 'undefined') {
@@ -36,5 +39,5 @@ export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T)
     }
   };
 
-  return [storedValue, setValue];
+  return { storedValue, setLocalStorageValue };
 }

From 2191a0a8ea1a7cb30ed5166d4efd1ea0eb8b6695 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Thu, 29 Aug 2024 10:56:00 +0200
Subject: [PATCH 028/157] feat: add email verification

---
 app/layout.tsx                  |  2 +-
 components/FormSignIn/index.tsx | 20 ++++++++++++++++----
 components/FormSignUp/index.tsx | 16 +++++++++++++---
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 24e5ca4..7226ffa 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
         <StoreProvider>
           <CssBaseline />
           <AppRouterCacheProvider options={{ key: 'css' }}>
-           <PrivateRoute>
+            <PrivateRoute>
               <StyledEngineProvider injectFirst>
                 <Header />
                 {children}
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index b663237..eb1bd7b 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -20,9 +20,10 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useRouter } from 'next/navigation';
 import { signInWithEmailAndPassword } from '@firebase/auth';
-import { auth } from '@/firebase';
+import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { Box } from '@mui/system';
+import { FirebaseError } from '@firebase/util';
 
 function FormSignIn() {
   const router = useRouter();
@@ -40,10 +41,21 @@ function FormSignIn() {
   const onFormSubmit = async (data: SignInData) => {
     setSignInError(null);
     try {
-      await signInWithEmailAndPassword(auth, data.login, data.password);
-      router.push(routes.home);
+      const user = await signInWithEmailAndPassword(auth, data.login, data.password);
+      if (!user.user.emailVerified) {
+        await logout();
+        console.log('Please confirm your email address');
+        router.push(routes.login);
+      } else {
+        console.log('Sign in successful');
+        router.push(routes.home);
+      }
     } catch (error) {
-      setSignInError('Failed to sign in. Please try again.');
+      if (error instanceof FirebaseError && error.code === 'auth/user-not-found') {
+        setSignInError('Please create an account');
+      } else {
+        setSignInError('Failed to sign in. Please try again.');
+      }
     }
   };
 
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 14d4710..2e9a43e 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -20,10 +20,11 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useRouter } from 'next/navigation';
 import { signUpValidationSchema } from '@/validation/signup.validation';
-import { createUserWithEmailAndPassword, updateProfile } from '@firebase/auth';
-import { auth } from '@/firebase';
+import { createUserWithEmailAndPassword, sendEmailVerification, updateProfile } from '@firebase/auth';
+import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { Box } from '@mui/system';
+import { FirebaseError } from '@firebase/util';
 
 function FormSignUp() {
   const router = useRouter();
@@ -42,10 +43,19 @@ function FormSignUp() {
     setSignUpError(null);
     try {
       const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
+      await logout();
       await updateProfile(userCredential.user, { displayName: data.name });
+      console.log('Please confirm your email address');
+      await sendEmailVerification(userCredential.user);
       router.push(routes.home);
+      console.log('Signup successful');
     } catch (error) {
-      setSignUpError('Failed to sign up. Please try again.');
+      if (error instanceof FirebaseError && error.code === 'auth/email-already-in-use') {
+        setSignUpError('You already sign up');
+        router.push(routes.login);
+      } else {
+        setSignUpError('Failed to sign up. Please try again.');
+      }
     }
   };
 

From 274858d8250041e80c0788dff6a40a5fca11d5e9 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Thu, 29 Aug 2024 12:41:06 +0200
Subject: [PATCH 029/157] feat: add toast messages

---
 app/layout.tsx                            |  9 ++++--
 components/FormSignIn/index.tsx           | 21 ++++++-------
 components/FormSignUp/index.tsx           | 19 ++++++------
 components/Header/index.tsx               |  7 ++++-
 components/ToastMessage/index.tsx         | 34 ++++++++++++++++++++
 constants/toastMessages.ts                | 11 +++++++
 redux/features/toastMessage/toastSlice.ts | 38 +++++++++++++++++++++++
 redux/store.ts                            |  3 +-
 8 files changed, 116 insertions(+), 26 deletions(-)
 create mode 100644 components/ToastMessage/index.tsx
 create mode 100644 constants/toastMessages.ts
 create mode 100644 redux/features/toastMessage/toastSlice.ts

diff --git a/app/layout.tsx b/app/layout.tsx
index 7226ffa..a67b03a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import { StyledEngineProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import './globals.css';
 import PrivateRoute from '@/components/PrivateRoute';
+import ToastMessage from '@/components/ToastMessage';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -29,9 +30,11 @@ export default function RootLayout({
           <AppRouterCacheProvider options={{ key: 'css' }}>
             <PrivateRoute>
               <StyledEngineProvider injectFirst>
-                <Header />
-                {children}
-                <Footer />
+                <ToastMessage>
+                  <Header />
+                  {children}
+                  <Footer />
+                </ToastMessage>
               </StyledEngineProvider>
             </PrivateRoute>
           </AppRouterCacheProvider>
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index eb1bd7b..d92d39f 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useForm } from 'react-hook-form';
 import { SignInData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -14,7 +14,6 @@ import {
   OutlinedInput,
   FormHelperText,
   TextField,
-  Alert,
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
@@ -22,13 +21,15 @@ import { useRouter } from 'next/navigation';
 import { signInWithEmailAndPassword } from '@firebase/auth';
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
-import { Box } from '@mui/system';
 import { FirebaseError } from '@firebase/util';
+import { useAppDispatch } from '@/redux/hooks';
+import { setMessage } from '@/redux/features/toastMessage/toastSlice';
+import { toastMessages } from '@/constants/toastMessages';
 
 function FormSignIn() {
   const router = useRouter();
   const [showPassword, setShowPassword] = React.useState(false);
-  const [signInError, setSignInError] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
 
   const {
     register,
@@ -39,22 +40,21 @@ function FormSignIn() {
   });
 
   const onFormSubmit = async (data: SignInData) => {
-    setSignInError(null);
     try {
       const user = await signInWithEmailAndPassword(auth, data.login, data.password);
       if (!user.user.emailVerified) {
         await logout();
-        console.log('Please confirm your email address');
+        dispatch(setMessage({ message: toastMessages.confirmEmail, type: 'warning' }));
         router.push(routes.login);
       } else {
-        console.log('Sign in successful');
+        dispatch(setMessage({ message: toastMessages.successSignIn, type: 'success' }));
         router.push(routes.home);
       }
     } catch (error) {
-      if (error instanceof FirebaseError && error.code === 'auth/user-not-found') {
-        setSignInError('Please create an account');
+      if (error instanceof FirebaseError && error.code === 'auth/invalid-credential') {
+        dispatch(setMessage({ message: toastMessages.userNotFound, type: 'error' }));
       } else {
-        setSignInError('Failed to sign in. Please try again.');
+        dispatch(setMessage({ message: toastMessages.errorSignIn, type: 'error' }));
       }
     }
   };
@@ -67,7 +67,6 @@ function FormSignIn() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
-      <Box>{signInError ? <Alert severity="error">{signInError}</Alert> : <Box height={48} />}</Box>
       <TextField
         error={!!errors.login}
         id="login"
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 2e9a43e..95a6da1 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useForm } from 'react-hook-form';
 import { SignUpData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -14,7 +14,6 @@ import {
   OutlinedInput,
   FormHelperText,
   TextField,
-  Alert,
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
@@ -23,13 +22,15 @@ import { signUpValidationSchema } from '@/validation/signup.validation';
 import { createUserWithEmailAndPassword, sendEmailVerification, updateProfile } from '@firebase/auth';
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
-import { Box } from '@mui/system';
 import { FirebaseError } from '@firebase/util';
+import { useAppDispatch } from '@/redux/hooks';
+import { setMessage } from '@/redux/features/toastMessage/toastSlice';
+import { toastMessages } from '@/constants/toastMessages';
 
 function FormSignUp() {
   const router = useRouter();
   const [showPassword, setShowPassword] = React.useState(false);
-  const [signUpError, setSignUpError] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
 
   const {
     register,
@@ -40,21 +41,20 @@ function FormSignUp() {
   });
 
   const onFormSubmit = async (data: SignUpData) => {
-    setSignUpError(null);
     try {
       const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
       await logout();
       await updateProfile(userCredential.user, { displayName: data.name });
-      console.log('Please confirm your email address');
+      dispatch(setMessage({ message: toastMessages.confirmEmail, type: 'warning' }));
       await sendEmailVerification(userCredential.user);
       router.push(routes.home);
-      console.log('Signup successful');
+      setTimeout(() => dispatch(setMessage({ message: toastMessages.successSignUp, type: 'success' })), 4000);
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/email-already-in-use') {
-        setSignUpError('You already sign up');
+        dispatch(setMessage({ message: toastMessages.userAlreadyExist, type: 'warning' }));
         router.push(routes.login);
       } else {
-        setSignUpError('Failed to sign up. Please try again.');
+        dispatch(setMessage({ message: toastMessages.errorSignUp, type: 'error' }));
       }
     }
   };
@@ -67,7 +67,6 @@ function FormSignUp() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
-      <Box>{signUpError ? <Alert severity="error">{signUpError}</Alert> : <Box height={48} />}</Box>
       <TextField
         error={!!errors.name}
         id="name"
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 9edca6d..7fc1a94 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -6,17 +6,22 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, logout } from '@/firebase';
 import { useRouter } from 'next/navigation';
 import { Button } from '@mui/material';
+import { useAppDispatch } from '@/redux/hooks';
+import { setMessage } from '@/redux/features/toastMessage/toastSlice';
+import { toastMessages } from '@/constants/toastMessages';
 
 function Header() {
   const [user] = useAuthState(auth);
   const router = useRouter();
+  const dispatch = useAppDispatch();
 
   const onLogout = async () => {
     try {
       await logout();
+      dispatch(setMessage({ message: toastMessages.signOutSuccess, type: 'success' }));
       router.push(routes.home);
     } catch (error) {
-      console.log(error);
+      dispatch(setMessage({ message: toastMessages.errorSignOut, type: 'error' }));
     }
   };
   return (
diff --git a/components/ToastMessage/index.tsx b/components/ToastMessage/index.tsx
new file mode 100644
index 0000000..d066360
--- /dev/null
+++ b/components/ToastMessage/index.tsx
@@ -0,0 +1,34 @@
+'use client';
+import React from 'react';
+import { Alert, Snackbar, SnackbarCloseReason } from '@mui/material';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import { closeToast, selectAll } from '@/redux/features/toastMessage/toastSlice';
+
+const ToastMessage = ({ children }: { children: React.ReactNode }) => {
+  const dispatch = useAppDispatch();
+  const { isOpen, message, type } = useAppSelector(selectAll);
+
+  const handleClose = (event: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    dispatch(closeToast());
+  };
+  return (
+    <>
+      {children}
+      <Snackbar
+        open={isOpen}
+        autoHideDuration={5000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert onClose={handleClose} severity={type} variant="filled">
+          {message}
+        </Alert>
+      </Snackbar>
+    </>
+  );
+};
+
+export default ToastMessage;
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
new file mode 100644
index 0000000..d6ea942
--- /dev/null
+++ b/constants/toastMessages.ts
@@ -0,0 +1,11 @@
+export const toastMessages = {
+  successSignIn: 'You have successfully signed in.',
+  errorSignIn: 'Failed to sign in. Please try again.',
+  userNotFound: 'User not found. Please check your login and password or create an account.',
+  confirmEmail: 'Please confirm your email address',
+  successSignUp: 'You have successfully signed up.',
+  errorSignUp: 'Failed to sign up. Please try again.',
+  userAlreadyExist: 'User already exist. Please sign in.',
+  signOutSuccess: 'You have successfully signed out.',
+  errorSignOut: 'Failed to sign out. Please try again.',
+};
diff --git a/redux/features/toastMessage/toastSlice.ts b/redux/features/toastMessage/toastSlice.ts
new file mode 100644
index 0000000..49f74c9
--- /dev/null
+++ b/redux/features/toastMessage/toastSlice.ts
@@ -0,0 +1,38 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export interface ToastSliceState {
+  isOpen: boolean;
+  message: string;
+  type: 'success' | 'error' | 'info' | 'warning';
+}
+
+const initialState: ToastSliceState = {
+  isOpen: false,
+  message: '',
+  type: 'info',
+};
+
+export const toastSlice = createSlice({
+  name: 'toastMessage',
+  initialState,
+  reducers: (create) => ({
+    setMessage: create.reducer((state, action: PayloadAction<Omit<ToastSliceState, 'isOpen'>>) => {
+      state.isOpen = true;
+      state.message = action.payload.message;
+      state.type = action.payload.type;
+    }),
+    closeToast: create.reducer((state) => {
+      state.isOpen = false;
+      state.message = '';
+      state.type = 'info';
+    }),
+  }),
+
+  selectors: {
+    selectAll: (toastMessage) => toastMessage,
+  },
+});
+
+export const { setMessage, closeToast } = toastSlice.actions;
+
+export const { selectAll } = toastSlice.selectors;
diff --git a/redux/store.ts b/redux/store.ts
index 80a3016..720cfec 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,8 +1,9 @@
 import type { Action, ThunkAction } from '@reduxjs/toolkit';
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
 import { restfullSlice } from './features/restfullClient/restfullSlice';
+import { toastSlice } from '@/redux/features/toastMessage/toastSlice';
 
-const rootReducer = combineSlices(restfullSlice);
+const rootReducer = combineSlices(restfullSlice, toastSlice);
 
 export type RootState = ReturnType<typeof rootReducer>;
 

From 0a631febb83143b69b2ba4210b60f77e8137802a Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 30 Aug 2024 12:35:53 +0200
Subject: [PATCH 030/157] feat: create graphigl component

---
 app/graphql/[[...endpoint]]/page.tsx         | 10 +++++++++-
 components/GraphiQL/GraphiQLClient/index.tsx | 18 ++++++++++++++++++
 components/Welcome/index.tsx                 |  2 +-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 components/GraphiQL/GraphiQLClient/index.tsx

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/graphql/[[...endpoint]]/page.tsx
index 59d875f..147ec32 100644
--- a/app/graphql/[[...endpoint]]/page.tsx
+++ b/app/graphql/[[...endpoint]]/page.tsx
@@ -1,4 +1,12 @@
+import GraphiQLClient from '@/components/GraphiQL/GraphiQLClient';
+
 function GraphQL() {
-  return <div>Endpoint</div>;
+  return (
+    <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
+      <div>Endpoint</div>
+      <GraphiQLClient></GraphiQLClient>
+    </main>
+  );
 }
+
 export default GraphQL;
diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
new file mode 100644
index 0000000..ba3b100
--- /dev/null
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -0,0 +1,18 @@
+import { TextField } from '@mui/material';
+
+const GraphiQLClient = () => {
+  return (
+    <div>
+      <div className="flex">
+        <h5>Endpoint URL:</h5>
+        <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+      </div>
+      <div className="flex">
+        <h5>SDL URL:</h5>
+        <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+      </div>
+    </div>
+  );
+};
+
+export default GraphiQLClient;
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index 7855aa5..df6df85 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -30,7 +30,7 @@ const Welcome = () => {
               <Button href={routes.restfull} color="inherit" variant="outlined">
                 REST Client
               </Button>
-              <Button color="inherit" variant="outlined">
+              <Button href={routes.graphql} color="inherit" variant="outlined">
                 GraphiQL Client
               </Button>
               <Button color="inherit" variant="outlined">

From 1db550fc7426a8afbe2e06b2298f9d2a3225c8f2 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 31 Aug 2024 09:10:35 +0200
Subject: [PATCH 031/157] feat: add basic graphiql client structure

---
 app/graphql/[[...endpoint]]/page.tsx          |  4 +-
 app/layout.tsx                                |  2 +-
 .../GraphiQLClient/GraphiqlHeader.tsx         | 18 +++++++
 components/GraphiQL/GraphiQLClient/index.tsx  | 53 +++++++++++++++----
 4 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 components/GraphiQL/GraphiQLClient/GraphiqlHeader.tsx

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/graphql/[[...endpoint]]/page.tsx
index 147ec32..4f81020 100644
--- a/app/graphql/[[...endpoint]]/page.tsx
+++ b/app/graphql/[[...endpoint]]/page.tsx
@@ -1,10 +1,12 @@
 import GraphiQLClient from '@/components/GraphiQL/GraphiQLClient';
+import ResponseSection from '@/components/RestClient/ResponseSection';
 
 function GraphQL() {
+  const stringfy = JSON.stringify({}, null, 1);
   return (
     <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
-      <div>Endpoint</div>
       <GraphiQLClient></GraphiQLClient>
+      <ResponseSection data={stringfy} />
     </main>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 24e5ca4..7226ffa 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
         <StoreProvider>
           <CssBaseline />
           <AppRouterCacheProvider options={{ key: 'css' }}>
-           <PrivateRoute>
+            <PrivateRoute>
               <StyledEngineProvider injectFirst>
                 <Header />
                 {children}
diff --git a/components/GraphiQL/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQL/GraphiQLClient/GraphiqlHeader.tsx
new file mode 100644
index 0000000..4b8607a
--- /dev/null
+++ b/components/GraphiQL/GraphiQLClient/GraphiqlHeader.tsx
@@ -0,0 +1,18 @@
+import { IconButton, TextField } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+const GraphiqlHeader = () => {
+  return (
+    <div className="flex flex-col">
+      <div className="flex">
+        <TextField label="Header Key" variant="outlined" />
+        <TextField label="Header Value" variant="outlined" />
+        <IconButton aria-label="delete">
+          <DeleteIcon />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+export default GraphiqlHeader;
diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
index ba3b100..4c2e1c9 100644
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -1,17 +1,50 @@
-import { TextField } from '@mui/material';
+'use client';
+
+import React from 'react';
+import { Tab, Tabs, TextField } from '@mui/material';
+import { Box } from '@mui/system';
+import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
+import CodeMirror from '@uiw/react-codemirror';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
+import GraphiqlHeader from '@/components/GraphiQL/GraphiQLClient/GraphiqlHeader';
 
 const GraphiQLClient = () => {
+  function a11yProps(index: number) {
+    return {
+      id: `qraphql-tab-${index}`,
+      'aria-controls': `qraphql-tabpanel-${index}`,
+    };
+  }
+
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
   return (
-    <div>
-      <div className="flex">
-        <h5>Endpoint URL:</h5>
-        <TextField id="outlined-basic" label="Outlined" variant="outlined" />
-      </div>
-      <div className="flex">
-        <h5>SDL URL:</h5>
-        <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+    <section className="p-3">
+      <div className="flex flex-col gap-2">
+        <TextField id="outlined-basic" label="Endpoint" variant="outlined" />
+        <TextField id="outlined-basic" label="SDL" variant="outlined" />
       </div>
-    </div>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+          <Tab label="Query" {...a11yProps(0)} />
+          <Tab label="Headers" {...a11yProps(1)} />
+          <Tab label="Variables" {...a11yProps(2)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        <CodeMirror width="100%" theme={vscodeDark} />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        <GraphiqlHeader></GraphiqlHeader>
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={2}>
+        <CodeMirror width="100%" theme={vscodeDark} />
+      </CustomTabPanel>
+    </section>
   );
 };
 

From 72218879969d1eb6743d8f3526366d435914422f Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 31 Aug 2024 11:10:34 +0200
Subject: [PATCH 032/157] feat: add opportunity to receve response from basic
 graphql query

---
 components/GraphiQL/GraphiQLClient/index.tsx | 36 +++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
index 4c2e1c9..c2d0f0e 100644
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React from 'react';
-import { Tab, Tabs, TextField } from '@mui/material';
+import React, { useState } from 'react';
+import { Button, Tab, Tabs, TextField } from '@mui/material';
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import CodeMirror from '@uiw/react-codemirror';
@@ -22,6 +22,33 @@ const GraphiQLClient = () => {
     setValue(newValue);
   };
 
+  const [query, setQuery] = useState('');
+  const [variables, setVariables] = useState('');
+  const [response, setResponse] = useState<null | { error: string }>(null);
+
+  const executeQuery = async () => {
+    console.log(response);
+    try {
+      const reqQuery = query.slice(5);
+      const res = await fetch('https://recipes-back-8dgq.onrender.com/graphql', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          operationName: null,
+          query: reqQuery,
+          variables: variables ? JSON.parse(variables) : {},
+        }),
+      });
+
+      const data = await res.json();
+      setResponse(data);
+    } catch (error) {
+      setResponse({ error: 'Failed to fetch data' });
+    }
+  };
+
   return (
     <section className="p-3">
       <div className="flex flex-col gap-2">
@@ -36,14 +63,15 @@ const GraphiQLClient = () => {
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
-        <CodeMirror width="100%" theme={vscodeDark} />
+        <CodeMirror width="100%" theme={vscodeDark} value={query} onChange={(value) => setQuery(value)} />
       </CustomTabPanel>
       <CustomTabPanel value={value} index={1}>
         <GraphiqlHeader></GraphiqlHeader>
       </CustomTabPanel>
       <CustomTabPanel value={value} index={2}>
-        <CodeMirror width="100%" theme={vscodeDark} />
+        <CodeMirror width="100%" theme={vscodeDark} value={variables} onChange={(value) => setVariables(value)} />
       </CustomTabPanel>
+      <Button onClick={() => executeQuery()}>Send</Button>
     </section>
   );
 };

From ae9d91a25faf9eab3125462926bd33b0af8b129b Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 31 Aug 2024 14:22:03 +0200
Subject: [PATCH 033/157] feat: show query response in response section

---
 app/graphql/[[...endpoint]]/page.tsx          | 18 +++++--
 components/GraphiQL/GraphiQLClient/index.tsx  | 37 +++++++++----
 .../features/graphiqlClient/graphiqlSlice.ts  | 53 +++++++++++++++++++
 redux/store.ts                                |  3 +-
 4 files changed, 96 insertions(+), 15 deletions(-)
 create mode 100644 redux/features/graphiqlClient/graphiqlSlice.ts

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/graphql/[[...endpoint]]/page.tsx
index 4f81020..6433d11 100644
--- a/app/graphql/[[...endpoint]]/page.tsx
+++ b/app/graphql/[[...endpoint]]/page.tsx
@@ -1,12 +1,24 @@
 import GraphiQLClient from '@/components/GraphiQL/GraphiQLClient';
 import ResponseSection from '@/components/RestClient/ResponseSection';
 
-function GraphQL() {
-  const stringfy = JSON.stringify({}, null, 1);
+interface Props {
+  params?: {
+    endpoint: string[];
+  };
+  searchParams?: {
+    key: string;
+    value: string;
+  };
+}
+
+function GraphQL({ params }: Props) {
+  const responseData = params?.endpoint;
+  const data = responseData ? Buffer.from(responseData[0], 'base64').toString('utf-8') : '';
+
   return (
     <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
       <GraphiQLClient></GraphiQLClient>
-      <ResponseSection data={stringfy} />
+      <ResponseSection data={data} />
     </main>
   );
 }
diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
index c2d0f0e..5804c99 100644
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -1,12 +1,15 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Tab, Tabs, TextField } from '@mui/material';
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import CodeMirror from '@uiw/react-codemirror';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
 import GraphiqlHeader from '@/components/GraphiQL/GraphiQLClient/GraphiqlHeader';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import { selectAll, setQuery, setResponse, setUrl, setVariables } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { useRouter } from 'next/navigation';
 
 const GraphiQLClient = () => {
   function a11yProps(index: number) {
@@ -17,20 +20,19 @@ const GraphiQLClient = () => {
   }
 
   const [value, setValue] = React.useState(0);
+  const router = useRouter();
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
-  const [query, setQuery] = useState('');
-  const [variables, setVariables] = useState('');
-  const [response, setResponse] = useState<null | { error: string }>(null);
+  const dispatch = useAppDispatch();
+  const { query, variables, url } = useAppSelector(selectAll);
 
   const executeQuery = async () => {
-    console.log(response);
     try {
       const reqQuery = query.slice(5);
-      const res = await fetch('https://recipes-back-8dgq.onrender.com/graphql', {
+      const res = await fetch(url, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -43,16 +45,24 @@ const GraphiQLClient = () => {
       });
 
       const data = await res.json();
-      setResponse(data);
+      dispatch(setResponse(data));
+      const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
+      const b = Buffer.from(a, 'base64').toString('utf-8');
+      console.log(a, '!!!!', b);
+      router.push(`/graphql/${a}`);
     } catch (error) {
-      setResponse({ error: 'Failed to fetch data' });
+      dispatch(setResponse('Failed to fetch data'));
     }
   };
 
+  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setUrl(e.target.value));
+  };
+
   return (
     <section className="p-3">
       <div className="flex flex-col gap-2">
-        <TextField id="outlined-basic" label="Endpoint" variant="outlined" />
+        <TextField id="outlined-basic" label="Endpoint" variant="outlined" value={url} onChange={changeUrl} />
         <TextField id="outlined-basic" label="SDL" variant="outlined" />
       </div>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
@@ -63,13 +73,18 @@ const GraphiQLClient = () => {
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
-        <CodeMirror width="100%" theme={vscodeDark} value={query} onChange={(value) => setQuery(value)} />
+        <CodeMirror width="100%" theme={vscodeDark} value={query} onChange={(value) => dispatch(setQuery(value))} />
       </CustomTabPanel>
       <CustomTabPanel value={value} index={1}>
         <GraphiqlHeader></GraphiqlHeader>
       </CustomTabPanel>
       <CustomTabPanel value={value} index={2}>
-        <CodeMirror width="100%" theme={vscodeDark} value={variables} onChange={(value) => setVariables(value)} />
+        <CodeMirror
+          width="100%"
+          theme={vscodeDark}
+          value={variables}
+          onChange={(value) => dispatch(setVariables(value))}
+        />
       </CustomTabPanel>
       <Button onClick={() => executeQuery()}>Send</Button>
     </section>
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
new file mode 100644
index 0000000..e7e4efb
--- /dev/null
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -0,0 +1,53 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface GraphiqlSliceState {
+  query: string;
+  variables: string;
+  url: string;
+  sdlUrl: string;
+  response: string;
+}
+
+const initialState: GraphiqlSliceState = {
+  query: '',
+  variables: '',
+  url: '',
+  sdlUrl: '',
+  response: '',
+};
+
+export const graphiqlSlice = createSlice({
+  name: 'graphiql',
+  initialState,
+  reducers: (create) => ({
+    setQuery: create.reducer((state, action: PayloadAction<string>) => {
+      state.query = action.payload;
+    }),
+    setVariables: create.reducer((state, action: PayloadAction<string>) => {
+      state.variables = action.payload;
+    }),
+    setUrl: create.reducer((state, action: PayloadAction<string>) => {
+      state.url = action.payload;
+    }),
+    setSdlUrl: create.reducer((state, action: PayloadAction<string>) => {
+      state.sdlUrl = action.payload;
+    }),
+    setResponse: create.reducer((state, action: PayloadAction<string>) => {
+      state.response = action.payload;
+    }),
+  }),
+
+  selectors: {
+    selectAll: (graphiql) => graphiql,
+    selectQuery: (graphiql) => graphiql.query,
+    selectVariables: (graphiql) => graphiql.variables,
+    selectUrl: (graphiql) => graphiql.url,
+    selectSdlUrl: (graphiql) => graphiql.sdlUrl,
+    selectResponse: (graphiql) => graphiql.response,
+  },
+});
+
+export const { setQuery, setVariables, setUrl, setResponse } = graphiqlSlice.actions;
+
+export const { selectAll, selectQuery, selectVariables, selectUrl, selectSdlUrl, selectResponse } =
+  graphiqlSlice.selectors;
diff --git a/redux/store.ts b/redux/store.ts
index 80a3016..c7cbd4a 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,8 +1,9 @@
 import type { Action, ThunkAction } from '@reduxjs/toolkit';
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
 import { restfullSlice } from './features/restfullClient/restfullSlice';
+import { graphiqlSlice } from '@/redux/features/graphiqlClient/graphiqlSlice';
 
-const rootReducer = combineSlices(restfullSlice);
+const rootReducer = combineSlices(restfullSlice, graphiqlSlice);
 
 export type RootState = ReturnType<typeof rootReducer>;
 

From 939a36304c9a32f6aedddaa9c91c8c18e93e314d Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Tue, 3 Sep 2024 10:48:59 +0200
Subject: [PATCH 034/157] feat: get graphql schema from url

---
 components/GraphiQL/GraphiQLClient/index.tsx  | 26 +++++++++++++------
 package.json                                  |  2 +-
 .../features/graphiqlClient/graphiqlSlice.ts  | 10 +++++--
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
index 5804c99..5af2548 100644
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -29,27 +29,27 @@ const GraphiQLClient = () => {
   const dispatch = useAppDispatch();
   const { query, variables, url } = useAppSelector(selectAll);
 
-  const executeQuery = async () => {
+  const executeQuery = async (operation: string | null = null, requestQuery: string | null = null) => {
     try {
-      const reqQuery = query.slice(5);
+      // todo: replace a with a value from query
+      const operationName = operation ? operation : 'a';
+      const reqQuery = requestQuery ?? query.slice(5);
       const res = await fetch(url, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          operationName: null,
+          operationName,
           query: reqQuery,
           variables: variables ? JSON.parse(variables) : {},
         }),
       });
 
       const data = await res.json();
+
       dispatch(setResponse(data));
-      const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
-      const b = Buffer.from(a, 'base64').toString('utf-8');
-      console.log(a, '!!!!', b);
-      router.push(`/graphql/${a}`);
+      return data;
     } catch (error) {
       dispatch(setResponse('Failed to fetch data'));
     }
@@ -58,6 +58,15 @@ const GraphiQLClient = () => {
   const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(setUrl(e.target.value));
   };
+  const schemaQuery =
+    'query IntrospectionQuery {\n  __schema {\n    queryType {\n      name\n    }\n    mutationType {\n      name\n    }\n    subscriptionType {\n      name\n    }\n    types {\n      ...FullType\n    }\n    directives {\n      name\n      description\n      locations\n      args {\n        ...InputValue\n      }\n    }\n  }\n}\n\nfragment FullType on __Type {\n  kind\n  name\n  description\n  fields(includeDeprecated: true) {\n    name\n    description\n    args {\n      ...InputValue\n    }\n    type {\n      ...TypeRef\n    }\n    isDeprecated\n    deprecationReason\n  }\n  inputFields {\n    ...InputValue\n  }\n  interfaces {\n    ...TypeRef\n  }\n  enumValues(includeDeprecated: true) {\n    name\n    description\n    isDeprecated\n    deprecationReason\n  }\n  possibleTypes {\n    ...TypeRef\n  }\n}\n\nfragment InputValue on __InputValue {\n  name\n  description\n  type {\n    ...TypeRef\n  }\n  defaultValue\n}\n\nfragment TypeRef on __Type {\n  kind\n  name\n  ofType {\n    kind\n    name\n    ofType {\n      kind\n      name\n      ofType {\n        kind\n        name\n        ofType {\n          kind\n          name\n          ofType {\n            kind\n            name\n            ofType {\n              kind\n              name\n              ofType {\n                kind\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n';
+
+  const sendQuery = () => {
+    executeQuery().then((data) => {
+      const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
+      router.push(`/graphql/${a}`);
+    });
+  };
 
   return (
     <section className="p-3">
@@ -86,7 +95,8 @@ const GraphiQLClient = () => {
           onChange={(value) => dispatch(setVariables(value))}
         />
       </CustomTabPanel>
-      <Button onClick={() => executeQuery()}>Send</Button>
+      <Button onClick={() => sendQuery()}>Send</Button>
+      <Button onClick={() => executeQuery('IntrospectionQuery', schemaQuery)}>Schema</Button>
     </section>
   );
 };
diff --git a/package.json b/package.json
index 839528a..cbf4cea 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 4200",
     "build": "next build",
     "start": "next start",
     "preview": "next build && next start",
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
index e7e4efb..b3a96ce 100644
--- a/redux/features/graphiqlClient/graphiqlSlice.ts
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -6,6 +6,7 @@ export interface GraphiqlSliceState {
   url: string;
   sdlUrl: string;
   response: string;
+  schema: string;
 }
 
 const initialState: GraphiqlSliceState = {
@@ -14,6 +15,7 @@ const initialState: GraphiqlSliceState = {
   url: '',
   sdlUrl: '',
   response: '',
+  schema: '',
 };
 
 export const graphiqlSlice = createSlice({
@@ -35,6 +37,9 @@ export const graphiqlSlice = createSlice({
     setResponse: create.reducer((state, action: PayloadAction<string>) => {
       state.response = action.payload;
     }),
+    setSchema: create.reducer((state, action: PayloadAction<string>) => {
+      state.schema = action.payload;
+    }),
   }),
 
   selectors: {
@@ -44,10 +49,11 @@ export const graphiqlSlice = createSlice({
     selectUrl: (graphiql) => graphiql.url,
     selectSdlUrl: (graphiql) => graphiql.sdlUrl,
     selectResponse: (graphiql) => graphiql.response,
+    selectSchema: (graphiql) => graphiql.schema,
   },
 });
 
-export const { setQuery, setVariables, setUrl, setResponse } = graphiqlSlice.actions;
+export const { setQuery, setVariables, setUrl, setSdlUrl, setResponse, setSchema } = graphiqlSlice.actions;
 
-export const { selectAll, selectQuery, selectVariables, selectUrl, selectSdlUrl, selectResponse } =
+export const { selectAll, selectQuery, selectVariables, selectUrl, selectSdlUrl, selectResponse, selectSchema } =
   graphiqlSlice.selectors;

From b97fe77585cde040751dc71a6e16be28f55fe002 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Tue, 3 Sep 2024 12:01:59 +0200
Subject: [PATCH 035/157] feat: display graphql schema in documentation

---
 components/GraphiQL/Documentation/index.tsx   | 17 ++++++++++++++++
 components/GraphiQL/GraphiQLClient/index.tsx  | 20 ++++++++++++++++++-
 package-lock.json                             |  3 +--
 package.json                                  |  1 +
 .../features/graphiqlClient/graphiqlSlice.ts  |  9 +++++----
 5 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 components/GraphiQL/Documentation/index.tsx

diff --git a/components/GraphiQL/Documentation/index.tsx b/components/GraphiQL/Documentation/index.tsx
new file mode 100644
index 0000000..3beefc5
--- /dev/null
+++ b/components/GraphiQL/Documentation/index.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { selectSchema } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { useAppSelector } from '@/redux/hooks';
+import { GraphQLSchema } from 'graphql/type';
+
+const Documentation = () => {
+  const schema: GraphQLSchema | null = useAppSelector(selectSchema);
+  console.log(schema, 'schemaa');
+
+  return (
+    <div>
+      <h3>Documentation</h3>
+      {schema ? <p>{JSON.stringify(schema)}</p> : <p>No schema</p>}
+    </div>
+  );
+};
+export default Documentation;
diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
index 5af2548..5eca760 100644
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -8,8 +8,17 @@ import CodeMirror from '@uiw/react-codemirror';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
 import GraphiqlHeader from '@/components/GraphiQL/GraphiQLClient/GraphiqlHeader';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery, setResponse, setUrl, setVariables } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import {
+  selectAll,
+  setQuery,
+  setResponse,
+  setSchema,
+  setUrl,
+  setVariables,
+} from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { useRouter } from 'next/navigation';
+import { buildClientSchema } from 'graphql/utilities';
+import Documentation from '@/components/GraphiQL/Documentation';
 
 const GraphiQLClient = () => {
   function a11yProps(index: number) {
@@ -49,6 +58,11 @@ const GraphiQLClient = () => {
       const data = await res.json();
 
       dispatch(setResponse(data));
+      if (operation) {
+        const a = buildClientSchema(data.data);
+        console.log(a, 'adata');
+        dispatch(setSchema(data.data));
+      }
       return data;
     } catch (error) {
       dispatch(setResponse('Failed to fetch data'));
@@ -79,6 +93,7 @@ const GraphiQLClient = () => {
           <Tab label="Query" {...a11yProps(0)} />
           <Tab label="Headers" {...a11yProps(1)} />
           <Tab label="Variables" {...a11yProps(2)} />
+          <Tab label="Documentation" {...a11yProps(3)} />
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
@@ -95,6 +110,9 @@ const GraphiQLClient = () => {
           onChange={(value) => dispatch(setVariables(value))}
         />
       </CustomTabPanel>
+      <CustomTabPanel index={3} value={value}>
+        <Documentation></Documentation>
+      </CustomTabPanel>
       <Button onClick={() => sendQuery()}>Send</Button>
       <Button onClick={() => executeQuery('IntrospectionQuery', schemaQuery)}>Schema</Button>
     </section>
diff --git a/package-lock.json b/package-lock.json
index 3f1fa97..07a6fe8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@uiw/codemirror-theme-vscode": "^4.23.0",
         "@uiw/react-codemirror": "^4.23.0",
         "firebase": "^10.13.0",
+        "graphql": "^16.9.0",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -6577,8 +6578,6 @@
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
       "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
-      "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
diff --git a/package.json b/package.json
index cbf4cea..17e27e1 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@uiw/codemirror-theme-vscode": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "firebase": "^10.13.0",
+    "graphql": "^16.9.0",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
index b3a96ce..6130096 100644
--- a/redux/features/graphiqlClient/graphiqlSlice.ts
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { GraphQLSchema } from 'graphql/type';
 
 export interface GraphiqlSliceState {
   query: string;
@@ -6,7 +7,7 @@ export interface GraphiqlSliceState {
   url: string;
   sdlUrl: string;
   response: string;
-  schema: string;
+  schema: GraphQLSchema | null;
 }
 
 const initialState: GraphiqlSliceState = {
@@ -15,7 +16,7 @@ const initialState: GraphiqlSliceState = {
   url: '',
   sdlUrl: '',
   response: '',
-  schema: '',
+  schema: null,
 };
 
 export const graphiqlSlice = createSlice({
@@ -37,8 +38,8 @@ export const graphiqlSlice = createSlice({
     setResponse: create.reducer((state, action: PayloadAction<string>) => {
       state.response = action.payload;
     }),
-    setSchema: create.reducer((state, action: PayloadAction<string>) => {
-      state.schema = action.payload;
+    setSchema: create.reducer((state, action: PayloadAction<GraphQLSchema | null>) => {
+      state.schema = action.payload as GraphQLSchema;
     }),
   }),
 

From ae59007f8890eeba5fd282357d0c73965823c28f Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Wed, 4 Sep 2024 13:22:52 +0200
Subject: [PATCH 036/157] feat: add opportunity to prettify graphql query

---
 components/GraphiQL/Documentation/index.tsx   |   57 +-
 components/GraphiQL/GraphiQLClient/index.tsx  |   14 +-
 package-lock.json                             | 1227 ++++++++++++++++-
 package.json                                  |    3 +-
 .../features/graphiqlClient/graphiqlSlice.ts  |   11 +-
 5 files changed, 1265 insertions(+), 47 deletions(-)

diff --git a/components/GraphiQL/Documentation/index.tsx b/components/GraphiQL/Documentation/index.tsx
index 3beefc5..bcbc742 100644
--- a/components/GraphiQL/Documentation/index.tsx
+++ b/components/GraphiQL/Documentation/index.tsx
@@ -1,17 +1,58 @@
 'use client';
-import { selectSchema } from '@/redux/features/graphiqlClient/graphiqlSlice';
+
+import { selectUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { useAppSelector } from '@/redux/hooks';
-import { GraphQLSchema } from 'graphql/type';
+import {
+  DocExplorer,
+  GraphiQLProvider,
+  QueryEditor,
+  usePrettifyEditors,
+  ResponseEditor,
+  useQueryEditor,
+} from '@graphiql/react';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import '@graphiql/react/dist/style.css';
+import { Button } from '@mui/material';
+import { useMemo } from 'react';
 
 const Documentation = () => {
-  const schema: GraphQLSchema | null = useAppSelector(selectSchema);
-  console.log(schema, 'schemaa');
+  const url: string = useAppSelector(selectUrl);
+  const fetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
+
+  function edit(a: string) {
+    console.log(a);
+  }
+
+  function PrettifyButton() {
+    const editor = useQueryEditor();
+    const prettifyEditors = usePrettifyEditors();
+
+    const handlePrettifyClick = () => {
+      if (editor) {
+        prettifyEditors();
+      }
+    };
+
+    return <Button onClick={handlePrettifyClick}>Prettify query</Button>;
+  }
 
   return (
-    <div>
-      <h3>Documentation</h3>
-      {schema ? <p>{JSON.stringify(schema)}</p> : <p>No schema</p>}
-    </div>
+    <>
+      {url ? (
+        <GraphiQLProvider fetcher={fetcher}>
+          <div className="graphiql-container">
+            <div className="h-64">
+              <PrettifyButton />
+              <QueryEditor onEdit={edit} />
+            </div>
+            <DocExplorer />
+            <ResponseEditor></ResponseEditor>
+          </div>
+        </GraphiQLProvider>
+      ) : (
+        <div>There is no url provided</div>
+      )}
+    </>
   );
 };
 export default Documentation;
diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
index 5eca760..28934c9 100644
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ b/components/GraphiQL/GraphiQLClient/index.tsx
@@ -8,16 +8,8 @@ import CodeMirror from '@uiw/react-codemirror';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
 import GraphiqlHeader from '@/components/GraphiQL/GraphiQLClient/GraphiqlHeader';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import {
-  selectAll,
-  setQuery,
-  setResponse,
-  setSchema,
-  setUrl,
-  setVariables,
-} from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setQuery, setResponse, setUrl, setVariables } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { useRouter } from 'next/navigation';
-import { buildClientSchema } from 'graphql/utilities';
 import Documentation from '@/components/GraphiQL/Documentation';
 
 const GraphiQLClient = () => {
@@ -59,9 +51,7 @@ const GraphiQLClient = () => {
 
       dispatch(setResponse(data));
       if (operation) {
-        const a = buildClientSchema(data.data);
-        console.log(a, 'adata');
-        dispatch(setSchema(data.data));
+        dispatch(setUrl(url));
       }
       return data;
     } catch (error) {
diff --git a/package-lock.json b/package-lock.json
index 07a6fe8..4003b52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@emotion/cache": "^11.13.1",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "@graphiql/react": "^0.26.2",
         "@hookform/resolvers": "^3.9.0",
         "@mui/icons-material": "^5.16.7",
         "@mui/material": "^5.16.7",
@@ -23,7 +24,7 @@
         "@uiw/codemirror-theme-vscode": "^4.23.0",
         "@uiw/react-codemirror": "^4.23.0",
         "firebase": "^10.13.0",
-        "graphql": "^16.9.0",
+        "graphql-ws": "^5.16.0",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -575,14 +576,13 @@
       }
     },
     "node_modules/@codemirror/language": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
-      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
-      "license": "MIT",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.0.0.tgz",
+      "integrity": "sha512-rtjk5ifyMzOna1c7PBu7J1VCt0PvA5wy3o8eMVnxMKb7z8KA7JFecvD04dSn14vj/bBaAbqRsGed5OjtofEnLA==",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.23.0",
-        "@lezer/common": "^1.1.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
         "@lezer/highlight": "^1.0.0",
         "@lezer/lr": "^1.0.0",
         "style-mod": "^4.0.0"
@@ -1770,6 +1770,121 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz",
       "integrity": "sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ=="
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+    },
+    "node_modules/@graphiql/react": {
+      "version": "0.26.2",
+      "resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.26.2.tgz",
+      "integrity": "sha512-aO4GWf/kJmqrjO+PORT/NPxwGvPGlg+mwye1v8xAlf8Q9j7P0hVtVBawYaSLUCCfJ/QnH7JAP+0VRamyooZZCw==",
+      "dependencies": {
+        "@graphiql/toolkit": "^0.11.0",
+        "@headlessui/react": "^1.7.15",
+        "@radix-ui/react-dialog": "^1.0.4",
+        "@radix-ui/react-dropdown-menu": "^2.0.5",
+        "@radix-ui/react-tooltip": "^1.0.6",
+        "@radix-ui/react-visually-hidden": "^1.0.3",
+        "@types/codemirror": "^5.60.8",
+        "clsx": "^1.2.1",
+        "codemirror": "^5.65.3",
+        "codemirror-graphql": "^2.1.1",
+        "copy-to-clipboard": "^3.2.0",
+        "framer-motion": "^6.5.1",
+        "get-value": "^3.0.1",
+        "graphql-language-service": "^5.3.0",
+        "markdown-it": "^14.1.0",
+        "set-value": "^4.1.0"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/codemirror": {
+      "version": "5.65.17",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.17.tgz",
+      "integrity": "sha512-1zOsUx3lzAOu/gnMAZkQ9kpIHcPYOc9y1Fbm2UVk5UBPkdq380nhkelG0qUwm1f7wPvTbndu9ZYlug35EwAZRQ=="
+    },
+    "node_modules/@graphiql/react/node_modules/codemirror-graphql": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/codemirror-graphql/-/codemirror-graphql-2.1.1.tgz",
+      "integrity": "sha512-qVNd+H4OqkeBLDztB5bYllAmToxmZASOoELgbf+csNcoovIHKqSB/eppkzWI5jdQGd8bvLK1lTePfqXsCBFryw==",
+      "dependencies": {
+        "@types/codemirror": "^0.0.90",
+        "graphql-language-service": "5.3.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "6.0.0",
+        "codemirror": "^5.65.3",
+        "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/codemirror-graphql/node_modules/@types/codemirror": {
+      "version": "0.0.90",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.90.tgz",
+      "integrity": "sha512-8Z9+tSg27NPRGubbUPUCrt5DDG/OWzLph5BvcDykwR5D7RyZh5mhHG0uS1ePKV1YFCA+/cwc4Ey2AJAEFfV3IA==",
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
+    "node_modules/@graphiql/toolkit": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@graphiql/toolkit/-/toolkit-0.11.0.tgz",
+      "integrity": "sha512-VqqQrvkMwgbGhj7J5907yfuAy5B1OCgOTIPi7gtRneG1jYmnqvSxi8Yrmu0B8G8fZxkxKVsYi8dE8EtsOBrTGQ==",
+      "dependencies": {
+        "@n1ru4l/push-pull-async-iterable-iterator": "^3.1.0",
+        "meros": "^1.1.4"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
+        "graphql-ws": ">= 4.5.0"
+      },
+      "peerDependenciesMeta": {
+        "graphql-ws": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
@@ -1799,6 +1914,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
+      "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
+      "dependencies": {
+        "@tanstack/react-virtual": "^3.0.0-beta.60",
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
@@ -2124,6 +2255,64 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@motionone/animation": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
+      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "dependencies": {
+        "@motionone/easing": "^10.18.0",
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
+      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "dependencies": {
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
+      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
+      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.29.1",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
@@ -2413,6 +2602,14 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/@n1ru4l/push-pull-async-iterable-iterator": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@n1ru4l/push-pull-async-iterable-iterator/-/push-pull-async-iterable-iterator-3.2.0.tgz",
+      "integrity": "sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.5",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
@@ -2789,15 +2986,594 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
       "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
     },
-    "node_modules/@protobufjs/pool": {
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
+      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz",
+      "integrity": "sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz",
+      "integrity": "sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz",
+      "integrity": "sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
-      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
     },
-    "node_modules/@protobufjs/utf8": {
+    "node_modules/@radix-ui/rect": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
     },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.2.7",
@@ -3070,6 +3846,31 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.6.tgz",
+      "integrity": "sha512-xaSy6uUxB92O8mngHZ6CvbhGuqxQ5lIZWCBy+FjhrbHmOwc6BnOnKkYm2FsB1/BpKw/+FVctlMbEtI+F6I1aJg==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.6.tgz",
+      "integrity": "sha512-1giLc4dzgEKLMx5pgKjL6HlG5fjZMgCjzlKAlpr7yoUtetVPELgER1NtephAI910nMwfPTHNyWKSFmJdHkz2Cw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -3237,6 +4038,14 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.15",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
+      "integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -3248,7 +4057,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -3303,7 +4111,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -3325,6 +4133,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/tern": {
+      "version": "0.23.9",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
+      "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -3949,9 +4765,19 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -4707,6 +5533,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -4874,6 +5708,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/debounce-promise": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
+      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -5004,6 +5843,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -5100,7 +5944,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -6275,6 +7118,49 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6397,6 +7283,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-stream": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
@@ -6441,6 +7335,17 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/get-value": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-3.0.1.tgz",
+      "integrity": "sha512-mKZj9JLQrwMBtj5wxi6MH8Z5eSKaERpAwjg43dPtlGI1ZVEgH/qC7T8/6R2OBSUA+zzHBZgICsVJaEIV2tKTDA==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -6582,6 +7487,36 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "node_modules/graphql-language-service": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/graphql-language-service/-/graphql-language-service-5.3.0.tgz",
+      "integrity": "sha512-gCQIIy7lM9CB1KPLEb+DNZLczA9zuTLEOJE2hEQZTFYInogdmMDRa6RAkvM4LL0LcgcS+3uPs6KtHlcjCqRbUg==",
+      "dependencies": {
+        "debounce-promise": "^3.1.2",
+        "nullthrows": "^1.0.0",
+        "vscode-languageserver-types": "^3.17.1"
+      },
+      "bin": {
+        "graphql": "dist/temp-bin.js"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2"
+      }
+    },
+    "node_modules/graphql-ws": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.16.0.tgz",
+      "integrity": "sha512-Ju2RCU2dQMgSKtArPbEtsK5gNLnsQyTNIo/T7cZNp96niC1x0KdJNZV0TIoilceBPQwfb5itrGl8pkFeOUMl4A==",
+      "workspaces": [
+        "website"
+      ],
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": ">=0.11 <=16"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -6676,6 +7611,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -6872,6 +7812,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -7161,6 +8109,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -7168,6 +8127,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-primitive": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
+      "integrity": "sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -7332,6 +8299,14 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -7614,6 +8589,14 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/lint-staged": {
       "version": "15.2.9",
       "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.9.tgz",
@@ -8049,6 +9032,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -8066,6 +9070,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meros": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/meros/-/meros-1.3.0.tgz",
+      "integrity": "sha512-2BNGOimxEz5hmjUG2FwoxCt5HN7BXdaWyFqEwxPTrJzVdABtrL4TiHTcsWSFAxPQ/tOnEaQEJh3qWq71QRMY+w==",
+      "engines": {
+        "node": ">=13"
+      },
+      "peerDependencies": {
+        "@types/node": ">=13"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
@@ -8416,6 +9436,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nullthrows": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
+    },
     "node_modules/nwsapi": {
       "version": "2.2.12",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
@@ -8839,6 +9864,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -9241,6 +10277,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -9358,6 +10402,73 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -9817,6 +10928,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-value": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-4.1.0.tgz",
+      "integrity": "sha512-zTEg4HL0RwVrqcWs3ztF+x1vkxfm0lP+MQQFPiMJTKVceBwEV0A569Ou8l9IYQG8jOZdMVI1hGsc0tmeD2o/Lw==",
+      "funding": [
+        "https://github.com/sponsors/jonschlinkert",
+        "https://paypal.me/jonathanschlinkert",
+        "https://jonschlinkert.dev/sponsor"
+      ],
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "is-primitive": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=11.0"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10289,6 +11417,15 @@
       "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
       "license": "MIT"
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -10574,6 +11711,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/toposort": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
@@ -10775,6 +11917,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -10870,6 +12017,47 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
@@ -11034,6 +12222,11 @@
         }
       }
     },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 17e27e1..a457956 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@graphiql/react": "^0.26.2",
     "@hookform/resolvers": "^3.9.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
@@ -30,7 +31,7 @@
     "@uiw/codemirror-theme-vscode": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "firebase": "^10.13.0",
-    "graphql": "^16.9.0",
+    "graphql-ws": "^5.16.0",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
index 6130096..8533023 100644
--- a/redux/features/graphiqlClient/graphiqlSlice.ts
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { GraphQLSchema } from 'graphql/type';
 
 export interface GraphiqlSliceState {
   query: string;
@@ -7,7 +6,6 @@ export interface GraphiqlSliceState {
   url: string;
   sdlUrl: string;
   response: string;
-  schema: GraphQLSchema | null;
 }
 
 const initialState: GraphiqlSliceState = {
@@ -16,7 +14,6 @@ const initialState: GraphiqlSliceState = {
   url: '',
   sdlUrl: '',
   response: '',
-  schema: null,
 };
 
 export const graphiqlSlice = createSlice({
@@ -38,9 +35,6 @@ export const graphiqlSlice = createSlice({
     setResponse: create.reducer((state, action: PayloadAction<string>) => {
       state.response = action.payload;
     }),
-    setSchema: create.reducer((state, action: PayloadAction<GraphQLSchema | null>) => {
-      state.schema = action.payload as GraphQLSchema;
-    }),
   }),
 
   selectors: {
@@ -50,11 +44,10 @@ export const graphiqlSlice = createSlice({
     selectUrl: (graphiql) => graphiql.url,
     selectSdlUrl: (graphiql) => graphiql.sdlUrl,
     selectResponse: (graphiql) => graphiql.response,
-    selectSchema: (graphiql) => graphiql.schema,
   },
 });
 
-export const { setQuery, setVariables, setUrl, setSdlUrl, setResponse, setSchema } = graphiqlSlice.actions;
+export const { setQuery, setVariables, setUrl, setSdlUrl, setResponse } = graphiqlSlice.actions;
 
-export const { selectAll, selectQuery, selectVariables, selectUrl, selectSdlUrl, selectResponse, selectSchema } =
+export const { selectAll, selectQuery, selectVariables, selectUrl, selectSdlUrl, selectResponse } =
   graphiqlSlice.selectors;

From 102422d90faffe55d94cb7559189ffc85bd3292e Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Wed, 4 Sep 2024 14:16:36 +0200
Subject: [PATCH 037/157] refactor: refactor project structure

---
 app/graphql/[[...endpoint]]/page.tsx          |   2 +-
 components/GraphiQL/Documentation/index.tsx   |  58 --------
 components/GraphiQL/GraphiQLClient/index.tsx  | 112 ---------------
 .../GraphiQLClient/Documentation/index.tsx    |  29 ++++
 .../GraphiQLClient/GraphiqlHeader.tsx         |   0
 components/GraphiQLClient/PrettifyButton.tsx  |  17 +++
 components/GraphiQLClient/index.tsx           | 133 ++++++++++++++++++
 7 files changed, 180 insertions(+), 171 deletions(-)
 delete mode 100644 components/GraphiQL/Documentation/index.tsx
 delete mode 100644 components/GraphiQL/GraphiQLClient/index.tsx
 create mode 100644 components/GraphiQLClient/Documentation/index.tsx
 rename components/{GraphiQL => }/GraphiQLClient/GraphiqlHeader.tsx (100%)
 create mode 100644 components/GraphiQLClient/PrettifyButton.tsx
 create mode 100644 components/GraphiQLClient/index.tsx

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/graphql/[[...endpoint]]/page.tsx
index 6433d11..5dd2b1e 100644
--- a/app/graphql/[[...endpoint]]/page.tsx
+++ b/app/graphql/[[...endpoint]]/page.tsx
@@ -1,5 +1,5 @@
-import GraphiQLClient from '@/components/GraphiQL/GraphiQLClient';
 import ResponseSection from '@/components/RestClient/ResponseSection';
+import GraphiQLClient from '@/components/GraphiQLClient';
 
 interface Props {
   params?: {
diff --git a/components/GraphiQL/Documentation/index.tsx b/components/GraphiQL/Documentation/index.tsx
deleted file mode 100644
index bcbc742..0000000
--- a/components/GraphiQL/Documentation/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import { selectUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
-import { useAppSelector } from '@/redux/hooks';
-import {
-  DocExplorer,
-  GraphiQLProvider,
-  QueryEditor,
-  usePrettifyEditors,
-  ResponseEditor,
-  useQueryEditor,
-} from '@graphiql/react';
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import '@graphiql/react/dist/style.css';
-import { Button } from '@mui/material';
-import { useMemo } from 'react';
-
-const Documentation = () => {
-  const url: string = useAppSelector(selectUrl);
-  const fetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
-
-  function edit(a: string) {
-    console.log(a);
-  }
-
-  function PrettifyButton() {
-    const editor = useQueryEditor();
-    const prettifyEditors = usePrettifyEditors();
-
-    const handlePrettifyClick = () => {
-      if (editor) {
-        prettifyEditors();
-      }
-    };
-
-    return <Button onClick={handlePrettifyClick}>Prettify query</Button>;
-  }
-
-  return (
-    <>
-      {url ? (
-        <GraphiQLProvider fetcher={fetcher}>
-          <div className="graphiql-container">
-            <div className="h-64">
-              <PrettifyButton />
-              <QueryEditor onEdit={edit} />
-            </div>
-            <DocExplorer />
-            <ResponseEditor></ResponseEditor>
-          </div>
-        </GraphiQLProvider>
-      ) : (
-        <div>There is no url provided</div>
-      )}
-    </>
-  );
-};
-export default Documentation;
diff --git a/components/GraphiQL/GraphiQLClient/index.tsx b/components/GraphiQL/GraphiQLClient/index.tsx
deleted file mode 100644
index 28934c9..0000000
--- a/components/GraphiQL/GraphiQLClient/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button, Tab, Tabs, TextField } from '@mui/material';
-import { Box } from '@mui/system';
-import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
-import CodeMirror from '@uiw/react-codemirror';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
-import GraphiqlHeader from '@/components/GraphiQL/GraphiQLClient/GraphiqlHeader';
-import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery, setResponse, setUrl, setVariables } from '@/redux/features/graphiqlClient/graphiqlSlice';
-import { useRouter } from 'next/navigation';
-import Documentation from '@/components/GraphiQL/Documentation';
-
-const GraphiQLClient = () => {
-  function a11yProps(index: number) {
-    return {
-      id: `qraphql-tab-${index}`,
-      'aria-controls': `qraphql-tabpanel-${index}`,
-    };
-  }
-
-  const [value, setValue] = React.useState(0);
-  const router = useRouter();
-
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-  };
-
-  const dispatch = useAppDispatch();
-  const { query, variables, url } = useAppSelector(selectAll);
-
-  const executeQuery = async (operation: string | null = null, requestQuery: string | null = null) => {
-    try {
-      // todo: replace a with a value from query
-      const operationName = operation ? operation : 'a';
-      const reqQuery = requestQuery ?? query.slice(5);
-      const res = await fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          operationName,
-          query: reqQuery,
-          variables: variables ? JSON.parse(variables) : {},
-        }),
-      });
-
-      const data = await res.json();
-
-      dispatch(setResponse(data));
-      if (operation) {
-        dispatch(setUrl(url));
-      }
-      return data;
-    } catch (error) {
-      dispatch(setResponse('Failed to fetch data'));
-    }
-  };
-
-  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(setUrl(e.target.value));
-  };
-  const schemaQuery =
-    'query IntrospectionQuery {\n  __schema {\n    queryType {\n      name\n    }\n    mutationType {\n      name\n    }\n    subscriptionType {\n      name\n    }\n    types {\n      ...FullType\n    }\n    directives {\n      name\n      description\n      locations\n      args {\n        ...InputValue\n      }\n    }\n  }\n}\n\nfragment FullType on __Type {\n  kind\n  name\n  description\n  fields(includeDeprecated: true) {\n    name\n    description\n    args {\n      ...InputValue\n    }\n    type {\n      ...TypeRef\n    }\n    isDeprecated\n    deprecationReason\n  }\n  inputFields {\n    ...InputValue\n  }\n  interfaces {\n    ...TypeRef\n  }\n  enumValues(includeDeprecated: true) {\n    name\n    description\n    isDeprecated\n    deprecationReason\n  }\n  possibleTypes {\n    ...TypeRef\n  }\n}\n\nfragment InputValue on __InputValue {\n  name\n  description\n  type {\n    ...TypeRef\n  }\n  defaultValue\n}\n\nfragment TypeRef on __Type {\n  kind\n  name\n  ofType {\n    kind\n    name\n    ofType {\n      kind\n      name\n      ofType {\n        kind\n        name\n        ofType {\n          kind\n          name\n          ofType {\n            kind\n            name\n            ofType {\n              kind\n              name\n              ofType {\n                kind\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n';
-
-  const sendQuery = () => {
-    executeQuery().then((data) => {
-      const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
-      router.push(`/graphql/${a}`);
-    });
-  };
-
-  return (
-    <section className="p-3">
-      <div className="flex flex-col gap-2">
-        <TextField id="outlined-basic" label="Endpoint" variant="outlined" value={url} onChange={changeUrl} />
-        <TextField id="outlined-basic" label="SDL" variant="outlined" />
-      </div>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-          <Tab label="Query" {...a11yProps(0)} />
-          <Tab label="Headers" {...a11yProps(1)} />
-          <Tab label="Variables" {...a11yProps(2)} />
-          <Tab label="Documentation" {...a11yProps(3)} />
-        </Tabs>
-      </Box>
-      <CustomTabPanel value={value} index={0}>
-        <CodeMirror width="100%" theme={vscodeDark} value={query} onChange={(value) => dispatch(setQuery(value))} />
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={1}>
-        <GraphiqlHeader></GraphiqlHeader>
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={2}>
-        <CodeMirror
-          width="100%"
-          theme={vscodeDark}
-          value={variables}
-          onChange={(value) => dispatch(setVariables(value))}
-        />
-      </CustomTabPanel>
-      <CustomTabPanel index={3} value={value}>
-        <Documentation></Documentation>
-      </CustomTabPanel>
-      <Button onClick={() => sendQuery()}>Send</Button>
-      <Button onClick={() => executeQuery('IntrospectionQuery', schemaQuery)}>Schema</Button>
-    </section>
-  );
-};
-
-export default GraphiQLClient;
diff --git a/components/GraphiQLClient/Documentation/index.tsx b/components/GraphiQLClient/Documentation/index.tsx
new file mode 100644
index 0000000..df82eb9
--- /dev/null
+++ b/components/GraphiQLClient/Documentation/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { selectSdlUrl, selectUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { useAppSelector } from '@/redux/hooks';
+import { DocExplorer, GraphiQLProvider } from '@graphiql/react';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import '@graphiql/react/dist/style.css';
+import { useMemo } from 'react';
+
+const Documentation = () => {
+  const url: string = useAppSelector(selectUrl);
+  const sdlUrl: string = useAppSelector(selectSdlUrl);
+  const fetcher = useMemo(() => createGraphiQLFetcher({ url: sdlUrl || url }), [sdlUrl, url]);
+
+  return (
+    <>
+      {sdlUrl || url ? (
+        <GraphiQLProvider fetcher={fetcher}>
+          <div className="graphiql-container">
+            <DocExplorer />
+          </div>
+        </GraphiQLProvider>
+      ) : (
+        <div>There is no url provided</div>
+      )}
+    </>
+  );
+};
+export default Documentation;
diff --git a/components/GraphiQL/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
similarity index 100%
rename from components/GraphiQL/GraphiQLClient/GraphiqlHeader.tsx
rename to components/GraphiQLClient/GraphiqlHeader.tsx
diff --git a/components/GraphiQLClient/PrettifyButton.tsx b/components/GraphiQLClient/PrettifyButton.tsx
new file mode 100644
index 0000000..edb3b56
--- /dev/null
+++ b/components/GraphiQLClient/PrettifyButton.tsx
@@ -0,0 +1,17 @@
+import { usePrettifyEditors, useQueryEditor } from '@graphiql/react';
+import { Button } from '@mui/material';
+
+function PrettifyButton() {
+  const editor = useQueryEditor();
+  const prettifyEditors = usePrettifyEditors();
+
+  const handlePrettifyClick = () => {
+    if (editor) {
+      prettifyEditors();
+    }
+  };
+
+  return <Button onClick={handlePrettifyClick}>Prettify query</Button>;
+}
+
+export default PrettifyButton;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
new file mode 100644
index 0000000..0638e10
--- /dev/null
+++ b/components/GraphiQLClient/index.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { Button, Tab, Tabs, TextField } from '@mui/material';
+import { Box } from '@mui/system';
+import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
+import CodeMirror from '@uiw/react-codemirror';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import {
+  selectAll,
+  setQuery,
+  setResponse,
+  setSdlUrl,
+  setUrl,
+  setVariables,
+} from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { useRouter } from 'next/navigation';
+import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import GraphiqlHeader from '@/components/GraphiQLClient/GraphiqlHeader';
+import Documentation from '@/components/GraphiQLClient/Documentation';
+import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
+
+const GraphiQLClient = () => {
+  const { query, variables, url, sdlUrl } = useAppSelector(selectAll);
+  const fetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
+  const [value, setValue] = React.useState(0);
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  const executeQuery = async () => {
+    console.log(query, 'query');
+    try {
+      // todo: replace a with a value from query
+      const operationName = null;
+      const reqQuery = query.slice(5);
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          operationName,
+          query: reqQuery,
+          variables: variables ? JSON.parse(variables) : {},
+        }),
+      });
+      const data = await res.json();
+      dispatch(setResponse(data));
+      return data;
+    } catch (error) {
+      dispatch(setResponse('Failed to fetch data'));
+    }
+  };
+
+  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setUrl(e.target.value));
+  };
+
+  const sendQuery = () => {
+    executeQuery().then((data) => {
+      const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
+      router.push(`/graphql/${a}`);
+    });
+  };
+
+  function a11yProps(index: number) {
+    return {
+      id: `qraphql-tab-${index}`,
+      'aria-controls': `qraphql-tabpanel-${index}`,
+    };
+  }
+
+  function edit(value: string) {
+    console.log(value);
+    dispatch(setQuery(value));
+  }
+
+  return (
+    <GraphiQLProvider fetcher={fetcher}>
+      <div className="graphiql-container">
+        <section className="p-3">
+          <div className="flex flex-col gap-2">
+            <TextField id="outlined-basic" label="Endpoint" variant="outlined" value={url} onChange={changeUrl} />
+            <TextField
+              id="outlined-basic"
+              label="SDL"
+              variant="outlined"
+              value={sdlUrl || url + '?sdl'}
+              onChange={(e) => dispatch(setSdlUrl(e.target.value))}
+            />
+          </div>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+              <Tab label="Query" {...a11yProps(0)} />
+              <Tab label="Headers" {...a11yProps(1)} />
+              <Tab label="Variables" {...a11yProps(2)} />
+              <Tab label="Documentation" {...a11yProps(3)} />
+            </Tabs>
+          </Box>
+          <CustomTabPanel value={value} index={0}>
+            <div className="h-64">
+              <PrettifyButton />
+              <QueryEditor onEdit={edit} />
+            </div>
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={1}>
+            <GraphiqlHeader></GraphiqlHeader>
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={2}>
+            <CodeMirror
+              width="100%"
+              theme={vscodeDark}
+              value={variables}
+              onChange={(value) => dispatch(setVariables(value))}
+            />
+          </CustomTabPanel>
+          <CustomTabPanel index={3} value={value}>
+            <Documentation></Documentation>
+          </CustomTabPanel>
+          <Button onClick={() => sendQuery()}>Send</Button>
+        </section>
+      </div>
+    </GraphiQLProvider>
+  );
+};
+
+export default GraphiQLClient;

From b327fb764d021a477b72af8b4265fc95b9a4626c Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Wed, 4 Sep 2024 17:30:45 +0200
Subject: [PATCH 038/157] feat: add opportunity to receive responses from
 queries and mutations

---
 components/GraphiQLClient/index.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 0638e10..cf66af4 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -34,11 +34,14 @@ const GraphiQLClient = () => {
   };
 
   const executeQuery = async () => {
-    console.log(query, 'query');
+    const lines = query.split('\n');
+    const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
+    const filteredQuery = filteredLines.join('\n');
     try {
-      // todo: replace a with a value from query
-      const operationName = null;
-      const reqQuery = query.slice(5);
+      const [queryType] = filteredQuery.match(/(query|mutation|subscription)/) || [''];
+
+      const [operationName] = filteredQuery.match(/(?<=query|mutation|subscription)\s*([^\s{]+)\s*\{/) || [];
+      const [reqQuery] = filteredQuery.match(/{[\s\S]*$/) || [''];
       const res = await fetch(url, {
         method: 'POST',
         headers: {
@@ -46,7 +49,7 @@ const GraphiQLClient = () => {
         },
         body: JSON.stringify({
           operationName,
-          query: reqQuery,
+          query: !operationName && queryType === 'query' ? reqQuery : filteredQuery,
           variables: variables ? JSON.parse(variables) : {},
         }),
       });

From c96b9c49dc81ff46ff2caf66985dd7721a279947 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 6 Sep 2024 09:52:42 +0200
Subject: [PATCH 039/157] feat: add support variables and headers in query

---
 .eslintrc.cjs                                 |  9 +++
 components/GraphiQLClient/HeadersSection.tsx  | 19 ++++++
 .../GraphiQLClient/VariablesSection.tsx       | 20 +++++++
 components/GraphiQLClient/index.tsx           | 60 ++++++++++---------
 .../features/graphiqlClient/graphiqlSlice.ts  | 10 +++-
 5 files changed, 87 insertions(+), 31 deletions(-)
 create mode 100644 components/GraphiQLClient/HeadersSection.tsx
 create mode 100644 components/GraphiQLClient/VariablesSection.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 5e357a6..4c321b5 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -41,5 +41,14 @@ module.exports = {
         endOfLine: 'auto',
       },
     ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        ignoreRestSiblings: true,
+        varsIgnorePattern: '_',
+      },
+    ],
   },
 };
diff --git a/components/GraphiQLClient/HeadersSection.tsx b/components/GraphiQLClient/HeadersSection.tsx
new file mode 100644
index 0000000..493764e
--- /dev/null
+++ b/components/GraphiQLClient/HeadersSection.tsx
@@ -0,0 +1,19 @@
+import { useEditorState, useVariableEditor, HeaderEditor } from '@graphiql/react';
+import { useAppDispatch } from '@/redux/hooks';
+import { setHeaders } from '@/redux/features/graphiqlClient/graphiqlSlice';
+
+function HeadersSection() {
+  const dispatch = useAppDispatch();
+  const editor = useVariableEditor();
+
+  const state = useEditorState('header');
+
+  if (editor && state) {
+    console.log(state, 'state');
+    dispatch(setHeaders(state[0]));
+  }
+
+  return <HeaderEditor></HeaderEditor>;
+}
+
+export default HeadersSection;
diff --git a/components/GraphiQLClient/VariablesSection.tsx b/components/GraphiQLClient/VariablesSection.tsx
new file mode 100644
index 0000000..0d4a953
--- /dev/null
+++ b/components/GraphiQLClient/VariablesSection.tsx
@@ -0,0 +1,20 @@
+import { useVariableEditor, VariableEditor, useVariablesEditorState } from '@graphiql/react';
+import { useAppDispatch } from '@/redux/hooks';
+import { setVariables } from '@/redux/features/graphiqlClient/graphiqlSlice';
+
+function VariablesSection() {
+  const dispatch = useAppDispatch();
+  const editor = useVariableEditor();
+  const state = useVariablesEditorState();
+
+  // todo: use fetchError for documentation
+  // const schemaContext = useSchemaContext();
+
+  if (editor && state) {
+    dispatch(setVariables(state[0]));
+  }
+
+  return <VariableEditor></VariableEditor>;
+}
+
+export default VariablesSection;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index cf66af4..f5f6554 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -4,26 +4,19 @@ import React, { useMemo } from 'react';
 import { Button, Tab, Tabs, TextField } from '@mui/material';
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
-import CodeMirror from '@uiw/react-codemirror';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import {
-  selectAll,
-  setQuery,
-  setResponse,
-  setSdlUrl,
-  setUrl,
-  setVariables,
-} from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setQuery, setResponse, setSdlUrl, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { useRouter } from 'next/navigation';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import GraphiqlHeader from '@/components/GraphiQLClient/GraphiqlHeader';
 import Documentation from '@/components/GraphiQLClient/Documentation';
 import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
+import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
+import HeadersSection from '@/components/GraphiQLClient/HeadersSection';
 
 const GraphiQLClient = () => {
-  const { query, variables, url, sdlUrl } = useAppSelector(selectAll);
+  const { query, variables, url, sdlUrl, headers } = useAppSelector(selectAll);
   const fetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
   const [value, setValue] = React.useState(0);
   const router = useRouter();
@@ -37,19 +30,27 @@ const GraphiQLClient = () => {
     const lines = query.split('\n');
     const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
     const filteredQuery = filteredLines.join('\n');
+
+    const reqHeaders = headers
+      ? JSON.parse(headers)
+      : {
+          'Content-Type': 'application/json',
+        };
+
     try {
       const [queryType] = filteredQuery.match(/(query|mutation|subscription)/) || [''];
-
-      const [operationName] = filteredQuery.match(/(?<=query|mutation|subscription)\s*([^\s{]+)\s*\{/) || [];
+      const [_, operationName] = filteredQuery.match(/(?<=query|mutation|subscription)\s*([^\s{]+)\s*\{/) || [];
       const [reqQuery] = filteredQuery.match(/{[\s\S]*$/) || [''];
+      const isVariablesProvidedInTheQuery = !!filteredQuery.match(
+        /^\s*(mutation|query)\s*[a-zA-Z0-9_]*\s*\([^)]+\)\s*\{/,
+      );
+
       const res = await fetch(url, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: reqHeaders,
         body: JSON.stringify({
           operationName,
-          query: !operationName && queryType === 'query' ? reqQuery : filteredQuery,
+          query: !operationName && queryType === 'query' && !isVariablesProvidedInTheQuery ? reqQuery : filteredQuery,
           variables: variables ? JSON.parse(variables) : {},
         }),
       });
@@ -61,10 +62,6 @@ const GraphiQLClient = () => {
     }
   };
 
-  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(setUrl(e.target.value));
-  };
-
   const sendQuery = () => {
     executeQuery().then((data) => {
       const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
@@ -72,6 +69,10 @@ const GraphiQLClient = () => {
     });
   };
 
+  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setUrl(e.target.value));
+  };
+
   function a11yProps(index: number) {
     return {
       id: `qraphql-tab-${index}`,
@@ -111,18 +112,19 @@ const GraphiQLClient = () => {
               <PrettifyButton />
               <QueryEditor onEdit={edit} />
             </div>
+            <div className="my-4 h-64 py-4">
+              variables
+              <VariablesSection />
+            </div>
+            <div className="h-64">
+              headers
+              <HeadersSection />
+            </div>
           </CustomTabPanel>
           <CustomTabPanel value={value} index={1}>
             <GraphiqlHeader></GraphiqlHeader>
           </CustomTabPanel>
-          <CustomTabPanel value={value} index={2}>
-            <CodeMirror
-              width="100%"
-              theme={vscodeDark}
-              value={variables}
-              onChange={(value) => dispatch(setVariables(value))}
-            />
-          </CustomTabPanel>
+          <CustomTabPanel value={value} index={2}></CustomTabPanel>
           <CustomTabPanel index={3} value={value}>
             <Documentation></Documentation>
           </CustomTabPanel>
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
index 8533023..588b27c 100644
--- a/redux/features/graphiqlClient/graphiqlSlice.ts
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 export interface GraphiqlSliceState {
   query: string;
   variables: string;
+  headers: string;
   url: string;
   sdlUrl: string;
   response: string;
@@ -11,6 +12,7 @@ export interface GraphiqlSliceState {
 const initialState: GraphiqlSliceState = {
   query: '',
   variables: '',
+  headers: '',
   url: '',
   sdlUrl: '',
   response: '',
@@ -26,6 +28,9 @@ export const graphiqlSlice = createSlice({
     setVariables: create.reducer((state, action: PayloadAction<string>) => {
       state.variables = action.payload;
     }),
+    setHeaders: create.reducer((state, action: PayloadAction<string>) => {
+      state.headers = action.payload;
+    }),
     setUrl: create.reducer((state, action: PayloadAction<string>) => {
       state.url = action.payload;
     }),
@@ -40,6 +45,7 @@ export const graphiqlSlice = createSlice({
   selectors: {
     selectAll: (graphiql) => graphiql,
     selectQuery: (graphiql) => graphiql.query,
+    selectHeaders: (graphiql) => graphiql.headers,
     selectVariables: (graphiql) => graphiql.variables,
     selectUrl: (graphiql) => graphiql.url,
     selectSdlUrl: (graphiql) => graphiql.sdlUrl,
@@ -47,7 +53,7 @@ export const graphiqlSlice = createSlice({
   },
 });
 
-export const { setQuery, setVariables, setUrl, setSdlUrl, setResponse } = graphiqlSlice.actions;
+export const { setQuery, setVariables, setHeaders, setUrl, setSdlUrl, setResponse } = graphiqlSlice.actions;
 
-export const { selectAll, selectQuery, selectVariables, selectUrl, selectSdlUrl, selectResponse } =
+export const { selectAll, selectQuery, selectHeaders, selectVariables, selectUrl, selectSdlUrl, selectResponse } =
   graphiqlSlice.selectors;

From ccbd3856dabd702f92d6b206244c798ddb01c7ea Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 6 Sep 2024 13:30:01 +0200
Subject: [PATCH 040/157] feat: add opportunity to set headers

---
 components/GraphiQLClient/GraphiqlHeader.tsx  | 57 ++++++++++++++++---
 components/GraphiQLClient/HeadersSection.tsx  | 19 -------
 .../GraphiQLClient/VariablesSection.tsx       |  2 +-
 components/GraphiQLClient/index.tsx           | 34 +++++------
 .../features/graphiqlClient/graphiqlSlice.ts  | 14 +++--
 5 files changed, 77 insertions(+), 49 deletions(-)
 delete mode 100644 components/GraphiQLClient/HeadersSection.tsx

diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index 4b8607a..d7e5fcc 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -1,16 +1,59 @@
-import { IconButton, TextField } from '@mui/material';
+import { Button, IconButton, TextField } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import { GQLHeader, selectHeaders, setHeaders } from '@/redux/features/graphiqlClient/graphiqlSlice';
 
 const GraphiqlHeader = () => {
+  const headers = useAppSelector(selectHeaders);
+  const { register, handleSubmit, formState, reset, control } = useForm({
+    defaultValues: {
+      headers,
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'headers',
+  });
+  const dispatch = useAppDispatch();
+
+  const onFormSubmit = (headers: { headers: GQLHeader[] }) => {
+    dispatch(setHeaders(headers.headers));
+    reset({});
+  };
+
+  const removeField = (index: number | number[] | undefined) => {
+    remove(index);
+  };
+
+  const addNewField = () => {
+    append({ key: '', value: '' });
+  };
+
   return (
     <div className="flex flex-col">
-      <div className="flex">
-        <TextField label="Header Key" variant="outlined" />
-        <TextField label="Header Value" variant="outlined" />
-        <IconButton aria-label="delete">
-          <DeleteIcon />
+      {JSON.stringify(headers)}
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        {fields.map((field, index) => (
+          <div key={field.id}>
+            <TextField label="Header Key" variant="outlined" {...register(`headers.${index}.key`)} />
+            <TextField label="Header Value" variant="outlined" {...register(`headers.${index}.value`)} />
+            {fields.length > 1 ? (
+              <IconButton aria-label="delete" onClick={() => removeField(index)}>
+                <DeleteIcon />
+              </IconButton>
+            ) : null}
+          </div>
+        ))}
+        <IconButton aria-label="add" onClick={addNewField}>
+          <AddIcon />
         </IconButton>
-      </div>
+        <Button type="submit" disabled={Object.keys(formState.dirtyFields).length === 0}>
+          Set Headers
+        </Button>
+      </form>
     </div>
   );
 };
diff --git a/components/GraphiQLClient/HeadersSection.tsx b/components/GraphiQLClient/HeadersSection.tsx
deleted file mode 100644
index 493764e..0000000
--- a/components/GraphiQLClient/HeadersSection.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useEditorState, useVariableEditor, HeaderEditor } from '@graphiql/react';
-import { useAppDispatch } from '@/redux/hooks';
-import { setHeaders } from '@/redux/features/graphiqlClient/graphiqlSlice';
-
-function HeadersSection() {
-  const dispatch = useAppDispatch();
-  const editor = useVariableEditor();
-
-  const state = useEditorState('header');
-
-  if (editor && state) {
-    console.log(state, 'state');
-    dispatch(setHeaders(state[0]));
-  }
-
-  return <HeaderEditor></HeaderEditor>;
-}
-
-export default HeadersSection;
diff --git a/components/GraphiQLClient/VariablesSection.tsx b/components/GraphiQLClient/VariablesSection.tsx
index 0d4a953..19cf8b8 100644
--- a/components/GraphiQLClient/VariablesSection.tsx
+++ b/components/GraphiQLClient/VariablesSection.tsx
@@ -11,9 +11,9 @@ function VariablesSection() {
   // const schemaContext = useSchemaContext();
 
   if (editor && state) {
+    console.log(editor);
     dispatch(setVariables(state[0]));
   }
-
   return <VariableEditor></VariableEditor>;
 }
 
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index f5f6554..2983e9f 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo } from 'react';
-import { Button, Tab, Tabs, TextField } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs, TextField } from '@mui/material';
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
@@ -13,7 +13,7 @@ import GraphiqlHeader from '@/components/GraphiQLClient/GraphiqlHeader';
 import Documentation from '@/components/GraphiQLClient/Documentation';
 import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
 import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
-import HeadersSection from '@/components/GraphiQLClient/HeadersSection';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const GraphiQLClient = () => {
   const { query, variables, url, sdlUrl, headers } = useAppSelector(selectAll);
@@ -30,9 +30,11 @@ const GraphiQLClient = () => {
     const lines = query.split('\n');
     const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
     const filteredQuery = filteredLines.join('\n');
+    const requestHeaders = Object.fromEntries(headers.map((header) => [header.key, header.value]).reverse());
+    console.log(requestHeaders);
 
     const reqHeaders = headers
-      ? JSON.parse(headers)
+      ? requestHeaders
       : {
           'Content-Type': 'application/json',
         };
@@ -103,32 +105,30 @@ const GraphiQLClient = () => {
             <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
               <Tab label="Query" {...a11yProps(0)} />
               <Tab label="Headers" {...a11yProps(1)} />
-              <Tab label="Variables" {...a11yProps(2)} />
-              <Tab label="Documentation" {...a11yProps(3)} />
+              <Tab label="Documentation" {...a11yProps(2)} />
             </Tabs>
           </Box>
           <CustomTabPanel value={value} index={0}>
-            <div className="h-64">
+            <div className="h-96">
               <PrettifyButton />
               <QueryEditor onEdit={edit} />
             </div>
-            <div className="my-4 h-64 py-4">
-              variables
-              <VariablesSection />
-            </div>
-            <div className="h-64">
-              headers
-              <HeadersSection />
-            </div>
+            <Accordion className="bg-gray-100 text-orange-600">
+              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1-header">
+                VARIABLES
+              </AccordionSummary>
+              <AccordionDetails className="h-64">
+                <VariablesSection />
+              </AccordionDetails>
+            </Accordion>
+            <Button onClick={() => sendQuery()}>Send</Button>
           </CustomTabPanel>
           <CustomTabPanel value={value} index={1}>
             <GraphiqlHeader></GraphiqlHeader>
           </CustomTabPanel>
-          <CustomTabPanel value={value} index={2}></CustomTabPanel>
-          <CustomTabPanel index={3} value={value}>
+          <CustomTabPanel index={2} value={value}>
             <Documentation></Documentation>
           </CustomTabPanel>
-          <Button onClick={() => sendQuery()}>Send</Button>
         </section>
       </div>
     </GraphiQLProvider>
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
index 588b27c..009d840 100644
--- a/redux/features/graphiqlClient/graphiqlSlice.ts
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -3,16 +3,21 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 export interface GraphiqlSliceState {
   query: string;
   variables: string;
-  headers: string;
+  headers: GQLHeader[];
   url: string;
   sdlUrl: string;
   response: string;
 }
 
+export interface GQLHeader {
+  key: string;
+  value: string;
+}
+
 const initialState: GraphiqlSliceState = {
   query: '',
   variables: '',
-  headers: '',
+  headers: [{ key: 'Content-Type', value: 'application/json' }],
   url: '',
   sdlUrl: '',
   response: '',
@@ -28,7 +33,7 @@ export const graphiqlSlice = createSlice({
     setVariables: create.reducer((state, action: PayloadAction<string>) => {
       state.variables = action.payload;
     }),
-    setHeaders: create.reducer((state, action: PayloadAction<string>) => {
+    setHeaders: create.reducer((state, action: PayloadAction<GQLHeader[]>) => {
       state.headers = action.payload;
     }),
     setUrl: create.reducer((state, action: PayloadAction<string>) => {
@@ -55,5 +60,4 @@ export const graphiqlSlice = createSlice({
 
 export const { setQuery, setVariables, setHeaders, setUrl, setSdlUrl, setResponse } = graphiqlSlice.actions;
 
-export const { selectAll, selectQuery, selectHeaders, selectVariables, selectUrl, selectSdlUrl, selectResponse } =
-  graphiqlSlice.selectors;
+export const { selectAll, selectHeaders, selectUrl, selectSdlUrl } = graphiqlSlice.selectors;

From 04f79c4cfdcda669936ef1e2a955cdff72e76ea7 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 7 Sep 2024 10:27:52 +0200
Subject: [PATCH 041/157] refactor: change graphql route

---
 app/{graphql => GRAPHQL}/[[...endpoint]]/page.tsx | 0
 components/GraphiQLClient/VariablesSection.tsx    | 1 -
 components/GraphiQLClient/index.tsx               | 3 ++-
 constants/routes.ts                               | 2 +-
 package.json                                      | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename app/{graphql => GRAPHQL}/[[...endpoint]]/page.tsx (100%)

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/GRAPHQL/[[...endpoint]]/page.tsx
similarity index 100%
rename from app/graphql/[[...endpoint]]/page.tsx
rename to app/GRAPHQL/[[...endpoint]]/page.tsx
diff --git a/components/GraphiQLClient/VariablesSection.tsx b/components/GraphiQLClient/VariablesSection.tsx
index 19cf8b8..95c9eaf 100644
--- a/components/GraphiQLClient/VariablesSection.tsx
+++ b/components/GraphiQLClient/VariablesSection.tsx
@@ -11,7 +11,6 @@ function VariablesSection() {
   // const schemaContext = useSchemaContext();
 
   if (editor && state) {
-    console.log(editor);
     dispatch(setVariables(state[0]));
   }
   return <VariableEditor></VariableEditor>;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 2983e9f..5bfb4e3 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -14,6 +14,7 @@ import Documentation from '@/components/GraphiQLClient/Documentation';
 import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
 import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { routes } from '@/constants/routes';
 
 const GraphiQLClient = () => {
   const { query, variables, url, sdlUrl, headers } = useAppSelector(selectAll);
@@ -67,7 +68,7 @@ const GraphiQLClient = () => {
   const sendQuery = () => {
     executeQuery().then((data) => {
       const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
-      router.push(`/graphql/${a}`);
+      router.push(`${routes.graphql}/${a}`);
     });
   };
 
diff --git a/constants/routes.ts b/constants/routes.ts
index a74c405..9baac82 100644
--- a/constants/routes.ts
+++ b/constants/routes.ts
@@ -2,7 +2,7 @@ export const routes = {
   home: '/',
   login: '/login',
   signup: '/signup',
-  graphql: '/graphql',
+  graphql: '/GRAPHQL',
   restfull: '/rest',
   histor: '/history',
 };
diff --git a/package.json b/package.json
index a457956..9cb1102 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 4200",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "preview": "next build && next start",

From 13d71bd7e1b4619cdfebf0eed5723b81095288a0 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sat, 7 Sep 2024 13:54:56 +0400
Subject: [PATCH 042/157] refactor: route name changes

---
 app/{graphql => graphqlroute}/[[...endpoint]]/page.tsx | 0
 constants/routes.ts                                    | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/{graphql => graphqlroute}/[[...endpoint]]/page.tsx (100%)

diff --git a/app/graphql/[[...endpoint]]/page.tsx b/app/graphqlroute/[[...endpoint]]/page.tsx
similarity index 100%
rename from app/graphql/[[...endpoint]]/page.tsx
rename to app/graphqlroute/[[...endpoint]]/page.tsx
diff --git a/constants/routes.ts b/constants/routes.ts
index a74c405..127ed9e 100644
--- a/constants/routes.ts
+++ b/constants/routes.ts
@@ -4,5 +4,5 @@ export const routes = {
   signup: '/signup',
   graphql: '/graphql',
   restfull: '/rest',
-  histor: '/history',
+  history: '/history',
 };

From 3859c5bd4c4d79f70f57a6fc2c56e2ad94964976 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sat, 7 Sep 2024 13:59:01 +0400
Subject: [PATCH 043/157] refactor: remove route

---
 app/graphqlroute/[[...endpoint]]/page.tsx | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 app/graphqlroute/[[...endpoint]]/page.tsx

diff --git a/app/graphqlroute/[[...endpoint]]/page.tsx b/app/graphqlroute/[[...endpoint]]/page.tsx
deleted file mode 100644
index 59d875f..0000000
--- a/app/graphqlroute/[[...endpoint]]/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-function GraphQL() {
-  return <div>Endpoint</div>;
-}
-export default GraphQL;

From c9d4b4b43a0f8e970460ebaa8a94da85f8ed217e Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 10:35:49 +0400
Subject: [PATCH 044/157] feat: adding show, filter and delete requests to
 History route

---
 app/history/page.tsx                      |   8 +-
 components/DataTable/DataTableBody.tsx    |  64 +++++++++
 components/DataTable/DataTableHead.tsx    |  81 +++++++++++
 components/DataTable/DataTableToolbar.tsx |  50 +++++++
 components/DataTable/index.tsx            | 159 ++++++++++++++++++++++
 5 files changed, 361 insertions(+), 1 deletion(-)
 create mode 100644 components/DataTable/DataTableBody.tsx
 create mode 100644 components/DataTable/DataTableHead.tsx
 create mode 100644 components/DataTable/DataTableToolbar.tsx
 create mode 100644 components/DataTable/index.tsx

diff --git a/app/history/page.tsx b/app/history/page.tsx
index 14f01fc..a03ae1e 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -1,3 +1,9 @@
+import DataTable from '@/components/DataTable';
+
 export default function Hisory() {
-  return <main>History</main>;
+  return (
+    <main className="h-[calc(100vh-8.5rem)]">
+      <DataTable />
+    </main>
+  );
 }
diff --git a/components/DataTable/DataTableBody.tsx b/components/DataTable/DataTableBody.tsx
new file mode 100644
index 0000000..ba179fe
--- /dev/null
+++ b/components/DataTable/DataTableBody.tsx
@@ -0,0 +1,64 @@
+import type { DataTableType } from '@/types';
+import { Checkbox, TableBody, TableCell, TableRow } from '@mui/material';
+
+interface DataTableBodyProps {
+  visibleRows: DataTableType[];
+  emptyRows: number;
+  selected: readonly string[];
+  dense: boolean;
+  handleRequest: (event: React.MouseEvent<unknown>, method: string) => void;
+  handleSelect: (event: React.MouseEvent<unknown>, id: string) => void;
+}
+
+function DataTableBody(props: DataTableBodyProps) {
+  const { visibleRows, emptyRows, selected, dense, handleRequest, handleSelect } = props;
+
+  const isSelected = (id: string) => selected.indexOf(id) !== -1;
+  return (
+    <TableBody>
+      {visibleRows.map((row, index) => {
+        const isItemSelected = isSelected(row.id);
+        const labelId = `enhanced-table-checkbox-${index}`;
+
+        return (
+          <TableRow
+            hover
+            role="checkbox"
+            aria-checked={isItemSelected}
+            tabIndex={-1}
+            key={row.id}
+            selected={isItemSelected}
+            sx={{ cursor: 'pointer' }}
+            onClick={(event) => handleRequest(event, row.id)}
+          >
+            <TableCell padding="checkbox">
+              <Checkbox
+                color="primary"
+                onClick={(event) => handleSelect(event, row.id)}
+                checked={isItemSelected}
+                inputProps={{
+                  'aria-labelledby': labelId,
+                }}
+              />
+            </TableCell>
+            <TableCell component="th" id={labelId} scope="row" padding="none">
+              {row.method}
+            </TableCell>
+            <TableCell>{row.url}</TableCell>
+            <TableCell>{row.date}</TableCell>
+          </TableRow>
+        );
+      })}
+      {emptyRows > 0 && (
+        <TableRow
+          style={{
+            height: (dense ? 33 : 53) * emptyRows,
+          }}
+        >
+          <TableCell colSpan={6} />
+        </TableRow>
+      )}
+    </TableBody>
+  );
+}
+export default DataTableBody;
diff --git a/components/DataTable/DataTableHead.tsx b/components/DataTable/DataTableHead.tsx
new file mode 100644
index 0000000..fbb20ce
--- /dev/null
+++ b/components/DataTable/DataTableHead.tsx
@@ -0,0 +1,81 @@
+import { Box, Checkbox, TableCell, TableHead, TableRow, TableSortLabel } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import type { DataTableType, HeadCell, Order } from '@/types';
+
+interface DataTableProps {
+  numSelected: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof DataTableType) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  order: Order;
+  orderBy: string;
+  requestCount: number;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'method',
+    numeric: false,
+    disablePadding: true,
+    label: 'Method',
+  },
+  {
+    id: 'url',
+    numeric: false,
+    disablePadding: false,
+    label: 'URL',
+  },
+  {
+    id: 'date',
+    numeric: false,
+    disablePadding: false,
+    label: 'Date',
+  },
+];
+
+function DataTableHead(props: DataTableProps) {
+  const { onSelectAllClick, order, orderBy, numSelected, requestCount, onRequestSort } = props;
+  const createSortHandler = (property: keyof DataTableType) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < requestCount}
+            checked={requestCount > 0 && numSelected === requestCount}
+            onChange={onSelectAllClick}
+            inputProps={{
+              'aria-label': 'select all requests',
+            }}
+          />
+        </TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.numeric ? 'right' : 'left'}
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export default DataTableHead;
diff --git a/components/DataTable/DataTableToolbar.tsx b/components/DataTable/DataTableToolbar.tsx
new file mode 100644
index 0000000..ba11689
--- /dev/null
+++ b/components/DataTable/DataTableToolbar.tsx
@@ -0,0 +1,50 @@
+import { alpha, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+interface DataTableToolbarProps {
+  numSelected: number;
+  handleDelete: () => void;
+}
+function DataTableToolbar(props: DataTableToolbarProps) {
+  const { numSelected, handleDelete } = props;
+
+  return (
+    <Toolbar
+      sx={[
+        {
+          pl: { sm: 2 },
+          pr: { xs: 1, sm: 1 },
+        },
+        numSelected > 0 && {
+          bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+        },
+      ]}
+    >
+      {numSelected > 0 ? (
+        <Typography sx={{ flex: '1 1 100%' }} color="inherit" variant="subtitle1" component="div">
+          {numSelected} selected
+        </Typography>
+      ) : (
+        <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
+          History
+        </Typography>
+      )}
+      {numSelected > 0 ? (
+        <Tooltip title="Delete">
+          <IconButton onClick={handleDelete}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <Tooltip title="Filter list">
+          <IconButton>
+            <FilterListIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Toolbar>
+  );
+}
+
+export default DataTableToolbar;
diff --git a/components/DataTable/index.tsx b/components/DataTable/index.tsx
new file mode 100644
index 0000000..a38325c
--- /dev/null
+++ b/components/DataTable/index.tsx
@@ -0,0 +1,159 @@
+'use client';
+import { useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  FormControlLabel,
+  Paper,
+  Switch,
+  Table,
+  TableContainer,
+  TablePagination,
+  Typography,
+} from '@mui/material';
+import DataTableToolbar from './DataTableToolbar';
+import DataTableHead from './DataTableHead';
+import { getComparator } from '@/utils/getComparator';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import DataTableBody from './DataTableBody';
+import { routes } from '@/constants/routes';
+import type { DataTableType, Order, RequestType } from '@/types';
+import { useRouter } from 'next/navigation';
+import { generateUrl } from '@/utils/generateUrl';
+import { setAllState } from '@/redux/features/restfullClient/restfullSlice';
+import { useAppDispatch } from '@/redux/hooks';
+import { resetResponse } from '@/redux/features/mainSlice';
+
+export default function DataTable() {
+  const { storedValue: requests, setLocalStorageValue } = useLocalStorage<RequestType[]>('requests', []);
+  const dispatch = useAppDispatch();
+  const [order, setOrder] = useState<Order>('desc');
+  const [orderBy, setOrderBy] = useState<keyof DataTableType>('date');
+  const [selected, setSelected] = useState<readonly string[]>([]);
+  const [page, setPage] = useState(0);
+  const [dense, setDense] = useState(false);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const router = useRouter();
+
+  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof DataTableType) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelected = requests.map((n) => n.id);
+      setSelected(newSelected);
+      return;
+    }
+    setSelected([]);
+  };
+
+  const handleRequest = (event: React.MouseEvent<unknown>, id: string) => {
+    const request = requests.find((n) => n.id === id)!;
+    const generate = generateUrl(request);
+    dispatch(setAllState(request));
+    dispatch(resetResponse());
+    router.push(generate);
+  };
+
+  const handleSelect = (event: React.MouseEvent<unknown>, id: string) => {
+    event.stopPropagation();
+    const selectedIndex = selected.indexOf(id);
+    let newSelected: readonly string[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+    setSelected(newSelected);
+  };
+
+  const handleDelete = () => {
+    const newRequests = requests.filter((request) => !selected.includes(request.id));
+    setLocalStorageValue(newRequests);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDense(event.target.checked);
+  };
+
+  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - requests.length) : 0;
+
+  const visibleRows = useMemo(
+    () => [...requests].sort(getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [order, requests, orderBy, page, rowsPerPage],
+  );
+
+  if (!requests.length) {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
+          You haven&apos;t executed any requests
+        </Typography>
+        <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
+          It&apos;s empty here. Try:
+          <Button href={routes.restfull} color="inherit" variant="outlined">
+            REST Client
+          </Button>
+          <Button href={routes.graphql} color="inherit" variant="outlined">
+            GraphiQL Client
+          </Button>
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <DataTableToolbar handleDelete={handleDelete} numSelected={selected.length} />
+        <TableContainer>
+          <Table sx={{ minWidth: 750 }} aria-labelledby="tableTitle" size={dense ? 'small' : 'medium'}>
+            <DataTableHead
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              requestCount={requests.length}
+            />
+            <DataTableBody
+              visibleRows={visibleRows}
+              emptyRows={emptyRows}
+              dense={dense}
+              selected={selected}
+              handleRequest={handleRequest}
+              handleSelect={handleSelect}
+            />
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={requests.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+      <FormControlLabel control={<Switch checked={dense} onChange={handleChangeDense} />} label="Dense padding" />
+    </Box>
+  );
+}

From ee065102c8710f3cb9c20d386db575968bd58a1c Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 10:52:09 +0400
Subject: [PATCH 045/157] feat: add getComparator for sorting Datatable

---
 utils/getComparator.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 utils/getComparator.ts

diff --git a/utils/getComparator.ts b/utils/getComparator.ts
new file mode 100644
index 0000000..1171231
--- /dev/null
+++ b/utils/getComparator.ts
@@ -0,0 +1,20 @@
+import type { DataTableType, Order } from '@/types';
+
+const descendingComparator = <T>(a: T, b: T, orderBy: keyof T): number => {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+};
+
+export function getComparator<Key extends keyof DataTableType>(
+  order: Order,
+  orderBy: Key,
+): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}

From 6361a58656fa252ef32fa66952ed3f09ebcb9048 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 10:52:54 +0400
Subject: [PATCH 046/157] feat: add MainSlice response state

---
 redux/features/mainSlice.ts | 38 +++++++++++++++++++++++++++++++++++++
 redux/store.ts              |  3 ++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 redux/features/mainSlice.ts

diff --git a/redux/features/mainSlice.ts b/redux/features/mainSlice.ts
new file mode 100644
index 0000000..979e1bc
--- /dev/null
+++ b/redux/features/mainSlice.ts
@@ -0,0 +1,38 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import type { ResponseType } from '@/types';
+
+export interface MainSliceState {
+  response: ResponseType;
+}
+
+const initialState: MainSliceState = {
+  response: {
+    data: '',
+    status: 0,
+    statusText: '',
+    parsedHeaders: {},
+    success: false,
+    responseTime: 0,
+  },
+};
+
+export const mainSlice = createSlice({
+  name: 'main',
+  initialState,
+  reducers: (create) => ({
+    setResponse: create.reducer((state, action: PayloadAction<ResponseType>) => {
+      state.response = action.payload;
+    }),
+    resetResponse: create.reducer((state) => {
+      state.response = initialState.response;
+    }),
+  }),
+
+  selectors: {
+    selectResponse: (main) => main.response,
+  },
+});
+
+export const { setResponse, resetResponse } = mainSlice.actions;
+
+export const { selectResponse } = mainSlice.selectors;
diff --git a/redux/store.ts b/redux/store.ts
index 80a3016..11ec157 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,8 +1,9 @@
 import type { Action, ThunkAction } from '@reduxjs/toolkit';
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
 import { restfullSlice } from './features/restfullClient/restfullSlice';
+import { mainSlice } from './features/mainSlice';
 
-const rootReducer = combineSlices(restfullSlice);
+const rootReducer = combineSlices(mainSlice, restfullSlice);
 
 export type RootState = ReturnType<typeof rootReducer>;
 

From 5b99daeb26508e571e4b553d3c07cdcb6c4435eb Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:19:28 +0400
Subject: [PATCH 047/157] chore: added Monco-editor, pretty-bytes,
 react-resizable-panels and postcss-pxtorem

---
 package-lock.json  | 83 +++++++++++++++++++++++++++++++++++++++++++---
 package.json       |  6 +++-
 postcss.config.mjs |  4 +++
 3 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3f1fa97..a0ab047 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@hookform/resolvers": "^3.9.0",
+        "@monaco-editor/react": "^4.6.0",
         "@mui/icons-material": "^5.16.7",
         "@mui/material": "^5.16.7",
         "@mui/material-nextjs": "^5.16.6",
@@ -24,11 +25,13 @@
         "@uiw/react-codemirror": "^4.23.0",
         "firebase": "^10.13.0",
         "next": "14.2.5",
+        "pretty-bytes": "^6.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-firebase-hooks": "^5.1.1",
         "react-hook-form": "^7.52.2",
         "react-redux": "^9.1.2",
+        "react-resizable-panels": "^0.0.63",
         "sonner": "^1.5.0",
         "yup": "^1.4.0"
       },
@@ -55,7 +58,8 @@
         "jsdom": "^24.1.1",
         "lint-staged": "^15.2.9",
         "msw": "^2.3.5",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.45",
+        "postcss-pxtorem": "^6.1.0",
         "prettier": "3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.6",
         "tailwindcss": "^3.4.10",
@@ -2123,6 +2127,32 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.29.1",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
@@ -8173,6 +8203,13 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.51.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.51.0.tgz",
+      "integrity": "sha512-xaGwVV1fq343cM7aOYB6lVE4Ugf0UyimdD/x5PWcWBMKENwectaEu77FAN7c5sFiyumqeJdX1RPTh1ocioyDjw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@@ -8851,9 +8888,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "dev": true,
       "funding": [
         {
@@ -8992,6 +9029,16 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -9150,6 +9197,18 @@
         }
       }
     },
+    "node_modules/pretty-bytes": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
+      "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -9359,6 +9418,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "0.0.63",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-0.0.63.tgz",
+      "integrity": "sha512-AfA8b6kouhL4rBvgUGs17uzWVlYPaJIwwTCVeWRxNpUHJlCG1h9RIMlzA1849AZGsaNJO3j/SNdI5SS4GZDE3g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -9983,6 +10052,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
diff --git a/package.json b/package.json
index 839528a..39cf30e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",
@@ -31,11 +32,13 @@
     "@uiw/react-codemirror": "^4.23.0",
     "firebase": "^10.13.0",
     "next": "14.2.5",
+    "pretty-bytes": "^6.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.52.2",
     "react-redux": "^9.1.2",
+    "react-resizable-panels": "^0.0.63",
     "sonner": "^1.5.0",
     "yup": "^1.4.0"
   },
@@ -62,7 +65,8 @@
     "jsdom": "^24.1.1",
     "lint-staged": "^15.2.9",
     "msw": "^2.3.5",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.45",
+    "postcss-pxtorem": "^6.1.0",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.10",
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2..e00d5c9 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,6 +1,10 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
+    'postcss-pxtorem': {
+      rootValue: 16,
+      propList: ['*'],
+    },
     tailwindcss: {},
   },
 };

From 452c686f08940a498326414f03bfeac429df5907 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:20:15 +0400
Subject: [PATCH 048/157] feat: create Resizable components

---
 components/Resizable/ResizableGroup.tsx  |  8 ++++++++
 components/Resizable/ResizableHandle.tsx | 24 ++++++++++++++++++++++++
 components/Resizable/ResizablePanel.tsx  |  9 +++++++++
 components/Resizable/index.tsx           |  3 +++
 4 files changed, 44 insertions(+)
 create mode 100644 components/Resizable/ResizableGroup.tsx
 create mode 100644 components/Resizable/ResizableHandle.tsx
 create mode 100644 components/Resizable/ResizablePanel.tsx
 create mode 100644 components/Resizable/index.tsx

diff --git a/components/Resizable/ResizableGroup.tsx b/components/Resizable/ResizableGroup.tsx
new file mode 100644
index 0000000..dc23f01
--- /dev/null
+++ b/components/Resizable/ResizableGroup.tsx
@@ -0,0 +1,8 @@
+'use client';
+import { ComponentProps } from 'react';
+import { PanelGroup } from 'react-resizable-panels';
+
+function ResizableGroup({ children, ...props }: ComponentProps<typeof PanelGroup>) {
+  return <PanelGroup {...props}>{children}</PanelGroup>;
+}
+export default ResizableGroup;
diff --git a/components/Resizable/ResizableHandle.tsx b/components/Resizable/ResizableHandle.tsx
new file mode 100644
index 0000000..2f47819
--- /dev/null
+++ b/components/Resizable/ResizableHandle.tsx
@@ -0,0 +1,24 @@
+'use client';
+import { ComponentProps } from 'react';
+import { PanelResizeHandle } from 'react-resizable-panels';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+interface ResizableHandleProps extends ComponentProps<typeof PanelResizeHandle> {
+  direction?: 'vertical' | 'horizontal';
+}
+
+function ResizableHandle({ direction = 'vertical', ...props }: ResizableHandleProps) {
+  return (
+    <PanelResizeHandle
+      className={`flex items-center justify-center bg-gray-200 ${direction === 'horizontal' ? 'w-[1px]' : 'h-[1px]'}`}
+      {...props}
+    >
+      <MoreHorizIcon
+        className={`rounded-sm bg-inherit ${direction === 'horizontal' && 'rotate-90'}`}
+        fontSize="small"
+      />
+    </PanelResizeHandle>
+  );
+}
+
+export default ResizableHandle;
diff --git a/components/Resizable/ResizablePanel.tsx b/components/Resizable/ResizablePanel.tsx
new file mode 100644
index 0000000..b59bfdc
--- /dev/null
+++ b/components/Resizable/ResizablePanel.tsx
@@ -0,0 +1,9 @@
+'use client';
+import { ComponentProps } from 'react';
+import { Panel } from 'react-resizable-panels';
+
+function ResizablePanel({ children, ...props }: ComponentProps<typeof Panel>) {
+  return <Panel {...props}>{children}</Panel>;
+}
+
+export default ResizablePanel;
diff --git a/components/Resizable/index.tsx b/components/Resizable/index.tsx
new file mode 100644
index 0000000..4e0eaae
--- /dev/null
+++ b/components/Resizable/index.tsx
@@ -0,0 +1,3 @@
+export { default as ResizableGroup } from './ResizableGroup';
+export { default as ResizablePanel } from './ResizablePanel';
+export { default as ResizableHandle } from './ResizableHandle';

From 7fcd3fd78bb5af7be0c5ad07350ffb279d30e447 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:21:32 +0400
Subject: [PATCH 049/157] feat: add types

---
 types/index.ts      | 46 +++++++++++++++++++++++++++++++++++++++++++++
 types/personType.ts |  0
 2 files changed, 46 insertions(+)
 create mode 100644 types/index.ts
 delete mode 100644 types/personType.ts

diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..b4e65a0
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,46 @@
+export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
+
+export interface RequestType {
+  id: string;
+  method: Method;
+  url: string;
+  params: Param[];
+  headers: Param[];
+  body: string;
+  variables: Param[];
+  date: string;
+  sdl?: string;
+}
+
+export interface ResponseType {
+  data: string;
+  status: number;
+  statusText: string;
+  parsedHeaders: {
+    [k: string]: string;
+  };
+  success: boolean;
+  responseTime: number;
+}
+
+export interface Param {
+  isChecked: boolean;
+  key: string;
+  value: string;
+}
+
+export interface DataTableType {
+  id: string;
+  method: string;
+  url: string;
+  date: string;
+}
+
+export interface HeadCell {
+  disablePadding: boolean;
+  id: keyof DataTableType;
+  label: string;
+  numeric: boolean;
+}
+
+export type Order = 'asc' | 'desc';
diff --git a/types/personType.ts b/types/personType.ts
deleted file mode 100644
index e69de29..0000000

From 7a6807c54c676101d266d9351402711c2c966a23 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:22:04 +0400
Subject: [PATCH 050/157] feat: create calcSize util fn for response size

---
 utils/calcSize.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 utils/calcSize.ts

diff --git a/utils/calcSize.ts b/utils/calcSize.ts
new file mode 100644
index 0000000..b8cd375
--- /dev/null
+++ b/utils/calcSize.ts
@@ -0,0 +1,6 @@
+import prettyBytes from 'pretty-bytes';
+
+export const calcSize = (...values: string[]) => {
+  const bytes = values.reduce((acc, cur) => acc + cur.length, 0);
+  return prettyBytes(bytes);
+};

From 370baacda7be441cab371a12bf7828e7700981bf Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:22:58 +0400
Subject: [PATCH 051/157] refactor: restfulSlice added another fields

---
 .../features/restfullClient/restfullSlice.ts  | 39 +++++++++++++------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/redux/features/restfullClient/restfullSlice.ts b/redux/features/restfullClient/restfullSlice.ts
index a54f397..7e33ce9 100644
--- a/redux/features/restfullClient/restfullSlice.ts
+++ b/redux/features/restfullClient/restfullSlice.ts
@@ -1,36 +1,52 @@
-import { Method, QueryParam } from '@/constants/restClientData';
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import type { Method, Param, RequestType } from '@/types';
 
 export interface RestfullSliceState {
+  id: string;
   method: Method;
   url: string;
-  queryParams: QueryParam[];
-  headers: QueryParam[];
-  status: 'idle' | 'loading' | 'failed';
+  params: Param[];
+  headers: Param[];
+  body: string;
+  variables: Param[];
+  date: string;
 }
 
 const initialState: RestfullSliceState = {
+  id: '',
   method: 'GET',
   url: '',
-  queryParams: [{ isChecked: true, key: '', value: '' }],
+  params: [{ isChecked: false, key: '', value: '' }],
   headers: [{ isChecked: true, key: 'Content-Type', value: 'text/html; charset=utf-8' }],
-  status: 'idle',
+  body: '',
+  variables: [{ isChecked: false, key: '', value: '' }],
+  date: '',
 };
 
 export const restfullSlice = createSlice({
   name: 'restfull',
   initialState,
   reducers: (create) => ({
+    setAllState: create.reducer((state, action: PayloadAction<RequestType>) => {
+      state.id = action.payload.id;
+      state.method = action.payload.method;
+      state.url = action.payload.url;
+      state.params = action.payload.params;
+      state.headers = action.payload.headers;
+      state.body = action.payload.body;
+      state.variables = action.payload.variables;
+      state.date = action.payload.date;
+    }),
     setMethod: create.reducer((state, action: PayloadAction<Method>) => {
       state.method = action.payload;
     }),
     setURL: create.reducer((state, action: PayloadAction<string>) => {
       state.url = action.payload;
     }),
-    setQueryParam: create.reducer((state, action: PayloadAction<QueryParam[]>) => {
-      state.queryParams = action.payload;
+    setQueryParam: create.reducer((state, action: PayloadAction<Param[]>) => {
+      state.params = action.payload;
     }),
-    setHeaders: create.reducer((state, action: PayloadAction<QueryParam[]>) => {
+    setHeaders: create.reducer((state, action: PayloadAction<Param[]>) => {
       state.headers = action.payload;
     }),
   }),
@@ -39,10 +55,9 @@ export const restfullSlice = createSlice({
     selectAll: (restfull) => restfull,
     selectMethod: (restfull) => restfull.method,
     selectUrl: (restfull) => restfull.url,
-    selectStatus: (restfull) => restfull.status,
   },
 });
 
-export const { setMethod, setURL, setQueryParam, setHeaders } = restfullSlice.actions;
+export const { setMethod, setAllState, setURL, setQueryParam, setHeaders } = restfullSlice.actions;
 
-export const { selectAll, selectMethod, selectStatus } = restfullSlice.selectors;
+export const { selectAll, selectMethod } = restfullSlice.selectors;

From 5ae8a79106dcbdbd1faf9e2d1f5f7bbd2fb70109 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:24:25 +0400
Subject: [PATCH 052/157] refactor: change fetching logic, make sections
 resizable

---
 app/[...rest]/actions/fetchData.ts | 27 -------------------
 app/[...rest]/page.tsx             | 42 +++++++++---------------------
 2 files changed, 13 insertions(+), 56 deletions(-)
 delete mode 100644 app/[...rest]/actions/fetchData.ts

diff --git a/app/[...rest]/actions/fetchData.ts b/app/[...rest]/actions/fetchData.ts
deleted file mode 100644
index 83bd8a1..0000000
--- a/app/[...rest]/actions/fetchData.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-type RequestOptions = {
-  method: string;
-  headers: object;
-  body?: string;
-};
-export async function fetchData(url: string, method = 'GET', headers = {}, body = {}) {
-  try {
-    const options: RequestOptions = {
-      method: method,
-      headers: headers,
-    };
-
-    if (body && method !== 'GET') {
-      options.body = JSON.stringify(body);
-    }
-
-    const response = await fetch(url, options);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-
-    return response;
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-}
diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
index 9262da5..11234fb 100644
--- a/app/[...rest]/page.tsx
+++ b/app/[...rest]/page.tsx
@@ -1,35 +1,19 @@
 import RestForm from '@/components/RestClient/Form';
+import ResponseSection from '@/components/RestClient/Response';
+import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
 
-import ResponseSection from '@/components/RestClient/ResponseSection';
-import { fetchData } from './actions/fetchData';
-
-type PropsType = {
-  params: {
-    rest: string[];
-  };
-  searchParams: {
-    key: string;
-    value: string;
-  };
-};
-
-export default async function RESTfull({ params, searchParams }: PropsType) {
-  const headers = searchParams;
-  const [method, ...url] = params.rest;
-
-  const urlDecodedData = decodeURIComponent(url.join('/'));
-
-  const convertedUrl = atob(urlDecodedData);
-
-  const response = await fetchData(convertedUrl, method, headers);
-
-  const data = await response?.json();
-
-  const stringfy = JSON.stringify(data, null, 1);
+export default function RESTfull() {
   return (
-    <main className="h-[calc(100vh-8.5rem)]">
-      <RestForm />
-      <ResponseSection data={stringfy} />
+    <main className="flex h-[calc(100vh-8.5rem)]">
+      <ResizableGroup autoSaveId="restfull" direction="vertical">
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+          <RestForm />
+        </ResizablePanel>
+        <ResizableHandle direction="vertical" />
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+          <ResponseSection />
+        </ResizablePanel>
+      </ResizableGroup>
     </main>
   );
 }

From c9dbf78061c02b4fc205cdbd5c37c3860a2bbe7d Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:26:23 +0400
Subject: [PATCH 053/157] refactor: RestForm use monaco editor, add another
 fields, save data to local storage

---
 components/RestClient/Form/index.tsx | 147 +++++++++++++++------------
 1 file changed, 81 insertions(+), 66 deletions(-)

diff --git a/components/RestClient/Form/index.tsx b/components/RestClient/Form/index.tsx
index 5f11d07..13e7297 100644
--- a/components/RestClient/Form/index.tsx
+++ b/components/RestClient/Form/index.tsx
@@ -1,48 +1,46 @@
 'use client';
 import { useState } from 'react';
 import InputTable from '@/components/RestClient/Table/InputTable';
-import { restClientValidationSchema } from '@/validation/restclient.validation';
-import { yupResolver } from '@hookform/resolvers/yup';
 import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import CodeMirror from '@uiw/react-codemirror';
-import { json } from '@codemirror/lang-json';
+import Editor from '@monaco-editor/react';
 import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-import { methods, QueryParam, type Method } from '@/constants/restClientData';
+import { methods } from '@/constants/restClientData';
 import { useRouter } from 'next/navigation';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import CustomTabPanel from './CustomTabPanel';
-import { selectAll, setHeaders, setMethod, setQueryParam, setURL } from '@/redux/features/restfullClient/restfullSlice';
-import { createQueryString } from '@/utils/createQueryString';
-
-function a11yProps(index: number) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  };
-}
+import { selectAll, setAllState } from '@/redux/features/restfullClient/restfullSlice';
+import type { Method, Param, RequestType } from '@/types';
+import { fetcher } from '@/services/response';
+import { generateUrl } from '@/utils/generateUrl';
+import { nanoid } from '@reduxjs/toolkit';
+import { setResponse } from '@/redux/features/mainSlice';
+import { a11yProps } from '@/utils/a11yProps';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 
 export type Inputs = {
   method: Method;
   url: string;
-  queryParams?: QueryParam[];
-  headers?: QueryParam[];
-  body?: string;
+  params: Param[];
+  headers: Param[];
+  body: string;
+  variables: Param[];
 };
 
 function RestForm() {
-  const dispatch = useAppDispatch();
-  const { method, url, queryParams, headers } = useAppSelector(selectAll);
   const [activeTab, setActiveTab] = useState(0);
+  const { storedValue: request, setLocalStorageValue } = useLocalStorage<RequestType[]>('requests', []);
+  const dispatch = useAppDispatch();
+  const { method, url, params, headers, body, variables } = useAppSelector(selectAll);
   const router = useRouter();
 
-  const form = useForm<Inputs>({
-    resolver: yupResolver(restClientValidationSchema),
+  const form = useForm({
     defaultValues: {
       method,
       url,
-      queryParams,
+      params,
       headers,
+      body,
+      variables,
     },
   });
   const {
@@ -52,33 +50,45 @@ function RestForm() {
     watch,
     formState: { errors },
   } = form;
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    const { url, method, params, headers, body, variables } = data;
+    const id = nanoid();
+    const date = `${new Date().toISOString()}`;
+
+    const newRequest: RequestType = { id, method, url, params, headers, body, variables, date };
+    setLocalStorageValue([...request, newRequest]);
+    dispatch(setAllState(newRequest));
 
-  const onSubmit: SubmitHandler<Inputs> = (data) => {
-    dispatch(setMethod(data.method));
-    dispatch(setURL(data.url));
-    if (data.queryParams) {
-      dispatch(setQueryParam(data.queryParams));
-    }
-
-    if (data.headers) {
-      dispatch(setHeaders(data.headers));
-    }
-
-    const finalQueryString = createQueryString(data.queryParams);
-    const headersQuery = createQueryString(data.headers);
-    const base64Encoded = btoa(`${data.url}${finalQueryString}`);
-    router.push(`/${data.method}/${base64Encoded}${headersQuery}`);
+    const fetchHeaders: Record<string, string> = {};
+    const fetchBody: string = body;
+
+    headers.forEach((header) => {
+      if (header.isChecked && header.key) {
+        fetchHeaders[header.key] = header.value;
+      }
+    });
+
+    const res = await fetcher(url, {
+      method: data.method,
+      headers: fetchHeaders,
+      body: fetchBody,
+    });
+
+    dispatch(setResponse(res));
+
+    const generatedUrl = generateUrl(newRequest);
+    router.push(`${generatedUrl}`);
   };
 
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
   };
 
   const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
   return (
-    <section>
+    <section className="h-full flex-1 p-3">
       <FormProvider {...form}>
-        <form className="p-3" onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={handleSubmit(onSubmit)}>
           <Box component="div" className="mb-2 flex w-full items-start justify-between">
             <Controller
               render={({ field }) => (
@@ -102,7 +112,7 @@ function RestForm() {
             <FormControl fullWidth>
               <OutlinedInput
                 type="text"
-                {...register('url')}
+                {...register('url', { required: true })}
                 error={!!errors.url}
                 placeholder="https://example.com"
                 size="small"
@@ -115,23 +125,22 @@ function RestForm() {
             </Button>
           </Box>
 
-          <Box component="div">
-            <Tabs
-              value={activeTab}
-              className=""
-              onChange={handleChange}
-              aria-label="basic tabs example"
-              TabIndicatorProps={{ className: 'bg-orange-500 mb-0 h-[2px] bottom-2' }}
-            >
-              <Tab label="Params" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
-              <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
-              <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
-            </Tabs>
-          </Box>
+          <Tabs
+            value={activeTab}
+            onChange={handleTabChange}
+            aria-label="restfull request tabs"
+            TabIndicatorProps={{
+              className: 'bg-orange-500 mb-0 h-[2px] bottom-2',
+            }}
+          >
+            <Tab label="Params" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
+            <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
+            <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
+          </Tabs>
 
           <CustomTabPanel value={activeTab} index={0}>
             <Typography className="text-sm">Query Params</Typography>
-            <InputTable inputName="queryParams" />
+            <InputTable inputName="params" />
           </CustomTabPanel>
 
           <CustomTabPanel value={activeTab} index={1}>
@@ -142,17 +151,22 @@ function RestForm() {
           <CustomTabPanel value={activeTab} index={2}>
             <Controller
               render={({ field }) => (
-                <CodeMirror
+                <Editor
                   {...field}
-                  width="100%"
-                  height="200"
-                  theme={vscodeDark}
-                  extensions={[json()]}
-                  basicSetup={{
-                    foldGutter: false,
-                    dropCursor: false,
-                    allowMultipleSelections: false,
-                    indentOnInput: false,
+                  height="300px"
+                  defaultLanguage="json"
+                  theme="vs-dark"
+                  options={{
+                    minimap: {
+                      enabled: false,
+                    },
+                    lineNumbersMinChars: 4,
+                    wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
+                    wordWrap: 'on',
+                    wordWrapBreakAfterCharacters: '\t})]?|&,;',
+                    wordWrapBreakBeforeCharacters: '{([+',
+                    wordWrapColumn: 80,
+                    wrappingIndent: 'indent',
                   }}
                 />
               )}
@@ -166,4 +180,5 @@ function RestForm() {
     </section>
   );
 }
+
 export default RestForm;

From 96a554202528245b7a9aa00b3741ca3969e93674 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:27:57 +0400
Subject: [PATCH 054/157] feat: create resonse Section, add section body, head
 and  empty state

---
 components/RestClient/Response/EmptyState.tsx | 19 +++++++
 .../RestClient/Response/ResponseBody.tsx      | 44 +++++++++++++++++
 .../RestClient/Response/ResponseHeader.tsx    | 49 +++++++++++++++++++
 components/RestClient/Response/index.tsx      | 31 ++++++++++++
 4 files changed, 143 insertions(+)
 create mode 100644 components/RestClient/Response/EmptyState.tsx
 create mode 100644 components/RestClient/Response/ResponseBody.tsx
 create mode 100644 components/RestClient/Response/ResponseHeader.tsx
 create mode 100644 components/RestClient/Response/index.tsx

diff --git a/components/RestClient/Response/EmptyState.tsx b/components/RestClient/Response/EmptyState.tsx
new file mode 100644
index 0000000..12e9b17
--- /dev/null
+++ b/components/RestClient/Response/EmptyState.tsx
@@ -0,0 +1,19 @@
+import { Box, Typography } from '@mui/material';
+
+function EmptyState() {
+  return (
+    <>
+      <Box component="header" className="flex items-center justify-between py-1 text-sm">
+        <Typography variant="caption" component="h5" className="text-sm font-medium">
+          Response
+        </Typography>
+      </Box>
+      <Box>
+        <Typography variant="caption" component="h5">
+          Click To Send a response
+        </Typography>
+      </Box>
+    </>
+  );
+}
+export default EmptyState;
diff --git a/components/RestClient/Response/ResponseBody.tsx b/components/RestClient/Response/ResponseBody.tsx
new file mode 100644
index 0000000..5ae38cc
--- /dev/null
+++ b/components/RestClient/Response/ResponseBody.tsx
@@ -0,0 +1,44 @@
+import { selectResponse } from '@/redux/features/mainSlice';
+import { useAppSelector } from '@/redux/hooks';
+import Editor from '@monaco-editor/react';
+import { Box } from '@mui/material';
+import CustomTabPanel from '../Form/CustomTabPanel';
+
+type PropTypes = {
+  activeTab: number;
+};
+
+function ResponseBody({ activeTab }: PropTypes) {
+  const { data, parsedHeaders } = useAppSelector(selectResponse);
+
+  return (
+    <Box component="div">
+      <CustomTabPanel value={activeTab} index={0}>
+        <Editor
+          height="500px"
+          defaultLanguage="json"
+          theme="vs-dark"
+          defaultValue={data}
+          options={{
+            readOnly: true,
+            minimap: {
+              enabled: false,
+            },
+            smoothScrolling: true,
+            lineNumbersMinChars: 4,
+            wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
+            wordWrap: 'on',
+            wordWrapBreakAfterCharacters: '\t})]?|&,;',
+            wordWrapBreakBeforeCharacters: '{([+',
+            wordWrapColumn: 80,
+            wrappingIndent: 'indent',
+          }}
+        />
+      </CustomTabPanel>
+      <CustomTabPanel value={activeTab} index={1}>
+        {JSON.stringify(parsedHeaders)}
+      </CustomTabPanel>
+    </Box>
+  );
+}
+export default ResponseBody;
diff --git a/components/RestClient/Response/ResponseHeader.tsx b/components/RestClient/Response/ResponseHeader.tsx
new file mode 100644
index 0000000..640e720
--- /dev/null
+++ b/components/RestClient/Response/ResponseHeader.tsx
@@ -0,0 +1,49 @@
+import { selectResponse } from '@/redux/features/mainSlice';
+import { useAppSelector } from '@/redux/hooks';
+import { a11yProps } from '@/utils/a11yProps';
+import { calcSize } from '@/utils/calcSize';
+import { Box, Divider, Tab, Tabs, Typography } from '@mui/material';
+
+type PropTypes = {
+  activeTab: number;
+  handleTabChange: (event: React.SyntheticEvent, newValue: number) => void;
+};
+
+function ResponseHeader({ activeTab, handleTabChange }: PropTypes) {
+  const { data, parsedHeaders, status, statusText, responseTime } = useAppSelector(selectResponse);
+  const size = calcSize(JSON.stringify(data), JSON.stringify(parsedHeaders));
+
+  return (
+    <Box component="header" className="flex items-center justify-between py-1 text-sm">
+      <Tabs
+        value={activeTab}
+        onChange={handleTabChange}
+        aria-label="restfull request tabs"
+        TabIndicatorProps={{
+          className: 'bg-orange-500 mb-0 h-[2px] bottom-2',
+        }}
+      >
+        <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
+        <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
+      </Tabs>
+
+      <Box component="div" className="flex items-center justify-between gap-3">
+        {/* TODO: Status Text Color */}
+        <Typography
+          variant="button"
+          component="p"
+          className={`rounded-sm px-2 py-[1px] ${status === 200 ? 'bg-green-700 text-green-200' : 'bg-red-700 text-red-200'}`}
+        >
+          {`${status} ${statusText}`}
+        </Typography>
+        <Divider orientation="vertical" variant="middle" flexItem />
+        <Typography component="p" className="text-sm">{`${responseTime} ms`}</Typography>
+        <Divider orientation="vertical" variant="middle" flexItem />
+        <Typography component="p" className="text-sm">
+          {size}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+export default ResponseHeader;
diff --git a/components/RestClient/Response/index.tsx b/components/RestClient/Response/index.tsx
new file mode 100644
index 0000000..46de53c
--- /dev/null
+++ b/components/RestClient/Response/index.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { useAppSelector } from '@/redux/hooks';
+import { selectResponse } from '@/redux/features/mainSlice';
+import EmptyState from './EmptyState';
+import ResponseBody from './ResponseBody';
+import ResponseHeader from './ResponseHeader';
+
+function ResponseSection() {
+  const [activeTab, setActiveTab] = useState(0);
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  };
+  const { data } = useAppSelector(selectResponse);
+
+  return (
+    <Box component="section" className="h-full flex-1 px-3">
+      {data ? (
+        <>
+          <ResponseHeader activeTab={activeTab} handleTabChange={handleTabChange} />
+          <ResponseBody activeTab={activeTab} />
+        </>
+      ) : (
+        <EmptyState />
+      )}
+    </Box>
+  );
+}
+export default ResponseSection;

From a4b6f309b6e600bfdf1f9586e3c712a2c7072018 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:28:58 +0400
Subject: [PATCH 055/157] refactor: some changes

---
 constants/restClientData.ts | 8 +-------
 utils/a11yProps.ts          | 6 ++++++
 utils/createQueryString.ts  | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)
 create mode 100644 utils/a11yProps.ts

diff --git a/constants/restClientData.ts b/constants/restClientData.ts
index 99ce57e..b4e69db 100644
--- a/constants/restClientData.ts
+++ b/constants/restClientData.ts
@@ -1,4 +1,4 @@
-export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
+import { Method } from '@/types';
 
 export const methods: { name: Method; color: string }[] = [
   { name: 'GET', color: 'text-green-500' },
@@ -9,9 +9,3 @@ export const methods: { name: Method; color: string }[] = [
   { name: 'HEAD', color: 'text-green-700' },
   { name: 'OPTIONS', color: 'text-pink-500' },
 ];
-
-export type QueryParam = {
-  isChecked?: boolean;
-  key?: string;
-  value?: string;
-};
diff --git a/utils/a11yProps.ts b/utils/a11yProps.ts
new file mode 100644
index 0000000..50a3123
--- /dev/null
+++ b/utils/a11yProps.ts
@@ -0,0 +1,6 @@
+export const a11yProps = (index: number) => {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+};
diff --git a/utils/createQueryString.ts b/utils/createQueryString.ts
index 89ab9fc..488f1dd 100644
--- a/utils/createQueryString.ts
+++ b/utils/createQueryString.ts
@@ -1,6 +1,6 @@
-import { QueryParam } from '@/constants/restClientData';
+import type { Param } from '@/types';
 
-export const createQueryString = (query: QueryParam[] | undefined) => {
+export const createQueryString = (query: Param[] | undefined) => {
   if (!query) return '';
   const queryString = query
     .map((item) => {
@@ -12,5 +12,5 @@ export const createQueryString = (query: QueryParam[] | undefined) => {
     .filter(Boolean)
     .join('&');
 
-  return `?${queryString}`;
+  return queryString;
 };

From 3efbaa96d85402482b371c5e2e18e7a71397b17f Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:29:26 +0400
Subject: [PATCH 056/157] feat: create replace util fn

---
 utils/replaceValuesWithPlaceholders.ts | 12 ++++++++++++
 utils/replaceVariables.ts              | 12 ++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 utils/replaceValuesWithPlaceholders.ts
 create mode 100644 utils/replaceVariables.ts

diff --git a/utils/replaceValuesWithPlaceholders.ts b/utils/replaceValuesWithPlaceholders.ts
new file mode 100644
index 0000000..10a01d4
--- /dev/null
+++ b/utils/replaceValuesWithPlaceholders.ts
@@ -0,0 +1,12 @@
+import { RequestType } from '@/types';
+
+export function replaceValuesWithPlaceholders(obj: RequestType): RequestType {
+  let jsonString = JSON.stringify(obj);
+
+  obj.variables.forEach((variable) => {
+    const regex = new RegExp(variable.value.replace(/[-\\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
+    jsonString = jsonString.replace(regex, `{{${variable.key}}}`);
+  });
+
+  return JSON.parse(jsonString) as RequestType;
+}
diff --git a/utils/replaceVariables.ts b/utils/replaceVariables.ts
new file mode 100644
index 0000000..741a2d8
--- /dev/null
+++ b/utils/replaceVariables.ts
@@ -0,0 +1,12 @@
+import { Param, RequestType } from '@/types';
+
+export function replaceVariables(obj: RequestType): RequestType {
+  let jsonString = JSON.stringify(obj);
+
+  obj.variables.forEach((variable: Param) => {
+    const regex = new RegExp(`{{${variable.key}}}`, 'g');
+    jsonString = jsonString.replace(regex, variable.value);
+  });
+
+  return JSON.parse(jsonString) as RequestType;
+}

From 3c6076e181459312f343db5c78c7ccf73f920845 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:31:27 +0400
Subject: [PATCH 057/157] feat: added fetcher restclient service fn

---
 services/response/index.ts | 40 ++++++++++++++++++++++++++++++++++++++
 utils/getErrorMessage.ts   |  7 +++++++
 2 files changed, 47 insertions(+)
 create mode 100644 services/response/index.ts
 create mode 100644 utils/getErrorMessage.ts

diff --git a/services/response/index.ts b/services/response/index.ts
new file mode 100644
index 0000000..f786b34
--- /dev/null
+++ b/services/response/index.ts
@@ -0,0 +1,40 @@
+'use server';
+
+import { getErrorMessage } from '@/utils/getErrorMessage';
+
+const ignoredBodyMethods = ['GET', 'HEAD'];
+
+export async function fetcher(url: string | URL | Request, options?: RequestInit) {
+  try {
+    const startTimer = Date.now();
+
+    const body = options?.body && !ignoredBodyMethods.includes(options.method || '') ? options.body : undefined;
+
+    const res = await fetch(url, {
+      ...options,
+      body,
+    });
+
+    const data = await res.json();
+
+    const endTimer = Date.now();
+
+    return {
+      data: JSON.stringify(data, null, 2),
+      status: res.status,
+      statusText: res.statusText,
+      parsedHeaders: Object.fromEntries(res.headers),
+      success: res.ok,
+      responseTime: endTimer - startTimer,
+    };
+  } catch (error) {
+    return {
+      data: JSON.stringify(error),
+      status: 500,
+      statusText: getErrorMessage(error, 'Failed to fetch'),
+      parsedHeaders: {},
+      success: false,
+      responseTime: 0,
+    };
+  }
+}
diff --git a/utils/getErrorMessage.ts b/utils/getErrorMessage.ts
new file mode 100644
index 0000000..c55f015
--- /dev/null
+++ b/utils/getErrorMessage.ts
@@ -0,0 +1,7 @@
+export const getErrorMessage = (error: unknown, initialMessage = 'An error occurred'): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return initialMessage;
+};

From c4f0028f7ff64179a110d7cac890feaa7445b466 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 11:31:48 +0400
Subject: [PATCH 058/157] feat: create generateUrl fn

---
 utils/generateUrl.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 utils/generateUrl.ts

diff --git a/utils/generateUrl.ts b/utils/generateUrl.ts
new file mode 100644
index 0000000..572de6d
--- /dev/null
+++ b/utils/generateUrl.ts
@@ -0,0 +1,16 @@
+import { RequestType } from '@/types';
+import { createQueryString } from './createQueryString';
+
+export function generateUrl(req: RequestType): string {
+  const base64url = btoa(req.url);
+  const param = createQueryString(req.params);
+  const base64param = param && btoa(`?${param}`);
+
+  const body = req.body && JSON.stringify(req.body);
+  const base64body = body && `/${btoa(body)}`;
+
+  const headers = createQueryString(req.headers);
+  const headerQuery = headers && `?${headers}`;
+
+  return `/${req.method}/${base64url}${base64param}${base64body}${headerQuery}`;
+}

From 929e5c372107b58ad3defc18a4eb9f127ad96995 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 8 Sep 2024 14:59:39 +0400
Subject: [PATCH 059/157] fix: history route

---
 components/PrivateRoute/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index 1b747fe..7bb854a 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -15,7 +15,7 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
     if (
       !user &&
       !loading &&
-      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.histor)
+      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.history)
     ) {
       router.push(routes.login);
     }
@@ -29,7 +29,7 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
     (user && !loading && (pathname === routes.signup || pathname === routes.login)) ||
     (!user &&
       !loading &&
-      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.histor)) ? (
+      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.history)) ? (
     <div className="flex h-screen w-screen items-center justify-center">
       <span>...loading</span>
     </div>

From 9093f11d8da8cadf798f8eb8695ed0ffd2b70651 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 14:36:28 +0400
Subject: [PATCH 060/157] refactor: use Link and sooner toast package

---
 app/layout.tsx                  | 12 +++++-------
 components/FormSignIn/index.tsx | 17 +++++++++--------
 components/FormSignUp/index.tsx | 17 +++++++++--------
 components/Header/index.tsx     | 26 +++++++++-----------------
 components/Welcome/index.tsx    | 23 +++++++++++------------
 5 files changed, 43 insertions(+), 52 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index a67b03a..23b8c1c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,8 +8,7 @@ import { StyledEngineProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import './globals.css';
 import PrivateRoute from '@/components/PrivateRoute';
-import ToastMessage from '@/components/ToastMessage';
-
+import { Toaster } from 'sonner';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -30,11 +29,10 @@ export default function RootLayout({
           <AppRouterCacheProvider options={{ key: 'css' }}>
             <PrivateRoute>
               <StyledEngineProvider injectFirst>
-                <ToastMessage>
-                  <Header />
-                  {children}
-                  <Footer />
-                </ToastMessage>
+                <Header />
+                {children}
+                <Footer />
+                <Toaster expand={false} richColors closeButton duration={5000} className="bottom-24" />
               </StyledEngineProvider>
             </PrivateRoute>
           </AppRouterCacheProvider>
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index d92d39f..f67a266 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { useForm } from 'react-hook-form';
 import { SignInData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -22,14 +23,12 @@ import { signInWithEmailAndPassword } from '@firebase/auth';
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { FirebaseError } from '@firebase/util';
-import { useAppDispatch } from '@/redux/hooks';
-import { setMessage } from '@/redux/features/toastMessage/toastSlice';
 import { toastMessages } from '@/constants/toastMessages';
+import { toast } from 'sonner';
 
 function FormSignIn() {
   const router = useRouter();
   const [showPassword, setShowPassword] = React.useState(false);
-  const dispatch = useAppDispatch();
 
   const {
     register,
@@ -44,17 +43,17 @@ function FormSignIn() {
       const user = await signInWithEmailAndPassword(auth, data.login, data.password);
       if (!user.user.emailVerified) {
         await logout();
-        dispatch(setMessage({ message: toastMessages.confirmEmail, type: 'warning' }));
+        toast.info(toastMessages.confirmEmail);
         router.push(routes.login);
       } else {
-        dispatch(setMessage({ message: toastMessages.successSignIn, type: 'success' }));
+        toast.success(toastMessages.successSignIn);
         router.push(routes.home);
       }
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/invalid-credential') {
-        dispatch(setMessage({ message: toastMessages.userNotFound, type: 'error' }));
+        toast.error(toastMessages.userNotFound);
       } else {
-        dispatch(setMessage({ message: toastMessages.errorSignIn, type: 'error' }));
+        toast.error(toastMessages.errorSignIn);
       }
     }
   };
@@ -102,7 +101,9 @@ function FormSignIn() {
       </Button>
       <div className="flex flex-col items-center">
         <p className="m-0">If you don&apos;t have an account, please</p>
-        <Button href={routes.signup}>Sign up</Button>
+        <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
+          Sign up
+        </Link>
       </div>
     </form>
   );
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 95a6da1..427b410 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { useForm } from 'react-hook-form';
 import { SignUpData } from '@/interfaces/auth.interface';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -23,14 +24,12 @@ import { createUserWithEmailAndPassword, sendEmailVerification, updateProfile }
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { FirebaseError } from '@firebase/util';
-import { useAppDispatch } from '@/redux/hooks';
-import { setMessage } from '@/redux/features/toastMessage/toastSlice';
+import { toast } from 'sonner';
 import { toastMessages } from '@/constants/toastMessages';
 
 function FormSignUp() {
   const router = useRouter();
   const [showPassword, setShowPassword] = React.useState(false);
-  const dispatch = useAppDispatch();
 
   const {
     register,
@@ -45,16 +44,16 @@ function FormSignUp() {
       const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
       await logout();
       await updateProfile(userCredential.user, { displayName: data.name });
-      dispatch(setMessage({ message: toastMessages.confirmEmail, type: 'warning' }));
+      toast.warning(toastMessages.confirmEmail);
       await sendEmailVerification(userCredential.user);
       router.push(routes.home);
-      setTimeout(() => dispatch(setMessage({ message: toastMessages.successSignUp, type: 'success' })), 4000);
+      setTimeout(() => toast.success(toastMessages.successSignUp), 4000);
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/email-already-in-use') {
-        dispatch(setMessage({ message: toastMessages.userAlreadyExist, type: 'warning' }));
+        toast.warning(toastMessages.userAlreadyExist);
         router.push(routes.login);
       } else {
-        dispatch(setMessage({ message: toastMessages.errorSignUp, type: 'error' }));
+        toast.error(toastMessages.errorSignUp);
       }
     }
   };
@@ -132,7 +131,9 @@ function FormSignUp() {
       </Button>
       <div className="flex flex-col items-center">
         <p className="m-0">If you already have an account, please</p>
-        <Button href={routes.login}>Sign in</Button>
+        <Link href={routes.login} className="text-blue-500 hover:text-blue-700">
+          Sign in
+        </Link>
       </div>
     </form>
   );
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 7fc1a94..70e21b7 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,47 +1,39 @@
 'use client';
-
 import Link from 'next/link';
 import { routes } from '@/constants/routes';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, logout } from '@/firebase';
 import { useRouter } from 'next/navigation';
 import { Button } from '@mui/material';
-import { useAppDispatch } from '@/redux/hooks';
-import { setMessage } from '@/redux/features/toastMessage/toastSlice';
 import { toastMessages } from '@/constants/toastMessages';
+import { toast } from 'sonner';
 
 function Header() {
   const [user] = useAuthState(auth);
   const router = useRouter();
-  const dispatch = useAppDispatch();
-
   const onLogout = async () => {
     try {
       await logout();
-      dispatch(setMessage({ message: toastMessages.signOutSuccess, type: 'success' }));
+      toast.info(toastMessages.signOutSuccess);
       router.push(routes.home);
     } catch (error) {
-      dispatch(setMessage({ message: toastMessages.errorSignOut, type: 'error' }));
+      toast.error(toastMessages.errorSignOut);
     }
   };
   return (
-    <header className="flex h-20 items-center justify-between bg-blue-600 text-white">
+    <header className="flex h-14 items-center justify-between bg-blue-600 text-white">
       <div>
         <Link href={routes.home}>Home</Link>
       </div>
-      <div className="flex">
+      <div className="flex items-center gap-2">
         <Button variant="outlined" color="inherit">
           EN
         </Button>
         {!user ? (
-          <div>
-            <Button href={routes.login} color="inherit">
-              Sign In
-            </Button>
-            <Button href={routes.signup} color="inherit">
-              Sign Up
-            </Button>
-          </div>
+          <>
+            <Link href={routes.login}>Sign In</Link>
+            <Link href={routes.signup}>Sign Up</Link>
+          </>
         ) : (
           <div>
             <Button color="inherit" onClick={onLogout}>
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index 0e29f92..681f82b 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -1,9 +1,8 @@
 'use client';
-
 import { auth } from '@/firebase';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import { Button } from '@mui/material';
 import { routes } from '@/constants/routes';
+import Link from 'next/link';
 
 const Welcome = () => {
   const [user] = useAuthState(auth);
@@ -15,27 +14,27 @@ const Welcome = () => {
           <div>
             <h2 className="text-center">Welcome!</h2>
             <div className="flex gap-2">
-              <Button href={routes.login} color="inherit" variant="outlined">
+              <Link href={routes.login} className="text-blue-500 hover:text-blue-700">
                 Sign In
-              </Button>
-              <Button href={routes.signup} color="inherit" variant="outlined">
+              </Link>
+              <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
                 Sign Up
-              </Button>
+              </Link>
             </div>
           </div>
         ) : (
           <div>
             <h2 className="text-center">Welcome Back, {user.displayName}!</h2>
             <div className="flex gap-2">
-              <Button href={routes.restfull} color="inherit" variant="outlined">
+              <Link href={routes.restfull} className="text-blue-500 hover:text-blue-700">
                 REST Client
-              </Button>
-              <Button href={routes.graphql} color="inherit" variant="outlined">
+              </Link>
+              <Link href={routes.graphql} className="text-blue-500 hover:text-blue-700">
                 GraphiQL Client
-              </Button>
-              <Button href={routes.history} color="inherit" variant="outlined">
+              </Link>
+              <Link href={routes.history} className="text-blue-500 hover:text-blue-700">
                 History
-              </Button>
+              </Link>
             </div>
           </div>
         )}

From 8d47ab703181865f9c39f33a7fcc719d0e0e0ff7 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 14:39:23 +0400
Subject: [PATCH 061/157] refacor: some changes

---
 app/[...rest]/page.tsx | 2 +-
 app/history/page.tsx   | 2 +-
 app/login/page.tsx     | 4 ++--
 app/page.tsx           | 4 ++--
 app/signup/page.tsx    | 4 ++--
 tailwind.config.ts     | 3 ---
 6 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
index 11234fb..ab28657 100644
--- a/app/[...rest]/page.tsx
+++ b/app/[...rest]/page.tsx
@@ -4,7 +4,7 @@ import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Re
 
 export default function RESTfull() {
   return (
-    <main className="flex h-[calc(100vh-8.5rem)]">
+    <main className="flex h-[calc(100vh-6rem)]">
       <ResizableGroup autoSaveId="restfull" direction="vertical">
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
           <RestForm />
diff --git a/app/history/page.tsx b/app/history/page.tsx
index a03ae1e..a6cb98d 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -2,7 +2,7 @@ import DataTable from '@/components/DataTable';
 
 export default function Hisory() {
   return (
-    <main className="h-[calc(100vh-8.5rem)]">
+    <main className="h-[calc(100vh-6rem)]">
       <DataTable />
     </main>
   );
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 3190843..adbe0c5 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -2,9 +2,9 @@ import FormSignIn from '@/components/FormSignIn';
 
 function Login() {
   return (
-    <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
+    <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
       Login
-      <FormSignIn></FormSignIn>
+      <FormSignIn />
     </main>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 5661eb1..e2ea739 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,8 +2,8 @@ import Welcome from '@/components/Welcome';
 
 export default function Home() {
   return (
-    <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
-      <Welcome></Welcome>
+    <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
+      <Welcome />
     </main>
   );
 }
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index 91a1353..7859418 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -2,9 +2,9 @@ import FormSignUp from '@/components/FormSignUp';
 
 function SignUp() {
   return (
-    <main className="flex h-[calc(100vh-8.5rem)] flex-col items-center justify-center p-3">
+    <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
       Sign Up
-      <FormSignUp></FormSignUp>
+      <FormSignUp />
     </main>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a069ec2..122a46f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,9 +1,6 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  corePlugins: {
-    preflight: false,
-  },
   important: true,
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',

From d737ccea59ed3080de4cbd6bf37d075fb8baa651 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 14:40:11 +0400
Subject: [PATCH 062/157] feat: added team members and course link to footer

---
 components/Footer/index.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index ff49d67..d0d9a57 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -1,9 +1,27 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import course_logo from '@/public/assets/rss-logo.svg';
 function Footer() {
   return (
-    <footer className="flex h-14 items-center justify-between bg-blue-600 text-white">
-      <ul>Github Links</ul>
+    <footer className="flex h-10 items-center justify-between bg-blue-600 text-sm text-white">
+      <ul className="flex gap-2">
+        <li>
+          <Link href="https://github.com/shd-mn" target="_blank">
+            Shadman Alizada
+          </Link>
+        </li>
+        <li>
+          <Link href="https://github.com/olitera" target="_blank">
+            Volha Melayok
+          </Link>
+        </li>
+      </ul>
       <p>2024</p>
-      <span>Course Logo</span>
+      <div>
+        <Link href="https://rs.school/" target="_blank" className="flex items-center gap-2">
+          <Image src={course_logo} alt="The Rolling Scopes School" quality={100} width={24} height={24} /> RS School
+        </Link>
+      </div>
     </footer>
   );
 }

From 410e9aa5ae150e4f8a5b59fb16bff52c5c89b132 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 14:43:39 +0400
Subject: [PATCH 063/157] refactor: PrivateRoute logic for public routes
 handling and improved loading state

---
 components/PrivateRoute/index.tsx | 36 ++++++++++++++-----------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index 7bb854a..2f5348b 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -12,30 +12,26 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
 
   useEffect(() => {
-    if (
-      !user &&
-      !loading &&
-      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.history)
-    ) {
-      router.push(routes.login);
-    }
+    const publicRoutes = [routes.home, routes.login, routes.signup];
 
-    if (user && !loading && (pathname === routes.signup || pathname === routes.login)) {
-      router.push(routes.home);
+    if (!loading) {
+      if (!user && !publicRoutes.includes(pathname)) {
+        router.push(routes.login);
+      } else if (user && publicRoutes.includes(pathname)) {
+        router.push(routes.home);
+      }
     }
   }, [user, loading, pathname, router]);
 
-  return loading ||
-    (user && !loading && (pathname === routes.signup || pathname === routes.login)) ||
-    (!user &&
-      !loading &&
-      (pathname === routes.restfull || pathname == routes.graphql || pathname === routes.history)) ? (
-    <div className="flex h-screen w-screen items-center justify-center">
-      <span>...loading</span>
-    </div>
-  ) : (
-    <>{children}</>
-  );
+  if (loading || (!user && pathname !== routes.home && pathname !== routes.login && pathname !== routes.signup)) {
+    return (
+      <div className="flex h-screen w-screen items-center justify-center">
+        <iframe src="https://lottie.host/embed/ad300dda-56b0-458a-90a4-b602880bb0e8/16aZWPxQqa.json"></iframe>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
 };
 
 export default PrivateRoute;

From 87c7909c7b13df1dffe2ccf69f1cfb51db4d9b65 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 14:46:22 +0400
Subject: [PATCH 064/157] refactor: remove custom Toast comp and toast slice

---
 components/ToastMessage/index.tsx         | 34 --------------------
 constants/toastMessages.ts                |  4 +--
 redux/features/toastMessage/toastSlice.ts | 38 -----------------------
 redux/store.ts                            |  3 +-
 4 files changed, 3 insertions(+), 76 deletions(-)
 delete mode 100644 components/ToastMessage/index.tsx
 delete mode 100644 redux/features/toastMessage/toastSlice.ts

diff --git a/components/ToastMessage/index.tsx b/components/ToastMessage/index.tsx
deleted file mode 100644
index d066360..0000000
--- a/components/ToastMessage/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-import React from 'react';
-import { Alert, Snackbar, SnackbarCloseReason } from '@mui/material';
-import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { closeToast, selectAll } from '@/redux/features/toastMessage/toastSlice';
-
-const ToastMessage = ({ children }: { children: React.ReactNode }) => {
-  const dispatch = useAppDispatch();
-  const { isOpen, message, type } = useAppSelector(selectAll);
-
-  const handleClose = (event: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    dispatch(closeToast());
-  };
-  return (
-    <>
-      {children}
-      <Snackbar
-        open={isOpen}
-        autoHideDuration={5000}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      >
-        <Alert onClose={handleClose} severity={type} variant="filled">
-          {message}
-        </Alert>
-      </Snackbar>
-    </>
-  );
-};
-
-export default ToastMessage;
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
index d6ea942..4db46ad 100644
--- a/constants/toastMessages.ts
+++ b/constants/toastMessages.ts
@@ -1,11 +1,11 @@
 export const toastMessages = {
   successSignIn: 'You have successfully signed in.',
   errorSignIn: 'Failed to sign in. Please try again.',
-  userNotFound: 'User not found. Please check your login and password or create an account.',
+  userNotFound: 'Please check your email and password or create an account.',
   confirmEmail: 'Please confirm your email address',
   successSignUp: 'You have successfully signed up.',
   errorSignUp: 'Failed to sign up. Please try again.',
   userAlreadyExist: 'User already exist. Please sign in.',
-  signOutSuccess: 'You have successfully signed out.',
+  signOutSuccess: 'You are sign out.',
   errorSignOut: 'Failed to sign out. Please try again.',
 };
diff --git a/redux/features/toastMessage/toastSlice.ts b/redux/features/toastMessage/toastSlice.ts
deleted file mode 100644
index 49f74c9..0000000
--- a/redux/features/toastMessage/toastSlice.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-
-export interface ToastSliceState {
-  isOpen: boolean;
-  message: string;
-  type: 'success' | 'error' | 'info' | 'warning';
-}
-
-const initialState: ToastSliceState = {
-  isOpen: false,
-  message: '',
-  type: 'info',
-};
-
-export const toastSlice = createSlice({
-  name: 'toastMessage',
-  initialState,
-  reducers: (create) => ({
-    setMessage: create.reducer((state, action: PayloadAction<Omit<ToastSliceState, 'isOpen'>>) => {
-      state.isOpen = true;
-      state.message = action.payload.message;
-      state.type = action.payload.type;
-    }),
-    closeToast: create.reducer((state) => {
-      state.isOpen = false;
-      state.message = '';
-      state.type = 'info';
-    }),
-  }),
-
-  selectors: {
-    selectAll: (toastMessage) => toastMessage,
-  },
-});
-
-export const { setMessage, closeToast } = toastSlice.actions;
-
-export const { selectAll } = toastSlice.selectors;
diff --git a/redux/store.ts b/redux/store.ts
index d26cf9a..e9631e2 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -3,9 +3,8 @@ import { combineSlices, configureStore } from '@reduxjs/toolkit';
 import { restfullSlice } from './features/restfullClient/restfullSlice';
 import { mainSlice } from './features/mainSlice';
 import { graphiqlSlice } from '@/redux/features/graphiqlClient/graphiqlSlice';
-import { toastSlice } from '@/redux/features/toastMessage/toastSlice';
 
-const rootReducer = combineSlices(mainSlice, restfullSlice, graphiqlSlice, toastSlice);
+const rootReducer = combineSlices(mainSlice, restfullSlice, graphiqlSlice);
 
 export type RootState = ReturnType<typeof rootReducer>;
 

From 71e12119302736363994c9c279d6dd94eb91d636 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 21:58:14 +0400
Subject: [PATCH 065/157] fix: show toast message when route change

---
 app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 23b8c1c..8914365 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
                 <Footer />
                 <Toaster expand={false} richColors closeButton duration={5000} className="bottom-24" />
               </StyledEngineProvider>
-            </PrivateRoute>
+            <Toaster expand={false} richColors closeButton duration={3000} className="bottom-24" />
           </AppRouterCacheProvider>
         </StoreProvider>
       </body>

From 7ffcf91b77a387c4a779085f1ec1e541ca2c015b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 21:59:02 +0400
Subject: [PATCH 066/157] refactor: wrap children with PrivateRoute

---
 app/layout.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 8914365..6c388bf 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,13 +2,13 @@ import type { Metadata } from 'next';
 import { StoreProvider } from './StoreProvider';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 import { Inter } from 'next/font/google';
+import { Toaster } from 'sonner';
+import PrivateRoute from '@/components/PrivateRoute';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import { StyledEngineProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { StyledEngineProvider } from '@mui/material/styles';
 import './globals.css';
-import PrivateRoute from '@/components/PrivateRoute';
-import { Toaster } from 'sonner';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -27,13 +27,11 @@ export default function RootLayout({
         <StoreProvider>
           <CssBaseline />
           <AppRouterCacheProvider options={{ key: 'css' }}>
-            <PrivateRoute>
-              <StyledEngineProvider injectFirst>
-                <Header />
-                {children}
-                <Footer />
-                <Toaster expand={false} richColors closeButton duration={5000} className="bottom-24" />
-              </StyledEngineProvider>
+            <StyledEngineProvider injectFirst>
+              <Header />
+              <PrivateRoute>{children}</PrivateRoute>
+              <Footer />
+            </StyledEngineProvider>
             <Toaster expand={false} richColors closeButton duration={3000} className="bottom-24" />
           </AppRouterCacheProvider>
         </StoreProvider>

From a1c97b7e02741e44a02de10f5630e252845a7fc9 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 22:00:29 +0400
Subject: [PATCH 067/157] feat: create Loading comp and animated svg

---
 app/loading.tsx               |  9 +++++++++
 components/Ellipsis/index.tsx | 12 ++++++++++++
 public/assets/loading.svg     | 36 +++++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 app/loading.tsx
 create mode 100644 components/Ellipsis/index.tsx
 create mode 100644 public/assets/loading.svg

diff --git a/app/loading.tsx b/app/loading.tsx
new file mode 100644
index 0000000..fd35778
--- /dev/null
+++ b/app/loading.tsx
@@ -0,0 +1,9 @@
+import Elipsis from '@/components/Ellipsis';
+
+export default function Loading() {
+  return (
+    <div className="flex h-[calc(100vh-6rem)] w-screen items-center justify-center">
+      <Elipsis />
+    </div>
+  );
+}
diff --git a/components/Ellipsis/index.tsx b/components/Ellipsis/index.tsx
new file mode 100644
index 0000000..f536573
--- /dev/null
+++ b/components/Ellipsis/index.tsx
@@ -0,0 +1,12 @@
+'use client';
+import Image from 'next/image';
+import loading_svg from '@/public/assets/loading.svg';
+
+function Ellipsis() {
+  return (
+    <div className="flex h-full w-full items-center justify-center" data-testid="loader">
+      <Image src={loading_svg} alt="loader" priority width={60} />
+    </div>
+  );
+}
+export default Ellipsis;
diff --git a/public/assets/loading.svg b/public/assets/loading.svg
new file mode 100644
index 0000000..d52a77d
--- /dev/null
+++ b/public/assets/loading.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="167" height="167" style="shape-rendering: auto; display: block; background: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g>
+		<circle fill="#d20962" r="10" cy="50" cx="84">
+			<animate begin="0s" keySplines="0 0.5 0.5 1" values="10;0" keyTimes="0;1" calcMode="spline" dur="0.29411764705882354s" repeatCount="indefinite" attributeName="r">
+			</animate>
+			<animate begin="0s" values="#d20962;#00a78e;#7ac143;#f47721;#d20962" keyTimes="0;0.25;0.5;0.75;1" calcMode="discrete" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="fill">
+			</animate>
+		</circle>
+		<circle fill="#d20962" r="10" cy="50" cx="16">
+			<animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="r">
+			</animate>
+			<animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="cx">
+			</animate>
+		</circle>
+		<circle fill="#f47721" r="10" cy="50" cx="50">
+			<animate begin="-0.29411764705882354s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="r">
+			</animate>
+			<animate begin="-0.29411764705882354s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="cx">
+			</animate>
+		</circle>
+		<circle fill="#7ac143" r="10" cy="50" cx="84">
+			<animate begin="-0.5882352941176471s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="r">
+			</animate>
+			<animate begin="-0.5882352941176471s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="cx">
+			</animate>
+		</circle>
+		<circle fill="#00a78e" r="10" cy="50" cx="16">
+			<animate begin="-0.8823529411764706s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="r">
+			</animate>
+			<animate begin="-0.8823529411764706s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1.1764705882352942s" repeatCount="indefinite" attributeName="cx">
+			</animate>
+		</circle>
+		<g>
+		</g>
+	</g>
+</svg>

From 66729f2701b7141773c4cf09668e5e577d5eefc5 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 22:16:32 +0400
Subject: [PATCH 068/157] feat: add resolve path to vitest config

---
 vitest.config.mts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/vitest.config.mts b/vitest.config.mts
index a392d65..dd1650b 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -1,12 +1,18 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './'),
+    },
+  },
   test: {
     globals: true,
     environment: 'jsdom',
-    setupFiles: ['./vitest.setup.ts'],
+    setupFiles: ['./vitest.setup.tsx'],
     coverage: {
       provider: 'v8',
       exclude: ['**/.eslintrc.cjs', 'vitest.config.mts', 'next.config.mjs', 'next-env.d.ts'],

From 2f10e95e35a70cf773fbd3a3a8bafd08186ec7ea Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 22:18:46 +0400
Subject: [PATCH 069/157] feat: creat mock setup for next/image

---
 .eslintignore                       | 3 ++-
 vitest.setup.ts => vitest.setup.tsx | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)
 rename vitest.setup.ts => vitest.setup.tsx (68%)

diff --git a/.eslintignore b/.eslintignore
index b51ea71..6c3d387 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
 node_modules/
-build/
\ No newline at end of file
+build/
+vitest.setup.tsx
\ No newline at end of file
diff --git a/vitest.setup.ts b/vitest.setup.tsx
similarity index 68%
rename from vitest.setup.ts
rename to vitest.setup.tsx
index 4a00608..dfad390 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.tsx
@@ -4,6 +4,10 @@ import { cleanup } from '@testing-library/react';
 import { afterEach } from 'vitest';
 import { server } from './__test__/mock/server';
 
+const MockedNextImage = ({ src, alt }: { src: string; alt: string }) => <img src={src} alt={alt} />;
+
+vi.mock('next/image', () => ({ default: MockedNextImage }));
+
 beforeAll(() => server.listen());
 
 afterEach(() => {

From 3d8acf2826d9fa0a9ba50b022787d74b69ee424a Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 22:21:07 +0400
Subject: [PATCH 070/157] test: add Ellipsis Component test

---
 components/Ellipsis/ellipsis.test.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 components/Ellipsis/ellipsis.test.tsx

diff --git a/components/Ellipsis/ellipsis.test.tsx b/components/Ellipsis/ellipsis.test.tsx
new file mode 100644
index 0000000..f0da27f
--- /dev/null
+++ b/components/Ellipsis/ellipsis.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import Ellipsis from '.';
+
+describe('Ellipsis Component', () => {
+  it('renders the loading svg', () => {
+    render(<Ellipsis />);
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+
+    const img = screen.getByAltText('loader');
+    expect(img).toBeInTheDocument();
+
+    screen.debug();
+  });
+});

From 58b3d43435d3488242fd7dd77c22d44191f7b8a2 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 9 Sep 2024 22:24:56 +0400
Subject: [PATCH 071/157] refactor: PrivateRoute loading comp

---
 components/PrivateRoute/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index 2f5348b..c4d2981 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -5,6 +5,7 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth } from '@/firebase';
 import { usePathname, useRouter } from 'next/navigation';
 import { routes } from '@/constants/routes';
+import Elipsis from '../Ellipsis';
 
 const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
   const [user, loading] = useAuthState(auth);
@@ -25,8 +26,8 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
 
   if (loading || (!user && pathname !== routes.home && pathname !== routes.login && pathname !== routes.signup)) {
     return (
-      <div className="flex h-screen w-screen items-center justify-center">
-        <iframe src="https://lottie.host/embed/ad300dda-56b0-458a-90a4-b602880bb0e8/16aZWPxQqa.json"></iframe>
+      <div className="flex h-[calc(100vh-6rem)] w-screen items-center justify-center">
+        <Elipsis />
       </div>
     );
   }

From 534041ac223daadfd30f13fb3df2ce94eeadc93d Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Tue, 10 Sep 2024 02:14:11 +0400
Subject: [PATCH 072/157] refactor: change login route to signin

---
 app/{login => signin}/page.tsx    | 4 ++--
 components/FormSignIn/index.tsx   | 2 +-
 components/FormSignUp/index.tsx   | 4 ++--
 components/Header/index.tsx       | 2 +-
 components/PrivateRoute/index.tsx | 6 +++---
 components/Welcome/index.tsx      | 2 +-
 constants/routes.ts               | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)
 rename app/{login => signin}/page.tsx (82%)

diff --git a/app/login/page.tsx b/app/signin/page.tsx
similarity index 82%
rename from app/login/page.tsx
rename to app/signin/page.tsx
index adbe0c5..a949329 100644
--- a/app/login/page.tsx
+++ b/app/signin/page.tsx
@@ -1,6 +1,6 @@
 import FormSignIn from '@/components/FormSignIn';
 
-function Login() {
+function SignIn() {
   return (
     <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
       Login
@@ -9,4 +9,4 @@ function Login() {
   );
 }
 
-export default Login;
+export default SignIn;
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index f67a266..3614c2e 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -44,7 +44,7 @@ function FormSignIn() {
       if (!user.user.emailVerified) {
         await logout();
         toast.info(toastMessages.confirmEmail);
-        router.push(routes.login);
+        router.push(routes.signin);
       } else {
         toast.success(toastMessages.successSignIn);
         router.push(routes.home);
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 427b410..1041a55 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -51,7 +51,7 @@ function FormSignUp() {
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/email-already-in-use') {
         toast.warning(toastMessages.userAlreadyExist);
-        router.push(routes.login);
+        router.push(routes.signin);
       } else {
         toast.error(toastMessages.errorSignUp);
       }
@@ -131,7 +131,7 @@ function FormSignUp() {
       </Button>
       <div className="flex flex-col items-center">
         <p className="m-0">If you already have an account, please</p>
-        <Link href={routes.login} className="text-blue-500 hover:text-blue-700">
+        <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
           Sign in
         </Link>
       </div>
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 70e21b7..aaed747 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -31,7 +31,7 @@ function Header() {
         </Button>
         {!user ? (
           <>
-            <Link href={routes.login}>Sign In</Link>
+            <Link href={routes.signin}>Sign In</Link>
             <Link href={routes.signup}>Sign Up</Link>
           </>
         ) : (
diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index c4d2981..1dd3749 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -13,18 +13,18 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
 
   useEffect(() => {
-    const publicRoutes = [routes.home, routes.login, routes.signup];
+    const publicRoutes = [routes.home, routes.signin, routes.signup];
 
     if (!loading) {
       if (!user && !publicRoutes.includes(pathname)) {
-        router.push(routes.login);
+        router.push(routes.signin);
       } else if (user && publicRoutes.includes(pathname)) {
         router.push(routes.home);
       }
     }
   }, [user, loading, pathname, router]);
 
-  if (loading || (!user && pathname !== routes.home && pathname !== routes.login && pathname !== routes.signup)) {
+  if (loading || (!user && pathname !== routes.home && pathname !== routes.signin && pathname !== routes.signup)) {
     return (
       <div className="flex h-[calc(100vh-6rem)] w-screen items-center justify-center">
         <Elipsis />
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index 681f82b..f5e985a 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -14,7 +14,7 @@ const Welcome = () => {
           <div>
             <h2 className="text-center">Welcome!</h2>
             <div className="flex gap-2">
-              <Link href={routes.login} className="text-blue-500 hover:text-blue-700">
+              <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
                 Sign In
               </Link>
               <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
diff --git a/constants/routes.ts b/constants/routes.ts
index 3540110..cb7bca0 100644
--- a/constants/routes.ts
+++ b/constants/routes.ts
@@ -1,6 +1,6 @@
 export const routes = {
   home: '/',
-  login: '/login',
+  signin: '/signin',
   signup: '/signup',
   graphql: '/GRAPHQL',
   restfull: '/rest',

From 14b4de435a6a3c1dadf21ff4bf9f38812002b90e Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Tue, 10 Sep 2024 11:09:52 +0200
Subject: [PATCH 073/157] fix: add required to endpoint and sdl

---
 app/GRAPHQL/[[...endpoint]]/page.tsx  | 50 ++++++++++++++++--------
 components/GraphiQLClient/UrlForm.tsx | 56 +++++++++++++++++++++++++++
 components/GraphiQLClient/index.tsx   | 22 +++--------
 interfaces/url-graphql.interfase.ts   |  4 ++
 validation/url-graphql.validation.ts  |  6 +++
 5 files changed, 105 insertions(+), 33 deletions(-)
 create mode 100644 components/GraphiQLClient/UrlForm.tsx
 create mode 100644 interfaces/url-graphql.interfase.ts
 create mode 100644 validation/url-graphql.validation.ts

diff --git a/app/GRAPHQL/[[...endpoint]]/page.tsx b/app/GRAPHQL/[[...endpoint]]/page.tsx
index 5dd2b1e..e80de01 100644
--- a/app/GRAPHQL/[[...endpoint]]/page.tsx
+++ b/app/GRAPHQL/[[...endpoint]]/page.tsx
@@ -1,24 +1,42 @@
-import ResponseSection from '@/components/RestClient/ResponseSection';
+import ResponseSection from '@/components/RestClient/Response';
 import GraphiQLClient from '@/components/GraphiQLClient';
+import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
 
-interface Props {
-  params?: {
-    endpoint: string[];
-  };
-  searchParams?: {
-    key: string;
-    value: string;
-  };
-}
-
-function GraphQL({ params }: Props) {
-  const responseData = params?.endpoint;
-  const data = responseData ? Buffer.from(responseData[0], 'base64').toString('utf-8') : '';
+// interface Props {
+//   params?: {
+//     endpoint: string[];
+//   };
+//   searchParams?: {
+//     key: string;
+//     value: string;
+//   };
+// }
+//
+// function GraphQL({ params }: Props) {
+//   const responseData = params?.endpoint;
+//   const data = responseData ? Buffer.from(responseData[0], 'base64').toString('utf-8') : '';
+//
+//   return (
+//     <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
+//
+//       <GraphiQLClient></GraphiQLClient>
+//       <ResponseSection data={data} />
+//     </main>
+//   );
+// }
 
+function GraphQL() {
   return (
     <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
-      <GraphiQLClient></GraphiQLClient>
-      <ResponseSection data={data} />
+      <ResizableGroup autoSaveId="restfull" direction="vertical">
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+          <GraphiQLClient />
+        </ResizablePanel>
+        <ResizableHandle direction="vertical" />
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+          <ResponseSection />
+        </ResizablePanel>
+      </ResizableGroup>
     </main>
   );
 }
diff --git a/components/GraphiQLClient/UrlForm.tsx b/components/GraphiQLClient/UrlForm.tsx
new file mode 100644
index 0000000..d9cd3e5
--- /dev/null
+++ b/components/GraphiQLClient/UrlForm.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { TextField } from '@mui/material';
+import { selectAll, setSdlUrl, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import React from 'react';
+import { useAppDispatch, useAppSelector } from '@/redux/hooks';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
+import { urlValidationSchema } from '@/validation/url-graphql.validation';
+
+const UrlForm = () => {
+  const { url, sdlUrl } = useAppSelector(selectAll);
+  const dispatch = useAppDispatch();
+
+  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
+    void trigger('endpoint');
+    console.log(e.target.value, 'target');
+    console.log('submitted', isSubmitted);
+    dispatch(setUrl(e.target.value));
+  };
+
+  const {
+    register,
+    trigger,
+    formState: { errors, isSubmitted },
+  } = useForm<UrlGraphql>({
+    resolver: yupResolver(urlValidationSchema),
+  });
+
+  return (
+    <form className="flex flex-col gap-2">
+      <TextField
+        error={!!errors.endpoint}
+        helperText={errors.endpoint ? errors.endpoint.message : ' '}
+        id="endpoint"
+        label="Endpoint"
+        variant="outlined"
+        value={url}
+        {...register('endpoint', {
+          onChange: changeUrl,
+        })}
+      />
+      <TextField
+        error={!!errors.sdl}
+        helperText={errors.sdl ? errors.sdl.message : ' '}
+        label="SDL"
+        variant="outlined"
+        value={sdlUrl || url + '?sdl'}
+        {...register('sdl', { onChange: (e) => dispatch(setSdlUrl(e.target.value)) })}
+      />
+    </form>
+  );
+};
+
+export default UrlForm;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 5bfb4e3..f461fc5 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useMemo } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs, TextField } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from '@mui/material';
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery, setResponse, setSdlUrl, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setQuery, setResponse } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { useRouter } from 'next/navigation';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
@@ -15,9 +15,10 @@ import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
 import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { routes } from '@/constants/routes';
+import UrlForm from '@/components/GraphiQLClient/UrlForm';
 
 const GraphiQLClient = () => {
-  const { query, variables, url, sdlUrl, headers } = useAppSelector(selectAll);
+  const { query, variables, url, headers } = useAppSelector(selectAll);
   const fetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
   const [value, setValue] = React.useState(0);
   const router = useRouter();
@@ -72,10 +73,6 @@ const GraphiQLClient = () => {
     });
   };
 
-  const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(setUrl(e.target.value));
-  };
-
   function a11yProps(index: number) {
     return {
       id: `qraphql-tab-${index}`,
@@ -92,16 +89,7 @@ const GraphiQLClient = () => {
     <GraphiQLProvider fetcher={fetcher}>
       <div className="graphiql-container">
         <section className="p-3">
-          <div className="flex flex-col gap-2">
-            <TextField id="outlined-basic" label="Endpoint" variant="outlined" value={url} onChange={changeUrl} />
-            <TextField
-              id="outlined-basic"
-              label="SDL"
-              variant="outlined"
-              value={sdlUrl || url + '?sdl'}
-              onChange={(e) => dispatch(setSdlUrl(e.target.value))}
-            />
-          </div>
+          <UrlForm />
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
               <Tab label="Query" {...a11yProps(0)} />
diff --git a/interfaces/url-graphql.interfase.ts b/interfaces/url-graphql.interfase.ts
new file mode 100644
index 0000000..97683cc
--- /dev/null
+++ b/interfaces/url-graphql.interfase.ts
@@ -0,0 +1,4 @@
+export interface UrlGraphql {
+  endpoint: string;
+  sdl: string;
+}
diff --git a/validation/url-graphql.validation.ts b/validation/url-graphql.validation.ts
new file mode 100644
index 0000000..351c477
--- /dev/null
+++ b/validation/url-graphql.validation.ts
@@ -0,0 +1,6 @@
+import * as yup from 'yup';
+
+export const urlValidationSchema = yup.object().shape({
+  endpoint: yup.string().required('Endpoint is required'),
+  sdl: yup.string().required('SDL is required'),
+});

From d0025993375f4839bb767c606e93da371614c736 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Tue, 10 Sep 2024 14:51:44 +0200
Subject: [PATCH 074/157] fix: fix connection graphql request with response
 section

---
 app/GRAPHQL/[[...endpoint]]/page.tsx          |   6 +-
 app/globals.css                               |  15 +++
 components/GraphiQLClient/GraphiqlHeader.tsx  |  25 ++--
 .../{UrlForm.tsx => UrlSection.tsx}           |  30 ++---
 components/GraphiQLClient/index.tsx           | 120 +++++++++++-------
 constants/toastMessages.ts                    |   1 +
 6 files changed, 117 insertions(+), 80 deletions(-)
 rename components/GraphiQLClient/{UrlForm.tsx => UrlSection.tsx} (67%)

diff --git a/app/GRAPHQL/[[...endpoint]]/page.tsx b/app/GRAPHQL/[[...endpoint]]/page.tsx
index e80de01..26c8e31 100644
--- a/app/GRAPHQL/[[...endpoint]]/page.tsx
+++ b/app/GRAPHQL/[[...endpoint]]/page.tsx
@@ -27,9 +27,9 @@ import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Re
 
 function GraphQL() {
   return (
-    <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
-      <ResizableGroup autoSaveId="restfull" direction="vertical">
-        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+    <main className="gql flex h-[calc(100vh-6rem)] flex-col p-3">
+      <ResizableGroup autoSaveId="graphql" direction="vertical">
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15} id="gql-panel">
           <GraphiQLClient />
         </ResizablePanel>
         <ResizableHandle direction="vertical" />
diff --git a/app/globals.css b/app/globals.css
index b5c61c9..501cd2a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.gql div[role='separator'] {
+  z-index: 10000;
+}
+
+.gql div[data-panel-id='gql-panel'] {
+  overflow: auto !important;
+}
+
+.gql .graphiql-editor .CodeMirror {
+  position: unset;
+  height: auto;
+  /*overflow: unset;*/
+  /*display: contents;*/
+}
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index d7e5fcc..da5bd05 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -33,13 +33,12 @@ const GraphiqlHeader = () => {
   };
 
   return (
-    <div className="flex flex-col">
-      {JSON.stringify(headers)}
-      <form onSubmit={handleSubmit(onFormSubmit)}>
+    <div className="flex flex-col p-4">
+      <form onSubmit={handleSubmit(onFormSubmit)} className="flex flex-col gap-2">
         {fields.map((field, index) => (
-          <div key={field.id}>
-            <TextField label="Header Key" variant="outlined" {...register(`headers.${index}.key`)} />
-            <TextField label="Header Value" variant="outlined" {...register(`headers.${index}.value`)} />
+          <div key={field.id} className="flex gap-2">
+            <TextField label="Header Key" variant="outlined" size="small" {...register(`headers.${index}.key`)} />
+            <TextField label="Header Value" variant="outlined" size="small" {...register(`headers.${index}.value`)} />
             {fields.length > 1 ? (
               <IconButton aria-label="delete" onClick={() => removeField(index)}>
                 <DeleteIcon />
@@ -47,12 +46,14 @@ const GraphiqlHeader = () => {
             ) : null}
           </div>
         ))}
-        <IconButton aria-label="add" onClick={addNewField}>
-          <AddIcon />
-        </IconButton>
-        <Button type="submit" disabled={Object.keys(formState.dirtyFields).length === 0}>
-          Set Headers
-        </Button>
+        <div className="flex">
+          <IconButton aria-label="add" onClick={addNewField}>
+            <AddIcon />
+          </IconButton>
+          <Button type="submit" disabled={Object.keys(formState.dirtyFields).length === 0}>
+            Set Headers
+          </Button>
+        </div>
       </form>
     </div>
   );
diff --git a/components/GraphiQLClient/UrlForm.tsx b/components/GraphiQLClient/UrlSection.tsx
similarity index 67%
rename from components/GraphiQLClient/UrlForm.tsx
rename to components/GraphiQLClient/UrlSection.tsx
index d9cd3e5..b347576 100644
--- a/components/GraphiQLClient/UrlForm.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -4,32 +4,24 @@ import { TextField } from '@mui/material';
 import { selectAll, setSdlUrl, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import React from 'react';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
+import { FormState, UseFormRegister } from 'react-hook-form';
 import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
-import { urlValidationSchema } from '@/validation/url-graphql.validation';
 
-const UrlForm = () => {
+interface UrlFormInterface {
+  errors: FormState<UrlGraphql>['errors'];
+  register: UseFormRegister<UrlGraphql>;
+}
+
+const UrlSection = ({ register, errors }: UrlFormInterface) => {
   const { url, sdlUrl } = useAppSelector(selectAll);
   const dispatch = useAppDispatch();
 
   const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
-    void trigger('endpoint');
-    console.log(e.target.value, 'target');
-    console.log('submitted', isSubmitted);
     dispatch(setUrl(e.target.value));
   };
 
-  const {
-    register,
-    trigger,
-    formState: { errors, isSubmitted },
-  } = useForm<UrlGraphql>({
-    resolver: yupResolver(urlValidationSchema),
-  });
-
   return (
-    <form className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2">
       <TextField
         error={!!errors.endpoint}
         helperText={errors.endpoint ? errors.endpoint.message : ' '}
@@ -37,6 +29,7 @@ const UrlForm = () => {
         label="Endpoint"
         variant="outlined"
         value={url}
+        size="small"
         {...register('endpoint', {
           onChange: changeUrl,
         })}
@@ -47,10 +40,11 @@ const UrlForm = () => {
         label="SDL"
         variant="outlined"
         value={sdlUrl || url + '?sdl'}
+        size="small"
         {...register('sdl', { onChange: (e) => dispatch(setSdlUrl(e.target.value)) })}
       />
-    </form>
+    </div>
   );
 };
 
-export default UrlForm;
+export default UrlSection;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index f461fc5..91516b7 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -5,7 +5,8 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery, setResponse } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setQuery } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { setResponse } from '@/redux/features/mainSlice';
 import { useRouter } from 'next/navigation';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
@@ -15,11 +16,18 @@ import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
 import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { routes } from '@/constants/routes';
-import UrlForm from '@/components/GraphiQLClient/UrlForm';
+import { useForm } from 'react-hook-form';
+import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { urlValidationSchema } from '@/validation/url-graphql.validation';
+import UrlSection from '@/components/GraphiQLClient/UrlSection';
+import { toast } from 'sonner';
+import { toastMessages } from '@/constants/toastMessages';
+import { fetcher } from '@/services/response';
 
 const GraphiQLClient = () => {
   const { query, variables, url, headers } = useAppSelector(selectAll);
-  const fetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
+  const gqlFetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
   const [value, setValue] = React.useState(0);
   const router = useRouter();
   const dispatch = useAppDispatch();
@@ -49,7 +57,7 @@ const GraphiQLClient = () => {
         /^\s*(mutation|query)\s*[a-zA-Z0-9_]*\s*\([^)]+\)\s*\{/,
       );
 
-      const res = await fetch(url, {
+      const res = await fetcher(url, {
         method: 'POST',
         headers: reqHeaders,
         body: JSON.stringify({
@@ -58,19 +66,24 @@ const GraphiQLClient = () => {
           variables: variables ? JSON.parse(variables) : {},
         }),
       });
-      const data = await res.json();
-      dispatch(setResponse(data));
-      return data;
+      console.log(res, 'res');
+      dispatch(setResponse(res));
+      return res;
     } catch (error) {
-      dispatch(setResponse('Failed to fetch data'));
+      toast.error(error as string);
     }
   };
 
   const sendQuery = () => {
-    executeQuery().then((data) => {
-      const a = Buffer.from(JSON.stringify(data.data), 'utf-8').toString('base64');
-      router.push(`${routes.graphql}/${a}`);
-    });
+    if (isValid) {
+      executeQuery().then((data) => {
+        const buffer = data ? Buffer.from(JSON.stringify(data?.data), 'utf-8').toString('base64') : '';
+        // todo: add necessary parameters
+        router.push(`${routes.graphql}/${buffer}`);
+      });
+    } else {
+      toast.error(toastMessages.errorSendQueryGraphiQL);
+    }
   };
 
   function a11yProps(index: number) {
@@ -81,45 +94,58 @@ const GraphiQLClient = () => {
   }
 
   function edit(value: string) {
-    console.log(value);
     dispatch(setQuery(value));
   }
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<UrlGraphql>({
+    resolver: yupResolver(urlValidationSchema),
+  });
+
   return (
-    <GraphiQLProvider fetcher={fetcher}>
-      <div className="graphiql-container">
-        <section className="p-3">
-          <UrlForm />
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-              <Tab label="Query" {...a11yProps(0)} />
-              <Tab label="Headers" {...a11yProps(1)} />
-              <Tab label="Documentation" {...a11yProps(2)} />
-            </Tabs>
-          </Box>
-          <CustomTabPanel value={value} index={0}>
-            <div className="h-96">
-              <PrettifyButton />
-              <QueryEditor onEdit={edit} />
-            </div>
-            <Accordion className="bg-gray-100 text-orange-600">
-              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1-header">
-                VARIABLES
-              </AccordionSummary>
-              <AccordionDetails className="h-64">
-                <VariablesSection />
-              </AccordionDetails>
-            </Accordion>
-            <Button onClick={() => sendQuery()}>Send</Button>
-          </CustomTabPanel>
-          <CustomTabPanel value={value} index={1}>
-            <GraphiqlHeader></GraphiqlHeader>
-          </CustomTabPanel>
-          <CustomTabPanel index={2} value={value}>
-            <Documentation></Documentation>
-          </CustomTabPanel>
-        </section>
-      </div>
+    <GraphiQLProvider fetcher={gqlFetcher}>
+      <form onSubmit={handleSubmit(sendQuery)}>
+        <div className="graphiql-container">
+          <section className="px-3 pt-3">
+            <UrlSection errors={errors} register={register} />
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                <Tab label="Query" {...a11yProps(0)} />
+                <Tab label="Headers" {...a11yProps(1)} />
+                <Tab label="Documentation" {...a11yProps(2)} />
+              </Tabs>
+            </Box>
+            <CustomTabPanel value={value} index={0}>
+              <div>
+                <div className="sticky top-0 flex justify-end gap-2">
+                  <PrettifyButton />
+                  <Button onClick={() => sendQuery()} type="submit" variant="contained">
+                    Send
+                  </Button>
+                </div>
+                <QueryEditor onEdit={edit} />
+              </div>
+              <Accordion className="sticky bottom-0 bg-gray-100 text-orange-600">
+                <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1-header">
+                  VARIABLES
+                </AccordionSummary>
+                <AccordionDetails>
+                  <VariablesSection />
+                </AccordionDetails>
+              </Accordion>
+            </CustomTabPanel>
+            <CustomTabPanel value={value} index={1}>
+              <GraphiqlHeader></GraphiqlHeader>
+            </CustomTabPanel>
+            <CustomTabPanel index={2} value={value}>
+              <Documentation></Documentation>
+            </CustomTabPanel>
+          </section>
+        </div>
+      </form>
     </GraphiQLProvider>
   );
 };
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
index 4db46ad..38db3bc 100644
--- a/constants/toastMessages.ts
+++ b/constants/toastMessages.ts
@@ -8,4 +8,5 @@ export const toastMessages = {
   userAlreadyExist: 'User already exist. Please sign in.',
   signOutSuccess: 'You are sign out.',
   errorSignOut: 'Failed to sign out. Please try again.',
+  errorSendQueryGraphiQL: 'Url not provided. Please provide endpoint url.',
 };

From 6e90d62baa193f836a03d02803b7252b15f0607b Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Tue, 10 Sep 2024 20:49:39 +0200
Subject: [PATCH 075/157] fix: fix headers in graphiql client

---
 .../GraphiQLClient/Documentation/index.tsx    | 22 ++++------
 components/GraphiQLClient/GraphiqlHeader.tsx  | 10 +++--
 components/GraphiQLClient/index.tsx           | 40 +++++++++++--------
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/components/GraphiQLClient/Documentation/index.tsx b/components/GraphiQLClient/Documentation/index.tsx
index df82eb9..8f905ed 100644
--- a/components/GraphiQLClient/Documentation/index.tsx
+++ b/components/GraphiQLClient/Documentation/index.tsx
@@ -1,27 +1,19 @@
 'use client';
 
-import { selectSdlUrl, selectUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
-import { useAppSelector } from '@/redux/hooks';
-import { DocExplorer, GraphiQLProvider } from '@graphiql/react';
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { DocExplorer, useSchemaContext } from '@graphiql/react';
 import '@graphiql/react/dist/style.css';
-import { useMemo } from 'react';
 
 const Documentation = () => {
-  const url: string = useAppSelector(selectUrl);
-  const sdlUrl: string = useAppSelector(selectSdlUrl);
-  const fetcher = useMemo(() => createGraphiQLFetcher({ url: sdlUrl || url }), [sdlUrl, url]);
+  const schemaContext = useSchemaContext();
 
   return (
     <>
-      {sdlUrl || url ? (
-        <GraphiQLProvider fetcher={fetcher}>
-          <div className="graphiql-container">
-            <DocExplorer />
-          </div>
-        </GraphiQLProvider>
+      {!schemaContext?.fetchError ? (
+        <div className="graphiql-container">
+          <DocExplorer />
+        </div>
       ) : (
-        <div>There is no url provided</div>
+        <div>There is an error</div>
       )}
     </>
   );
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index da5bd05..2357ad4 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -21,7 +21,7 @@ const GraphiqlHeader = () => {
 
   const onFormSubmit = (headers: { headers: GQLHeader[] }) => {
     dispatch(setHeaders(headers.headers));
-    reset({});
+    reset({ headers: headers.headers });
   };
 
   const removeField = (index: number | number[] | undefined) => {
@@ -34,7 +34,7 @@ const GraphiqlHeader = () => {
 
   return (
     <div className="flex flex-col p-4">
-      <form onSubmit={handleSubmit(onFormSubmit)} className="flex flex-col gap-2">
+      <form className="flex flex-col gap-2">
         {fields.map((field, index) => (
           <div key={field.id} className="flex gap-2">
             <TextField label="Header Key" variant="outlined" size="small" {...register(`headers.${index}.key`)} />
@@ -50,7 +50,11 @@ const GraphiqlHeader = () => {
           <IconButton aria-label="add" onClick={addNewField}>
             <AddIcon />
           </IconButton>
-          <Button type="submit" disabled={Object.keys(formState.dirtyFields).length === 0}>
+          <Button
+            type="button"
+            disabled={Object.keys(formState.dirtyFields).length === 0}
+            onClick={handleSubmit(onFormSubmit)}
+          >
             Set Headers
           </Button>
         </div>
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 91516b7..3bf6dc1 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -5,7 +5,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { GQLHeader, selectAll, setQuery } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { setResponse } from '@/redux/features/mainSlice';
 import { useRouter } from 'next/navigation';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
@@ -24,6 +24,7 @@ import UrlSection from '@/components/GraphiQLClient/UrlSection';
 import { toast } from 'sonner';
 import { toastMessages } from '@/constants/toastMessages';
 import { fetcher } from '@/services/response';
+import { a11yProps } from '@/utils/a11yProps';
 
 const GraphiQLClient = () => {
   const { query, variables, url, headers } = useAppSelector(selectAll);
@@ -41,7 +42,6 @@ const GraphiQLClient = () => {
     const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
     const filteredQuery = filteredLines.join('\n');
     const requestHeaders = Object.fromEntries(headers.map((header) => [header.key, header.value]).reverse());
-    console.log(requestHeaders);
 
     const reqHeaders = headers
       ? requestHeaders
@@ -66,7 +66,6 @@ const GraphiQLClient = () => {
           variables: variables ? JSON.parse(variables) : {},
         }),
       });
-      console.log(res, 'res');
       dispatch(setResponse(res));
       return res;
     } catch (error) {
@@ -77,20 +76,22 @@ const GraphiQLClient = () => {
   const sendQuery = () => {
     if (isValid) {
       executeQuery().then((data) => {
-        const buffer = data ? Buffer.from(JSON.stringify(data?.data), 'utf-8').toString('base64') : '';
-        // todo: add necessary parameters
-        router.push(`${routes.graphql}/${buffer}`);
+        const encodedBody = data ? textToBase64(JSON.stringify(data)) : '';
+        const encodedUrl = textToBase64(url);
+        const headersForUrl = stringFromHeaders(headers);
+        router.push(`${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`);
       });
     } else {
       toast.error(toastMessages.errorSendQueryGraphiQL);
     }
   };
 
-  function a11yProps(index: number) {
-    return {
-      id: `qraphql-tab-${index}`,
-      'aria-controls': `qraphql-tabpanel-${index}`,
-    };
+  function textToBase64(text: string) {
+    return Buffer.from(text, 'utf-8').toString('base64');
+  }
+
+  function stringFromHeaders(headers: GQLHeader[]) {
+    return headers.length ? '?' + headers.map((header) => `${header.key}=${header.value}`).join('&') : '';
   }
 
   function edit(value: string) {
@@ -107,10 +108,12 @@ const GraphiQLClient = () => {
 
   return (
     <GraphiQLProvider fetcher={gqlFetcher}>
-      <form onSubmit={handleSubmit(sendQuery)}>
+      <div>
         <div className="graphiql-container">
           <section className="px-3 pt-3">
-            <UrlSection errors={errors} register={register} />
+            <form>
+              <UrlSection errors={errors} register={register} />
+            </form>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
                 <Tab label="Query" {...a11yProps(0)} />
@@ -120,13 +123,16 @@ const GraphiQLClient = () => {
             </Box>
             <CustomTabPanel value={value} index={0}>
               <div>
-                <div className="sticky top-0 flex justify-end gap-2">
+                <div className="sticky top-0 z-10 flex justify-end gap-2">
                   <PrettifyButton />
-                  <Button onClick={() => sendQuery()} type="submit" variant="contained">
+                  <Button onClick={handleSubmit(sendQuery)} type="submit" variant="contained">
                     Send
                   </Button>
                 </div>
-                <QueryEditor onEdit={edit} />
+                <div className="flex">
+                  <QueryEditor onEdit={edit} />
+                  <Documentation></Documentation>
+                </div>
               </div>
               <Accordion className="sticky bottom-0 bg-gray-100 text-orange-600">
                 <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1-header">
@@ -145,7 +151,7 @@ const GraphiQLClient = () => {
             </CustomTabPanel>
           </section>
         </div>
-      </form>
+      </div>
     </GraphiQLProvider>
   );
 };

From 12dce371d6be9fc31b6d542c6e21d169775a5b53 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Wed, 11 Sep 2024 10:36:28 +0200
Subject: [PATCH 076/157] fix: fix warning

---
 components/GraphiQLClient/VariablesSection.tsx |  7 ++-----
 components/GraphiQLClient/index.tsx            | 11 +++++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/GraphiQLClient/VariablesSection.tsx b/components/GraphiQLClient/VariablesSection.tsx
index 95c9eaf..337dd56 100644
--- a/components/GraphiQLClient/VariablesSection.tsx
+++ b/components/GraphiQLClient/VariablesSection.tsx
@@ -7,13 +7,10 @@ function VariablesSection() {
   const editor = useVariableEditor();
   const state = useVariablesEditorState();
 
-  // todo: use fetchError for documentation
-  // const schemaContext = useSchemaContext();
-
   if (editor && state) {
-    dispatch(setVariables(state[0]));
+    setTimeout(() => dispatch(setVariables(state[0])));
   }
-  return <VariableEditor></VariableEditor>;
+  return <VariableEditor />;
 }
 
 export default VariablesSection;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 3bf6dc1..4c83936 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -37,10 +37,16 @@ const GraphiQLClient = () => {
     setValue(newValue);
   };
 
-  const executeQuery = async () => {
+  function getFilteredQuery(query: string): string {
     const lines = query.split('\n');
     const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
-    const filteredQuery = filteredLines.join('\n');
+    return filteredLines.join('\n');
+  }
+
+  const executeQuery = async () => {
+    // const lines = query.split('\n');
+    // const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
+    const filteredQuery = getFilteredQuery(query);
     const requestHeaders = Object.fromEntries(headers.map((header) => [header.key, header.value]).reverse());
 
     const reqHeaders = headers
@@ -76,6 +82,7 @@ const GraphiQLClient = () => {
   const sendQuery = () => {
     if (isValid) {
       executeQuery().then((data) => {
+        console.log(getFilteredQuery(query));
         const encodedBody = data ? textToBase64(JSON.stringify(data)) : '';
         const encodedUrl = textToBase64(url);
         const headersForUrl = stringFromHeaders(headers);

From 46536e690cd517efd5098e9f18051bc9301fce63 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Wed, 11 Sep 2024 12:20:22 +0200
Subject: [PATCH 077/157] feat: update url on focus out from query editor

---
 .../GraphiQLClient/Documentation/index.tsx    |  2 +-
 components/GraphiQLClient/PrettifyButton.tsx  |  6 ++-
 components/GraphiQLClient/index.tsx           | 41 +++++++------------
 .../features/graphiqlClient/graphiqlSlice.ts  |  8 +---
 utils/coderBase64.ts                          |  7 ++++
 utils/getiFlteredQuery.ts                     |  5 +++
 6 files changed, 34 insertions(+), 35 deletions(-)
 create mode 100644 utils/coderBase64.ts
 create mode 100644 utils/getiFlteredQuery.ts

diff --git a/components/GraphiQLClient/Documentation/index.tsx b/components/GraphiQLClient/Documentation/index.tsx
index 8f905ed..bd93436 100644
--- a/components/GraphiQLClient/Documentation/index.tsx
+++ b/components/GraphiQLClient/Documentation/index.tsx
@@ -13,7 +13,7 @@ const Documentation = () => {
           <DocExplorer />
         </div>
       ) : (
-        <div>There is an error</div>
+        ''
       )}
     </>
   );
diff --git a/components/GraphiQLClient/PrettifyButton.tsx b/components/GraphiQLClient/PrettifyButton.tsx
index edb3b56..fffb707 100644
--- a/components/GraphiQLClient/PrettifyButton.tsx
+++ b/components/GraphiQLClient/PrettifyButton.tsx
@@ -11,7 +11,11 @@ function PrettifyButton() {
     }
   };
 
-  return <Button onClick={handlePrettifyClick}>Prettify query</Button>;
+  return (
+    <Button onClick={handlePrettifyClick} variant="outlined">
+      Prettify query
+    </Button>
+  );
 }
 
 export default PrettifyButton;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 4c83936..62157a5 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -25,6 +25,8 @@ import { toast } from 'sonner';
 import { toastMessages } from '@/constants/toastMessages';
 import { fetcher } from '@/services/response';
 import { a11yProps } from '@/utils/a11yProps';
+import { getFilteredQuery } from '@/utils/getiFlteredQuery';
+import { textToBase64 } from '@/utils/coderBase64';
 
 const GraphiQLClient = () => {
   const { query, variables, url, headers } = useAppSelector(selectAll);
@@ -37,15 +39,7 @@ const GraphiQLClient = () => {
     setValue(newValue);
   };
 
-  function getFilteredQuery(query: string): string {
-    const lines = query.split('\n');
-    const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
-    return filteredLines.join('\n');
-  }
-
   const executeQuery = async () => {
-    // const lines = query.split('\n');
-    // const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
     const filteredQuery = getFilteredQuery(query);
     const requestHeaders = Object.fromEntries(headers.map((header) => [header.key, header.value]).reverse());
 
@@ -81,20 +75,17 @@ const GraphiQLClient = () => {
 
   const sendQuery = () => {
     if (isValid) {
-      executeQuery().then((data) => {
-        console.log(getFilteredQuery(query));
-        const encodedBody = data ? textToBase64(JSON.stringify(data)) : '';
-        const encodedUrl = textToBase64(url);
-        const headersForUrl = stringFromHeaders(headers);
-        router.push(`${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`);
-      });
+      void executeQuery();
     } else {
       toast.error(toastMessages.errorSendQueryGraphiQL);
     }
   };
 
-  function textToBase64(text: string) {
-    return Buffer.from(text, 'utf-8').toString('base64');
+  function setUrl() {
+    const encodedBody = textToBase64(JSON.stringify(getFilteredQuery(query)));
+    const encodedUrl = textToBase64(url);
+    const headersForUrl = stringFromHeaders(headers);
+    router.push(`${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`);
   }
 
   function stringFromHeaders(headers: GQLHeader[]) {
@@ -121,24 +112,23 @@ const GraphiQLClient = () => {
             <form>
               <UrlSection errors={errors} register={register} />
             </form>
-            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Box>
               <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-                <Tab label="Query" {...a11yProps(0)} />
+                <Tab label="Query" {...a11yProps(0)} className="h-12" />
                 <Tab label="Headers" {...a11yProps(1)} />
-                <Tab label="Documentation" {...a11yProps(2)} />
               </Tabs>
             </Box>
             <CustomTabPanel value={value} index={0}>
               <div>
-                <div className="sticky top-0 z-10 flex justify-end gap-2">
+                <div className="sticky top-0 z-10 flex justify-center gap-2">
                   <PrettifyButton />
                   <Button onClick={handleSubmit(sendQuery)} type="submit" variant="contained">
                     Send
                   </Button>
                 </div>
-                <div className="flex">
+                <div className="flex" onBlur={setUrl}>
                   <QueryEditor onEdit={edit} />
-                  <Documentation></Documentation>
+                  <Documentation />
                 </div>
               </div>
               <Accordion className="sticky bottom-0 bg-gray-100 text-orange-600">
@@ -151,10 +141,7 @@ const GraphiQLClient = () => {
               </Accordion>
             </CustomTabPanel>
             <CustomTabPanel value={value} index={1}>
-              <GraphiqlHeader></GraphiqlHeader>
-            </CustomTabPanel>
-            <CustomTabPanel index={2} value={value}>
-              <Documentation></Documentation>
+              <GraphiqlHeader />
             </CustomTabPanel>
           </section>
         </div>
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlClient/graphiqlSlice.ts
index 009d840..e728395 100644
--- a/redux/features/graphiqlClient/graphiqlSlice.ts
+++ b/redux/features/graphiqlClient/graphiqlSlice.ts
@@ -42,9 +42,6 @@ export const graphiqlSlice = createSlice({
     setSdlUrl: create.reducer((state, action: PayloadAction<string>) => {
       state.sdlUrl = action.payload;
     }),
-    setResponse: create.reducer((state, action: PayloadAction<string>) => {
-      state.response = action.payload;
-    }),
   }),
 
   selectors: {
@@ -54,10 +51,9 @@ export const graphiqlSlice = createSlice({
     selectVariables: (graphiql) => graphiql.variables,
     selectUrl: (graphiql) => graphiql.url,
     selectSdlUrl: (graphiql) => graphiql.sdlUrl,
-    selectResponse: (graphiql) => graphiql.response,
   },
 });
 
-export const { setQuery, setVariables, setHeaders, setUrl, setSdlUrl, setResponse } = graphiqlSlice.actions;
+export const { setQuery, setVariables, setHeaders, setUrl, setSdlUrl } = graphiqlSlice.actions;
 
-export const { selectAll, selectHeaders, selectUrl, selectSdlUrl } = graphiqlSlice.selectors;
+export const { selectAll, selectHeaders } = graphiqlSlice.selectors;
diff --git a/utils/coderBase64.ts b/utils/coderBase64.ts
new file mode 100644
index 0000000..3b69753
--- /dev/null
+++ b/utils/coderBase64.ts
@@ -0,0 +1,7 @@
+export function textToBase64(text: string) {
+  return Buffer.from(text, 'utf-8').toString('base64');
+}
+
+export function base64ToText(text: string) {
+  return Buffer.from(text, 'base64').toString('utf-8');
+}
diff --git a/utils/getiFlteredQuery.ts b/utils/getiFlteredQuery.ts
new file mode 100644
index 0000000..2b1b766
--- /dev/null
+++ b/utils/getiFlteredQuery.ts
@@ -0,0 +1,5 @@
+export function getFilteredQuery(query: string): string {
+  const lines = query.split('\n');
+  const filteredLines = lines.filter((line) => !line.trim().startsWith('#'));
+  return filteredLines.join('\n');
+}

From 427ad0fda4504b1cb7e5152e6030aa92358b5225 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Thu, 12 Sep 2024 10:15:03 +0200
Subject: [PATCH 078/157] fix: set api url query and headers from browser url

---
 app/GRAPHQL/[[...endpoint]]/page.tsx         | 40 ++++++++------------
 components/GraphiQLClient/GraphiqlHeader.tsx | 16 ++++++--
 components/GraphiQLClient/PrettifyButton.tsx |  8 +++-
 components/GraphiQLClient/UrlSection.tsx     |  5 ++-
 components/GraphiQLClient/index.tsx          | 35 +++++++++--------
 constants/toastMessages.ts                   |  1 +
 utils/coderBase64.ts                         |  4 +-
 utils/setBrowserUrl.ts                       | 15 ++++++++
 8 files changed, 73 insertions(+), 51 deletions(-)
 create mode 100644 utils/setBrowserUrl.ts

diff --git a/app/GRAPHQL/[[...endpoint]]/page.tsx b/app/GRAPHQL/[[...endpoint]]/page.tsx
index 26c8e31..1167be8 100644
--- a/app/GRAPHQL/[[...endpoint]]/page.tsx
+++ b/app/GRAPHQL/[[...endpoint]]/page.tsx
@@ -1,36 +1,28 @@
 import ResponseSection from '@/components/RestClient/Response';
 import GraphiQLClient from '@/components/GraphiQLClient';
 import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
+import { base64ToText } from '@/utils/coderBase64';
 
-// interface Props {
-//   params?: {
-//     endpoint: string[];
-//   };
-//   searchParams?: {
-//     key: string;
-//     value: string;
-//   };
-// }
-//
-// function GraphQL({ params }: Props) {
-//   const responseData = params?.endpoint;
-//   const data = responseData ? Buffer.from(responseData[0], 'base64').toString('utf-8') : '';
-//
-//   return (
-//     <main className="flex h-[calc(100vh-8.5rem)] flex-col p-3">
-//
-//       <GraphiQLClient></GraphiQLClient>
-//       <ResponseSection data={data} />
-//     </main>
-//   );
-// }
+interface Props {
+  params?: {
+    endpoint: string[];
+  };
+  searchParams?: Record<string, string>;
+}
+
+function GraphQL({ params, searchParams }: Props) {
+  const responseData = params?.endpoint;
+  const url = Array.isArray(responseData) && responseData[0] ? base64ToText(responseData[0]?.replace('%3D', '=')) : '';
+  const query =
+    Array.isArray(responseData) && responseData[1]
+      ? base64ToText(responseData[1]?.replace('%3D', '='))?.replace(/\\n/g, '\n')
+      : '';
 
-function GraphQL() {
   return (
     <main className="gql flex h-[calc(100vh-6rem)] flex-col p-3">
       <ResizableGroup autoSaveId="graphql" direction="vertical">
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15} id="gql-panel">
-          <GraphiQLClient />
+          <GraphiQLClient urlinput={url} queryinput={query} headersinput={searchParams} />
         </ResizablePanel>
         <ResizableHandle direction="vertical" />
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index 2357ad4..ff1f2c9 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -3,13 +3,20 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { GQLHeader, selectHeaders, setHeaders } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { GQLHeader, selectAll, setHeaders } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { setBrowserUrl } from '@/utils/setBrowserUrl';
+import { useRouter } from 'next/navigation';
 
-const GraphiqlHeader = () => {
-  const headers = useAppSelector(selectHeaders);
+interface GraphiqlHeaderProps {
+  headersinput: Record<string, string>;
+}
+
+const GraphiqlHeader = ({ headersinput }: GraphiqlHeaderProps) => {
+  const { query, url, headers } = useAppSelector(selectAll);
+  const router = useRouter();
   const { register, handleSubmit, formState, reset, control } = useForm({
     defaultValues: {
-      headers,
+      headers: Object.entries(headersinput).map(([key, value]) => ({ key, value })) || headers,
     },
   });
 
@@ -21,6 +28,7 @@ const GraphiqlHeader = () => {
 
   const onFormSubmit = (headers: { headers: GQLHeader[] }) => {
     dispatch(setHeaders(headers.headers));
+    void router.push(setBrowserUrl(url, query, headers.headers));
     reset({ headers: headers.headers });
   };
 
diff --git a/components/GraphiQLClient/PrettifyButton.tsx b/components/GraphiQLClient/PrettifyButton.tsx
index fffb707..89e88a7 100644
--- a/components/GraphiQLClient/PrettifyButton.tsx
+++ b/components/GraphiQLClient/PrettifyButton.tsx
@@ -1,5 +1,7 @@
 import { usePrettifyEditors, useQueryEditor } from '@graphiql/react';
 import { Button } from '@mui/material';
+import { toast } from 'sonner';
+import { toastMessages } from '@/constants/toastMessages';
 
 function PrettifyButton() {
   const editor = useQueryEditor();
@@ -7,7 +9,11 @@ function PrettifyButton() {
 
   const handlePrettifyClick = () => {
     if (editor) {
-      prettifyEditors();
+      try {
+        prettifyEditors();
+      } catch {
+        toast.error(toastMessages.prettifyError);
+      }
     }
   };
 
diff --git a/components/GraphiQLClient/UrlSection.tsx b/components/GraphiQLClient/UrlSection.tsx
index b347576..305a50d 100644
--- a/components/GraphiQLClient/UrlSection.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -10,9 +10,10 @@ import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
 interface UrlFormInterface {
   errors: FormState<UrlGraphql>['errors'];
   register: UseFormRegister<UrlGraphql>;
+  urlinput?: string;
 }
 
-const UrlSection = ({ register, errors }: UrlFormInterface) => {
+const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
   const { url, sdlUrl } = useAppSelector(selectAll);
   const dispatch = useAppDispatch();
 
@@ -28,9 +29,9 @@ const UrlSection = ({ register, errors }: UrlFormInterface) => {
         id="endpoint"
         label="Endpoint"
         variant="outlined"
-        value={url}
         size="small"
         {...register('endpoint', {
+          value: url || urlinput,
           onChange: changeUrl,
         })}
       />
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 62157a5..8beb2be 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -5,7 +5,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from
 import { Box } from '@mui/system';
 import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { GQLHeader, selectAll, setQuery } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { setResponse } from '@/redux/features/mainSlice';
 import { useRouter } from 'next/navigation';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
@@ -15,7 +15,6 @@ import Documentation from '@/components/GraphiQLClient/Documentation';
 import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
 import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { routes } from '@/constants/routes';
 import { useForm } from 'react-hook-form';
 import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -26,14 +25,21 @@ import { toastMessages } from '@/constants/toastMessages';
 import { fetcher } from '@/services/response';
 import { a11yProps } from '@/utils/a11yProps';
 import { getFilteredQuery } from '@/utils/getiFlteredQuery';
-import { textToBase64 } from '@/utils/coderBase64';
+import { setBrowserUrl } from '@/utils/setBrowserUrl';
 
-const GraphiQLClient = () => {
+interface GraphiQLClientProps {
+  queryinput?: string;
+  headersinput: Record<string, string>;
+  urlinput?: string;
+}
+
+const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientProps) => {
   const { query, variables, url, headers } = useAppSelector(selectAll);
   const gqlFetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
   const [value, setValue] = React.useState(0);
   const router = useRouter();
   const dispatch = useAppDispatch();
+  setTimeout(() => dispatch(setUrl(urlinput || url)));
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -81,16 +87,9 @@ const GraphiQLClient = () => {
     }
   };
 
-  function setUrl() {
-    const encodedBody = textToBase64(JSON.stringify(getFilteredQuery(query)));
-    const encodedUrl = textToBase64(url);
-    const headersForUrl = stringFromHeaders(headers);
-    router.push(`${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`);
-  }
-
-  function stringFromHeaders(headers: GQLHeader[]) {
-    return headers.length ? '?' + headers.map((header) => `${header.key}=${header.value}`).join('&') : '';
-  }
+  const updateUrl = () => {
+    router.push(setBrowserUrl(url, query, headers));
+  };
 
   function edit(value: string) {
     dispatch(setQuery(value));
@@ -105,12 +104,12 @@ const GraphiQLClient = () => {
   });
 
   return (
-    <GraphiQLProvider fetcher={gqlFetcher}>
+    <GraphiQLProvider fetcher={gqlFetcher} query={!query ? (queryinput ? queryinput.slice(1, -1) : '') : undefined}>
       <div>
         <div className="graphiql-container">
           <section className="px-3 pt-3">
             <form>
-              <UrlSection errors={errors} register={register} />
+              <UrlSection urlinput={urlinput} errors={errors} register={register} />
             </form>
             <Box>
               <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
@@ -126,7 +125,7 @@ const GraphiQLClient = () => {
                     Send
                   </Button>
                 </div>
-                <div className="flex" onBlur={setUrl}>
+                <div className="flex" onBlur={updateUrl}>
                   <QueryEditor onEdit={edit} />
                   <Documentation />
                 </div>
@@ -141,7 +140,7 @@ const GraphiQLClient = () => {
               </Accordion>
             </CustomTabPanel>
             <CustomTabPanel value={value} index={1}>
-              <GraphiqlHeader />
+              <GraphiqlHeader headersinput={headersinput} />
             </CustomTabPanel>
           </section>
         </div>
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
index 38db3bc..2fa04db 100644
--- a/constants/toastMessages.ts
+++ b/constants/toastMessages.ts
@@ -9,4 +9,5 @@ export const toastMessages = {
   signOutSuccess: 'You are sign out.',
   errorSignOut: 'Failed to sign out. Please try again.',
   errorSendQueryGraphiQL: 'Url not provided. Please provide endpoint url.',
+  prettifyError: 'Failed to prettify query.',
 };
diff --git a/utils/coderBase64.ts b/utils/coderBase64.ts
index 3b69753..75ab043 100644
--- a/utils/coderBase64.ts
+++ b/utils/coderBase64.ts
@@ -1,7 +1,7 @@
 export function textToBase64(text: string) {
-  return Buffer.from(text, 'utf-8').toString('base64');
+  return Buffer.from(text).toString('base64');
 }
 
 export function base64ToText(text: string) {
-  return Buffer.from(text, 'base64').toString('utf-8');
+  return Buffer.from(text, 'base64').toString();
 }
diff --git a/utils/setBrowserUrl.ts b/utils/setBrowserUrl.ts
new file mode 100644
index 0000000..d777f71
--- /dev/null
+++ b/utils/setBrowserUrl.ts
@@ -0,0 +1,15 @@
+import { textToBase64 } from '@/utils/coderBase64';
+import { getFilteredQuery } from '@/utils/getiFlteredQuery';
+import { routes } from '@/constants/routes';
+import { GQLHeader } from '@/redux/features/graphiqlClient/graphiqlSlice';
+
+export function stringFromHeaders(headers: GQLHeader[]) {
+  return headers.length ? '?' + headers.map((header) => `${header.key}=${header.value}`).join('&') : '';
+}
+
+export function setBrowserUrl(url: string, query: string, headers: GQLHeader[]) {
+  const encodedBody = textToBase64(JSON.stringify(getFilteredQuery(query)));
+  const encodedUrl = textToBase64(url);
+  const headersForUrl = stringFromHeaders(headers);
+  return `${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`;
+}

From 13ad1e036ece7a652318d0913448e26e77e1abac Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Thu, 12 Sep 2024 10:41:16 +0200
Subject: [PATCH 079/157] fix: fix empty headers

---
 app/GRAPHQL/[[...endpoint]]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/GRAPHQL/[[...endpoint]]/page.tsx b/app/GRAPHQL/[[...endpoint]]/page.tsx
index 1167be8..39053cf 100644
--- a/app/GRAPHQL/[[...endpoint]]/page.tsx
+++ b/app/GRAPHQL/[[...endpoint]]/page.tsx
@@ -22,7 +22,7 @@ function GraphQL({ params, searchParams }: Props) {
     <main className="gql flex h-[calc(100vh-6rem)] flex-col p-3">
       <ResizableGroup autoSaveId="graphql" direction="vertical">
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15} id="gql-panel">
-          <GraphiQLClient urlinput={url} queryinput={query} headersinput={searchParams} />
+          <GraphiQLClient urlinput={url} queryinput={query} headersinput={searchParams || {}} />
         </ResizablePanel>
         <ResizableHandle direction="vertical" />
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>

From 19630873abe96175f7db177c1fd5aecc8283735e Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:12:34 +0400
Subject: [PATCH 080/157] style: some improvments, adding dynamic tailwind
 colors, mui theme

---
 app/[...rest]/page.tsx      |  2 +-
 app/globals.css             | 14 ++++++++++++++
 app/layout.tsx              | 26 +++++++++++++++++---------
 components/Footer/index.tsx |  2 +-
 components/Header/index.tsx |  2 +-
 constants/colors.ts         | 19 +++++++++++++++++++
 tailwind.config.ts          |  2 ++
 theme.ts                    | 10 ++++++++++
 8 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 constants/colors.ts
 create mode 100644 theme.ts

diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
index ab28657..47418e7 100644
--- a/app/[...rest]/page.tsx
+++ b/app/[...rest]/page.tsx
@@ -10,7 +10,7 @@ export default function RESTfull() {
           <RestForm />
         </ResizablePanel>
         <ResizableHandle direction="vertical" />
-        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+        <ResizablePanel defaultSizePercentage={50} minSizePixels={32}>
           <ResponseSection />
         </ResizablePanel>
       </ResizableGroup>
diff --git a/app/globals.css b/app/globals.css
index b5c61c9..300caf9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .padding-x {
+    @apply px-3 sm:px-4 md:px-8 lg:px-12;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+* {
+  scrollbar-width: thin;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 6c388bf..6ed92ca 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,9 +7,15 @@ import PrivateRoute from '@/components/PrivateRoute';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import CssBaseline from '@mui/material/CssBaseline';
-import { StyledEngineProvider } from '@mui/material/styles';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import theme from '@/theme';
 import './globals.css';
-const inter = Inter({ subsets: ['latin'] });
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+});
 
 export const metadata: Metadata = {
   title: 'REST GraphQL Client',
@@ -23,15 +29,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className}`}>
+      <body className={`${inter.variable}`}>
         <StoreProvider>
-          <CssBaseline />
           <AppRouterCacheProvider options={{ key: 'css' }}>
-            <StyledEngineProvider injectFirst>
-              <Header />
-              <PrivateRoute>{children}</PrivateRoute>
-              <Footer />
-            </StyledEngineProvider>
+            <ThemeProvider theme={theme}>
+              <CssBaseline />
+              <StyledEngineProvider injectFirst>
+                <Header />
+                <PrivateRoute>{children}</PrivateRoute>
+                <Footer />
+              </StyledEngineProvider>
+            </ThemeProvider>
             <Toaster expand={false} richColors closeButton duration={3000} className="bottom-24" />
           </AppRouterCacheProvider>
         </StoreProvider>
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index d0d9a57..a49ecc2 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import course_logo from '@/public/assets/rss-logo.svg';
 function Footer() {
   return (
-    <footer className="flex h-10 items-center justify-between bg-blue-600 text-sm text-white">
+    <footer className="padding-x flex h-10 items-center justify-between bg-blue-600 text-sm text-white">
       <ul className="flex gap-2">
         <li>
           <Link href="https://github.com/shd-mn" target="_blank">
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index aaed747..ffc2fdf 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -21,7 +21,7 @@ function Header() {
     }
   };
   return (
-    <header className="flex h-14 items-center justify-between bg-blue-600 text-white">
+    <header className="padding-x flex h-14 items-center justify-between bg-blue-600 text-white">
       <div>
         <Link href={routes.home}>Home</Link>
       </div>
diff --git a/constants/colors.ts b/constants/colors.ts
new file mode 100644
index 0000000..d4b8248
--- /dev/null
+++ b/constants/colors.ts
@@ -0,0 +1,19 @@
+export const dynamicColors = [
+  'bg-blue-700',
+  'text-blue-200',
+  'bg-green-700',
+  'text-green-200',
+  'bg-yellow-700',
+  'text-yellow-200',
+  'bg-red-700',
+  'text-red-200',
+  'bg-gray-700',
+  'text-gray-200',
+  'text-green-500',
+  'text-yellow-500',
+  'text-blue-500',
+  'text-purple-500',
+  'text-pink-500',
+  'text-red-500',
+  'text-green-700',
+];
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 122a46f..e7719c1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,9 @@
 import type { Config } from 'tailwindcss';
+import { dynamicColors } from './constants/colors';
 
 const config: Config = {
   important: true,
+  safelist: dynamicColors,
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
diff --git a/theme.ts b/theme.ts
new file mode 100644
index 0000000..e883a97
--- /dev/null
+++ b/theme.ts
@@ -0,0 +1,10 @@
+'use client';
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  typography: {
+    fontFamily: 'var(--font-inter)',
+  },
+});
+
+export default theme;

From 8ab0766f8952a342303e25e208ac7be03a029364 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Thu, 12 Sep 2024 11:13:41 +0200
Subject: [PATCH 081/157] fix: fix titles in forms

---
 app/signin/page.tsx             |  1 -
 app/signup/page.tsx             |  1 -
 components/FormSignIn/index.tsx | 15 ++++++++-------
 components/FormSignUp/index.tsx | 15 ++++++++-------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/signin/page.tsx b/app/signin/page.tsx
index a949329..7774d40 100644
--- a/app/signin/page.tsx
+++ b/app/signin/page.tsx
@@ -3,7 +3,6 @@ import FormSignIn from '@/components/FormSignIn';
 function SignIn() {
   return (
     <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
-      Login
       <FormSignIn />
     </main>
   );
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index 7859418..e8af032 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -3,7 +3,6 @@ import FormSignUp from '@/components/FormSignUp';
 function SignUp() {
   return (
     <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
-      Sign Up
       <FormSignUp />
     </main>
   );
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 3614c2e..50e9f1f 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -66,10 +66,17 @@ function FormSignIn() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <h1 className="text-3xl font-bold">Welcome Back</h1>
+      <div className="flex items-center gap-1">
+        <p className="m-0">Don&apos;t have an account yet?</p>
+        <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
+          Sign up here
+        </Link>
+      </div>
       <TextField
         error={!!errors.login}
         id="login"
-        label="Login"
+        label="Email"
         helperText={errors.login ? errors.login.message : ' '}
         {...register('login')}
       />
@@ -99,12 +106,6 @@ function FormSignIn() {
       <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
         Sign in
       </Button>
-      <div className="flex flex-col items-center">
-        <p className="m-0">If you don&apos;t have an account, please</p>
-        <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
-          Sign up
-        </Link>
-      </div>
     </form>
   );
 }
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 1041a55..78af0f9 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -66,6 +66,13 @@ function FormSignUp() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
+      <h1 className="text-3xl font-bold">Create Account</h1>
+      <div className="flex items-center gap-1">
+        <p className="m-0">Already have an account?</p>
+        <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
+          Sign in here
+        </Link>
+      </div>
       <TextField
         error={!!errors.name}
         id="name"
@@ -76,7 +83,7 @@ function FormSignUp() {
       <TextField
         error={!!errors.login}
         id="login"
-        label="Login"
+        label="Email"
         helperText={errors.login ? errors.login.message : ' '}
         {...register('login')}
       />
@@ -129,12 +136,6 @@ function FormSignUp() {
       <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
         Sign up
       </Button>
-      <div className="flex flex-col items-center">
-        <p className="m-0">If you already have an account, please</p>
-        <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
-          Sign in
-        </Link>
-      </div>
     </form>
   );
 }

From 8fc99cfbecc91de5c1141e5c2195f807682e6d62 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:15:59 +0400
Subject: [PATCH 082/157] feat: add ErrorState comp, show failed fetch error

---
 components/RestClient/Response/ErrorState.tsx | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 components/RestClient/Response/ErrorState.tsx

diff --git a/components/RestClient/Response/ErrorState.tsx b/components/RestClient/Response/ErrorState.tsx
new file mode 100644
index 0000000..e318567
--- /dev/null
+++ b/components/RestClient/Response/ErrorState.tsx
@@ -0,0 +1,40 @@
+import { Box, Typography } from '@mui/material';
+import Image from 'next/image';
+import failedFetch from '@/public/assets/images/failed-fetch.webp';
+import { useAppSelector } from '@/redux/hooks';
+import { selectResponse } from '@/redux/features/mainSlice';
+
+function ErrorState() {
+  const { statusText } = useAppSelector(selectResponse);
+  return (
+    <Box component="section" className="flex h-full flex-col px-3 sm:px-4 md:px-8 lg:px-12">
+      <Typography variant="caption" component="h5" className="bg-transparent py-2 text-sm font-medium">
+        Response
+      </Typography>
+      <Box component="div" className="flex h-full flex-col items-center justify-center">
+        <Box component="div" className="flex flex-col items-center overflow-hidden">
+          <Image
+            src={failedFetch}
+            alt="Could not send request"
+            width={140}
+            height={140}
+            className="mb-3 h-auto w-auto object-contain"
+            priority
+          />
+          <Typography variant="caption" component="p" className="mb-2 text-center text-sm">
+            Could not send request
+          </Typography>
+
+          <Typography
+            variant="body1"
+            component="p"
+            className="rounded-full bg-red-500 px-2 py-1 text-center text-sm font-medium text-white"
+          >
+            {statusText}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+export default ErrorState;

From b108df8061c157eac548252f442fc55c85c79d3d Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:27:21 +0400
Subject: [PATCH 083/157] feat: add loading state to main slice and rest form

---
 components/RestClient/Form/index.tsx | 29 ++++++++++++++++++++--------
 redux/features/mainSlice.ts          | 25 ++++++++++++++----------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/RestClient/Form/index.tsx b/components/RestClient/Form/index.tsx
index 13e7297..802cc65 100644
--- a/components/RestClient/Form/index.tsx
+++ b/components/RestClient/Form/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import InputTable from '@/components/RestClient/Table/InputTable';
 import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
 import Editor from '@monaco-editor/react';
@@ -13,9 +13,10 @@ import type { Method, Param, RequestType } from '@/types';
 import { fetcher } from '@/services/response';
 import { generateUrl } from '@/utils/generateUrl';
 import { nanoid } from '@reduxjs/toolkit';
-import { setResponse } from '@/redux/features/mainSlice';
+import { setResponse, setIsLoading } from '@/redux/features/mainSlice';
 import { a11yProps } from '@/utils/a11yProps';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { toast } from 'sonner';
 
 export type Inputs = {
   method: Method;
@@ -48,9 +49,10 @@ function RestForm() {
     control,
     handleSubmit,
     watch,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = form;
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    dispatch(setIsLoading(true));
     const { url, method, params, headers, body, variables } = data;
     const id = nanoid();
     const date = `${new Date().toISOString()}`;
@@ -73,8 +75,8 @@ function RestForm() {
       headers: fetchHeaders,
       body: fetchBody,
     });
-
     dispatch(setResponse(res));
+    dispatch(setIsLoading(false));
 
     const generatedUrl = generateUrl(newRequest);
     router.push(`${generatedUrl}`);
@@ -84,9 +86,14 @@ function RestForm() {
     setActiveTab(newValue);
   };
 
+  useEffect(() => {
+    if (errors.url?.type === 'required') toast.error('Url not provided. Please provide endpoint url.');
+  }, [errors.url]);
+
   const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
+
   return (
-    <section className="h-full flex-1 p-3">
+    <section className="padding-x h-full flex-1 pt-3">
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Box component="div" className="mb-2 flex w-full items-start justify-between">
@@ -95,7 +102,6 @@ function RestForm() {
                 <Select
                   {...field}
                   className={`min-w-28 rounded-e-none font-medium ${selectedColor ? selectedColor : 'text-green-500'}`}
-                  defaultValue="GET"
                   autoWidth
                   size="small"
                 >
@@ -120,7 +126,7 @@ function RestForm() {
               />
             </FormControl>
 
-            <Button variant="contained" className="ml-2 h-10" type="submit">
+            <Button disabled={isSubmitting} variant="contained" className="ml-2 h-10" type="submit">
               SEND
             </Button>
           </Box>
@@ -136,6 +142,7 @@ function RestForm() {
             <Tab label="Params" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
             <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
             <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
+            <Tab label="Variables" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(3)} />
           </Tabs>
 
           <CustomTabPanel value={activeTab} index={0}>
@@ -153,13 +160,14 @@ function RestForm() {
               render={({ field }) => (
                 <Editor
                   {...field}
-                  height="300px"
                   defaultLanguage="json"
                   theme="vs-dark"
                   options={{
                     minimap: {
                       enabled: false,
                     },
+                    formatOnPaste: true,
+                    formatOnType: true,
                     lineNumbersMinChars: 4,
                     wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
                     wordWrap: 'on',
@@ -175,6 +183,11 @@ function RestForm() {
             />
             Body
           </CustomTabPanel>
+
+          <CustomTabPanel value={activeTab} index={3}>
+            <Typography className="text-sm">Variables</Typography>
+            <InputTable inputName="variables" />
+          </CustomTabPanel>
         </form>
       </FormProvider>
     </section>
diff --git a/redux/features/mainSlice.ts b/redux/features/mainSlice.ts
index 979e1bc..16f96d0 100644
--- a/redux/features/mainSlice.ts
+++ b/redux/features/mainSlice.ts
@@ -3,6 +3,7 @@ import type { ResponseType } from '@/types';
 
 export interface MainSliceState {
   response: ResponseType;
+  isLoading: boolean;
 }
 
 const initialState: MainSliceState = {
@@ -14,25 +15,29 @@ const initialState: MainSliceState = {
     success: false,
     responseTime: 0,
   },
+  isLoading: false,
 };
 
 export const mainSlice = createSlice({
   name: 'main',
   initialState,
-  reducers: (create) => ({
-    setResponse: create.reducer((state, action: PayloadAction<ResponseType>) => {
+  reducers: {
+    setResponse: (state, action: PayloadAction<ResponseType>) => {
       state.response = action.payload;
-    }),
-    resetResponse: create.reducer((state) => {
+    },
+    resetResponse: (state) => {
       state.response = initialState.response;
-    }),
-  }),
+    },
+    setIsLoading: (state, action: PayloadAction<boolean>) => {
+      state.isLoading = action.payload;
+    },
+  },
 
   selectors: {
-    selectResponse: (main) => main.response,
+    selectResponse: (main: MainSliceState) => main.response,
+    selectAllMainState: (main: MainSliceState) => main,
   },
 });
 
-export const { setResponse, resetResponse } = mainSlice.actions;
-
-export const { selectResponse } = mainSlice.selectors;
+export const { setResponse, resetResponse, setIsLoading } = mainSlice.actions;
+export const { selectResponse, selectAllMainState } = mainSlice.selectors;

From 7e016e92cb79c51c80b48f2194f1189b8f99fc3c Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:28:52 +0400
Subject: [PATCH 084/157] refactor: add details and make responsive ErrorState

---
 components/RestClient/Response/EmptyState.tsx |  32 ++++--
 public/assets/images/failed-fetch.webp        | Bin 0 -> 5574 bytes
 public/assets/svg/illustration-hit-send.svg   | 104 ++++++++++++++++++
 3 files changed, 125 insertions(+), 11 deletions(-)
 create mode 100644 public/assets/images/failed-fetch.webp
 create mode 100644 public/assets/svg/illustration-hit-send.svg

diff --git a/components/RestClient/Response/EmptyState.tsx b/components/RestClient/Response/EmptyState.tsx
index 12e9b17..d07fdcd 100644
--- a/components/RestClient/Response/EmptyState.tsx
+++ b/components/RestClient/Response/EmptyState.tsx
@@ -1,19 +1,29 @@
 import { Box, Typography } from '@mui/material';
+import Image from 'next/image';
+import hitSend from '@/public/assets/svg/illustration-hit-send.svg';
 
 function EmptyState() {
   return (
-    <>
-      <Box component="header" className="flex items-center justify-between py-1 text-sm">
-        <Typography variant="caption" component="h5" className="text-sm font-medium">
-          Response
-        </Typography>
+    <Box component="section" className="flex h-full flex-col px-3 sm:px-4 md:px-8 lg:px-12">
+      <Typography variant="caption" component="h5" className="bg-transparent py-2 text-sm font-medium">
+        Response
+      </Typography>
+      <Box component="div" className="flex h-full flex-col items-center justify-center">
+        <Box component="div" className="overflow-hidden">
+          <Image
+            src={hitSend}
+            alt="hit send response"
+            width={140}
+            height={140}
+            className="mb-3 h-auto w-full object-contain"
+            priority
+          />
+          <Typography variant="caption" component="p" className="text-center text-sm">
+            Click To Send a response
+          </Typography>
+        </Box>
       </Box>
-      <Box>
-        <Typography variant="caption" component="h5">
-          Click To Send a response
-        </Typography>
-      </Box>
-    </>
+    </Box>
   );
 }
 export default EmptyState;
diff --git a/public/assets/images/failed-fetch.webp b/public/assets/images/failed-fetch.webp
new file mode 100644
index 0000000000000000000000000000000000000000..50e64a9648a597617e1dd7e0b156a446ee6deb51
GIT binary patch
literal 5574
zcmV;%6*=lsNk&G#6#xKNMM6+kP&il$0000G0002T006T906|PpNG=fo00A5YZQC$O
z__N-@5D^oAtd_&{LCI}r{eQX5tUsJWphCo;LLe}Mz=c4J0tfzen7n{IFJQLP<!tF=
z&D?GFeRJh1q`J&LQ{{1YH!&`gDy~90gBq8=!q)#B9UTd77ZDTS=ly>-l4M(p(PGO2
z%G+A&J$l&%@CC$v0kMTibF1(>{w9qU+>(f`XhqQ)5a1Rx3Y}}K%q=3Dz_ehbQN4f!
z2pRzp%>t6>QD1}PT8q)jjfe@b;@Y+)NfNJ5PM}z^A1moh;0_=ra0g%$$N^l3^{-|j
zLxEZaTRJ3}7wex%3G1>zMpL>Z-~n#$xjl0mKtxOc{h#=&um9dBgC`yQ(I<hgf`LE!
z`1jS0>S+#7KJI<Bqbi<CPWRQ1cR%?C_eJqkMDy-Xeysa8Z80GguYa8TV;;(xsO6=P
zZ(oIfFJ>eecrx1F;H|<!O5QygX)kdutfb~@oc(<F-DeK*fYVX-ZSD#ODRDc-p72mO
z$rGN9us8TW4=X&3uRr2kc&N5`eRRFcwU^KFFt+}PbK#}h;PsL9I@g{)$HTaK!nyEN
zZSibW{UepP6>i7W&+|}tt9E!POOr^AqnEf_;0Ijup`NAD_<5IS3%rl!$k99rN6i!3
zVu5OdO93;N*<`%@Bh?}|_*urxdKRlu^5Y##H%5oESdERxU)geBI6f7}4K8gk^DI^)
z;_+9MI#4ZigP$!i^DGI*!H@s8Qc5+H3%!rV9y1ry$eAcg(^;NtZqM^+8YvG1Gd13D
zE*84{Egy0F%~$V+eBs9*|J1MihVoxbCp}9vPrl4si+#{M>h}Auzk2uXj?dmb`l+A&
zjo((6sI#y?LC&pL{QF|hs%4~aHGlYK^LrdVk9soE+|G9k*Xw7g%jHc&%ljTVkNPlW
zVMuFLzV#mCR!3HUE7P!TNv2`jvZV5pV9o>ARKe1hdCTUl?=nAVn-7|qwqZ$tX&aWD
zMU|fg>%^_FWbqZ(7WdejsP(J`Oaov^0ALybOJdd(DnAS6TsahKmNyjh_W)HEiDVUk
zX<bwR(_l$#G7Xl*4MOFo!8&p#)+`S=&%Ff<sZ1v=@K@_qPXO~Ni6-+Yi7kZ6PlGvj
zBxci)=QHJZVTfctYC->K{9Eq<P(<fdL<^zv^WdoyF&poxX6}GgY!lGO#=kTJmUXq3
zS9N)*{5&{wAY}7`>zN0r#lAvsjTc>ENz1e?FIuwY6|>6EgR{;;ZQ)2UT>_ayhV;C3
zQCbqPOuO+SV971707B*G!D&ZIvqc_eu7TJ=kX{;}lmr0FG{B1hV96V=0Dw^Wd2rl`
zD%i@|N)~t(v1ys+MQmDf)~^-V43(b;M_puWGvv8dyuiOTZNV~&Xj+!UsY%sz9y+iW
zv!%P4XF%?dB0V?$(oyR?IJXvRJA3|brg#A3P@%U=^G~hI&a0}H=Bm<(aB8byTi0{X
zfz&DneQdqxik)Y@&%mZvET_VuorEo4@$YlbfFZGnTF^`DA6oXCEaS#2a59CJK-)S}
zSUv}abS7?rkC)CNunfQ}a5kLSn6V4RdjKYjMUoqU_Qx)bfMs|E&POY=h^;qv<$Kt-
z(WUp(7}#2Y6XMh?x5wG4D4$!^k#xTf3Kb8wKEg5RjsuekyHXU__urkWQgIv<3NIe(
z1aNd9GbtS^isJhEJ83HJubKvg0`TIIHcUF8m2ARp6~$BWIV2PS;Kc)l7sIJ6_Z$`2
z^x|<;KWbbkMIn1mfu@&^vjLio3p|lzzFW{aA7>MiR>fsx0>!>7wnBA?V0Q%|8t{B^
z-WjX5*n97jTcKDE5bS#xj7D^8_CT{d?`qOkcyF@gO(<}HZ4Xr@B8b)^Sq1%Wp{ylf
z|G|<#C@?N4po(QobfZN?;tGmj5#5sbBUk{I3<bsoCx%p}D~4<&k`A1LB{)2m`$H`O
zTNOCKi8d0SQOjwO<cQ*qPh3p5P^fr-f;JMrQA@Ezc4X4k@p4!u6kZ&*Wr)OgJg{A$
zI5PFeX^Bt(UK|uOq~brL3H<SqqN{>`zmSOI0-*o^FOJz$$&xku1%d<ade8NRq)SkN
zO)m~<h$k{_I_6ES(}|d7fryAA2mbG3_Wl%TdTGFxN<>5txDQn<A~jooF%c!5h1^|8
zxx|9bc|<`b618-B=>$VAl2Q0eiD>G;^9#|0{*tYzb-)P`sc9pLJU}K9r)Bca6z2=6
zmzc<{C|?F(L=uKbqSnh0Ny{>2cm2bK7}NqFZ=xInUZxV!lp-~LbE(;Q%ZZ4)KXM`T
zi+}{89Q$ofphXOkq<F4Hb6hVFbQhfX_lt;Wf<-_^IR+e=>O^W^Ml`VX7j?EdL3I%+
zG@C`R$T5N`j70bzCQcuiu&3qjA~YTBmWWCY>49n@^@h|y|3O(m8FRjfnly)<zbLol
zh$GNWWDB&w(bJSD?PdXTk>R@+(IJuz?0iKzV95amKqRJ>(wm6@4xZAk7T6~uVt94|
z5v_<M13N!a4gi+iZ`}jA+z_YUs(iHjK)l@GMnptYT|mZ-h)6Q9^}%v%T5>lP><$=7
z(Ed^b9F*szoAU-gRO5{M3(({v$>}#9%F(pcZc3>miI^esWm1kC<vr@A#=okg5$|1q
zA)XM;DR8@@^VcCEMiNZtDK&)ZgR#W6YHfM89G%S89NdzvsC9%ol1q+fU2;?l64Auk
z1@@n}-B2x-QO!jIq0>ZeMfoyh-4BW6eyU`k+4<8%6j`hBN7bHjzt|1goMfEbK;A?-
z#;6@bBDoKp4AgL3`^vkRV_Qjw?=IF6S%_ih1`>#Jj8X@NM3UB}OOt_0(w2VbX-Y(a
ztr{y)&GkYtMr;!r4<Mr)!@?sBrAXe|w7HZ6m57Lj!cR;@WND6VCC+)iP)TVe6*~`D
zG+|UwfYD%5k+`gkF{UmPNex3TlgYp-@DUzpJ2h6ah=+w*V!N2eLsX^>dby`dMG^yT
z9?NuGwqO#Ojap6{H%*7Rl?yyohBeoV#I)jQ2%VzbGHpa~1zIL^19Ya+mFWPJigiW5
zahe^;tX$&<lbriSG^I;U;S%M5W!iq5hBlG;Set?IV9HorEBcK~awM_xi1$sR;k%1;
zL@qM)4p9yOmT7zKdMa^F(nS1LoC1gNNMz#zca?EPwLnHK&K02*%du&hxz7%Ax!{VE
zT}elkjgRq%S;~2Vn#?WdU{#K$rFPjdq;knoOJS8Aqr$>-d}k&d|L!fO6Ze>-Ray(b
z?y_S@WbvrZEF>D(+Duxe79RJNaeOmyKlSYT|L*R-qji=hQ#Vk>PSRnQ)`(hn*fAtx
z9o5E|+%8Vzgdw(&lzu&@sdZujTa!pb-&2;=^E38smB-Q0_fSPHH5;3WX&X_#+_!;T
z>`MS+Rkba3MXT$2Ms7IHWo^oAj(-{C1N}bO^8oPT{Nj#V{`q{@ym$f7Q3U&*p>)uM
zR$v-{D93$4PbrR>LzL=H>fA6M=Aw@6%%qJ93u{qSLlG#o?rAu`dHc`JKl69|UGvYk
zx3_PeIl)?~-~cAJ%Guk2X<#{aI8upgIvS>;8-P5~x*aN=ie*YORgy3<T4E(h2bxfg
zH)}<6>u}qk)*Ch6oES2j)Co+MV~3aNBC9f+=_aBUljl%pdNAT>2q#iW&`AzOpyu%z
zsQClvC9r714o^LaSVlFqh?H9Ec*2m2h+$m2XkMNOBvf?pFW4!|?aT|{1-$=0u(MFR
zp30_hiORGc7PQzJ+DNQZN)eH$2HoXu`_YWViM<W_t+KrWng(uxTR0owXrnegmBrB^
z$}Q9Gdao|BsUQ{mn?a_dp*7mY5RM|5vbILEQMLiVo51xHZvw1s)TXDJJJ`+TfMwb}
zt1_|FxEV7ertOSFPOp?wUm?TH(hq1}R@S?@+nL+Z-b!tH^vvFh<p5xr))#se%Z&bt
z#9vw2MH+Ua$0m`%0yhWW0SmT2d1~y`rYG}|<=C{$>{|6=5e@7Ph+{SQiSioQE2Y#|
zR>p;Fj&)U4@9*$2%hv!ej8$_6*x0EZLo6aCFWZ!(X{nyj>&3F>N*$dt%DK9pO3E6b
z2-WzpTP%ASo2shr@SF_~BlE)Q{WnL2gF0YDL=)Ov(aEmVpB))};6YmQiHN$>Nvi7s
z;A$7B$*-(DmLkTss#a*uO`6dyR@{zym!P2(F|2KpEmn`~)1|Xxr&ME{k^xhurLHkd
zpNegu<{$frW%sD69WL20Wc=owInS|mP$5GkU9W5=a*O3X)Q66oqf!bti4B&fBMg-F
zS5{t2(KS|U)NEQz+yZ9<G!5|P`=cutRZzuT*@3)aIeJq6=;#PNi6mNUU8ZRyq6wA#
zBR`R7fq(7svQa<b*(vDJyzBrHU^%+<dTHkzl~QZ859^$*-EXWs&m`vnerDtS(SPBj
z_Q1vkB+Ic|%T_5BE|#*l`?9Y<3-}&*+3cbNXp|FHO}L}pS}~2fh=_yL&#t^Dk_Bq+
zcfrApbxpg2`f#~OR_9W&AH7VrkZ`p5#%KIdE;zq_xo4YV?Zk30t?x;1&lk}q&*_8F
zo^+|Uv3aywFwkwDy<s^3rgb5tk7=6Kuu~Ueu=thLqOreNj$5X6Axh&WRFhXkOKH|K
z-}u5Zl=&*lvCZs*#o@T$so5j4TsZS+wXiBYRgO0Axc355UY`1u)#9P{(>(RABj^@O
z*iU@rGt1FLP{ZTiweIm+dJ?WCetdO_N!zln>qp$z(gw8{sKu(Kch$P|mN@sWTCPuB
zA%k&m(WA6B<@*Nv`XD7YvzEgp<}9tjVt~b3&^v2J@1hC4i*RR%5%+ZB2H@#^*%r*4
zldCgl8gC57y&c6g;pT)tWE(J-${AI-QhOrk@mh-HY?TVJm8~)7kla<ppo|feQhRa{
z(OPR6Yc@&+*vo#vWlS!sf|-|fT|eT!mNuxxXlk))>0Pxhy`@}wOUw0Xx75y{lv0m)
zU$nws$?ZTh*YLRSba3gK(Q~Xs@8c84DAato^b>ZRIuhG)94)aHRk(GHLOn=gm9igQ
z;!gJT;2eeJ@SGfScB2bC$+mEhR527U@Aqi-`#or_wK2wMoroqJaRb>JFStjl7={gg
zwbTR?HC6^^Js?$_FFVBJvai!UA#LhjqNVNC<TZW}t?))4NEO^+)6ChAAx7L&v~ZkS
z;9sKeaMcS^SqDqFy84486jO6-MHT+p52DN-FKRba>w{$Mrx=j!Z~H=-J!ezXV`##e
zdwee1qBj)x%vSkh)NE#c#*JvxBZ_UD|J=ac#ACFm*(KJZHO~4&Qwuek+F9CzaGIOr
zPV@tw^@uW~3)JjSUlmt#FJdQJ;i^xR507C#Go=T-FL}RbsxaVt+}Hj5ryT}%Q!&vk
zR+8^}Mu9fCsL|Iv(0bxA5nbUA$q#tFUleLtZ*A3dn4?lkedF<ph)%J4U$DbT&nWf+
zc%V=z^^GsDCU3E6TjLYzed5H^JeVpw%0Vgh+h15szp%sI`v>oD@aIYYD09F|qbqQf
zy;8sOnbrL14*Sh|z1ic>6Y^o!-BrI%gR!T-pIup>e6j<8hb!`A(b*zAps&Aqv~oT>
zJ3A$Bs-i3EIv>CA^wR1>UKJf#>LEXpNEO{M&wKbWo>u063;?O3qdv}IcK}EgzTu_e
zH&;hb2Y^)W8^f8RA<g_%Ml`Ugr*ulgJJCMM6b*4$cqb2NpjGCVJfZ=gXn*7p4ZE6o
zA`5Bwqq2WG4QL!Dx?g!r<58u$H)R^oxKv5mhjJRy7@f=<E2bfh)*vZdDYH1BksHLB
z?yAV*fJSl<r+I0m$kRBY@f}8{iiQwYP&goJ1ONa~D*&AVD#!q|06vjGnn@+3BB3sm
zX*jSF32AP|(3!tX79?x%2j~ar0ylZ`zhD;k+85dEx&ncodovjNu;k8kW*sqo-tRh!
z@yGGn4HX0RuU@n13ICq3jumt@P0cwMvCblmr)r8&(xL@tk_Vq;kU0BjX{AVCbtlx=
zyiNO{2kJFkN80D6SSo0f+W_mkB9>Y`R)c{}r0q0bV!I#(cUmc^`C~0kX7a75A*;|Y
z4o4chWf*NGj@>Lak4{i9c00%aG;<x6<)J!HoF%PrR{OMjOukMs&?I3f_l&gQOFx-x
zYoVURt9*r7&=cZa8L|-nBU4s}W>k`9)FgqKqGB~)MG}n{=9aDA99hjc+ayALv_=t1
zJY-;`RABUz6?gAG=g$A@_#m8>tH3+{ND60t51NN+xrK3hReZ+y^uE{NDExbyI>=^)
zu31Dh&%DDzA~@LD){B>))`xvH1^@v5)))=Hj2Ds@t4e)=ZG(&@O!>%E@82`1i~sCo
zzyGlw1x=fN+IhYAjtH`fkS`S#;Ia6BN6ILgwGw~-_zbv2wKgC90b^96&<08mufQms
zB~-VS(R1y$P?8u5UK-g%`s!{6i(+pfamB+m<+nuVGL4qdC1&0jry8Mq&px?d%VD%e
zHw=t(i~F~?oKpU`p-)|)P<@jxg27f@DEhNx55`Nb`VatS4b{xQ8MXgxcYDavxPV2Y
za5J0G2MU=D<Ev4Yvi=KHxVK4>Uzr==^BzJnl4c3N@QHFk$aQUl-8JYmU<9C>MEdHo
zDYlZ)?Fg*|B?%(wFa>>U8_aP5S=Yvug#}&vRSNge`GLvSDLjDqQ;^~nLbKP2N0ngt
zQUuXK+LeK!g0(dRMpz^_k|nb1X<Y;r|GQ$mKOqM}^xV&ygj;^WTamNNj%bjR<%2G{
zICZGmUX=c8AV_FgdQJnA&&d2k91>pVShg?oV!Gn&AP4Kpv7pzd{`I#6C3I*}?%>KV
z6{JMay&e-%I~I0QaqFHrL;Zrh)G%p1)>7N6q5ktSsm=c_ko38Wo36mSjy`W=5&`Z#
z?u0@Et+h@Z2<+H|dvJ_5^<@^7!By)9xfno;4EG%o8s^svlHclHTx~IxbXPB~lE_bS
z2xzT}S{F2olBL51xQPv6jMsq(4l5uTN(ft*xn0BM$sk4l?{k<X*I~W38Rno@38uZH
z;oWKIchE`c52YBc@jE}f3~yw16KI9>0v^<@<vtSFI&~FH@|?GD^?rK#w(&0*<Zpu8
z5XhXL&FNM>@XyW^Dl`!0r2Bfi)$b5;YvKruk3=vaD%Ovgm=@n}uHeGbStTa6j&@Gd
ziPO>z`D#~xg$hV{f{Qi?t0G#)%qCh!X2M+uVWx41TtB?97y4lk?jx^0Dh1lcn<NJZ
zDvlE#>IW#Uyj4`4D4?uG4vr|B`7sL#kI3uvzzkevN*uUUqyJmCh6@VCfAze+03xp=
UmM=NjQHuzTRO^B6KmY&$05HwBCIA2c

literal 0
HcmV?d00001

diff --git a/public/assets/svg/illustration-hit-send.svg b/public/assets/svg/illustration-hit-send.svg
new file mode 100644
index 0000000..700dd46
--- /dev/null
+++ b/public/assets/svg/illustration-hit-send.svg
@@ -0,0 +1,104 @@
+<svg width="140" height="120" viewBox="0 0 140 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1055_60)">
+<g clip-path="url(#clip1_1055_60)">
+<g opacity="0.7">
+<path d="M125.92 26.8999C125.92 26.8999 128.45 32.2699 122.65 36.9699L121.65 32.7399" fill="url(#paint0_linear_1055_60)"/>
+</g>
+<path d="M125.69 26.5701C125.69 26.5701 129.51 31.1201 122.29 37.3801L121.07 32.6801" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.3" d="M54.79 79.0199L54.33 80.4199C54.69 81.0699 54.93 81.0699 55.66 81.1699C59.18 81.5699 62.65 80.0699 64.78 77.2299C65.12 76.8099 65.2 76.6999 65.23 76.3099C65.3 75.2999 65.09 74.2899 64.62 73.3899L64.13 72.3899C64.13 72.3899 65.86 76.6899 59.69 78.4699C53.52 80.2499 54.79 79.0199 54.79 79.0199V79.0199Z" fill="#262626"/>
+<path opacity="0.3" d="M81.33 117.77C81.33 119.77 68.63 121.44 52.97 121.44C37.31 121.44 24.62 119.8 24.62 117.77C24.62 116.7 28.17 115.77 33.85 115.06C34.78 114.95 34.6 116.22 34.85 117.24C35.03 118.3 35.98 119.04 37.05 118.97C38.34 118.89 37.84 121.68 44.5 119.76C45.81 119.06 46.86 117.96 47.5 116.63C48.05 115.42 47.64 114.16 48.28 114.14C49.8 114.14 51.37 114.09 52.97 114.09C55.26 114.09 53.97 114.09 56.07 114.2C56.88 114.2 56.61 116.53 57.87 117.94C59.37 119.33 61.27 120.22 63.3 120.49C64.92 120.59 67.3 119.08 68.3 118.69C68.82 118.48 70.41 114.87 70.93 114.92C77.28 115.6 81.33 116.63 81.33 117.77V117.77Z" fill="#262626"/>
+<path d="M29.51 57.71L29.67 49.66C29.67 48.4 30.69 47.37 31.95 47.36H31.96L36.41 47.26" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.17 16.0601L52.25 18.2101" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.18 15.9C53.6601 15.9 54.86 14.6912 54.86 13.2C54.86 11.7088 53.6601 10.5 52.18 10.5C50.6999 10.5 49.5 11.7088 49.5 13.2C49.5 14.6912 50.6999 15.9 52.18 15.9Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.18 15.9C53.6601 15.9 54.86 14.6912 54.86 13.2C54.86 11.7088 53.6601 10.5 52.18 10.5C50.6999 10.5 49.5 11.7088 49.5 13.2C49.5 14.6912 50.6999 15.9 52.18 15.9Z" fill="#FF8853" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.53 81.8401L69.45 95.7201L69.76 99.5201L70.31 112.91C70.42 116.66 67.47 119.8 63.71 119.91C63.65 119.91 63.59 119.91 63.53 119.91C59.88 119.91 56.89 117.02 56.74 113.38L54.59 96.5701C54.41 95.3101 53.34 94.3601 52.06 94.3301C50.72 94.3301 49.59 95.3301 49.45 96.6601L47.91 113.15C47.91 116.91 44.87 119.97 41.11 119.98C37.35 119.97 34.3 116.91 34.31 113.15L35.22 82.5701" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.24 84.4201C51.29 86.9801 52.96 87.2301 55.56 87.2301C56.96 87.0801 58.34 86.7701 59.66 86.3001C73.53 80.5801 77.21 75.4101 77.84 68.3901C78.67 59.2401 72.16 52.3901 68.05 49.0601" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.45 62.1799C67.2 65.6699 63.86 69.5199 60.24 71.8899" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<g opacity="0.7">
+<path d="M54.12 75.1899C54.34 73.7799 55.49 73.0999 57.7 72.2599C60.45 71.2099 62.98 71.2599 63.59 72.8299C64.2 74.3999 62.7 76.7599 59.95 77.8299C58.06 78.5499 56.54 79.2699 55.35 78.6999" fill="url(#paint1_linear_1055_60)"/>
+</g>
+<path d="M54.8 78.8599C56.44 79.1799 58.14 78.9799 59.66 78.2899C62.66 77.0399 64.66 74.7699 64.05 73.1999C63.44 71.6299 60.43 71.3799 57.37 72.6199C56.05 73.0999 54.86 73.8799 53.9 74.9099" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.73 48.97L35.05 50.69C29.55 55.96 26.37 63.19 26.21 70.8C26.15 73.56 28.33 82.8 45.91 84.8H47.24C50.93 84.8 54.74 82.89 54.76 78.6C54.81 77.86 54.73 77.11 54.53 76.39C53.75 74.04 51.78 72.7 47.58 72.28C42.12 71.73 38.81 68.08 37.03 67.48" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M58.89 78.6599C58.89 78.6599 61.95 82.5399 62.24 85.0799" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.99 77.23C61.99 77.23 64.91 80.9 65.2 83.44" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.85 51.8C36.93 56.37 38.34 61.85 37.85 67.34" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.17 49.23C37.17 49.23 42.59 56.44 41.33 69.42" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M67.45 63.8101C67.45 63.8101 65.78 54.9701 68.83 49.5801" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M65.06 67.4901C62.84 63.0201 62.33 57.8901 63.64 53.0801" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.75 56.4001C63.2048 56.4001 71.68 47.8846 71.68 37.3801C71.68 26.8757 63.2048 18.3601 52.75 18.3601C42.2953 18.3601 33.82 26.8757 33.82 37.3801C33.82 47.8846 42.2953 56.4001 52.75 56.4001Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M72.55 52.7701C83.71 46.9701 84.03 55.4401 83.45 60.2001C83.4 60.7001 83.76 61.1501 84.26 61.2001C84.54 61.2301 84.81 61.1301 85 60.9401L114.59 31.1101" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M116.33 32.6699L103.98 52.9699C103.98 52.9699 116.38 50.0699 104.98 66.5699L96.91 81.2799C96.62 81.6899 96.72 82.2599 97.13 82.5499C97.37 82.7199 97.68 82.7599 97.96 82.6599C103.49 80.6599 115.04 77.9799 111.08 91.7299C110.94 92.2099 111.22 92.7199 111.7 92.8599C111.92 92.9199 112.16 92.8999 112.36 92.7999C118.54 89.6699 136.65 84.6899 125.8 107.8C125.58 108.25 125.77 108.8 126.22 109.02C126.4 109.11 126.6 109.13 126.8 109.09H139.45" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.79 90.7499C34.79 90.7499 5.67 86.9699 9.5 108.97L1.5 109.1" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.1682 84.4596C24.8437 82.0191 25.0539 79.2526 23.6379 78.2805C22.2219 77.3084 19.7158 78.4988 18.0403 80.9392C16.3649 83.3797 16.1546 86.1462 17.5707 87.1183C18.9867 88.0905 21.4928 86.9001 23.1682 84.4596Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M129.39 52.8L130.39 53.35L129.39 53.91L128.85 54.93L128.3 53.91L127.31 53.35L128.3 52.8L128.85 51.78L129.39 52.8Z" fill="#8B8B8B"/>
+<path d="M84.14 40.23L85.14 40.79L84.14 41.34L83.59 42.36L83.05 41.34L82.05 40.79L83.05 40.23L83.59 39.21L84.14 40.23Z" fill="#8B8B8B"/>
+<path d="M102.26 31.1201L103.26 31.6801L102.26 32.2401L101.72 33.2601L101.17 32.2401L100.18 31.6801L101.17 31.1201L101.72 30.1001L102.26 31.1201Z" fill="#8B8B8B"/>
+<path d="M13.88 64.3301L14.88 64.8901L13.88 65.4501L13.33 66.4701L12.79 65.4501L11.79 64.8901L12.79 64.3301L13.33 63.3101L13.88 64.3301Z" fill="#8B8B8B"/>
+<path d="M19.62 32.9699C20.8737 32.9699 21.89 31.9491 21.89 30.6899C21.89 29.4307 20.8737 28.4099 19.62 28.4099C18.3663 28.4099 17.35 29.4307 17.35 30.6899C17.35 31.9491 18.3663 32.9699 19.62 32.9699Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.3" d="M124.45 27.97V28.06C124.45 28.15 124.52 28.06 124.53 28.06C124.54 28.06 124.53 28 124.53 27.96C124.53 27.92 124.39 27.84 124.45 27.97ZM126.45 26.19C126.57 26.09 126.71 26.04 126.59 26.14C126.47 26.24 126.53 26.19 126.46 26.21C126.39 26.23 126.31 26.22 126.45 26.14V26.19ZM122.06 32.5C122.06 32.5 122 32.55 121.93 32.59L121.99 32.54L122.06 32.5ZM122.33 30.74C122.33 30.74 122.27 30.74 122.33 30.68C122.39 30.62 122.33 30.68 122.4 30.68C122.47 30.68 122.4 30.73 122.32 30.69V30.74H122.33ZM122.65 30.41H122.57V30.33C122.57 30.33 122.57 30.33 122.64 30.33C122.71 30.33 122.65 30.35 122.64 30.36V30.41H122.65ZM123.22 29.85H123.16C123.16 29.85 123.26 29.85 123.24 29.85C123.22 29.85 123.22 29.78 123.21 29.8V29.85H123.22ZM124.56 27.85C124.47 27.85 124.41 27.8 124.42 27.78C124.43 27.76 124.52 27.78 124.59 27.78L124.56 27.85Z" fill="#262626"/>
+<g opacity="0.7">
+<path d="M129.45 12.97C129.39 12.58 128.54 12.97 128.45 12.54C128.26 12.53 128.06 12.53 127.87 12.54C124.64 13 121.75 14.77 119.87 17.44L117.22 21.05L113.12 27.32L116.12 29.58L121.12 33.03L126.23 25.97L129.3 21.52C131.16 18.97 129.82 15.59 129.45 12.97V12.97ZM125.26 21.87C124.62 22.8 123.74 23.43 122.81 22.78C121.81 22 121.47 20.64 122 19.49C122.64 18.56 124.2 18.77 125.12 19.42C126.04 20.07 125.89 20.97 125.25 21.86L125.26 21.87Z" fill="url(#paint2_linear_1055_60)"/>
+</g>
+<path d="M129.21 12.8301L128.5 12.7701C125.06 12.6001 121.77 14.2101 119.8 17.0401L117.23 20.6301L112.77 26.8401L116.94 29.9701L121.08 33.1201L125.77 26.5801L128.21 23.1901C130.08 20.6201 130.64 17.3301 129.74 14.2801C129.6 13.8301 129.21 12.8701 129.21 12.8701V12.8301V12.8301Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M123.63 22.62C124.757 22.62 125.67 21.7022 125.67 20.57C125.67 19.4378 124.757 18.52 123.63 18.52C122.503 18.52 121.59 19.4378 121.59 20.57C121.59 21.7022 122.503 22.62 123.63 22.62Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<g opacity="0.7">
+<path d="M116.85 20.2301C116.85 20.2301 110.95 19.5701 108.36 26.6101L112.7 26.2201" fill="url(#paint3_linear_1055_60)"/>
+</g>
+<path d="M118.63 31.39L118.02 32.7701C117.95 33.0001 117.72 33.13 117.49 33.06C117.45 33.05 117.41 33.03 117.37 33.01L114.17 30.5C113.98 30.35 113.94 30.08 114.09 29.88C114.11 29.85 114.14 29.82 114.17 29.8L115.37 28.8" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M117.33 20.2701C117.33 20.2701 111.7 18.2101 108.13 27.0601L112.97 26.7001" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M123.63 22.62C124.757 22.62 125.67 21.7022 125.67 20.57C125.67 19.4378 124.757 18.52 123.63 18.52C122.503 18.52 121.59 19.4378 121.59 20.57C121.59 21.7022 122.503 22.62 123.63 22.62Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.93 76.6L59.69 74.74" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.08 73.3799L60.53 75.8299L62.01 73.4499L59.08 73.3799Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.08 67.8401L52.8 71.6201" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M54.05 67.1201L54.86 70.5901" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M70.26 29.73C67.57 29.43 64.86 29.37 62.16 29.56C54.5 30.12 51.34 33.13 50.08 35.14C49.52 36.4 49.34 37.78 49.55 39.14C50.03 42.67 53.66 50.97 66.37 50.61" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.84 59.4299H55.77C55.5325 59.4299 55.34 59.6224 55.34 59.8599V64.0699C55.34 64.3074 55.5325 64.4999 55.77 64.4999H59.84C60.0775 64.4999 60.27 64.3074 60.27 64.0699V59.8599C60.27 59.6224 60.0775 59.4299 59.84 59.4299Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M119.9 78.3701C121.154 78.3701 122.17 77.3493 122.17 76.0901C122.17 74.8308 121.154 73.8101 119.9 73.8101C118.646 73.8101 117.63 74.8308 117.63 76.0901C117.63 77.3493 118.646 78.3701 119.9 78.3701Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.39 41.48C42.9806 41.48 44.27 40.1906 44.27 38.6C44.27 37.0094 42.9806 35.72 41.39 35.72C39.7994 35.72 38.51 37.0094 38.51 38.6C38.51 40.1906 39.7994 41.48 41.39 41.48Z" stroke="#8B8B8B" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1055_60" x1="116.284" y1="31.724" x2="113.498" y2="23.7043" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7002"/>
+<stop offset="0.3" stop-color="#FE7304"/>
+<stop offset="0.5" stop-color="#FC7C0A"/>
+<stop offset="0.68" stop-color="#F88B15"/>
+<stop offset="0.84" stop-color="#F3A125"/>
+<stop offset="0.98" stop-color="#ECBD39"/>
+<stop offset="1" stop-color="#EBC03B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1055_60" x1="66.2036" y1="76.601" x2="72.6004" y2="81.0469" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7002"/>
+<stop offset="0.3" stop-color="#FE7304"/>
+<stop offset="0.5" stop-color="#FC7C0A"/>
+<stop offset="0.68" stop-color="#F88B15"/>
+<stop offset="0.84" stop-color="#F3A125"/>
+<stop offset="0.98" stop-color="#ECBD39"/>
+<stop offset="1" stop-color="#EBC03B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1055_60" x1="113.06" y1="22.78" x2="130.26" y2="22.78" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7002"/>
+<stop offset="0.3" stop-color="#FE7304"/>
+<stop offset="0.5" stop-color="#FC7C0A"/>
+<stop offset="0.68" stop-color="#F88B15"/>
+<stop offset="0.84" stop-color="#F3A125"/>
+<stop offset="0.98" stop-color="#ECBD39"/>
+<stop offset="1" stop-color="#EBC03B"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1055_60" x1="108.36" y1="23.4101" x2="116.85" y2="23.4101" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7002"/>
+<stop offset="0.3" stop-color="#FE7304"/>
+<stop offset="0.5" stop-color="#FC7C0A"/>
+<stop offset="0.68" stop-color="#F88B15"/>
+<stop offset="0.84" stop-color="#F3A125"/>
+<stop offset="0.98" stop-color="#ECBD39"/>
+<stop offset="1" stop-color="#EBC03B"/>
+</linearGradient>
+<clipPath id="clip0_1055_60">
+<rect width="140" height="120" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1055_60">
+<rect width="138.95" height="111.44" fill="white" transform="translate(1 10)"/>
+</clipPath>
+</defs>
+</svg>

From 9074592bb18fb9ffbe4cdccf88ed911db04f5b7f Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:32:05 +0400
Subject: [PATCH 085/157] feat: add table for res headers, some improvment in
 monaco editor

---
 components/RestClient/Form/CustomTabPanel.tsx |  6 +-
 .../RestClient/Response/ResponseBody.tsx      | 56 ++++++++++++++++---
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/components/RestClient/Form/CustomTabPanel.tsx b/components/RestClient/Form/CustomTabPanel.tsx
index 4aef449..786a47d 100644
--- a/components/RestClient/Form/CustomTabPanel.tsx
+++ b/components/RestClient/Form/CustomTabPanel.tsx
@@ -4,20 +4,22 @@ interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
   value: number;
+  className?: string;
 }
 
 function CustomTabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
+  const { children, value, index, className, ...other } = props;
 
   return (
     <div
+      className={className}
       role="tabpanel"
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box>{children}</Box>}
+      {value === index && <Box className="h-full w-full">{children}</Box>}
     </div>
   );
 }
diff --git a/components/RestClient/Response/ResponseBody.tsx b/components/RestClient/Response/ResponseBody.tsx
index 5ae38cc..31f79b7 100644
--- a/components/RestClient/Response/ResponseBody.tsx
+++ b/components/RestClient/Response/ResponseBody.tsx
@@ -1,8 +1,9 @@
 import { selectResponse } from '@/redux/features/mainSlice';
 import { useAppSelector } from '@/redux/hooks';
 import Editor from '@monaco-editor/react';
-import { Box } from '@mui/material';
+import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import CustomTabPanel from '../Form/CustomTabPanel';
+import { useMemo } from 'react';
 
 type PropTypes = {
   activeTab: number;
@@ -11,20 +12,41 @@ type PropTypes = {
 function ResponseBody({ activeTab }: PropTypes) {
   const { data, parsedHeaders } = useAppSelector(selectResponse);
 
+  const headers = Object.entries(parsedHeaders).map(([key, value]) => ({
+    key,
+    value,
+  }));
+
+  const editorLanguage = useMemo(() => {
+    const contentType = parsedHeaders['content-type'] || '';
+    if (contentType.includes('application/json')) {
+      return 'json';
+    } else if (contentType.includes('text/html')) {
+      return 'html';
+    } else if (contentType.includes('text/xml')) {
+      return 'xml';
+    }
+    return 'text';
+  }, [parsedHeaders]);
+
   return (
-    <Box component="div">
-      <CustomTabPanel value={activeTab} index={0}>
+    <Box component="div" className="mb-1 flex h-full flex-col">
+      <CustomTabPanel value={activeTab} index={0} className="h-full flex-grow">
         <Editor
-          height="500px"
-          defaultLanguage="json"
           theme="vs-dark"
-          defaultValue={data}
+          defaultLanguage={editorLanguage}
+          value={data}
+          loading={null}
           options={{
             readOnly: true,
             minimap: {
               enabled: false,
             },
             smoothScrolling: true,
+            scrollbar: {
+              verticalScrollbarSize: 12,
+              horizontalScrollbarSize: 12,
+            },
             lineNumbersMinChars: 4,
             wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
             wordWrap: 'on',
@@ -35,10 +57,28 @@ function ResponseBody({ activeTab }: PropTypes) {
           }}
         />
       </CustomTabPanel>
-      <CustomTabPanel value={activeTab} index={1}>
-        {JSON.stringify(parsedHeaders)}
+      <CustomTabPanel value={activeTab} index={1} className="h-full flex-grow overflow-auto">
+        <TableContainer component={Paper} className="h-full">
+          <Table stickyHeader aria-label="response headers table">
+            <TableHead>
+              <TableRow>
+                <TableCell className="w-full">Key</TableCell>
+                <TableCell className="w-full">Value</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {headers.map(({ key, value }) => (
+                <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                  <TableCell className="w-full">{key}</TableCell>
+                  <TableCell className="w-full">{value}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </CustomTabPanel>
     </Box>
   );
 }
+
 export default ResponseBody;

From 4618f1db215f27d71c3ec054ebdd7f130777a1c1 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:33:00 +0400
Subject: [PATCH 086/157] feat: handle loading, empty, error and succes state
 in ResponseSection

---
 components/RestClient/Response/index.tsx | 32 ++++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/components/RestClient/Response/index.tsx b/components/RestClient/Response/index.tsx
index 46de53c..4f07637 100644
--- a/components/RestClient/Response/index.tsx
+++ b/components/RestClient/Response/index.tsx
@@ -3,29 +3,39 @@
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import { useAppSelector } from '@/redux/hooks';
-import { selectResponse } from '@/redux/features/mainSlice';
+import { selectAllMainState } from '@/redux/features/mainSlice';
 import EmptyState from './EmptyState';
 import ResponseBody from './ResponseBody';
 import ResponseHeader from './ResponseHeader';
+import Ellipsis from '@/components/Ellipsis';
+import ErrorState from './ErrorState';
 
 function ResponseSection() {
   const [activeTab, setActiveTab] = useState(0);
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
   };
-  const { data } = useAppSelector(selectResponse);
+  const {
+    response: { data, success, statusText, status },
+    isLoading,
+  } = useAppSelector(selectAllMainState);
+
+  if (isLoading) return <Ellipsis />;
+
+  if (status === 0 && !data && !statusText) {
+    return <EmptyState />;
+  }
+
+  if (!success && status === 0) {
+    return <ErrorState />;
+  }
 
   return (
-    <Box component="section" className="h-full flex-1 px-3">
-      {data ? (
-        <>
-          <ResponseHeader activeTab={activeTab} handleTabChange={handleTabChange} />
-          <ResponseBody activeTab={activeTab} />
-        </>
-      ) : (
-        <EmptyState />
-      )}
+    <Box component="section" className="padding-x flex h-full flex-col">
+      <ResponseHeader activeTab={activeTab} handleTabChange={handleTabChange} />
+      <ResponseBody activeTab={activeTab} />
     </Box>
   );
 }
+
 export default ResponseSection;

From 08cc2213dcc144befb6c81db9e94a6a9617b7196 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:34:30 +0400
Subject: [PATCH 087/157] feat: added status colors util fn, remove calcSize
 util fn

---
 .../RestClient/Response/ResponseHeader.tsx    | 20 +++++++++----------
 utils/calcSize.ts                             |  6 ------
 utils/getStatusColor.ts                       | 14 +++++++++++++
 3 files changed, 23 insertions(+), 17 deletions(-)
 delete mode 100644 utils/calcSize.ts
 create mode 100644 utils/getStatusColor.ts

diff --git a/components/RestClient/Response/ResponseHeader.tsx b/components/RestClient/Response/ResponseHeader.tsx
index 640e720..4fffc34 100644
--- a/components/RestClient/Response/ResponseHeader.tsx
+++ b/components/RestClient/Response/ResponseHeader.tsx
@@ -1,8 +1,9 @@
 import { selectResponse } from '@/redux/features/mainSlice';
 import { useAppSelector } from '@/redux/hooks';
 import { a11yProps } from '@/utils/a11yProps';
-import { calcSize } from '@/utils/calcSize';
+import { getStatusColor } from '@/utils/getStatusColor';
 import { Box, Divider, Tab, Tabs, Typography } from '@mui/material';
+import prettyBytes from 'pretty-bytes';
 
 type PropTypes = {
   activeTab: number;
@@ -11,10 +12,12 @@ type PropTypes = {
 
 function ResponseHeader({ activeTab, handleTabChange }: PropTypes) {
   const { data, parsedHeaders, status, statusText, responseTime } = useAppSelector(selectResponse);
-  const size = calcSize(JSON.stringify(data), JSON.stringify(parsedHeaders));
+  const size = [JSON.stringify(data), JSON.stringify(parsedHeaders)].reduce((acc, cur) => acc + cur.length, 0);
+
+  const statusClr = getStatusColor(status);
 
   return (
-    <Box component="header" className="flex items-center justify-between py-1 text-sm">
+    <Box component="header" className="flex items-center justify-between text-sm">
       <Tabs
         value={activeTab}
         onChange={handleTabChange}
@@ -27,20 +30,15 @@ function ResponseHeader({ activeTab, handleTabChange }: PropTypes) {
         <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
       </Tabs>
 
-      <Box component="div" className="flex items-center justify-between gap-3">
-        {/* TODO: Status Text Color */}
-        <Typography
-          variant="button"
-          component="p"
-          className={`rounded-sm px-2 py-[1px] ${status === 200 ? 'bg-green-700 text-green-200' : 'bg-red-700 text-red-200'}`}
-        >
+      <Box component="div" className="flex items-center justify-between gap-1 sm:gap-3">
+        <Typography variant="button" component="p" className={`rounded-sm px-2 py-[1px] ${statusClr}`}>
           {`${status} ${statusText}`}
         </Typography>
         <Divider orientation="vertical" variant="middle" flexItem />
         <Typography component="p" className="text-sm">{`${responseTime} ms`}</Typography>
         <Divider orientation="vertical" variant="middle" flexItem />
         <Typography component="p" className="text-sm">
-          {size}
+          {prettyBytes(size)}
         </Typography>
       </Box>
     </Box>
diff --git a/utils/calcSize.ts b/utils/calcSize.ts
deleted file mode 100644
index b8cd375..0000000
--- a/utils/calcSize.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import prettyBytes from 'pretty-bytes';
-
-export const calcSize = (...values: string[]) => {
-  const bytes = values.reduce((acc, cur) => acc + cur.length, 0);
-  return prettyBytes(bytes);
-};
diff --git a/utils/getStatusColor.ts b/utils/getStatusColor.ts
new file mode 100644
index 0000000..529f4f8
--- /dev/null
+++ b/utils/getStatusColor.ts
@@ -0,0 +1,14 @@
+export function getStatusColor(status: number) {
+  const statusStr = `${status}`;
+  if (statusStr.startsWith('1')) {
+    return 'bg-blue-700 text-blue-200';
+  } else if (statusStr.startsWith('2')) {
+    return 'bg-green-700 text-green-200';
+  } else if (statusStr.startsWith('3')) {
+    return 'bg-yellow-700 text-yellow-200';
+  } else if (statusStr.startsWith('4') || statusStr.startsWith('5')) {
+    return 'bg-red-700 text-red-200';
+  } else {
+    return 'bg-gray-700 text-gray-200';
+  }
+}

From 44bdf81e1dac64150d9edda3e67918d07218d7b4 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:37:22 +0400
Subject: [PATCH 088/157] fix: add z-index to ensure proper layering and
 customizable appearance

---
 components/Resizable/ResizableHandle.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/Resizable/ResizableHandle.tsx b/components/Resizable/ResizableHandle.tsx
index 2f47819..3356ef1 100644
--- a/components/Resizable/ResizableHandle.tsx
+++ b/components/Resizable/ResizableHandle.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { ComponentProps } from 'react';
 import { PanelResizeHandle } from 'react-resizable-panels';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 
 interface ResizableHandleProps extends ComponentProps<typeof PanelResizeHandle> {
   direction?: 'vertical' | 'horizontal';
@@ -10,13 +9,16 @@ interface ResizableHandleProps extends ComponentProps<typeof PanelResizeHandle>
 function ResizableHandle({ direction = 'vertical', ...props }: ResizableHandleProps) {
   return (
     <PanelResizeHandle
-      className={`flex items-center justify-center bg-gray-200 ${direction === 'horizontal' ? 'w-[1px]' : 'h-[1px]'}`}
+      className={`z-50 flex items-center justify-center bg-gray-200 py-[1px] ${
+        direction === 'horizontal' ? 'w-[1px]' : 'h-[1px]'
+      }`}
       {...props}
     >
-      <MoreHorizIcon
-        className={`rounded-sm bg-inherit ${direction === 'horizontal' && 'rotate-90'}`}
-        fontSize="small"
-      />
+      <div
+        className={`relative h-1 w-1 rounded-full bg-gray-400 before:absolute before:h-1 before:w-1 before:rounded-full before:bg-gray-400 before:content-[''] after:absolute after:h-1 after:w-1 after:rounded-full after:bg-gray-400 after:content-[''] ${
+          direction === 'horizontal' ? 'before:top-[-6px] after:top-[6px]' : 'before:left-[-6px] after:left-[6px]'
+        } `}
+      ></div>
     </PanelResizeHandle>
   );
 }

From 4cf3e28c5ec488d25dae75e33dc87e3262a5b1d7 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:40:58 +0400
Subject: [PATCH 089/157] feat: add content type-based response handling

---
 services/response/index.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/services/response/index.ts b/services/response/index.ts
index f786b34..e7b8bba 100644
--- a/services/response/index.ts
+++ b/services/response/index.ts
@@ -15,12 +15,23 @@ export async function fetcher(url: string | URL | Request, options?: RequestInit
       body,
     });
 
-    const data = await res.json();
+    const contentType = res.headers.get('Content-Type') || '';
+
+    let data;
+    if (contentType.includes('application/json')) {
+      data = await res.json();
+    } else if (contentType.includes('text/plain')) {
+      data = await res.text();
+    } else if (contentType.includes('text/html')) {
+      data = await res.text();
+    } else {
+      data = await res.blob();
+    }
 
     const endTimer = Date.now();
 
     return {
-      data: JSON.stringify(data, null, 2),
+      data: typeof data === 'object' ? JSON.stringify(data, null, 2) : data,
       status: res.status,
       statusText: res.statusText,
       parsedHeaders: Object.fromEntries(res.headers),
@@ -30,8 +41,8 @@ export async function fetcher(url: string | URL | Request, options?: RequestInit
   } catch (error) {
     return {
       data: JSON.stringify(error),
-      status: 500,
-      statusText: getErrorMessage(error, 'Failed to fetch'),
+      status: 0,
+      statusText: getErrorMessage(error, 'Error: Failed to fetch'),
       parsedHeaders: {},
       success: false,
       responseTime: 0,

From 0777dc051d40be7304fad03a7de1b24af0b8987a Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 13:41:14 +0400
Subject: [PATCH 090/157] feat: Enhance error message extraction in
 getErrorMessage

---
 utils/getErrorMessage.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/utils/getErrorMessage.ts b/utils/getErrorMessage.ts
index c55f015..5912ef7 100644
--- a/utils/getErrorMessage.ts
+++ b/utils/getErrorMessage.ts
@@ -1,7 +1,19 @@
 export const getErrorMessage = (error: unknown, initialMessage = 'An error occurred'): string => {
   if (error instanceof Error) {
+    if ('cause' in error && error.cause instanceof Error) {
+      return `${error.message}: ${error.cause.message}`;
+    }
     return error.message;
   }
 
+  if (typeof error === 'object' && error !== null) {
+    if ('message' in error) {
+      return String(error.message);
+    }
+    if ('code' in error && 'input' in error) {
+      return `${String(error.code)}: ${String(error.input)}`;
+    }
+  }
+
   return initialMessage;
 };

From 7e6a85acba3407ab2aff34d600508fd140fa131b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 14:09:35 +0400
Subject: [PATCH 091/157] refactor: move auth typeto types folder, change login
 input to email

---
 components/FormSignIn/index.tsx                     | 12 ++++++------
 components/FormSignUp/index.tsx                     | 12 ++++++------
 interfaces/auth.interface.ts => types/auth.types.ts |  2 +-
 validation/signin.validation.ts                     |  2 +-
 validation/signup.validation.ts                     |  2 +-
 5 files changed, 15 insertions(+), 15 deletions(-)
 rename interfaces/auth.interface.ts => types/auth.types.ts (89%)

diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 50e9f1f..e833d88 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
-import { SignInData } from '@/interfaces/auth.interface';
+import { SignInData } from '@/types/auth.types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { signInValidationSchema } from '@/validation/signin.validation';
 import {
@@ -40,7 +40,7 @@ function FormSignIn() {
 
   const onFormSubmit = async (data: SignInData) => {
     try {
-      const user = await signInWithEmailAndPassword(auth, data.login, data.password);
+      const user = await signInWithEmailAndPassword(auth, data.email, data.password);
       if (!user.user.emailVerified) {
         await logout();
         toast.info(toastMessages.confirmEmail);
@@ -74,11 +74,11 @@ function FormSignIn() {
         </Link>
       </div>
       <TextField
-        error={!!errors.login}
-        id="login"
+        error={!!errors.email}
+        id="email"
         label="Email"
-        helperText={errors.login ? errors.login.message : ' '}
-        {...register('login')}
+        helperText={errors.email ? errors.email.message : ' '}
+        {...register('email')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
         <InputLabel htmlFor="password">Password</InputLabel>
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 78af0f9..87cd3eb 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
-import { SignUpData } from '@/interfaces/auth.interface';
+import { SignUpData } from '@/types/auth.types';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 import {
@@ -41,7 +41,7 @@ function FormSignUp() {
 
   const onFormSubmit = async (data: SignUpData) => {
     try {
-      const userCredential = await createUserWithEmailAndPassword(auth, data.login, data.password);
+      const userCredential = await createUserWithEmailAndPassword(auth, data.email, data.password);
       await logout();
       await updateProfile(userCredential.user, { displayName: data.name });
       toast.warning(toastMessages.confirmEmail);
@@ -81,11 +81,11 @@ function FormSignUp() {
         {...register('name')}
       />
       <TextField
-        error={!!errors.login}
-        id="login"
+        error={!!errors.email}
+        id="email"
         label="Email"
-        helperText={errors.login ? errors.login.message : ' '}
-        {...register('login')}
+        helperText={errors.email ? errors.email.message : ' '}
+        {...register('email')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
         <InputLabel htmlFor="password">Password</InputLabel>
diff --git a/interfaces/auth.interface.ts b/types/auth.types.ts
similarity index 89%
rename from interfaces/auth.interface.ts
rename to types/auth.types.ts
index 54f8eeb..d833ecc 100644
--- a/interfaces/auth.interface.ts
+++ b/types/auth.types.ts
@@ -1,5 +1,5 @@
 export interface SignInData {
-  login: string;
+  email: string;
   password: string;
 }
 
diff --git a/validation/signin.validation.ts b/validation/signin.validation.ts
index d47c4fb..ebf4a09 100644
--- a/validation/signin.validation.ts
+++ b/validation/signin.validation.ts
@@ -1,7 +1,7 @@
 import * as yup from 'yup';
 
 export const signInValidationSchema = yup.object().shape({
-  login: yup.string().email('Invalid email address').required('Login is required'),
+  email: yup.string().email('Invalid email address').required('Email is required'),
   password: yup
     .string()
     .required('Password is required')
diff --git a/validation/signup.validation.ts b/validation/signup.validation.ts
index 35f993d..6bc9665 100644
--- a/validation/signup.validation.ts
+++ b/validation/signup.validation.ts
@@ -2,7 +2,7 @@ import * as yup from 'yup';
 
 export const signUpValidationSchema = yup.object().shape({
   name: yup.string().required('Name is required').min(3, 'Name must be at least 3 characters long'),
-  login: yup.string().email('Invalid email address').required('Login is required'),
+  email: yup.string().email('Invalid email address').required('Email is required'),
   password: yup
     .string()
     .required('Password is required')

From 990b70241dcb5a4ebf606561f4e50712d9a79f9f Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 14:21:30 +0400
Subject: [PATCH 092/157] refactor: seperate auth toast messages

---
 components/FormSignIn/index.tsx | 10 +++++-----
 components/FormSignUp/index.tsx | 10 +++++-----
 components/Header/index.tsx     |  6 +++---
 constants/toastMessages.ts      |  5 ++++-
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index e833d88..4f05d29 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -23,7 +23,7 @@ import { signInWithEmailAndPassword } from '@firebase/auth';
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { FirebaseError } from '@firebase/util';
-import { toastMessages } from '@/constants/toastMessages';
+import { authToastMessages } from '@/constants/toastMessages';
 import { toast } from 'sonner';
 
 function FormSignIn() {
@@ -43,17 +43,17 @@ function FormSignIn() {
       const user = await signInWithEmailAndPassword(auth, data.email, data.password);
       if (!user.user.emailVerified) {
         await logout();
-        toast.info(toastMessages.confirmEmail);
+        toast.info(authToastMessages.confirmEmail);
         router.push(routes.signin);
       } else {
-        toast.success(toastMessages.successSignIn);
+        toast.success(authToastMessages.successSignIn);
         router.push(routes.home);
       }
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/invalid-credential') {
-        toast.error(toastMessages.userNotFound);
+        toast.error(authToastMessages.userNotFound);
       } else {
-        toast.error(toastMessages.errorSignIn);
+        toast.error(authToastMessages.errorSignIn);
       }
     }
   };
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 87cd3eb..1b75771 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -25,7 +25,7 @@ import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { FirebaseError } from '@firebase/util';
 import { toast } from 'sonner';
-import { toastMessages } from '@/constants/toastMessages';
+import { authToastMessages } from '@/constants/toastMessages';
 
 function FormSignUp() {
   const router = useRouter();
@@ -44,16 +44,16 @@ function FormSignUp() {
       const userCredential = await createUserWithEmailAndPassword(auth, data.email, data.password);
       await logout();
       await updateProfile(userCredential.user, { displayName: data.name });
-      toast.warning(toastMessages.confirmEmail);
+      toast.warning(authToastMessages.confirmEmail);
       await sendEmailVerification(userCredential.user);
       router.push(routes.home);
-      setTimeout(() => toast.success(toastMessages.successSignUp), 4000);
+      setTimeout(() => toast.success(authToastMessages.successSignUp), 4000);
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/email-already-in-use') {
-        toast.warning(toastMessages.userAlreadyExist);
+        toast.warning(authToastMessages.userAlreadyExist);
         router.push(routes.signin);
       } else {
-        toast.error(toastMessages.errorSignUp);
+        toast.error(authToastMessages.errorSignUp);
       }
     }
   };
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index ffc2fdf..391d0f1 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -5,7 +5,7 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, logout } from '@/firebase';
 import { useRouter } from 'next/navigation';
 import { Button } from '@mui/material';
-import { toastMessages } from '@/constants/toastMessages';
+import { authToastMessages } from '@/constants/toastMessages';
 import { toast } from 'sonner';
 
 function Header() {
@@ -14,10 +14,10 @@ function Header() {
   const onLogout = async () => {
     try {
       await logout();
-      toast.info(toastMessages.signOutSuccess);
+      toast.info(authToastMessages.signOutSuccess);
       router.push(routes.home);
     } catch (error) {
-      toast.error(toastMessages.errorSignOut);
+      toast.error(authToastMessages.errorSignOut);
     }
   };
   return (
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
index 2fa04db..2aac65e 100644
--- a/constants/toastMessages.ts
+++ b/constants/toastMessages.ts
@@ -1,4 +1,4 @@
-export const toastMessages = {
+export const authToastMessages = {
   successSignIn: 'You have successfully signed in.',
   errorSignIn: 'Failed to sign in. Please try again.',
   userNotFound: 'Please check your email and password or create an account.',
@@ -8,6 +8,9 @@ export const toastMessages = {
   userAlreadyExist: 'User already exist. Please sign in.',
   signOutSuccess: 'You are sign out.',
   errorSignOut: 'Failed to sign out. Please try again.',
+};
+
+export const toastMessages = {
   errorSendQueryGraphiQL: 'Url not provided. Please provide endpoint url.',
   prettifyError: 'Failed to prettify query.',
 };

From 3dcfa9a25698284af9e8651e19799c6a34cf6b6e Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 14:55:32 +0400
Subject: [PATCH 093/157] refactor: relocate Response Section comp

---
 app/GRAPHQL/[[...endpoint]]/page.tsx                    | 2 +-
 app/[...rest]/page.tsx                                  | 4 ++--
 components/{RestClient => }/Form/index.tsx              | 4 ++--
 components/GraphiQLClient/index.tsx                     | 2 +-
 components/{RestClient => }/Response/EmptyState.tsx     | 0
 components/{RestClient => }/Response/ErrorState.tsx     | 0
 components/{RestClient => }/Response/ResponseBody.tsx   | 4 ++--
 components/{RestClient => }/Response/ResponseHeader.tsx | 0
 components/{RestClient => }/Response/index.tsx          | 0
 9 files changed, 8 insertions(+), 8 deletions(-)
 rename components/{RestClient => }/Form/index.tsx (98%)
 rename components/{RestClient => }/Response/EmptyState.tsx (100%)
 rename components/{RestClient => }/Response/ErrorState.tsx (100%)
 rename components/{RestClient => }/Response/ResponseBody.tsx (98%)
 rename components/{RestClient => }/Response/ResponseHeader.tsx (100%)
 rename components/{RestClient => }/Response/index.tsx (100%)

diff --git a/app/GRAPHQL/[[...endpoint]]/page.tsx b/app/GRAPHQL/[[...endpoint]]/page.tsx
index 39053cf..eb47393 100644
--- a/app/GRAPHQL/[[...endpoint]]/page.tsx
+++ b/app/GRAPHQL/[[...endpoint]]/page.tsx
@@ -1,4 +1,4 @@
-import ResponseSection from '@/components/RestClient/Response';
+import ResponseSection from '@/components/Response';
 import GraphiQLClient from '@/components/GraphiQLClient';
 import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
 import { base64ToText } from '@/utils/coderBase64';
diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
index 47418e7..dd1e8bc 100644
--- a/app/[...rest]/page.tsx
+++ b/app/[...rest]/page.tsx
@@ -1,5 +1,5 @@
-import RestForm from '@/components/RestClient/Form';
-import ResponseSection from '@/components/RestClient/Response';
+import RestForm from '@/components/Form';
+import ResponseSection from '@/components/Response';
 import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
 
 export default function RESTfull() {
diff --git a/components/RestClient/Form/index.tsx b/components/Form/index.tsx
similarity index 98%
rename from components/RestClient/Form/index.tsx
rename to components/Form/index.tsx
index 802cc65..af6531f 100644
--- a/components/RestClient/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 import { useEffect, useState } from 'react';
-import InputTable from '@/components/RestClient/Table/InputTable';
+import InputTable from '@/components/Table/InputTable';
 import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
 import Editor from '@monaco-editor/react';
 import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { methods } from '@/constants/restClientData';
 import { useRouter } from 'next/navigation';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import CustomTabPanel from './CustomTabPanel';
+import CustomTabPanel from '../Table/CustomTabPanel';
 import { selectAll, setAllState } from '@/redux/features/restfullClient/restfullSlice';
 import type { Method, Param, RequestType } from '@/types';
 import { fetcher } from '@/services/response';
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 8beb2be..ea7dd06 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from '@mui/material';
 import { Box } from '@mui/system';
-import CustomTabPanel from '@/components/RestClient/Form/CustomTabPanel';
+import CustomTabPanel from '../Table/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { setResponse } from '@/redux/features/mainSlice';
diff --git a/components/RestClient/Response/EmptyState.tsx b/components/Response/EmptyState.tsx
similarity index 100%
rename from components/RestClient/Response/EmptyState.tsx
rename to components/Response/EmptyState.tsx
diff --git a/components/RestClient/Response/ErrorState.tsx b/components/Response/ErrorState.tsx
similarity index 100%
rename from components/RestClient/Response/ErrorState.tsx
rename to components/Response/ErrorState.tsx
diff --git a/components/RestClient/Response/ResponseBody.tsx b/components/Response/ResponseBody.tsx
similarity index 98%
rename from components/RestClient/Response/ResponseBody.tsx
rename to components/Response/ResponseBody.tsx
index 31f79b7..3a2b31e 100644
--- a/components/RestClient/Response/ResponseBody.tsx
+++ b/components/Response/ResponseBody.tsx
@@ -1,9 +1,9 @@
+import { useMemo } from 'react';
 import { selectResponse } from '@/redux/features/mainSlice';
 import { useAppSelector } from '@/redux/hooks';
 import Editor from '@monaco-editor/react';
 import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-import CustomTabPanel from '../Form/CustomTabPanel';
-import { useMemo } from 'react';
+import CustomTabPanel from '../Table/CustomTabPanel';
 
 type PropTypes = {
   activeTab: number;
diff --git a/components/RestClient/Response/ResponseHeader.tsx b/components/Response/ResponseHeader.tsx
similarity index 100%
rename from components/RestClient/Response/ResponseHeader.tsx
rename to components/Response/ResponseHeader.tsx
diff --git a/components/RestClient/Response/index.tsx b/components/Response/index.tsx
similarity index 100%
rename from components/RestClient/Response/index.tsx
rename to components/Response/index.tsx

From 67e313e020a1d145d96ca243593b825ce5001af8 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 14:58:22 +0400
Subject: [PATCH 094/157] refactor: relocate Table component

---
 components/RestClient/Form/CustomTabPanel.tsx | 27 -------------------
 .../{RestClient => }/Table/InputTable.tsx     |  0
 .../{RestClient => }/Table/InputTableRow.tsx  |  0
 3 files changed, 27 deletions(-)
 delete mode 100644 components/RestClient/Form/CustomTabPanel.tsx
 rename components/{RestClient => }/Table/InputTable.tsx (100%)
 rename components/{RestClient => }/Table/InputTableRow.tsx (100%)

diff --git a/components/RestClient/Form/CustomTabPanel.tsx b/components/RestClient/Form/CustomTabPanel.tsx
deleted file mode 100644
index 786a47d..0000000
--- a/components/RestClient/Form/CustomTabPanel.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Box } from '@mui/material';
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-  className?: string;
-}
-
-function CustomTabPanel(props: TabPanelProps) {
-  const { children, value, index, className, ...other } = props;
-
-  return (
-    <div
-      className={className}
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box className="h-full w-full">{children}</Box>}
-    </div>
-  );
-}
-
-export default CustomTabPanel;
diff --git a/components/RestClient/Table/InputTable.tsx b/components/Table/InputTable.tsx
similarity index 100%
rename from components/RestClient/Table/InputTable.tsx
rename to components/Table/InputTable.tsx
diff --git a/components/RestClient/Table/InputTableRow.tsx b/components/Table/InputTableRow.tsx
similarity index 100%
rename from components/RestClient/Table/InputTableRow.tsx
rename to components/Table/InputTableRow.tsx

From e8a359b8ce6d8c83f2a4225a5dfd1d97a59ad222 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 15:08:56 +0400
Subject: [PATCH 095/157] refactor: relocate components

---
 app/[...rest]/page.tsx                        |  2 +-
 app/loading.tsx                               |  4 +--
 components/GraphiQLClient/index.tsx           |  2 +-
 components/PrivateRoute/index.tsx             |  2 +-
 components/Response/ResponseBody.tsx          |  2 +-
 components/Response/index.tsx                 |  4 +--
 components/RestClient/ResponseSection.tsx     | 24 -----------------
 components/{Form => RestClient}/index.tsx     |  2 +-
 components/UI/CustomTabPanel.tsx              | 27 +++++++++++++++++++
 .../{Ellipsis/index.tsx => UI/Ellipsis.tsx}   |  0
 components/{Ellipsis => UI}/ellipsis.test.tsx |  2 +-
 11 files changed, 37 insertions(+), 34 deletions(-)
 delete mode 100644 components/RestClient/ResponseSection.tsx
 rename components/{Form => RestClient}/index.tsx (99%)
 create mode 100644 components/UI/CustomTabPanel.tsx
 rename components/{Ellipsis/index.tsx => UI/Ellipsis.tsx} (100%)
 rename components/{Ellipsis => UI}/ellipsis.test.tsx (90%)

diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
index dd1e8bc..23b7a43 100644
--- a/app/[...rest]/page.tsx
+++ b/app/[...rest]/page.tsx
@@ -1,4 +1,4 @@
-import RestForm from '@/components/Form';
+import RestForm from '@/components/RestClient';
 import ResponseSection from '@/components/Response';
 import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
 
diff --git a/app/loading.tsx b/app/loading.tsx
index fd35778..daa6eaa 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,9 +1,9 @@
-import Elipsis from '@/components/Ellipsis';
+import Ellipsis from '@/components/UI/Ellipsis';
 
 export default function Loading() {
   return (
     <div className="flex h-[calc(100vh-6rem)] w-screen items-center justify-center">
-      <Elipsis />
+      <Ellipsis />
     </div>
   );
 }
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index ea7dd06..1ec611e 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from '@mui/material';
 import { Box } from '@mui/system';
-import CustomTabPanel from '../Table/CustomTabPanel';
+import CustomTabPanel from '../UI/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
 import { setResponse } from '@/redux/features/mainSlice';
diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index 1dd3749..da83180 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -5,7 +5,7 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth } from '@/firebase';
 import { usePathname, useRouter } from 'next/navigation';
 import { routes } from '@/constants/routes';
-import Elipsis from '../Ellipsis';
+import Elipsis from '../UI/Ellipsis';
 
 const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
   const [user, loading] = useAuthState(auth);
diff --git a/components/Response/ResponseBody.tsx b/components/Response/ResponseBody.tsx
index 3a2b31e..2bc21f7 100644
--- a/components/Response/ResponseBody.tsx
+++ b/components/Response/ResponseBody.tsx
@@ -3,7 +3,7 @@ import { selectResponse } from '@/redux/features/mainSlice';
 import { useAppSelector } from '@/redux/hooks';
 import Editor from '@monaco-editor/react';
 import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-import CustomTabPanel from '../Table/CustomTabPanel';
+import CustomTabPanel from '../UI/CustomTabPanel';
 
 type PropTypes = {
   activeTab: number;
diff --git a/components/Response/index.tsx b/components/Response/index.tsx
index 4f07637..0a4bfe0 100644
--- a/components/Response/index.tsx
+++ b/components/Response/index.tsx
@@ -5,10 +5,10 @@ import { Box } from '@mui/material';
 import { useAppSelector } from '@/redux/hooks';
 import { selectAllMainState } from '@/redux/features/mainSlice';
 import EmptyState from './EmptyState';
-import ResponseBody from './ResponseBody';
 import ResponseHeader from './ResponseHeader';
-import Ellipsis from '@/components/Ellipsis';
+import ResponseBody from './ResponseBody';
 import ErrorState from './ErrorState';
+import Ellipsis from '../UI/Ellipsis';
 
 function ResponseSection() {
   const [activeTab, setActiveTab] = useState(0);
diff --git a/components/RestClient/ResponseSection.tsx b/components/RestClient/ResponseSection.tsx
deleted file mode 100644
index 8d06de7..0000000
--- a/components/RestClient/ResponseSection.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import CodeMirror from '@uiw/react-codemirror';
-import { json } from '@codemirror/lang-json';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode/cjs/dark';
-import { Box } from '@mui/material';
-
-function ResponseSection({ data }: { data: string }) {
-  return (
-    <Box component="section" className="p-3">
-      <CodeMirror
-        className="w-full"
-        height="500px"
-        readOnly
-        value={data}
-        theme={vscodeDark}
-        basicSetup={{
-          foldGutter: true,
-        }}
-        extensions={[json()]}
-      />
-    </Box>
-  );
-}
-export default ResponseSection;
diff --git a/components/Form/index.tsx b/components/RestClient/index.tsx
similarity index 99%
rename from components/Form/index.tsx
rename to components/RestClient/index.tsx
index af6531f..59a4ef9 100644
--- a/components/Form/index.tsx
+++ b/components/RestClient/index.tsx
@@ -7,7 +7,7 @@ import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-for
 import { methods } from '@/constants/restClientData';
 import { useRouter } from 'next/navigation';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import CustomTabPanel from '../Table/CustomTabPanel';
+import CustomTabPanel from '../UI/CustomTabPanel';
 import { selectAll, setAllState } from '@/redux/features/restfullClient/restfullSlice';
 import type { Method, Param, RequestType } from '@/types';
 import { fetcher } from '@/services/response';
diff --git a/components/UI/CustomTabPanel.tsx b/components/UI/CustomTabPanel.tsx
new file mode 100644
index 0000000..786a47d
--- /dev/null
+++ b/components/UI/CustomTabPanel.tsx
@@ -0,0 +1,27 @@
+import { Box } from '@mui/material';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+  className?: string;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, className, ...other } = props;
+
+  return (
+    <div
+      className={className}
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box className="h-full w-full">{children}</Box>}
+    </div>
+  );
+}
+
+export default CustomTabPanel;
diff --git a/components/Ellipsis/index.tsx b/components/UI/Ellipsis.tsx
similarity index 100%
rename from components/Ellipsis/index.tsx
rename to components/UI/Ellipsis.tsx
diff --git a/components/Ellipsis/ellipsis.test.tsx b/components/UI/ellipsis.test.tsx
similarity index 90%
rename from components/Ellipsis/ellipsis.test.tsx
rename to components/UI/ellipsis.test.tsx
index f0da27f..5eebbee 100644
--- a/components/Ellipsis/ellipsis.test.tsx
+++ b/components/UI/ellipsis.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import Ellipsis from '.';
+import Ellipsis from './Ellipsis';
 
 describe('Ellipsis Component', () => {
   it('renders the loading svg', () => {

From 13ad04bf903ed390ba5111b1c62ff64fd49d8e71 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 15:22:10 +0400
Subject: [PATCH 096/157] refactor:  merge slice directories into a single
 folder structure, fix restful name convention

---
 app/[...rest]/page.tsx                         |  4 ++--
 components/DataTable/index.tsx                 |  4 ++--
 components/GraphiQLClient/GraphiqlHeader.tsx   |  2 +-
 components/GraphiQLClient/UrlSection.tsx       |  2 +-
 components/GraphiQLClient/VariablesSection.tsx |  2 +-
 components/GraphiQLClient/index.tsx            |  2 +-
 components/Response/ResponseHeader.tsx         |  2 +-
 components/RestClient/index.tsx                |  4 ++--
 components/Welcome/index.tsx                   |  2 +-
 constants/routes.ts                            |  2 +-
 .../{graphiqlClient => }/graphiqlSlice.ts      |  0
 .../restfullSlice.ts => restfulSlice.ts}       | 18 +++++++++---------
 redux/store.ts                                 |  6 +++---
 utils/setBrowserUrl.ts                         |  2 +-
 14 files changed, 26 insertions(+), 26 deletions(-)
 rename redux/features/{graphiqlClient => }/graphiqlSlice.ts (100%)
 rename redux/features/{restfullClient/restfullSlice.ts => restfulSlice.ts} (80%)

diff --git a/app/[...rest]/page.tsx b/app/[...rest]/page.tsx
index 23b7a43..245c450 100644
--- a/app/[...rest]/page.tsx
+++ b/app/[...rest]/page.tsx
@@ -2,10 +2,10 @@ import RestForm from '@/components/RestClient';
 import ResponseSection from '@/components/Response';
 import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
 
-export default function RESTfull() {
+export default function RESTful() {
   return (
     <main className="flex h-[calc(100vh-6rem)]">
-      <ResizableGroup autoSaveId="restfull" direction="vertical">
+      <ResizableGroup autoSaveId="restful" direction="vertical">
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
           <RestForm />
         </ResizablePanel>
diff --git a/components/DataTable/index.tsx b/components/DataTable/index.tsx
index a38325c..8da1d09 100644
--- a/components/DataTable/index.tsx
+++ b/components/DataTable/index.tsx
@@ -20,7 +20,7 @@ import { routes } from '@/constants/routes';
 import type { DataTableType, Order, RequestType } from '@/types';
 import { useRouter } from 'next/navigation';
 import { generateUrl } from '@/utils/generateUrl';
-import { setAllState } from '@/redux/features/restfullClient/restfullSlice';
+import { setAllState } from '@/redux/features/restfulSlice';
 import { useAppDispatch } from '@/redux/hooks';
 import { resetResponse } from '@/redux/features/mainSlice';
 
@@ -108,7 +108,7 @@ export default function DataTable() {
         </Typography>
         <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
           It&apos;s empty here. Try:
-          <Button href={routes.restfull} color="inherit" variant="outlined">
+          <Button href={routes.restful} color="inherit" variant="outlined">
             REST Client
           </Button>
           <Button href={routes.graphql} color="inherit" variant="outlined">
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index ff1f2c9..fd4f4c5 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -3,7 +3,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { GQLHeader, selectAll, setHeaders } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { GQLHeader, selectAll, setHeaders } from '@/redux/features/graphiqlSlice';
 import { setBrowserUrl } from '@/utils/setBrowserUrl';
 import { useRouter } from 'next/navigation';
 
diff --git a/components/GraphiQLClient/UrlSection.tsx b/components/GraphiQLClient/UrlSection.tsx
index 305a50d..005d5ab 100644
--- a/components/GraphiQLClient/UrlSection.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { TextField } from '@mui/material';
-import { selectAll, setSdlUrl, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setSdlUrl, setUrl } from '@/redux/features/graphiqlSlice';
 import React from 'react';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { FormState, UseFormRegister } from 'react-hook-form';
diff --git a/components/GraphiQLClient/VariablesSection.tsx b/components/GraphiQLClient/VariablesSection.tsx
index 337dd56..45fbd3f 100644
--- a/components/GraphiQLClient/VariablesSection.tsx
+++ b/components/GraphiQLClient/VariablesSection.tsx
@@ -1,6 +1,6 @@
 import { useVariableEditor, VariableEditor, useVariablesEditorState } from '@graphiql/react';
 import { useAppDispatch } from '@/redux/hooks';
-import { setVariables } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { setVariables } from '@/redux/features/graphiqlSlice';
 
 function VariablesSection() {
   const dispatch = useAppDispatch();
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 1ec611e..9253e37 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -5,7 +5,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from
 import { Box } from '@mui/system';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlSlice';
 import { setResponse } from '@/redux/features/mainSlice';
 import { useRouter } from 'next/navigation';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
diff --git a/components/Response/ResponseHeader.tsx b/components/Response/ResponseHeader.tsx
index 4fffc34..b9e4289 100644
--- a/components/Response/ResponseHeader.tsx
+++ b/components/Response/ResponseHeader.tsx
@@ -21,7 +21,7 @@ function ResponseHeader({ activeTab, handleTabChange }: PropTypes) {
       <Tabs
         value={activeTab}
         onChange={handleTabChange}
-        aria-label="restfull request tabs"
+        aria-label="restful request tabs"
         TabIndicatorProps={{
           className: 'bg-orange-500 mb-0 h-[2px] bottom-2',
         }}
diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index 59a4ef9..cd828eb 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -8,7 +8,7 @@ import { methods } from '@/constants/restClientData';
 import { useRouter } from 'next/navigation';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import CustomTabPanel from '../UI/CustomTabPanel';
-import { selectAll, setAllState } from '@/redux/features/restfullClient/restfullSlice';
+import { selectAll, setAllState } from '@/redux/features/restfulSlice';
 import type { Method, Param, RequestType } from '@/types';
 import { fetcher } from '@/services/response';
 import { generateUrl } from '@/utils/generateUrl';
@@ -134,7 +134,7 @@ function RestForm() {
           <Tabs
             value={activeTab}
             onChange={handleTabChange}
-            aria-label="restfull request tabs"
+            aria-label="restful request tabs"
             TabIndicatorProps={{
               className: 'bg-orange-500 mb-0 h-[2px] bottom-2',
             }}
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index f5e985a..c2f42a9 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -26,7 +26,7 @@ const Welcome = () => {
           <div>
             <h2 className="text-center">Welcome Back, {user.displayName}!</h2>
             <div className="flex gap-2">
-              <Link href={routes.restfull} className="text-blue-500 hover:text-blue-700">
+              <Link href={routes.restful} className="text-blue-500 hover:text-blue-700">
                 REST Client
               </Link>
               <Link href={routes.graphql} className="text-blue-500 hover:text-blue-700">
diff --git a/constants/routes.ts b/constants/routes.ts
index cb7bca0..c00587c 100644
--- a/constants/routes.ts
+++ b/constants/routes.ts
@@ -3,6 +3,6 @@ export const routes = {
   signin: '/signin',
   signup: '/signup',
   graphql: '/GRAPHQL',
-  restfull: '/rest',
+  restful: '/rest',
   history: '/history',
 };
diff --git a/redux/features/graphiqlClient/graphiqlSlice.ts b/redux/features/graphiqlSlice.ts
similarity index 100%
rename from redux/features/graphiqlClient/graphiqlSlice.ts
rename to redux/features/graphiqlSlice.ts
diff --git a/redux/features/restfullClient/restfullSlice.ts b/redux/features/restfulSlice.ts
similarity index 80%
rename from redux/features/restfullClient/restfullSlice.ts
rename to redux/features/restfulSlice.ts
index 7e33ce9..d0d1c24 100644
--- a/redux/features/restfullClient/restfullSlice.ts
+++ b/redux/features/restfulSlice.ts
@@ -1,7 +1,7 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import type { Method, Param, RequestType } from '@/types';
 
-export interface RestfullSliceState {
+export interface RestfulSliceState {
   id: string;
   method: Method;
   url: string;
@@ -12,7 +12,7 @@ export interface RestfullSliceState {
   date: string;
 }
 
-const initialState: RestfullSliceState = {
+const initialState: RestfulSliceState = {
   id: '',
   method: 'GET',
   url: '',
@@ -23,8 +23,8 @@ const initialState: RestfullSliceState = {
   date: '',
 };
 
-export const restfullSlice = createSlice({
-  name: 'restfull',
+export const restfulSlice = createSlice({
+  name: 'restful',
   initialState,
   reducers: (create) => ({
     setAllState: create.reducer((state, action: PayloadAction<RequestType>) => {
@@ -52,12 +52,12 @@ export const restfullSlice = createSlice({
   }),
 
   selectors: {
-    selectAll: (restfull) => restfull,
-    selectMethod: (restfull) => restfull.method,
-    selectUrl: (restfull) => restfull.url,
+    selectAll: (restful) => restful,
+    selectMethod: (restful) => restful.method,
+    selectUrl: (restful) => restful.url,
   },
 });
 
-export const { setMethod, setAllState, setURL, setQueryParam, setHeaders } = restfullSlice.actions;
+export const { setMethod, setAllState, setURL, setQueryParam, setHeaders } = restfulSlice.actions;
 
-export const { selectAll, selectMethod } = restfullSlice.selectors;
+export const { selectAll, selectMethod } = restfulSlice.selectors;
diff --git a/redux/store.ts b/redux/store.ts
index e9631e2..8eccd50 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,10 +1,10 @@
 import type { Action, ThunkAction } from '@reduxjs/toolkit';
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
-import { restfullSlice } from './features/restfullClient/restfullSlice';
+import { restfulSlice } from './features/restfulSlice';
+import { graphiqlSlice } from '@/redux/features/graphiqlSlice';
 import { mainSlice } from './features/mainSlice';
-import { graphiqlSlice } from '@/redux/features/graphiqlClient/graphiqlSlice';
 
-const rootReducer = combineSlices(mainSlice, restfullSlice, graphiqlSlice);
+const rootReducer = combineSlices(mainSlice, restfulSlice, graphiqlSlice);
 
 export type RootState = ReturnType<typeof rootReducer>;
 
diff --git a/utils/setBrowserUrl.ts b/utils/setBrowserUrl.ts
index d777f71..859f9e6 100644
--- a/utils/setBrowserUrl.ts
+++ b/utils/setBrowserUrl.ts
@@ -1,7 +1,7 @@
 import { textToBase64 } from '@/utils/coderBase64';
 import { getFilteredQuery } from '@/utils/getiFlteredQuery';
 import { routes } from '@/constants/routes';
-import { GQLHeader } from '@/redux/features/graphiqlClient/graphiqlSlice';
+import { GQLHeader } from '@/redux/features/graphiqlSlice';
 
 export function stringFromHeaders(headers: GQLHeader[]) {
   return headers.length ? '?' + headers.map((header) => `${header.key}=${header.value}`).join('&') : '';

From c3110a673d3d70f0cf55cb8139592a3b72bfc634 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 15:46:48 +0400
Subject: [PATCH 097/157] refactor: change types

---
 components/DataTable/DataTableHead.tsx        |  2 +-
 components/DataTable/index.tsx                |  5 +-
 components/GraphiQLClient/UrlSection.tsx      |  2 +-
 components/GraphiQLClient/index.tsx           |  2 +-
 components/RestClient/index.tsx               | 14 +++---
 constants/restClientData.ts                   |  4 +-
 redux/features/mainSlice.ts                   |  6 +--
 redux/features/restfulSlice.ts                | 18 ++++----
 types/api.types.ts                            | 30 ++++++++++++
 types/dataTable.types.ts                      | 15 ++++++
 types/index.ts                                | 46 -------------------
 .../url-graphql.types.ts                      |  0
 utils/generateUrl.ts                          |  4 +-
 utils/getComparator.ts                        |  2 +-
 utils/replaceValuesWithPlaceholders.ts        |  6 +--
 utils/replaceVariables.ts                     |  8 ++--
 16 files changed, 82 insertions(+), 82 deletions(-)
 create mode 100644 types/api.types.ts
 create mode 100644 types/dataTable.types.ts
 delete mode 100644 types/index.ts
 rename interfaces/url-graphql.interfase.ts => types/url-graphql.types.ts (100%)

diff --git a/components/DataTable/DataTableHead.tsx b/components/DataTable/DataTableHead.tsx
index fbb20ce..7e8b47a 100644
--- a/components/DataTable/DataTableHead.tsx
+++ b/components/DataTable/DataTableHead.tsx
@@ -1,6 +1,6 @@
 import { Box, Checkbox, TableCell, TableHead, TableRow, TableSortLabel } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
-import type { DataTableType, HeadCell, Order } from '@/types';
+import type { DataTableType, HeadCell, Order } from '@/types/dataTable.types';
 
 interface DataTableProps {
   numSelected: number;
diff --git a/components/DataTable/index.tsx b/components/DataTable/index.tsx
index 8da1d09..19b2f0f 100644
--- a/components/DataTable/index.tsx
+++ b/components/DataTable/index.tsx
@@ -17,15 +17,16 @@ import { getComparator } from '@/utils/getComparator';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import DataTableBody from './DataTableBody';
 import { routes } from '@/constants/routes';
-import type { DataTableType, Order, RequestType } from '@/types';
 import { useRouter } from 'next/navigation';
 import { generateUrl } from '@/utils/generateUrl';
 import { setAllState } from '@/redux/features/restfulSlice';
 import { useAppDispatch } from '@/redux/hooks';
 import { resetResponse } from '@/redux/features/mainSlice';
+import type { DataTableType, Order } from '@/types/dataTable.types';
+import type { ApiRequest } from '@/types/api.types';
 
 export default function DataTable() {
-  const { storedValue: requests, setLocalStorageValue } = useLocalStorage<RequestType[]>('requests', []);
+  const { storedValue: requests, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
   const dispatch = useAppDispatch();
   const [order, setOrder] = useState<Order>('desc');
   const [orderBy, setOrderBy] = useState<keyof DataTableType>('date');
diff --git a/components/GraphiQLClient/UrlSection.tsx b/components/GraphiQLClient/UrlSection.tsx
index 005d5ab..1265c05 100644
--- a/components/GraphiQLClient/UrlSection.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -5,7 +5,7 @@ import { selectAll, setSdlUrl, setUrl } from '@/redux/features/graphiqlSlice';
 import React from 'react';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { FormState, UseFormRegister } from 'react-hook-form';
-import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
+import { UrlGraphql } from '@/types/url-graphql.types';
 
 interface UrlFormInterface {
   errors: FormState<UrlGraphql>['errors'];
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 9253e37..6496329 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -16,7 +16,7 @@ import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
 import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useForm } from 'react-hook-form';
-import { UrlGraphql } from '@/interfaces/url-graphql.interfase';
+import { UrlGraphql } from '@/types/url-graphql.types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { urlValidationSchema } from '@/validation/url-graphql.validation';
 import UrlSection from '@/components/GraphiQLClient/UrlSection';
diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index cd828eb..b067a89 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -9,7 +9,7 @@ import { useRouter } from 'next/navigation';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { selectAll, setAllState } from '@/redux/features/restfulSlice';
-import type { Method, Param, RequestType } from '@/types';
+import type { HttpMethod, RequestParam, ApiRequest } from '@/types/api.types';
 import { fetcher } from '@/services/response';
 import { generateUrl } from '@/utils/generateUrl';
 import { nanoid } from '@reduxjs/toolkit';
@@ -19,17 +19,17 @@ import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { toast } from 'sonner';
 
 export type Inputs = {
-  method: Method;
+  method: HttpMethod;
   url: string;
-  params: Param[];
-  headers: Param[];
+  params: RequestParam[];
+  headers: RequestParam[];
   body: string;
-  variables: Param[];
+  variables: RequestParam[];
 };
 
 function RestForm() {
   const [activeTab, setActiveTab] = useState(0);
-  const { storedValue: request, setLocalStorageValue } = useLocalStorage<RequestType[]>('requests', []);
+  const { storedValue: request, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
   const dispatch = useAppDispatch();
   const { method, url, params, headers, body, variables } = useAppSelector(selectAll);
   const router = useRouter();
@@ -57,7 +57,7 @@ function RestForm() {
     const id = nanoid();
     const date = `${new Date().toISOString()}`;
 
-    const newRequest: RequestType = { id, method, url, params, headers, body, variables, date };
+    const newRequest: ApiRequest = { id, method, url, params, headers, body, variables, date };
     setLocalStorageValue([...request, newRequest]);
     dispatch(setAllState(newRequest));
 
diff --git a/constants/restClientData.ts b/constants/restClientData.ts
index b4e69db..2e43404 100644
--- a/constants/restClientData.ts
+++ b/constants/restClientData.ts
@@ -1,6 +1,6 @@
-import { Method } from '@/types';
+import { HttpMethod } from '@/types/api.types';
 
-export const methods: { name: Method; color: string }[] = [
+export const methods: { name: HttpMethod; color: string }[] = [
   { name: 'GET', color: 'text-green-500' },
   { name: 'POST', color: 'text-yellow-500' },
   { name: 'PUT', color: 'text-blue-500' },
diff --git a/redux/features/mainSlice.ts b/redux/features/mainSlice.ts
index 16f96d0..a109852 100644
--- a/redux/features/mainSlice.ts
+++ b/redux/features/mainSlice.ts
@@ -1,8 +1,8 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-import type { ResponseType } from '@/types';
+import type { ApiResponse } from '@/types/api.types';
 
 export interface MainSliceState {
-  response: ResponseType;
+  response: ApiResponse;
   isLoading: boolean;
 }
 
@@ -22,7 +22,7 @@ export const mainSlice = createSlice({
   name: 'main',
   initialState,
   reducers: {
-    setResponse: (state, action: PayloadAction<ResponseType>) => {
+    setResponse: (state, action: PayloadAction<ApiResponse>) => {
       state.response = action.payload;
     },
     resetResponse: (state) => {
diff --git a/redux/features/restfulSlice.ts b/redux/features/restfulSlice.ts
index d0d1c24..6504909 100644
--- a/redux/features/restfulSlice.ts
+++ b/redux/features/restfulSlice.ts
@@ -1,14 +1,14 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-import type { Method, Param, RequestType } from '@/types';
+import type { HttpMethod, RequestParam, ApiRequest } from '@/types/api.types';
 
 export interface RestfulSliceState {
   id: string;
-  method: Method;
+  method: HttpMethod;
   url: string;
-  params: Param[];
-  headers: Param[];
+  params: RequestParam[];
+  headers: RequestParam[];
   body: string;
-  variables: Param[];
+  variables: RequestParam[];
   date: string;
 }
 
@@ -27,7 +27,7 @@ export const restfulSlice = createSlice({
   name: 'restful',
   initialState,
   reducers: (create) => ({
-    setAllState: create.reducer((state, action: PayloadAction<RequestType>) => {
+    setAllState: create.reducer((state, action: PayloadAction<ApiRequest>) => {
       state.id = action.payload.id;
       state.method = action.payload.method;
       state.url = action.payload.url;
@@ -37,16 +37,16 @@ export const restfulSlice = createSlice({
       state.variables = action.payload.variables;
       state.date = action.payload.date;
     }),
-    setMethod: create.reducer((state, action: PayloadAction<Method>) => {
+    setMethod: create.reducer((state, action: PayloadAction<HttpMethod>) => {
       state.method = action.payload;
     }),
     setURL: create.reducer((state, action: PayloadAction<string>) => {
       state.url = action.payload;
     }),
-    setQueryParam: create.reducer((state, action: PayloadAction<Param[]>) => {
+    setQueryParam: create.reducer((state, action: PayloadAction<RequestParam[]>) => {
       state.params = action.payload;
     }),
-    setHeaders: create.reducer((state, action: PayloadAction<Param[]>) => {
+    setHeaders: create.reducer((state, action: PayloadAction<RequestParam[]>) => {
       state.headers = action.payload;
     }),
   }),
diff --git a/types/api.types.ts b/types/api.types.ts
new file mode 100644
index 0000000..9f578d9
--- /dev/null
+++ b/types/api.types.ts
@@ -0,0 +1,30 @@
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
+
+export interface ApiRequest {
+  id: string;
+  method: HttpMethod;
+  url: string;
+  params: RequestParam[];
+  headers: RequestParam[];
+  body: string;
+  variables: RequestParam[];
+  date: string;
+  sdl?: string;
+}
+
+export interface ApiResponse {
+  data: string;
+  status: number;
+  statusText: string;
+  parsedHeaders: {
+    [key: string]: string;
+  };
+  success: boolean;
+  responseTime: number;
+}
+
+export interface RequestParam {
+  isChecked: boolean;
+  key: string;
+  value: string;
+}
diff --git a/types/dataTable.types.ts b/types/dataTable.types.ts
new file mode 100644
index 0000000..4c3be11
--- /dev/null
+++ b/types/dataTable.types.ts
@@ -0,0 +1,15 @@
+export interface DataTableType {
+  id: string;
+  method: string;
+  url: string;
+  date: string;
+}
+
+export interface HeadCell {
+  disablePadding: boolean;
+  id: keyof DataTableType;
+  label: string;
+  numeric: boolean;
+}
+
+export type Order = 'asc' | 'desc';
diff --git a/types/index.ts b/types/index.ts
deleted file mode 100644
index b4e65a0..0000000
--- a/types/index.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
-
-export interface RequestType {
-  id: string;
-  method: Method;
-  url: string;
-  params: Param[];
-  headers: Param[];
-  body: string;
-  variables: Param[];
-  date: string;
-  sdl?: string;
-}
-
-export interface ResponseType {
-  data: string;
-  status: number;
-  statusText: string;
-  parsedHeaders: {
-    [k: string]: string;
-  };
-  success: boolean;
-  responseTime: number;
-}
-
-export interface Param {
-  isChecked: boolean;
-  key: string;
-  value: string;
-}
-
-export interface DataTableType {
-  id: string;
-  method: string;
-  url: string;
-  date: string;
-}
-
-export interface HeadCell {
-  disablePadding: boolean;
-  id: keyof DataTableType;
-  label: string;
-  numeric: boolean;
-}
-
-export type Order = 'asc' | 'desc';
diff --git a/interfaces/url-graphql.interfase.ts b/types/url-graphql.types.ts
similarity index 100%
rename from interfaces/url-graphql.interfase.ts
rename to types/url-graphql.types.ts
diff --git a/utils/generateUrl.ts b/utils/generateUrl.ts
index 572de6d..f376951 100644
--- a/utils/generateUrl.ts
+++ b/utils/generateUrl.ts
@@ -1,7 +1,7 @@
-import { RequestType } from '@/types';
+import { ApiRequest } from '@/types/api.types';
 import { createQueryString } from './createQueryString';
 
-export function generateUrl(req: RequestType): string {
+export function generateUrl(req: ApiRequest): string {
   const base64url = btoa(req.url);
   const param = createQueryString(req.params);
   const base64param = param && btoa(`?${param}`);
diff --git a/utils/getComparator.ts b/utils/getComparator.ts
index 1171231..e761149 100644
--- a/utils/getComparator.ts
+++ b/utils/getComparator.ts
@@ -1,4 +1,4 @@
-import type { DataTableType, Order } from '@/types';
+import type { DataTableType, Order } from '@/types/dataTable.types';
 
 const descendingComparator = <T>(a: T, b: T, orderBy: keyof T): number => {
   if (b[orderBy] < a[orderBy]) {
diff --git a/utils/replaceValuesWithPlaceholders.ts b/utils/replaceValuesWithPlaceholders.ts
index 10a01d4..b85ab74 100644
--- a/utils/replaceValuesWithPlaceholders.ts
+++ b/utils/replaceValuesWithPlaceholders.ts
@@ -1,6 +1,6 @@
-import { RequestType } from '@/types';
+import { ApiRequest } from '@/types/api.types';
 
-export function replaceValuesWithPlaceholders(obj: RequestType): RequestType {
+export function replaceValuesWithPlaceholders(obj: ApiRequest): ApiRequest {
   let jsonString = JSON.stringify(obj);
 
   obj.variables.forEach((variable) => {
@@ -8,5 +8,5 @@ export function replaceValuesWithPlaceholders(obj: RequestType): RequestType {
     jsonString = jsonString.replace(regex, `{{${variable.key}}}`);
   });
 
-  return JSON.parse(jsonString) as RequestType;
+  return JSON.parse(jsonString) as ApiRequest;
 }
diff --git a/utils/replaceVariables.ts b/utils/replaceVariables.ts
index 741a2d8..ca127ea 100644
--- a/utils/replaceVariables.ts
+++ b/utils/replaceVariables.ts
@@ -1,12 +1,12 @@
-import { Param, RequestType } from '@/types';
+import { ApiRequest, RequestParam } from '@/types/api.types';
 
-export function replaceVariables(obj: RequestType): RequestType {
+export function replaceVariables(obj: ApiRequest): ApiRequest {
   let jsonString = JSON.stringify(obj);
 
-  obj.variables.forEach((variable: Param) => {
+  obj.variables.forEach((variable: RequestParam) => {
     const regex = new RegExp(`{{${variable.key}}}`, 'g');
     jsonString = jsonString.replace(regex, variable.value);
   });
 
-  return JSON.parse(jsonString) as RequestType;
+  return JSON.parse(jsonString) as ApiRequest;
 }

From b3e7c18f29b733771c854f1e2e5d833403370c3b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 15:53:38 +0400
Subject: [PATCH 098/157] fix: deployment type declaration error

---
 components/DataTable/DataTableBody.tsx | 2 +-
 components/FormSignIn/index.tsx        | 2 +-
 components/FormSignUp/index.tsx        | 2 +-
 utils/createQueryString.ts             | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/DataTable/DataTableBody.tsx b/components/DataTable/DataTableBody.tsx
index ba179fe..e2ed105 100644
--- a/components/DataTable/DataTableBody.tsx
+++ b/components/DataTable/DataTableBody.tsx
@@ -1,4 +1,4 @@
-import type { DataTableType } from '@/types';
+import type { DataTableType } from '@/types/dataTable.types';
 import { Checkbox, TableBody, TableCell, TableRow } from '@mui/material';
 
 interface DataTableBodyProps {
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 4f05d29..4e32b8c 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
-import { SignInData } from '@/types/auth.types';
+import type { SignInData } from '@/types/auth.types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { signInValidationSchema } from '@/validation/signin.validation';
 import {
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 1b75771..78dd9e5 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
-import { SignUpData } from '@/types/auth.types';
+import type { SignUpData } from '@/types/auth.types';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 import {
diff --git a/utils/createQueryString.ts b/utils/createQueryString.ts
index 488f1dd..23b337f 100644
--- a/utils/createQueryString.ts
+++ b/utils/createQueryString.ts
@@ -1,6 +1,6 @@
-import type { Param } from '@/types';
+import type { RequestParam } from '@/types/api.types';
 
-export const createQueryString = (query: Param[] | undefined) => {
+export const createQueryString = (query: RequestParam[] | undefined) => {
   if (!query) return '';
   const queryString = query
     .map((item) => {

From 28e5de3260e3e0f4d40be69596a36768bf161a41 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 16:22:07 +0400
Subject: [PATCH 099/157] chore: uninstall codemirror packages

---
 package-lock.json | 210 +++-------------------------------------------
 package.json      |   6 --
 2 files changed, 11 insertions(+), 205 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a2f05ad..7e67f6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,6 @@
       "name": "graphiql-app",
       "version": "0.1.0",
       "dependencies": {
-        "@codemirror/commands": "^6.6.0",
-        "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/view": "^6.33.0",
         "@emotion/cache": "^11.13.1",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
@@ -21,9 +18,6 @@
         "@mui/material": "^5.16.7",
         "@mui/material-nextjs": "^5.16.6",
         "@reduxjs/toolkit": "^2.2.7",
-        "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
-        "@uiw/codemirror-theme-vscode": "^4.23.0",
-        "@uiw/react-codemirror": "^4.23.0",
         "firebase": "^10.13.0",
         "graphql-ws": "^5.16.0",
         "next": "14.2.5",
@@ -539,50 +533,11 @@
         "tough-cookie": "^4.1.4"
       }
     },
-    "node_modules/@codemirror/autocomplete": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
-      "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.17.0",
-        "@lezer/common": "^1.0.0"
-      },
-      "peerDependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/commands": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.0.tgz",
-      "integrity": "sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.4.0",
-        "@codemirror/view": "^6.27.0",
-        "@lezer/common": "^1.1.0"
-      }
-    },
-    "node_modules/@codemirror/lang-json": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
-      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@lezer/json": "^1.0.0"
-      }
-    },
     "node_modules/@codemirror/language": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.0.0.tgz",
       "integrity": "sha512-rtjk5ifyMzOna1c7PBu7J1VCt0PvA5wy3o8eMVnxMKb7z8KA7JFecvD04dSn14vj/bBaAbqRsGed5OjtofEnLA==",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -592,51 +547,19 @@
         "style-mod": "^4.0.0"
       }
     },
-    "node_modules/@codemirror/lint": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
-      "integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "node_modules/@codemirror/search": {
-      "version": "6.5.6",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
-      "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
     "node_modules/@codemirror/state": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
       "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==",
-      "license": "MIT"
-    },
-    "node_modules/@codemirror/theme-one-dark": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
-      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
       "license": "MIT",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/highlight": "^1.0.0"
-      }
+      "peer": true
     },
     "node_modules/@codemirror/view": {
       "version": "6.33.0",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.33.0.tgz",
       "integrity": "sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.4.0",
         "style-mod": "^4.1.0",
@@ -2228,33 +2151,25 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
       "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@lezer/highlight": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
       "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@lezer/json": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
-      "integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@lezer/common": "^1.2.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
-      }
-    },
     "node_modules/@lezer/lr": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
       "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
@@ -4423,90 +4338,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@uiw/codemirror-extensions-basic-setup": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.0.tgz",
-      "integrity": "sha512-+k5nkRpUWGaHr1JWT8jcKsVewlXw5qBgSopm9LW8fZ6KnSNZBycz8kHxh0+WSvckmXEESGptkIsb7dlkmJT/hQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://jaywcjlove.github.io/#/sponsor"
-      },
-      "peerDependencies": {
-        "@codemirror/autocomplete": ">=6.0.0",
-        "@codemirror/commands": ">=6.0.0",
-        "@codemirror/language": ">=6.0.0",
-        "@codemirror/lint": ">=6.0.0",
-        "@codemirror/search": ">=6.0.0",
-        "@codemirror/state": ">=6.0.0",
-        "@codemirror/view": ">=6.0.0"
-      }
-    },
-    "node_modules/@uiw/codemirror-theme-vscode": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-vscode/-/codemirror-theme-vscode-4.23.0.tgz",
-      "integrity": "sha512-zl1FD7U1b58tqlF216jYv2okvVkTe+FP1ztqO/DF129bcH99QjszkakshyfxQEvvF4ys3zyzqZ7vU3VYBir8tg==",
-      "license": "MIT",
-      "dependencies": {
-        "@uiw/codemirror-themes": "4.23.0"
-      },
-      "funding": {
-        "url": "https://jaywcjlove.github.io/#/sponsor"
-      }
-    },
-    "node_modules/@uiw/codemirror-themes": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.23.0.tgz",
-      "integrity": "sha512-9fiji9xooZyBQozR1i6iTr56YP7j/Dr/VgsNWbqf5Szv+g+4WM1iZuiDGwNXmFMWX8gbkDzp6ASE21VCPSofWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://jaywcjlove.github.io/#/sponsor"
-      },
-      "peerDependencies": {
-        "@codemirror/language": ">=6.0.0",
-        "@codemirror/state": ">=6.0.0",
-        "@codemirror/view": ">=6.0.0"
-      }
-    },
-    "node_modules/@uiw/react-codemirror": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.23.0.tgz",
-      "integrity": "sha512-MnqTXfgeLA3fsUUQjqjJgemEuNyoGALgsExVm0NQAllAAi1wfj+IoKFeK+h3XXMlTFRCFYOUh4AHDv0YXJLsOg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.6",
-        "@codemirror/commands": "^6.1.0",
-        "@codemirror/state": "^6.1.1",
-        "@codemirror/theme-one-dark": "^6.0.0",
-        "@uiw/codemirror-extensions-basic-setup": "4.23.0",
-        "codemirror": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://jaywcjlove.github.io/#/sponsor"
-      },
-      "peerDependencies": {
-        "@babel/runtime": ">=7.11.0",
-        "@codemirror/state": ">=6.0.0",
-        "@codemirror/theme-one-dark": ">=6.0.0",
-        "@codemirror/view": ">=6.0.0",
-        "codemirror": ">=6.0.0",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -5476,21 +5307,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/codemirror": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5596,12 +5412,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/crelt": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
-      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
-      "license": "MIT"
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -11490,7 +11300,8 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
       "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/style-value-types": {
       "version": "5.0.0",
@@ -12306,7 +12117,8 @@
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
diff --git a/package.json b/package.json
index 08d9162..17bc7db 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,6 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/view": "^6.33.0",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -28,9 +25,6 @@
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",
     "@reduxjs/toolkit": "^2.2.7",
-    "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
-    "@uiw/codemirror-theme-vscode": "^4.23.0",
-    "@uiw/react-codemirror": "^4.23.0",
     "firebase": "^10.13.0",
     "graphql-ws": "^5.16.0",
     "next": "14.2.5",

From 562a8009f780a4d61e73036e33031a71a5516331 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 16:25:34 +0400
Subject: [PATCH 100/157] refactor: toastMessage urlNotProvided

---
 components/GraphiQLClient/index.tsx | 2 +-
 components/RestClient/index.tsx     | 3 ++-
 constants/toastMessages.ts          | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 6496329..7aed5a3 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -83,7 +83,7 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
     if (isValid) {
       void executeQuery();
     } else {
-      toast.error(toastMessages.errorSendQueryGraphiQL);
+      toast.error(toastMessages.urlNotProvided);
     }
   };
 
diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index b067a89..a88ce4d 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -17,6 +17,7 @@ import { setResponse, setIsLoading } from '@/redux/features/mainSlice';
 import { a11yProps } from '@/utils/a11yProps';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { toast } from 'sonner';
+import { toastMessages } from '@/constants/toastMessages';
 
 export type Inputs = {
   method: HttpMethod;
@@ -87,7 +88,7 @@ function RestForm() {
   };
 
   useEffect(() => {
-    if (errors.url?.type === 'required') toast.error('Url not provided. Please provide endpoint url.');
+    if (errors.url?.type === 'required') toast.error(toastMessages.urlNotProvided);
   }, [errors.url]);
 
   const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
index 2aac65e..4a09394 100644
--- a/constants/toastMessages.ts
+++ b/constants/toastMessages.ts
@@ -11,6 +11,6 @@ export const authToastMessages = {
 };
 
 export const toastMessages = {
-  errorSendQueryGraphiQL: 'Url not provided. Please provide endpoint url.',
+  urlNotProvided: 'Url not provided. Please provide endpoint url.',
   prettifyError: 'Failed to prettify query.',
 };

From 5fcc5d343e1f9086752d184611426109db398ad5 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 18:25:36 +0400
Subject: [PATCH 101/157] feat: create EmptyHistory component

---
 components/History/EmptyHistory.tsx       | 40 ++++++++++++++++++++
 public/assets/svg/illustration-search.svg | 46 +++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 components/History/EmptyHistory.tsx
 create mode 100644 public/assets/svg/illustration-search.svg

diff --git a/components/History/EmptyHistory.tsx b/components/History/EmptyHistory.tsx
new file mode 100644
index 0000000..e6865f6
--- /dev/null
+++ b/components/History/EmptyHistory.tsx
@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import { Box, Button, Typography } from '@mui/material';
+import { routes } from '@/constants/routes';
+import Image from 'next/image';
+import historyImg from '@/public/assets/svg/illustration-search.svg';
+
+function EmptyHistory() {
+  return (
+    <Box component="section" className="padding-x flex h-full w-full items-center justify-center">
+      <Box component="div" className="flex flex-col items-center text-center">
+        <Box component="div" className="mb-6 w-full max-w-[200px]">
+          <Image
+            src={historyImg}
+            alt="empty requests"
+            width={200}
+            height={200}
+            priority
+            className="aspect-square h-auto w-full object-contain"
+          />
+        </Box>
+
+        <Typography variant="h3" component="h3" className="text-center text-lg font-medium">
+          You haven&apos;t executed any requests
+        </Typography>
+
+        <Typography className="mb-3 text-center">It&apos;s empty here. Try:</Typography>
+
+        <Box component="span" className="flex flex-wrap justify-center gap-2">
+          <Button variant="contained">
+            <Link href={routes.restful}>REST Client</Link>
+          </Button>
+          <Button variant="contained">
+            <Link href={routes.graphql}>GraphiQL Client</Link>
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+export default EmptyHistory;
diff --git a/public/assets/svg/illustration-search.svg b/public/assets/svg/illustration-search.svg
new file mode 100644
index 0000000..1fd7ca6
--- /dev/null
+++ b/public/assets/svg/illustration-search.svg
@@ -0,0 +1,46 @@
+<svg width="140" height="120" viewBox="0 0 140 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" d="M42.99 110.31C45.68 110.19 45.05 110.28 48.03 110.28C49.47 110.28 49.02 110.25 50.4 110.22C51.04 110.2 50.54 114.25 53.7 115.52C55.35 116.18 55.02 116.66 57.94 116.42C59.79 116.27 61.27 114.87 62.22 114.37C62.87 114.03 64.09 110.76 64.8 110.83C72.73 111.53 76.06 112.84 76.06 114.27C76.06 116.47 63.51 118.26 48.02 118.26C32.53 118.26 20 116.47 20 114.27C20 113.17 21.93 112.54 25.36 112.09C25.36 112.09 26.7 117.37 34.64 115.33C42.58 113.29 34.64 115.33 34.64 115.33C34.64 115.33 37.88 113.74 38.58 110.37C39.28 107 38.58 110.37 38.58 110.37L42.99 110.31Z" fill="#262626"/>
+<path d="M49.0701 54.5699C40.6801 52.4899 33.8301 44.9199 33.8301 35.8999C33.8301 25.2799 42.4601 16.6599 53.1101 16.6599C55.8401 16.6599 58.4501 17.2299 60.8001 18.2499" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.94 75.0601L24.54 107.87C23.49 111.97 26.56 115.98 30.8 116.02C33.04 116.49 36.2 115.76 38.03 111.84L43.25 94.3001L51.67 92.2201" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M63.72 79.72L64.46 108.83C64.51 110.7 63.87 112.42 62.78 113.76C60.13 117.02 55.02 117.15 52.18 114.07C51.19 113 50.46 111.48 50.47 109.33L50.11 92.91" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.71 42.4299L29.48 42.5199C28.19 42.5199 27.15 43.5599 27.15 44.8499L27.44 71.3199C27.45 72.3399 28.28 73.1599 29.3 73.1599L31.38 73.0899" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.88 36.48C44.4706 36.48 45.76 35.1906 45.76 33.6C45.76 32.0094 44.4706 30.72 42.88 30.72C41.2894 30.72 40 32.0094 40 33.6C40 35.1906 41.2894 36.48 42.88 36.48Z" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.79 14.0601L52.87 16.5701" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.81 13.9C54.2901 13.9 55.49 12.6912 55.49 11.2C55.49 9.70883 54.2901 8.5 52.81 8.5C51.3299 8.5 50.13 9.70883 50.13 11.2C50.13 12.6912 51.3299 13.9 52.81 13.9Z" fill="#FF8853"/>
+<path d="M52.81 13.9C54.2901 13.9 55.49 12.6912 55.49 11.2C55.49 9.70883 54.2901 8.5 52.81 8.5C51.3299 8.5 50.13 9.70883 50.13 11.2C50.13 12.6912 51.3299 13.9 52.81 13.9Z" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M81.44 64.7401C75.77 67.6901 69.37 68.2301 63.72 65.6601C52.85 60.7201 48.85 46.1301 54.78 33.0801C60.71 20.0301 74.33 13.4601 85.2 18.4001C96.07 23.3401 100.07 37.9301 94.14 50.9801C93.47 52.4401 92.71 53.8301 91.87 55.1201" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M96.46 54.9201C96.87 54.1601 97.27 53.3701 97.63 52.5601C104.62 37.2001 99.91 20.0201 87.11 14.2001C74.31 8.38007 58.27 16.1201 51.28 31.4901C44.9 45.5201 48.27 61.0501 58.65 68.0801" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M63.73 70.6101C69.01 72.4201 74.53 72.1901 79.86 70.0801" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.7701 79.5L58.5101 82.33C57.9201 83.78 56.2601 84.47 54.8101 83.88C54.4901 83.75 54.2101 83.57 53.9701 83.35C53.9701 83.35 52.5001 82.39 53.5801 80.23" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M63.7301 70.6099C63.7301 70.6099 59.7401 67.0599 56.2101 68.1799C53.3401 69.0899 50.4601 76.3899 59.9701 79.0899C65.8401 80.7599 71.7501 77.3699 73.3101 71.7699" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.72 48.83C34.72 48.83 39.24 53.79 37.3 60.89L52.32 73.58C54.26 75.22 54.79 77.99 53.59 80.22C52.12 82.96 47.59 84.71 44.95 83.08C41.14 80.72 36.11 77.71 34.22 76.05C19.82 63.36 36.93 46.25 36.93 46.25" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.9199 49.5801C39.9099 49.8901 44.4099 54.5801 41.1499 63.8101" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M70.94 18.51C74.79 22.6 77.14 28.1 77.14 34.15C77.14 37.51 76.33 40.72 74.91 43.61C71.2 51.15 63.41 55.83 55.01 56.13" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75.46 66.55C76.72 54.84 69.76 50.29 69.76 50.29" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M70.04 50.8601C70.04 50.8601 73.14 60.2001 70.67 66.9501" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M65.02 53.6101C65.02 53.6101 67.31 59.6101 65.75 66.2001" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52.55 45.5C55.39 48.57 61.44 50.32 71.19 48.93" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M74.88 24.9199C72.63 24.3599 69.99 24.0799 64.76 24.4599C63.18 24.5699 61.64 24.8099 60.37 25.0799" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.7" d="M101.75 66.2301L88.67 66.1701L84.52 77.8701L76.79 77.6801L84.88 55.3401H112.67L108.77 66.1701L101.75 66.2301Z" fill="url(#paint0_linear_996_278)"/>
+<path d="M83.98 77.7901H77.11L84.88 55.3401H112.67L108.63 66.2401" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M109.93 85.1499L108.66 88.8499H80.87L88.65 66.3999H116.43L113.13 76.1799" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M116.66 85.0999H102.87L106.21 76.3999H120L116.66 85.0999Z" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M88.3199 60.45H106.79" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M87.24 63.8799H105.27" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M85.78 67.3101H87.64" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M84.3199 70.45H86.3999" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M90.9 31.5901L78.15 47.8701" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M90.9 37.5901L78.15 53.8701" stroke="var(--illustration-stroke-color, #686868)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.3" d="M92.35 115.19C97.304 115.19 101.32 114.505 101.32 113.66C101.32 112.815 97.304 112.13 92.35 112.13C87.396 112.13 83.38 112.815 83.38 113.66C83.38 114.505 87.396 115.19 92.35 115.19Z" fill="#262626"/>
+<defs>
+<linearGradient id="paint0_linear_996_278" x1="76.7852" y1="66.6063" x2="112.668" y2="66.6063" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7002"/>
+<stop offset="0.2957" stop-color="#FE7304"/>
+<stop offset="0.4996" stop-color="#FC7C0A"/>
+<stop offset="0.6759" stop-color="#F88B15"/>
+<stop offset="0.8364" stop-color="#F3A125"/>
+<stop offset="0.9849" stop-color="#ECBD39"/>
+<stop offset="1" stop-color="#EBC03B"/>
+</linearGradient>
+</defs>
+</svg>

From af23539f838ee4e3bf7792591bb2cce2f48c0fcb Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 18:27:32 +0400
Subject: [PATCH 102/157] refactor: make history comp responsive, remove empty
 request condition

---
 app/history/page.tsx                      |  6 +-
 components/DataTable/DataTableToolbar.tsx | 22 ++++----
 components/DataTable/index.tsx            | 68 ++++++++---------------
 components/Footer/index.tsx               |  8 +--
 components/Header/index.tsx               |  2 +-
 components/History/index.tsx              | 20 +++++++
 6 files changed, 63 insertions(+), 63 deletions(-)
 create mode 100644 components/History/index.tsx

diff --git a/app/history/page.tsx b/app/history/page.tsx
index a6cb98d..9a9aed6 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -1,9 +1,9 @@
-import DataTable from '@/components/DataTable';
+import HistoryContainer from '@/components/History';
 
 export default function Hisory() {
   return (
-    <main className="h-[calc(100vh-6rem)]">
-      <DataTable />
+    <main className="flex h-[calc(100vh-6rem)] w-full">
+      <HistoryContainer />
     </main>
   );
 }
diff --git a/components/DataTable/DataTableToolbar.tsx b/components/DataTable/DataTableToolbar.tsx
index ba11689..016a1f0 100644
--- a/components/DataTable/DataTableToolbar.tsx
+++ b/components/DataTable/DataTableToolbar.tsx
@@ -1,13 +1,17 @@
-import { alpha, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
+import React from 'react';
+import { alpha, FormControlLabel, IconButton, Switch, Toolbar, Tooltip, Typography } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
-import FilterListIcon from '@mui/icons-material/FilterList';
 
 interface DataTableToolbarProps {
   numSelected: number;
+  dense: boolean;
+  setDense: React.Dispatch<React.SetStateAction<boolean>>;
   handleDelete: () => void;
 }
-function DataTableToolbar(props: DataTableToolbarProps) {
-  const { numSelected, handleDelete } = props;
+function DataTableToolbar({ numSelected, dense, setDense, handleDelete }: DataTableToolbarProps) {
+  const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDense(event.target.checked);
+  };
 
   return (
     <Toolbar
@@ -27,20 +31,18 @@ function DataTableToolbar(props: DataTableToolbarProps) {
         </Typography>
       ) : (
         <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
-          History
+          Requests History
         </Typography>
       )}
       {numSelected > 0 ? (
-        <Tooltip title="Delete">
+        <Tooltip title="Delete Items">
           <IconButton onClick={handleDelete}>
             <DeleteIcon />
           </IconButton>
         </Tooltip>
       ) : (
-        <Tooltip title="Filter list">
-          <IconButton>
-            <FilterListIcon />
-          </IconButton>
+        <Tooltip title="Reduce List Dense">
+          <FormControlLabel control={<Switch checked={dense} onChange={handleChangeDense} />} label="Dense" />
         </Tooltip>
       )}
     </Toolbar>
diff --git a/components/DataTable/index.tsx b/components/DataTable/index.tsx
index 19b2f0f..928faab 100644
--- a/components/DataTable/index.tsx
+++ b/components/DataTable/index.tsx
@@ -1,22 +1,9 @@
-'use client';
 import { useMemo, useState } from 'react';
-import {
-  Box,
-  Button,
-  FormControlLabel,
-  Paper,
-  Switch,
-  Table,
-  TableContainer,
-  TablePagination,
-  Typography,
-} from '@mui/material';
+import { Box, Paper, Table, TableContainer, TablePagination, useMediaQuery, useTheme } from '@mui/material';
 import DataTableToolbar from './DataTableToolbar';
 import DataTableHead from './DataTableHead';
 import { getComparator } from '@/utils/getComparator';
-import { useLocalStorage } from '@/hooks/useLocalStorage';
 import DataTableBody from './DataTableBody';
-import { routes } from '@/constants/routes';
 import { useRouter } from 'next/navigation';
 import { generateUrl } from '@/utils/generateUrl';
 import { setAllState } from '@/redux/features/restfulSlice';
@@ -25,8 +12,12 @@ import { resetResponse } from '@/redux/features/mainSlice';
 import type { DataTableType, Order } from '@/types/dataTable.types';
 import type { ApiRequest } from '@/types/api.types';
 
-export default function DataTable() {
-  const { storedValue: requests, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
+type PropTypes = {
+  requests: ApiRequest[];
+  setStorageValue: (value: ApiRequest[]) => void;
+};
+
+export default function DataTable({ requests, setStorageValue }: PropTypes) {
   const dispatch = useAppDispatch();
   const [order, setOrder] = useState<Order>('desc');
   const [orderBy, setOrderBy] = useState<keyof DataTableType>('date');
@@ -35,6 +26,8 @@ export default function DataTable() {
   const [dense, setDense] = useState(false);
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const router = useRouter();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof DataTableType) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -78,7 +71,7 @@ export default function DataTable() {
 
   const handleDelete = () => {
     const newRequests = requests.filter((request) => !selected.includes(request.id));
-    setLocalStorageValue(newRequests);
+    setStorageValue(newRequests);
   };
 
   const handleChangePage = (event: unknown, newPage: number) => {
@@ -90,10 +83,6 @@ export default function DataTable() {
     setPage(0);
   };
 
-  const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setDense(event.target.checked);
-  };
-
   const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - requests.length) : 0;
 
   const visibleRows = useMemo(
@@ -101,30 +90,11 @@ export default function DataTable() {
     [order, requests, orderBy, page, rowsPerPage],
   );
 
-  if (!requests.length) {
-    return (
-      <Box sx={{ width: '100%' }}>
-        <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
-          You haven&apos;t executed any requests
-        </Typography>
-        <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
-          It&apos;s empty here. Try:
-          <Button href={routes.restful} color="inherit" variant="outlined">
-            REST Client
-          </Button>
-          <Button href={routes.graphql} color="inherit" variant="outlined">
-            GraphiQL Client
-          </Button>
-        </Typography>
-      </Box>
-    );
-  }
-
   return (
-    <Box sx={{ width: '100%' }}>
-      <Paper sx={{ width: '100%', mb: 2 }}>
-        <DataTableToolbar handleDelete={handleDelete} numSelected={selected.length} />
-        <TableContainer>
+    <Box className="padding-x h-full w-full pb-1 pt-3">
+      <Paper className="flex h-full w-full flex-col">
+        <DataTableToolbar numSelected={selected.length} dense={dense} setDense={setDense} handleDelete={handleDelete} />
+        <TableContainer sx={{ flexGrow: 1, overflow: 'auto' }}>
           <Table sx={{ minWidth: 750 }} aria-labelledby="tableTitle" size={dense ? 'small' : 'medium'}>
             <DataTableHead
               numSelected={selected.length}
@@ -152,9 +122,17 @@ export default function DataTable() {
           page={page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
+          labelRowsPerPage={isMobile ? 'Rows:' : 'Rows per page:'}
+          labelDisplayedRows={({ from, to, count }) =>
+            isMobile ? `${from}-${to} of ${count}` : `${from}-${to} of ${count}`
+          }
+          slotProps={{
+            select: {
+              style: isMobile ? { marginRight: '8px' } : {},
+            },
+          }}
         />
       </Paper>
-      <FormControlLabel control={<Switch checked={dense} onChange={handleChangeDense} />} label="Dense padding" />
     </Box>
   );
 }
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index a49ecc2..462440b 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -3,16 +3,16 @@ import Link from 'next/link';
 import course_logo from '@/public/assets/rss-logo.svg';
 function Footer() {
   return (
-    <footer className="padding-x flex h-10 items-center justify-between bg-blue-600 text-sm text-white">
-      <ul className="flex gap-2">
+    <footer className="padding-x z-50 flex h-10 items-center justify-between bg-blue-600 text-sm text-white">
+      <ul className="flex gap-3">
         <li>
           <Link href="https://github.com/shd-mn" target="_blank">
-            Shadman Alizada
+            Shadman <span className="hidden sm:inline">Alizada</span>
           </Link>
         </li>
         <li>
           <Link href="https://github.com/olitera" target="_blank">
-            Volha Melayok
+            Volha <span className="hidden sm:inline">Melayok</span>
           </Link>
         </li>
       </ul>
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 391d0f1..5e2545a 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -21,7 +21,7 @@ function Header() {
     }
   };
   return (
-    <header className="padding-x flex h-14 items-center justify-between bg-blue-600 text-white">
+    <header className="padding-x z-50 flex h-14 items-center justify-between bg-blue-600 text-white">
       <div>
         <Link href={routes.home}>Home</Link>
       </div>
diff --git a/components/History/index.tsx b/components/History/index.tsx
new file mode 100644
index 0000000..610ecb1
--- /dev/null
+++ b/components/History/index.tsx
@@ -0,0 +1,20 @@
+'use client';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import DataTable from '../DataTable';
+import type { ApiRequest } from '@/types/api.types';
+import EmptyHistory from './EmptyHistory';
+
+function HistoryContainer() {
+  const { storedValue, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
+
+  return (
+    <>
+      {!storedValue.length ? (
+        <EmptyHistory />
+      ) : (
+        <DataTable requests={storedValue} setStorageValue={setLocalStorageValue} />
+      )}
+    </>
+  );
+}
+export default HistoryContainer;

From 1da3d7b937b2e4f81a785301aa17174ec876c8d7 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Thu, 12 Sep 2024 18:50:24 +0400
Subject: [PATCH 103/157] feat: add ErrorBoundary comp

---
 .../ErrorBoundary/errorBoundary.test.tsx      | 19 +++++++++
 components/ErrorBoundary/index.tsx            | 42 +++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 components/ErrorBoundary/errorBoundary.test.tsx
 create mode 100644 components/ErrorBoundary/index.tsx

diff --git a/components/ErrorBoundary/errorBoundary.test.tsx b/components/ErrorBoundary/errorBoundary.test.tsx
new file mode 100644
index 0000000..1e071de
--- /dev/null
+++ b/components/ErrorBoundary/errorBoundary.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import ErrorBoundary from '.';
+
+const ProblemChild = () => {
+  throw new Error('Error thrown from problem child');
+};
+
+describe('ErrorBoundary Component', () => {
+  it('should catch errors and display the fallback UI', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <ErrorBoundary fallback="Something went wrong!">
+        <ProblemChild />
+      </ErrorBoundary>,
+    );
+    expect(screen.getByText(/something went wrong!/i)).toBeInTheDocument();
+    spy.mockRestore();
+  });
+});
diff --git a/components/ErrorBoundary/index.tsx b/components/ErrorBoundary/index.tsx
new file mode 100644
index 0000000..fa60582
--- /dev/null
+++ b/components/ErrorBoundary/index.tsx
@@ -0,0 +1,42 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  fallback: string;
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="container">
+          <div className="mt-1 flex w-full items-center justify-center">
+            <h3>{this.props.fallback || 'Something went wrong.'}</h3>
+          </div>
+        </div>
+      );
+    }
+    return <>{this.props.children}</>;
+  }
+}
+
+export default ErrorBoundary;

From 27175be697a914e288e814790adc2d03e606495c Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 00:56:49 +0400
Subject: [PATCH 104/157] chore: replace jsdom with happy-dom pgk, add some
 test configuration

---
 .eslintignore     |   3 +-
 .prettierignore   |   3 +-
 package-lock.json | 107 +++++++++++++++++++++++++++++++++++++++++-----
 package.json      |   2 +-
 test.global.d.ts  |   5 +++
 tsconfig.json     |   4 +-
 vitest.config.mts |   2 +-
 vitest.setup.tsx  |   1 -
 8 files changed, 110 insertions(+), 17 deletions(-)
 create mode 100644 test.global.d.ts

diff --git a/.eslintignore b/.eslintignore
index 6c3d387..ebc98ea 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules/
 build/
-vitest.setup.tsx
\ No newline at end of file
+vitest.setup.tsx
+coverage/
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index b51ea71..e19e233 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
 node_modules/
-build/
\ No newline at end of file
+build/
+coverage/
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7e67f6c..3a269ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,8 +50,8 @@
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^4.6.2",
+        "happy-dom": "^15.7.4",
         "husky": "^9.1.5",
-        "jsdom": "^24.1.1",
         "lint-staged": "^15.2.9",
         "msw": "^2.3.5",
         "postcss": "^8.4.45",
@@ -4530,6 +4530,8 @@
       "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -4839,7 +4841,9 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
@@ -5338,6 +5342,8 @@
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5453,6 +5459,8 @@
       "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "rrweb-cssom": "^0.6.0"
       },
@@ -5465,7 +5473,9 @@
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
       "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/csstype": {
       "version": "3.1.3",
@@ -5486,6 +5496,8 @@
       "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0"
@@ -5575,7 +5587,9 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/deep-eql": {
       "version": "5.0.2",
@@ -5669,6 +5683,8 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -6949,6 +6965,8 @@
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -7357,6 +7375,31 @@
         "graphql": ">=0.11 <=16"
       }
     },
+    "node_modules/happy-dom": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-15.7.4.tgz",
+      "integrity": "sha512-r1vadDYGMtsHAAsqhDuk4IpPvr6N8MGKy5ntBo7tSdim+pWDxus2PNqOcOt8LuDZ4t3KJHE+gCuzupcx/GKnyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-mimetype": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -7471,6 +7514,8 @@
       "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "whatwg-encoding": "^3.1.1"
       },
@@ -7496,6 +7541,8 @@
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -7510,6 +7557,8 @@
       "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.0.2",
         "debug": "4"
@@ -7550,6 +7599,8 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -7965,7 +8016,9 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/is-primitive": {
       "version": "3.0.1",
@@ -8266,6 +8319,8 @@
       "integrity": "sha512-5O1wWV99Jhq4DV7rCLIoZ/UIhyQeDR7wHVyZAHAshbrvZsLs+Xzz7gtwnlJTJDjleiTKh54F4dXrX70vJQTyJQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "cssstyle": "^4.0.1",
         "data-urls": "^5.0.0",
@@ -8946,6 +9001,8 @@
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8956,6 +9013,8 @@
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9293,7 +9352,9 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
       "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -9566,6 +9627,8 @@
       "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "entities": "^4.4.0"
       },
@@ -10652,7 +10715,9 @@
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
       "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
@@ -10739,7 +10804,9 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -10747,6 +10814,8 @@
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
       "dev": true,
       "license": "ISC",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
@@ -11394,7 +11463,9 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/synckit": {
       "version": "0.9.1",
@@ -11640,6 +11711,8 @@
       "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "punycode": "^2.3.1"
       },
@@ -12126,6 +12199,8 @@
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "xml-name-validator": "^5.0.0"
       },
@@ -12170,6 +12245,8 @@
       "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
@@ -12183,6 +12260,8 @@
       "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -12193,6 +12272,8 @@
       "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "tr46": "^5.0.0",
         "webidl-conversions": "^7.0.0"
@@ -12441,6 +12522,8 @@
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -12463,6 +12546,8 @@
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -12472,7 +12557,9 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/y18n": {
       "version": "5.0.8",
diff --git a/package.json b/package.json
index 17bc7db..ab08304 100644
--- a/package.json
+++ b/package.json
@@ -57,8 +57,8 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "happy-dom": "^15.7.4",
     "husky": "^9.1.5",
-    "jsdom": "^24.1.1",
     "lint-staged": "^15.2.9",
     "msw": "^2.3.5",
     "postcss": "^8.4.45",
diff --git a/test.global.d.ts b/test.global.d.ts
new file mode 100644
index 0000000..bf9623c
--- /dev/null
+++ b/test.global.d.ts
@@ -0,0 +1,5 @@
+import type DetachedWindowAPI from 'happy-dom/lib/window/DetachedWindowAPI.js';
+
+declare global {
+  const happyDOM: DetachedWindowAPI;
+}
diff --git a/tsconfig.json b/tsconfig.json
index d1aa480..df15399 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,8 +20,8 @@
     "paths": {
       "@/*": ["./*"]
     },
-    "types": ["vitest/globals", "vitest/jsdom", "@testing-library/jest-dom"]
+    "types": ["vitest/globals", "@testing-library/jest-dom", "./test.global.d.ts"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "vitest.config.mts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "vitest.config.mts", "test.global.d.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/vitest.config.mts b/vitest.config.mts
index dd1650b..6a16e91 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -11,7 +11,7 @@ export default defineConfig({
   },
   test: {
     globals: true,
-    environment: 'jsdom',
+    environment: 'happy-dom',
     setupFiles: ['./vitest.setup.tsx'],
     coverage: {
       provider: 'v8',
diff --git a/vitest.setup.tsx b/vitest.setup.tsx
index dfad390..93e75d2 100644
--- a/vitest.setup.tsx
+++ b/vitest.setup.tsx
@@ -1,4 +1,3 @@
-/// <reference types="vitest/globals" />
 import '@testing-library/jest-dom/vitest';
 import { cleanup } from '@testing-library/react';
 import { afterEach } from 'vitest';

From 4c77e5204757980146068e8afa2eeedffe3bef35 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 01:00:53 +0400
Subject: [PATCH 105/157] test: add useLocalStorage hook test

---
 components/UI/ellipsis.test.tsx |  2 --
 hooks/useLocalStorage.test.ts   | 57 +++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 hooks/useLocalStorage.test.ts

diff --git a/components/UI/ellipsis.test.tsx b/components/UI/ellipsis.test.tsx
index 5eebbee..ee09058 100644
--- a/components/UI/ellipsis.test.tsx
+++ b/components/UI/ellipsis.test.tsx
@@ -8,7 +8,5 @@ describe('Ellipsis Component', () => {
 
     const img = screen.getByAltText('loader');
     expect(img).toBeInTheDocument();
-
-    screen.debug();
   });
 });
diff --git a/hooks/useLocalStorage.test.ts b/hooks/useLocalStorage.test.ts
new file mode 100644
index 0000000..913dd77
--- /dev/null
+++ b/hooks/useLocalStorage.test.ts
@@ -0,0 +1,57 @@
+import { renderHook, act } from '@testing-library/react';
+import { useLocalStorage } from './useLocalStorage';
+
+describe('useLocalStorage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('should initialize with the default value if localStorage is empty', () => {
+    const { result } = renderHook(() => useLocalStorage('key', 'default value'));
+
+    expect(result.current.storedValue).toBe('default value');
+  });
+
+  it('should initialize with the value from localStorage if it exists', () => {
+    localStorage.setItem('key', JSON.stringify('stored value'));
+
+    const { result } = renderHook(() => useLocalStorage('key', 'default value'));
+
+    expect(result.current.storedValue).toBe('stored value');
+  });
+
+  it('should update the state and localStorage when setting a new value', () => {
+    const { result } = renderHook(() => useLocalStorage('key', 'default value'));
+
+    act(() => {
+      result.current.setLocalStorageValue('new value');
+    });
+
+    expect(result.current.storedValue).toBe('new value');
+    expect(localStorage.getItem('key')).toBe(JSON.stringify('new value'));
+  });
+
+  it('should properly handle complex objects as values', () => {
+    const complexValue = { a: 1, b: 'test' };
+    const { result } = renderHook(() => useLocalStorage('key', complexValue));
+
+    expect(result.current.storedValue).toEqual(complexValue);
+
+    const newComplexValue = { a: 2, b: 'test2' };
+    act(() => {
+      result.current.setLocalStorageValue(newComplexValue);
+    });
+
+    expect(result.current.storedValue).toEqual(newComplexValue);
+    expect(localStorage.getItem('key')).toBe(JSON.stringify(newComplexValue));
+  });
+
+  it('should use the default value if JSON parsing fails', () => {
+    localStorage.setItem('key', 'invalid JSON');
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { result } = renderHook(() => useLocalStorage('key', 'default value'));
+    expect(result.current.storedValue).toBe('default value');
+    spy.mockRestore();
+  });
+});

From 2c18f312806b3b472892a9462837f53aa0d7d52c Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 01:57:16 +0400
Subject: [PATCH 106/157] feat: create custom wrapper for test

---
 __test__/mock/mockData.ts |  4 +++
 __test__/test-utils.tsx   | 60 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 __test__/mock/mockData.ts
 create mode 100644 __test__/test-utils.tsx

diff --git a/__test__/mock/mockData.ts b/__test__/mock/mockData.ts
new file mode 100644
index 0000000..ca2f21e
--- /dev/null
+++ b/__test__/mock/mockData.ts
@@ -0,0 +1,4 @@
+export const mockRequests = [
+  { id: '1', method: 'GET', url: 'https://api.example.com', date: '2023-01-01' },
+  { id: '2', method: 'POST', url: 'https://api.test.com', date: '2023-01-02' },
+];
diff --git a/__test__/test-utils.tsx b/__test__/test-utils.tsx
new file mode 100644
index 0000000..057b0eb
--- /dev/null
+++ b/__test__/test-utils.tsx
@@ -0,0 +1,60 @@
+import { ReactElement, PropsWithChildren } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '@/theme';
+import { AppRouterContext, AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import userEvent from '@testing-library/user-event';
+import { mainSlice } from '@/redux/features/mainSlice';
+import { graphiqlSlice } from '@/redux/features/graphiqlSlice';
+import { restfulSlice } from '@/redux/features/restfulSlice';
+
+const mockUseRouter: Partial<AppRouterInstance> = {
+  push: vi.fn(),
+  replace: vi.fn(),
+  prefetch: vi.fn(),
+  back: vi.fn(),
+  forward: vi.fn(),
+  refresh: vi.fn(),
+};
+
+const rootReducer = combineReducers({
+  main: mainSlice.reducer,
+  restful: restfulSlice.reducer,
+  graphiql: graphiqlSlice.reducer,
+});
+
+export function setupStore(preloadedState?: Partial<RootState>) {
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  });
+}
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppStore = ReturnType<typeof setupStore>;
+export type AppDispatch = AppStore['dispatch'];
+
+interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
+  preloadedState?: Partial<RootState>;
+  store?: AppStore;
+}
+
+export function customRender(ui: ReactElement, extendedRenderOptions: ExtendedRenderOptions = {}) {
+  const { preloadedState = {}, store = setupStore(preloadedState), ...renderOptions } = extendedRenderOptions;
+
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <AppRouterContext.Provider value={mockUseRouter as AppRouterInstance}>{children}</AppRouterContext.Provider>
+      </ThemeProvider>
+    </Provider>
+  );
+
+  return {
+    store,
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+  };
+}

From c31f514b48499299028448e487c99ba72ea77164 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 01:57:57 +0400
Subject: [PATCH 107/157] test: add Home page, and History page test

---
 app/history/history.test.tsx      | 29 +++++++++++++++++++
 app/page.test.tsx                 | 47 +++++++++++++++++++++++++------
 components/PrivateRoute/index.tsx |  5 ++--
 3 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 app/history/history.test.tsx

diff --git a/app/history/history.test.tsx b/app/history/history.test.tsx
new file mode 100644
index 0000000..6721a53
--- /dev/null
+++ b/app/history/history.test.tsx
@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react';
+import { customRender } from '@/__test__/test-utils';
+import History from './page';
+import * as useLocalStorageHook from '@/hooks/useLocalStorage';
+import { mockRequests } from '@/__test__/mock/mockData';
+
+vi.mock('@/hooks/useLocalStorage');
+
+describe('History Page', () => {
+  it('renders EmptyHistory when no requests are stored', () => {
+    vi.spyOn(useLocalStorageHook, 'useLocalStorage').mockReturnValue({
+      storedValue: [],
+      setLocalStorageValue: vi.fn(),
+    });
+
+    customRender(<History />);
+    expect(screen.getByText("You haven't executed any requests")).toBeInTheDocument();
+  });
+
+  it('renders DataTable when requests are stored', () => {
+    vi.spyOn(useLocalStorageHook, 'useLocalStorage').mockReturnValue({
+      storedValue: mockRequests,
+      setLocalStorageValue: vi.fn(),
+    });
+
+    customRender(<History />);
+    expect(screen.queryByText("You haven't executed any requests")).not.toBeInTheDocument();
+  });
+});
diff --git a/app/page.test.tsx b/app/page.test.tsx
index 1b9fe6f..75de55e 100644
--- a/app/page.test.tsx
+++ b/app/page.test.tsx
@@ -1,12 +1,43 @@
-import { render, screen } from '@testing-library/react';
-import Home from './page';
+import { customRender } from '@/__test__/test-utils';
+import { screen } from '@testing-library/dom';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { User } from 'firebase/auth';
+import Home from '@/app/page';
 
-describe('Home Component', () => {
-  it('should render the Home component', () => {
-    render(<Home />);
+vi.mock('@/firebase', () => ({
+  auth: {},
+}));
 
-    const mainElement = screen.getByRole('main');
-    expect(mainElement).toBeInTheDocument();
-    expect(mainElement).toHaveTextContent('Home');
+vi.mock('react-firebase-hooks/auth', () => ({
+  useAuthState: vi.fn(),
+}));
+
+describe('Home', () => {
+  it('renders welcome message for unauthenticated user', () => {
+    vi.mocked(useAuthState).mockReturnValue([null, false, undefined]);
+
+    customRender(<Home />);
+
+    expect(screen.getByText('Welcome!')).toBeInTheDocument();
+    expect(screen.getByText('Sign In')).toBeInTheDocument();
+    expect(screen.getByText('Sign Up')).toBeInTheDocument();
+  });
+
+  it('renders welcome back message for authenticated user', () => {
+    const mockUser = {
+      displayName: 'Test User',
+      uid: '123',
+      email: 'test@example.com',
+      emailVerified: true,
+    } as User;
+
+    vi.mocked(useAuthState).mockReturnValue([mockUser, false, undefined]);
+
+    customRender(<Home />);
+
+    expect(screen.getByText('Welcome Back, Test User!')).toBeInTheDocument();
+    expect(screen.getByText('REST Client')).toBeInTheDocument();
+    expect(screen.getByText('GraphiQL Client')).toBeInTheDocument();
+    expect(screen.getByText('History')).toBeInTheDocument();
   });
 });
diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index da83180..325afe1 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import React, { useEffect } from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth } from '@/firebase';
@@ -7,14 +6,14 @@ import { usePathname, useRouter } from 'next/navigation';
 import { routes } from '@/constants/routes';
 import Elipsis from '../UI/Ellipsis';
 
+const publicRoutes = [routes.home, routes.signin, routes.signup];
+
 const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
   const [user, loading] = useAuthState(auth);
   const router = useRouter();
   const pathname = usePathname();
 
   useEffect(() => {
-    const publicRoutes = [routes.home, routes.signin, routes.signup];
-
     if (!loading) {
       if (!user && !publicRoutes.includes(pathname)) {
         router.push(routes.signin);

From 210ffd0615f2f99e4ecd0f9aa972261b71da942f Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 15:52:50 +0400
Subject: [PATCH 108/157] chore: configure next Internationalization with
 next-intl

---
 app/layout.tsx    |  50 +++-------------------
 app/not-found.tsx |  17 ++++----
 app/page.tsx      |  10 ++---
 global.d.ts       |   7 ++++
 i18n/request.ts   |  11 +++++
 i18n/routing.ts   |  20 +++++++++
 middleware.ts     |   8 ++++
 next.config.mjs   |   7 +++-
 package-lock.json | 105 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 10 files changed, 175 insertions(+), 61 deletions(-)
 create mode 100644 global.d.ts
 create mode 100644 i18n/request.ts
 create mode 100644 i18n/routing.ts
 create mode 100644 middleware.ts

diff --git a/app/layout.tsx b/app/layout.tsx
index 6ed92ca..e784fd1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,49 +1,9 @@
-import type { Metadata } from 'next';
-import { StoreProvider } from './StoreProvider';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
-import { Inter } from 'next/font/google';
-import { Toaster } from 'sonner';
-import PrivateRoute from '@/components/PrivateRoute';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import CssBaseline from '@mui/material/CssBaseline';
-import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import theme from '@/theme';
-import './globals.css';
+import { ReactNode } from 'react';
 
-const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-inter',
-});
-
-export const metadata: Metadata = {
-  title: 'REST GraphQL Client',
-  description: 'Generated by create next app',
+type Props = {
+  children: ReactNode;
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${inter.variable}`}>
-        <StoreProvider>
-          <AppRouterCacheProvider options={{ key: 'css' }}>
-            <ThemeProvider theme={theme}>
-              <CssBaseline />
-              <StyledEngineProvider injectFirst>
-                <Header />
-                <PrivateRoute>{children}</PrivateRoute>
-                <Footer />
-              </StyledEngineProvider>
-            </ThemeProvider>
-            <Toaster expand={false} richColors closeButton duration={3000} className="bottom-24" />
-          </AppRouterCacheProvider>
-        </StoreProvider>
-      </body>
-    </html>
-  );
+export default function RootLayout({ children }: Props) {
+  return children;
 }
diff --git a/app/not-found.tsx b/app/not-found.tsx
index ab7c04b..8181572 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,12 +1,13 @@
-import Link from 'next/link';
+'use client';
 
-function NotFound() {
+import Error from 'next/error';
+
+export default function NotFound() {
   return (
-    <div className="flex h-screen flex-col items-center justify-center text-white">
-      <h3>404 Page Not Found</h3>
-      <Link href="/">Back to Home </Link>
-    </div>
+    <html lang="en">
+      <body>
+        <Error statusCode={404} />
+      </body>
+    </html>
   );
 }
-
-export default NotFound;
diff --git a/app/page.tsx b/app/page.tsx
index e2ea739..915fdd8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,5 @@
-import Welcome from '@/components/Welcome';
+import { redirect } from 'next/navigation';
 
-export default function Home() {
-  return (
-    <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
-      <Welcome />
-    </main>
-  );
+export default function RootPage() {
+  redirect('/en');
 }
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..83ff3e6
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,7 @@
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  interface IntlMessages extends Messages {}
+}
diff --git a/i18n/request.ts b/i18n/request.ts
new file mode 100644
index 0000000..1fa520f
--- /dev/null
+++ b/i18n/request.ts
@@ -0,0 +1,11 @@
+import { notFound } from 'next/navigation';
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ locale }) => {
+  if (!routing.locales.includes(locale as 'en' | 'ru')) notFound();
+
+  return {
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});
diff --git a/i18n/routing.ts b/i18n/routing.ts
new file mode 100644
index 0000000..8283931
--- /dev/null
+++ b/i18n/routing.ts
@@ -0,0 +1,20 @@
+import { defineRouting } from 'next-intl/routing';
+import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+
+export const routing = defineRouting({
+  locales: ['en', 'ru'],
+
+  defaultLocale: 'en',
+  pathnames: {
+    '/': '/',
+    '/pathnames': {
+      en: '/en',
+      ru: '/ru',
+    },
+  },
+});
+
+export type Pathnames = keyof typeof routing.pathnames;
+export type Locale = (typeof routing.locales)[number];
+
+export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation(routing);
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..80d5fab
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,8 @@
+import createMiddleware from 'next-intl/middleware';
+import { routing } from './i18n/routing';
+
+export default createMiddleware(routing);
+
+export const config = {
+  matcher: ['/', '/(ru|en)/:path*'],
+};
diff --git a/next.config.mjs b/next.config.mjs
index 6a1ea92..606434c 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,12 @@
 /** @type {import('next').NextConfig} */
+
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
index 3a269ca..46ccb53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "firebase": "^10.13.0",
         "graphql-ws": "^5.16.0",
         "next": "14.2.5",
+        "next-intl": "^3.19.1",
         "pretty-bytes": "^6.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1731,6 +1732,55 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
       "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
+      "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
+      "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-skeleton-parser": "1.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
+      "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@graphiql/react": {
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.26.2.tgz",
@@ -7703,6 +7753,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.14",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
+      "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9200,6 +9262,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "14.2.5",
       "resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
@@ -9250,6 +9321,27 @@
         }
       }
     },
+    "node_modules/next-intl": {
+      "version": "3.19.1",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-3.19.1.tgz",
+      "integrity": "sha512-KlJSomzbB5dNkWBIiSIRaoy5zqwLgHNV5Zw0ULhkHjNnPN7aLFFv2G+VOQKle630sNH2JiKc9nsmi6PM1GdkhA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.5.4",
+        "negotiator": "^0.6.3",
+        "use-intl": "^3.19.1"
+      },
+      "peerDependencies": {
+        "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/next/node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -11996,6 +12088,19 @@
         }
       }
     },
+    "node_modules/use-intl": {
+      "version": "3.19.1",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-3.19.1.tgz",
+      "integrity": "sha512-FUblDZJ/iuXusroBxvzVwXmgjHIef2YHJ0ASRmkMV8whlcRr6QJozBZUR/xB4I0+MMbWDD4GPugUK+MxE2coJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "^2.2.0",
+        "intl-messageformat": "^10.5.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
diff --git a/package.json b/package.json
index ab08304..6eb713b 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "firebase": "^10.13.0",
     "graphql-ws": "^5.16.0",
     "next": "14.2.5",
+    "next-intl": "^3.19.1",
     "pretty-bytes": "^6.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

From cc49560bb012e404f2a87c969453756ba816f7fa Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 15:54:31 +0400
Subject: [PATCH 109/157] feat: create LanguageSwitcher comp

---
 components/UI/LanguageSwitcher.tsx | 40 ++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 components/UI/LanguageSwitcher.tsx

diff --git a/components/UI/LanguageSwitcher.tsx b/components/UI/LanguageSwitcher.tsx
new file mode 100644
index 0000000..3a40397
--- /dev/null
+++ b/components/UI/LanguageSwitcher.tsx
@@ -0,0 +1,40 @@
+import { useLocale, useTranslations } from 'next-intl';
+import { Locale, usePathname, useRouter } from '@/i18n/routing';
+import { routing } from '@/i18n/routing';
+import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import { useTransition } from 'react';
+
+export default function LanguageSwitcher() {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const pathname = usePathname();
+  const t = useTranslations('Language');
+  const locale = useLocale();
+
+  function handleLangChange(event: SelectChangeEvent) {
+    const nextLocale = event.target.value as Locale;
+    startTransition(() => {
+      router.replace(pathname, { locale: nextLocale });
+    });
+  }
+
+  return (
+    <Select
+      labelId="language-select-label"
+      id="language-select"
+      className="uppercase text-white"
+      autoWidth
+      size="small"
+      label={t('label')}
+      defaultValue={locale}
+      disabled={isPending}
+      onChange={handleLangChange}
+    >
+      {routing.locales.map((cur) => (
+        <MenuItem key={cur} value={cur} className="font-medium uppercase">
+          {cur}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}

From 77350f1a4c0ac5557a9c21caf9b5d3ec9810e722 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 15:55:28 +0400
Subject: [PATCH 110/157] feat: create multi language file

---
 messages/en.json | 97 ++++++++++++++++++++++++++++++++++++++++++++++++
 messages/ru.json | 97 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 messages/en.json
 create mode 100644 messages/ru.json

diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..73a17b9
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,97 @@
+{
+  "Language": {
+    "label": "Change language",
+    "locale": "EN"
+  },
+  "ToastMessages": {
+    "auth": {
+      "successSignIn": "You have successfully signed in.",
+      "errorSignIn": "Failed to sign in. Please try again.",
+      "userNotFound": "Please check your email and password or create an account.",
+      "confirmEmail": "Please confirm your email address",
+      "successSignUp": "You have successfully signed up.",
+      "errorSignUp": "Failed to sign up. Please try again.",
+      "userAlreadyExist": "User already exists. Please sign in.",
+      "signOutSuccess": "You have signed out.",
+      "errorSignOut": "Failed to sign out. Please try again."
+    },
+    "general": {
+      "urlNotProvided": "URL not provided. Please provide endpoint URL.",
+      "prettifyError": "Failed to prettify query."
+    }
+  },
+  "Header": {
+    "home": "Home",
+    "languageLabel": "English",
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "signOut": "Sign Out"
+  },
+  "HomePage": {
+    "title": "Welcome!",
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "welcomeBack": "Welcome Back, {name}!",
+    "restClient": "REST Client",
+    "graphiqlClient": "GraphiQL Client",
+    "history": "History"
+  },
+  "SignInPage": {
+    "title": "Welcome Back",
+    "noAccount": "Don't have an account yet?",
+    "signUpLink": "Sign up here",
+    "email": "Email",
+    "password": "Password",
+    "signInButton": "Sign in"
+  },
+  "SignUpPage": {
+    "title": "Create Account",
+    "haveAccount": "Already have an account?",
+    "signInLink": "Sign in here",
+    "name": "Name",
+    "email": "Email",
+    "password": "Password",
+    "confirmPassword": "Confirm password",
+    "signUpButton": "Sign up"
+  },
+  "RestClient": {
+    "send": "SEND",
+    "params": "Params",
+    "headers": "Headers",
+    "body": "Body",
+    "variables": "Variables",
+    "queryParams": "Query Params"
+  },
+  "Response": {
+    "response": "Response",
+    "body": "Body",
+    "headers": "Headers",
+    "key": "Key",
+    "value": "Value",
+    "hitSendAlt": "hit send response",
+    "clickToSend": "Click To Send a response",
+    "couldNotSendRequest": "Could not send request"
+  },
+  "HistoryPage": {
+    "emptyRequestsAlt": "empty requests",
+    "noRequests": "You haven't executed any requests",
+    "tryFollowing": "It's empty here. Try:",
+    "restClient": "REST Client",
+    "graphiqlClient": "GraphiQL Client",
+    "delete": "Delete",
+    "dense": "Compact",
+    "method": "Method",
+    "url": "URL",
+    "status": "Status",
+    "date": "Date",
+    "rowsPerPage": "Rows per page:",
+    "of": "of",
+    "rows": "Rows:",
+    "selected": "selected",
+    "requestsHistory": "Requests History"
+  },
+  "NotFound": {
+    "title": "404 Page Not Found",
+    "backToHome": "Back to Home"
+  }
+}
diff --git a/messages/ru.json b/messages/ru.json
new file mode 100644
index 0000000..6f84f45
--- /dev/null
+++ b/messages/ru.json
@@ -0,0 +1,97 @@
+{
+  "Language": {
+    "label": "Сменить язык",
+    "locale": "RU"
+  },
+  "ToastMessages": {
+    "auth": {
+      "successSignIn": "Вы успешно вошли в систему.",
+      "errorSignIn": "Не удалось войти. Пожалуйста, попробуйте еще раз.",
+      "userNotFound": "Пожалуйста, проверьте вашу электронную почту и пароль или создайте аккаунт.",
+      "confirmEmail": "Пожалуйста, подтвердите ваш адрес электронной почты",
+      "successSignUp": "Вы успешно зарегистрировались.",
+      "errorSignUp": "Не удалось зарегистрироваться. Пожалуйста, попробуйте еще раз.",
+      "userAlreadyExist": "Пользователь уже существует. Пожалуйста, войдите в систему.",
+      "signOutSuccess": "Вы вышли из системы.",
+      "errorSignOut": "Не удалось выйти. Пожалуйста, попробуйте еще раз."
+    },
+    "general": {
+      "urlNotProvided": "URL не указан. Пожалуйста, укажите URL конечной точки.",
+      "prettifyError": "Не удалось отформатировать запрос."
+    }
+  },
+  "Header": {
+    "home": "Главная",
+    "language": "RU",
+    "signIn": "Войти",
+    "signUp": "Регистрация",
+    "signOut": "Выйти"
+  },
+  "HomePage": {
+    "title": "Добро пожаловать!",
+    "signIn": "Войти",
+    "signUp": "Регистрация",
+    "welcomeBack": "С возвращением, {name}!",
+    "restClient": "REST Клиент",
+    "graphiqlClient": "GraphiQL Клиент",
+    "history": "История"
+  },
+  "SignInPage": {
+    "title": "С возвращением",
+    "noAccount": "Еще нет аккаунта?",
+    "signUpLink": "Зарегистрируйтесь здесь",
+    "email": "Электронная почта",
+    "password": "Пароль",
+    "signInButton": "Войти"
+  },
+  "SignUpPage": {
+    "title": "Создать аккаунт",
+    "haveAccount": "Уже есть аккаунт?",
+    "signInLink": "Войдите здесь",
+    "name": "Имя",
+    "email": "Электронная почта",
+    "password": "Пароль",
+    "confirmPassword": "Подтвердите пароль",
+    "signUpButton": "Регистрация"
+  },
+  "RestClient": {
+    "send": "ОТПРАВИТЬ",
+    "params": "Параметры",
+    "headers": "Заголовки",
+    "body": "Тело",
+    "variables": "Переменные",
+    "queryParams": "Параметры запроса"
+  },
+  "Response": {
+    "response": "Ответ",
+    "body": "Тело",
+    "headers": "Заголовки",
+    "key": "Ключ",
+    "value": "Значение",
+    "hitSendAlt": "нажмите отправить ответ",
+    "clickToSend": "Нажмите, чтобы отправить запрос",
+    "couldNotSendRequest": "Не удалось отправить запрос"
+  },
+  "HistoryPage": {
+    "emptyRequestsAlt": "пустые запросы",
+    "noRequests": "Вы еще не выполнили ни одного запроса",
+    "tryFollowing": "Здесь пусто. Попробуйте:",
+    "restClient": "REST Клиент",
+    "graphiqlClient": "GraphiQL Клиент",
+    "delete": "Удалить",
+    "dense": "Компакт",
+    "method": "Метод",
+    "url": "URL",
+    "status": "Статус",
+    "date": "Дата",
+    "rowsPerPage": "Строк на странице:",
+    "of": "из",
+    "rows": "Строк:",
+    "selected": "выбрано",
+    "requestsHistory": "История запросов"
+  },
+  "NotFound": {
+    "title": "404 Страница не найдена",
+    "backToHome": "Вернуться на главную"
+  }
+}

From 941f065ba4035d7e1b1eac625fda0bb2a03fa8d9 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 15:58:46 +0400
Subject: [PATCH 111/157] feat: translate pages and contents except

---
 .../GRAPHQL/[[...endpoint]]/page.tsx          |  0
 app/{ => [locale]}/StoreProvider.tsx          |  0
 app/{ => [locale]}/[...rest]/page.tsx         |  0
 app/{ => [locale]}/globals.css                |  0
 app/{ => [locale]}/history/history.test.tsx   |  0
 app/{ => [locale]}/history/page.tsx           |  0
 app/[locale]/layout.tsx                       | 57 +++++++++++++++++++
 app/{ => [locale]}/loading.tsx                |  0
 app/[locale]/not-found.tsx                    | 15 +++++
 app/{ => [locale]}/page.test.tsx              |  2 +-
 app/[locale]/page.tsx                         |  9 +++
 app/{ => [locale]}/signin/page.tsx            |  0
 app/{ => [locale]}/signup/page.tsx            |  0
 components/DataTable/DataTableHead.tsx        | 50 +++++++++-------
 components/DataTable/DataTableToolbar.tsx     | 25 ++++++--
 components/DataTable/index.tsx                | 22 +++++--
 components/FormSignIn/index.tsx               | 31 +++++-----
 components/FormSignUp/index.tsx               | 35 ++++++------
 components/GraphiQLClient/GraphiqlHeader.tsx  |  2 +-
 components/GraphiQLClient/PrettifyButton.tsx  |  5 +-
 components/GraphiQLClient/index.tsx           |  7 ++-
 components/Header/index.tsx                   | 32 ++++++-----
 components/History/EmptyHistory.tsx           | 16 ++++--
 components/PrivateRoute/index.tsx             |  2 +-
 components/Response/EmptyState.tsx            |  9 ++-
 components/Response/ErrorState.tsx            |  9 ++-
 components/Response/ResponseBody.tsx          |  6 +-
 components/Response/ResponseHeader.tsx        |  6 +-
 components/RestClient/index.tsx               | 35 +++++++-----
 components/Welcome/index.tsx                  | 19 ++++---
 constants/toastMessages.ts                    | 16 ------
 31 files changed, 270 insertions(+), 140 deletions(-)
 rename app/{ => [locale]}/GRAPHQL/[[...endpoint]]/page.tsx (100%)
 rename app/{ => [locale]}/StoreProvider.tsx (100%)
 rename app/{ => [locale]}/[...rest]/page.tsx (100%)
 rename app/{ => [locale]}/globals.css (100%)
 rename app/{ => [locale]}/history/history.test.tsx (100%)
 rename app/{ => [locale]}/history/page.tsx (100%)
 create mode 100644 app/[locale]/layout.tsx
 rename app/{ => [locale]}/loading.tsx (100%)
 create mode 100644 app/[locale]/not-found.tsx
 rename app/{ => [locale]}/page.test.tsx (97%)
 create mode 100644 app/[locale]/page.tsx
 rename app/{ => [locale]}/signin/page.tsx (100%)
 rename app/{ => [locale]}/signup/page.tsx (100%)
 delete mode 100644 constants/toastMessages.ts

diff --git a/app/GRAPHQL/[[...endpoint]]/page.tsx b/app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx
similarity index 100%
rename from app/GRAPHQL/[[...endpoint]]/page.tsx
rename to app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx
diff --git a/app/StoreProvider.tsx b/app/[locale]/StoreProvider.tsx
similarity index 100%
rename from app/StoreProvider.tsx
rename to app/[locale]/StoreProvider.tsx
diff --git a/app/[...rest]/page.tsx b/app/[locale]/[...rest]/page.tsx
similarity index 100%
rename from app/[...rest]/page.tsx
rename to app/[locale]/[...rest]/page.tsx
diff --git a/app/globals.css b/app/[locale]/globals.css
similarity index 100%
rename from app/globals.css
rename to app/[locale]/globals.css
diff --git a/app/history/history.test.tsx b/app/[locale]/history/history.test.tsx
similarity index 100%
rename from app/history/history.test.tsx
rename to app/[locale]/history/history.test.tsx
diff --git a/app/history/page.tsx b/app/[locale]/history/page.tsx
similarity index 100%
rename from app/history/page.tsx
rename to app/[locale]/history/page.tsx
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
new file mode 100644
index 0000000..17b922b
--- /dev/null
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,57 @@
+import type { Metadata } from 'next';
+import { StoreProvider } from './StoreProvider';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import { Inter } from 'next/font/google';
+import { Toaster } from 'sonner';
+import PrivateRoute from '@/components/PrivateRoute';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import CssBaseline from '@mui/material/CssBaseline';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import theme from '@/theme';
+import './globals.css';
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+});
+
+export const metadata: Metadata = {
+  title: 'REST GraphQL Client',
+  description: 'Generated by create next app',
+};
+
+export default async function RootLayout({
+  children,
+  params: { locale },
+}: Readonly<{
+  children: React.ReactNode;
+  params: { locale: string };
+}>) {
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale}>
+      <body className={`${inter.variable}`}>
+        <StoreProvider>
+          <AppRouterCacheProvider options={{ key: 'css' }}>
+            <ThemeProvider theme={theme}>
+              <CssBaseline />
+              <StyledEngineProvider injectFirst>
+                <NextIntlClientProvider messages={messages}>
+                  <Header />
+                  <PrivateRoute>{children}</PrivateRoute>
+                  <Footer />
+                  <Toaster expand={false} richColors closeButton duration={3000} className="bottom-24" />
+                </NextIntlClientProvider>
+              </StyledEngineProvider>
+            </ThemeProvider>
+          </AppRouterCacheProvider>
+        </StoreProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/loading.tsx b/app/[locale]/loading.tsx
similarity index 100%
rename from app/loading.tsx
rename to app/[locale]/loading.tsx
diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
new file mode 100644
index 0000000..7d55e14
--- /dev/null
+++ b/app/[locale]/not-found.tsx
@@ -0,0 +1,15 @@
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+
+function NotFound() {
+  const t = useTranslations('NotFound');
+
+  return (
+    <div className="flex h-screen flex-col items-center justify-center text-white">
+      <h3>{t('title')}</h3>
+      <Link href="/">{t('backToHome')}</Link>
+    </div>
+  );
+}
+
+export default NotFound;
diff --git a/app/page.test.tsx b/app/[locale]/page.test.tsx
similarity index 97%
rename from app/page.test.tsx
rename to app/[locale]/page.test.tsx
index 75de55e..3db2efe 100644
--- a/app/page.test.tsx
+++ b/app/[locale]/page.test.tsx
@@ -2,7 +2,7 @@ import { customRender } from '@/__test__/test-utils';
 import { screen } from '@testing-library/dom';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { User } from 'firebase/auth';
-import Home from '@/app/page';
+import Home from './page';
 
 vi.mock('@/firebase', () => ({
   auth: {},
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 0000000..e2ea739
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,9 @@
+import Welcome from '@/components/Welcome';
+
+export default function Home() {
+  return (
+    <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
+      <Welcome />
+    </main>
+  );
+}
diff --git a/app/signin/page.tsx b/app/[locale]/signin/page.tsx
similarity index 100%
rename from app/signin/page.tsx
rename to app/[locale]/signin/page.tsx
diff --git a/app/signup/page.tsx b/app/[locale]/signup/page.tsx
similarity index 100%
rename from app/signup/page.tsx
rename to app/[locale]/signup/page.tsx
diff --git a/components/DataTable/DataTableHead.tsx b/components/DataTable/DataTableHead.tsx
index 7e8b47a..ac78bca 100644
--- a/components/DataTable/DataTableHead.tsx
+++ b/components/DataTable/DataTableHead.tsx
@@ -9,31 +9,37 @@ interface DataTableProps {
   order: Order;
   orderBy: string;
   requestCount: number;
+  labels: {
+    method: string;
+    url: string;
+    date: string;
+  };
 }
 
-const headCells: readonly HeadCell[] = [
-  {
-    id: 'method',
-    numeric: false,
-    disablePadding: true,
-    label: 'Method',
-  },
-  {
-    id: 'url',
-    numeric: false,
-    disablePadding: false,
-    label: 'URL',
-  },
-  {
-    id: 'date',
-    numeric: false,
-    disablePadding: false,
-    label: 'Date',
-  },
-];
-
 function DataTableHead(props: DataTableProps) {
-  const { onSelectAllClick, order, orderBy, numSelected, requestCount, onRequestSort } = props;
+  const { onSelectAllClick, order, orderBy, numSelected, requestCount, onRequestSort, labels } = props;
+
+  const headCells: readonly HeadCell[] = [
+    {
+      id: 'method',
+      numeric: false,
+      disablePadding: true,
+      label: labels.method,
+    },
+    {
+      id: 'url',
+      numeric: false,
+      disablePadding: false,
+      label: labels.url,
+    },
+    {
+      id: 'date',
+      numeric: false,
+      disablePadding: false,
+      label: labels.date,
+    },
+  ];
+
   const createSortHandler = (property: keyof DataTableType) => (event: React.MouseEvent<unknown>) => {
     onRequestSort(event, property);
   };
diff --git a/components/DataTable/DataTableToolbar.tsx b/components/DataTable/DataTableToolbar.tsx
index 016a1f0..3e1cb0c 100644
--- a/components/DataTable/DataTableToolbar.tsx
+++ b/components/DataTable/DataTableToolbar.tsx
@@ -1,14 +1,27 @@
 import React from 'react';
 import { alpha, FormControlLabel, IconButton, Switch, Toolbar, Tooltip, Typography } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { useTranslations } from 'next-intl';
 
 interface DataTableToolbarProps {
   numSelected: number;
   dense: boolean;
   setDense: React.Dispatch<React.SetStateAction<boolean>>;
   handleDelete: () => void;
+  deleteLabel: string;
+  denseLabel: string;
 }
-function DataTableToolbar({ numSelected, dense, setDense, handleDelete }: DataTableToolbarProps) {
+
+function DataTableToolbar({
+  numSelected,
+  dense,
+  setDense,
+  handleDelete,
+  deleteLabel,
+  denseLabel,
+}: DataTableToolbarProps) {
+  const t = useTranslations('HistoryPage');
+
   const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
     setDense(event.target.checked);
   };
@@ -27,22 +40,22 @@ function DataTableToolbar({ numSelected, dense, setDense, handleDelete }: DataTa
     >
       {numSelected > 0 ? (
         <Typography sx={{ flex: '1 1 100%' }} color="inherit" variant="subtitle1" component="div">
-          {numSelected} selected
+          {numSelected} {t('selected')}
         </Typography>
       ) : (
         <Typography sx={{ flex: '1 1 100%' }} variant="h6" id="tableTitle" component="div">
-          Requests History
+          {t('requestsHistory')}
         </Typography>
       )}
       {numSelected > 0 ? (
-        <Tooltip title="Delete Items">
+        <Tooltip title={deleteLabel}>
           <IconButton onClick={handleDelete}>
             <DeleteIcon />
           </IconButton>
         </Tooltip>
       ) : (
-        <Tooltip title="Reduce List Dense">
-          <FormControlLabel control={<Switch checked={dense} onChange={handleChangeDense} />} label="Dense" />
+        <Tooltip title={denseLabel}>
+          <FormControlLabel control={<Switch checked={dense} onChange={handleChangeDense} />} label={denseLabel} />
         </Tooltip>
       )}
     </Toolbar>
diff --git a/components/DataTable/index.tsx b/components/DataTable/index.tsx
index 928faab..820a707 100644
--- a/components/DataTable/index.tsx
+++ b/components/DataTable/index.tsx
@@ -1,16 +1,17 @@
 import { useMemo, useState } from 'react';
+import { useRouter } from '@/i18n/routing';
 import { Box, Paper, Table, TableContainer, TablePagination, useMediaQuery, useTheme } from '@mui/material';
 import DataTableToolbar from './DataTableToolbar';
 import DataTableHead from './DataTableHead';
 import { getComparator } from '@/utils/getComparator';
 import DataTableBody from './DataTableBody';
-import { useRouter } from 'next/navigation';
 import { generateUrl } from '@/utils/generateUrl';
 import { setAllState } from '@/redux/features/restfulSlice';
 import { useAppDispatch } from '@/redux/hooks';
 import { resetResponse } from '@/redux/features/mainSlice';
 import type { DataTableType, Order } from '@/types/dataTable.types';
 import type { ApiRequest } from '@/types/api.types';
+import { useTranslations } from 'next-intl';
 
 type PropTypes = {
   requests: ApiRequest[];
@@ -28,6 +29,7 @@ export default function DataTable({ requests, setStorageValue }: PropTypes) {
   const router = useRouter();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const t = useTranslations('HistoryPage');
 
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof DataTableType) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -93,7 +95,14 @@ export default function DataTable({ requests, setStorageValue }: PropTypes) {
   return (
     <Box className="padding-x h-full w-full pb-1 pt-3">
       <Paper className="flex h-full w-full flex-col">
-        <DataTableToolbar numSelected={selected.length} dense={dense} setDense={setDense} handleDelete={handleDelete} />
+        <DataTableToolbar
+          numSelected={selected.length}
+          dense={dense}
+          setDense={setDense}
+          handleDelete={handleDelete}
+          deleteLabel={t('delete')}
+          denseLabel={t('dense')}
+        />
         <TableContainer sx={{ flexGrow: 1, overflow: 'auto' }}>
           <Table sx={{ minWidth: 750 }} aria-labelledby="tableTitle" size={dense ? 'small' : 'medium'}>
             <DataTableHead
@@ -103,6 +112,11 @@ export default function DataTable({ requests, setStorageValue }: PropTypes) {
               onSelectAllClick={handleSelectAllClick}
               onRequestSort={handleRequestSort}
               requestCount={requests.length}
+              labels={{
+                method: t('method'),
+                url: t('url'),
+                date: t('date'),
+              }}
             />
             <DataTableBody
               visibleRows={visibleRows}
@@ -122,9 +136,9 @@ export default function DataTable({ requests, setStorageValue }: PropTypes) {
           page={page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
-          labelRowsPerPage={isMobile ? 'Rows:' : 'Rows per page:'}
+          labelRowsPerPage={isMobile ? t('rows') : t('rowsPerPage')}
           labelDisplayedRows={({ from, to, count }) =>
-            isMobile ? `${from}-${to} of ${count}` : `${from}-${to} of ${count}`
+            isMobile ? `${from}-${to} ${t('of')} ${count}` : `${from}-${to} ${t('of')} ${count}`
           }
           slotProps={{
             select: {
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index 4e32b8c..c6cb23a 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import React from 'react';
-import Link from 'next/link';
+import { Link, useRouter } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import type { SignInData } from '@/types/auth.types';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -18,17 +19,17 @@ import {
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { useRouter } from 'next/navigation';
 import { signInWithEmailAndPassword } from '@firebase/auth';
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { FirebaseError } from '@firebase/util';
-import { authToastMessages } from '@/constants/toastMessages';
 import { toast } from 'sonner';
 
 function FormSignIn() {
-  const router = useRouter();
   const [showPassword, setShowPassword] = React.useState(false);
+  const router = useRouter();
+  const t = useTranslations('SignInPage');
+  const tToast = useTranslations('ToastMessages');
 
   const {
     register,
@@ -43,17 +44,17 @@ function FormSignIn() {
       const user = await signInWithEmailAndPassword(auth, data.email, data.password);
       if (!user.user.emailVerified) {
         await logout();
-        toast.info(authToastMessages.confirmEmail);
+        toast.info(tToast('auth.confirmEmail'));
         router.push(routes.signin);
       } else {
-        toast.success(authToastMessages.successSignIn);
+        toast.success(tToast('auth.successSignIn'));
         router.push(routes.home);
       }
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/invalid-credential') {
-        toast.error(authToastMessages.userNotFound);
+        toast.error(tToast('auth.userNotFound'));
       } else {
-        toast.error(authToastMessages.errorSignIn);
+        toast.error(tToast('auth.errorSignIn'));
       }
     }
   };
@@ -66,22 +67,22 @@ function FormSignIn() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
-      <h1 className="text-3xl font-bold">Welcome Back</h1>
+      <h1 className="text-3xl font-bold">{t('title')}</h1>
       <div className="flex items-center gap-1">
-        <p className="m-0">Don&apos;t have an account yet?</p>
+        <p className="m-0">{t('noAccount')}</p>
         <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
-          Sign up here
+          {t('signUpLink')}
         </Link>
       </div>
       <TextField
         error={!!errors.email}
         id="email"
-        label="Email"
+        label={t('email')}
         helperText={errors.email ? errors.email.message : ' '}
         {...register('email')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
-        <InputLabel htmlFor="password">Password</InputLabel>
+        <InputLabel htmlFor="password">{t('password')}</InputLabel>
         <OutlinedInput
           id="password"
           type={showPassword ? 'text' : 'password'}
@@ -97,14 +98,14 @@ function FormSignIn() {
               </IconButton>
             </InputAdornment>
           }
-          label="Password"
+          label={t('password')}
           autoComplete="current-password"
           {...register('password')}
         />
         <FormHelperText>{errors.password ? errors.password.message : ' '}</FormHelperText>
       </FormControl>
       <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
-        Sign in
+        {t('signInButton')}
       </Button>
     </form>
   );
diff --git a/components/FormSignUp/index.tsx b/components/FormSignUp/index.tsx
index 78dd9e5..bb69100 100644
--- a/components/FormSignUp/index.tsx
+++ b/components/FormSignUp/index.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import React from 'react';
-import Link from 'next/link';
+import { Link, useRouter } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import type { SignUpData } from '@/types/auth.types';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -18,18 +19,18 @@ import {
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { useRouter } from 'next/navigation';
 import { signUpValidationSchema } from '@/validation/signup.validation';
 import { createUserWithEmailAndPassword, sendEmailVerification, updateProfile } from '@firebase/auth';
 import { auth, logout } from '@/firebase';
 import { routes } from '@/constants/routes';
 import { FirebaseError } from '@firebase/util';
 import { toast } from 'sonner';
-import { authToastMessages } from '@/constants/toastMessages';
 
 function FormSignUp() {
   const router = useRouter();
   const [showPassword, setShowPassword] = React.useState(false);
+  const t = useTranslations('SignUpPage');
+  const tToast = useTranslations('ToastMessages');
 
   const {
     register,
@@ -44,16 +45,16 @@ function FormSignUp() {
       const userCredential = await createUserWithEmailAndPassword(auth, data.email, data.password);
       await logout();
       await updateProfile(userCredential.user, { displayName: data.name });
-      toast.warning(authToastMessages.confirmEmail);
+      toast.warning(tToast('auth.confirmEmail'));
       await sendEmailVerification(userCredential.user);
       router.push(routes.home);
-      setTimeout(() => toast.success(authToastMessages.successSignUp), 4000);
+      setTimeout(() => toast.success(tToast('auth.successSignUp')), 4000);
     } catch (error) {
       if (error instanceof FirebaseError && error.code === 'auth/email-already-in-use') {
-        toast.warning(authToastMessages.userAlreadyExist);
+        toast.warning(tToast('auth.userAlreadyExist'));
         router.push(routes.signin);
       } else {
-        toast.error(authToastMessages.errorSignUp);
+        toast.error(tToast('auth.errorSignUp'));
       }
     }
   };
@@ -66,29 +67,29 @@ function FormSignUp() {
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full max-w-sm flex-col gap-4 p-3">
-      <h1 className="text-3xl font-bold">Create Account</h1>
+      <h1 className="text-3xl font-bold">{t('title')}</h1>
       <div className="flex items-center gap-1">
-        <p className="m-0">Already have an account?</p>
+        <p className="m-0">{t('haveAccount')}</p>
         <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
-          Sign in here
+          {t('signInLink')}
         </Link>
       </div>
       <TextField
         error={!!errors.name}
         id="name"
-        label="Name"
+        label={t('name')}
         helperText={errors.name ? errors.name.message : ' '}
         {...register('name')}
       />
       <TextField
         error={!!errors.email}
         id="email"
-        label="Email"
+        label={t('email')}
         helperText={errors.email ? errors.email.message : ' '}
         {...register('email')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
-        <InputLabel htmlFor="password">Password</InputLabel>
+        <InputLabel htmlFor="password">{t('password')}</InputLabel>
         <OutlinedInput
           id="password"
           type={showPassword ? 'text' : 'password'}
@@ -104,14 +105,14 @@ function FormSignUp() {
               </IconButton>
             </InputAdornment>
           }
-          label="Password"
+          label={t('password')}
           autoComplete="current-password"
           {...register('password')}
         />
         <FormHelperText>{errors.password ? errors.password.message : ' '}</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" error={!!errors.confirmPassword}>
-        <InputLabel htmlFor="confirm-password">Confirm password</InputLabel>
+        <InputLabel htmlFor="confirm-password">{t('confirmPassword')}</InputLabel>
         <OutlinedInput
           id="confirm-password"
           type={showPassword ? 'text' : 'password'}
@@ -127,14 +128,14 @@ function FormSignUp() {
               </IconButton>
             </InputAdornment>
           }
-          label="Confirm password"
+          label={t('confirmPassword')}
           autoComplete="current-password"
           {...register('confirmPassword')}
         />
         <FormHelperText>{errors.confirmPassword ? errors.confirmPassword.message : ' '}</FormHelperText>
       </FormControl>
       <Button type="submit" variant="contained" disabled={!isValid && isSubmitted}>
-        Sign up
+        {t('signUpButton')}
       </Button>
     </form>
   );
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index fd4f4c5..99035b9 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from '@/i18n/routing';
 import { Button, IconButton, TextField } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
@@ -5,7 +6,6 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { GQLHeader, selectAll, setHeaders } from '@/redux/features/graphiqlSlice';
 import { setBrowserUrl } from '@/utils/setBrowserUrl';
-import { useRouter } from 'next/navigation';
 
 interface GraphiqlHeaderProps {
   headersinput: Record<string, string>;
diff --git a/components/GraphiQLClient/PrettifyButton.tsx b/components/GraphiQLClient/PrettifyButton.tsx
index 89e88a7..983d84a 100644
--- a/components/GraphiQLClient/PrettifyButton.tsx
+++ b/components/GraphiQLClient/PrettifyButton.tsx
@@ -1,18 +1,19 @@
 import { usePrettifyEditors, useQueryEditor } from '@graphiql/react';
 import { Button } from '@mui/material';
 import { toast } from 'sonner';
-import { toastMessages } from '@/constants/toastMessages';
+import { useTranslations } from 'next-intl';
 
 function PrettifyButton() {
   const editor = useQueryEditor();
   const prettifyEditors = usePrettifyEditors();
+  const tToast = useTranslations('ToastMessages');
 
   const handlePrettifyClick = () => {
     if (editor) {
       try {
         prettifyEditors();
       } catch {
-        toast.error(toastMessages.prettifyError);
+        toast.error(tToast('general.prettifyError'));
       }
     }
   };
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 7aed5a3..3b54e66 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -7,7 +7,8 @@ import CustomTabPanel from '../UI/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlSlice';
 import { setResponse } from '@/redux/features/mainSlice';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import GraphiqlHeader from '@/components/GraphiQLClient/GraphiqlHeader';
@@ -21,7 +22,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { urlValidationSchema } from '@/validation/url-graphql.validation';
 import UrlSection from '@/components/GraphiQLClient/UrlSection';
 import { toast } from 'sonner';
-import { toastMessages } from '@/constants/toastMessages';
 import { fetcher } from '@/services/response';
 import { a11yProps } from '@/utils/a11yProps';
 import { getFilteredQuery } from '@/utils/getiFlteredQuery';
@@ -40,6 +40,7 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
   const router = useRouter();
   const dispatch = useAppDispatch();
   setTimeout(() => dispatch(setUrl(urlinput || url)));
+  const tToast = useTranslations('ToastMessages');
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -83,7 +84,7 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
     if (isValid) {
       void executeQuery();
     } else {
-      toast.error(toastMessages.urlNotProvided);
+      toast.error(tToast('general.urlNotProvided'));
     }
   };
 
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 5e2545a..48728c4 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,43 +1,48 @@
 'use client';
-import Link from 'next/link';
-import { routes } from '@/constants/routes';
+
+import { Link, useRouter } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, logout } from '@/firebase';
-import { useRouter } from 'next/navigation';
 import { Button } from '@mui/material';
-import { authToastMessages } from '@/constants/toastMessages';
 import { toast } from 'sonner';
+import { routes } from '@/constants/routes';
+import LanguageSwitcher from '../UI/LanguageSwitcher';
 
 function Header() {
   const [user] = useAuthState(auth);
+
   const router = useRouter();
+  const t = useTranslations('Header');
+  const tToast = useTranslations('ToastMessages');
+
   const onLogout = async () => {
     try {
       await logout();
-      toast.info(authToastMessages.signOutSuccess);
+      toast.info(tToast('auth.signOutSuccess'));
       router.push(routes.home);
     } catch (error) {
-      toast.error(authToastMessages.errorSignOut);
+      toast.info(tToast('auth.errorSignOut'));
     }
   };
+
   return (
     <header className="padding-x z-50 flex h-14 items-center justify-between bg-blue-600 text-white">
       <div>
-        <Link href={routes.home}>Home</Link>
+        <Link href={routes.home}>{t('home')}</Link>
       </div>
       <div className="flex items-center gap-2">
-        <Button variant="outlined" color="inherit">
-          EN
-        </Button>
+        <LanguageSwitcher />
+
         {!user ? (
           <>
-            <Link href={routes.signin}>Sign In</Link>
-            <Link href={routes.signup}>Sign Up</Link>
+            <Link href={routes.signin}>{t('signIn')}</Link>
+            <Link href={routes.signup}>{t('signUp')}</Link>
           </>
         ) : (
           <div>
             <Button color="inherit" onClick={onLogout}>
-              Sign Out
+              {t('signOut')}
             </Button>
           </div>
         )}
@@ -45,4 +50,5 @@ function Header() {
     </header>
   );
 }
+
 export default Header;
diff --git a/components/History/EmptyHistory.tsx b/components/History/EmptyHistory.tsx
index e6865f6..eb91e6f 100644
--- a/components/History/EmptyHistory.tsx
+++ b/components/History/EmptyHistory.tsx
@@ -1,17 +1,20 @@
-import Link from 'next/link';
+import { Link } from '@/i18n/routing';
 import { Box, Button, Typography } from '@mui/material';
 import { routes } from '@/constants/routes';
 import Image from 'next/image';
 import historyImg from '@/public/assets/svg/illustration-search.svg';
+import { useTranslations } from 'next-intl';
 
 function EmptyHistory() {
+  const t = useTranslations('HistoryPage');
+
   return (
     <Box component="section" className="padding-x flex h-full w-full items-center justify-center">
       <Box component="div" className="flex flex-col items-center text-center">
         <Box component="div" className="mb-6 w-full max-w-[200px]">
           <Image
             src={historyImg}
-            alt="empty requests"
+            alt={t('emptyRequestsAlt')}
             width={200}
             height={200}
             priority
@@ -20,21 +23,22 @@ function EmptyHistory() {
         </Box>
 
         <Typography variant="h3" component="h3" className="text-center text-lg font-medium">
-          You haven&apos;t executed any requests
+          {t('noRequests')}
         </Typography>
 
-        <Typography className="mb-3 text-center">It&apos;s empty here. Try:</Typography>
+        <Typography className="mb-3 text-center">{t('tryFollowing')}</Typography>
 
         <Box component="span" className="flex flex-wrap justify-center gap-2">
           <Button variant="contained">
-            <Link href={routes.restful}>REST Client</Link>
+            <Link href={routes.restful}>{t('restClient')}</Link>
           </Button>
           <Button variant="contained">
-            <Link href={routes.graphql}>GraphiQL Client</Link>
+            <Link href={routes.graphql}>{t('graphiqlClient')}</Link>
           </Button>
         </Box>
       </Box>
     </Box>
   );
 }
+
 export default EmptyHistory;
diff --git a/components/PrivateRoute/index.tsx b/components/PrivateRoute/index.tsx
index 325afe1..6bee9ec 100644
--- a/components/PrivateRoute/index.tsx
+++ b/components/PrivateRoute/index.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth } from '@/firebase';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter } from '@/i18n/routing';
 import { routes } from '@/constants/routes';
 import Elipsis from '../UI/Ellipsis';
 
diff --git a/components/Response/EmptyState.tsx b/components/Response/EmptyState.tsx
index d07fdcd..6875224 100644
--- a/components/Response/EmptyState.tsx
+++ b/components/Response/EmptyState.tsx
@@ -1,25 +1,28 @@
 import { Box, Typography } from '@mui/material';
 import Image from 'next/image';
 import hitSend from '@/public/assets/svg/illustration-hit-send.svg';
+import { useTranslations } from 'next-intl';
 
 function EmptyState() {
+  const t = useTranslations('Response');
+
   return (
     <Box component="section" className="flex h-full flex-col px-3 sm:px-4 md:px-8 lg:px-12">
       <Typography variant="caption" component="h5" className="bg-transparent py-2 text-sm font-medium">
-        Response
+        {t('response')}
       </Typography>
       <Box component="div" className="flex h-full flex-col items-center justify-center">
         <Box component="div" className="overflow-hidden">
           <Image
             src={hitSend}
-            alt="hit send response"
+            alt={t('hitSendAlt')}
             width={140}
             height={140}
             className="mb-3 h-auto w-full object-contain"
             priority
           />
           <Typography variant="caption" component="p" className="text-center text-sm">
-            Click To Send a response
+            {t('clickToSend')}
           </Typography>
         </Box>
       </Box>
diff --git a/components/Response/ErrorState.tsx b/components/Response/ErrorState.tsx
index e318567..fe5b9f2 100644
--- a/components/Response/ErrorState.tsx
+++ b/components/Response/ErrorState.tsx
@@ -3,26 +3,29 @@ import Image from 'next/image';
 import failedFetch from '@/public/assets/images/failed-fetch.webp';
 import { useAppSelector } from '@/redux/hooks';
 import { selectResponse } from '@/redux/features/mainSlice';
+import { useTranslations } from 'next-intl';
 
 function ErrorState() {
+  const t = useTranslations('Response');
   const { statusText } = useAppSelector(selectResponse);
+
   return (
     <Box component="section" className="flex h-full flex-col px-3 sm:px-4 md:px-8 lg:px-12">
       <Typography variant="caption" component="h5" className="bg-transparent py-2 text-sm font-medium">
-        Response
+        {t('response')}
       </Typography>
       <Box component="div" className="flex h-full flex-col items-center justify-center">
         <Box component="div" className="flex flex-col items-center overflow-hidden">
           <Image
             src={failedFetch}
-            alt="Could not send request"
+            alt={t('couldNotSendRequest')}
             width={140}
             height={140}
             className="mb-3 h-auto w-auto object-contain"
             priority
           />
           <Typography variant="caption" component="p" className="mb-2 text-center text-sm">
-            Could not send request
+            {t('couldNotSendRequest')}
           </Typography>
 
           <Typography
diff --git a/components/Response/ResponseBody.tsx b/components/Response/ResponseBody.tsx
index 2bc21f7..29d6367 100644
--- a/components/Response/ResponseBody.tsx
+++ b/components/Response/ResponseBody.tsx
@@ -4,12 +4,14 @@ import { useAppSelector } from '@/redux/hooks';
 import Editor from '@monaco-editor/react';
 import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import CustomTabPanel from '../UI/CustomTabPanel';
+import { useTranslations } from 'next-intl';
 
 type PropTypes = {
   activeTab: number;
 };
 
 function ResponseBody({ activeTab }: PropTypes) {
+  const t = useTranslations('Response');
   const { data, parsedHeaders } = useAppSelector(selectResponse);
 
   const headers = Object.entries(parsedHeaders).map(([key, value]) => ({
@@ -62,8 +64,8 @@ function ResponseBody({ activeTab }: PropTypes) {
           <Table stickyHeader aria-label="response headers table">
             <TableHead>
               <TableRow>
-                <TableCell className="w-full">Key</TableCell>
-                <TableCell className="w-full">Value</TableCell>
+                <TableCell className="w-full">{t('key')}</TableCell>
+                <TableCell className="w-full">{t('value')}</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
diff --git a/components/Response/ResponseHeader.tsx b/components/Response/ResponseHeader.tsx
index b9e4289..ea2c42a 100644
--- a/components/Response/ResponseHeader.tsx
+++ b/components/Response/ResponseHeader.tsx
@@ -4,6 +4,7 @@ import { a11yProps } from '@/utils/a11yProps';
 import { getStatusColor } from '@/utils/getStatusColor';
 import { Box, Divider, Tab, Tabs, Typography } from '@mui/material';
 import prettyBytes from 'pretty-bytes';
+import { useTranslations } from 'next-intl';
 
 type PropTypes = {
   activeTab: number;
@@ -11,6 +12,7 @@ type PropTypes = {
 };
 
 function ResponseHeader({ activeTab, handleTabChange }: PropTypes) {
+  const t = useTranslations('Response');
   const { data, parsedHeaders, status, statusText, responseTime } = useAppSelector(selectResponse);
   const size = [JSON.stringify(data), JSON.stringify(parsedHeaders)].reduce((acc, cur) => acc + cur.length, 0);
 
@@ -26,8 +28,8 @@ function ResponseHeader({ activeTab, handleTabChange }: PropTypes) {
           className: 'bg-orange-500 mb-0 h-[2px] bottom-2',
         }}
       >
-        <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
-        <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
+        <Tab label={t('body')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
+        <Tab label={t('headers')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
       </Tabs>
 
       <Box component="div" className="flex items-center justify-between gap-1 sm:gap-3">
diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index a88ce4d..5239ce7 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -1,11 +1,11 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import InputTable from '@/components/Table/InputTable';
 import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
 import Editor from '@monaco-editor/react';
 import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { methods } from '@/constants/restClientData';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/i18n/routing';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { selectAll, setAllState } from '@/redux/features/restfulSlice';
@@ -17,7 +17,7 @@ import { setResponse, setIsLoading } from '@/redux/features/mainSlice';
 import { a11yProps } from '@/utils/a11yProps';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { toast } from 'sonner';
-import { toastMessages } from '@/constants/toastMessages';
+import { useTranslations } from 'next-intl';
 
 export type Inputs = {
   method: HttpMethod;
@@ -29,6 +29,11 @@ export type Inputs = {
 };
 
 function RestForm() {
+  const t = useTranslations('RestClient');
+  const tToast = useTranslations('ToastMessages');
+
+  const urlErrorMessage = useMemo(() => tToast('general.urlNotProvided'), [tToast]);
+
   const [activeTab, setActiveTab] = useState(0);
   const { storedValue: request, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
   const dispatch = useAppDispatch();
@@ -88,8 +93,10 @@ function RestForm() {
   };
 
   useEffect(() => {
-    if (errors.url?.type === 'required') toast.error(toastMessages.urlNotProvided);
-  }, [errors.url]);
+    if (errors.url?.type === 'required') {
+      toast.error(urlErrorMessage);
+    }
+  }, [errors.url, urlErrorMessage]);
 
   const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
 
@@ -128,7 +135,7 @@ function RestForm() {
             </FormControl>
 
             <Button disabled={isSubmitting} variant="contained" className="ml-2 h-10" type="submit">
-              SEND
+              {t('send')}
             </Button>
           </Box>
 
@@ -140,19 +147,19 @@ function RestForm() {
               className: 'bg-orange-500 mb-0 h-[2px] bottom-2',
             }}
           >
-            <Tab label="Params" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
-            <Tab label="Headers" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
-            <Tab label="Body" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
-            <Tab label="Variables" className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(3)} />
+            <Tab label={t('params')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(0)} />
+            <Tab label={t('headers')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(1)} />
+            <Tab label={t('body')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(2)} />
+            <Tab label={t('variables')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(3)} />
           </Tabs>
 
           <CustomTabPanel value={activeTab} index={0}>
-            <Typography className="text-sm">Query Params</Typography>
+            <Typography className="text-sm">{t('queryParams')}</Typography>
             <InputTable inputName="params" />
           </CustomTabPanel>
 
           <CustomTabPanel value={activeTab} index={1}>
-            <Typography className="text-sm">Headers</Typography>
+            <Typography className="text-sm">{t('headers')}</Typography>
             <InputTable inputName="headers" />
           </CustomTabPanel>
 
@@ -182,11 +189,11 @@ function RestForm() {
               name="body"
               control={control}
             />
-            Body
+            {t('body')}
           </CustomTabPanel>
 
           <CustomTabPanel value={activeTab} index={3}>
-            <Typography className="text-sm">Variables</Typography>
+            <Typography className="text-sm">{t('variables')}</Typography>
             <InputTable inputName="variables" />
           </CustomTabPanel>
         </form>
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
index c2f42a9..42143b4 100644
--- a/components/Welcome/index.tsx
+++ b/components/Welcome/index.tsx
@@ -1,39 +1,40 @@
 'use client';
 import { auth } from '@/firebase';
 import { useAuthState } from 'react-firebase-hooks/auth';
+import { Link } from '@/i18n/routing';
 import { routes } from '@/constants/routes';
-import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 
 const Welcome = () => {
   const [user] = useAuthState(auth);
-
+  const t = useTranslations('HomePage');
   return (
     <div>
       <div>
         {!user ? (
           <div>
-            <h2 className="text-center">Welcome!</h2>
+            <h2 className="text-center">{t('title')}</h2>
             <div className="flex gap-2">
               <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
-                Sign In
+                {t('signIn')}
               </Link>
               <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
-                Sign Up
+                {t('signUp')}
               </Link>
             </div>
           </div>
         ) : (
           <div>
-            <h2 className="text-center">Welcome Back, {user.displayName}!</h2>
+            <h2 className="text-center">{t('welcomeBack', { name: user.displayName })}</h2>
             <div className="flex gap-2">
               <Link href={routes.restful} className="text-blue-500 hover:text-blue-700">
-                REST Client
+                {t('restClient')}
               </Link>
               <Link href={routes.graphql} className="text-blue-500 hover:text-blue-700">
-                GraphiQL Client
+                {t('graphiqlClient')}
               </Link>
               <Link href={routes.history} className="text-blue-500 hover:text-blue-700">
-                History
+                {t('history')}
               </Link>
             </div>
           </div>
diff --git a/constants/toastMessages.ts b/constants/toastMessages.ts
deleted file mode 100644
index 4a09394..0000000
--- a/constants/toastMessages.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export const authToastMessages = {
-  successSignIn: 'You have successfully signed in.',
-  errorSignIn: 'Failed to sign in. Please try again.',
-  userNotFound: 'Please check your email and password or create an account.',
-  confirmEmail: 'Please confirm your email address',
-  successSignUp: 'You have successfully signed up.',
-  errorSignUp: 'Failed to sign up. Please try again.',
-  userAlreadyExist: 'User already exist. Please sign in.',
-  signOutSuccess: 'You are sign out.',
-  errorSignOut: 'Failed to sign out. Please try again.',
-};
-
-export const toastMessages = {
-  urlNotProvided: 'Url not provided. Please provide endpoint url.',
-  prettifyError: 'Failed to prettify query.',
-};

From ca28d6fcca828cf54d4d86d6bd99a7f314781d53 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Fri, 13 Sep 2024 20:00:12 +0400
Subject: [PATCH 112/157] test: add next-intl to test-wrapper

---
 __test__/test-utils.tsx               | 27 ++++++++++++++++++++++----
 app/[locale]/history/history.test.tsx |  6 ++++++
 app/[locale]/i18n.test.tsx            | 28 +++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 app/[locale]/i18n.test.tsx

diff --git a/__test__/test-utils.tsx b/__test__/test-utils.tsx
index 057b0eb..c580004 100644
--- a/__test__/test-utils.tsx
+++ b/__test__/test-utils.tsx
@@ -4,19 +4,26 @@ import { Provider } from 'react-redux';
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '@/theme';
-import { AppRouterContext, AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import userEvent from '@testing-library/user-event';
 import { mainSlice } from '@/redux/features/mainSlice';
 import { graphiqlSlice } from '@/redux/features/graphiqlSlice';
 import { restfulSlice } from '@/redux/features/restfulSlice';
+import { AbstractIntlMessages, NextIntlClientProvider } from 'next-intl';
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import enLocale from '../messages/en.json';
+import ruLocale from '../messages/ru.json';
 
-const mockUseRouter: Partial<AppRouterInstance> = {
+const mockUseRouter = {
   push: vi.fn(),
   replace: vi.fn(),
   prefetch: vi.fn(),
   back: vi.fn(),
   forward: vi.fn(),
   refresh: vi.fn(),
+  pathname: '/',
+  locale: 'en',
+  locales: ['en', 'ru'],
+  route: '/',
 };
 
 const rootReducer = combineReducers({
@@ -39,15 +46,27 @@ export type AppDispatch = AppStore['dispatch'];
 interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
   preloadedState?: Partial<RootState>;
   store?: AppStore;
+  locale?: string;
+  messages?: Record<string, string | AbstractIntlMessages>;
 }
 
 export function customRender(ui: ReactElement, extendedRenderOptions: ExtendedRenderOptions = {}) {
-  const { preloadedState = {}, store = setupStore(preloadedState), ...renderOptions } = extendedRenderOptions;
+  const {
+    preloadedState = {},
+    store = setupStore(preloadedState),
+    locale = 'en',
+    messages = locale === 'en' ? enLocale : ruLocale,
+    ...renderOptions
+  } = extendedRenderOptions;
 
   const Wrapper = ({ children }: PropsWithChildren) => (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
-        <AppRouterContext.Provider value={mockUseRouter as AppRouterInstance}>{children}</AppRouterContext.Provider>
+        <AppRouterContext.Provider value={mockUseRouter}>
+          <NextIntlClientProvider locale={locale} messages={messages}>
+            {children}
+          </NextIntlClientProvider>
+        </AppRouterContext.Provider>
       </ThemeProvider>
     </Provider>
   );
diff --git a/app/[locale]/history/history.test.tsx b/app/[locale]/history/history.test.tsx
index 6721a53..29cbac7 100644
--- a/app/[locale]/history/history.test.tsx
+++ b/app/[locale]/history/history.test.tsx
@@ -15,6 +15,9 @@ describe('History Page', () => {
 
     customRender(<History />);
     expect(screen.getByText("You haven't executed any requests")).toBeInTheDocument();
+    expect(screen.getByText("It's empty here. Try:")).toBeInTheDocument();
+    expect(screen.getByText('REST Client')).toBeInTheDocument();
+    expect(screen.getByText('GraphiQL Client')).toBeInTheDocument();
   });
 
   it('renders DataTable when requests are stored', () => {
@@ -25,5 +28,8 @@ describe('History Page', () => {
 
     customRender(<History />);
     expect(screen.queryByText("You haven't executed any requests")).not.toBeInTheDocument();
+    expect(screen.queryByText("It's empty here. Try:")).not.toBeInTheDocument();
+    expect(screen.queryByText('REST Client')).not.toBeInTheDocument();
+    expect(screen.queryByText('GraphiQL Client')).not.toBeInTheDocument();
   });
 });
diff --git a/app/[locale]/i18n.test.tsx b/app/[locale]/i18n.test.tsx
new file mode 100644
index 0000000..963cf74
--- /dev/null
+++ b/app/[locale]/i18n.test.tsx
@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from 'vitest';
+import { NextRequest } from 'next/server';
+import middleware from '../../middleware';
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+}));
+
+describe('i18n routing', () => {
+  it('redirects to default locale', async () => {
+    const req = new NextRequest(new URL('http://localhost/'));
+    const res = middleware(req);
+    expect(res?.status).toBe(307);
+    expect(res?.headers.get('Location')).toBe('http://localhost/en');
+  });
+
+  it('remembers the last locale', async () => {
+    const req = new NextRequest(new URL('http://localhost/'));
+    req.cookies.set('NEXT_LOCALE', 'ru');
+    const res = middleware(req);
+    expect(res?.status).toBe(307);
+    expect(res?.headers.get('Location')).toBe('http://localhost/ru');
+  });
+});

From f0e92421b1ec85424d13a603a4b93d590351d243 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 13 Sep 2024 19:45:17 +0200
Subject: [PATCH 113/157] test: add Signin page and Signup page test

---
 app/[locale]/signin/signin-page.test.tsx | 20 ++++++++++++++++++++
 app/[locale]/signup/signup-page.test.tsx | 20 ++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 app/[locale]/signin/signin-page.test.tsx
 create mode 100644 app/[locale]/signup/signup-page.test.tsx

diff --git a/app/[locale]/signin/signin-page.test.tsx b/app/[locale]/signin/signin-page.test.tsx
new file mode 100644
index 0000000..a977831
--- /dev/null
+++ b/app/[locale]/signin/signin-page.test.tsx
@@ -0,0 +1,20 @@
+import { screen } from '@testing-library/react';
+import { customRender } from '@/__test__/test-utils';
+import SignIn from './page';
+import * as FormSignInComponent from '@/components/FormSignIn';
+
+vi.mock('@/firebase', () => ({
+  auth: {},
+}));
+
+vi.mock('@/components/FormSignIn');
+
+describe('SignIn Page', () => {
+  it('renders FormSignIn component', () => {
+    vi.spyOn(FormSignInComponent, 'default').mockReturnValue(<div>Mocked FormSignIn</div>);
+
+    customRender(<SignIn />);
+
+    expect(screen.getByText('Mocked FormSignIn')).toBeInTheDocument();
+  });
+});
diff --git a/app/[locale]/signup/signup-page.test.tsx b/app/[locale]/signup/signup-page.test.tsx
new file mode 100644
index 0000000..5aa0ca2
--- /dev/null
+++ b/app/[locale]/signup/signup-page.test.tsx
@@ -0,0 +1,20 @@
+import { screen } from '@testing-library/react';
+import { customRender } from '@/__test__/test-utils';
+import * as FormSignUpComponent from '@/components/FormSignUp';
+import SignUp from './page';
+
+vi.mock('@/firebase', () => ({
+  auth: {},
+}));
+
+vi.mock('@/components/FormSignIn');
+
+describe('SignUp Page', () => {
+  it('renders FormSignUp component', () => {
+    vi.spyOn(FormSignUpComponent, 'default').mockReturnValue(<div>Mocked FormSignUp</div>);
+
+    customRender(<SignUp />);
+
+    expect(screen.getByText('Mocked FormSignUp')).toBeInTheDocument();
+  });
+});

From f9fe12834808bd7b7230fec53012629e453abf0d Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Fri, 13 Sep 2024 19:53:29 +0200
Subject: [PATCH 114/157] test: add FormSignIn component test

---
 components/FormSignIn/signin.test.tsx | 126 ++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 components/FormSignIn/signin.test.tsx

diff --git a/components/FormSignIn/signin.test.tsx b/components/FormSignIn/signin.test.tsx
new file mode 100644
index 0000000..2a0178c
--- /dev/null
+++ b/components/FormSignIn/signin.test.tsx
@@ -0,0 +1,126 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { MockedFunction, vi } from 'vitest';
+import { IdTokenResult, signInWithEmailAndPassword } from '@firebase/auth';
+import FormSignIn from '@/components/FormSignIn';
+import { customRender } from '@/__test__/test-utils';
+import { ReactNode } from 'react';
+
+vi.mock('@/i18n/routing', () => ({
+  Link: ({ children, href }: { children: ReactNode; href: string }) => <a href={href}>{children}</a>,
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    pathname: '/',
+    route: '/',
+    query: {},
+    asPath: '/',
+  }),
+}));
+
+vi.mock('@firebase/auth', () => ({
+  signInWithEmailAndPassword: vi.fn(),
+}));
+
+vi.mock('@/firebase', () => ({
+  auth: {},
+  logout: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe('FormSignIn', () => {
+  beforeEach(() => {
+    (signInWithEmailAndPassword as MockedFunction<typeof signInWithEmailAndPassword>).mockResolvedValue({
+      user: {
+        emailVerified: true,
+        isAnonymous: false,
+        metadata: {},
+        providerData: [],
+        refreshToken: '',
+        tenantId: null,
+        delete: function (): Promise<void> {
+          throw new Error('Function not implemented.');
+        },
+        getIdToken: function (): Promise<string> {
+          throw new Error('Function not implemented.');
+        },
+        getIdTokenResult: function (): Promise<IdTokenResult> {
+          throw new Error('Function not implemented.');
+        },
+        reload: function (): Promise<void> {
+          throw new Error('Function not implemented.');
+        },
+        toJSON: function (): object {
+          throw new Error('Function not implemented.');
+        },
+        displayName: null,
+        email: null,
+        phoneNumber: null,
+        photoURL: null,
+        providerId: '',
+        uid: '',
+      },
+      providerId: 'firebase',
+      operationType: 'signIn',
+    });
+  });
+
+  it('renders the form correctly', () => {
+    customRender(<FormSignIn />);
+
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i, { selector: 'input' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
+  });
+
+  it('toggles password visibility', () => {
+    customRender(<FormSignIn />);
+
+    const passwordInput = screen.getByLabelText(/password/i, { selector: 'input' }) as HTMLInputElement;
+    const toggleButton = screen.getByRole('button', { name: /toggle password visibility/i });
+
+    expect(passwordInput.type).toBe('password');
+
+    fireEvent.click(toggleButton);
+    expect(passwordInput.type).toBe('text');
+
+    fireEvent.click(toggleButton);
+    expect(passwordInput.type).toBe('password');
+  });
+
+  it('shows validation errors when form is submitted with empty fields', async () => {
+    customRender(<FormSignIn />);
+
+    fireEvent.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/email is required/i)).toBeInTheDocument();
+      expect(screen.getByText(/password is required/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows validation errors when form is submitted with invalid email', async () => {
+    customRender(<FormSignIn />);
+
+    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+    const passwordInput = screen.getByLabelText(/password/i, { selector: 'input' }) as HTMLInputElement;
+
+    fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
+    fireEvent.change(passwordInput, { target: { value: 'password' } });
+
+    fireEvent.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
+    });
+  });
+});

From 72464fd9dbba7118e80270819a13bca186dabed7 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 09:39:51 +0200
Subject: [PATCH 115/157] test: add PrivateRoute test

---
 .../PrivateRoute/private-route.test.tsx       | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 components/PrivateRoute/private-route.test.tsx

diff --git a/components/PrivateRoute/private-route.test.tsx b/components/PrivateRoute/private-route.test.tsx
new file mode 100644
index 0000000..9a654c4
--- /dev/null
+++ b/components/PrivateRoute/private-route.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { MockedFunction, vi } from 'vitest';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import PrivateRoute from '@/components/PrivateRoute/index';
+
+vi.mock('@/i18n/routing', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    pathname: '/some-path',
+  }),
+  usePathname: () => '/some-path',
+}));
+
+vi.mock('@/firebase', () => ({
+  auth: {},
+  logout: vi.fn(),
+}));
+
+vi.mock('react-firebase-hooks/auth', () => ({
+  useAuthState: vi.fn(),
+}));
+
+describe('PrivateRoute', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders <Elipsis /> when loading', () => {
+    (useAuthState as MockedFunction<typeof useAuthState>).mockReturnValue([null, true, undefined]);
+
+    render(
+      <PrivateRoute>
+        <div>Protected Content</div>
+      </PrivateRoute>,
+    );
+
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+  });
+});

From f7364aaebc19c0f108c72dab2167161c51fcf09a Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 12:36:41 +0200
Subject: [PATCH 116/157] test: add FormSignUp component test

---
 components/FormSignUp/signup.test.tsx | 162 ++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 components/FormSignUp/signup.test.tsx

diff --git a/components/FormSignUp/signup.test.tsx b/components/FormSignUp/signup.test.tsx
new file mode 100644
index 0000000..e8f3b62
--- /dev/null
+++ b/components/FormSignUp/signup.test.tsx
@@ -0,0 +1,162 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { MockedFunction, vi } from 'vitest';
+import FormSignUp from '@/components/FormSignUp/index';
+import { customRender } from '@/__test__/test-utils';
+import { createUserWithEmailAndPassword, sendEmailVerification, updateProfile } from '@firebase/auth';
+import { auth, logout } from '@/firebase';
+import { toast } from 'sonner';
+import { FirebaseError } from '@firebase/util';
+
+vi.mock('@/firebase', () => ({
+  auth: {},
+  logout: vi.fn(),
+}));
+
+vi.mock('@firebase/auth', () => ({
+  createUserWithEmailAndPassword: vi.fn().mockResolvedValue({
+    user: {
+      uid: 'user123',
+      email: 'john@example.com',
+      emailVerified: false,
+    },
+    providerId: 'firebase',
+    operationType: 'signIn',
+  }),
+  sendEmailVerification: vi.fn(),
+  updateProfile: vi.fn(),
+}));
+
+vi.mock('next/router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    warning: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe('FormSignUp', () => {
+  beforeEach(() => {
+    (logout as MockedFunction<typeof logout>).mockResolvedValue();
+    (updateProfile as MockedFunction<typeof updateProfile>).mockResolvedValue();
+    (sendEmailVerification as MockedFunction<typeof sendEmailVerification>).mockResolvedValue();
+  });
+
+  it('renders form elements correctly', () => {
+    customRender(<FormSignUp />);
+
+    expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText('Password', { selector: 'input' })).toBeInTheDocument();
+    expect(screen.getByLabelText(/confirm password/i, { selector: 'input' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign up/i })).toBeInTheDocument();
+  });
+
+  it('should show validation errors if form is invalid', async () => {
+    customRender(<FormSignUp />);
+
+    const submitButton = screen.getByRole('button', { name: /sign up/i });
+    submitButton.click();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText((content) => content.includes('Name') && content.includes('required')),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText((content) => content.includes('Email') && content.includes('required')),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText((content) => content.includes('Password') && content.includes('required')),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('submits the form and calls Firebase functions on success', async () => {
+    const { user } = customRender(<FormSignUp />);
+
+    await user.type(screen.getByLabelText(/name/i), 'John Doe');
+    await user.type(screen.getByLabelText(/email/i), 'john@example.com');
+
+    const passwordInput = screen.getByLabelText('Password', { selector: 'input' }) as HTMLInputElement;
+    const confirmPasswordInput = screen.getByLabelText('Confirm password') as HTMLInputElement;
+
+    expect(passwordInput.value).toBe('');
+    expect(confirmPasswordInput.value).toBe('');
+
+    fireEvent.change(passwordInput, { target: { value: 'Password123!' } });
+    fireEvent.change(confirmPasswordInput, { target: { value: 'Password123!' } });
+
+    await user.click(screen.getByRole('button', { name: /sign up/i }));
+    fireEvent.click(screen.getByRole('button', { name: /sign up/i }));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/name/i)).toHaveValue('John Doe');
+      expect(screen.getByLabelText(/email/i)).toHaveValue('john@example.com');
+      expect(screen.getByLabelText('Password', { selector: 'input' })).toHaveValue('Password123!');
+      expect(screen.getByLabelText('Confirm password', { selector: 'input' })).toHaveValue('Password123!');
+      expect(screen.getByRole('button', { name: /sign up/i }).innerText).toBe('Sign up');
+      expect(createUserWithEmailAndPassword).toHaveBeenCalledWith(auth, 'john@example.com', 'Password123!');
+      expect(logout).toHaveBeenCalled();
+      expect(updateProfile).toHaveBeenCalledWith(expect.any(Object), { displayName: 'John Doe' });
+      expect(sendEmailVerification).toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('Please confirm your email address');
+    });
+  });
+
+  it('handles Firebase error on sign up', async () => {
+    (createUserWithEmailAndPassword as MockedFunction<typeof createUserWithEmailAndPassword>).mockRejectedValueOnce(
+      new FirebaseError('auth/email-already-in-use', 'Email already in use'),
+    );
+
+    const { user } = customRender(<FormSignUp />);
+
+    await user.type(screen.getByLabelText(/name/i), 'John Doe');
+    await user.type(screen.getByLabelText(/email/i), 'john@example.com');
+    await user.type(screen.getByLabelText('Password', { selector: 'input' }), 'Password123!');
+    await user.type(screen.getByLabelText('Confirm password'), 'Password123!');
+
+    await user.click(screen.getByRole('button', { name: /sign up/i }));
+
+    await waitFor(() => {
+      expect(toast.warning).toHaveBeenCalledWith('User already exists. Please sign in.');
+    });
+  });
+
+  it('toggles password visibility', () => {
+    customRender(<FormSignUp />);
+
+    const passwordInput = screen.getByLabelText('Password', { selector: 'input' }) as HTMLInputElement;
+    const confirmPasswordInput = screen.getByLabelText('Confirm password', { selector: 'input' }) as HTMLInputElement;
+    const togglePasswordVisibilityButton = screen.getAllByRole('button', { name: /toggle password visibility/i });
+
+    expect(passwordInput.type).toBe('password');
+    expect(confirmPasswordInput.type).toBe('password');
+
+    fireEvent.click(togglePasswordVisibilityButton[0]);
+    expect(passwordInput.type).toBe('text');
+    expect(confirmPasswordInput.type).toBe('text');
+
+    fireEvent.click(togglePasswordVisibilityButton[0]);
+    expect(passwordInput.type).toBe('password');
+    expect(confirmPasswordInput.type).toBe('password');
+  });
+
+  it('prevents default behavior on password visibility toggle button mouse down', () => {
+    customRender(<FormSignUp />);
+
+    const togglePasswordVisibilityButton = screen.getAllByRole('button', { name: /toggle password visibility/i })[0];
+
+    const preventDefaultSpy = vi.spyOn(Event.prototype, 'preventDefault');
+
+    fireEvent.mouseDown(togglePasswordVisibilityButton);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+
+    preventDefaultSpy.mockRestore();
+  });
+});

From 59a867e813140a6abd701180beac51fafb0a96b8 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 13:10:27 +0200
Subject: [PATCH 117/157] fix: fix FormSignIn component test

---
 components/FormSignIn/signin.test.tsx | 106 +++++++++++++++++---------
 1 file changed, 68 insertions(+), 38 deletions(-)

diff --git a/components/FormSignIn/signin.test.tsx b/components/FormSignIn/signin.test.tsx
index 2a0178c..36e2322 100644
--- a/components/FormSignIn/signin.test.tsx
+++ b/components/FormSignIn/signin.test.tsx
@@ -1,9 +1,11 @@
 import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { MockedFunction, vi } from 'vitest';
-import { IdTokenResult, signInWithEmailAndPassword } from '@firebase/auth';
 import FormSignIn from '@/components/FormSignIn';
 import { customRender } from '@/__test__/test-utils';
 import { ReactNode } from 'react';
+import { logout } from '@/firebase';
+import { toast } from 'sonner';
+import { signInWithEmailAndPassword } from '@firebase/auth';
 
 vi.mock('@/i18n/routing', () => ({
   Link: ({ children, href }: { children: ReactNode; href: string }) => <a href={href}>{children}</a>,
@@ -22,7 +24,16 @@ vi.mock('@/i18n/routing', () => ({
 }));
 
 vi.mock('@firebase/auth', () => ({
-  signInWithEmailAndPassword: vi.fn(),
+  signInWithEmailAndPassword: vi.fn().mockResolvedValue({
+    user: {
+      uid: 'user123',
+      email: 'john@example.com',
+      emailVerified: false,
+      displayName: null,
+    },
+    providerId: 'firebase',
+    operationType: 'signIn',
+  }),
 }));
 
 vi.mock('@/firebase', () => ({
@@ -34,46 +45,11 @@ vi.mock('sonner', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
+    info: vi.fn(),
   },
 }));
 
 describe('FormSignIn', () => {
-  beforeEach(() => {
-    (signInWithEmailAndPassword as MockedFunction<typeof signInWithEmailAndPassword>).mockResolvedValue({
-      user: {
-        emailVerified: true,
-        isAnonymous: false,
-        metadata: {},
-        providerData: [],
-        refreshToken: '',
-        tenantId: null,
-        delete: function (): Promise<void> {
-          throw new Error('Function not implemented.');
-        },
-        getIdToken: function (): Promise<string> {
-          throw new Error('Function not implemented.');
-        },
-        getIdTokenResult: function (): Promise<IdTokenResult> {
-          throw new Error('Function not implemented.');
-        },
-        reload: function (): Promise<void> {
-          throw new Error('Function not implemented.');
-        },
-        toJSON: function (): object {
-          throw new Error('Function not implemented.');
-        },
-        displayName: null,
-        email: null,
-        phoneNumber: null,
-        photoURL: null,
-        providerId: '',
-        uid: '',
-      },
-      providerId: 'firebase',
-      operationType: 'signIn',
-    });
-  });
-
   it('renders the form correctly', () => {
     customRender(<FormSignIn />);
 
@@ -123,4 +99,58 @@ describe('FormSignIn', () => {
       expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
     });
   });
+
+  it('submits the form and calls Firebase functions on success', async () => {
+    const { user } = customRender(<FormSignIn />);
+
+    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+    const passwordInput = screen.getByLabelText('Password', { selector: 'input' }) as HTMLInputElement;
+
+    fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'Password123!' } });
+
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    fireEvent.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(signInWithEmailAndPassword).toHaveBeenCalled();
+      expect(logout).toHaveBeenCalled();
+      expect(toast.info).toHaveBeenCalledWith('Please confirm your email address');
+    });
+  });
+
+  it('submits the form and calls Firebase functions on error', async () => {
+    const { user } = customRender(<FormSignIn />);
+    (signInWithEmailAndPassword as MockedFunction<typeof signInWithEmailAndPassword>).mockRejectedValue({
+      code: 'auth/email-already-in-use',
+    });
+
+    const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+    const passwordInput = screen.getByLabelText('Password', { selector: 'input' }) as HTMLInputElement;
+
+    fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
+    fireEvent.change(passwordInput, { target: { value: 'Password123!' } });
+
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    fireEvent.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(signInWithEmailAndPassword).toHaveBeenCalled();
+      expect(toast.error).toHaveBeenCalledWith('Failed to sign in. Please try' + ' again.');
+    });
+  });
+
+  it('prevents default behavior on password visibility toggle button mouse down', () => {
+    customRender(<FormSignIn />);
+
+    const togglePasswordVisibilityButton = screen.getAllByRole('button', { name: /toggle password visibility/i })[0];
+
+    const preventDefaultSpy = vi.spyOn(Event.prototype, 'preventDefault');
+
+    fireEvent.mouseDown(togglePasswordVisibilityButton);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+
+    preventDefaultSpy.mockRestore();
+  });
 });

From 6cbcdb13804618b23e982a7384a0fbb7f00e846b Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 14:15:18 +0200
Subject: [PATCH 118/157] test: add utils tests

---
 utils/a11yProps.test.tsx         | 14 +++++
 utils/coderBase64.test.tsx       | 27 +++++++++
 utils/createQueryString.test.tsx | 40 +++++++++++++
 utils/generateUrl.test.tsx       | 98 ++++++++++++++++++++++++++++++++
 utils/getErrorMessage.test.tsx   | 43 ++++++++++++++
 utils/getStatusColor.test.tsx    | 31 ++++++++++
 utils/getiFlteredQuery.test.tsx  | 14 +++++
 utils/setBrowserUrl.test.tsx     | 45 +++++++++++++++
 8 files changed, 312 insertions(+)
 create mode 100644 utils/a11yProps.test.tsx
 create mode 100644 utils/coderBase64.test.tsx
 create mode 100644 utils/createQueryString.test.tsx
 create mode 100644 utils/generateUrl.test.tsx
 create mode 100644 utils/getErrorMessage.test.tsx
 create mode 100644 utils/getStatusColor.test.tsx
 create mode 100644 utils/getiFlteredQuery.test.tsx
 create mode 100644 utils/setBrowserUrl.test.tsx

diff --git a/utils/a11yProps.test.tsx b/utils/a11yProps.test.tsx
new file mode 100644
index 0000000..9543159
--- /dev/null
+++ b/utils/a11yProps.test.tsx
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { a11yProps } from '@/utils/a11yProps';
+
+describe('a11yProps', () => {
+  it('should return correct accessibility attributes', () => {
+    const index = 1;
+    const result = a11yProps(index);
+
+    expect(result).toEqual({
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    });
+  });
+});
diff --git a/utils/coderBase64.test.tsx b/utils/coderBase64.test.tsx
new file mode 100644
index 0000000..314a3bb
--- /dev/null
+++ b/utils/coderBase64.test.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { base64ToText, textToBase64 } from '@/utils/coderBase64';
+
+describe('coderBase64', () => {
+  it('should encode text to Base64', () => {
+    const originalText = 'Hello, World!';
+    const encodedText = textToBase64(originalText);
+
+    expect(encodedText).toBe('SGVsbG8sIFdvcmxkIQ==');
+  });
+
+  it('should decode Base64 to text', () => {
+    const encodedText = 'SGVsbG8sIFdvcmxkIQ==';
+    const decodedText = base64ToText(encodedText);
+
+    expect(decodedText).toBe('Hello, World!');
+  });
+
+  it('should handle empty string encoding and decoding', () => {
+    const originalText = '';
+    const encodedText = textToBase64(originalText);
+    const decodedText = base64ToText(encodedText);
+
+    expect(encodedText).toBe('');
+    expect(decodedText).toBe('');
+  });
+});
diff --git a/utils/createQueryString.test.tsx b/utils/createQueryString.test.tsx
new file mode 100644
index 0000000..a567325
--- /dev/null
+++ b/utils/createQueryString.test.tsx
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { createQueryString } from '@/utils/createQueryString';
+import { RequestParam } from '@/types/api.types';
+
+describe('createQueryString', () => {
+  it('should return an empty string if the query is undefined', () => {
+    expect(createQueryString(undefined)).toBe('');
+  });
+
+  it('should return an empty string if the query array is empty', () => {
+    expect(createQueryString([])).toBe('');
+  });
+
+  it('should create a query string from valid parameters', () => {
+    const query: RequestParam[] = [
+      { key: 'name', value: 'John Doe', isChecked: true },
+      { key: 'age', value: '30', isChecked: true },
+      { key: 'gender', value: 'male', isChecked: false },
+    ];
+
+    expect(createQueryString(query)).toBe('name=John%20Doe&age=30');
+  });
+
+  it('should exclude parameters with missing keys or values', () => {
+    const query: RequestParam[] = [
+      { key: 'name', value: 'John Doe', isChecked: true },
+      { key: '', value: '30', isChecked: true },
+      { key: 'gender', value: '', isChecked: true },
+      { key: 'email', value: 'john@example.com', isChecked: false },
+    ];
+
+    expect(createQueryString(query)).toBe('name=John%20Doe');
+  });
+
+  it('should handle parameters with special characters in values', () => {
+    const query: RequestParam[] = [{ key: 'search', value: 'test & special=chars', isChecked: true }];
+
+    expect(createQueryString(query)).toBe('search=test%20%26%20special%3Dchars');
+  });
+});
diff --git a/utils/generateUrl.test.tsx b/utils/generateUrl.test.tsx
new file mode 100644
index 0000000..a0e5212
--- /dev/null
+++ b/utils/generateUrl.test.tsx
@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from 'vitest';
+import { generateUrl } from './generateUrl';
+import { createQueryString } from './createQueryString';
+import type { ApiRequest, RequestParam } from '@/types/api.types';
+
+vi.mock('./createQueryString', () => ({
+  createQueryString: vi.fn((params) => {
+    if (params === undefined) return '';
+    if (params.length === 0) return '';
+
+    const queryString = params
+      .map((item: RequestParam) => {
+        if (item.isChecked && item.key && item.value) {
+          return `${item.key}=${encodeURIComponent(item.value)}`;
+        }
+        return null;
+      })
+      .filter(Boolean)
+      .join('&');
+
+    return queryString;
+  }),
+}));
+
+describe('generateUrl', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should generate a URL with all components correctly encoded', () => {
+    const req: ApiRequest = {
+      method: 'GET',
+      url: 'example.com/api',
+      params: [{ key: 'search', value: 'test', isChecked: true }],
+      body: JSON.stringify({ key: 'value' }),
+      headers: [{ key: 'Authorization', value: 'Bearer token', isChecked: true }],
+      id: '',
+      variables: [],
+      date: '',
+    };
+
+    const base64url = btoa(req.url);
+    const param = createQueryString(req.params);
+    const base64param = param && btoa(`?${param}`);
+    const body = req.body && JSON.stringify(req.body);
+    const base64body = body && `/${btoa(body)}`;
+    const headers = createQueryString(req.headers);
+    const headerQuery = headers && `?${headers}`;
+
+    const expectedUrl = `/${req.method}/${base64url}${base64param}${base64body}${headerQuery}`;
+
+    expect(generateUrl(req)).toBe(expectedUrl);
+  });
+
+  it('should handle cases where params, body, or headers are not provided', () => {
+    const req: ApiRequest = {
+      method: 'POST',
+      url: 'example.com/api',
+      body: JSON.stringify({ key: 'value' }),
+      id: '',
+      params: [],
+      headers: [],
+      variables: [],
+      date: '',
+    };
+
+    const base64url = btoa(req.url);
+    const body = req.body && JSON.stringify(req.body);
+    const base64body = body && `/${btoa(body)}`;
+
+    const expectedUrl = `/${req.method}/${base64url}${base64body}`;
+
+    expect(generateUrl(req)).toBe(expectedUrl);
+  });
+
+  it('should handle cases where body is not provided', () => {
+    const req: ApiRequest = {
+      method: 'DELETE',
+      url: 'example.com/api',
+      params: [{ key: 'id', value: '123', isChecked: true }],
+      headers: [{ key: 'Content-Type', value: 'application/json', isChecked: true }],
+      id: '',
+      body: '',
+      variables: [],
+      date: '',
+    };
+
+    const base64url = btoa(req.url);
+    const param = createQueryString(req.params);
+    const base64param = param && btoa(`?${param}`);
+    const headers = createQueryString(req.headers);
+    const headerQuery = headers && `?${headers}`;
+
+    const expectedUrl = `/${req.method}/${base64url}${base64param}${headerQuery}`;
+
+    expect(generateUrl(req)).toBe(expectedUrl);
+  });
+});
diff --git a/utils/getErrorMessage.test.tsx b/utils/getErrorMessage.test.tsx
new file mode 100644
index 0000000..a8d3269
--- /dev/null
+++ b/utils/getErrorMessage.test.tsx
@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { getErrorMessage } from '@/utils/getErrorMessage';
+
+describe('getErrorMessage', () => {
+  it('should return the error message from an Error instance', () => {
+    const error = new Error('Something went wrong');
+    expect(getErrorMessage(error)).toBe('Something went wrong');
+  });
+
+  it('should return a formatted message if the Error has a cause', () => {
+    const causeError = new Error('Cause of the issue');
+    const error = new Error('Main error');
+    error.cause = causeError;
+    expect(getErrorMessage(error)).toBe('Main error: Cause of the issue');
+  });
+
+  it('should return the message from an Error with no cause', () => {
+    const error = new Error('Error with no cause');
+    expect(getErrorMessage(error)).toBe('Error with no cause');
+  });
+
+  it('should return the message from an object with a message property', () => {
+    const error = { message: 'Custom error message' };
+    expect(getErrorMessage(error)).toBe('Custom error message');
+  });
+
+  it('should return a formatted message from an object with code and input properties', () => {
+    const error = { code: 'ERR01', input: 'Invalid input' };
+    expect(getErrorMessage(error)).toBe('ERR01: Invalid input');
+  });
+
+  it('should return the initial message for an object without a message, code, or input', () => {
+    const error = { someOtherProp: 'value' };
+    expect(getErrorMessage(error)).toBe('An error occurred');
+  });
+
+  it('should return the initial message for non-error and non-object types', () => {
+    expect(getErrorMessage(null)).toBe('An error occurred');
+    expect(getErrorMessage(undefined)).toBe('An error occurred');
+    expect(getErrorMessage(123)).toBe('An error occurred');
+    expect(getErrorMessage('string error')).toBe('An error occurred');
+  });
+});
diff --git a/utils/getStatusColor.test.tsx b/utils/getStatusColor.test.tsx
new file mode 100644
index 0000000..2e73093
--- /dev/null
+++ b/utils/getStatusColor.test.tsx
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { getStatusColor } from '@/utils/getStatusColor';
+
+describe('getStatusColor', () => {
+  it('should return the correct color for status codes starting with 1', () => {
+    expect(getStatusColor(100)).toBe('bg-blue-700 text-blue-200');
+    expect(getStatusColor(199)).toBe('bg-blue-700 text-blue-200');
+  });
+
+  it('should return the correct color for status codes starting with 2', () => {
+    expect(getStatusColor(200)).toBe('bg-green-700 text-green-200');
+    expect(getStatusColor(299)).toBe('bg-green-700 text-green-200');
+  });
+
+  it('should return the correct color for status codes starting with 3', () => {
+    expect(getStatusColor(300)).toBe('bg-yellow-700 text-yellow-200');
+    expect(getStatusColor(399)).toBe('bg-yellow-700 text-yellow-200');
+  });
+
+  it('should return the correct color for status codes starting with 4 or 5', () => {
+    expect(getStatusColor(400)).toBe('bg-red-700 text-red-200');
+    expect(getStatusColor(499)).toBe('bg-red-700 text-red-200');
+    expect(getStatusColor(500)).toBe('bg-red-700 text-red-200');
+    expect(getStatusColor(599)).toBe('bg-red-700 text-red-200');
+  });
+
+  it('should handle non-numeric input gracefully', () => {
+    expect(getStatusColor(NaN)).toBe('bg-gray-700 text-gray-200');
+    expect(getStatusColor(Number('string'))).toBe('bg-gray-700 text-gray-200');
+  });
+});
diff --git a/utils/getiFlteredQuery.test.tsx b/utils/getiFlteredQuery.test.tsx
new file mode 100644
index 0000000..b0a0639
--- /dev/null
+++ b/utils/getiFlteredQuery.test.tsx
@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { getFilteredQuery } from '@/utils/getiFlteredQuery';
+
+describe('getFilteredQuery', () => {
+  it('should handle a string with no newlines or comments', () => {
+    const query = 'SELECT * FROM orders;';
+    expect(getFilteredQuery(query)).toBe('SELECT * FROM orders;');
+  });
+
+  it('should handle an empty string', () => {
+    const query = '';
+    expect(getFilteredQuery(query)).toBe('');
+  });
+});
diff --git a/utils/setBrowserUrl.test.tsx b/utils/setBrowserUrl.test.tsx
new file mode 100644
index 0000000..dea3d2c
--- /dev/null
+++ b/utils/setBrowserUrl.test.tsx
@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from 'vitest';
+import { setBrowserUrl } from './setBrowserUrl';
+import { textToBase64 } from '@/utils/coderBase64';
+import { getFilteredQuery } from '@/utils/getiFlteredQuery';
+import { routes } from '@/constants/routes';
+import { GQLHeader } from '@/redux/features/graphiqlSlice';
+
+vi.mock('@/utils/coderBase64', () => ({
+  textToBase64: vi.fn((text: string) => Buffer.from(text).toString('base64')),
+}));
+
+vi.mock('@/utils/getiFlteredQuery', () => ({
+  getFilteredQuery: vi.fn((query: string) => query.trim()),
+}));
+
+describe('setBrowserUrl', () => {
+  it('should handle empty query and headers', () => {
+    const url = 'https://example.com/api/v1/data';
+    const query = '';
+    const headers: GQLHeader[] = [];
+
+    const encodedUrl = textToBase64(url);
+    const encodedBody = textToBase64(JSON.stringify(getFilteredQuery(query)));
+    const headersForUrl = '';
+    const expectedUrl = `${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`;
+
+    expect(setBrowserUrl(url, query, headers)).toBe(expectedUrl);
+  });
+
+  it('should handle special characters in headers', () => {
+    const url = 'https://example.com/api/v1/data';
+    const query = 'some query';
+    const headers: GQLHeader[] = [{ key: 'Custom-Header', value: 'value with special characters !@#$%^&*()' }];
+
+    const encodedUrl = textToBase64(url);
+    const encodedBody = textToBase64(JSON.stringify(getFilteredQuery(query)));
+    const headersForUrl = '?Custom-Header=value with special characters !@#$%^&*()';
+    const expectedUrl = `${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`;
+
+    console.log('Expected URL:', expectedUrl);
+    console.log('Actual URL:', setBrowserUrl(url, query, headers));
+
+    expect(setBrowserUrl(url, query, headers)).toBe(expectedUrl);
+  });
+});

From a5fe6f1c34a2f2c504ac342124945403456817a1 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 14:23:07 +0200
Subject: [PATCH 119/157] refactor: fix vitest.config

---
 utils/setBrowserUrl.test.tsx | 3 ---
 vitest.config.mts            | 4 ++--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/utils/setBrowserUrl.test.tsx b/utils/setBrowserUrl.test.tsx
index dea3d2c..3f20d2e 100644
--- a/utils/setBrowserUrl.test.tsx
+++ b/utils/setBrowserUrl.test.tsx
@@ -37,9 +37,6 @@ describe('setBrowserUrl', () => {
     const headersForUrl = '?Custom-Header=value with special characters !@#$%^&*()';
     const expectedUrl = `${routes.graphql}/${encodedUrl}/${encodedBody}${headersForUrl}`;
 
-    console.log('Expected URL:', expectedUrl);
-    console.log('Actual URL:', setBrowserUrl(url, query, headers));
-
     expect(setBrowserUrl(url, query, headers)).toBe(expectedUrl);
   });
 });
diff --git a/vitest.config.mts b/vitest.config.mts
index 6a16e91..413c10f 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config';
+import { coverageConfigDefaults, defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
@@ -15,7 +15,7 @@ export default defineConfig({
     setupFiles: ['./vitest.setup.tsx'],
     coverage: {
       provider: 'v8',
-      exclude: ['**/.eslintrc.cjs', 'vitest.config.mts', 'next.config.mjs', 'next-env.d.ts'],
+      exclude: ['**/.eslintrc.cjs', 'vitest.config.mts', 'next.config.mjs', 'next-env.d.ts', '**/custom-pattern/**', ...coverageConfigDefaults.exclude],
     },
     css: false,
   },

From a5faa6d879211ec229e5bafad27d34ebc302db0f Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 15:23:23 +0200
Subject: [PATCH 120/157] test: add url-graphgl validation test

---
 validation/url-graphql.test.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 validation/url-graphql.test.tsx

diff --git a/validation/url-graphql.test.tsx b/validation/url-graphql.test.tsx
new file mode 100644
index 0000000..e3fea06
--- /dev/null
+++ b/validation/url-graphql.test.tsx
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { urlValidationSchema } from './url-graphql.validation';
+
+describe('urlValidationSchema', () => {
+  it('should validate valid data correctly', async () => {
+    const validData = {
+      endpoint: 'https://example.com/api',
+      sdl: 'schema definition language content',
+    };
+
+    await expect(urlValidationSchema.validate(validData)).resolves.toEqual(validData);
+  });
+
+  it('should throw an error if endpoint is missing', async () => {
+    const invalidData = {
+      endpoint: '',
+      sdl: 'schema definition language content',
+    };
+
+    await expect(urlValidationSchema.validate(invalidData)).rejects.toThrow('Endpoint is required');
+  });
+
+  it('should throw an error if sdl is missing', async () => {
+    const invalidData = {
+      endpoint: 'https://example.com/api',
+      sdl: '',
+    };
+
+    await expect(urlValidationSchema.validate(invalidData)).rejects.toThrow('SDL is required');
+  });
+});

From d1c1dbdf13f8294626d91ac31f7209c2c484c277 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 15:41:09 +0200
Subject: [PATCH 121/157] test: add app tests

---
 app/layout.test.tsx    | 21 +++++++++++++++++++++
 app/not-found.test.tsx | 15 +++++++++++++++
 app/page.test.tsx      | 15 +++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 app/layout.test.tsx
 create mode 100644 app/not-found.test.tsx
 create mode 100644 app/page.test.tsx

diff --git a/app/layout.test.tsx b/app/layout.test.tsx
new file mode 100644
index 0000000..f4959a0
--- /dev/null
+++ b/app/layout.test.tsx
@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import RootLayout from './layout';
+
+describe('RootLayout', () => {
+  it('should render children correctly', () => {
+    const { getByText } = render(
+      <RootLayout>
+        <div>Test Content</div>
+      </RootLayout>,
+    );
+
+    expect(getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('should render without children', () => {
+    const { container } = render(<RootLayout>{null}</RootLayout>);
+
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/app/not-found.test.tsx b/app/not-found.test.tsx
new file mode 100644
index 0000000..ddef8c6
--- /dev/null
+++ b/app/not-found.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import NotFound from './not-found';
+
+vi.mock('next/error', () => ({
+  default: ({ statusCode }: { statusCode: number }) => <div>Error: {statusCode}</div>,
+}));
+
+describe('NotFound component', () => {
+  it('should render the 404 error page', () => {
+    const { getByText } = render(<NotFound />);
+
+    expect(getByText('Error: 404')).toBeInTheDocument();
+  });
+});
diff --git a/app/page.test.tsx b/app/page.test.tsx
new file mode 100644
index 0000000..c960f84
--- /dev/null
+++ b/app/page.test.tsx
@@ -0,0 +1,15 @@
+import { describe, it, expect, vi } from 'vitest';
+import RootPage from './page';
+import { redirect } from 'next/navigation';
+
+vi.mock('next/navigation', () => ({
+  redirect: vi.fn(),
+}));
+
+describe('RootPage component', () => {
+  it('should call redirect with "/en"', () => {
+    RootPage();
+
+    expect(redirect).toHaveBeenCalledWith('/en');
+  });
+});

From 6124977c87c1c403bf106f9f08fb0c17d698cef3 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 17:40:53 +0200
Subject: [PATCH 122/157] test: add StoreProvider test

---
 app/[locale]/layout.test.tsx         | 32 +++++++++++++++++++++++++++
 app/[locale]/loading.test.tsx        | 22 +++++++++++++++++++
 app/[locale]/not-found.test.tsx      | 27 +++++++++++++++++++++++
 app/[locale]/store-provider.test.tsx | 33 ++++++++++++++++++++++++++++
 vitest.config.mts                    |  9 +++++++-
 5 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 app/[locale]/layout.test.tsx
 create mode 100644 app/[locale]/loading.test.tsx
 create mode 100644 app/[locale]/not-found.test.tsx
 create mode 100644 app/[locale]/store-provider.test.tsx

diff --git a/app/[locale]/layout.test.tsx b/app/[locale]/layout.test.tsx
new file mode 100644
index 0000000..0ac2faa
--- /dev/null
+++ b/app/[locale]/layout.test.tsx
@@ -0,0 +1,32 @@
+import { render, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import RootLayout from '@/app/layout';
+
+vi.mock('next/font/google', () => ({
+  Inter: vi.fn().mockReturnValue({ variable: '--mocked-font-inter' }),
+}));
+
+vi.mock('next-intl/server', () => ({
+  getMessages: vi.fn().mockResolvedValue({}),
+}));
+
+vi.mock('@/components/PrivateRoute', () => ({
+  default: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+}));
+
+describe('RootLayout component', () => {
+  it('should render the layout with children', async () => {
+    const childrenContent = 'Main content';
+
+    const { getByText } = render(
+      <RootLayout>
+        <div>{childrenContent}</div>
+      </RootLayout>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Main content')).toBeInTheDocument();
+      expect(getByText(childrenContent)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/app/[locale]/loading.test.tsx b/app/[locale]/loading.test.tsx
new file mode 100644
index 0000000..9b7ebb5
--- /dev/null
+++ b/app/[locale]/loading.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Loading from './loading';
+
+vi.mock('@/components/UI/Ellipsis', () => ({
+  default: () => <div>Mocked Ellipsis</div>,
+}));
+
+describe('Loading component', () => {
+  it('should render the Ellipsis component and have the correct structure', () => {
+    render(<Loading />);
+
+    expect(screen.getByText('Mocked Ellipsis')).toBeInTheDocument();
+
+    const container = screen.getByText('Mocked Ellipsis').parentElement;
+    expect(container).toHaveClass('flex');
+    expect(container).toHaveClass('h-[calc(100vh-6rem)]');
+    expect(container).toHaveClass('w-screen');
+    expect(container).toHaveClass('items-center');
+    expect(container).toHaveClass('justify-center');
+  });
+});
diff --git a/app/[locale]/not-found.test.tsx b/app/[locale]/not-found.test.tsx
new file mode 100644
index 0000000..6da697c
--- /dev/null
+++ b/app/[locale]/not-found.test.tsx
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import NotFound from './not-found';
+
+vi.mock('next-intl', () => ({
+  useTranslations: vi.fn().mockReturnValue((key: string) => {
+    const translations: { [key: string]: string } = {
+      'NotFound.title': 'Page Not Found',
+      'NotFound.backToHome': 'Back to Home',
+    };
+    return translations[key] || key;
+  }),
+}));
+
+vi.mock('@/i18n/routing', () => ({
+  Link: ({ href, children }: { href: string; children: React.ReactNode }) => <a href={href}>{children}</a>,
+}));
+
+describe('NotFound component', () => {
+  it('should render the not found page with title and back link', () => {
+    const { getByText, debug } = render(<NotFound />);
+
+    debug();
+
+    expect(getByText('backToHome')).toBeInTheDocument();
+  });
+});
diff --git a/app/[locale]/store-provider.test.tsx b/app/[locale]/store-provider.test.tsx
new file mode 100644
index 0000000..fd52fab
--- /dev/null
+++ b/app/[locale]/store-provider.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { StoreProvider } from './StoreProvider';
+
+vi.mock('@reduxjs/toolkit/query', () => ({
+  setupListeners: vi.fn().mockReturnValue(() => {}),
+}));
+
+describe('StoreProvider component', () => {
+  it('should render children correctly', () => {
+    const childrenContent = 'Child Content';
+
+    render(
+      <StoreProvider>
+        <div>{childrenContent}</div>
+      </StoreProvider>,
+    );
+
+    expect(screen.getByText(childrenContent)).toBeInTheDocument();
+  });
+
+  it('should initialize the store correctly', () => {
+    const MockComponent = () => <div>Test Component</div>;
+
+    render(
+      <StoreProvider>
+        <MockComponent />
+      </StoreProvider>,
+    );
+
+    expect(screen.getByText('Test Component')).toBeInTheDocument();
+  });
+});
diff --git a/vitest.config.mts b/vitest.config.mts
index 413c10f..408d016 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -15,7 +15,14 @@ export default defineConfig({
     setupFiles: ['./vitest.setup.tsx'],
     coverage: {
       provider: 'v8',
-      exclude: ['**/.eslintrc.cjs', 'vitest.config.mts', 'next.config.mjs', 'next-env.d.ts', '**/custom-pattern/**', ...coverageConfigDefaults.exclude],
+      exclude: [
+        '**/.eslintrc.cjs',
+        'vitest.config.mts',
+        'next.config.mjs',
+        'next-env.d.ts',
+        '**/custom-pattern/**',
+        ...coverageConfigDefaults.exclude,
+      ],
     },
     css: false,
   },

From 603c1b07287d90511fe2b433db701f16ded9410f Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 18:43:52 +0200
Subject: [PATCH 123/157] test: add redux tests

---
 redux/features/graphiqlSlice.test.tsx |  91 +++++++++++++++++++++
 redux/features/graphiqlSlice.ts       |   4 -
 redux/features/main-slice.test.tsx    | 100 +++++++++++++++++++++++
 redux/features/restfulSlice.test.tsx  | 113 ++++++++++++++++++++++++++
 redux/features/restfulSlice.ts        |   1 -
 5 files changed, 304 insertions(+), 5 deletions(-)
 create mode 100644 redux/features/graphiqlSlice.test.tsx
 create mode 100644 redux/features/main-slice.test.tsx
 create mode 100644 redux/features/restfulSlice.test.tsx

diff --git a/redux/features/graphiqlSlice.test.tsx b/redux/features/graphiqlSlice.test.tsx
new file mode 100644
index 0000000..3be653a
--- /dev/null
+++ b/redux/features/graphiqlSlice.test.tsx
@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest';
+import { configureStore } from '@reduxjs/toolkit';
+import {
+  graphiqlSlice,
+  setQuery,
+  setVariables,
+  setHeaders,
+  setUrl,
+  setSdlUrl,
+  selectAll,
+  selectHeaders,
+} from '../../redux/features/graphiqlSlice';
+
+const store = configureStore({
+  reducer: { graphiql: graphiqlSlice.reducer },
+});
+
+describe('graphiqlSlice', () => {
+  it('should return the initial state', () => {
+    const state = store.getState().graphiql;
+
+    expect(state.query).toBe('');
+    expect(state.variables).toBe('');
+    expect(state.headers).toEqual([{ key: 'Content-Type', value: 'application/json' }]);
+    expect(state.url).toBe('');
+    expect(state.sdlUrl).toBe('');
+    expect(state.response).toBe('');
+  });
+
+  it('should handle setQuery', () => {
+    const newQuery = 'query { user { id name } }';
+    store.dispatch(setQuery(newQuery));
+
+    const state = store.getState().graphiql;
+    expect(state.query).toBe(newQuery);
+  });
+
+  it('should handle setVariables', () => {
+    const newVariables = '{ "id": "123" }';
+    store.dispatch(setVariables(newVariables));
+
+    const state = store.getState().graphiql;
+    expect(state.variables).toBe(newVariables);
+  });
+
+  it('should handle setHeaders', () => {
+    const newHeaders = [{ key: 'Authorization', value: 'Bearer token' }];
+    store.dispatch(setHeaders(newHeaders));
+
+    const state = store.getState().graphiql;
+    expect(state.headers).toEqual(newHeaders);
+  });
+
+  it('should handle setUrl', () => {
+    const newUrl = 'https://example.com/graphql';
+    store.dispatch(setUrl(newUrl));
+
+    const state = store.getState().graphiql;
+    expect(state.url).toBe(newUrl);
+  });
+
+  it('should handle setSdlUrl', () => {
+    const newSdlUrl = 'https://example.com/sdl';
+    store.dispatch(setSdlUrl(newSdlUrl));
+
+    const state = store.getState().graphiql;
+    expect(state.sdlUrl).toBe(newSdlUrl);
+  });
+
+  it('should return the correct state using selectors', () => {
+    const mockState = {
+      query: 'query { user { id name } }',
+      variables: '{ "id": "123" }',
+      headers: [{ key: 'Authorization', value: 'Bearer token' }],
+      url: 'https://example.com/graphql',
+      sdlUrl: 'https://example.com/sdl',
+      response: '',
+    };
+
+    store.dispatch(setQuery(mockState.query));
+    store.dispatch(setVariables(mockState.variables));
+    store.dispatch(setHeaders(mockState.headers));
+    store.dispatch(setUrl(mockState.url));
+    store.dispatch(setSdlUrl(mockState.sdlUrl));
+
+    const state = store.getState();
+
+    expect(selectHeaders(state)).toEqual(mockState.headers);
+    expect(selectAll(state)).toEqual(state.graphiql);
+  });
+});
diff --git a/redux/features/graphiqlSlice.ts b/redux/features/graphiqlSlice.ts
index e728395..c382f0f 100644
--- a/redux/features/graphiqlSlice.ts
+++ b/redux/features/graphiqlSlice.ts
@@ -46,11 +46,7 @@ export const graphiqlSlice = createSlice({
 
   selectors: {
     selectAll: (graphiql) => graphiql,
-    selectQuery: (graphiql) => graphiql.query,
     selectHeaders: (graphiql) => graphiql.headers,
-    selectVariables: (graphiql) => graphiql.variables,
-    selectUrl: (graphiql) => graphiql.url,
-    selectSdlUrl: (graphiql) => graphiql.sdlUrl,
   },
 });
 
diff --git a/redux/features/main-slice.test.tsx b/redux/features/main-slice.test.tsx
new file mode 100644
index 0000000..875af9b
--- /dev/null
+++ b/redux/features/main-slice.test.tsx
@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import { configureStore } from '@reduxjs/toolkit';
+import {
+  mainSlice,
+  setResponse,
+  resetResponse,
+  setIsLoading,
+  selectAllMainState,
+  selectResponse,
+} from '../../redux/features/mainSlice';
+
+const store = configureStore({
+  reducer: { main: mainSlice.reducer },
+});
+
+describe('mainSlice', () => {
+  it('should return the initial state', () => {
+    const state = store.getState().main;
+
+    expect(state.response).toEqual({
+      data: '',
+      status: 0,
+      statusText: '',
+      parsedHeaders: {},
+      success: false,
+      responseTime: 0,
+    });
+    expect(state.isLoading).toBe(false);
+  });
+
+  it('should handle setResponse', () => {
+    const mockResponse = {
+      data: 'Test data',
+      status: 200,
+      statusText: 'OK',
+      parsedHeaders: { 'Content-Type': 'application/json' },
+      success: true,
+      responseTime: 123,
+    };
+
+    store.dispatch(setResponse(mockResponse));
+    const state = store.getState().main;
+
+    expect(state.response).toEqual(mockResponse);
+  });
+
+  it('should handle resetResponse', () => {
+    const mockResponse = {
+      data: 'Test data',
+      status: 200,
+      statusText: 'OK',
+      parsedHeaders: { 'Content-Type': 'application/json' },
+      success: true,
+      responseTime: 123,
+    };
+
+    store.dispatch(setResponse(mockResponse));
+    store.dispatch(resetResponse());
+    const state = store.getState().main;
+
+    expect(state.response).toEqual({
+      data: '',
+      status: 0,
+      statusText: '',
+      parsedHeaders: {},
+      success: false,
+      responseTime: 0,
+    });
+  });
+
+  it('should handle setIsLoading', () => {
+    store.dispatch(setIsLoading(true));
+    const state = store.getState().main;
+
+    expect(state.isLoading).toBe(true);
+
+    store.dispatch(setIsLoading(false));
+    const updatedState = store.getState().main;
+
+    expect(updatedState.isLoading).toBe(false);
+  });
+
+  it('should return the correct state using selectors', () => {
+    const mockResponse = {
+      data: 'Test data',
+      status: 200,
+      statusText: 'OK',
+      parsedHeaders: { 'Content-Type': 'application/json' },
+      success: true,
+      responseTime: 123,
+    };
+
+    store.dispatch(setResponse(mockResponse));
+
+    const state = store.getState();
+
+    expect(selectResponse(state)).toEqual(mockResponse);
+    expect(selectAllMainState(state)).toEqual(state.main);
+  });
+});
diff --git a/redux/features/restfulSlice.test.tsx b/redux/features/restfulSlice.test.tsx
new file mode 100644
index 0000000..534d660
--- /dev/null
+++ b/redux/features/restfulSlice.test.tsx
@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest';
+import { configureStore } from '@reduxjs/toolkit';
+import {
+  restfulSlice,
+  setAllState,
+  setMethod,
+  setURL,
+  setQueryParam,
+  setHeaders,
+  selectAll,
+  selectMethod,
+} from '@/redux/features/restfulSlice';
+import { HttpMethod, RequestParam } from '@/types/api.types';
+
+const { reducer: restfulReducer } = restfulSlice;
+
+const store = configureStore({
+  reducer: { restful: restfulReducer },
+});
+
+describe('restfulSlice', () => {
+  it('should return the initial state', () => {
+    const state = store.getState().restful;
+
+    expect(state).toEqual({
+      id: '',
+      method: 'GET',
+      url: '',
+      params: [{ isChecked: false, key: '', value: '' }],
+      headers: [{ isChecked: true, key: 'Content-Type', value: 'text/html; charset=utf-8' }],
+      body: '',
+      variables: [{ isChecked: false, key: '', value: '' }],
+      date: '',
+    });
+  });
+
+  it('should handle setMethod', () => {
+    const newMethod: HttpMethod = 'POST';
+
+    store.dispatch(setMethod(newMethod));
+    const state = store.getState().restful;
+
+    expect(state.method).toBe(newMethod);
+  });
+
+  it('should handle setURL', () => {
+    const newUrl = 'https://api.example.com/data';
+
+    store.dispatch(setURL(newUrl));
+    const state = store.getState().restful;
+
+    expect(state.url).toBe(newUrl);
+  });
+
+  it('should handle setQueryParam', () => {
+    const newParams: RequestParam[] = [{ isChecked: true, key: 'id', value: '123' }];
+
+    store.dispatch(setQueryParam(newParams));
+    const state = store.getState().restful;
+
+    expect(state.params).toEqual(newParams);
+  });
+
+  it('should handle setHeaders', () => {
+    const newHeaders: RequestParam[] = [{ isChecked: true, key: 'Authorization', value: 'Bearer token' }];
+
+    store.dispatch(setHeaders(newHeaders));
+    const state = store.getState().restful;
+
+    expect(state.headers).toEqual(newHeaders);
+  });
+
+  it('should handle setAllState', () => {
+    const mockApiRequest = {
+      id: '1',
+      method: 'PUT' as HttpMethod,
+      url: 'https://api.example.com/update',
+      params: [{ isChecked: true, key: 'id', value: '456' }],
+      headers: [{ isChecked: true, key: 'Authorization', value: 'Bearer new-token' }],
+      body: '{"name":"new name"}',
+      variables: [{ isChecked: false, key: '', value: '' }],
+      date: '2024-09-14',
+    };
+
+    store.dispatch(setAllState(mockApiRequest));
+    const state = store.getState().restful;
+
+    expect(state).toEqual(mockApiRequest);
+  });
+
+  it('should return the correct state using selectors', () => {
+    const mockState = {
+      id: '1',
+      method: 'POST' as HttpMethod,
+      url: 'https://api.example.com/new-data',
+      params: [{ isChecked: true, key: 'id', value: '789' }],
+      headers: [{ isChecked: true, key: 'Authorization', value: 'Bearer new-token' }],
+      body: '{"data":"some data"}',
+      variables: [{ isChecked: false, key: '', value: '' }],
+      date: '2024-09-15',
+    };
+
+    store.dispatch(setMethod(mockState.method));
+    store.dispatch(setURL(mockState.url));
+    store.dispatch(setQueryParam(mockState.params));
+    store.dispatch(setHeaders(mockState.headers));
+
+    const state = store.getState();
+
+    expect(selectMethod(state)).toEqual(mockState.method);
+    expect(selectAll(state)).toEqual(state.restful);
+  });
+});
diff --git a/redux/features/restfulSlice.ts b/redux/features/restfulSlice.ts
index 6504909..ba60e6e 100644
--- a/redux/features/restfulSlice.ts
+++ b/redux/features/restfulSlice.ts
@@ -54,7 +54,6 @@ export const restfulSlice = createSlice({
   selectors: {
     selectAll: (restful) => restful,
     selectMethod: (restful) => restful.method,
-    selectUrl: (restful) => restful.url,
   },
 });
 

From 0c52e68c63b8d5ce54c8ca07278cb92ce177006c Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 19:31:39 +0200
Subject: [PATCH 124/157] test: add service test

---
 services/response/response.test.tsx | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 services/response/response.test.tsx

diff --git a/services/response/response.test.tsx b/services/response/response.test.tsx
new file mode 100644
index 0000000..baecabe
--- /dev/null
+++ b/services/response/response.test.tsx
@@ -0,0 +1,32 @@
+import { describe, it, expect, vi } from 'vitest';
+import { fetcher } from '@/services/response';
+
+const mockResponse = {
+  data: { message: 'Success' },
+  status: 200,
+  statusText: 'OK',
+  headers: new Headers({ 'Content-Type': 'application/json' }), // Ensure headers are a Headers object
+};
+
+globalThis.fetch = vi.fn().mockResolvedValueOnce({
+  status: mockResponse.status,
+  statusText: mockResponse.statusText,
+  headers: mockResponse.headers,
+  json: async () => mockResponse.data,
+  text: async () => JSON.stringify(mockResponse.data),
+  clone: vi.fn().mockReturnThis(),
+});
+
+describe('fetcher', () => {
+  it('should handle successful JSON response', async () => {
+    const result = await fetcher('https://recipes-back-8dgq.onrender.com/', {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    expect(result.data).toBe(JSON.stringify(mockResponse.data, null, 2));
+    expect(result.status).toBe(mockResponse.status);
+    expect(result.statusText).toBe(mockResponse.statusText);
+    expect(result.responseTime).toBeGreaterThan(0);
+  });
+});

From ab11040e9d83013b3a98c27c0cff00ee48df4384 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sat, 14 Sep 2024 22:37:24 +0400
Subject: [PATCH 125/157] feat: add prettify, json and plan text support for
 editor, refactor restful client

---
 app/[locale]/[...rest]/page.tsx    |   4 +-
 components/RestClient/index.tsx    | 284 ++++++++++++++++++++++-------
 components/Table/InputTable.tsx    |  38 +++-
 components/Table/InputTableRow.tsx | 105 +++++------
 components/UI/CustomTabPanel.tsx   |   2 +-
 messages/en.json                   |   6 +-
 messages/ru.json                   |  10 +-
 package-lock.json                  |   4 +-
 package.json                       |   1 +
 redux/features/restfulSlice.ts     |   6 +-
 types/api.types.ts                 |   7 +-
 utils/replaceVariables.ts          |   6 +-
 12 files changed, 317 insertions(+), 156 deletions(-)

diff --git a/app/[locale]/[...rest]/page.tsx b/app/[locale]/[...rest]/page.tsx
index 245c450..705a83a 100644
--- a/app/[locale]/[...rest]/page.tsx
+++ b/app/[locale]/[...rest]/page.tsx
@@ -6,11 +6,11 @@ export default function RESTful() {
   return (
     <main className="flex h-[calc(100vh-6rem)]">
       <ResizableGroup autoSaveId="restful" direction="vertical">
-        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={20}>
           <RestForm />
         </ResizablePanel>
         <ResizableHandle direction="vertical" />
-        <ResizablePanel defaultSizePercentage={50} minSizePixels={32}>
+        <ResizablePanel defaultSizePercentage={50} minSizePixels={36}>
           <ResponseSection />
         </ResizablePanel>
       </ResizableGroup>
diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index 5239ce7..0623288 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -1,15 +1,27 @@
 'use client';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import InputTable from '@/components/Table/InputTable';
-import { Box, Button, FormControl, MenuItem, OutlinedInput, Select, Tab, Tabs, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  FormControl,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  Tab,
+  Tabs,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
 import Editor from '@monaco-editor/react';
-import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { Controller, FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import { methods } from '@/constants/restClientData';
 import { useRouter } from '@/i18n/routing';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { selectAll, setAllState } from '@/redux/features/restfulSlice';
-import type { HttpMethod, RequestParam, ApiRequest } from '@/types/api.types';
 import { fetcher } from '@/services/response';
 import { generateUrl } from '@/utils/generateUrl';
 import { nanoid } from '@reduxjs/toolkit';
@@ -18,24 +30,21 @@ import { a11yProps } from '@/utils/a11yProps';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { toast } from 'sonner';
 import { useTranslations } from 'next-intl';
-
-export type Inputs = {
-  method: HttpMethod;
-  url: string;
-  params: RequestParam[];
-  headers: RequestParam[];
-  body: string;
-  variables: RequestParam[];
-};
+import { AddCircleOutline, AutoFixHigh } from '@mui/icons-material';
+import type { editor } from 'monaco-editor';
+import { createQueryString } from '@/utils/createQueryString';
+import { replaceVariables } from '@/utils/replaceVariables';
+import type { RequestFormTypes, ApiRequest } from '@/types/api.types';
 
 function RestForm() {
+  const [activeTab, setActiveTab] = useState(0);
+  const [bodyFormat, setBodyFormat] = useState<'json' | 'plaintext'>('json');
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const t = useTranslations('RestClient');
   const tToast = useTranslations('ToastMessages');
-
   const urlErrorMessage = useMemo(() => tToast('general.urlNotProvided'), [tToast]);
 
-  const [activeTab, setActiveTab] = useState(0);
-  const { storedValue: request, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
+  const { storedValue: requests, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
   const dispatch = useAppDispatch();
   const { method, url, params, headers, body, variables } = useAppSelector(selectAll);
   const router = useRouter();
@@ -50,6 +59,7 @@ function RestForm() {
       variables,
     },
   });
+
   const {
     register,
     control,
@@ -57,16 +67,22 @@ function RestForm() {
     watch,
     formState: { errors, isSubmitting },
   } = form;
-  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+
+  const onSubmit: SubmitHandler<RequestFormTypes> = async (data) => {
     dispatch(setIsLoading(true));
-    const { url, method, params, headers, body, variables } = data;
+
     const id = nanoid();
     const date = `${new Date().toISOString()}`;
+    const { url, params, headers, body } = replaceVariables(data);
+    const newRequest: ApiRequest = { id, date, ...data };
 
-    const newRequest: ApiRequest = { id, method, url, params, headers, body, variables, date };
-    setLocalStorageValue([...request, newRequest]);
+    setLocalStorageValue([...requests, newRequest]);
     dispatch(setAllState(newRequest));
 
+    const createdUrlParams = createQueryString(params);
+    const urlParams = createdUrlParams && `?${createdUrlParams}`;
+
+    const fetchUrl = `${url}${urlParams}`;
     const fetchHeaders: Record<string, string> = {};
     const fetchBody: string = body;
 
@@ -76,22 +92,76 @@ function RestForm() {
       }
     });
 
-    const res = await fetcher(url, {
+    const res = await fetcher(fetchUrl, {
       method: data.method,
       headers: fetchHeaders,
       body: fetchBody,
     });
-    dispatch(setResponse(res));
-    dispatch(setIsLoading(false));
-
     const generatedUrl = generateUrl(newRequest);
     router.push(`${generatedUrl}`);
+
+    dispatch(setResponse(res));
+    dispatch(setIsLoading(false));
   };
 
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
   };
 
+  const {
+    fields: paramsFields,
+    append: appendParams,
+    remove: removeParams,
+  } = useFieldArray({
+    control,
+    name: 'params',
+  });
+  const {
+    fields: headersFields,
+    append: appendHeaders,
+    remove: removeHeaders,
+  } = useFieldArray({
+    control,
+    name: 'headers',
+  });
+  const {
+    fields: variablesFields,
+    append: appendVariables,
+    remove: removeVariables,
+  } = useFieldArray({
+    control,
+    name: 'variables',
+  });
+  const handleAddInput = () => {
+    if (activeTab === 0) appendParams({ isChecked: true, key: '', value: '' });
+    if (activeTab === 1) appendHeaders({ isChecked: true, key: '', value: '' });
+    if (activeTab === 3) appendVariables({ isChecked: true, key: '', value: '' });
+  };
+
+  const handleBodyFormatChange = (event: React.MouseEvent<HTMLElement>, newFormat: 'json' | 'plaintext' | null) => {
+    if (newFormat !== null) {
+      setBodyFormat(newFormat);
+    }
+  };
+
+  const handlePrettify = () => {
+    if (editorRef.current) {
+      const model = editorRef.current.getModel();
+      if (model) {
+        try {
+          const value = model.getValue();
+          if (value.trim() === '') {
+            return;
+          }
+          const formatted = bodyFormat === 'json' ? JSON.stringify(JSON.parse(value), null, 2) : value;
+          model.setValue(formatted);
+        } catch (error) {
+          toast.error(tToast('general.prettifyError'));
+        }
+      }
+    }
+  };
+
   useEffect(() => {
     if (errors.url?.type === 'required') {
       toast.error(urlErrorMessage);
@@ -101,15 +171,18 @@ function RestForm() {
   const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
 
   return (
-    <section className="padding-x h-full flex-1 pt-3">
+    <section className="padding-x h-full max-h-[50vh] pt-3">
       <FormProvider {...form}>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Box component="div" className="mb-2 flex w-full items-start justify-between">
+        <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col">
+          <Box
+            component="div"
+            className="mb-1 grid w-full items-start justify-between max-sm:grid-cols-[auto_1fr] max-sm:gap-y-1 sm:flex"
+          >
             <Controller
               render={({ field }) => (
                 <Select
                   {...field}
-                  className={`min-w-28 rounded-e-none font-medium ${selectedColor ? selectedColor : 'text-green-500'}`}
+                  className={`rounded-e-none font-medium sm:min-w-28 ${selectedColor ? selectedColor : 'text-green-500'}`}
                   autoWidth
                   size="small"
                 >
@@ -134,12 +207,14 @@ function RestForm() {
               />
             </FormControl>
 
-            <Button disabled={isSubmitting} variant="contained" className="ml-2 h-10" type="submit">
+            <Button disabled={isSubmitting} variant="contained" className="col-span-full h-10 sm:ml-2" type="submit">
               {t('send')}
             </Button>
           </Box>
 
           <Tabs
+            scrollButtons
+            allowScrollButtonsMobile
             value={activeTab}
             onChange={handleTabChange}
             aria-label="restful request tabs"
@@ -153,49 +228,120 @@ function RestForm() {
             <Tab label={t('variables')} className="me-4 min-w-max px-0 py-0 capitalize" {...a11yProps(3)} />
           </Tabs>
 
-          <CustomTabPanel value={activeTab} index={0}>
-            <Typography className="text-sm">{t('queryParams')}</Typography>
-            <InputTable inputName="params" />
-          </CustomTabPanel>
+          <Paper className="mb-3 flex flex-grow flex-col overflow-hidden" elevation={2}>
+            <CustomTabPanel value={activeTab} index={0} className="flex flex-grow-0 flex-col overflow-hidden">
+              <Box className="mb-1 flex items-center justify-between px-5 pt-2">
+                <Typography className="text-sm">{t('queryParams')}</Typography>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  className="h-8"
+                  startIcon={<AddCircleOutline />}
+                  onClick={handleAddInput}
+                >
+                  {t('add')}
+                </Button>
+              </Box>
 
-          <CustomTabPanel value={activeTab} index={1}>
-            <Typography className="text-sm">{t('headers')}</Typography>
-            <InputTable inputName="headers" />
-          </CustomTabPanel>
+              <InputTable fields={paramsFields} inputName="params" remove={removeParams} />
+            </CustomTabPanel>
 
-          <CustomTabPanel value={activeTab} index={2}>
-            <Controller
-              render={({ field }) => (
-                <Editor
-                  {...field}
-                  defaultLanguage="json"
-                  theme="vs-dark"
-                  options={{
-                    minimap: {
-                      enabled: false,
-                    },
-                    formatOnPaste: true,
-                    formatOnType: true,
-                    lineNumbersMinChars: 4,
-                    wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
-                    wordWrap: 'on',
-                    wordWrapBreakAfterCharacters: '\t})]?|&,;',
-                    wordWrapBreakBeforeCharacters: '{([+',
-                    wordWrapColumn: 80,
-                    wrappingIndent: 'indent',
-                  }}
-                />
-              )}
-              name="body"
-              control={control}
-            />
-            {t('body')}
-          </CustomTabPanel>
+            <CustomTabPanel value={activeTab} index={3} className="flex flex-grow-0 flex-col overflow-hidden">
+              <Box className="mb-1 flex items-center justify-between px-5 pt-2">
+                <Typography className="text-sm">{t('variables')}</Typography>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  className="h-8"
+                  startIcon={<AddCircleOutline />}
+                  onClick={handleAddInput}
+                >
+                  {t('add')}
+                </Button>
+              </Box>
+
+              <InputTable fields={variablesFields} inputName="variables" remove={removeVariables} />
+            </CustomTabPanel>
 
-          <CustomTabPanel value={activeTab} index={3}>
-            <Typography className="text-sm">{t('variables')}</Typography>
-            <InputTable inputName="variables" />
-          </CustomTabPanel>
+            <CustomTabPanel value={activeTab} index={1} className="flex flex-grow-0 flex-col overflow-hidden">
+              <Box className="mb-1 flex items-center justify-between px-5 pt-2">
+                <Typography className="text-sm">{t('headers')}</Typography>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  className="h-8"
+                  startIcon={<AddCircleOutline />}
+                  onClick={handleAddInput}
+                >
+                  {t('add')}
+                </Button>
+              </Box>
+              <InputTable fields={headersFields} inputName="headers" remove={removeHeaders} />
+            </CustomTabPanel>
+
+            <CustomTabPanel value={activeTab} index={2} className="flex flex-grow flex-col overflow-hidden">
+              <Box className="mb-1 flex items-center justify-between px-5 pt-2">
+                <ToggleButtonGroup
+                  value={bodyFormat}
+                  exclusive
+                  onChange={handleBodyFormatChange}
+                  aria-label="body format"
+                  size="small"
+                >
+                  <ToggleButton className="h-8" value="json" size="small" aria-label="JSON">
+                    {t('json')}
+                  </ToggleButton>
+                  <ToggleButton className="h-8" value="plaintext" size="small" aria-label="Plain Text">
+                    {t('text')}
+                  </ToggleButton>
+                </ToggleButtonGroup>
+                {bodyFormat === 'json' && (
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    className="h-8"
+                    startIcon={<AutoFixHigh />}
+                    onClick={handlePrettify}
+                  >
+                    {t('prettify')}
+                  </Button>
+                )}
+              </Box>
+              <Box className="flex flex-grow">
+                <Controller
+                  name="body"
+                  control={control}
+                  render={({ field }) => (
+                    <Editor
+                      language={bodyFormat === 'json' ? 'json' : 'plaintext'}
+                      theme="vs-dark"
+                      onChange={(value) => field.onChange(value)}
+                      onMount={(editor) => {
+                        editorRef.current = editor;
+                      }}
+                      options={{
+                        minimap: {
+                          enabled: false,
+                        },
+                        smoothScrolling: true,
+                        scrollbar: {
+                          verticalScrollbarSize: 12,
+                          horizontalScrollbarSize: 12,
+                        },
+                        lineNumbersMinChars: 4,
+                        wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
+                        wordWrap: 'on',
+                        wordWrapBreakAfterCharacters: '\t})]?|&,;',
+                        wordWrapBreakBeforeCharacters: '{([+',
+                        wordWrapColumn: 80,
+                        wrappingIndent: 'indent',
+                      }}
+                    />
+                  )}
+                />
+              </Box>
+            </CustomTabPanel>
+          </Paper>
         </form>
       </FormProvider>
     </section>
diff --git a/components/Table/InputTable.tsx b/components/Table/InputTable.tsx
index 3404f8c..8a48da7 100644
--- a/components/Table/InputTable.tsx
+++ b/components/Table/InputTable.tsx
@@ -1,25 +1,43 @@
-import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import React from 'react';
+import { FieldArrayWithId, UseFieldArrayRemove } from 'react-hook-form';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import InputTableRow from './InputTableRow';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
-export default function InputTable({ inputName }: { inputName: string }) {
+interface InputTableProps {
+  fields: FieldArrayWithId[];
+  inputName: 'params' | 'headers' | 'variables';
+  remove: UseFieldArrayRemove;
+}
+
+const InputTable: React.FC<InputTableProps> = ({ fields, inputName, remove }: InputTableProps) => {
   return (
-    <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+    <TableContainer className="h-full overflow-auto">
+      <Table stickyHeader sx={{ minWidth: 450 }} className="pb-2" aria-label="request params table" size="small">
         <TableHead>
           <TableRow>
-            <TableCell className="w-2 py-0 pt-1">
+            <TableCell className="w-2 py-0">
               <CheckBoxIcon className="p-0" />
             </TableCell>
-            <TableCell className="py-2">Key</TableCell>
-            <TableCell className="py-2">Value</TableCell>
-            <TableCell className="py-2"></TableCell>
+            <TableCell>Key</TableCell>
+            <TableCell>Value</TableCell>
+            <TableCell className="w-4">Actions</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          <InputTableRow inputName={inputName} />
+          {fields.map((field, index) => (
+            <InputTableRow
+              key={field.id}
+              index={index}
+              inputName={inputName}
+              remove={remove}
+              isOnlyRow={fields.length === 1}
+            />
+          ))}
         </TableBody>
       </Table>
     </TableContainer>
   );
-}
+};
+
+export default InputTable;
diff --git a/components/Table/InputTableRow.tsx b/components/Table/InputTableRow.tsx
index 7cd9f26..247524b 100644
--- a/components/Table/InputTableRow.tsx
+++ b/components/Table/InputTableRow.tsx
@@ -1,67 +1,52 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { TableCell, TableRow, Checkbox, IconButton, OutlinedInput } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Checkbox, IconButton, OutlinedInput, TableCell, TableRow } from '@mui/material';
-import { useEffect } from 'react';
 
-import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
-
-function InputTableRow({ inputName }: { inputName: string }) {
-  const { control } = useFormContext();
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: inputName,
-  });
-
-  const lastKey = useWatch({
-    name: `${inputName}.${fields.length - 1}.key`,
-    control,
-  });
-  const lastValue = useWatch({
-    name: `${inputName}.${fields.length - 1}.value`,
-    control,
-  });
+interface InputTableRowProps {
+  index: number;
+  inputName: 'params' | 'headers' | 'variables';
+  remove: (index: number) => void;
+  isOnlyRow: boolean;
+}
 
-  useEffect(() => {
-    if (lastKey !== '' || lastValue !== '') {
-      append({ isChecked: true, key: '', value: '' }, { shouldFocus: false });
-    }
-  }, [lastKey, lastValue, append]);
+const InputTableRow: React.FC<InputTableRowProps> = ({ index, inputName, remove, isOnlyRow }) => {
+  const { control, register } = useFormContext();
 
   return (
-    <>
-      {fields.map((row, index) => (
-        <TableRow key={row.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-          <TableCell className="">
-            <Controller
-              name={`${inputName}.${index}.isChecked`}
-              control={control}
-              render={({ field }) => <Checkbox checked={!!field.value} className="m-0 p-0" {...field} />}
-            />
-          </TableCell>
-
-          <TableCell className="">
-            <Controller
-              render={({ field }) => <OutlinedInput {...field} fullWidth inputProps={{ className: 'py-1' }} />}
-              name={`${inputName}.${index}.key`}
-              control={control}
-            />
-          </TableCell>
-
-          <TableCell className="">
-            <Controller
-              render={({ field }) => <OutlinedInput {...field} fullWidth inputProps={{ className: 'py-1' }} />}
-              name={`${inputName}.${index}.value`}
-              control={control}
-            />
-          </TableCell>
-
-          <TableCell className="">
-            <IconButton aria-label="delete" disabled={index === fields.length - 1} onClick={() => remove(index)}>
-              <DeleteIcon />
-            </IconButton>
-          </TableCell>
-        </TableRow>
-      ))}
-    </>
+    <TableRow>
+      <TableCell>
+        <Controller
+          name={`${inputName}.${index}.isChecked`}
+          control={control}
+          render={({ field }) => <Checkbox {...field} checked={field.value} className="m-0 p-0" />}
+        />
+      </TableCell>
+      <TableCell>
+        <OutlinedInput
+          {...register(`${inputName}.${index}.key`)}
+          fullWidth
+          size="small"
+          inputProps={{ className: 'py-1' }}
+          placeholder="Key"
+        />
+      </TableCell>
+      <TableCell>
+        <OutlinedInput
+          {...register(`${inputName}.${index}.value`)}
+          fullWidth
+          size="small"
+          inputProps={{ className: 'py-1' }}
+          placeholder="Value"
+        />
+      </TableCell>
+      <TableCell>
+        <IconButton aria-label="delete" disabled={isOnlyRow} onClick={() => remove(index)}>
+          <DeleteIcon />
+        </IconButton>
+      </TableCell>
+    </TableRow>
   );
-}
+};
+
 export default InputTableRow;
diff --git a/components/UI/CustomTabPanel.tsx b/components/UI/CustomTabPanel.tsx
index 786a47d..aeb07b9 100644
--- a/components/UI/CustomTabPanel.tsx
+++ b/components/UI/CustomTabPanel.tsx
@@ -19,7 +19,7 @@ function CustomTabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box className="h-full w-full">{children}</Box>}
+      {value === index && <Box className="flex flex-grow flex-col overflow-hidden">{children}</Box>}
     </div>
   );
 }
diff --git a/messages/en.json b/messages/en.json
index 73a17b9..1030da3 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -56,11 +56,15 @@
   },
   "RestClient": {
     "send": "SEND",
+    "add": "Add",
     "params": "Params",
     "headers": "Headers",
     "body": "Body",
     "variables": "Variables",
-    "queryParams": "Query Params"
+    "queryParams": "Query Params",
+    "prettify": "Prettify",
+    "json": "JSON",
+    "text": "Text"
   },
   "Response": {
     "response": "Response",
diff --git a/messages/ru.json b/messages/ru.json
index 6f84f45..59658a2 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -22,7 +22,7 @@
   },
   "Header": {
     "home": "Главная",
-    "language": "RU",
+    "languageLabel": "Русский",
     "signIn": "Войти",
     "signUp": "Регистрация",
     "signOut": "Выйти"
@@ -56,11 +56,15 @@
   },
   "RestClient": {
     "send": "ОТПРАВИТЬ",
+    "add": "Добавить",
     "params": "Параметры",
     "headers": "Заголовки",
     "body": "Тело",
     "variables": "Переменные",
-    "queryParams": "Параметры запроса"
+    "queryParams": "Параметры запроса",
+    "prettify": "Форматировать",
+    "json": "JSON",
+    "text": "Текст"
   },
   "Response": {
     "response": "Ответ",
@@ -68,7 +72,7 @@
     "headers": "Заголовки",
     "key": "Ключ",
     "value": "Значение",
-    "hitSendAlt": "нажмите отправить ответ",
+    "hitSendAlt": "нажмите отправить",
     "clickToSend": "Нажмите, чтобы отправить запрос",
     "couldNotSendRequest": "Не удалось отправить запрос"
   },
diff --git a/package-lock.json b/package-lock.json
index 46ccb53..fe77ef1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@reduxjs/toolkit": "^2.2.7",
         "firebase": "^10.13.0",
         "graphql-ws": "^5.16.0",
+        "monaco-editor": "^0.51.0",
         "next": "14.2.5",
         "next-intl": "^3.19.1",
         "pretty-bytes": "^6.1.1",
@@ -9157,8 +9158,7 @@
       "version": "0.51.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.51.0.tgz",
       "integrity": "sha512-xaGwVV1fq343cM7aOYB6lVE4Ugf0UyimdD/x5PWcWBMKENwectaEu77FAN7c5sFiyumqeJdX1RPTh1ocioyDjw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/mrmime": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index 6eb713b..3ee5888 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@reduxjs/toolkit": "^2.2.7",
     "firebase": "^10.13.0",
     "graphql-ws": "^5.16.0",
+    "monaco-editor": "^0.51.0",
     "next": "14.2.5",
     "next-intl": "^3.19.1",
     "pretty-bytes": "^6.1.1",
diff --git a/redux/features/restfulSlice.ts b/redux/features/restfulSlice.ts
index 6504909..abd50d1 100644
--- a/redux/features/restfulSlice.ts
+++ b/redux/features/restfulSlice.ts
@@ -16,10 +16,10 @@ const initialState: RestfulSliceState = {
   id: '',
   method: 'GET',
   url: '',
-  params: [{ isChecked: false, key: '', value: '' }],
-  headers: [{ isChecked: true, key: 'Content-Type', value: 'text/html; charset=utf-8' }],
+  params: [{ isChecked: true, key: '', value: '' }],
+  headers: [{ isChecked: true, key: '', value: '' }],
   body: '',
-  variables: [{ isChecked: false, key: '', value: '' }],
+  variables: [{ isChecked: true, key: '', value: '' }],
   date: '',
 };
 
diff --git a/types/api.types.ts b/types/api.types.ts
index 9f578d9..2f21b3b 100644
--- a/types/api.types.ts
+++ b/types/api.types.ts
@@ -1,13 +1,16 @@
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
 
-export interface ApiRequest {
-  id: string;
+export interface RequestFormTypes {
   method: HttpMethod;
   url: string;
   params: RequestParam[];
   headers: RequestParam[];
   body: string;
   variables: RequestParam[];
+}
+
+export interface ApiRequest extends RequestFormTypes {
+  id: string;
   date: string;
   sdl?: string;
 }
diff --git a/utils/replaceVariables.ts b/utils/replaceVariables.ts
index ca127ea..5f200e4 100644
--- a/utils/replaceVariables.ts
+++ b/utils/replaceVariables.ts
@@ -1,6 +1,6 @@
-import { ApiRequest, RequestParam } from '@/types/api.types';
+import { RequestFormTypes, RequestParam } from '@/types/api.types';
 
-export function replaceVariables(obj: ApiRequest): ApiRequest {
+export function replaceVariables(obj: RequestFormTypes): RequestFormTypes {
   let jsonString = JSON.stringify(obj);
 
   obj.variables.forEach((variable: RequestParam) => {
@@ -8,5 +8,5 @@ export function replaceVariables(obj: ApiRequest): ApiRequest {
     jsonString = jsonString.replace(regex, variable.value);
   });
 
-  return JSON.parse(jsonString) as ApiRequest;
+  return JSON.parse(jsonString) as RequestFormTypes;
 }

From 0ef57ba537309538f7c556edad5fcb0551a4795f Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sat, 14 Sep 2024 22:39:26 +0400
Subject: [PATCH 126/157] refactor: some changes for better ui

---
 components/Response/ResponseBody.tsx | 62 ++++++++++++++--------------
 components/UI/LanguageSwitcher.tsx   |  4 +-
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/components/Response/ResponseBody.tsx b/components/Response/ResponseBody.tsx
index 29d6367..1922399 100644
--- a/components/Response/ResponseBody.tsx
+++ b/components/Response/ResponseBody.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { selectResponse } from '@/redux/features/mainSlice';
 import { useAppSelector } from '@/redux/hooks';
 import Editor from '@monaco-editor/react';
-import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { useTranslations } from 'next-intl';
 
@@ -32,36 +32,38 @@ function ResponseBody({ activeTab }: PropTypes) {
   }, [parsedHeaders]);
 
   return (
-    <Box component="div" className="mb-1 flex h-full flex-col">
-      <CustomTabPanel value={activeTab} index={0} className="h-full flex-grow">
-        <Editor
-          theme="vs-dark"
-          defaultLanguage={editorLanguage}
-          value={data}
-          loading={null}
-          options={{
-            readOnly: true,
-            minimap: {
-              enabled: false,
-            },
-            smoothScrolling: true,
-            scrollbar: {
-              verticalScrollbarSize: 12,
-              horizontalScrollbarSize: 12,
-            },
-            lineNumbersMinChars: 4,
-            wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
-            wordWrap: 'on',
-            wordWrapBreakAfterCharacters: '\t})]?|&,;',
-            wordWrapBreakBeforeCharacters: '{([+',
-            wordWrapColumn: 80,
-            wrappingIndent: 'indent',
-          }}
-        />
+    <Box component="div" className="mb-1 flex h-full flex-grow flex-col overflow-hidden">
+      <CustomTabPanel value={activeTab} index={0} className="flex flex-grow flex-col overflow-hidden">
+        <Box className="flex flex-grow">
+          <Editor
+            theme="vs-dark"
+            defaultLanguage={editorLanguage}
+            value={data}
+            loading={null}
+            options={{
+              readOnly: true,
+              minimap: {
+                enabled: false,
+              },
+              smoothScrolling: true,
+              scrollbar: {
+                verticalScrollbarSize: 12,
+                horizontalScrollbarSize: 12,
+              },
+              lineNumbersMinChars: 4,
+              wordSeparators: '~!@#$%^&*()-=+[{]}|;:\'",.<>/?',
+              wordWrap: 'on',
+              wordWrapBreakAfterCharacters: '\t})]?|&,;',
+              wordWrapBreakBeforeCharacters: '{([+',
+              wordWrapColumn: 80,
+              wrappingIndent: 'indent',
+            }}
+          />
+        </Box>
       </CustomTabPanel>
-      <CustomTabPanel value={activeTab} index={1} className="h-full flex-grow overflow-auto">
-        <TableContainer component={Paper} className="h-full">
-          <Table stickyHeader aria-label="response headers table">
+      <CustomTabPanel value={activeTab} index={1} className="flex flex-grow-0 flex-col overflow-hidden">
+        <TableContainer className="h-full overflow-auto">
+          <Table stickyHeader sx={{ minWidth: 450 }} className="pb-2" size="small" aria-label="response headers table">
             <TableHead>
               <TableRow>
                 <TableCell className="w-full">{t('key')}</TableCell>
diff --git a/components/UI/LanguageSwitcher.tsx b/components/UI/LanguageSwitcher.tsx
index 3a40397..14a1c39 100644
--- a/components/UI/LanguageSwitcher.tsx
+++ b/components/UI/LanguageSwitcher.tsx
@@ -1,4 +1,4 @@
-import { useLocale, useTranslations } from 'next-intl';
+import { useLocale } from 'next-intl';
 import { Locale, usePathname, useRouter } from '@/i18n/routing';
 import { routing } from '@/i18n/routing';
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
@@ -8,7 +8,6 @@ export default function LanguageSwitcher() {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const pathname = usePathname();
-  const t = useTranslations('Language');
   const locale = useLocale();
 
   function handleLangChange(event: SelectChangeEvent) {
@@ -25,7 +24,6 @@ export default function LanguageSwitcher() {
       className="uppercase text-white"
       autoWidth
       size="small"
-      label={t('label')}
       defaultValue={locale}
       disabled={isPending}
       onChange={handleLangChange}

From 1f53a4a2144f0f46acdc9951bd7b7150813fa91e Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 22:05:17 +0200
Subject: [PATCH 127/157] test: add Resizable component test

---
 components/Resizable/resizable.test.tsx | 103 ++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 components/Resizable/resizable.test.tsx

diff --git a/components/Resizable/resizable.test.tsx b/components/Resizable/resizable.test.tsx
new file mode 100644
index 0000000..9775c86
--- /dev/null
+++ b/components/Resizable/resizable.test.tsx
@@ -0,0 +1,103 @@
+import { describe, it, expect, vi } from 'vitest';
+import * as ResizableExports from './index';
+import { customRender } from '@/__test__/test-utils';
+import ResizableGroup from '@/components/Resizable/ResizableGroup';
+import { screen } from '@testing-library/react';
+import { ResizableHandle, ResizablePanel } from './index';
+
+type ReactResizablePanelsModule = {
+  PanelResizeHandle: React.ComponentType<unknown>;
+};
+
+vi.mock('react-resizable-panels', async (importOriginal) => {
+  const originalModule = (await importOriginal()) as ReactResizablePanelsModule;
+
+  return {
+    ...originalModule,
+    PanelResizeHandle: originalModule.PanelResizeHandle,
+  };
+});
+
+describe('Resizable', () => {
+  it('should export ResizableGroup', () => {
+    expect(ResizableExports.ResizableGroup).toBeDefined();
+  });
+
+  it('should export ResizablePanel', () => {
+    expect(ResizableExports.ResizablePanel).toBeDefined();
+  });
+
+  it('should export ResizableHandle', () => {
+    expect(ResizableExports.ResizableHandle).toBeDefined();
+  });
+
+  it('should render children correctly', () => {
+    customRender(
+      <ResizableGroup direction={'horizontal'}>
+        <div>Child Element</div>
+      </ResizableGroup>,
+    );
+
+    expect(screen.getByText('Child Element')).toBeInTheDocument();
+  });
+
+  it('should forward props to PanelGroup', () => {
+    const testProps = { className: 'test-class', style: { margin: '10px' } };
+
+    customRender(
+      <ResizableGroup direction={'horizontal'} {...testProps}>
+        <div>Child Element</div>
+      </ResizableGroup>,
+    );
+
+    const panelGroup = screen.getByText('Child Element').parentElement;
+    expect(panelGroup).toHaveClass('test-class');
+    expect(panelGroup).toHaveStyle('margin: 10px');
+  });
+
+  it('renders within a vertical ResizableGroup', () => {
+    customRender(
+      <ResizableGroup direction="vertical">
+        <ResizableHandle direction="vertical" />
+      </ResizableGroup>,
+    );
+
+    const handle = screen.getByRole('separator');
+    expect(handle).toHaveClass('h-[1px]');
+  });
+
+  it('renders within a horizontal ResizableGroup', () => {
+    customRender(
+      <ResizableGroup direction="horizontal">
+        <ResizableHandle direction="horizontal" />
+      </ResizableGroup>,
+    );
+
+    const handle = screen.getByRole('separator');
+    expect(handle).toHaveClass('w-[1px]');
+  });
+
+  it('renders ResizablePanel correctly with default size percentage', () => {
+    customRender(
+      <ResizableGroup direction="horizontal">
+        <ResizablePanel defaultSizePercentage={50}>
+          <div>Panel Content</div>
+        </ResizablePanel>
+      </ResizableGroup>,
+    );
+
+    expect(screen.getByText('Panel Content')).toBeInTheDocument();
+  });
+
+  it('renders ResizablePanel correctly with default size pixels', () => {
+    customRender(
+      <ResizableGroup direction="vertical">
+        <ResizablePanel defaultSizePixels={300}>
+          <div>Panel Content with Pixels</div>
+        </ResizablePanel>
+      </ResizableGroup>,
+    );
+
+    expect(screen.getByText('Panel Content with Pixels')).toBeInTheDocument();
+  });
+});

From 2d85e593224ace2105d5d4270971c238132f5320 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sat, 14 Sep 2024 22:06:19 +0200
Subject: [PATCH 128/157] test: add DataTable component test

---
 components/DataTable/data-table.test.tsx   | 88 +++++++++++++++++++
 components/DataTable/data-toolbar.test.tsx | 99 ++++++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 components/DataTable/data-table.test.tsx
 create mode 100644 components/DataTable/data-toolbar.test.tsx

diff --git a/components/DataTable/data-table.test.tsx b/components/DataTable/data-table.test.tsx
new file mode 100644
index 0000000..1e4a1de
--- /dev/null
+++ b/components/DataTable/data-table.test.tsx
@@ -0,0 +1,88 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+import DataTable from '@/components/DataTable';
+import { customRender, setupStore } from '@/__test__/test-utils';
+import { ApiRequest } from '@/types/api.types';
+import { setAllState } from '@/redux/features/restfulSlice';
+import { resetResponse } from '@/redux/features/mainSlice';
+
+const mockRequests: ApiRequest[] = [
+  {
+    id: '1',
+    method: 'GET',
+    url: '/api/resource',
+    date: '2024-01-01',
+    params: [],
+    headers: [],
+    body: '',
+    variables: [],
+  },
+  {
+    id: '2',
+    method: 'POST',
+    url: '/api/resource',
+    date: '2024-01-02',
+    params: [],
+    headers: [],
+    body: '',
+    variables: [],
+  },
+];
+
+const mockDispatch = vi.fn();
+vi.mock('@/redux/hooks', () => ({
+  useAppDispatch: () => mockDispatch,
+}));
+
+const mockGenerateUrl = vi.fn();
+const mockRouterPush = vi.fn();
+
+vi.mock('@/utils/generateUrl', () => ({
+  generateUrl: (request: ApiRequest) => mockGenerateUrl(request),
+}));
+
+vi.mock('next/router', () => ({
+  useRouter: () => ({
+    push: mockRouterPush,
+  }),
+}));
+
+const setStorageValueMock = vi.fn();
+
+describe('DataTable Component', () => {
+  it('renders and displays data', () => {
+    customRender(<DataTable requests={mockRequests} setStorageValue={vi.fn()} />, {
+      store: setupStore(),
+    });
+
+    expect(screen.getByText('Method')).toBeInTheDocument();
+    expect(screen.getByText('URL')).toBeInTheDocument();
+    expect(screen.getByText('Date')).toBeInTheDocument();
+
+    expect(screen.getByText('GET')).toBeInTheDocument();
+    expect(screen.getByText('2024-01-01')).toBeInTheDocument();
+  });
+
+  it('handles sorting', () => {
+    customRender(<DataTable requests={mockRequests} setStorageValue={vi.fn()} />, {
+      store: setupStore(),
+    });
+
+    fireEvent.click(screen.getByText('Date'));
+  });
+
+  it('calls dispatch and router.push with correct arguments when handleRequest is invoked', () => {
+    customRender(<DataTable requests={mockRequests} setStorageValue={setStorageValueMock} />);
+
+    const requestId = '1';
+    const request = mockRequests.find((n) => n.id === requestId)!;
+    const generatedUrl = 'some-generated-url';
+    mockGenerateUrl.mockReturnValue(generatedUrl);
+
+    const requestButton = screen.getByText(/GET/i);
+    fireEvent.click(requestButton);
+
+    expect(mockDispatch).toHaveBeenCalledWith(setAllState(request));
+    expect(mockDispatch).toHaveBeenCalledWith(resetResponse());
+  });
+});
diff --git a/components/DataTable/data-toolbar.test.tsx b/components/DataTable/data-toolbar.test.tsx
new file mode 100644
index 0000000..a32cb80
--- /dev/null
+++ b/components/DataTable/data-toolbar.test.tsx
@@ -0,0 +1,99 @@
+import { describe, it, expect, vi } from 'vitest';
+import { screen, fireEvent } from '@testing-library/react';
+import { customRender } from '@/__test__/test-utils';
+import DataTableToolbar from '@/components/DataTable/DataTableToolbar';
+
+vi.mock('next-intl', () => {
+  return {
+    NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    useTranslations: vi.fn().mockImplementation(() => (key: string) => key),
+  };
+});
+
+const handleDeleteMock = vi.fn();
+const setDenseMock = vi.fn();
+
+const props = {
+  numSelected: 0,
+  dense: false,
+  setDense: setDenseMock,
+  handleDelete: handleDeleteMock,
+  deleteLabel: 'Delete',
+  denseLabel: 'Dense',
+};
+
+describe('DataTableToolbar Component', () => {
+  it('renders with default props', () => {
+    customRender(<DataTableToolbar {...props} />);
+
+    expect(screen.getByText('requestsHistory')).toBeInTheDocument();
+  });
+
+  it('renders toolbar with the correct title when no items are selected', () => {
+    customRender(
+      <DataTableToolbar
+        numSelected={0}
+        dense={false}
+        setDense={vi.fn()}
+        handleDelete={vi.fn()}
+        deleteLabel="Delete selected"
+        denseLabel="Dense"
+      />,
+    );
+
+    expect(screen.getByText('requestsHistory')).toBeInTheDocument();
+  });
+
+  it('renders toolbar with the correct selected count when items are selected', () => {
+    customRender(
+      <DataTableToolbar
+        numSelected={5}
+        dense={false}
+        setDense={vi.fn()}
+        handleDelete={vi.fn()}
+        deleteLabel="Delete selected"
+        denseLabel="Dense"
+      />,
+    );
+
+    expect(screen.getByText('5 selected')).toBeInTheDocument();
+  });
+
+  it('shows delete icon when items are selected', () => {
+    const handleDelete = vi.fn();
+
+    customRender(
+      <DataTableToolbar
+        numSelected={3}
+        dense={false}
+        setDense={vi.fn()}
+        handleDelete={handleDelete}
+        deleteLabel="Delete selected"
+        denseLabel="Dense"
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Delete selected' })).toBeInTheDocument();
+  });
+
+  it('calls setDense with true when the switch is toggled on', () => {
+    customRender(<DataTableToolbar {...props} />);
+
+    const switchInput = screen.getByRole('checkbox', { name: /Dense/i });
+
+    fireEvent.click(switchInput);
+
+    expect(setDenseMock).toHaveBeenCalledWith(true);
+  });
+
+  it('calls setDense with false when the switch is toggled off', () => {
+    const updatedProps = { ...props, dense: true };
+    customRender(<DataTableToolbar {...updatedProps} />);
+
+    const switchInput = screen.getByRole('checkbox', { name: /Dense/i });
+
+    fireEvent.click(switchInput);
+
+    expect(setDenseMock).toHaveBeenCalledWith(false);
+  });
+});

From 0d4416ccdab2fca502b66f15638a3729a6082c40 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 03:22:09 +0400
Subject: [PATCH 129/157] feat: create Features section

---
 components/Home/FeaturesSection.tsx | 38 +++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 components/Home/FeaturesSection.tsx

diff --git a/components/Home/FeaturesSection.tsx b/components/Home/FeaturesSection.tsx
new file mode 100644
index 0000000..90714c4
--- /dev/null
+++ b/components/Home/FeaturesSection.tsx
@@ -0,0 +1,38 @@
+import { Box, Container } from '@mui/material';
+import Image from 'next/image';
+import member from '@/public/assets/svg/illustration-hit-send.svg';
+import { useTranslations } from 'next-intl';
+
+function FeaturesSection() {
+  const t = useTranslations('FeaturesSection');
+
+  return (
+    <Box component="section" className="mb-20">
+      <Container maxWidth="lg">
+        <div className="flex flex-col gap-10">
+          <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
+            <h3 className="text-lg font-bold text-blue-500 max-sm:text-center sm:text-xl">{t('feature1')}</h3>
+            <div className="h-full w-full">
+              <Image src={member} alt={t('feature1')} className="h-auto w-full" priority />
+            </div>
+          </div>
+
+          <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
+            <div className="h-full w-full max-sm:order-2">
+              <Image src={member} alt={t('feature2')} className="h-auto w-full" priority />
+            </div>
+            <h3 className="text-lg font-bold text-blue-500 max-sm:text-center sm:text-xl">{t('feature2')}</h3>
+          </div>
+
+          <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
+            <h3 className="text-lg font-bold text-blue-500 max-sm:text-center sm:text-xl">{t('feature3')}</h3>
+            <div className="h-full w-full">
+              <Image src={member} alt={t('feature3')} className="h-auto w-full" priority />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}
+export default FeaturesSection;

From 99881811117f8ce783b69a22e67e74b895efa9e0 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 03:27:10 +0400
Subject: [PATCH 130/157] feat: create Hero section

---
 components/Home/Hero.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 components/Home/Hero.tsx

diff --git a/components/Home/Hero.tsx b/components/Home/Hero.tsx
new file mode 100644
index 0000000..4dd532e
--- /dev/null
+++ b/components/Home/Hero.tsx
@@ -0,0 +1,31 @@
+import { Box, Container } from '@mui/material';
+import Link from 'next/link';
+import UserNavigationPanel from './UserNavigationPanel';
+import { useTranslations } from 'next-intl';
+
+function Hero() {
+  const t = useTranslations('HomePage');
+
+  return (
+    <Box component="section" className="mb-20 mt-16">
+      <Container maxWidth="xl">
+        <header className="mb-16">
+          <h1 className="mb-1 text-center text-3xl font-bold uppercase text-blue-500 sm:text-2xl">{t('title')}</h1>
+          <h5 className="text-center text-sm font-medium uppercase">{t('subtitle')}</h5>
+        </header>
+        <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
+          <p className="text-center font-medium">
+            {t('description')}
+            <Link href="https://rs.school/" target="_blank" className="text-blue-400 hover:text-blue-500">
+              {t('rsSchoolLink')}
+            </Link>
+          </p>
+
+          <UserNavigationPanel />
+        </div>
+      </Container>
+    </Box>
+  );
+}
+
+export default Hero;

From 6c81ed734cc22459b87671d79c5553e45f0f3131 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 03:28:05 +0400
Subject: [PATCH 131/157] feat: create Team section

---
 components/Home/TeamSection.tsx | 64 +++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 components/Home/TeamSection.tsx

diff --git a/components/Home/TeamSection.tsx b/components/Home/TeamSection.tsx
new file mode 100644
index 0000000..3533530
--- /dev/null
+++ b/components/Home/TeamSection.tsx
@@ -0,0 +1,64 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import member from '@/public/assets/svg/illustration-hit-send.svg';
+import { Box, Container } from '@mui/material';
+import { useTranslations } from 'next-intl';
+
+function TeamSection() {
+  const t = useTranslations('TeamSection');
+
+  return (
+    <Box component="section" className="mb-32">
+      <Container maxWidth="sm">
+        <header className="mb-5">
+          <h2 className="text-center text-xl font-bold uppercase sm:text-2xl">{t('title')}</h2>
+        </header>
+        <div className="flex w-full flex-wrap items-center justify-center gap-x-24 gap-y-8">
+          <div className="flex flex-col items-center">
+            <div className="mb-3 h-40 w-40">
+              <Image
+                src={member}
+                width={160}
+                height={160}
+                alt="Shadman Alizada"
+                className="aspect-square h-full w-full object-cover"
+                priority
+              />
+            </div>
+
+            <Link
+              href="https://github.com/shd-mn"
+              target="_blank"
+              className="text-xl font-medium text-blue-400 hover:text-blue-500"
+            >
+              Shadman Alizada
+            </Link>
+            <span className="font-medium uppercase">{t('teamLead')}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="mb-3 h-40 w-40">
+              <Image
+                src={member}
+                width={160}
+                height={160}
+                alt="Volha Melayok"
+                className="aspect-square h-full w-full object-cover"
+                priority
+              />
+            </div>
+
+            <Link
+              href="https://github.com/olitera"
+              target="_blank"
+              className="text-xl font-medium text-blue-400 hover:text-blue-500"
+            >
+              Volha Melayok
+            </Link>
+            <span className="font-medium uppercase">{t('developer')}</span>
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}
+export default TeamSection;

From 11a814927d18876ba240628eb2634536a3288e7b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 03:29:32 +0400
Subject: [PATCH 132/157] feat: modify and added language support for home page

---
 app/[locale]/page.tsx                   | 12 ++++---
 components/Home/UserNavigationPanel.tsx | 46 ++++++++++++++++++++++++
 components/Welcome/index.tsx            | 47 -------------------------
 messages/en.json                        | 17 +++++++--
 messages/ru.json                        | 17 +++++++--
 5 files changed, 84 insertions(+), 55 deletions(-)
 create mode 100644 components/Home/UserNavigationPanel.tsx
 delete mode 100644 components/Welcome/index.tsx

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index e2ea739..345d2f2 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,9 +1,13 @@
-import Welcome from '@/components/Welcome';
+import FeaturesSection from '@/components/Home/FeaturesSection';
+import Hero from '@/components/Home/Hero';
+import TeamSection from '@/components/Home/TeamSection';
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <main className="flex h-[calc(100vh-6rem)] flex-col items-center justify-center p-3">
-      <Welcome />
+    <main>
+      <Hero />
+      <FeaturesSection />
+      <TeamSection />
     </main>
   );
 }
diff --git a/components/Home/UserNavigationPanel.tsx b/components/Home/UserNavigationPanel.tsx
new file mode 100644
index 0000000..9e86b14
--- /dev/null
+++ b/components/Home/UserNavigationPanel.tsx
@@ -0,0 +1,46 @@
+'use client';
+import { auth } from '@/firebase';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { Link } from '@/i18n/routing';
+import { routes } from '@/constants/routes';
+import { useTranslations } from 'next-intl';
+import { Box, Button } from '@mui/material';
+const UserNavigationPanel = () => {
+  const [user] = useAuthState(auth);
+  const t = useTranslations('HomePage');
+  return (
+    <Box>
+      {!user ? (
+        <Box className="flex flex-col items-center justify-center gap-3">
+          <h2 className="text-center text-xl font-medium">{t('title')}</h2>
+          <Box component="span" className="flex flex-wrap justify-center gap-2">
+            <Button variant="contained">
+              <Link href={routes.signin}>{t('signIn')}</Link>
+            </Button>
+            <Button variant="contained">
+              <Link href={routes.signup}>{t('signUp')}</Link>
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        <Box className="flex flex-col items-center justify-center gap-3">
+          <h2 className="text-center text-xl font-medium">{t('welcomeBack', { name: user.displayName })}</h2>
+
+          <Box component="span" className="flex flex-wrap justify-center gap-2">
+            <Button variant="contained">
+              <Link href={routes.restful}>{t('restClient')}</Link>
+            </Button>
+            <Button variant="contained">
+              <Link href={routes.graphql}>{t('graphiqlClient')}</Link>
+            </Button>
+            <Button variant="contained">
+              <Link href={routes.history}>{t('history')}</Link>
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default UserNavigationPanel;
diff --git a/components/Welcome/index.tsx b/components/Welcome/index.tsx
deleted file mode 100644
index 42143b4..0000000
--- a/components/Welcome/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-import { auth } from '@/firebase';
-import { useAuthState } from 'react-firebase-hooks/auth';
-import { Link } from '@/i18n/routing';
-import { routes } from '@/constants/routes';
-import { useTranslations } from 'next-intl';
-
-const Welcome = () => {
-  const [user] = useAuthState(auth);
-  const t = useTranslations('HomePage');
-  return (
-    <div>
-      <div>
-        {!user ? (
-          <div>
-            <h2 className="text-center">{t('title')}</h2>
-            <div className="flex gap-2">
-              <Link href={routes.signin} className="text-blue-500 hover:text-blue-700">
-                {t('signIn')}
-              </Link>
-              <Link href={routes.signup} className="text-blue-500 hover:text-blue-700">
-                {t('signUp')}
-              </Link>
-            </div>
-          </div>
-        ) : (
-          <div>
-            <h2 className="text-center">{t('welcomeBack', { name: user.displayName })}</h2>
-            <div className="flex gap-2">
-              <Link href={routes.restful} className="text-blue-500 hover:text-blue-700">
-                {t('restClient')}
-              </Link>
-              <Link href={routes.graphql} className="text-blue-500 hover:text-blue-700">
-                {t('graphiqlClient')}
-              </Link>
-              <Link href={routes.history} className="text-blue-500 hover:text-blue-700">
-                {t('history')}
-              </Link>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Welcome;
diff --git a/messages/en.json b/messages/en.json
index 1030da3..3094434 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -28,13 +28,16 @@
     "signOut": "Sign Out"
   },
   "HomePage": {
-    "title": "Welcome!",
+    "title": "REST & GraphiQL",
     "signIn": "Sign In",
     "signUp": "Sign Up",
     "welcomeBack": "Welcome Back, {name}!",
     "restClient": "REST Client",
     "graphiqlClient": "GraphiQL Client",
-    "history": "History"
+    "history": "History",
+    "subtitle": "Light-weight versions of Postman and GraphiQL combined in one app",
+    "description": "The application combines lightweight versions of Postman and GraphiQL into a unified API testing platform, offering method selection, headers management, request editing, and response handling. Key features include Firebase-based user authentication, a history page to track and restore past queries, and multi-language support. Errors such as unhandled rejections and network timeouts are presented in a user-friendly format, while valid HTTP error codes (4xx/5xx) appear in the response section. This project is the final task of the ",
+    "rsSchoolLink": "RS School React course."
   },
   "SignInPage": {
     "title": "Welcome Back",
@@ -97,5 +100,15 @@
   "NotFound": {
     "title": "404 Page Not Found",
     "backToHome": "Back to Home"
+  },
+  "FeaturesSection": {
+    "feature1": "Efficient API testing with customizable methods, headers, and response analysis.",
+    "feature2": "Seamless query editing, documentation exploration, and response inspection.",
+    "feature3": "Track, restore, and manage previously executed API requests with ease."
+  },
+  "TeamSection": {
+    "title": "Our Team",
+    "teamLead": "Team Lead",
+    "developer": "Developer"
   }
 }
diff --git a/messages/ru.json b/messages/ru.json
index 59658a2..405ba91 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -28,13 +28,16 @@
     "signOut": "Выйти"
   },
   "HomePage": {
-    "title": "Добро пожаловать!",
+    "title": "REST и GraphiQL",
     "signIn": "Войти",
     "signUp": "Регистрация",
     "welcomeBack": "С возвращением, {name}!",
     "restClient": "REST Клиент",
     "graphiqlClient": "GraphiQL Клиент",
-    "history": "История"
+    "history": "История",
+    "subtitle": "Облегченные версии Postman и GraphiQL, объединенные в одном приложении",
+    "description": "Приложение объединяет облегченные версии Postman и GraphiQL в единую платформу для тестирования API, предлагая выбор методов, управление заголовками, редактирование запросов и обработку ответов. Ключевые особенности включают аутентификацию пользователей на основе Firebase, страницу истории для отслеживания и восстановления прошлых запросов и поддержку нескольких языков. Ошибки, такие как необработанные отклонения и тайм-ауты сети, представлены в удобном для пользователя формате, в то время как действительные коды ошибок HTTP (4xx/5xx) отображаются в разделе ответов. Этот проект является финальным заданием ",
+    "rsSchoolLink": "курса React от RS School."
   },
   "SignInPage": {
     "title": "С возвращением",
@@ -97,5 +100,15 @@
   "NotFound": {
     "title": "404 Страница не найдена",
     "backToHome": "Вернуться на главную"
+  },
+  "FeaturesSection": {
+    "feature1": "Эффективное тестирование API с настраиваемыми методами, заголовками и анализом ответов.",
+    "feature2": "Удобное редактирование запросов, изучение документации и проверка ответов.",
+    "feature3": "Легкое отслеживание, восстановление и управление ранее выполненными API-запросами."
+  },
+  "TeamSection": {
+    "title": "Наша Команда",
+    "teamLead": "Руководитель команды",
+    "developer": "Разработчик"
   }
 }

From 4a06a0caf02d46e9995a0e096d55e87a2f24c04b Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 03:41:39 +0400
Subject: [PATCH 133/157] fix: welcome message

---
 components/Home/UserNavigationPanel.tsx | 2 +-
 messages/en.json                        | 1 +
 messages/ru.json                        | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Home/UserNavigationPanel.tsx b/components/Home/UserNavigationPanel.tsx
index 9e86b14..b1dfe23 100644
--- a/components/Home/UserNavigationPanel.tsx
+++ b/components/Home/UserNavigationPanel.tsx
@@ -12,7 +12,7 @@ const UserNavigationPanel = () => {
     <Box>
       {!user ? (
         <Box className="flex flex-col items-center justify-center gap-3">
-          <h2 className="text-center text-xl font-medium">{t('title')}</h2>
+          <h2 className="text-center text-xl font-medium">{t('welcome')}</h2>
           <Box component="span" className="flex flex-wrap justify-center gap-2">
             <Button variant="contained">
               <Link href={routes.signin}>{t('signIn')}</Link>
diff --git a/messages/en.json b/messages/en.json
index 3094434..1418e60 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -31,6 +31,7 @@
     "title": "REST & GraphiQL",
     "signIn": "Sign In",
     "signUp": "Sign Up",
+    "welcome": "Welcome!",
     "welcomeBack": "Welcome Back, {name}!",
     "restClient": "REST Client",
     "graphiqlClient": "GraphiQL Client",
diff --git a/messages/ru.json b/messages/ru.json
index 405ba91..5854506 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -31,6 +31,7 @@
     "title": "REST и GraphiQL",
     "signIn": "Войти",
     "signUp": "Регистрация",
+    "welcome": "Добро пожаловать!",
     "welcomeBack": "С возвращением, {name}!",
     "restClient": "REST Клиент",
     "graphiqlClient": "GraphiQL Клиент",

From 34f33c72463f2287eaca68acb722c35f7467ccdc Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 09:35:08 +0200
Subject: [PATCH 134/157] test: add Footer component test

---
 app/[locale]/layout.test.tsx         | 32 ----------------------------
 components/Footer/footer.test.tsx    | 23 ++++++++++++++++++++
 redux/features/restfulSlice.test.tsx | 15 -------------
 vitest.config.mts                    |  2 ++
 4 files changed, 25 insertions(+), 47 deletions(-)
 delete mode 100644 app/[locale]/layout.test.tsx
 create mode 100644 components/Footer/footer.test.tsx

diff --git a/app/[locale]/layout.test.tsx b/app/[locale]/layout.test.tsx
deleted file mode 100644
index 0ac2faa..0000000
--- a/app/[locale]/layout.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { render, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import RootLayout from '@/app/layout';
-
-vi.mock('next/font/google', () => ({
-  Inter: vi.fn().mockReturnValue({ variable: '--mocked-font-inter' }),
-}));
-
-vi.mock('next-intl/server', () => ({
-  getMessages: vi.fn().mockResolvedValue({}),
-}));
-
-vi.mock('@/components/PrivateRoute', () => ({
-  default: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
-}));
-
-describe('RootLayout component', () => {
-  it('should render the layout with children', async () => {
-    const childrenContent = 'Main content';
-
-    const { getByText } = render(
-      <RootLayout>
-        <div>{childrenContent}</div>
-      </RootLayout>,
-    );
-
-    await waitFor(() => {
-      expect(getByText('Main content')).toBeInTheDocument();
-      expect(getByText(childrenContent)).toBeInTheDocument();
-    });
-  });
-});
diff --git a/components/Footer/footer.test.tsx b/components/Footer/footer.test.tsx
new file mode 100644
index 0000000..f8013d5
--- /dev/null
+++ b/components/Footer/footer.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Footer from '../../components/Footer/index';
+import '@testing-library/jest-dom';
+
+vi.mock('next/image', () => ({
+  default: ({ alt }: { alt: string }) => <img alt={alt} />,
+}));
+
+describe('Footer Component', () => {
+  it('should render the footer with correct links and content', () => {
+    render(<Footer />);
+
+    expect(screen.getByText('Shadman')).toBeInTheDocument();
+    expect(screen.getByText('Alizada')).toBeInTheDocument();
+    expect(screen.getByText('Volha')).toBeInTheDocument();
+    expect(screen.getByText('Melayok')).toBeInTheDocument();
+    expect(screen.getByText('2024')).toBeInTheDocument();
+
+    expect(screen.getByText('RS School')).toBeInTheDocument();
+    expect(screen.getByAltText('The Rolling Scopes School')).toBeInTheDocument();
+  });
+});
diff --git a/redux/features/restfulSlice.test.tsx b/redux/features/restfulSlice.test.tsx
index 534d660..dc128a2 100644
--- a/redux/features/restfulSlice.test.tsx
+++ b/redux/features/restfulSlice.test.tsx
@@ -19,21 +19,6 @@ const store = configureStore({
 });
 
 describe('restfulSlice', () => {
-  it('should return the initial state', () => {
-    const state = store.getState().restful;
-
-    expect(state).toEqual({
-      id: '',
-      method: 'GET',
-      url: '',
-      params: [{ isChecked: false, key: '', value: '' }],
-      headers: [{ isChecked: true, key: 'Content-Type', value: 'text/html; charset=utf-8' }],
-      body: '',
-      variables: [{ isChecked: false, key: '', value: '' }],
-      date: '',
-    });
-  });
-
   it('should handle setMethod', () => {
     const newMethod: HttpMethod = 'POST';
 
diff --git a/vitest.config.mts b/vitest.config.mts
index 408d016..43ca3f9 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -19,6 +19,8 @@ export default defineConfig({
         '**/.eslintrc.cjs',
         'vitest.config.mts',
         'next.config.mjs',
+        'postcss.config.mjs',
+        'tailwind.config.ts',
         'next-env.d.ts',
         '**/custom-pattern/**',
         ...coverageConfigDefaults.exclude,

From 3a74a1d603714343e7c4ad4451682e3f04c918ba Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 10:41:13 +0200
Subject: [PATCH 135/157] test: add Response component tests

---
 components/Footer/footer.test.tsx            |   6 +-
 components/Response/response-body.test.tsx   |  71 +++++++++++++
 components/Response/response-header.test.tsx |  48 +++++++++
 components/Response/response-state.test.tsx  |  67 ++++++++++++
 components/Response/response.test.tsx        | 103 +++++++++++++++++++
 5 files changed, 290 insertions(+), 5 deletions(-)
 create mode 100644 components/Response/response-body.test.tsx
 create mode 100644 components/Response/response-header.test.tsx
 create mode 100644 components/Response/response-state.test.tsx
 create mode 100644 components/Response/response.test.tsx

diff --git a/components/Footer/footer.test.tsx b/components/Footer/footer.test.tsx
index f8013d5..91decc5 100644
--- a/components/Footer/footer.test.tsx
+++ b/components/Footer/footer.test.tsx
@@ -1,12 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import Footer from '../../components/Footer/index';
 import '@testing-library/jest-dom';
 
-vi.mock('next/image', () => ({
-  default: ({ alt }: { alt: string }) => <img alt={alt} />,
-}));
-
 describe('Footer Component', () => {
   it('should render the footer with correct links and content', () => {
     render(<Footer />);
diff --git a/components/Response/response-body.test.tsx b/components/Response/response-body.test.tsx
new file mode 100644
index 0000000..1e3e8ad
--- /dev/null
+++ b/components/Response/response-body.test.tsx
@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import ResponseBody from '@/components/Response/ResponseBody';
+import { mainSlice } from '@/redux/features/mainSlice';
+import { NextIntlClientProvider } from 'next-intl';
+
+vi.mock('next-intl', () => ({
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useTranslations: vi.fn().mockImplementation(() => (key: string) => key),
+}));
+
+vi.mock('@monaco-editor/react', () => ({
+  default: ({ language, value }: { language: string; value: string }) => (
+    <div>
+      <p>Editor Language: {language}</p>
+      <pre>{value}</pre>
+    </div>
+  ),
+}));
+
+const mockStore = configureStore({
+  reducer: {
+    main: mainSlice.reducer,
+  },
+  preloadedState: {
+    main: {
+      response: {
+        data: '{"key": "value"}',
+        status: 0,
+        statusText: 'An error occurred',
+        parsedHeaders: {
+          'content-type': 'application/json',
+          'x-custom-header': 'customValue',
+        },
+        success: false,
+        responseTime: 0,
+      },
+      isLoading: false,
+    },
+  },
+});
+
+describe('ResponseBody component', () => {
+  it('should render the editor and headers correctly', () => {
+    render(
+      <Provider store={mockStore}>
+        <NextIntlClientProvider locale="en">
+          <ResponseBody activeTab={0} />
+        </NextIntlClientProvider>
+      </Provider>,
+    );
+
+    expect(screen.getByText(/Editor Language:/)).toBeInTheDocument();
+    expect(screen.getByText('{"key": "value"}')).toBeInTheDocument();
+
+    render(
+      <Provider store={mockStore}>
+        <NextIntlClientProvider locale="en">
+          <ResponseBody activeTab={1} />
+        </NextIntlClientProvider>
+      </Provider>,
+    );
+
+    expect(screen.getByText('key')).toBeInTheDocument();
+    expect(screen.getByText('value')).toBeInTheDocument();
+    expect(screen.getByText('content-type')).toBeInTheDocument();
+    expect(screen.getByText('application/json')).toBeInTheDocument();
+  });
+});
diff --git a/components/Response/response-header.test.tsx b/components/Response/response-header.test.tsx
new file mode 100644
index 0000000..2c5138c
--- /dev/null
+++ b/components/Response/response-header.test.tsx
@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+import ResponseHeader from '@/components/Response/ResponseHeader';
+import { customRender } from '@/__test__/test-utils';
+import { fireEvent, screen } from '@testing-library/react';
+
+vi.mock('next-intl', () => ({
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useTranslations: vi.fn().mockImplementation(() => (key: string) => key),
+}));
+
+const preloadedState = {
+  main: {
+    response: {
+      data: '{"key": "value"}',
+      parsedHeaders: {
+        'content-type': 'application/json',
+        'x-custom-header': 'customValue',
+      },
+      status: 200,
+      statusText: 'OK',
+      responseTime: 123,
+      success: true,
+    },
+    isLoading: false,
+  },
+};
+
+const handleTabChange = vi.fn();
+
+describe('ResponseHeader component', () => {
+  it('should render the tabs and handle tab changes', () => {
+    customRender(<ResponseHeader activeTab={0} handleTabChange={handleTabChange} />, { preloadedState });
+
+    expect(screen.getByText('body')).toBeInTheDocument();
+    expect(screen.getByText('headers')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('headers'));
+    expect(handleTabChange).toHaveBeenCalledWith(expect.any(Object), 1);
+  });
+
+  it('should render the status, response time, and size correctly', () => {
+    customRender(<ResponseHeader activeTab={0} handleTabChange={handleTabChange} />, { preloadedState });
+
+    expect(screen.getByText('200 OK')).toBeInTheDocument();
+
+    expect(screen.getByText('123 ms')).toBeInTheDocument();
+  });
+});
diff --git a/components/Response/response-state.test.tsx b/components/Response/response-state.test.tsx
new file mode 100644
index 0000000..687dafb
--- /dev/null
+++ b/components/Response/response-state.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { NextIntlClientProvider } from 'next-intl';
+import ErrorState from '@/components/Response/ErrorState';
+import { mainSlice } from '@/redux/features/mainSlice';
+import EmptyState from '@/components/Response/EmptyState';
+
+vi.mock('next-intl', () => ({
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useTranslations: vi.fn().mockImplementation(() => (key: string) => key),
+}));
+
+const mockStore = configureStore({
+  reducer: {
+    main: mainSlice.reducer,
+  },
+  preloadedState: {
+    main: {
+      response: {
+        data: '',
+        status: 0,
+        statusText: 'An error occurred',
+        parsedHeaders: {},
+        success: false,
+        responseTime: 0,
+      },
+      isLoading: false,
+    },
+  },
+});
+
+describe('Response component', () => {
+  it('should render the error state with correct translations and status text', () => {
+    render(
+      <Provider store={mockStore}>
+        <NextIntlClientProvider locale="en">
+          <ErrorState />
+        </NextIntlClientProvider>
+      </Provider>,
+    );
+
+    expect(screen.getByText('response')).toBeInTheDocument();
+    expect(screen.getByText('couldNotSendRequest')).toBeInTheDocument();
+    expect(screen.getByText('An error occurred')).toBeInTheDocument();
+
+    const image = screen.getByAltText('couldNotSendRequest');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', '/public/assets/images/failed-fetch.webp'); // Ensure this path is correct
+  });
+
+  it('should render the empty state with correct translations and image', () => {
+    render(
+      <NextIntlClientProvider locale="en">
+        <EmptyState />
+      </NextIntlClientProvider>,
+    );
+
+    expect(screen.getByText('response')).toBeInTheDocument();
+    expect(screen.getByText('clickToSend')).toBeInTheDocument();
+
+    const image = screen.getByAltText('hitSendAlt');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', '/public/assets/svg/illustration-hit-send.svg'); // Adjust path if necessary
+  });
+});
diff --git a/components/Response/response.test.tsx b/components/Response/response.test.tsx
new file mode 100644
index 0000000..ea5e5d8
--- /dev/null
+++ b/components/Response/response.test.tsx
@@ -0,0 +1,103 @@
+import { describe, it, expect, vi } from 'vitest';
+import { screen } from '@testing-library/react';
+import ResponseSection from './index';
+import { customRender } from '@/__test__/test-utils';
+
+vi.mock('./EmptyState', () => ({
+  default: () => <div>EmptyState</div>,
+}));
+
+vi.mock('./ErrorState', () => ({
+  default: () => <div>ErrorState</div>,
+}));
+
+vi.mock('./ResponseHeader', () => ({
+  default: () => <div>ResponseHeader</div>,
+}));
+
+vi.mock('./ResponseBody', () => ({
+  default: () => <div>ResponseBody</div>,
+}));
+
+vi.mock('../UI/Ellipsis', () => ({
+  default: () => <div>Ellipsis</div>,
+}));
+
+describe('ResponseSection component', () => {
+  it('should show Ellipsis when loading', () => {
+    const preloadedState = {
+      main: {
+        isLoading: true,
+        response: {
+          data: '',
+          success: false,
+          statusText: '',
+          status: 0,
+          responseTime: 0,
+          parsedHeaders: {},
+        },
+      },
+    };
+    customRender(<ResponseSection />, { preloadedState });
+
+    expect(screen.getByText('Ellipsis')).toBeInTheDocument();
+  });
+
+  it('should show EmptyState when there is no data and status is 0', () => {
+    const preloadedState = {
+      main: {
+        isLoading: false,
+        response: {
+          data: '',
+          success: false,
+          statusText: '',
+          status: 0,
+          responseTime: 0,
+          parsedHeaders: {},
+        },
+      },
+    };
+    customRender(<ResponseSection />, { preloadedState });
+
+    expect(screen.getByText('EmptyState')).toBeInTheDocument();
+  });
+
+  it('should show ErrorState when response is not successful and status is 0', () => {
+    const preloadedState = {
+      main: {
+        isLoading: false,
+        response: {
+          data: '',
+          success: false,
+          statusText: 'Error occurred',
+          status: 0,
+          responseTime: 0,
+          parsedHeaders: {},
+        },
+      },
+    };
+    customRender(<ResponseSection />, { preloadedState });
+
+    expect(screen.getByText('ErrorState')).toBeInTheDocument();
+  });
+
+  it('should render ResponseHeader and ResponseBody when there is a successful response', () => {
+    const preloadedState = {
+      main: {
+        isLoading: false,
+        response: {
+          data: 'Response data',
+          success: true,
+          statusText: 'OK',
+          status: 200,
+          responseTime: 123,
+          parsedHeaders: {},
+        },
+      },
+    };
+    customRender(<ResponseSection />, { preloadedState });
+
+    expect(screen.getByText('ResponseHeader')).toBeInTheDocument();
+    expect(screen.getByText('ResponseBody')).toBeInTheDocument();
+  });
+});

From 43fd53b6e1c08f02c66f652d6c1fa9853748ef4f Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 12:13:31 +0200
Subject: [PATCH 136/157] test: add LanguageSwitcher test

---
 components/UI/language.test.tsx | 48 +++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/UI/language.test.tsx

diff --git a/components/UI/language.test.tsx b/components/UI/language.test.tsx
new file mode 100644
index 0000000..e64fd94
--- /dev/null
+++ b/components/UI/language.test.tsx
@@ -0,0 +1,48 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import LanguageSwitcher from './LanguageSwitcher';
+import { customRender } from '@/__test__/test-utils';
+import { ReactNode } from 'react';
+
+vi.mock('@/i18n/routing', () => ({
+  Link: ({ children, href }: { children: ReactNode; href: string }) => <a href={href}>{children}</a>,
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    pathname: '/',
+    route: '/',
+    query: {},
+    asPath: '/',
+  }),
+  usePathname: vi.fn().mockReturnValue('/'),
+  routing: {
+    locales: ['en', 'ru'],
+  },
+}));
+
+vi.mock('next-intl', () => ({
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useLocale: vi.fn().mockReturnValue('en'),
+}));
+
+describe('LanguageSwitcher component', () => {
+  it('should render the correct locales and handle language change', async () => {
+    customRender(<LanguageSwitcher />);
+
+    const selectElement = screen.getByRole('combobox');
+
+    expect(selectElement.innerText).toBe('en');
+
+    expect(screen.getByText('en')).toBeInTheDocument();
+
+    fireEvent.mouseDown(selectElement);
+    expect(screen.getByText('ru')).toBeInTheDocument();
+
+    const menuItem = screen.getByRole('option', { name: /ru/i });
+    fireEvent.click(menuItem);
+  });
+});

From dd3ba38caa1a2f8756cb53e19a63367cda417598 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 12:42:49 +0200
Subject: [PATCH 137/157] test: add Table component tests

---
 components/Table/table-row.test.tsx | 68 +++++++++++++++++++++++++++++
 components/Table/table.test.tsx     | 62 ++++++++++++++++++++++++++
 constants/constants.test.tsx        | 65 +++++++++++++++++++++++++++
 3 files changed, 195 insertions(+)
 create mode 100644 components/Table/table-row.test.tsx
 create mode 100644 components/Table/table.test.tsx
 create mode 100644 constants/constants.test.tsx

diff --git a/components/Table/table-row.test.tsx b/components/Table/table-row.test.tsx
new file mode 100644
index 0000000..562231c
--- /dev/null
+++ b/components/Table/table-row.test.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { FormProvider, useForm } from 'react-hook-form';
+import InputTableRow from './InputTableRow';
+import { customRender } from '@/__test__/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+
+const MockFormProvider = ({ children }: { children: React.ReactNode }) => {
+  const methods = useForm();
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('TableRow component', () => {
+  it('should render inputs and button correctly', () => {
+    const removeMock = vi.fn();
+
+    customRender(
+      <MockFormProvider>
+        <table>
+          <tbody>
+            <InputTableRow index={0} inputName="params" remove={removeMock} isOnlyRow={false} />
+          </tbody>
+        </table>
+      </MockFormProvider>,
+    );
+
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+
+    expect(screen.getByPlaceholderText('Key')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Value')).toBeInTheDocument();
+
+    expect(screen.getByLabelText('delete')).toBeInTheDocument();
+  });
+
+  it('should call remove function when delete button is clicked', () => {
+    const removeMock = vi.fn();
+
+    customRender(
+      <MockFormProvider>
+        <table>
+          <tbody>
+            <InputTableRow index={0} inputName="params" remove={removeMock} isOnlyRow={false} />
+          </tbody>
+        </table>
+      </MockFormProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('delete'));
+
+    expect(removeMock).toHaveBeenCalledWith(0);
+  });
+
+  it('should disable delete button when isOnlyRow is true', () => {
+    const removeMock = vi.fn();
+
+    customRender(
+      <MockFormProvider>
+        <table>
+          <tbody>
+            <InputTableRow index={0} inputName="params" remove={removeMock} isOnlyRow={true} />
+          </tbody>
+        </table>
+      </MockFormProvider>,
+    );
+
+    expect(screen.getByLabelText('delete')).toBeDisabled();
+  });
+});
diff --git a/components/Table/table.test.tsx b/components/Table/table.test.tsx
new file mode 100644
index 0000000..4cad15e
--- /dev/null
+++ b/components/Table/table.test.tsx
@@ -0,0 +1,62 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import InputTable from './InputTable';
+
+vi.mock('./InputTableRow', () => ({
+  __esModule: true,
+  default: ({ index, remove }: { index: number; remove: (index: number) => void }) => (
+    <tr>
+      <td>Mocked InputTableRow - {index}</td>
+      <td>
+        <button onClick={() => remove(index)}>Remove</button>
+      </td>
+    </tr>
+  ),
+}));
+
+describe('InputTable component', () => {
+  it('should render the correct number of rows based on fields prop', () => {
+    const mockFields = [
+      { id: '1', key: 'param1', value: 'value1' },
+      { id: '2', key: 'param2', value: 'value2' },
+    ];
+    const mockRemove = vi.fn();
+
+    render(<InputTable fields={mockFields} inputName="params" remove={mockRemove} />);
+
+    expect(screen.getAllByRole('row')).toHaveLength(mockFields.length + 1);
+  });
+
+  it('should call remove function with correct index', () => {
+    const mockFields = [{ id: '1', key: 'param1', value: 'value1' }];
+    const mockRemove = vi.fn();
+
+    render(<InputTable fields={mockFields} inputName="params" remove={mockRemove} />);
+
+    fireEvent.click(screen.getByText('Remove'));
+
+    expect(mockRemove).toHaveBeenCalledWith(0);
+  });
+
+  it('should render InputTableRow with isOnlyRow as true if there is only one field', () => {
+    const mockFields = [{ id: '1', key: 'param1', value: 'value1' }];
+    const mockRemove = vi.fn();
+
+    render(<InputTable fields={mockFields} inputName="params" remove={mockRemove} />);
+
+    expect(screen.getByText('Mocked InputTableRow - 0')).toBeInTheDocument();
+  });
+
+  it('should render InputTableRow with isOnlyRow as false if there are multiple fields', () => {
+    const mockFields = [
+      { id: '1', key: 'param1', value: 'value1' },
+      { id: '2', key: 'param2', value: 'value2' },
+    ];
+    const mockRemove = vi.fn();
+
+    render(<InputTable fields={mockFields} inputName="params" remove={mockRemove} />);
+
+    expect(screen.getByText('Mocked InputTableRow - 0')).toBeInTheDocument();
+    expect(screen.getByText('Mocked InputTableRow - 1')).toBeInTheDocument();
+  });
+});
diff --git a/constants/constants.test.tsx b/constants/constants.test.tsx
new file mode 100644
index 0000000..d2e71d1
--- /dev/null
+++ b/constants/constants.test.tsx
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { dynamicColors } from '@/constants/colors';
+import { HttpMethod } from '@/types/api.types';
+import { methods } from '@/constants/restClientData';
+
+describe('Constants', () => {
+  it('should contain expected colors', () => {
+    const expectedColors = [
+      'bg-blue-700',
+      'text-blue-200',
+      'bg-green-700',
+      'text-green-200',
+      'bg-yellow-700',
+      'text-yellow-200',
+      'bg-red-700',
+      'text-red-200',
+      'bg-gray-700',
+      'text-gray-200',
+      'text-green-500',
+      'text-yellow-500',
+      'text-blue-500',
+      'text-purple-500',
+      'text-pink-500',
+      'text-red-500',
+      'text-green-700',
+    ];
+
+    expectedColors.forEach((color) => {
+      expect(dynamicColors).toContain(color);
+    });
+  });
+
+  it('should contain objects with name and color properties', () => {
+    methods.forEach((method) => {
+      expect(method).toHaveProperty('name');
+      expect(method).toHaveProperty('color');
+      expect(typeof method.name).toBe('string');
+      expect(typeof method.color).toBe('string');
+    });
+  });
+
+  it('should contain valid HTTP methods', () => {
+    const validMethods: HttpMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
+
+    methods.forEach((method) => {
+      expect(validMethods).toContain(method.name);
+    });
+  });
+
+  it('should contain valid color classes', () => {
+    const validColors = [
+      'text-green-500',
+      'text-yellow-500',
+      'text-blue-500',
+      'text-purple-500',
+      'text-red-500',
+      'text-green-700',
+      'text-pink-500',
+    ];
+
+    methods.forEach((method) => {
+      expect(validColors).toContain(method.color);
+    });
+  });
+});

From a0095697548041e7e948c2a20b04ddadb1dff533 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 12:56:41 +0200
Subject: [PATCH 138/157] test: add graphql page test

---
 .../GRAPHQL/[[...endpoint]]/qraphql.test.tsx  | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 app/[locale]/GRAPHQL/[[...endpoint]]/qraphql.test.tsx

diff --git a/app/[locale]/GRAPHQL/[[...endpoint]]/qraphql.test.tsx b/app/[locale]/GRAPHQL/[[...endpoint]]/qraphql.test.tsx
new file mode 100644
index 0000000..2839a71
--- /dev/null
+++ b/app/[locale]/GRAPHQL/[[...endpoint]]/qraphql.test.tsx
@@ -0,0 +1,40 @@
+import { screen, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import GraphQL from '../../../../app/[locale]/GRAPHQL/[[...endpoint]]/page';
+import { base64ToText } from '../../../../utils/coderBase64';
+import '@testing-library/jest-dom';
+
+vi.mock('@/components/GraphiQLClient', () => ({
+  __esModule: true,
+  default: () => <div>GraphiQLClient Mock</div>,
+}));
+
+vi.mock('@/components/Response', () => ({
+  __esModule: true,
+  default: () => <div>ResponseSection Mock</div>,
+}));
+
+vi.mock('@/utils/coderBase64', () => ({
+  base64ToText: vi.fn((input) => input),
+}));
+
+describe('GraphQL Component', () => {
+  it('renders correctly with params and searchParams', () => {
+    const endpoint = ['aHR0cHM6Ly9hcGkuZXhhbXBsZS5jb20=', 'c2VhcmNoIHRlc3Q='];
+
+    render(<GraphQL params={{ endpoint }} searchParams={{ key: 'value' }} />);
+
+    expect(screen.getByText('GraphiQLClient Mock')).toBeInTheDocument();
+    expect(screen.getByText('ResponseSection Mock')).toBeInTheDocument();
+
+    expect(base64ToText).toHaveBeenCalledWith('aHR0cHM6Ly9hcGkuZXhhbXBsZS5jb20=');
+    expect(base64ToText).toHaveBeenCalledWith('c2VhcmNoIHRlc3Q=');
+  });
+
+  it('handles missing params and searchParams gracefully', () => {
+    render(<GraphQL />);
+
+    expect(screen.getByText('GraphiQLClient Mock')).toBeInTheDocument();
+    expect(screen.getByText('ResponseSection Mock')).toBeInTheDocument();
+  });
+});

From b5561a3057da066db3d282823e222d42c06fb916 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 13:12:47 +0200
Subject: [PATCH 139/157] test: add Documentation test

---
 .../Documentation/documentation.test.tsx      | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 components/GraphiQLClient/Documentation/documentation.test.tsx

diff --git a/components/GraphiQLClient/Documentation/documentation.test.tsx b/components/GraphiQLClient/Documentation/documentation.test.tsx
new file mode 100644
index 0000000..e721462
--- /dev/null
+++ b/components/GraphiQLClient/Documentation/documentation.test.tsx
@@ -0,0 +1,20 @@
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Documentation from './index';
+import { customRender } from '../../../__test__/test-utils';
+import '@testing-library/jest-dom';
+
+vi.mock('@graphiql/react', () => ({
+  DocExplorer: () => <div>DocExplorer Mock</div>,
+  useSchemaContext: () => ({
+    fetchError: null,
+  }),
+}));
+
+describe('Documentation Component', () => {
+  it('renders DocExplorer when there is no fetch error', () => {
+    customRender(<Documentation />);
+
+    expect(screen.getByText('DocExplorer Mock')).toBeInTheDocument();
+  });
+});

From c0fca6c13673730f4b7039d89911e92a99defce6 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 15:21:34 +0400
Subject: [PATCH 140/157] feat: add show and hide variables to RestClient

---
 components/RestClient/index.tsx        | 68 ++++++++++++++++++--------
 utils/replaceValuesWithPlaceholders.ts | 23 ++++++---
 utils/replaceVariables.ts              |  7 +--
 3 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index 0623288..2e5652f 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -30,15 +30,18 @@ import { a11yProps } from '@/utils/a11yProps';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { toast } from 'sonner';
 import { useTranslations } from 'next-intl';
-import { AddCircleOutline, AutoFixHigh } from '@mui/icons-material';
+import { AddCircleOutline, AutoFixHigh, Visibility, VisibilityOff } from '@mui/icons-material';
 import type { editor } from 'monaco-editor';
 import { createQueryString } from '@/utils/createQueryString';
-import { replaceVariables } from '@/utils/replaceVariables';
 import type { RequestFormTypes, ApiRequest } from '@/types/api.types';
 
+import { replaceVariables } from '@/utils/replaceVariables';
+import { replaceValuesWithPlaceholders } from '@/utils/replaceValuesWithPlaceholders';
+
 function RestForm() {
   const [activeTab, setActiveTab] = useState(0);
   const [bodyFormat, setBodyFormat] = useState<'json' | 'plaintext'>('json');
+  const [showVariables, setShowVariables] = useState(false);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const t = useTranslations('RestClient');
   const tToast = useTranslations('ToastMessages');
@@ -47,6 +50,7 @@ function RestForm() {
   const { storedValue: requests, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
   const dispatch = useAppDispatch();
   const { method, url, params, headers, body, variables } = useAppSelector(selectAll);
+
   const router = useRouter();
 
   const form = useForm({
@@ -162,6 +166,14 @@ function RestForm() {
     }
   };
 
+  const handleShowHideVariables = () => {
+    setShowVariables(!showVariables);
+    const updatedFormData = showVariables
+      ? replaceValuesWithPlaceholders(form.getValues())
+      : replaceVariables(form.getValues());
+    form.reset(updatedFormData);
+  };
+
   useEffect(() => {
     if (errors.url?.type === 'required') {
       toast.error(urlErrorMessage);
@@ -170,6 +182,8 @@ function RestForm() {
 
   const selectedColor = methods.find((item) => item.name === watch('method'))?.color;
 
+  const bodyValue = watch('body');
+
   return (
     <section className="padding-x h-full max-h-[50vh] pt-3">
       <FormProvider {...form}>
@@ -233,7 +247,7 @@ function RestForm() {
               <Box className="mb-1 flex items-center justify-between px-5 pt-2">
                 <Typography className="text-sm">{t('queryParams')}</Typography>
                 <Button
-                  variant="outlined"
+                  variant="contained"
                   size="small"
                   className="h-8"
                   startIcon={<AddCircleOutline />}
@@ -246,11 +260,11 @@ function RestForm() {
               <InputTable fields={paramsFields} inputName="params" remove={removeParams} />
             </CustomTabPanel>
 
-            <CustomTabPanel value={activeTab} index={3} className="flex flex-grow-0 flex-col overflow-hidden">
+            <CustomTabPanel value={activeTab} index={1} className="flex flex-grow-0 flex-col overflow-hidden">
               <Box className="mb-1 flex items-center justify-between px-5 pt-2">
-                <Typography className="text-sm">{t('variables')}</Typography>
+                <Typography className="text-sm">{t('headers')}</Typography>
                 <Button
-                  variant="outlined"
+                  variant="contained"
                   size="small"
                   className="h-8"
                   startIcon={<AddCircleOutline />}
@@ -259,24 +273,35 @@ function RestForm() {
                   {t('add')}
                 </Button>
               </Box>
-
-              <InputTable fields={variablesFields} inputName="variables" remove={removeVariables} />
+              <InputTable fields={headersFields} inputName="headers" remove={removeHeaders} />
             </CustomTabPanel>
 
-            <CustomTabPanel value={activeTab} index={1} className="flex flex-grow-0 flex-col overflow-hidden">
+            <CustomTabPanel value={activeTab} index={3} className="flex flex-grow-0 flex-col overflow-hidden">
               <Box className="mb-1 flex items-center justify-between px-5 pt-2">
-                <Typography className="text-sm">{t('headers')}</Typography>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  className="h-8"
-                  startIcon={<AddCircleOutline />}
-                  onClick={handleAddInput}
-                >
-                  {t('add')}
-                </Button>
+                <Typography className="text-sm">{t('variables')}</Typography>
+                <Box>
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    className="mr-2 h-8"
+                    startIcon={showVariables ? <VisibilityOff /> : <Visibility />}
+                    onClick={handleShowHideVariables}
+                  >
+                    {showVariables ? 'hide' : 'show'}
+                  </Button>
+                  <Button
+                    variant="contained"
+                    size="small"
+                    className="h-8"
+                    startIcon={<AddCircleOutline />}
+                    onClick={handleAddInput}
+                  >
+                    {t('add')}
+                  </Button>
+                </Box>
               </Box>
-              <InputTable fields={headersFields} inputName="headers" remove={removeHeaders} />
+
+              <InputTable fields={variablesFields} inputName="variables" remove={removeVariables} />
             </CustomTabPanel>
 
             <CustomTabPanel value={activeTab} index={2} className="flex flex-grow flex-col overflow-hidden">
@@ -297,7 +322,7 @@ function RestForm() {
                 </ToggleButtonGroup>
                 {bodyFormat === 'json' && (
                   <Button
-                    variant="outlined"
+                    variant="contained"
                     size="small"
                     className="h-8"
                     startIcon={<AutoFixHigh />}
@@ -315,6 +340,7 @@ function RestForm() {
                     <Editor
                       language={bodyFormat === 'json' ? 'json' : 'plaintext'}
                       theme="vs-dark"
+                      value={bodyValue}
                       onChange={(value) => field.onChange(value)}
                       onMount={(editor) => {
                         editorRef.current = editor;
diff --git a/utils/replaceValuesWithPlaceholders.ts b/utils/replaceValuesWithPlaceholders.ts
index b85ab74..83def38 100644
--- a/utils/replaceValuesWithPlaceholders.ts
+++ b/utils/replaceValuesWithPlaceholders.ts
@@ -1,12 +1,21 @@
-import { ApiRequest } from '@/types/api.types';
+import { RequestFormTypes } from '@/types/api.types';
+import { toast } from 'sonner';
 
-export function replaceValuesWithPlaceholders(obj: ApiRequest): ApiRequest {
-  let jsonString = JSON.stringify(obj);
+export function replaceValuesWithPlaceholders(obj: RequestFormTypes): RequestFormTypes {
+  const { variables, ...rest } = obj;
+  let jsonString = JSON.stringify(rest);
 
-  obj.variables.forEach((variable) => {
-    const regex = new RegExp(variable.value.replace(/[-\\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
-    jsonString = jsonString.replace(regex, `{{${variable.key}}}`);
+  variables.forEach((variable) => {
+    if (variable.key && variable.value) {
+      const regex = new RegExp(variable.value.replace(/[-\\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g');
+      jsonString = jsonString.replace(regex, `{{${variable.key}}}`);
+    }
   });
 
-  return JSON.parse(jsonString) as ApiRequest;
+  try {
+    return { ...JSON.parse(jsonString), variables } as RequestFormTypes;
+  } catch (error) {
+    toast.error(`JSON parse error: ${error}`);
+    return obj;
+  }
 }
diff --git a/utils/replaceVariables.ts b/utils/replaceVariables.ts
index 5f200e4..adba8e6 100644
--- a/utils/replaceVariables.ts
+++ b/utils/replaceVariables.ts
@@ -1,12 +1,13 @@
 import { RequestFormTypes, RequestParam } from '@/types/api.types';
 
 export function replaceVariables(obj: RequestFormTypes): RequestFormTypes {
-  let jsonString = JSON.stringify(obj);
+  const { variables, ...rest } = obj;
+  let jsonString = JSON.stringify(rest);
 
-  obj.variables.forEach((variable: RequestParam) => {
+  variables.forEach((variable: RequestParam) => {
     const regex = new RegExp(`{{${variable.key}}}`, 'g');
     jsonString = jsonString.replace(regex, variable.value);
   });
 
-  return JSON.parse(jsonString) as RequestFormTypes;
+  return { ...JSON.parse(jsonString), variables } as RequestFormTypes;
 }

From 8c9d8f770870a93894fe2cc890f58d5da93885b9 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 16:18:46 +0400
Subject: [PATCH 141/157] refactor: replace url variables with actual value

---
 components/DataTable/index.tsx |  2 +-
 components/History/index.tsx   |  5 ++++-
 utils/replaceVariables.ts      | 16 +++++++++-------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/DataTable/index.tsx b/components/DataTable/index.tsx
index 820a707..2b0d9be 100644
--- a/components/DataTable/index.tsx
+++ b/components/DataTable/index.tsx
@@ -94,7 +94,7 @@ export default function DataTable({ requests, setStorageValue }: PropTypes) {
 
   return (
     <Box className="padding-x h-full w-full pb-1 pt-3">
-      <Paper className="flex h-full w-full flex-col">
+      <Paper className="flex h-full w-full flex-col" elevation={3}>
         <DataTableToolbar
           numSelected={selected.length}
           dense={dense}
diff --git a/components/History/index.tsx b/components/History/index.tsx
index 610ecb1..9ee17e6 100644
--- a/components/History/index.tsx
+++ b/components/History/index.tsx
@@ -3,16 +3,19 @@ import { useLocalStorage } from '@/hooks/useLocalStorage';
 import DataTable from '../DataTable';
 import type { ApiRequest } from '@/types/api.types';
 import EmptyHistory from './EmptyHistory';
+import { replaceVariables } from '@/utils/replaceVariables';
 
 function HistoryContainer() {
   const { storedValue, setLocalStorageValue } = useLocalStorage<ApiRequest[]>('requests', []);
 
+  const replacedVar = storedValue.map((request) => replaceVariables<ApiRequest>(request));
+
   return (
     <>
       {!storedValue.length ? (
         <EmptyHistory />
       ) : (
-        <DataTable requests={storedValue} setStorageValue={setLocalStorageValue} />
+        <DataTable requests={replacedVar} setStorageValue={setLocalStorageValue} />
       )}
     </>
   );
diff --git a/utils/replaceVariables.ts b/utils/replaceVariables.ts
index adba8e6..92946cf 100644
--- a/utils/replaceVariables.ts
+++ b/utils/replaceVariables.ts
@@ -1,13 +1,15 @@
-import { RequestFormTypes, RequestParam } from '@/types/api.types';
+import { RequestFormTypes, RequestParam, ApiRequest } from '@/types/api.types';
 
-export function replaceVariables(obj: RequestFormTypes): RequestFormTypes {
+export function replaceVariables<T extends RequestFormTypes | ApiRequest>(obj: T): T {
   const { variables, ...rest } = obj;
   let jsonString = JSON.stringify(rest);
 
-  variables.forEach((variable: RequestParam) => {
-    const regex = new RegExp(`{{${variable.key}}}`, 'g');
-    jsonString = jsonString.replace(regex, variable.value);
-  });
+  if (variables) {
+    variables.forEach((variable: RequestParam) => {
+      const regex = new RegExp(`{{${variable.key}}}`, 'g');
+      jsonString = jsonString.replace(regex, variable.value);
+    });
+  }
 
-  return { ...JSON.parse(jsonString), variables } as RequestFormTypes;
+  return { ...JSON.parse(jsonString), variables } as T;
 }

From 5044f2d3d98139f8947d3fdaffcef999eeccaa6a Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 15:08:01 +0200
Subject: [PATCH 142/157] feat: add header sticky functionality

---
 app/[locale]/globals.css        | 11 ++++++++--
 components/Footer/index.tsx     |  6 +++---
 components/FormSignIn/index.tsx |  1 +
 components/Header/index.tsx     | 36 +++++++++++++++++++++++++--------
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index 0e125d8..42a2c6c 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -27,6 +27,13 @@
 .gql .graphiql-editor .CodeMirror {
   position: unset;
   height: auto;
-  /*overflow: unset;*/
-  /*display: contents;*/
+}
+
+.custom-button {
+  padding: 6px 10px;
+  border-radius: 4px;
+}
+
+.custom-button:hover {
+  background-color: chocolate;
 }
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 462440b..da627ea 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -6,19 +6,19 @@ function Footer() {
     <footer className="padding-x z-50 flex h-10 items-center justify-between bg-blue-600 text-sm text-white">
       <ul className="flex gap-3">
         <li>
-          <Link href="https://github.com/shd-mn" target="_blank">
+          <Link href="https://github.com/shd-mn" target="_blank" className="custom-button">
             Shadman <span className="hidden sm:inline">Alizada</span>
           </Link>
         </li>
         <li>
-          <Link href="https://github.com/olitera" target="_blank">
+          <Link href="https://github.com/olitera" target="_blank" className="custom-button">
             Volha <span className="hidden sm:inline">Melayok</span>
           </Link>
         </li>
       </ul>
       <p>2024</p>
       <div>
-        <Link href="https://rs.school/" target="_blank" className="flex items-center gap-2">
+        <Link href="https://rs.school/" target="_blank" className="custom-button flex items-center gap-2">
           <Image src={course_logo} alt="The Rolling Scopes School" quality={100} width={24} height={24} /> RS School
         </Link>
       </div>
diff --git a/components/FormSignIn/index.tsx b/components/FormSignIn/index.tsx
index c6cb23a..46d11cf 100644
--- a/components/FormSignIn/index.tsx
+++ b/components/FormSignIn/index.tsx
@@ -79,6 +79,7 @@ function FormSignIn() {
         id="email"
         label={t('email')}
         helperText={errors.email ? errors.email.message : ' '}
+        autoComplete="email"
         {...register('email')}
       />
       <FormControl variant="outlined" error={!!errors.password}>
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 48728c4..8728648 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -4,13 +4,14 @@ import { Link, useRouter } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, logout } from '@/firebase';
-import { Button } from '@mui/material';
 import { toast } from 'sonner';
 import { routes } from '@/constants/routes';
 import LanguageSwitcher from '../UI/LanguageSwitcher';
+import { useState } from 'react';
 
 function Header() {
   const [user] = useAuthState(auth);
+  const [isSticky, setIsSticky] = useState(false);
 
   const router = useRouter();
   const t = useTranslations('Header');
@@ -26,24 +27,43 @@ function Header() {
     }
   };
 
+  const handleScroll = () => {
+    if (window.scrollY > 0) {
+      setIsSticky(true);
+    } else {
+      setIsSticky(false);
+    }
+  };
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('scroll', handleScroll);
+  }
+
   return (
-    <header className="padding-x z-50 flex h-14 items-center justify-between bg-blue-600 text-white">
+    <header
+      className={`padding-x sticky inset-x-0 top-0 z-50 flex h-14 items-center justify-between bg-blue-600 text-white ${isSticky ? 'bg-gray-500' : ''}`}
+    >
       <div>
-        <Link href={routes.home}>{t('home')}</Link>
+        <Link href={routes.home} className="custom-button">
+          {t('home')}
+        </Link>
       </div>
       <div className="flex items-center gap-2">
         <LanguageSwitcher />
-
         {!user ? (
           <>
-            <Link href={routes.signin}>{t('signIn')}</Link>
-            <Link href={routes.signup}>{t('signUp')}</Link>
+            <Link href={routes.signin} className="custom-button">
+              {t('signIn')}
+            </Link>
+            <Link href={routes.signup} className="custom-button">
+              {t('signUp')}
+            </Link>
           </>
         ) : (
           <div>
-            <Button color="inherit" onClick={onLogout}>
+            <span color="inherit" onClick={onLogout} className="custom-button cursor-pointer">
               {t('signOut')}
-            </Button>
+            </span>
           </div>
         )}
       </div>

From c2bd14d6821816032df4c6c50d28568f5b4161c7 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 15:58:33 +0200
Subject: [PATCH 143/157] test: add PrettifyButton test

---
 components/GraphiQLClient/prettify.test.tsx | 56 +++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 components/GraphiQLClient/prettify.test.tsx

diff --git a/components/GraphiQLClient/prettify.test.tsx b/components/GraphiQLClient/prettify.test.tsx
new file mode 100644
index 0000000..e6e8180
--- /dev/null
+++ b/components/GraphiQLClient/prettify.test.tsx
@@ -0,0 +1,56 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+import { usePrettifyEditors, useQueryEditor } from '@graphiql/react';
+import { customRender } from '@/__test__/test-utils';
+import PrettifyButton from '@/components/GraphiQLClient/PrettifyButton';
+import { toast } from 'sonner';
+
+vi.mock('@graphiql/react', () => ({
+  useQueryEditor: vi.fn(),
+  usePrettifyEditors: vi.fn(),
+}));
+
+vi.mock('next-intl', () => ({
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useTranslations: vi.fn().mockImplementation(() => (key: string) => key),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}));
+
+describe('PrettifyButton Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('calls prettifyEditors on click when editor is present', () => {
+    const mockPrettifyEditors = vi.fn();
+    const mockRefObject = { current: {} as HTMLDivElement };
+    vi.mocked(usePrettifyEditors).mockReturnValue(mockPrettifyEditors);
+    vi.mocked(useQueryEditor).mockReturnValue(mockRefObject);
+
+    customRender(<PrettifyButton />);
+
+    fireEvent.click(screen.getByText('Prettify query'));
+
+    expect(mockPrettifyEditors).toHaveBeenCalled();
+  });
+
+  it('shows an error toast if prettifyEditors throws an error', () => {
+    const mockPrettifyEditors = vi.fn().mockImplementation(() => {
+      throw new Error('Prettify error');
+    });
+    const mockRefObject = { current: {} as HTMLDivElement };
+    vi.mocked(usePrettifyEditors).mockReturnValue(mockPrettifyEditors);
+    vi.mocked(useQueryEditor).mockReturnValue(mockRefObject);
+
+    customRender(<PrettifyButton />);
+
+    fireEvent.click(screen.getByText('Prettify query'));
+
+    expect(vi.mocked(toast.error)).toHaveBeenCalledWith('general.prettifyError');
+  });
+});

From 480f471e5d50a2caec4523a6fe76d2f8d2ca1571 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 17:29:34 +0200
Subject: [PATCH 144/157] test: add Header component test

---
 components/Header/header.test.tsx | 82 +++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 components/Header/header.test.tsx

diff --git a/components/Header/header.test.tsx b/components/Header/header.test.tsx
new file mode 100644
index 0000000..d4fd7f0
--- /dev/null
+++ b/components/Header/header.test.tsx
@@ -0,0 +1,82 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import Header from '@/components/Header';
+import { MockedFunction, vi } from 'vitest';
+import { customRender } from '@/__test__/test-utils';
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { User } from 'firebase/auth';
+
+vi.mock('../UI/LanguageSwitcher', () => ({
+  default: vi.fn(() => <div>Mocked Language Switcher</div>),
+}));
+
+vi.mock('next-intl', async () => {
+  const original = await vi.importActual<typeof import('next-intl')>('next-intl');
+  return {
+    ...original,
+    useTranslations: vi.fn().mockReturnValue(vi.fn((key) => key)),
+  };
+});
+
+vi.mock('@/i18n/routing', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+  usePathname: vi.fn().mockReturnValue('/'),
+  routing: vi.fn(),
+  Link: ({ children }: { children: React.ReactNode }) => <a>{children}</a>,
+}));
+
+vi.mock('react-firebase-hooks/auth', () => ({
+  useAuthState: vi.fn(),
+}));
+
+vi.mock('@/firebase', () => ({
+  auth: {},
+  logout: vi.fn().mockResolvedValue({}),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    info: vi.fn(),
+  },
+}));
+
+describe('Header Component', () => {
+  beforeEach(() => {});
+
+  it('renders sign in and sign up links when user is not authenticated', () => {
+    (useAuthState as MockedFunction<typeof useAuthState>).mockReturnValueOnce([null, false, undefined]);
+
+    customRender(<Header />);
+
+    expect(screen.getByText('signIn')).toBeInTheDocument();
+    expect(screen.getByText('signUp')).toBeInTheDocument();
+  });
+
+  it('renders sign out button when user is authenticated', () => {
+    (useAuthState as MockedFunction<typeof useAuthState>).mockReturnValue([
+      { uid: 'user123' } as User,
+      false,
+      undefined,
+    ]);
+
+    customRender(<Header />, {
+      locale: 'en',
+      messages: {
+        Header: {
+          home: 'Home',
+          signIn: 'Sign In',
+          signUp: 'Sign Up',
+          signOut: 'Sign Out',
+        },
+      },
+    });
+  });
+
+  waitFor(() => {
+    expect(screen.getByText('signOut')).toBeInTheDocument();
+    const button = screen.getByText('signOut');
+
+    fireEvent.click(button);
+  });
+});

From 7287b246e95d9cd51a26a523b111e2aa5c87ef91 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 18:40:59 +0200
Subject: [PATCH 145/157] test: add GraphQL variable editor test

---
 components/GraphiQLClient/url.test.tsx       | 34 +++++++++
 components/GraphiQLClient/variables.test.tsx | 80 ++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 components/GraphiQLClient/url.test.tsx
 create mode 100644 components/GraphiQLClient/variables.test.tsx

diff --git a/components/GraphiQLClient/url.test.tsx b/components/GraphiQLClient/url.test.tsx
new file mode 100644
index 0000000..8c606fa
--- /dev/null
+++ b/components/GraphiQLClient/url.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { describe, it, vi, expect } from 'vitest';
+import { FormState, UseFormRegister } from 'react-hook-form';
+import { UrlGraphql } from '@/types/url-graphql.types';
+import { graphiqlSlice } from '@/redux/features/graphiqlSlice';
+import UrlSection from '@/components/GraphiQLClient/UrlSection';
+
+const store = configureStore({
+  reducer: {
+    graphiql: graphiqlSlice.reducer,
+  },
+});
+
+describe('UrlSection Component', () => {
+  const mockRegister = vi.fn() as UseFormRegister<UrlGraphql>;
+
+  const mockErrors: FormState<UrlGraphql>['errors'] = {
+    endpoint: { message: 'Invalid endpoint', type: 'required' },
+    sdl: { message: 'Invalid SDL URL', type: 'pattern' },
+  };
+
+  it('should display error messages for endpoint and SDL when errors are passed', () => {
+    render(
+      <Provider store={store}>
+        <UrlSection register={mockRegister} errors={mockErrors} />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Invalid endpoint')).toBeInTheDocument();
+    expect(screen.getByText('Invalid SDL URL')).toBeInTheDocument();
+  });
+});
diff --git a/components/GraphiQLClient/variables.test.tsx b/components/GraphiQLClient/variables.test.tsx
new file mode 100644
index 0000000..537cf10
--- /dev/null
+++ b/components/GraphiQLClient/variables.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach, MockedFunction } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { graphiqlSlice, setVariables } from '@/redux/features/graphiqlSlice';
+import { useVariableEditor, useVariablesEditorState } from '@graphiql/react';
+import VariablesSection from '@/components/GraphiQLClient/VariablesSection';
+
+vi.mock('@graphiql/react', () => ({
+  useVariableEditor: vi.fn(),
+  useVariablesEditorState: vi.fn(),
+  VariableEditor: () => <div>VariableEditor Component</div>,
+}));
+
+const store = configureStore({
+  reducer: { graphiql: graphiqlSlice.reducer },
+});
+
+describe('VariablesSection Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render VariableEditor component', () => {
+    (useVariableEditor as MockedFunction<typeof useVariableEditor>).mockReturnValue({
+      current: document.createElement('div'),
+    });
+    (useVariablesEditorState as MockedFunction<typeof useVariablesEditorState>).mockReturnValue([
+      'mockVariable',
+      vi.fn(),
+    ]);
+
+    render(
+      <Provider store={store}>
+        <VariablesSection />
+      </Provider>,
+    );
+
+    expect(screen.getByText('VariableEditor Component')).toBeInTheDocument();
+  });
+
+  it('should dispatch setVariables action when state is updated', async () => {
+    const mockDispatch = vi.fn();
+    (useVariableEditor as MockedFunction<typeof useVariableEditor>).mockReturnValue({
+      current: document.createElement('div'),
+    });
+    (useVariablesEditorState as MockedFunction<typeof useVariablesEditorState>).mockReturnValue([
+      'mockVariable',
+      vi.fn(),
+    ]);
+
+    store.dispatch = mockDispatch;
+
+    render(
+      <Provider store={store}>
+        <VariablesSection />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDispatch).toHaveBeenCalledWith(setVariables('mockVariable'));
+    });
+  });
+
+  it('should not dispatch setVariables if useVariableEditor or useVariablesEditorState are not available', () => {
+    (useVariableEditor as MockedFunction<typeof useVariableEditor>).mockReturnValue({ current: null });
+    (useVariablesEditorState as MockedFunction<typeof useVariablesEditorState>).mockReturnValue(['', vi.fn()]);
+
+    const mockDispatch = vi.fn();
+    store.dispatch = mockDispatch;
+
+    render(
+      <Provider store={store}>
+        <VariablesSection />
+      </Provider>,
+    );
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+});

From ca09a488a71d09c8fe3ef7e1aef8ec7b1c6bb61b Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 19:32:12 +0200
Subject: [PATCH 146/157] test: add RestForm component test

---
 components/RestClient/rest.test.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 components/RestClient/rest.test.tsx

diff --git a/components/RestClient/rest.test.tsx b/components/RestClient/rest.test.tsx
new file mode 100644
index 0000000..f106be9
--- /dev/null
+++ b/components/RestClient/rest.test.tsx
@@ -0,0 +1,19 @@
+import { screen } from '@testing-library/react';
+import { customRender } from '@/__test__/test-utils';
+import RestForm from '@/components/RestClient/index';
+
+describe('RestForm Component', () => {
+  it('renders form correctly', () => {
+    customRender(<RestForm />);
+
+    expect(screen.getByRole('button', { name: /send/i })).toBeInTheDocument();
+
+    expect(screen.getByPlaceholderText('https://example.com')).toBeInTheDocument();
+  });
+
+  it('handles locale changes correctly', () => {
+    customRender(<RestForm />, { locale: 'ru' });
+
+    expect(screen.getByRole('button', { name: /отправить/i })).toBeInTheDocument();
+  });
+});

From f0199d1b2ac84ac1877b0c884aa3b008a16f28e3 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 20:17:41 +0200
Subject: [PATCH 147/157] test: add rest page test

---
 app/[locale]/[...rest]/rest.test.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 app/[locale]/[...rest]/rest.test.tsx

diff --git a/app/[locale]/[...rest]/rest.test.tsx b/app/[locale]/[...rest]/rest.test.tsx
new file mode 100644
index 0000000..0a9123a
--- /dev/null
+++ b/app/[locale]/[...rest]/rest.test.tsx
@@ -0,0 +1,24 @@
+import { screen, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+import '@testing-library/jest-dom';
+import RESTful from '@/app/[locale]/[...rest]/page';
+
+vi.mock('@/components/RestClient', () => ({
+  __esModule: true,
+  default: () => <div>RestForm Mock</div>,
+}));
+
+vi.mock('@/components/Response', () => ({
+  __esModule: true,
+  default: () => <div>ResponseSection Mock</div>,
+}));
+
+describe('RESTful Component', () => {
+  it('renders correctly', () => {
+    render(<RESTful />);
+
+    expect(screen.getByText('RestForm Mock')).toBeInTheDocument();
+    expect(screen.getByText('ResponseSection Mock')).toBeInTheDocument();
+  });
+});

From 93791a37f44fbdd81dbc96f14adbfc3c38443462 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 22:45:22 +0400
Subject: [PATCH 148/157] refator: Graphql client ui

---
 app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx |   2 +-
 app/[locale]/globals.css                      |  19 +--
 .../GraphiQLClient/Documentation/index.tsx    |  24 +++-
 components/GraphiQLClient/GraphiqlHeader.tsx  |   2 +-
 components/GraphiQLClient/PrettifyButton.tsx  |  11 +-
 components/GraphiQLClient/UrlSection.tsx      |  22 +++-
 .../GraphiQLClient/VariablesSection.tsx       |   6 +-
 components/GraphiQLClient/index.tsx           | 108 +++++++++++-------
 8 files changed, 119 insertions(+), 75 deletions(-)

diff --git a/app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx b/app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx
index eb47393..b4db12a 100644
--- a/app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx
+++ b/app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx
@@ -19,7 +19,7 @@ function GraphQL({ params, searchParams }: Props) {
       : '';
 
   return (
-    <main className="gql flex h-[calc(100vh-6rem)] flex-col p-3">
+    <main className="h-[calc(100vh-6rem)]">
       <ResizableGroup autoSaveId="graphql" direction="vertical">
         <ResizablePanel defaultSizePercentage={50} minSizePercentage={15} id="gql-panel">
           <GraphiQLClient urlinput={url} queryinput={query} headersinput={searchParams || {}} />
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index 0e125d8..929be57 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -8,25 +8,10 @@
   }
 }
 
-::-webkit-scrollbar {
-  width: 15px;
-}
-
 * {
   scrollbar-width: thin;
 }
 
-.gql div[role='separator'] {
-  z-index: 10000;
-}
-
-.gql div[data-panel-id='gql-panel'] {
-  overflow: auto !important;
-}
-
-.gql .graphiql-editor .CodeMirror {
-  position: unset;
-  height: auto;
-  /*overflow: unset;*/
-  /*display: contents;*/
+::-webkit-scrollbar {
+  width: 15px;
 }
diff --git a/components/GraphiQLClient/Documentation/index.tsx b/components/GraphiQLClient/Documentation/index.tsx
index bd93436..d126436 100644
--- a/components/GraphiQLClient/Documentation/index.tsx
+++ b/components/GraphiQLClient/Documentation/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { ResizableHandle, ResizablePanel } from '@/components/Resizable';
 import { DocExplorer, useSchemaContext } from '@graphiql/react';
 import '@graphiql/react/dist/style.css';
 
@@ -8,12 +9,23 @@ const Documentation = () => {
 
   return (
     <>
-      {!schemaContext?.fetchError ? (
-        <div className="graphiql-container">
-          <DocExplorer />
-        </div>
-      ) : (
-        ''
+      {!schemaContext?.fetchError && (
+        <>
+          <ResizableHandle direction="horizontal" />
+          <ResizablePanel
+            id="documentation"
+            order={2}
+            className="flex flex-col"
+            minSizePercentage={20}
+            defaultSizePercentage={40}
+          >
+            <div className="graphiql-container overflow-hidden">
+              <div className="h-full overflow-auto px-4">
+                <DocExplorer />
+              </div>
+            </div>
+          </ResizablePanel>
+        </>
       )}
     </>
   );
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index 99035b9..4f4f702 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -41,7 +41,7 @@ const GraphiqlHeader = ({ headersinput }: GraphiqlHeaderProps) => {
   };
 
   return (
-    <div className="flex flex-col p-4">
+    <div className="flex flex-grow flex-col overflow-auto p-4">
       <form className="flex flex-col gap-2">
         {fields.map((field, index) => (
           <div key={field.id} className="flex gap-2">
diff --git a/components/GraphiQLClient/PrettifyButton.tsx b/components/GraphiQLClient/PrettifyButton.tsx
index 983d84a..72622fe 100644
--- a/components/GraphiQLClient/PrettifyButton.tsx
+++ b/components/GraphiQLClient/PrettifyButton.tsx
@@ -2,6 +2,7 @@ import { usePrettifyEditors, useQueryEditor } from '@graphiql/react';
 import { Button } from '@mui/material';
 import { toast } from 'sonner';
 import { useTranslations } from 'next-intl';
+import { AutoFixHigh } from '@mui/icons-material';
 
 function PrettifyButton() {
   const editor = useQueryEditor();
@@ -19,8 +20,14 @@ function PrettifyButton() {
   };
 
   return (
-    <Button onClick={handlePrettifyClick} variant="outlined">
-      Prettify query
+    <Button
+      onClick={handlePrettifyClick}
+      size="small"
+      variant="outlined"
+      startIcon={<AutoFixHigh />}
+      className="mr-2 h-8"
+    >
+      Prettify
     </Button>
   );
 }
diff --git a/components/GraphiQLClient/UrlSection.tsx b/components/GraphiQLClient/UrlSection.tsx
index 1265c05..deecd8a 100644
--- a/components/GraphiQLClient/UrlSection.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -2,10 +2,12 @@
 
 import { TextField } from '@mui/material';
 import { selectAll, setSdlUrl, setUrl } from '@/redux/features/graphiqlSlice';
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { FormState, UseFormRegister } from 'react-hook-form';
 import { UrlGraphql } from '@/types/url-graphql.types';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
 
 interface UrlFormInterface {
   errors: FormState<UrlGraphql>['errors'];
@@ -14,6 +16,9 @@ interface UrlFormInterface {
 }
 
 const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
+  const tToast = useTranslations('ToastMessages');
+  const urlErrorMessage = useMemo(() => tToast('general.urlNotProvided'), [tToast]);
+  const sdlErrorMessage = useMemo(() => tToast('general.sdlNotProvided'), [tToast]);
   const { url, sdlUrl } = useAppSelector(selectAll);
   const dispatch = useAppDispatch();
 
@@ -21,28 +26,35 @@ const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
     dispatch(setUrl(e.target.value));
   };
 
+  useEffect(() => {
+    if (errors.endpoint?.type === 'required') {
+      toast.error(urlErrorMessage);
+    } else if (errors.sdl?.type === 'required') {
+      toast.error(sdlErrorMessage);
+    }
+  }, [errors.endpoint, errors.sdl, urlErrorMessage, sdlErrorMessage]);
+
   return (
-    <div className="flex flex-col gap-2">
+    <div className="mb-3 flex flex-col gap-3">
       <TextField
         error={!!errors.endpoint}
-        helperText={errors.endpoint ? errors.endpoint.message : ' '}
         id="endpoint"
         label="Endpoint"
         variant="outlined"
         size="small"
         {...register('endpoint', {
+          required: true,
           value: url || urlinput,
           onChange: changeUrl,
         })}
       />
       <TextField
         error={!!errors.sdl}
-        helperText={errors.sdl ? errors.sdl.message : ' '}
         label="SDL"
         variant="outlined"
         value={sdlUrl || url + '?sdl'}
         size="small"
-        {...register('sdl', { onChange: (e) => dispatch(setSdlUrl(e.target.value)) })}
+        {...register('sdl', { required: true, onChange: (e) => dispatch(setSdlUrl(e.target.value)) })}
       />
     </div>
   );
diff --git a/components/GraphiQLClient/VariablesSection.tsx b/components/GraphiQLClient/VariablesSection.tsx
index 45fbd3f..b0a94c5 100644
--- a/components/GraphiQLClient/VariablesSection.tsx
+++ b/components/GraphiQLClient/VariablesSection.tsx
@@ -10,7 +10,11 @@ function VariablesSection() {
   if (editor && state) {
     setTimeout(() => dispatch(setVariables(state[0])));
   }
-  return <VariableEditor />;
+  return (
+    <div className="flex h-32 w-full flex-col">
+      <VariableEditor />
+    </div>
+  );
 }
 
 export default VariablesSection;
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 3b54e66..6740b80 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -1,12 +1,11 @@
 'use client';
 
 import React, { useMemo } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Button, Tab, Tabs } from '@mui/material';
-import { Box } from '@mui/system';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Paper, Tab, Tabs } from '@mui/material';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlSlice';
-import { setResponse } from '@/redux/features/mainSlice';
+import { setIsLoading, setResponse } from '@/redux/features/mainSlice';
 import { useRouter } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
 import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
@@ -26,6 +25,8 @@ import { fetcher } from '@/services/response';
 import { a11yProps } from '@/utils/a11yProps';
 import { getFilteredQuery } from '@/utils/getiFlteredQuery';
 import { setBrowserUrl } from '@/utils/setBrowserUrl';
+import { ResizableGroup, ResizablePanel } from '../Resizable';
+import '@graphiql/react/dist/style.css';
 
 interface GraphiQLClientProps {
   queryinput?: string;
@@ -47,6 +48,7 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
   };
 
   const executeQuery = async () => {
+    dispatch(setIsLoading(true));
     const filteredQuery = getFilteredQuery(query);
     const requestHeaders = Object.fromEntries(headers.map((header) => [header.key, header.value]).reverse());
 
@@ -73,10 +75,13 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
           variables: variables ? JSON.parse(variables) : {},
         }),
       });
+
       dispatch(setResponse(res));
       return res;
     } catch (error) {
       toast.error(error as string);
+    } finally {
+      dispatch(setIsLoading(false));
     }
   };
 
@@ -106,45 +111,64 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
 
   return (
     <GraphiQLProvider fetcher={gqlFetcher} query={!query ? (queryinput ? queryinput.slice(1, -1) : '') : undefined}>
-      <div>
-        <div className="graphiql-container">
-          <section className="px-3 pt-3">
-            <form>
-              <UrlSection urlinput={urlinput} errors={errors} register={register} />
-            </form>
-            <Box>
-              <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-                <Tab label="Query" {...a11yProps(0)} className="h-12" />
-                <Tab label="Headers" {...a11yProps(1)} />
-              </Tabs>
-            </Box>
-            <CustomTabPanel value={value} index={0}>
-              <div>
-                <div className="sticky top-0 z-10 flex justify-center gap-2">
-                  <PrettifyButton />
-                  <Button onClick={handleSubmit(sendQuery)} type="submit" variant="contained">
-                    Send
-                  </Button>
-                </div>
-                <div className="flex" onBlur={updateUrl}>
-                  <QueryEditor onEdit={edit} />
-                  <Documentation />
-                </div>
-              </div>
-              <Accordion className="sticky bottom-0 bg-gray-100 text-orange-600">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1-header">
-                  VARIABLES
-                </AccordionSummary>
-                <AccordionDetails>
-                  <VariablesSection />
-                </AccordionDetails>
-              </Accordion>
-            </CustomTabPanel>
-            <CustomTabPanel value={value} index={1}>
-              <GraphiqlHeader headersinput={headersinput} />
-            </CustomTabPanel>
-          </section>
-        </div>
+      <div className="graphiql-container flex h-full max-h-[70vh] flex-col">
+        <section className="padding-x flex h-full flex-grow flex-col overflow-hidden pt-3">
+          <form>
+            <UrlSection urlinput={urlinput} errors={errors} register={register} />
+          </form>
+          <Paper className="mb-2 flex flex-grow flex-col overflow-hidden" elevation={2}>
+            <ResizableGroup autoSaveId="graphql" direction="horizontal">
+              <ResizablePanel id="query" order={1} className="flex flex-col" minSizePercentage={20}>
+                <Box className="flex items-center justify-between">
+                  <Tabs
+                    value={value}
+                    onChange={handleChange}
+                    scrollButtons
+                    allowScrollButtonsMobile
+                    aria-label="graphiql tabs"
+                    TabIndicatorProps={{
+                      className: 'bg-orange-500 flex px-4 mb-0 h-[2px] bottom-2',
+                    }}
+                  >
+                    <Tab label="Query" {...a11yProps(0)} className="mx-4 min-w-max px-0 py-0 capitalize" />
+                    <Tab label="Headers" {...a11yProps(1)} className="me-4 min-w-max px-0 py-0 capitalize" />
+                  </Tabs>
+                  <Box>
+                    {value === 0 && <PrettifyButton />}
+                    <Button onClick={handleSubmit(sendQuery)} type="submit" variant="contained" className="me-4 h-8">
+                      Send
+                    </Button>
+                  </Box>
+                </Box>
+
+                <CustomTabPanel value={value} index={0} className="flex flex-grow flex-col overflow-hidden">
+                  <div className="flex h-full w-full flex-col" onBlur={updateUrl}>
+                    <QueryEditor onEdit={edit} />
+                  </div>
+                  <Accordion className="m-0 flex flex-col bg-gray-100">
+                    <AccordionSummary
+                      expandIcon={<ExpandMoreIcon />}
+                      aria-controls="panel1-content"
+                      id="panel1-header"
+                      className="m-0 h-8 min-h-0 px-2 py-1"
+                    >
+                      Variables
+                    </AccordionSummary>
+                    <AccordionDetails className="flex h-full flex-grow p-0">
+                      <VariablesSection />
+                    </AccordionDetails>
+                  </Accordion>
+                </CustomTabPanel>
+
+                <CustomTabPanel value={value} index={1} className="flex flex-grow-0 flex-col overflow-hidden">
+                  <GraphiqlHeader headersinput={headersinput} />
+                </CustomTabPanel>
+              </ResizablePanel>
+
+              <Documentation />
+            </ResizableGroup>
+          </Paper>
+        </section>
       </div>
     </GraphiQLProvider>
   );

From 6666f2cfb187f53d7bdd195581aacfe3d4b73866 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 22:56:19 +0400
Subject: [PATCH 149/157] feat: add language support to graphql page

---
 components/GraphiQLClient/Documentation/index.tsx |  2 +-
 components/GraphiQLClient/GraphiqlHeader.tsx      | 13 ++++++++++---
 components/GraphiQLClient/PrettifyButton.tsx      |  3 ++-
 components/GraphiQLClient/UrlSection.tsx          |  5 +++--
 components/GraphiQLClient/index.tsx               |  9 +++++----
 messages/en.json                                  | 15 ++++++++++++++-
 messages/ru.json                                  | 15 ++++++++++++++-
 7 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/components/GraphiQLClient/Documentation/index.tsx b/components/GraphiQLClient/Documentation/index.tsx
index d126436..25a6ef1 100644
--- a/components/GraphiQLClient/Documentation/index.tsx
+++ b/components/GraphiQLClient/Documentation/index.tsx
@@ -16,7 +16,7 @@ const Documentation = () => {
             id="documentation"
             order={2}
             className="flex flex-col"
-            minSizePercentage={20}
+            minSizePercentage={10}
             defaultSizePercentage={40}
           >
             <div className="graphiql-container overflow-hidden">
diff --git a/components/GraphiQLClient/GraphiqlHeader.tsx b/components/GraphiQLClient/GraphiqlHeader.tsx
index 4f4f702..a963fee 100644
--- a/components/GraphiQLClient/GraphiqlHeader.tsx
+++ b/components/GraphiQLClient/GraphiqlHeader.tsx
@@ -6,6 +6,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
 import { GQLHeader, selectAll, setHeaders } from '@/redux/features/graphiqlSlice';
 import { setBrowserUrl } from '@/utils/setBrowserUrl';
+import { useTranslations } from 'next-intl';
 
 interface GraphiqlHeaderProps {
   headersinput: Record<string, string>;
@@ -25,6 +26,7 @@ const GraphiqlHeader = ({ headersinput }: GraphiqlHeaderProps) => {
     name: 'headers',
   });
   const dispatch = useAppDispatch();
+  const t = useTranslations('GraphQLClient');
 
   const onFormSubmit = (headers: { headers: GQLHeader[] }) => {
     dispatch(setHeaders(headers.headers));
@@ -45,8 +47,13 @@ const GraphiqlHeader = ({ headersinput }: GraphiqlHeaderProps) => {
       <form className="flex flex-col gap-2">
         {fields.map((field, index) => (
           <div key={field.id} className="flex gap-2">
-            <TextField label="Header Key" variant="outlined" size="small" {...register(`headers.${index}.key`)} />
-            <TextField label="Header Value" variant="outlined" size="small" {...register(`headers.${index}.value`)} />
+            <TextField label={t('headerKey')} variant="outlined" size="small" {...register(`headers.${index}.key`)} />
+            <TextField
+              label={t('headerValue')}
+              variant="outlined"
+              size="small"
+              {...register(`headers.${index}.value`)}
+            />
             {fields.length > 1 ? (
               <IconButton aria-label="delete" onClick={() => removeField(index)}>
                 <DeleteIcon />
@@ -63,7 +70,7 @@ const GraphiqlHeader = ({ headersinput }: GraphiqlHeaderProps) => {
             disabled={Object.keys(formState.dirtyFields).length === 0}
             onClick={handleSubmit(onFormSubmit)}
           >
-            Set Headers
+            {t('setHeaders')}
           </Button>
         </div>
       </form>
diff --git a/components/GraphiQLClient/PrettifyButton.tsx b/components/GraphiQLClient/PrettifyButton.tsx
index 72622fe..e8894bd 100644
--- a/components/GraphiQLClient/PrettifyButton.tsx
+++ b/components/GraphiQLClient/PrettifyButton.tsx
@@ -7,6 +7,7 @@ import { AutoFixHigh } from '@mui/icons-material';
 function PrettifyButton() {
   const editor = useQueryEditor();
   const prettifyEditors = usePrettifyEditors();
+  const t = useTranslations('GraphQLClient');
   const tToast = useTranslations('ToastMessages');
 
   const handlePrettifyClick = () => {
@@ -27,7 +28,7 @@ function PrettifyButton() {
       startIcon={<AutoFixHigh />}
       className="mr-2 h-8"
     >
-      Prettify
+      {t('prettify')}
     </Button>
   );
 }
diff --git a/components/GraphiQLClient/UrlSection.tsx b/components/GraphiQLClient/UrlSection.tsx
index deecd8a..80e25e1 100644
--- a/components/GraphiQLClient/UrlSection.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -16,6 +16,7 @@ interface UrlFormInterface {
 }
 
 const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
+  const t = useTranslations('GraphQLClient');
   const tToast = useTranslations('ToastMessages');
   const urlErrorMessage = useMemo(() => tToast('general.urlNotProvided'), [tToast]);
   const sdlErrorMessage = useMemo(() => tToast('general.sdlNotProvided'), [tToast]);
@@ -39,7 +40,7 @@ const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
       <TextField
         error={!!errors.endpoint}
         id="endpoint"
-        label="Endpoint"
+        label={t('endpoint')}
         variant="outlined"
         size="small"
         {...register('endpoint', {
@@ -50,7 +51,7 @@ const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
       />
       <TextField
         error={!!errors.sdl}
-        label="SDL"
+        label={t('sdl')}
         variant="outlined"
         value={sdlUrl || url + '?sdl'}
         size="small"
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 6740b80..e925dba 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -41,6 +41,7 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
   const router = useRouter();
   const dispatch = useAppDispatch();
   setTimeout(() => dispatch(setUrl(urlinput || url)));
+  const t = useTranslations('GraphQLClient');
   const tToast = useTranslations('ToastMessages');
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -130,13 +131,13 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
                       className: 'bg-orange-500 flex px-4 mb-0 h-[2px] bottom-2',
                     }}
                   >
-                    <Tab label="Query" {...a11yProps(0)} className="mx-4 min-w-max px-0 py-0 capitalize" />
-                    <Tab label="Headers" {...a11yProps(1)} className="me-4 min-w-max px-0 py-0 capitalize" />
+                    <Tab label={t('query')} {...a11yProps(0)} className="mx-4 min-w-max px-0 py-0 capitalize" />
+                    <Tab label={t('headers')} {...a11yProps(1)} className="me-4 min-w-max px-0 py-0 capitalize" />
                   </Tabs>
                   <Box>
                     {value === 0 && <PrettifyButton />}
                     <Button onClick={handleSubmit(sendQuery)} type="submit" variant="contained" className="me-4 h-8">
-                      Send
+                      {t('send')}
                     </Button>
                   </Box>
                 </Box>
@@ -152,7 +153,7 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
                       id="panel1-header"
                       className="m-0 h-8 min-h-0 px-2 py-1"
                     >
-                      Variables
+                      {t('variables')}
                     </AccordionSummary>
                     <AccordionDetails className="flex h-full flex-grow p-0">
                       <VariablesSection />
diff --git a/messages/en.json b/messages/en.json
index 1418e60..ce00f1a 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -17,7 +17,8 @@
     },
     "general": {
       "urlNotProvided": "URL not provided. Please provide endpoint URL.",
-      "prettifyError": "Failed to prettify query."
+      "prettifyError": "Failed to prettify query.",
+      "sdlNotProvided": "SDL not provided. Please provide SDL URL."
     }
   },
   "Header": {
@@ -111,5 +112,17 @@
     "title": "Our Team",
     "teamLead": "Team Lead",
     "developer": "Developer"
+  },
+  "GraphQLClient": {
+    "query": "Query",
+    "headers": "Headers",
+    "variables": "Variables",
+    "send": "Send",
+    "prettify": "Prettify",
+    "setHeaders": "Set Headers",
+    "headerKey": "Header Key",
+    "headerValue": "Header Value",
+    "endpoint": "Endpoint",
+    "sdl": "SDL"
   }
 }
diff --git a/messages/ru.json b/messages/ru.json
index 5854506..e1edb7e 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -17,7 +17,8 @@
     },
     "general": {
       "urlNotProvided": "URL не указан. Пожалуйста, укажите URL конечной точки.",
-      "prettifyError": "Не удалось отформатировать запрос."
+      "prettifyError": "Не удалось отформатировать запрос.",
+      "sdlNotProvided": "SDL не указан. Пожалуйста, укажите URL для SDL."
     }
   },
   "Header": {
@@ -111,5 +112,17 @@
     "title": "Наша Команда",
     "teamLead": "Руководитель команды",
     "developer": "Разработчик"
+  },
+  "GraphQLClient": {
+    "query": "Запрос",
+    "headers": "Заголовки",
+    "variables": "Переменные",
+    "send": "Отправить",
+    "prettify": "Форматировать",
+    "setHeaders": "Установить заголовки",
+    "headerKey": "Ключ заголовка",
+    "headerValue": "Значение заголовка",
+    "endpoint": "Конечная точка",
+    "sdl": "SDL"
   }
 }

From 33d8c690d296935ff983d4ccfcb342c10f3b78af Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 22:57:36 +0400
Subject: [PATCH 150/157] refactor: add  show-hidden button translate

---
 components/RestClient/index.tsx | 2 +-
 messages/en.json                | 4 +++-
 messages/ru.json                | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index 2e5652f..a32ae40 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -287,7 +287,7 @@ function RestForm() {
                     startIcon={showVariables ? <VisibilityOff /> : <Visibility />}
                     onClick={handleShowHideVariables}
                   >
-                    {showVariables ? 'hide' : 'show'}
+                    {showVariables ? t('hide') : t('show')}
                   </Button>
                   <Button
                     variant="contained"
diff --git a/messages/en.json b/messages/en.json
index ce00f1a..1d21005 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -69,7 +69,9 @@
     "queryParams": "Query Params",
     "prettify": "Prettify",
     "json": "JSON",
-    "text": "Text"
+    "text": "Text",
+    "hide": "Hide",
+    "show": "Show"
   },
   "Response": {
     "response": "Response",
diff --git a/messages/ru.json b/messages/ru.json
index e1edb7e..b77a196 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -69,7 +69,9 @@
     "queryParams": "Параметры запроса",
     "prettify": "Форматировать",
     "json": "JSON",
-    "text": "Текст"
+    "text": "Текст",
+    "hide": "Скрыть",
+    "show": "Показать"
   },
   "Response": {
     "response": "Ответ",

From 67ce6796fb4c3bca8c7648e776824d3f0ee753c9 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Sun, 15 Sep 2024 23:24:33 +0400
Subject: [PATCH 151/157] refactor: changes monaco editor theme to light

---
 components/Response/ResponseBody.tsx | 1 -
 components/RestClient/index.tsx      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/components/Response/ResponseBody.tsx b/components/Response/ResponseBody.tsx
index 1922399..a83b502 100644
--- a/components/Response/ResponseBody.tsx
+++ b/components/Response/ResponseBody.tsx
@@ -36,7 +36,6 @@ function ResponseBody({ activeTab }: PropTypes) {
       <CustomTabPanel value={activeTab} index={0} className="flex flex-grow flex-col overflow-hidden">
         <Box className="flex flex-grow">
           <Editor
-            theme="vs-dark"
             defaultLanguage={editorLanguage}
             value={data}
             loading={null}
diff --git a/components/RestClient/index.tsx b/components/RestClient/index.tsx
index a32ae40..80035fd 100644
--- a/components/RestClient/index.tsx
+++ b/components/RestClient/index.tsx
@@ -339,7 +339,6 @@ function RestForm() {
                   render={({ field }) => (
                     <Editor
                       language={bodyFormat === 'json' ? 'json' : 'plaintext'}
-                      theme="vs-dark"
                       value={bodyValue}
                       onChange={(value) => field.onChange(value)}
                       onMount={(editor) => {

From b62f0547e6d157344c39610f3014100f80bcedb6 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 21:48:08 +0200
Subject: [PATCH 152/157] test: add firebase test

---
 components/Header/header.test.tsx | 40 ++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/components/Header/header.test.tsx b/components/Header/header.test.tsx
index d4fd7f0..07bdbcb 100644
--- a/components/Header/header.test.tsx
+++ b/components/Header/header.test.tsx
@@ -30,9 +30,43 @@ vi.mock('react-firebase-hooks/auth', () => ({
   useAuthState: vi.fn(),
 }));
 
-vi.mock('@/firebase', () => ({
-  auth: {},
-  logout: vi.fn().mockResolvedValue({}),
+vi.mock('@/firebase', () => {
+  const original = vi.importActual<typeof import('@/firebase')>('@/firebase');
+  return {
+    ...original,
+    auth: {},
+    logout: vi.fn().mockResolvedValue({}),
+  };
+});
+
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({
+    currentUser: {
+      getIdTokenResult: vi.fn(() =>
+        Promise.resolve({
+          authTime: '2023-01-01T00:00:00Z',
+          issuedAtTime: '2023-01-01T00:00:00Z',
+          expirationTime: new Date(Date.now() + 3600 * 1000).toISOString(),
+        }),
+      ),
+    },
+    onIdTokenChanged: vi.fn((callback) => {
+      callback({
+        getIdTokenResult: vi.fn(() =>
+          Promise.resolve({
+            authTime: '2023-01-01T00:00:00Z',
+            issuedAtTime: '2023-01-01T00:00:00Z',
+            expirationTime: new Date(Date.now() + 3600 * 1000).toISOString(),
+          }),
+        ),
+      });
+    }),
+  })),
+  signOut: vi.fn(() => Promise.resolve()),
 }));
 
 vi.mock('sonner', () => ({

From 360696f151d3f6a712c5ef27331bed6fe88b41c9 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 23:04:26 +0200
Subject: [PATCH 153/157] fix: fix getting data from url

---
 components/GraphiQLClient/UrlSection.tsx | 18 ++++++++++++------
 components/GraphiQLClient/index.tsx      | 20 +++++++++++++++-----
 redux/features/graphiqlSlice.ts          |  7 ++++++-
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/components/GraphiQLClient/UrlSection.tsx b/components/GraphiQLClient/UrlSection.tsx
index 80e25e1..1103c55 100644
--- a/components/GraphiQLClient/UrlSection.tsx
+++ b/components/GraphiQLClient/UrlSection.tsx
@@ -8,23 +8,26 @@ import { FormState, UseFormRegister } from 'react-hook-form';
 import { UrlGraphql } from '@/types/url-graphql.types';
 import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
+import { setBrowserUrl } from '@/utils/setBrowserUrl';
+import { useRouter } from '@/i18n/routing';
 
 interface UrlFormInterface {
   errors: FormState<UrlGraphql>['errors'];
   register: UseFormRegister<UrlGraphql>;
-  urlinput?: string;
 }
 
-const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
+const UrlSection = ({ register, errors }: UrlFormInterface) => {
+  const router = useRouter();
   const t = useTranslations('GraphQLClient');
   const tToast = useTranslations('ToastMessages');
   const urlErrorMessage = useMemo(() => tToast('general.urlNotProvided'), [tToast]);
   const sdlErrorMessage = useMemo(() => tToast('general.sdlNotProvided'), [tToast]);
-  const { url, sdlUrl } = useAppSelector(selectAll);
+  const { url, sdlUrl, headers, query } = useAppSelector(selectAll);
   const dispatch = useAppDispatch();
 
   const changeUrl = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(setUrl(e.target.value));
+    router.push(setBrowserUrl(url, query, headers));
   };
 
   useEffect(() => {
@@ -45,8 +48,8 @@ const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
         size="small"
         {...register('endpoint', {
           required: true,
-          value: url || urlinput,
-          onChange: changeUrl,
+          value: url,
+          onBlur: changeUrl,
         })}
       />
       <TextField
@@ -55,7 +58,10 @@ const UrlSection = ({ register, errors, urlinput }: UrlFormInterface) => {
         variant="outlined"
         value={sdlUrl || url + '?sdl'}
         size="small"
-        {...register('sdl', { required: true, onChange: (e) => dispatch(setSdlUrl(e.target.value)) })}
+        {...register('sdl', {
+          required: true,
+          onChange: (e) => dispatch(setSdlUrl(e.target.value)),
+        })}
       />
     </div>
   );
diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index e925dba..01e68ab 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Paper, Tab, Tabs } from '@mui/material';
 import CustomTabPanel from '../UI/CustomTabPanel';
 import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectAll, setQuery, setUrl } from '@/redux/features/graphiqlSlice';
+import { selectAll, setAppLoaded, setQuery, setUrl } from '@/redux/features/graphiqlSlice';
 import { setIsLoading, setResponse } from '@/redux/features/mainSlice';
 import { useRouter } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
@@ -35,15 +35,25 @@ interface GraphiQLClientProps {
 }
 
 const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientProps) => {
-  const { query, variables, url, headers } = useAppSelector(selectAll);
+  const { query, variables, url, headers, appLoaded } = useAppSelector(selectAll);
   const gqlFetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
   const [value, setValue] = React.useState(0);
   const router = useRouter();
   const dispatch = useAppDispatch();
-  setTimeout(() => dispatch(setUrl(urlinput || url)));
+
   const t = useTranslations('GraphQLClient');
   const tToast = useTranslations('ToastMessages');
 
+  if (!appLoaded) {
+    if (urlinput) {
+      dispatch(setUrl(urlinput));
+    }
+    if (queryinput) {
+      dispatch(setQuery(queryinput.slice(1, -1)));
+    }
+    dispatch(setAppLoaded());
+  }
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
@@ -111,11 +121,11 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
   });
 
   return (
-    <GraphiQLProvider fetcher={gqlFetcher} query={!query ? (queryinput ? queryinput.slice(1, -1) : '') : undefined}>
+    <GraphiQLProvider fetcher={gqlFetcher} query={query ?? ''}>
       <div className="graphiql-container flex h-full max-h-[70vh] flex-col">
         <section className="padding-x flex h-full flex-grow flex-col overflow-hidden pt-3">
           <form>
-            <UrlSection urlinput={urlinput} errors={errors} register={register} />
+            <UrlSection errors={errors} register={register} />
           </form>
           <Paper className="mb-2 flex flex-grow flex-col overflow-hidden" elevation={2}>
             <ResizableGroup autoSaveId="graphql" direction="horizontal">
diff --git a/redux/features/graphiqlSlice.ts b/redux/features/graphiqlSlice.ts
index c382f0f..a7fde52 100644
--- a/redux/features/graphiqlSlice.ts
+++ b/redux/features/graphiqlSlice.ts
@@ -7,6 +7,7 @@ export interface GraphiqlSliceState {
   url: string;
   sdlUrl: string;
   response: string;
+  appLoaded: boolean;
 }
 
 export interface GQLHeader {
@@ -21,6 +22,7 @@ const initialState: GraphiqlSliceState = {
   url: '',
   sdlUrl: '',
   response: '',
+  appLoaded: false,
 };
 
 export const graphiqlSlice = createSlice({
@@ -42,6 +44,9 @@ export const graphiqlSlice = createSlice({
     setSdlUrl: create.reducer((state, action: PayloadAction<string>) => {
       state.sdlUrl = action.payload;
     }),
+    setAppLoaded: create.reducer((state) => {
+      state.appLoaded = true;
+    }),
   }),
 
   selectors: {
@@ -50,6 +55,6 @@ export const graphiqlSlice = createSlice({
   },
 });
 
-export const { setQuery, setVariables, setHeaders, setUrl, setSdlUrl } = graphiqlSlice.actions;
+export const { setQuery, setVariables, setHeaders, setUrl, setSdlUrl, setAppLoaded } = graphiqlSlice.actions;
 
 export const { selectAll, selectHeaders } = graphiqlSlice.selectors;

From b9fdadc88f455ae44a5fa92c280f387f7d26d1a2 Mon Sep 17 00:00:00 2001
From: Shadman <shadman.alizada@gmail.com>
Date: Mon, 16 Sep 2024 01:06:43 +0400
Subject: [PATCH 154/157] feat: added videos to features section

---
 app/[locale]/globals.css            |  2 +-
 components/Home/FeaturesSection.tsx | 34 +++++++++++++++++++++--------
 components/Response/ErrorState.tsx  |  4 ++--
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index c52b8be..8d8bf82 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -22,5 +22,5 @@
 }
 
 .custom-button:hover {
-  background-color: chocolate;
+  background-color: rgba(0, 81, 255, 0.63);
 }
diff --git a/components/Home/FeaturesSection.tsx b/components/Home/FeaturesSection.tsx
index 90714c4..8b3277c 100644
--- a/components/Home/FeaturesSection.tsx
+++ b/components/Home/FeaturesSection.tsx
@@ -1,6 +1,4 @@
 import { Box, Container } from '@mui/material';
-import Image from 'next/image';
-import member from '@/public/assets/svg/illustration-hit-send.svg';
 import { useTranslations } from 'next-intl';
 
 function FeaturesSection() {
@@ -9,25 +7,43 @@ function FeaturesSection() {
   return (
     <Box component="section" className="mb-20">
       <Container maxWidth="lg">
-        <div className="flex flex-col gap-10">
+        <div className="flex flex-col gap-20">
           <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
             <h3 className="text-lg font-bold text-blue-500 max-sm:text-center sm:text-xl">{t('feature1')}</h3>
-            <div className="h-full w-full">
-              <Image src={member} alt={t('feature1')} className="h-auto w-full" priority />
+            <div className="h-full w-full overflow-hidden rounded-lg shadow-2xl">
+              <video width="100%" height="100%" preload="auto" autoPlay loop>
+                <source
+                  src="https://res.cloudinary.com/dtgiq47xj/video/upload/v1726433444/rs-final/rest_t4oht0.webm"
+                  type="video/webm"
+                />
+                Your browser does not support the video tag.
+              </video>
             </div>
           </div>
 
           <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
-            <div className="h-full w-full max-sm:order-2">
-              <Image src={member} alt={t('feature2')} className="h-auto w-full" priority />
+            <div className="h-full w-full overflow-hidden rounded-lg shadow-2xl max-sm:order-2">
+              <video width="100%" height="100%" preload="auto" autoPlay loop>
+                <source
+                  src="https://res.cloudinary.com/dtgiq47xj/video/upload/v1726433574/rs-final/graph_vznyaz.webm"
+                  type="video/webm"
+                />
+                Your browser does not support the video tag.
+              </video>
             </div>
             <h3 className="text-lg font-bold text-blue-500 max-sm:text-center sm:text-xl">{t('feature2')}</h3>
           </div>
 
           <div className="grid h-[350] items-center justify-center gap-12 sm:grid-cols-2">
             <h3 className="text-lg font-bold text-blue-500 max-sm:text-center sm:text-xl">{t('feature3')}</h3>
-            <div className="h-full w-full">
-              <Image src={member} alt={t('feature3')} className="h-auto w-full" priority />
+            <div className="h-full w-full overflow-hidden rounded-lg shadow-2xl">
+              <video width="100%" height="100%" preload="auto" autoPlay loop>
+                <source
+                  src="https://res.cloudinary.com/dtgiq47xj/video/upload/v1726433591/rs-final/history_d4xgud.webm"
+                  type="video/webm"
+                />
+                Your browser does not support the video tag.
+              </video>
             </div>
           </div>
         </div>
diff --git a/components/Response/ErrorState.tsx b/components/Response/ErrorState.tsx
index fe5b9f2..5458b5b 100644
--- a/components/Response/ErrorState.tsx
+++ b/components/Response/ErrorState.tsx
@@ -19,8 +19,8 @@ function ErrorState() {
           <Image
             src={failedFetch}
             alt={t('couldNotSendRequest')}
-            width={140}
-            height={140}
+            width={120}
+            height={120}
             className="mb-3 h-auto w-auto object-contain"
             priority
           />

From f192dec39254b14a6af063f661e206cec1e0b633 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Sun, 15 Sep 2024 23:42:30 +0200
Subject: [PATCH 155/157] fix: fix documentation

---
 components/GraphiQLClient/index.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/GraphiQLClient/index.tsx b/components/GraphiQLClient/index.tsx
index 01e68ab..181903d 100644
--- a/components/GraphiQLClient/index.tsx
+++ b/components/GraphiQLClient/index.tsx
@@ -35,12 +35,17 @@ interface GraphiQLClientProps {
 }
 
 const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientProps) => {
-  const { query, variables, url, headers, appLoaded } = useAppSelector(selectAll);
+  const { query, variables, url, headers, appLoaded, sdlUrl } = useAppSelector(selectAll);
   const gqlFetcher = useMemo(() => createGraphiQLFetcher({ url }), [url]);
   const [value, setValue] = React.useState(0);
   const router = useRouter();
   const dispatch = useAppDispatch();
 
+  const docFetcher = useMemo(
+    () => createGraphiQLFetcher({ url: sdlUrl.includes('?sdl') ? sdlUrl.split('?sdl')[0] : sdlUrl }),
+    [sdlUrl],
+  );
+
   const t = useTranslations('GraphQLClient');
   const tToast = useTranslations('ToastMessages');
 
@@ -175,8 +180,14 @@ const GraphiQLClient = ({ queryinput, headersinput, urlinput }: GraphiQLClientPr
                   <GraphiqlHeader headersinput={headersinput} />
                 </CustomTabPanel>
               </ResizablePanel>
-
-              <Documentation />
+              x
+              {sdlUrl ? (
+                <GraphiQLProvider fetcher={docFetcher}>
+                  <Documentation />
+                </GraphiQLProvider>
+              ) : (
+                <Documentation />
+              )}
             </ResizableGroup>
           </Paper>
         </section>

From dc7e79d9e667930aa85ec60420c6ef00a7a5653d Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Mon, 16 Sep 2024 00:06:08 +0200
Subject: [PATCH 156/157] fix: fix test

---
 .../Documentation/documentation.test.tsx      |  6 ++++++
 components/GraphiQLClient/prettify.test.tsx   |  4 ++--
 components/GraphiQLClient/url.test.tsx        | 19 +++++++++++++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/components/GraphiQLClient/Documentation/documentation.test.tsx b/components/GraphiQLClient/Documentation/documentation.test.tsx
index e721462..6d16964 100644
--- a/components/GraphiQLClient/Documentation/documentation.test.tsx
+++ b/components/GraphiQLClient/Documentation/documentation.test.tsx
@@ -4,6 +4,12 @@ import Documentation from './index';
 import { customRender } from '../../../__test__/test-utils';
 import '@testing-library/jest-dom';
 
+vi.mock('@/components/Resizable', () => ({
+  __esModule: true,
+  ResizableHandle: () => <div>ResizableHandle Mock</div>,
+  ResizablePanel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
 vi.mock('@graphiql/react', () => ({
   DocExplorer: () => <div>DocExplorer Mock</div>,
   useSchemaContext: () => ({
diff --git a/components/GraphiQLClient/prettify.test.tsx b/components/GraphiQLClient/prettify.test.tsx
index e6e8180..d3907f5 100644
--- a/components/GraphiQLClient/prettify.test.tsx
+++ b/components/GraphiQLClient/prettify.test.tsx
@@ -34,7 +34,7 @@ describe('PrettifyButton Component', () => {
 
     customRender(<PrettifyButton />);
 
-    fireEvent.click(screen.getByText('Prettify query'));
+    fireEvent.click(screen.getByText('prettify'));
 
     expect(mockPrettifyEditors).toHaveBeenCalled();
   });
@@ -49,7 +49,7 @@ describe('PrettifyButton Component', () => {
 
     customRender(<PrettifyButton />);
 
-    fireEvent.click(screen.getByText('Prettify query'));
+    fireEvent.click(screen.getByText('prettify'));
 
     expect(vi.mocked(toast.error)).toHaveBeenCalledWith('general.prettifyError');
   });
diff --git a/components/GraphiQLClient/url.test.tsx b/components/GraphiQLClient/url.test.tsx
index 8c606fa..b624ae9 100644
--- a/components/GraphiQLClient/url.test.tsx
+++ b/components/GraphiQLClient/url.test.tsx
@@ -7,6 +7,21 @@ import { UrlGraphql } from '@/types/url-graphql.types';
 import { graphiqlSlice } from '@/redux/features/graphiqlSlice';
 import UrlSection from '@/components/GraphiQLClient/UrlSection';
 
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: unknown) => key,
+}));
+
+vi.mock('@/i18n/routing', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}));
 const store = configureStore({
   reducer: {
     graphiql: graphiqlSlice.reducer,
@@ -28,7 +43,7 @@ describe('UrlSection Component', () => {
       </Provider>,
     );
 
-    expect(screen.getByText('Invalid endpoint')).toBeInTheDocument();
-    expect(screen.getByText('Invalid SDL URL')).toBeInTheDocument();
+    expect(screen.getByLabelText('endpoint')).toBeInTheDocument();
+    expect(screen.getByLabelText('sdl')).toBeInTheDocument();
   });
 });

From 9fa16da2f719c4b46e13a7d4e3d06273d0be6572 Mon Sep 17 00:00:00 2001
From: Volha Melayok <neiwra@gmail.com>
Date: Mon, 16 Sep 2024 00:16:24 +0200
Subject: [PATCH 157/157] refactor: fix config

---
 .eslintrc.cjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4c321b5..8e99c02 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -34,7 +34,6 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
-    'no-console': 'warn',
     'prettier/prettier': [
       'error',
       {