Add logo with link to front page

app/components/layout/index.tsx

@@ -1,7 +1,8 @@
-import { useLocation } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import type { RootLoaderData } from "~/root";
+import { LOGO_PATH } from "~/utils/urls";
 import { Image } from "../Image";
 import { ColorModeToggle } from "./ColorModeToggle";
 import { Footer } from "./Footer";
@@ -31,6 +32,14 @@ export const Layout = React.memo(function Layout({
   return (
     <div className="layout__container">
       <header className="layout__header">
+        <Link to="/" className="layout__logo">
+          <Image
+            path={LOGO_PATH}
+            width={28}
+            height={28}
+            alt="sendou.ink logo"
+          />
+        </Link>
         <div className="layout__header__right-container">
           {!isCatchBoundary ? <UserItem /> : null}
           <LanguageChanger />

app/styles/layout.css

@@ -10,11 +10,22 @@
   position: relative;
   z-index: 501;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   padding: var(--s-4);
   background-color: var(--bg);
 }
 
+.layout__logo {
+  display: flex;
+  width: var(--item-size);
+  height: var(--item-size);
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-lighter);
+  background-image: url("/svg/background-pattern.svg");
+  border-radius: var(--rounded);
+}
+
 .layout__avatar {
   width: var(--item-size);
   height: var(--item-size);

app/utils/urls.ts

@@ -33,6 +33,7 @@ export const SEED_URL = "/seed";
 
 export const COMMON_PREVIEW_IMAGE = "/img/layout/common-preview.png";
 export const ERROR_GIRL_IMAGE_PATH = `/img/layout/error-girl`;
+export const LOGO_PATH = `/img/layout/logo`;
 
 export const userPage = (discordId: string) => `/u/${discordId}`;
 export const userBuildsPage = (discordId: string) =>