feature: improve ui

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Super Quizz</title>
+    <title>...</title>
     <link
       rel="stylesheet"
       href="/assets/style/bootswatch/quartz.min.css"

src/App.tsx

@@ -4,7 +4,7 @@ import { Route, Routes } from 'react-router-dom'
 
 import { AppProvider } from './view/providers/AppProvider'
 
-import { Layout } from './view/layouts/Layout'
+import { PublicLayout } from './view/layouts/PublicLayout.tsx'
 
 import './App.css'
 // components
@@ -19,14 +19,19 @@ import { GameEndPage } from './view/pages/game/GameEndPage.tsx'
 import { DashboardPage } from './view/pages/DashboardPage.tsx'
 import { SignInPage } from './view/pages/auth/SignInPage.tsx'
 import { WaitOneTimePassword } from './view/pages/auth/WaitOneTimePassword.tsx'
+import { useRunOnce } from './view/hooks/useRunOnce.ts'
+
+import { name } from './config/i18n.ts'
 
 export default function App () {
+  useRunOnce(() => document.title = name)
+
   return (
     <AppProvider>
       <Routes>
         <Route
           path="/"
-          element={<Layout />}
+          element={<PublicLayout />}
         >
           <Route
             index

src/config/i18n.ts

@@ -4,12 +4,14 @@ import { initReactI18next } from 'react-i18next'
 // the translations
 // (tip move them in a JSON file and import them,
 // or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+export const name = '🎮 Super Quizz'
+
 const resources = {
   'ptBR': {
     default: {
       layouts: {
-        root: {
-          brand: 'Super Quizz',
+        public: {
+          brand: name,
           play: 'Jogar',
           signIn: 'Entrar',
           myAccount: 'Minha Conta',
@@ -18,7 +20,7 @@ const resources = {
       },
       pages: {
         home: {
-          title: 'Super Quizz',
+          title: name,
           description: 'O melhor jogo de perguntas e respostas para jogar com os amigos!\n' +
             'Reúna sua galera e divirta-se com moderação! 🍻',
           contributing: 'Não se esqueça de contribuir com o projeto no link abaixo! 😉',

src/view/hooks/useRunOnce.ts

@@ -1,13 +1,21 @@
 import { useEffect, useRef } from 'react'
 
-export type useRunOnceProps = {
-  effect: () => unknown;
-  key?: string;
-};
+type explicit = {
+  effect: () => unknown
+  key?: string
+}
+
+type implicit = () => unknown
 
-export function useRunOnce ({ effect, key = 'global' }: useRunOnceProps) {
+export type useRunOnceParameters = explicit | implicit
+
+export function useRunOnce (parameters: useRunOnceParameters) {
   const triggered = useRef<boolean>(false)
 
+  const { effect, key } = typeof parameters === 'function'
+    ? { effect: parameters, key: undefined }
+    : parameters
+
   useEffect(() => {
     const hasBeenTriggered = key
       ? sessionStorage.getItem(key)

src/view/layouts/Layout.tsx → src/view/layouts/PublicLayout.tsx

@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next'
 import { useApp } from '../hooks/useApp.ts'
 import { useRunOnce } from '../hooks/useRunOnce.ts'
 
-export function Layout () {
+export function PublicLayout () {
   const navigate = useNavigate()
   const { t } = useTranslation(
     'default',
-    { keyPrefix: 'layouts.root' }
+    { keyPrefix: 'layouts.public' }
   )
 
   const { session, auth } = useApp()