Refactoring & Optimization

frontend/package.json

@@ -8,14 +8,6 @@
     "start": "vinxi start",
     "serve": "vinxi build && vinxi start"
   },
-  "devDependencies": {
-    "openapi-typescript": "^7.3.0",
-    "picocolors": "^1.0.1",
-    "postcss-mixins": "^10.0.1",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "typescript": "^5.5.4"
-  },
   "dependencies": {
     "@corvu/otp-field": "^0.1.2",
     "@kobalte/core": "^0.13.4",
@@ -42,7 +34,16 @@
     "tailwindcss": "^3.4.7",
     "vinxi": "^0.4.1"
   },
+  "devDependencies": {
+    "openapi-typescript": "^7.3.0",
+    "picocolors": "^1.0.1",
+    "postcss-mixins": "^10.0.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "typescript": "^5.5.4"
+  },
   "engines": {
-    "node": ">=18"
+    "node": ">=18",
+    "packageManager": "pnpm@9.7.0"
   }
 }

frontend/src/app.tsx

@@ -4,8 +4,8 @@ import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Toaster } from "solid-sonner";
-import { CurrentUserProvider } from "~/lib/auth";
-import { ColorSchemeProvider } from "~/lib/color-scheme";
+import { CurrentUserProvider } from "~/lib/api/users/me";
+import { ThemeProvider } from "~/lib/theme";
 import { I18nProvider } from "~/lib/i18n";
 import { PreferencesProvider } from "~/lib/preferences";
 import "./app.css";
@@ -19,13 +19,13 @@ export default function App() {
             <CurrentUserProvider>
               <PreferencesProvider>
                 <I18nProvider>
-                  <ColorSchemeProvider>
+                  <ThemeProvider>
                     {props.children}
 
                     <Portal>
                       <Toaster richColors />
                     </Portal>
-                  </ColorSchemeProvider>
+                  </ThemeProvider>
                 </I18nProvider>
               </PreferencesProvider>
             </CurrentUserProvider>

frontend/src/components/index.tsx

@@ -1,2 +1 @@
-export * from "./brand";
 export * from "./ui";

frontend/src/components/steps/new-password.tsx

@@ -1,9 +1,9 @@
 import { createForm, minLength, required } from "@modular-forms/solid";
 import { useAction } from "@solidjs/router";
 import { toast } from "solid-sonner";
-import { Button, FormControl, Heading, Stepper, Sticker } from "~/components";
+import { Button, FormControl, Heading, Stepper, LottiePresenter } from "~/components";
 import { Verifier } from "~/components/steps/verification";
-import { resetPassword } from "~/lib/auth";
+import { resetPassword } from "~/lib/api/auth";
 import { useI18n } from "~/lib/i18n";
 
 export type NewPasswordForm = {
@@ -37,7 +37,7 @@ export function NewPasswordStep() {
 
   return (
     <div class="flex w-full flex-col items-center justify-center gap-6 text-center">
-      <Sticker path="tgs/key.json" class="size-24" />
+      <LottiePresenter path="tgs/key.json" class="size-24" />
 
       <hgroup class="space-y-4">
         <Heading>{i18n.t.steps.resetPassword.password.heading()}</Heading>

frontend/src/components/steps/reset-password/email.tsx

@@ -1,16 +1,16 @@
 import { A } from "@solidjs/router";
-import { Button, Heading, Separator, Sticker } from "~/components";
-import { useI18n } from "~/lib/i18n";
-import { Verifier } from "../verification";
 import { Icon } from "solid-heroicons";
 import { arrowLeft } from "solid-heroicons/solid-mini";
+import { Button, Heading, Separator, LottiePresenter } from "~/components";
+import { useI18n } from "~/lib/i18n";
+import { Verifier } from "../verification";
 
 export const ResetPasswordEmailStep = () => {
   const i18n = useI18n();
 
   return (
     <div class="flex flex-col items-center justify-center">
-      <Sticker path="tgs/id.json" class="mb-4 size-24" />
+      <LottiePresenter path="tgs/envelope.json" class="mb-4 size-24" />
 
       <Heading>{i18n.t.routes.login.form.fields.password.forgot()}</Heading>
 

frontend/src/components/steps/verification/email.tsx

@@ -1,7 +1,7 @@
 import { createForm, email, required } from "@modular-forms/solid";
 import { toast } from "solid-sonner";
 import { Button, FormControl, Stepper } from "~/components";
-import { $userExists } from "~/lib/auth";
+import { $getUserExists } from "~/lib/api/users";
 import { useI18n } from "~/lib/i18n";
 import { Verifier } from ".";
 
@@ -19,7 +19,7 @@ export function EmailStep() {
       return;
     }
 
-    const exists = await $userExists(data.email);
+    const exists = await $getUserExists(data.email);
     if (!exists) {
       toast.error(i18n.t.steps.verification.email.notExists());
       return;

frontend/src/components/steps/verification/otp.tsx

@@ -7,10 +7,10 @@ import { paperAirplane } from "solid-heroicons/solid-mini";
 
 import { toast } from "solid-sonner";
 
-import { Button, Heading, Motion, OtpField, Sticker, TextField, Stepper } from "~/components";
+import { Button, Heading, Motion, OtpField, TextField, LottiePresenter, Stepper } from "~/components";
 import { useVerification } from "~/components/steps/verification/provider";
 
-import { $requestVerification, $verifyCode } from "~/lib/auth";
+import { $sendOtp, $isCorrectOtp } from "~/lib/api/otp";
 import { useI18n } from "~/lib/i18n";
 
 const OTP_LENGTH = 6;
@@ -20,7 +20,7 @@ type OtpForm = {
 };
 
 // TODO: extract add props.onComplete (after success verification) for more flexibility
-// Also more `stepper.moveForward();` to password reset stepper.
+// Also move `stepper.moveForward();` to password reset stepper.
 export const OtpStep = () => {
   const i18n = useI18n();
   const stepper = Stepper.useContext();
@@ -30,12 +30,12 @@ export const OtpStep = () => {
   const [otpInputRef, setOtpInputRef] = createSignal<HTMLInputElement>();
 
   const email = () => context.store.email;
-  const [resourse, { refetch }] = createResource(email, $requestVerification);
+  const [resourse, { refetch }] = createResource(email, $sendOtp);
 
   const onSubmit = async (form: OtpForm) => {
     const otp = Number(form.otp);
 
-    if (!(await $verifyCode({ email: email(), code: otp }))) {
+    if (!(await $isCorrectOtp({ email: email(), code: otp }))) {
       toast.error(i18n.t.steps.verification.otp.incorrect());
 
       reset();
@@ -59,7 +59,7 @@ export const OtpStep = () => {
 
   return (
     <Motion class="flex w-full flex-col items-center justify-center gap-6 text-center">
-      <Sticker path="tgs/mailbox.json" class="size-24" />
+      <LottiePresenter path="tgs/mailbox.json" class="size-24" />
 
       <hgroup class="w-full space-y-4">
         <Heading>{i18n.t.steps.verification.otp.heading()}</Heading>

frontend/src/components/ui/index.tsx

@@ -9,11 +9,9 @@ export * from "./motion";
 export * from "./otp-field";
 export * from "./select";
 export * from "./separator";
-export * from "./slogan";
+export * from "./sidebar";
 export * from "./stepper";
-export * from "./sticker";
 export * from "./text-field";
+export * from "./tgs";
 export * from "./theme";
 export * from "./title";
-export * from "./typer";
-

frontend/src/components/ui/locale-switcher.tsx

@@ -10,7 +10,6 @@ export const LocaleSwitcher: Component = () => {
 
   const languageNames = () => new Intl.DisplayNames([i18n.locale()], { type: "language" });
   const getNativeLanguageName = (locale: Locale) => new Intl.DisplayNames([locale], { type: "language" }).of(locale);
-  const getFlagClass = (locale: Locale) => `fi fi-${SUPPORTED_CULTURES[locale].toLowerCase()}`;
 
   return (
     <Select
@@ -24,7 +23,6 @@ export const LocaleSwitcher: Component = () => {
       itemComponent={(props) => (
         <Select.Item item={props.item}>
           <Select.ItemLabel class="flex items-center gap-1.5 capitalize">
-            <span class={`${getFlagClass(props.item.rawValue)} rounded-sm ring-1 ring-bg-tertiary`} />
             <span>{getNativeLanguageName(props.item.rawValue)}</span>
             <span>—</span>
             <span class="text-fg-muted">{languageNames().of(props.item.rawValue)}</span>

frontend/src/components/brand/sidebar/root.tsx → frontend/src/components/ui/sidebar/root.tsx

@@ -3,7 +3,7 @@ import { Component, Show } from "solid-js";
 import { bookmark, cog, folder, home, userCircle } from "solid-heroicons/solid-mini";
 
 import { formatResourceURL } from "~/lib/api/uploads";
-import { useCurrentUser } from "~/lib/auth";
+import { useCurrentUser } from "~/lib/api/users/me";
 
 import { SidebarItem } from "./item";
 import { useI18n } from "~/lib/i18n";

frontend/src/components/ui/tgs/expositor.tsx

@@ -0,0 +1,51 @@
+import { createEffect, createSignal, on, onCleanup } from "solid-js";
+
+import { createEventListener } from "@solid-primitives/event-listener";
+import { createVisibilityObserver } from "@solid-primitives/intersection-observer";
+
+import type { AnimationConfigWithPath, AnimationItem, RendererType } from "lottie-web";
+import Lottie from "lottie-web/build/player/lottie_light";
+
+export type LottieExpositorProps<R extends RendererType = "svg"> = Omit<AnimationConfigWithPath<R>, "container">;
+
+export const LottieExpositor = (props: LottieExpositorProps) => {
+  const [containerRef, setContainerRef] = createSignal<Element>();
+  const [animationItem, setAnimationItem] = createSignal<AnimationItem>();
+
+  const useVisibilityObserver = createVisibilityObserver();
+  const isContainerVisible = useVisibilityObserver(containerRef);
+
+  createEffect(
+    on(containerRef, () => {
+      const container = containerRef();
+      if (!container) return;
+
+      const animation = Lottie.loadAnimation({ container: container, ...props });
+      animationItem()?.destroy();
+      setAnimationItem(animation);
+    }),
+  );
+
+  createEffect(() => {
+    const animation = animationItem();
+    if (!animation) return;
+
+    createEventListener(window, "blur", () => animation.pause());
+    createEventListener(window, "focus", () => animation.play());
+  });
+
+  createEffect(() => {
+    const animation = animationItem();
+    if (!animation) return;
+
+    isContainerVisible() ? animation.play() : animation.pause();
+  });
+
+  onCleanup(() => {
+    animationItem()?.destroy();
+  });
+
+  return <span ref={setContainerRef} />;
+};
+
+export default LottieExpositor;

frontend/src/components/ui/tgs/index.tsx

@@ -0,0 +1 @@
+export * from "./presenter";