chore(release): 1.3.8 [skip ci]

fixes #24

.devcontainer/Dockerfile

@@ -1,2 +1 @@
-ARG VARIANT="16"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:20

.devcontainer/devcontainer.json

@@ -3,21 +3,22 @@
   "dockerComposeFile": "./docker-compose.yml",
   "service": "workspace",
   "workspaceFolder": "/workspace",
-  "settings": {
-    "remote.autoForwardPorts": false
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "remote.autoForwardPorts": false,
+        "remote.localPortHost": "allInterfaces"
+      },
+      "extensions": [
+        "editorconfig.editorconfig",
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss",
+        "mikestead.dotenv",
+        "davidanson.vscode-markdownlint",
+        "ms-azuretools.vscode-docker"
+      ]
+    }
   },
-  "extensions": [
-    "editorconfig.editorconfig",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
-    "bradlc.vscode-tailwindcss",
-    "mikestead.dotenv",
-    "davidanson.vscode-markdownlint",
-    "ms-azuretools.vscode-docker"
-  ],
-  "forwardPorts": [3000],
-  "postAttachCommand": ["npm", "install"],
   "remoteUser": "node"
 }

.devcontainer/docker-compose.yml

@@ -6,3 +6,4 @@ services:
     volumes:
       - '..:/workspace:cached'
     command: 'sleep infinity'
+    network_mode: 'host'

.dockerignore

@@ -1,12 +1,4 @@
-.vscode
-.git
-.env
 build
 .next
 coverage
 node_modules
-tmp
-temp
-.DS_Store
-.lighthouseci
-.vercel

.env.example

@@ -1,3 +1,3 @@
 COMPOSE_PROJECT_NAME=thream-website
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://127.0.0.1:8080
 PORT=3000

.eslintrc.json

@@ -4,12 +4,14 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "env": {
-    "node": true,
-    "browser": true
-  },
   "rules": {
     "prettier/prettier": "error",
     "@next/next/no-img-element": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
 }

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 <!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
 
-## What changes this PR introduce?
+# What changes this PR introduce?
 
 ## List any relevant issue numbers
 

.github/workflows/analyze.yml

@@ -16,12 +16,12 @@ jobs:
         language: ['javascript']
 
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.3'
 
       - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v1'
+        uses: 'github/codeql-action/init@v2'
         with:
           languages: ${{ matrix.language }}
 
       - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v1'
+        uses: 'github/codeql-action/analyze@v2'

.github/workflows/build.yml

@@ -10,16 +10,16 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '20.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build'
         run: 'npm run build'

.github/workflows/lint.yml

@@ -10,16 +10,16 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '20.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'lint:commit'
         run: 'npm run lint:commit -- --to "${{ github.sha }}"'
@@ -30,18 +30,8 @@ jobs:
       - name: 'lint:markdown'
         run: 'npm run lint:markdown'
 
-      - name: 'lint:typescript'
-        run: 'npm run lint:typescript'
+      - name: 'lint:eslint'
+        run: 'npm run lint:eslint'
 
       - name: 'lint:prettier'
         run: 'npm run lint:prettier'
-
-      - name: 'lint:dotenv'
-        uses: 'dotenv-linter/action-dotenv-linter@v2'
-        with:
-          github_token: ${{ secrets.github_token }}
-
-      - name: 'lint:docker'
-        uses: 'hadolint/hadolint-action@v1.6.0'
-        with:
-          dockerfile: './Dockerfile'

.github/workflows/release.yml

@@ -8,26 +8,26 @@ jobs:
   release:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.3'
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: 'Import GPG key'
-        uses: 'crazy-max/ghaction-import-gpg@v4'
+        uses: 'crazy-max/ghaction-import-gpg@v5.3.0'
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
           git_commit_gpgsign: true
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '20.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Release'
         run: 'npm run release'
@@ -35,10 +35,3 @@ jobs:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}
           GIT_COMMITTER_EMAIL: ${{ secrets.GIT_EMAIL }}
-
-      - name: 'Deploy to Vercel'
-        run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'
-        env:
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.github/workflows/test.yml

@@ -10,33 +10,33 @@ jobs:
   test-unit:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '20.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Unit Test'
         run: 'npm run test:unit'
 
-  test-lighthouse:
+  test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.3'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
-          node-version: '16.x'
+          node-version: '20.x'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build'
         run: 'npm run build'
@@ -44,27 +44,5 @@ jobs:
       - name: 'html-w3c-validator'
         run: 'npm run test:html-w3c-validator'
 
-      - name: 'Lighthouse'
-        run: 'npm run test:lighthouse'
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-
-  test-e2e:
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: 'actions/checkout@v3.0.0'
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
-        with:
-          node-version: '16.x'
-          cache: 'npm'
-
-      - name: 'Install'
-        run: 'npm install'
-
-      - name: 'Build'
-        run: 'npm run build'
-
       - name: 'End To End (e2e) Test'
         run: 'npm run test:e2e'

.gitignore

@@ -18,10 +18,6 @@ cypress/screenshots
 cypress/videos
 cypress/downloads
 
-# PWA
-**/workbox-*.js
-**/sw.js
-
 # envs
 .env
 .env.production
@@ -47,6 +43,8 @@ npm-debug.log*
 
 # misc
 .DS_Store
-.lighthouseci
-.vercel
 *.hbs
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.html-w3c-validatorrc.json

@@ -1,9 +1,9 @@
 {
   "urls": [
-    "http://localhost:3000/",
-    "http://localhost:3000/authentication/forgot-password",
-    "http://localhost:3000/authentication/reset-password",
-    "http://localhost:3000/authentication/signin",
-    "http://localhost:3000/authentication/signup"
+    "http://127.0.0.1:3000/",
+    "http://127.0.0.1:3000/authentication/forgot-password",
+    "http://127.0.0.1:3000/authentication/reset-password",
+    "http://127.0.0.1:3000/authentication/signin",
+    "http://127.0.0.1:3000/authentication/signup"
   ]
 }

.lighthouserc.json

@@ -1,31 +0,0 @@
-{
-  "ci": {
-    "collect": {
-      "startServerCommand": "npm run start",
-      "startServerReadyPattern": "ready on",
-      "startServerReadyTimeout": 20000,
-      "url": [
-        "http://localhost:3000/",
-        "http://localhost:3000/authentication/forgot-password",
-        "http://localhost:3000/authentication/reset-password",
-        "http://localhost:3000/authentication/signin",
-        "http://localhost:3000/authentication/signup"
-      ],
-      "numberOfRuns": 1
-    },
-    "assert": {
-      "preset": "lighthouse:recommended",
-      "assertions": {
-        "image-size-responsive": "warning",
-        "unsized-images": "warning",
-        "csp-xss": "warning",
-        "non-composited-animations": "warning",
-        "unused-javascript": "warning"
-      }
-    },
-    "upload": {
-      "target": "temporary-public-storage"
-    },
-    "server": {}
-  }
-}

.markdownlint-cli2.jsonc

@@ -1,11 +1,11 @@
 {
   "config": {
+    "extends": "markdownlint/style/prettier",
+    "relative-links": true,
     "default": true,
-    "MD013": false,
-    "MD024": false,
-    "MD033": false,
-    "MD041": false
+    "MD033": false
   },
   "globs": ["**/*.{md,mdx}"],
-  "ignores": ["**/node_modules"]
+  "ignores": ["**/node_modules"],
+  "customRules": ["markdownlint-rule-relative-links"]
 }

.vscode/extensions.json

@@ -3,8 +3,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",

.vscode/settings.json

@@ -6,5 +6,9 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
-  }
+  },
+  "eslint.options": {
+    "ignorePath": ".gitignore"
+  },
+  "prettier.ignorePath": ".gitignore"
 }

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-contact@divlo.fr.
+<contact@theoludwig.fr>.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -16,6 +16,7 @@ All work on **Thream/website** happens directly on [GitHub](https://github.com/T
 - Suggest a new feature idea.
 - Correct spelling errors, improvements or additions to documentation files.
 - Improve structure/format/performance/refactor/tests of the code.
+- [Add translations](#add-a-translation).
 
 ## Pull Requests
 
@@ -29,31 +30,7 @@ If you're adding new features to **Thream/website**, please include tests.
 
 ## Commits
 
-The commit message guidelines respect
-[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
-and [Semantic Versioning](https://semver.org/) for releases.
-
-### Types
-
-Types define which kind of changes you made to the project.
-
-| Types    | Description                                                                                                  |
-| -------- | ------------------------------------------------------------------------------------------------------------ |
-| feat     | A new feature.                                                                                               |
-| fix      | A bug fix.                                                                                                   |
-| docs     | Documentation only changes.                                                                                  |
-| style    | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).      |
-| refactor | A code change that neither fixes a bug nor adds a feature.                                                   |
-| perf     | A code change that improves performance.                                                                     |
-| test     | Adding missing tests or correcting existing tests.                                                           |
-| build    | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).         |
-| ci       | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs). |
-| chore    | Other changes that don't modify src or test files.                                                           |
-| revert   | Reverts a previous commit.                                                                                   |
-
-### Scopes
-
-Scopes define what part of the code changed.
+The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.
 
 ### Examples
 
@@ -61,3 +38,15 @@ Scopes define what part of the code changed.
 git commit -m "feat(components): add Button"
 git commit -m "docs(readme): update installation process"
 ```
+
+## Add a translation
+
+[Reference issue](https://github.com/Thream/website/issues/24)
+
+Feel free to contribute to **Thream** and add new languages, we would appreciate your help!
+
+To add a new language:
+
+- `npm clean-install`
+- `npm run generate`
+- Start editing JSON files with the translation in `locales/{{locale}}` (e.g: `locales/en`)

Dockerfile

@@ -1,23 +1,22 @@
-FROM node:16.17.0 AS dependencies
-WORKDIR /usr/src/app
+FROM node:20.5.0 AS builder-dependencies
+WORKDIR /usr/src/application
+COPY ./.npmrc ./
 COPY ./package*.json ./
-RUN npm install
+RUN npm clean-install
 
-FROM node:16.17.0 AS builder
-WORKDIR /usr/src/app
+FROM node:20.5.0 AS builder
+WORKDIR /usr/src/application
+COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./
-COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.17.0 AS runner
-WORKDIR /usr/src/app
+FROM gcr.io/distroless/nodejs20-debian11:latest AS runner
+WORKDIR /usr/src/application
 ENV NODE_ENV=production
-COPY --from=builder /usr/src/app/next.config.js ./next.config.js
-COPY --from=builder /usr/src/app/public ./public
-COPY --from=builder /usr/src/app/.next ./.next
-COPY --from=builder /usr/src/app/i18n.json ./i18n.json
-COPY --from=builder /usr/src/app/locales ./locales
-COPY --from=builder /usr/src/app/pages ./pages
-COPY --from=builder /usr/src/app/node_modules ./node_modules
-RUN npx next telemetry disable
-CMD ["node_modules/.bin/next", "start", "--port", "${PORT}"]
+ENV NEXT_TELEMETRY_DISABLED=1
+COPY --from=builder /usr/src/application/.next/standalone ./
+COPY --from=builder /usr/src/application/.next/static ./.next/static
+COPY --from=builder /usr/src/application/public ./public
+COPY --from=builder /usr/src/application/locales ./locales
+COPY --from=builder /usr/src/application/next.config.js ./next.config.js
+CMD ["./server.js"]

README.md

@@ -1,4 +1,4 @@
-<h1 align="center"><a href="https://thream.divlo.fr/">Thream/website</a></h1>
+<h1 align="center"><a href="https://thream.theoludwig.fr/">Thream/website</a></h1>
 
 <p align="center">
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
@@ -18,7 +18,7 @@
 
 Thream's website to stay close with your friends and communities.
 
-It uses [Thream/api](https://github.com/Thream/api) [v1.2.0](https://github.com/Thream/api/releases/tag/v1.2.0).
+It uses [Thream/api](https://github.com/Thream/api) [v1.2.8](https://github.com/Thream/api/releases/tag/v1.2.8).
 
 ## ⚙️ Getting Started
 
@@ -31,7 +31,7 @@ It uses [Thream/api](https://github.com/Thream/api) [v1.2.0](https://github.com/
 
 ```sh
 # Clone the repository
-git clone https://github.com/Thream/website.git
+git clone git@github.com:Thream/website.git
 
 # Go to the project root
 cd website
@@ -40,7 +40,7 @@ cd website
 cp .env.example .env
 
 # Install
-npm install
+npm clean-install
 ```
 
 You will need to configure the environment variables by creating an `.env` file at
@@ -61,7 +61,7 @@ docker compose up --build
 
 #### Services started
 
-- website : `http://localhost:3000`
+- `website`: <http://127.0.0.1:3000>
 
 ## 💡 Contributing
 

components/Application/Application.tsx

@@ -185,7 +185,7 @@ export const Application: React.FC<
           visible={visibleSidebars.left}
           isMobile={isMobile}
         >
-          <div className='top-0 left-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800'>
+          <div className='left-0 top-0 z-50 flex min-w-[92px] flex-col space-y-4 border-r-2 border-gray-500 bg-gray-200 py-2 dark:border-white/20 dark:bg-gray-800'>
             <IconLink
               href={`/application/users/settings`}
               selected={path === `/application/users/settings`}

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -64,7 +64,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/Channels/Channel.tsx

@@ -22,35 +22,31 @@ const ChannelMemo: React.FC<ChannelProps> = (props) => {
   const { member } = useGuildMember()
 
   return (
-    <Link href={`/application/${path.guildId}/${channel.id}`}>
-      <a
-        className={classNames(
-          'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
-          {
-            'font-semibold text-green-800 dark:text-green-400': selected
-          }
-        )}
-      >
-        <span
-          className='max-[315px] ml-2 mr-4 break-all'
-          data-cy='channel-name'
+    <Link
+      href={`/application/${path.guildId}/${channel.id}`}
+      className={classNames(
+        'group relative mx-3 my-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
+        {
+          'font-semibold text-green-800 dark:text-green-400': selected
+        }
+      )}
+    >
+      <span className='max-[315px] ml-2 mr-4 break-all' data-cy='channel-name'>
+        # {channel.name}
+      </span>
+      {member.isOwner && (
+        <IconButton
+          onClick={async () => {
+            await router.push(
+              `/application/${channel.guildId}/${channel.id}/settings`
+            )
+          }}
+          className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
+          title='Settings'
         >
-          # {channel.name}
-        </span>
-        {member.isOwner && (
-          <IconButton
-            onClick={async () => {
-              await router.push(
-                `/application/${channel.guildId}/${channel.id}/settings`
-              )
-            }}
-            className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
-            title='Settings'
-          >
-            <CogIcon height={20} width={20} />
-          </IconButton>
-        )}
-      </a>
+          <CogIcon height={20} width={20} />
+        </IconButton>
+      )}
     </Link>
   )
 }

components/Application/ConfirmPopup/ConfirmPopup.tsx

@@ -27,7 +27,7 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
     <div className={props.className}>
       <Loader
         className={classNames(
-          'absolute top-1/2 left-1/2 scale-0 transition-all',
+          'absolute left-1/2 top-1/2 scale-0 transition-all',
           {
             'scale-100': isLoading
           }

components/Application/CreateChannel/CreateChannel.tsx

@@ -38,7 +38,7 @@ export const CreateChannel: React.FC = () => {
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/CreateGuild/CreateGuild.tsx

@@ -23,25 +23,29 @@ export const CreateGuild: React.FC = () => {
   const { t } = useTranslation()
   const router = useRouter()
 
-  const { handleUseForm, fetchState, message, errors } = useForm(schema as any)
+  const { handleUseForm, fetchState, message, errors } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
   const { authentication } = useAuthentication()
 
-  const onSubmit: HandleUseFormCallback<any> = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       const { data } = await authentication.api.post<
         any,
         AxiosResponse<{ guild: GuildComplete }>
       >('/guilds', { name: formData.name, description: formData.description })
       const guildId = data.guild.id
-      const channelId = data.guild.channels[0].id
+      const channel = data.guild.channels[0]
+      if (channel == null) {
+        throw new Error('No channel found')
+      }
+      const channelId = channel.id
       await router.push(`/application/${guildId}/${channelId}`)
       return null
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -28,20 +28,24 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
       <Divider />
       <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
         {member.isOwner && (
-          <Link href={`/application/${path.guildId}/channels/create`} passHref>
-            <a data-cy='link-add-channel'>
-              <IconButton className='h-10 w-10' title='Add a Channel'>
-                <PlusIcon />
-              </IconButton>
-            </a>
+          <Link
+            href={`/application/${path.guildId}/channels/create`}
+            passHref
+            data-cy='link-add-channel'
+          >
+            <IconButton className='h-10 w-10' title='Add a Channel'>
+              <PlusIcon />
+            </IconButton>
           </Link>
         )}
-        <Link href={`/application/${path.guildId}/settings`} passHref>
-          <a data-cy='link-settings-guild'>
-            <IconButton className='h-7 w-7' title='Settings'>
-              <CogIcon />
-            </IconButton>
-          </a>
+        <Link
+          href={`/application/${path.guildId}/settings`}
+          passHref
+          data-cy='link-settings-guild'
+        >
+          <IconButton className='h-7 w-7' title='Settings'>
+            <CogIcon />
+          </IconButton>
         </Link>
       </div>
     </div>

components/Application/GuildSettings/GuildSettings.tsx

@@ -47,21 +47,21 @@ export const GuildSettings: React.FC = () => {
     errors,
     setFetchState,
     setMessage
-  } = useForm(schema as any)
+  } = useForm(schema)
   const { getFirstErrorTranslation } = useFormTranslation()
 
-  const onSubmit: HandleUseFormCallback<any> = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       await authentication.api.put(`/guilds/${guild.id}`, formData)
       setInputValues(formData as unknown as any)
       return {
         type: 'success',
-        value: 'application:saved-information'
+        message: 'application:saved-information'
       }
     } catch (error) {
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
@@ -82,12 +82,16 @@ export const GuildSettings: React.FC = () => {
   ) => {
     setFetchState('loading')
     const files = event?.target?.files
-    if (files != null && files.length === 1) {
+    if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
       formData.append('icon', file)
       try {
-        await authentication.api.put(`/guilds/${guild.id}/icon`, formData)
+        await authentication.api.put(`/guilds/${guild.id}/icon`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
         setFetchState('idle')
       } catch (error) {
         setFetchState('error')
@@ -206,7 +210,7 @@ export const GuildSettings: React.FC = () => {
             message={
               message != null
                 ? t(message)
-                : getFirstErrorTranslation(errors.email)
+                : getFirstErrorTranslation(errors.name)
             }
           />
         </div>

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -96,7 +96,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
       <ConfirmPopup
         title={`${t('application:join-the-guild')} ?`}
         className={classNames(
-          'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
+          'w-ful h-ful translate-x- absolute left-full top-1/2 flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
           {
             '!left-0': isConfirmed
           }

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -49,7 +49,7 @@ export const JoinGuildsPublic: React.FC = () => {
       <input
         data-cy='search-guild-input'
         onChange={handleChange}
-        className='my-6 mx-auto mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
+        className='mx-auto my-6 mt-16 w-10/12 rounded-md border border-gray-500 bg-white p-3 dark:border-gray-700 dark:bg-[#3B3B3B] sm:w-8/12 md:w-6/12 lg:w-5/12'
         type='search'
         name='search-guild'
         placeholder={`🔎  ${t('application:search')}...`}

components/Application/Members/Member.tsx

@@ -14,35 +14,33 @@ const MemberMemo: React.FC<MemberProps> = (props) => {
 
   return (
     <Link href={`/application/users/${member.user.id}`}>
-      <a>
-        <div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
-          <div className='flex min-w-[50px] rounded-full'>
-            <Image
-              src={
-                member.user.logo == null
-                  ? '/images/data/user-default.png'
-                  : member.user.logo
-              }
-              alt={"Users's profil picture"}
-              height={50}
-              width={50}
-              draggable={false}
-              className='rounded-full'
-            />
-          </div>
-          <div className='ml-5'>
-            <p data-cy='member-user-name' className='flex truncate font-bold'>
-              {member.user.name}
-              {member.isOwner && (
-                <span className='ml-4'>
-                  <Emoji value=':crown:' size={18} />
-                </span>
-              )}
-            </p>
-            {member.user.status != null && member.user.status}
-          </div>
+      <div className='flex cursor-pointer items-center overflow-hidden px-6 py-2 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
+        <div className='flex min-w-[50px] rounded-full'>
+          <Image
+            src={
+              member.user.logo == null
+                ? '/images/data/user-default.png'
+                : member.user.logo
+            }
+            alt={"Users's profil picture"}
+            height={50}
+            width={50}
+            draggable={false}
+            className='rounded-full'
+          />
         </div>
-      </a>
+        <div className='ml-5'>
+          <p data-cy='member-user-name' className='flex truncate font-bold'>
+            {member.user.name}
+            {member.isOwner && (
+              <span className='ml-4'>
+                <Emoji value=':crown:' size={18} />
+              </span>
+            )}
+          </p>
+          {member.user.status != null && member.user.status}
+        </div>
+      </div>
     </Link>
   )
 }

components/Application/Messages/Message/Message.tsx

@@ -2,8 +2,6 @@ import { useState, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import date from 'date-and-time'
-import type { MotionProps } from 'framer-motion'
-import { motion } from 'framer-motion'
 
 import type { MessageWithMember } from '../../../../models/Message'
 import { MessageText } from './MessageText'
@@ -13,7 +11,7 @@ import { useAuthentication } from '../../../../tools/authentication'
 import { MessageOptions } from './MessageOptions'
 import { EditMessage } from './EditMessage'
 
-export interface MessageProps extends MotionProps {
+export interface MessageProps {
   message: MessageWithMember
 }
 
@@ -58,52 +56,38 @@ export const Message: React.FC<MessageProps> = (props) => {
   }
 
   return (
-    <motion.div
-      layout
-      initial='initial'
-      animate='animate'
-      exit='exit'
+    <div
       data-cy={`message-${message.id}`}
       className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
-      transition={{ type: 'spring', stiffness: 500, damping: 60 }}
-      variants={{
-        initial: { x: -100, opacity: 0 },
-        animate: { x: 0, opacity: 1 },
-        exit: { opacity: 0 }
-      }}
     >
       <Link href={`/application/users/${message.member.user.id}`}>
-        <a>
-          <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
-            <div className='h-10 w-10 drop-shadow-md'>
-              <Image
-                quality={100}
-                className='rounded-full'
-                src={
-                  message.member.user.logo == null
-                    ? '/images/data/user-default.png'
-                    : message.member.user.logo
-                }
-                alt={"Users's profil picture"}
-                width={50}
-                height={50}
-                draggable={false}
-              />
-            </div>
+        <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
+          <div className='h-10 w-10 drop-shadow-md'>
+            <Image
+              quality={100}
+              className='rounded-full'
+              src={
+                message.member.user.logo == null
+                  ? '/images/data/user-default.png'
+                  : message.member.user.logo
+              }
+              alt={"Users's profil picture"}
+              width={50}
+              height={50}
+              draggable={false}
+            />
           </div>
-        </a>
+        </div>
       </Link>
       <div className='relative w-full whitespace-pre-wrap break-words break-all'>
         <div className='flex w-max items-center'>
           <Link href={`/application/users/${message.member.user.id}`}>
-            <a>
-              <span
-                data-cy='message-member-user-name'
-                className='font-bold text-gray-900 dark:text-gray-200'
-              >
-                {message.member.user.name}
-              </span>
-            </a>
+            <span
+              data-cy='message-member-user-name'
+              className='font-bold text-gray-900 dark:text-gray-200'
+            >
+              {message.member.user.name}
+            </span>
           </Link>
           <span
             data-cy='message-date'
@@ -140,6 +124,6 @@ export const Message: React.FC<MessageProps> = (props) => {
           <Loader />
         )}
       </div>
-    </motion.div>
+    </div>
   )
 }

components/Application/Messages/Message/MessageOptions/MessageOptions.tsx

@@ -22,7 +22,7 @@ export const MessageOptions: React.FC<
   }
 
   return (
-    <div className='absolute right-6 -top-8 flex opacity-0 transition-opacity group-hover:opacity-100'>
+    <div className='absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100'>
       {message.type === 'text' && (
         <div
           className='message-options rounded-l-lg border-l-slate-600'

components/Application/Messages/Message/MessageText/MessageText.tsx

@@ -50,7 +50,8 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
           )
         },
         emoji: (props) => {
-          return <Emoji value={props.value} size={20} tooltip />
+          const { value } = props
+          return <Emoji value={value} size={20} tooltip />
         },
         code: (properties) => {
           const { inline, className, children, ...props } = properties

components/Application/Messages/Messages.tsx

@@ -1,6 +1,5 @@
 import useTranslation from 'next-translate/useTranslation'
 import InfiniteScroll from 'react-infinite-scroll-component'
-import { AnimatePresence } from 'framer-motion'
 
 import { Loader } from '../../design/Loader'
 import { Message } from './Message'
@@ -30,21 +29,19 @@ export const Messages: React.FC = () => {
       id='messages'
       className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
     >
-      <AnimatePresence>
-        <InfiniteScroll
-          scrollableTarget='messages'
-          className='messages-list !overflow-x-hidden'
-          dataLength={messages.length}
-          next={nextPage}
-          inverse
-          hasMore={hasMore}
-          loader={<Loader />}
-        >
-          {messages.map((message) => {
-            return <Message key={message.id} message={message} />
-          })}
-        </InfiniteScroll>
-      </AnimatePresence>
+      <InfiniteScroll
+        scrollableTarget='messages'
+        className='messages-list !overflow-x-hidden'
+        dataLength={messages.length}
+        next={nextPage}
+        inverse
+        hasMore={hasMore}
+        loader={<Loader />}
+      >
+        {messages.map((message) => {
+          return <Message key={message.id} message={message} />
+        })}
+      </InfiniteScroll>
     </div>
   )
 }

components/Application/PopupGuild/PopupGuildCard.tsx

@@ -23,11 +23,12 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
         <p className='mt-6 px-8 text-center text-sm text-gray-200'>
           {description}
         </p>
-        <Link href={link.href}>
-          <a className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'>
-            {link.icon}
-            {link.text}
-          </a>
+        <Link
+          href={link.href}
+          className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'
+        >
+          {link.icon}
+          {link.text}
         </Link>
       </div>
     </div>

components/Application/SendMessage/SendMessage.tsx

@@ -54,13 +54,18 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
     event
   ) => {
     const files = event?.target?.files
-    if (files != null && files.length === 1) {
+    if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
       formData.append('file', file)
       await authentication.api.post(
         `/channels/${path.channelId}/messages/uploads`,
-        formData
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        }
       )
     }
   }

components/Application/Sidebar/Sidebar.tsx

@@ -21,13 +21,13 @@ export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
       className={classNames(
         'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
         {
-          'scrollbar-firefox-support top-0 right-0 flex-col space-y-1 overflow-y-auto':
+          'scrollbar-firefox-support right-0 top-0 flex-col space-y-1 overflow-y-auto':
             direction === 'right',
           'w-72': direction === 'right' && visible,
           'invisible w-0 opacity-0': !visible,
           'w-80': direction === 'left' && visible,
           'max-w-max': typeof path !== 'string' && direction === 'left',
-          'top-0 right-0': direction === 'right' && isMobile,
+          'right-0 top-0': direction === 'right' && isMobile,
           absolute: isMobile
         }
       )}

components/Application/UserProfile/UserProfile.tsx

@@ -16,96 +16,88 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
   const { t } = useTranslation()
 
   return (
-    <>
-      <div className='relative flex h-full flex-col items-center justify-center'>
-        <div className='transition'>
-          <div className='max-w-[1000px] px-12'>
-            <div className='flex items-center justify-between'>
-              <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
-                <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
-                  <Image
-                    quality={100}
-                    className='rounded-full'
-                    src={
-                      user.logo != null
-                        ? user.logo
-                        : '/images/data/user-default.png'
-                    }
-                    alt='Profil Picture'
-                    draggable='false'
-                    height={125}
-                    width={125}
-                  />
+    <div className='relative flex h-full flex-col items-center justify-center'>
+      <div className='transition'>
+        <div className='max-w-[1000px] px-12'>
+          <div className='flex items-center justify-between'>
+            <div className='flex w-max flex-col items-center gap-7 md:flex-row'>
+              <div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
+                <Image
+                  quality={100}
+                  className='rounded-full'
+                  src={
+                    user.logo != null
+                      ? user.logo
+                      : '/images/data/user-default.png'
+                  }
+                  alt='Profil Picture'
+                  draggable='false'
+                  height={125}
+                  width={125}
+                />
+              </div>
+              <div className='ml-10 flex flex-col'>
+                <div className='mb-2 flex items-center'>
+                  <p
+                    className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
+                    data-cy='user-name'
+                  >
+                    {user.name}
+                  </p>
+                  <p
+                    className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
+                    data-cy='user-createdAt'
+                  >
+                    {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                  </p>
                 </div>
-                <div className='ml-10 flex flex-col'>
-                  <div className='mb-2 flex items-center'>
-                    <p
-                      className='space text-dark text-3xl font-bold tracking-wide dark:text-white'
-                      data-cy='user-name'
-                    >
-                      {user.name}
+                <div className='my-2 text-left'>
+                  {user.email != null && (
+                    <p className='font-bold'>
+                      Email:{' '}
+                      <a
+                        href={`mailto:${user.email}`}
+                        target='_blank'
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-1px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                        rel='noreferrer'
+                        data-cy='user-email'
+                      >
+                        {user.email}
+                      </a>
                     </p>
-                    <p
-                      className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
-                      data-cy='user-createdAt'
-                    >
-                      {date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
+                  )}
+                  {user.website != null && (
+                    <p className='font-bold'>
+                      {t('application:website')}:{' '}
+                      <a
+                        target='_blank'
+                        rel='noreferrer'
+                        href={user.website}
+                        className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:bottom-[-2px] after:left-0 after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
+                      >
+                        {user.website}
+                      </a>
                     </p>
-                  </div>
-                  <div className='my-2 text-left'>
-                    {user.email != null && (
-                      <p className='font-bold'>
-                        Email:{' '}
-                        <a
-                          href={`mailto:${user.email}`}
-                          target='_blank'
-                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                          rel='noreferrer'
-                          data-cy='user-email'
-                        >
-                          {user.email}
-                        </a>
-                      </p>
-                    )}
-                    {user.website != null && (
-                      <p className='font-bold'>
-                        {t('application:website')}:{' '}
-                        <a
-                          target='_blank'
-                          rel='noreferrer'
-                          href={user.website}
-                          className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
-                        >
-                          {user.website}
-                        </a>
-                      </p>
-                    )}
-                    {user.status != null && (
-                      <p className='flex font-bold'>
-                        {t('application:status')}:{' '}
-                        <span className='ml-2 font-normal tracking-wide'>
-                          {user.status}
-                        </span>
-                      </p>
-                    )}
-                  </div>
+                  )}
+                  {user.status != null && (
+                    <p className='flex font-bold'>
+                      {t('application:status')}:{' '}
+                      <span className='ml-2 font-normal tracking-wide'>
+                        {user.status}
+                      </span>
+                    </p>
+                  )}
                 </div>
               </div>
             </div>
-            {user.biography != null && (
-              <div className='mt-7 text-center'>
-                <p>{user.biography}</p>
-              </div>
-            )}
           </div>
+          {user.biography != null && (
+            <div className='mt-7 text-center'>
+              <p>{user.biography}</p>
+            </div>
+          )}
         </div>
       </div>
-
-      <style jsx global>{`
-        #application-page-content {
-          overflow-x: hidden;
-        }
-      `}</style>
-    </>
+    </div>
   )
 }

components/Application/UserSettings/UserSettings.tsx

@@ -75,7 +75,7 @@ export const UserSettings: React.FC = () => {
       if (hasEmailChanged) {
         return {
           type: 'success',
-          value: 'application:success-email-changed'
+          message: 'application:success-email-changed'
         }
       }
       const { data: userCurrentSettings } = await authentication.api.put(
@@ -94,7 +94,7 @@ export const UserSettings: React.FC = () => {
       })
       return {
         type: 'success',
-        value: 'application:saved-information'
+        message: 'application:saved-information'
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
@@ -102,22 +102,22 @@ export const UserSettings: React.FC = () => {
         if (message.endsWith('already taken.')) {
           return {
             type: 'error',
-            value: 'authentication:already-used'
+            message: 'authentication:already-used'
           }
         } else if (message.endsWith('email to sign in.')) {
           return {
             type: 'error',
-            value: 'authentication:email-required-to-sign-in'
+            message: 'authentication:email-required-to-sign-in'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
@@ -149,14 +149,19 @@ export const UserSettings: React.FC = () => {
   ) => {
     setFetchState('loading')
     const files = event?.target?.files
-    if (files != null && files.length === 1) {
+    if (files != null && files.length === 1 && files[0] != null) {
       const file = files[0]
       const formData = new FormData()
       formData.append('logo', file)
       try {
         const { data } = await authentication.api.put(
           `/users/current/logo`,
-          formData
+          formData,
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          }
         )
         setUser((oldUser) => {
           return {
@@ -312,16 +317,15 @@ export const UserSettings: React.FC = () => {
             <Language className='!top-12' />
             <div className='ml-auto flex'>
               <SwitchTheme />
-              <Link href={`/application/users/${user.id}`}>
-                <a
-                  className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
-                  title='Preview Public Profile'
-                >
-                  <EyeIcon
-                    height={20}
-                    className='opacity-50 transition-opacity group-hover:opacity-100'
-                  />
-                </a>
+              <Link
+                href={`/application/users/${user.id}`}
+                className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
+                title='Preview Public Profile'
+              >
+                <EyeIcon
+                  height={20}
+                  className='opacity-50 transition-opacity group-hover:opacity-100'
+                />
               </Link>
             </div>
           </div>

components/Authentication/Authentication.tsx

@@ -54,7 +54,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
         formElement.reset()
         return {
           type: 'success',
-          value: 'authentication:success-signup'
+          message: 'authentication:success-signup'
         }
       } catch (error) {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
@@ -62,17 +62,17 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           if (message.endsWith('already taken.')) {
             return {
               type: 'error',
-              value: 'authentication:already-used'
+              message: 'authentication:already-used'
             }
           }
           return {
             type: 'error',
-            value: 'errors:server-error'
+            message: 'errors:server-error'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
     } else {
@@ -86,12 +86,12 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
         if (axios.isAxiosError(error) && error.response?.status === 400) {
           return {
             type: 'error',
-            value: 'authentication:wrong-credentials'
+            message: 'authentication:wrong-credentials'
           }
         }
         return {
           type: 'error',
-          value: 'errors:server-error'
+          message: 'errors:server-error'
         }
       }
     }
@@ -139,11 +139,9 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
                 : '/authentication/signup'
             }
           >
-            <a>
-              {mode === 'signup'
-                ? t('authentication:already-have-an-account')
-                : t('authentication:dont-have-an-account')}
-            </a>
+            {mode === 'signup'
+              ? t('authentication:already-have-an-account')
+              : t('authentication:dont-have-an-account')}
           </Link>
         </p>
       </AuthenticationForm>

components/ErrorPage.tsx

@@ -1,53 +1,45 @@
 import useTranslation from 'next-translate/useTranslation'
 import Link from 'next/link'
 
-export interface ErrorPageProps {
+import type { FooterProps } from './Footer'
+import { Footer } from './Footer'
+import { Header } from './Header'
+
+export interface ErrorPageProps extends FooterProps {
   statusCode: number
   message: string
 }
 
 export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
-  const { message, statusCode } = props
+  const { message, statusCode, version } = props
   const { t } = useTranslation()
 
   return (
     <>
-      <h1 className='my-6 text-4xl font-semibold'>
-        {t('errors:error')}{' '}
-        <span
-          className='text-green-800 dark:text-green-400'
-          data-cy='status-code'
-        >
-          {statusCode}
-        </span>
-      </h1>
-      <p className='text-center text-lg'>
-        {message}{' '}
-        <Link href='/'>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
-            {t('errors:return-to-home-page')}
-          </a>
-        </Link>
-      </p>
-
-      <style jsx global>
-        {`
-          main {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-width: 100vw;
-            flex: 1;
-          }
-          #__next {
-            display: flex;
-            flex-direction: column;
-            padding-top: 0;
-            height: 100vh;
-          }
-        `}
-      </style>
+      <div className='flex h-screen flex-col pt-0'>
+        <Header />
+        <main className='flex min-w-full flex-1 flex-col items-center justify-center'>
+          <h1 className='my-6 text-4xl font-semibold'>
+            {t('errors:error')}{' '}
+            <span
+              className='text-green-800 dark:text-green-400'
+              data-cy='status-code'
+            >
+              {statusCode}
+            </span>
+          </h1>
+          <p className='text-center text-lg'>
+            {message}{' '}
+            <Link
+              href='/'
+              className='text-green-800 hover:underline dark:text-green-400'
+            >
+              {t('errors:return-to-home-page')}
+            </Link>
+          </p>
+        </main>
+        <Footer version={version} />
+      </div>
     </>
   )
 }

components/Footer/Footer.tsx

@@ -15,10 +15,11 @@ export const Footer: React.FC<FooterProps> = (props) => {
   return (
     <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
       <p>
-        <Link href='/'>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
-            Thream
-          </a>
+        <Link
+          href='/'
+          className='text-green-800 hover:underline dark:text-green-400'
+        >
+          Thream
         </Link>{' '}
         | {t('common:all-rights-reserved')}
       </p>

components/Head.tsx

@@ -13,9 +13,9 @@ export const Head: React.FC<HeadProps> = (props) => {
 
   const {
     title = 'Thream',
-    image = 'https://thream.divlo.fr/images/icons/128x128.png',
+    image = 'https://thream.theoludwig.fr/images/icon-128x128.png',
     description = t('common:description'),
-    url = 'https://thream.divlo.fr/'
+    url = 'https://thream.theoludwig.fr/'
   } = props
 
   return (
@@ -26,7 +26,7 @@ export const Head: React.FC<HeadProps> = (props) => {
       {/* Meta Tag */}
       <meta name='viewport' content='width=device-width, initial-scale=1.0' />
       <meta name='description' content={description} />
-      <meta name='Language' content='fr, en' />
+      <meta name='Language' content='fr-FR, en-US' />
       <meta name='theme-color' content='#27B05E' />
 
       {/* Open Graph Metadata */}
@@ -35,7 +35,7 @@ export const Head: React.FC<HeadProps> = (props) => {
       <meta property='og:url' content={url} />
       <meta property='og:image' content={image} />
       <meta property='og:description' content={description} />
-      <meta property='og:locale' content='fr_FR, en_US' />
+      <meta property='og:locale' content='fr-FR, en-US' />
       <meta property='og:site_name' content={title} />
 
       {/* Twitter card Metadata */}
@@ -43,12 +43,6 @@ export const Head: React.FC<HeadProps> = (props) => {
       <meta name='twitter:description' content={description} />
       <meta name='twitter:title' content={title} />
       <meta name='twitter:image' content={image} />
-
-      {/* PWA Data */}
-      <link rel='manifest' href='/manifest.json' />
-      <meta name='apple-mobile-web-app-capable' content='yes' />
-      <meta name='mobile-web-app-capable' content='yes' />
-      <link rel='apple-touch-icon' href={image} />
     </NextHead>
   )
 }

components/Header/Header.tsx

@@ -9,20 +9,19 @@ export const Header: React.FC = () => {
     <header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <div className='container flex justify-between'>
         <Link href='/'>
-          <a>
-            <div className='flex items-center justify-center'>
-              <Image
-                quality={100}
-                width={60}
-                height={60}
-                src='/images/icons/Thream.png'
-                alt='Thream'
-              />
-              <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
-                Thream
-              </span>
-            </div>
-          </a>
+          <div className='flex items-center justify-center'>
+            <Image
+              priority
+              quality={100}
+              width={60}
+              height={60}
+              src='/images/Thream.png'
+              alt='Thream'
+            />
+            <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
+              Thream
+            </span>
+          </div>
         </Link>
         <div className='flex justify-between'>
           <Language />

components/Header/SwitchTheme.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import classNames from 'clsx'
+import { useTheme } from 'next-themes'
+
+export const SwitchTheme: React.FC = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const handleClick = (): void => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <div
+      className='flex items-center'
+      data-cy='switch-theme-click'
+      onClick={handleClick}
+    >
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
+          <div
+            data-cy='switch-theme-dark'
+            className={classNames(
+              'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌜
+            </span>
+          </div>
+          <div
+            data-cy='switch-theme-light'
+            className={classNames(
+              'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
+          >
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌞
+            </span>
+          </div>
+        </div>
+        <div
+          className={classNames(
+            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          style={{ border: '1px solid #4d4d4d' }}
+        />
+        <input
+          data-cy='switch-theme-input'
+          type='checkbox'
+          aria-label='Dark mode toggle'
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
+          defaultChecked
+        />
+      </div>
+    </div>
+  )
+}

components/Header/SwitchTheme/SwitchTheme.tsx

@@ -1,126 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-export const SwitchTheme: React.FC = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme } = useTheme()
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  const handleClick = (): void => {
-    setTheme(theme === 'dark' ? 'light' : 'dark')
-  }
-
-  return (
-    <>
-      <div
-        className='flex items-center'
-        data-cy='switch-theme-click'
-        onClick={handleClick}
-      >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
-          <div className='toggle-track'>
-            <div
-              data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
-            >
-              <span className='toggle_Dark relative flex items-center justify-center'>
-                🌜
-              </span>
-            </div>
-            <div
-              data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
-            >
-              <span className='toggle_Light relative flex items-center justify-center'>
-                🌞
-              </span>
-            </div>
-          </div>
-          <div className='toggle-thumb absolute' />
-          <input
-            data-cy='switch-theme-input'
-            type='checkbox'
-            aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
-            defaultChecked
-          />
-        </div>
-      </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
-  )
-}

components/Header/SwitchTheme/index.ts

@@ -1 +0,0 @@
-export * from './SwitchTheme'

components/ScrollableBody.tsx

@@ -1,20 +0,0 @@
-export const ScrollableBody: React.FC<React.PropsWithChildren<{}>> = (
-  props
-) => {
-  const { children } = props
-
-  return (
-    <>
-      {children}
-      <style jsx global>{`
-        body {
-          scrollbar-width: thin;
-          scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
-          z-index: 1000;
-          height: calc(100vh - 64px);
-          overflow-y: auto;
-        }
-      `}</style>
-    </>
-  )
-}

components/design/Checkbox/Checkbox.tsx

@@ -13,7 +13,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
         {...props}
         type='checkbox'
         id={id}
-        className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:top-[50%] before:left-[59%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:top-[62.5%] after:left-[36%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
+        className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
       />
       <label
         className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '

components/design/IconLink/IconLink.tsx

@@ -14,24 +14,26 @@ export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
   const { children, selected, href, title, className } = props
 
   return (
-    <Link href={href}>
-      <a className='group relative flex w-full justify-center' title={title}>
-        <div
-          className={classNames('group flex w-full justify-center', className)}
-        >
-          {children}
-          <div className='absolute left-0 flex h-12 w-3 items-center'>
-            <span
-              className={classNames(
-                'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
-                {
-                  'h-full': selected
-                }
-              )}
-            ></span>
-          </div>
+    <Link
+      href={href}
+      className='group relative flex w-full justify-center'
+      title={title}
+    >
+      <div
+        className={classNames('group flex w-full justify-center', className)}
+      >
+        {children}
+        <div className='absolute left-0 flex h-12 w-3 items-center'>
+          <span
+            className={classNames(
+              'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
+              {
+                'h-full': selected
+              }
+            )}
+          ></span>
         </div>
-      </a>
+      </div>
     </Link>
   )
 }

components/design/Input/Input.tsx

@@ -35,61 +35,46 @@ export const Input: React.FC<InputProps> = (props) => {
   }
 
   return (
-    <>
-      <div className='flex flex-col'>
-        <div
-          className={classNames('mt-6 mb-2 flex justify-between', className)}
-        >
-          <label className='pl-1' htmlFor={name}>
-            {label}
-          </label>
-          {type === 'password' && showForgotPassword ? (
-            <Link href='/authentication/forgot-password'>
-              <a
-                className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
-                data-cy='forgot-password-link'
-              >
-                {t('authentication:forgot-password')}
-              </a>
-            </Link>
-          ) : null}
-        </div>
-        <div className='relative mt-0'>
-          <input
-            data-cy={`input-${name ?? 'name'}`}
-            className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
-            {...rest}
-            id={name}
-            name={name}
-            type={inputType}
-          />
-          {type === 'password' && (
-            <div
-              data-cy='password-eye'
-              onClick={handlePassword}
-              className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
-            />
-          )}
-          <FormState
-            id={`error-${name ?? 'input'}`}
-            state={error == null ? 'idle' : 'error'}
-            message={error}
-          />
-        </div>
+    <div className='flex flex-col'>
+      <div className={classNames('mb-2 mt-6 flex justify-between', className)}>
+        <label className='pl-1' htmlFor={name}>
+          {label}
+        </label>
+        {type === 'password' && showForgotPassword ? (
+          <Link
+            href='/authentication/forgot-password'
+            className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
+            data-cy='forgot-password-link'
+          >
+            {t('authentication:forgot-password')}
+          </Link>
+        ) : null}
       </div>
-
-      <style jsx>
-        {`
-          .password-eye {
-            top: 12px;
-            right: 16px;
-            z-index: 1;
-            width: 20px;
-            height: 20px;
-            background-image: url('/images/svg/icons/input/${inputType}.svg');
-          }
-        `}
-      </style>
-    </>
+      <div className='relative mt-0'>
+        <input
+          data-cy={`input-${name ?? 'name'}`}
+          className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
+          {...rest}
+          id={name}
+          name={name}
+          type={inputType}
+        />
+        {type === 'password' && (
+          <div
+            data-cy='password-eye'
+            onClick={handlePassword}
+            style={{
+              backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`
+            }}
+            className='absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
+          />
+        )}
+        <FormState
+          id={`error-${name ?? 'input'}`}
+          state={error == null ? 'idle' : 'error'}
+          message={error}
+        />
+      </div>
+    </div>
   )
 }

components/design/Loader/Loader.module.css

@@ -0,0 +1,39 @@
+@keyframes progressSpinnerRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes progressSpinnerDash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+.progressSpinnerSvg {
+  animation: progressSpinnerRotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.progressSpinnerCircle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: 0;
+  stroke: #27b05e;
+  animation: progressSpinnerDash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+}

components/design/Loader/Loader.tsx

@@ -1,3 +1,5 @@
+import styles from './Loader.module.css'
+
 export interface LoaderProps {
   width?: number
   height?: number
@@ -5,14 +7,18 @@ export interface LoaderProps {
 }
 
 export const Loader: React.FC<LoaderProps> = (props) => {
-  const { width = 50, height = 50 } = props
+  const { width = 50, height = 50, className } = props
 
   return (
-    <div className={props.className}>
-      <div data-cy='progress-spinner' className='progress-spinner'>
-        <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
+    <div className={className}>
+      <div
+        data-cy='progress-spinner'
+        className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'
+        style={{ width: `${width}px`, height: `${height}px` }}
+      >
+        <svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
           <circle
-            className='progress-spinner-circle'
+            className={styles['progressSpinnerCircle']}
             cx='50'
             cy='50'
             r='20'
@@ -22,60 +28,6 @@ export const Loader: React.FC<LoaderProps> = (props) => {
           />
         </svg>
       </div>
-
-      <style jsx>
-        {`
-          .progress-spinner {
-            position: relative;
-            margin: 0 auto;
-            width: ${width}px;
-            height: ${height}px;
-          }
-          .progress-spinner::before {
-            content: '';
-            display: block;
-            padding-top: 100%;
-          }
-          .progress-spinner-svg {
-            animation: progress-spinner-rotate 2s linear infinite;
-            height: 100%;
-            transform-origin: center center;
-            width: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-          }
-          .progress-spinner-circle {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: 0;
-            stroke: #27b05e;
-            animation: progress-spinner-dash 1.5s ease-in-out infinite;
-            stroke-linecap: round;
-          }
-          @keyframes progress-spinner-rotate {
-            100% {
-              transform: rotate(360deg);
-            }
-          }
-          @keyframes progress-spinner-dash {
-            0% {
-              stroke-dasharray: 1, 200;
-              stroke-dashoffset: 0;
-            }
-            50% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -35px;
-            }
-            100% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -124px;
-            }
-          }
-        `}
-      </style>
     </div>
   )
 }

components/design/SocialMediaButton/SocialMediaButton.module.css

@@ -0,0 +1,11 @@
+.buttonGoogle {
+  color: #000;
+  border: 1px solid #000;
+}
+.buttonMedia {
+  color: #fff;
+  border: none;
+}
+.button:focus {
+  box-shadow: 0 0 0 2px #27b05e;
+}

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import classNames from 'clsx'
 
 import type { ProviderOAuth } from '../../../models/OAuth'
+import styles from './SocialMediaButton.module.css'
 
 export type SocialMedia = ProviderOAuth
 
@@ -52,27 +53,21 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
   }, [socialMedia])
 
   return (
-    <>
-      <button
-        {...rest}
-        className={classNames(className, 'button', givenClassName)}
-      >
-        <SocialMediaChildren socialMedia={socialMedia} />
-      </button>
-
-      <style jsx>
-        {`
-          .button {
-            background: ${socialMediaColor};
-            color: ${socialMedia === 'Google' ? '#000' : '#fff'};
-            border: ${socialMedia === 'Google' ? '1px solid #000' : 'none'};
-          }
-          .button:focus {
-            box-shadow: 0 0 0 2px #27b05e;
-          }
-        `}
-      </style>
-    </>
+    <button
+      {...rest}
+      style={{ background: socialMediaColor }}
+      className={classNames(
+        className,
+        styles['button'],
+        {
+          [styles['buttonGoogle'] as string]: socialMedia === 'Google',
+          [styles['buttonMedia'] as string]: socialMedia !== 'Google'
+        },
+        givenClassName
+      )}
+    >
+      <SocialMediaChildren socialMedia={socialMedia} />
+    </button>
   )
 }
 
@@ -88,23 +83,20 @@ export const SocialMediaLink: React.FC<SocialMediaLinkProps> = (props) => {
   }, [socialMedia])
 
   return (
-    <>
-      <a {...rest} className={classNames(className, 'link', givenClassName)}>
-        <SocialMediaChildren socialMedia={socialMedia} />
-      </a>
-
-      <style jsx>
-        {`
-          .link {
-            background: ${socialMediaColor};
-            color: ${socialMedia === 'Google' ? '#000' : '#fff'};
-            border: ${socialMedia === 'Google' ? '1px solid #000' : 'none'};
-          }
-          .link:focus {
-            box-shadow: 0 0 0 2px #27b05e;
-          }
-        `}
-      </style>
-    </>
+    <a
+      {...rest}
+      style={{ background: socialMediaColor }}
+      className={classNames(
+        className,
+        styles['button'],
+        {
+          [styles['buttonGoogle'] as string]: socialMedia === 'Google',
+          [styles['buttonMedia'] as string]: socialMedia !== 'Google'
+        },
+        givenClassName
+      )}
+    >
+      <SocialMediaChildren socialMedia={socialMedia} />
+    </a>
   )
 }

components/design/Textarea/Textarea.tsx

@@ -10,7 +10,7 @@ export const Textarea: React.FC<TextareaProps> = (props) => {
 
   return (
     <div className='flex flex-col'>
-      <div className='mt-6 mb-2 flex justify-between'>
+      <div className='mb-2 mt-6 flex justify-between'>
         <label className='pl-1' htmlFor={id}>
           {label}
         </label>

contexts/Guilds.tsx

@@ -17,9 +17,7 @@ export interface Guilds {
 const defaultGuildsContext = {} as any
 const GuildsContext = createContext<Guilds>(defaultGuildsContext)
 
-export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
-  props
-) => {
+export const GuildsProvider: React.FC<React.PropsWithChildren> = (props) => {
   const { children } = props
 
   const { authentication } = useAuthentication()

cypress.config.ts

@@ -5,7 +5,7 @@ import { getLocal } from 'mockttp'
 import type { Mockttp } from 'mockttp'
 
 import { API_DEFAULT_PORT } from './tools/api'
-import type { Handlers, Method } from './cypress/fixtures/handler'
+import type { Handlers } from './cypress/fixtures/handler'
 
 const UPLOADS_FIXTURES_DIRECTORY = path.join(
   process.cwd(),
@@ -19,34 +19,42 @@ let server: Mockttp | null = null
 export default defineConfig({
   fixturesFolder: false,
   video: false,
-  downloadsFolder: undefined,
   screenshotOnRunFailure: false,
-
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://127.0.0.1:3000',
     supportFile: false,
     setupNodeEvents(on, config) {
       on('task', {
         async startMockServer(handlers: Handlers): Promise<null> {
-          server = getLocal({
-            cors: true
-          })
+          server = getLocal({ cors: true })
           await server.start(API_DEFAULT_PORT)
           for (const handler of handlers) {
-            const { isFile = false } = handler.response
-            const method = handler.method.toLowerCase() as Lowercase<Method>
+            const { isFile = false, statusCode, body } = handler.response
+            let requestBuilder = server.forGet(handler.url)
+            switch (handler.method) {
+              case 'GET':
+                requestBuilder = server.forGet(handler.url)
+                break
+              case 'POST':
+                requestBuilder = server.forPost(handler.url)
+                break
+              case 'PUT':
+                requestBuilder = server.forPut(handler.url)
+                break
+              case 'DELETE':
+                requestBuilder = server.forDelete(handler.url)
+                break
+            }
             if (isFile) {
-              await server[method](handler.url).thenFromFile(
-                handler.response.statusCode,
-                path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
+              await requestBuilder.thenFromFile(
+                statusCode,
+                path.join(UPLOADS_FIXTURES_DIRECTORY, ...body)
               )
             } else {
-              await server[method](handler.url).thenJson(
-                handler.response.statusCode,
-                handler.response.body
-              )
+              await requestBuilder.thenJson(statusCode, body)
             }
           }
+
           return null
         },
 
@@ -62,7 +70,6 @@ export default defineConfig({
       return config
     }
   },
-
   component: {
     devServer: {
       framework: 'next',

cypress/support/component-index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

docker-compose.yml

@@ -2,10 +2,10 @@ services:
   thream-website:
     container_name: ${COMPOSE_PROJECT_NAME}
     image: 'thream-website'
+    restart: 'unless-stopped'
     build:
       context: './'
-    ports:
-      - '${PORT}:${PORT}'
+    network_mode: 'host'
     environment:
-      PORT: ${PORT}
-    env_file: './.env'
+      PORT: ${PORT-3000}
+    env_file: '.env'

hooks/useFormTranslation.ts

@@ -13,7 +13,7 @@ const getErrorTranslationKey = (error: Error): string => {
       return 'errors:required'
     }
     if (error.keyword === 'format') {
-      if (error.params.format === 'email') {
+      if (error.params['format'] === 'email') {
         return 'errors:invalid-email'
       }
       return 'errors:invalid'
@@ -43,7 +43,7 @@ export const useFormTranslation = (): UseFormTranslationResult => {
     if (error != null) {
       return t(getErrorTranslationKey(error)).replace(
         '{expected}',
-        error?.params?.limit
+        error?.params?.['limit']
       )
     }
     return undefined

hooks/usePagination.ts

@@ -57,10 +57,13 @@ export const usePagination = <T extends PaginationItem>(
         `${url}?${searchParameters.toString()}`
       )
       if (!inverse) {
+        const endIndex = newItems.length - 1
+        const lastItem = newItems[endIndex]
         afterId.current =
-          newItems.length > 0 ? newItems[newItems.length - 1].id : null
+          newItems.length > 0 && lastItem != null ? lastItem.id : null
       } else {
-        afterId.current = newItems.length > 0 ? newItems[0].id : null
+        afterId.current =
+          newItems.length > 0 && newItems[0] != null ? newItems[0].id : null
       }
       setItems((oldItems) => {
         const updatedItems = inverse
@@ -110,10 +113,13 @@ export const usePagination = <T extends PaginationItem>(
       const newItems = getPaginationCache<T>(cacheKey)
       setItems(newItems)
       if (!inverse) {
+        const endIndex = newItems.length - 1
+        const lastItem = newItems[endIndex]
         afterId.current =
-          newItems.length > 0 ? newItems[newItems.length - 1].id : null
+          newItems.length > 0 && lastItem != null ? lastItem.id : null
       } else {
-        afterId.current = newItems.length > 0 ? newItems[0].id : null
+        afterId.current =
+          newItems.length > 0 && newItems[0] != null ? newItems[0].id : null
       }
       fetchState.current = 'idle'
     }

models/OAuth.ts

@@ -12,8 +12,8 @@ export const providersTypebox = providers.map((provider) => {
   return Type.Literal(provider)
 })
 
-export type ProviderOAuth = typeof providers[number]
-export type AuthenticationStrategy = typeof strategies[number]
+export type ProviderOAuth = (typeof providers)[number]
+export type AuthenticationStrategy = (typeof strategies)[number]
 
 export const oauthSchema = {
   id,

next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,20 +1,16 @@
-const nextPWA = require('next-pwa')({
-  disable: process.env.NODE_ENV !== 'production',
-  dest: 'public'
-})
-const nextTranslate = require('next-translate')
+const nextTranslate = require('next-translate-plugin')
 
 /** @type {import("next").NextConfig} */
-module.exports = nextTranslate(
-  nextPWA({
-    reactStrictMode: false,
-    images: {
-      domains: [
-        'api.thream.divlo.fr',
-        'thream-api.herokuapp.com',
-        'file-uploads-api.thream.divlo.fr',
-        ...(process.env.NODE_ENV !== 'production' ? ['localhost'] : [])
-      ]
-    }
-  })
-)
+const nextConfig = {
+  reactStrictMode: false,
+  output: 'standalone',
+  images: {
+    domains: [
+      'api.thream.theoludwig.fr',
+      'file-uploads-api.thream.theoludwig.fr',
+      ...(process.env.NODE_ENV !== 'production' ? ['127.0.0.1'] : [])
+    ]
+  }
+}
+
+module.exports = nextTranslate(nextConfig)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thream/website",
-  "version": "1.3.0",
+  "version": "1.3.8",
   "private": true,
   "repository": {
     "type": "git",
@@ -14,100 +14,96 @@
     "dev": "next dev",
     "start": "next start",
     "build": "next build",
-    "export": "next export",
     "generate": "plop",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\" --ignore-path \".gitignore\"",
-    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
+    "lint:eslint": "eslint . --max-warnings 0 --report-unused-disable-directives --ignore-path .gitignore",
+    "lint:prettier": "prettier . --check",
     "lint:staged": "lint-staged",
     "test:unit": "cypress run --component",
-    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
-    "test:lighthouse": "lhci autorun",
-    "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
-    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
+    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"html-w3c-validator\"",
+    "test:e2e": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"cypress run\"",
+    "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\"",
     "release": "semantic-release",
-    "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.12",
-    "@fontsource/roboto": "4.5.8",
+    "@fontsource/montserrat": "5.0.5",
+    "@fontsource/roboto": "5.0.5",
     "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.24.34",
-    "axios": "0.26.1",
-    "clsx": "1.2.1",
-    "date-and-time": "2.4.1",
+    "@sinclair/typebox": "0.29.6",
+    "@thream/socketio-jwt": "3.1.2",
+    "axios": "1.4.0",
+    "clsx": "2.0.0",
+    "date-and-time": "3.0.2",
     "emoji-mart": "3.0.1",
-    "framer-motion": "7.2.1",
-    "katex": "0.16.2",
-    "next": "12.2.5",
-    "next-pwa": "5.6.0",
-    "next-themes": "0.2.0",
-    "next-translate": "1.5.0",
-    "pretty-bytes": "6.0.0",
+    "katex": "0.16.8",
+    "next": "13.4.7",
+    "next-themes": "0.2.1",
+    "next-translate": "2.4.4",
+    "pretty-bytes": "6.1.1",
     "react": "18.2.0",
-    "react-component-form": "3.1.0",
+    "react-component-form": "4.1.1",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "6.1.0",
-    "react-markdown": "8.0.3",
-    "react-responsive": "8.2.0",
-    "react-swipeable": "7.0.0",
+    "react-markdown": "8.0.7",
+    "react-responsive": "9.0.2",
+    "react-swipeable": "7.0.1",
     "react-syntax-highlighter": "15.5.0",
-    "react-textarea-autosize": "8.3.4",
-    "read-pkg": "7.1.0",
-    "rehype-katex": "6.0.2",
-    "remark-breaks": "3.0.2",
+    "react-textarea-autosize": "8.5.2",
+    "read-pkg": "8.0.0",
+    "rehype-katex": "6.0.3",
+    "remark-breaks": "3.0.3",
     "remark-gfm": "3.0.1",
     "remark-math": "5.1.1",
-    "sharp": "0.30.7",
-    "socket.io-client": "4.5.1",
+    "sharp": "0.32.4",
+    "socket.io-client": "4.7.1",
     "unified": "10.1.2",
-    "unist-util-visit": "4.1.1",
+    "unist-util-visit": "4.1.2",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "17.1.0",
-    "@lhci/cli": "0.9.0",
-    "@saithodev/semantic-release-backmerge": "2.1.2",
+    "@commitlint/cli": "17.6.7",
+    "@commitlint/config-conventional": "17.6.7",
+    "@saithodev/semantic-release-backmerge": "3.2.0",
     "@semantic-release/git": "10.0.1",
+    "@tsconfig/strictest": "2.0.1",
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
-    "@types/katex": "0.14.0",
-    "@types/node": "18.7.14",
-    "@types/react": "18.0.18",
+    "@types/katex": "0.16.1",
+    "@types/node": "20.4.4",
+    "@types/react": "18.2.15",
     "@types/react-responsive": "8.0.5",
-    "@types/react-syntax-highlighter": "15.5.5",
+    "@types/react-syntax-highlighter": "15.5.7",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.36.1",
-    "@typescript-eslint/parser": "5.36.1",
-    "autoprefixer": "10.4.8",
-    "cypress": "10.7.0",
-    "editorconfig-checker": "4.0.2",
-    "eslint": "8.23.0",
-    "eslint-config-conventions": "4.0.0",
-    "eslint-config-next": "12.2.5",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.1",
-    "eslint-plugin-unicorn": "43.0.2",
-    "html-w3c-validator": "1.2.0",
-    "husky": "8.0.1",
-    "lint-staged": "13.0.3",
-    "markdownlint-cli2": "0.5.1",
-    "mockttp": "2.7.0",
-    "plop": "3.1.1",
-    "postcss": "8.4.16",
-    "prettier": "2.7.1",
-    "prettier-plugin-tailwindcss": "0.1.13",
-    "semantic-release": "19.0.5",
-    "serve": "14.0.1",
-    "start-server-and-test": "1.14.0",
-    "tailwindcss": "3.1.8",
-    "typescript": "4.8.2",
-    "vercel": "28.2.0"
+    "@typescript-eslint/eslint-plugin": "6.1.0",
+    "@typescript-eslint/parser": "6.1.0",
+    "autoprefixer": "10.4.14",
+    "cypress": "12.17.2",
+    "editorconfig-checker": "5.1.1",
+    "eslint": "8.45.0",
+    "eslint-config-conventions": "11.0.1",
+    "eslint-config-next": "13.4.7",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-unicorn": "48.0.0",
+    "html-w3c-validator": "1.4.0",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.3",
+    "markdownlint-cli2": "0.8.1",
+    "markdownlint-rule-relative-links": "2.1.0",
+    "mockttp": "3.9.1",
+    "next-translate-plugin": "2.4.4",
+    "plop": "3.1.2",
+    "postcss": "8.4.27",
+    "prettier": "3.0.0",
+    "prettier-plugin-tailwindcss": "0.4.1",
+    "semantic-release": "21.0.7",
+    "start-server-and-test": "2.0.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6"
   }
 }

pages/404.tsx

@@ -3,9 +3,7 @@ import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from '../components/ErrorPage'
 import { Head } from '../components/Head'
-import { Header } from '../components/Header'
 import type { FooterProps } from '../components/Footer'
-import { Footer } from '../components/Footer'
 
 const Error404: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
@@ -14,12 +12,11 @@ const Error404: NextPage<FooterProps> = (props) => {
   return (
     <>
       <Head title='Thream | 404' />
-
-      <Header />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={404} message={t('errors:page-not-found')} />
-      </main>
-      <Footer version={version} />
+      <ErrorPage
+        statusCode={404}
+        message={t('errors:page-not-found')}
+        version={version}
+      />
     </>
   )
 }

pages/500.tsx

@@ -5,7 +5,6 @@ import { ErrorPage } from '../components/ErrorPage'
 import { Head } from '../components/Head'
 import { Header } from '../components/Header'
 import type { FooterProps } from '../components/Footer'
-import { Footer } from '../components/Footer'
 
 const Error500: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
@@ -16,10 +15,11 @@ const Error500: NextPage<FooterProps> = (props) => {
       <Head title='Thream | 500' />
 
       <Header />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={500} message={t('errors:server-error')} />
-      </main>
-      <Footer version={version} />
+      <ErrorPage
+        statusCode={500}
+        message={t('errors:server-error')}
+        version={version}
+      />
     </>
   )
 }

pages/_app.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import type { AppProps } from 'next/app'
+import type { AppType } from 'next/app'
 import { ThemeProvider } from 'next-themes'
 import useTranslation from 'next-translate/useTranslation'
 
@@ -15,7 +15,7 @@ import '@fontsource/roboto/700.css'
 
 import { cookies } from '../tools/cookies'
 
-const Application = ({ Component, pageProps }: AppProps): JSX.Element => {
+const Application: AppType = ({ Component, pageProps }) => {
   const { lang } = useTranslation()
 
   useEffect(() => {

pages/application/[guildId]/[channelId]/index.tsx

@@ -62,9 +62,9 @@ const ChannelPage: NextPage<ChannelPageProps> = (props) => {
 export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
-    const channelId = Number(context?.params?.channelId)
-    const guildId = Number(context?.params?.guildId)
-    if (isNaN(channelId) || isNaN(guildId)) {
+    const channelId = Number(context?.params?.['channelId'])
+    const guildId = Number(context?.params?.['guildId'])
+    if (Number.isNaN(channelId) || Number.isNaN(guildId)) {
       return {
         notFound: true
       }

pages/application/[guildId]/[channelId]/settings.tsx

@@ -57,9 +57,9 @@ const ChannelSettingsPage: NextPage<ChannelSettingsPageProps> = (props) => {
 export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
-    const channelId = Number(context?.params?.channelId)
-    const guildId = Number(context?.params?.guildId)
-    if (isNaN(channelId) || isNaN(guildId)) {
+    const channelId = Number(context?.params?.['channelId'])
+    const guildId = Number(context?.params?.['guildId'])
+    if (Number.isNaN(channelId) || Number.isNaN(guildId)) {
       return {
         notFound: true
       }

pages/application/[guildId]/channels/create.tsx

@@ -44,8 +44,8 @@ const CreateChannelPage: NextPage<CreateChannelPageProps> = (props) => {
 export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
-    const guildId = Number(context?.params?.guildId)
-    if (isNaN(guildId)) {
+    const guildId = Number(context?.params?.['guildId'])
+    if (Number.isNaN(guildId)) {
       return {
         notFound: true
       }

pages/application/[guildId]/settings.tsx

@@ -41,8 +41,8 @@ const GuildSettingsPage: NextPage<GuildSettingsPageProps> = (props) => {
 export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
-    const guildId = Number(context?.params?.guildId)
-    if (isNaN(guildId)) {
+    const guildId = Number(context?.params?.['guildId'])
+    if (Number.isNaN(guildId)) {
       return {
         notFound: true
       }

pages/application/users/[userId]/index.tsx

@@ -35,8 +35,8 @@ const UserProfilePage: NextPage<UserProfilePageProps> = (props) => {
 export const getServerSideProps = authenticationFromServerSide({
   shouldBeAuthenticated: true,
   fetchData: async (context, api) => {
-    const userId = Number(context?.params?.userId)
-    if (isNaN(userId)) {
+    const userId = Number(context?.params?.['userId'])
+    if (Number.isNaN(userId)) {
       return {
         notFound: true
       }

pages/authentication/forgot-password.tsx

@@ -15,7 +15,6 @@ import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { FormState } from '../../components/design/FormState'
 import { authenticationFromServerSide } from '../../tools/authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 import { userSchema } from '../../models/User'
 import { api } from '../../tools/api'
 import { useFormTranslation } from '../../hooks/useFormTranslation'
@@ -43,24 +42,24 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
       formElement.reset()
       return {
         type: 'success',
-        value: 'authentication:success-forgot-password'
+        message: 'authentication:success-forgot-password'
       }
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         return {
           type: 'error',
-          value: 'errors:invalid-email'
+          message: 'errors:invalid-email'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:forgot-password')}`} />
       <Header />
       <Main>
@@ -71,7 +70,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
           </Button>
           <p className='mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400'>
             <Link href='/authentication/signin'>
-              <a>{t('authentication:already-know-password')}</a>
+              {t('authentication:already-know-password')}
             </Link>
           </p>
         </AuthenticationForm>
@@ -86,7 +85,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
         />
       </Main>
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 

pages/authentication/reset-password.tsx

@@ -15,7 +15,6 @@ import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { authenticationFromServerSide } from '../../tools/authentication'
 import { AuthenticationForm } from '../../components/Authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 import { api } from '../../tools/api'
 import { userSchema } from '../../models/User'
 import { useFormTranslation } from '../../hooks/useFormTranslation'
@@ -36,7 +35,7 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
     try {
       await api.put(`/users/reset-password`, {
         ...formData,
-        temporaryToken: router.query.temporaryToken
+        temporaryToken: router.query['temporaryToken']
       })
       await router.push('/authentication/signin')
       return null
@@ -44,18 +43,18 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         return {
           type: 'error',
-          value: 'errors:invalid'
+          message: 'errors:invalid'
         }
       }
       return {
         type: 'error',
-        value: 'errors:server-error'
+        message: 'errors:server-error'
       }
     }
   }
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:reset-password')}`} />
       <Header />
       <Main>
@@ -81,7 +80,7 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
         />
       </Main>
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 

pages/authentication/signin.tsx

@@ -7,19 +7,18 @@ import { Header } from '../../components/Header'
 import type { FooterProps } from '../../components/Footer'
 import { Footer } from '../../components/Footer'
 import { authenticationFromServerSide } from '../../tools/authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 
 const Signin: NextPage<FooterProps> = (props) => {
   const { version } = props
   const { t } = useTranslation()
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:signin')}`} />
       <Header />
       <Authentication mode='signin' />
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 

pages/authentication/signup.tsx

@@ -7,19 +7,18 @@ import { Header } from '../../components/Header'
 import type { FooterProps } from '../../components/Footer'
 import { Footer } from '../../components/Footer'
 import { authenticationFromServerSide } from '../../tools/authentication'
-import { ScrollableBody } from '../../components/ScrollableBody'
 
 const Signup: NextPage<FooterProps> = (props) => {
   const { version } = props
   const { t } = useTranslation()
 
   return (
-    <ScrollableBody>
+    <>
       <Head title={`Thream | ${t('authentication:signup')}`} />
       <Header />
       <Authentication mode='signup' />
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 

pages/index.tsx

@@ -11,29 +11,27 @@ import type { FooterProps } from '../components/Footer'
 import { Footer } from '../components/Footer'
 import { SocialMediaLink } from '../components/design/SocialMediaButton'
 import { ButtonLink } from '../components/design/Button'
-import { ScrollableBody } from '../components/ScrollableBody'
 
 const Home: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 
   return (
-    <ScrollableBody>
+    <>
       <Head />
       <Header />
       <Main>
         <div className='flex w-4/5 flex-col items-center'>
           <div className='max-w-xs'>
             <Link href='/authentication/signup'>
-              <a>
-                <Image
-                  quality={100}
-                  width={351}
-                  height={341}
-                  src='/images/svg/design/home.svg'
-                  alt={"Thream's chat app"}
-                />
-              </a>
+              <Image
+                quality={100}
+                width={351}
+                height={341}
+                src='/images/svg/design/home.svg'
+                alt={"Thream's chat app"}
+                priority
+              />
             </Link>
           </div>
           <div className='text-center'>
@@ -55,7 +53,7 @@ const Home: NextPage<FooterProps> = (props) => {
               />
             </div>
             <div className='mt-8 flex items-center justify-center space-x-4 text-center'>
-              <Link href='/authentication/signup' passHref>
+              <Link href='/authentication/signup' passHref legacyBehavior>
                 <ButtonLink data-cy='get-started'>
                   {t('home:get-started')}
                 </ButtonLink>
@@ -72,7 +70,7 @@ const Home: NextPage<FooterProps> = (props) => {
         </div>
       </Main>
       <Footer version={version} />
-    </ScrollableBody>
+    </>
   )
 }
 

public/manifest.json

@@ -1,51 +0,0 @@
-{
-  "name": "Thream",
-  "short_name": "Thream",
-  "theme_color": "#27B05E",
-  "background_color": "#262B3F",
-  "start_url": "/",
-  "display": "standalone",
-  "icons": [
-    {
-      "src": "images/icons/72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/128x128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "images/icons/384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "images/icons/512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}

styles/global.css

@@ -12,9 +12,18 @@
   @apply flex h-screen flex-col;
 }
 
+#application-page-content {
+  overflow-x: hidden;
+}
+
 body {
   @apply bg-white font-headline text-black dark:bg-black dark:text-white;
   overflow: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
+  z-index: 1000;
+  height: calc(100vh - 64px);
+  overflow-y: auto;
 }
 
 .h-full-without-header {

tailwind.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+const tailwindConfig = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}'
@@ -31,3 +32,5 @@ module.exports = {
   },
   plugins: []
 }
+
+module.exports = tailwindConfig

tools/api.ts

@@ -1,13 +1,13 @@
 import axios from 'axios'
 
-export const API_VERSION = '1.2.0'
+export const API_VERSION = '1.2.8'
 
 export const API_DEFAULT_PORT = 8080
 
 export const API_URL =
-  process.env.NEXT_PUBLIC_API_URL != null
-    ? process.env.NEXT_PUBLIC_API_URL
-    : `http://localhost:${API_DEFAULT_PORT}`
+  process.env['NEXT_PUBLIC_API_URL'] != null
+    ? process.env['NEXT_PUBLIC_API_URL']
+    : `http://127.0.0.1:${API_DEFAULT_PORT}`
 
 export const api = axios.create({
   baseURL: API_URL,

tools/authentication/Authentication.ts

@@ -2,6 +2,7 @@ import type { AxiosInstance } from 'axios'
 import axios from 'axios'
 import type { Socket } from 'socket.io-client'
 import { io } from 'socket.io-client'
+import { isUnauthorizedError } from '@thream/socketio-jwt'
 
 import { API_URL } from '../api'
 import { cookies } from '../cookies'
@@ -30,7 +31,7 @@ export class Authentication {
         )
       })
       this.socket.on('connect_error', (error) => {
-        if (error.message.startsWith('Unauthorized')) {
+        if (isUnauthorizedError(error)) {
           fetchRefreshToken(this.tokens.refreshToken)
             .then(({ accessToken }) => {
               this.setAccessToken(accessToken)
@@ -58,7 +59,6 @@ export class Authentication {
           )
           this.setAccessToken(accessToken)
         }
-        config.headers = config.headers == null ? {} : config.headers
         config.headers.Authorization = `${this.tokens.type} ${this.tokens.accessToken}`
         return config
       },
@@ -96,7 +96,7 @@ export class Authentication {
     this.accessTokenAge = Date.now()
     const token = `${this.tokens.type} ${this.tokens.accessToken}`
     if (typeof this?.socket?.auth !== 'function' && this.socket != null) {
-      this.socket.auth.token = token
+      this.socket.auth['token'] = token
     }
   }
 

tsconfig.json

@@ -1,24 +1,24 @@
 {
+  "extends": "@tsconfig/strictest/tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "lib": ["dom", "dom.iterable", "ESNext"],
     "allowJs": true,
-    "checkJs": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "removeComments": true,
-    "noEmit": true,
-    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
     "types": ["cypress"],
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "skipLibCheck": true,
+    "noEmit": true,
+    "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "incremental": true
+    "jsx": "preserve",
+    "incremental": true,
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true
   },
-  "exclude": ["dist", ".next", "out", "next.config.js"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

vercel.json

@@ -1,5 +0,0 @@
-{
-  "github": {
-    "enabled": false
-  }
-}