Add button to analyzer to build card

app/components/BuildCard.tsx

@@ -12,16 +12,21 @@ import type { BuildAbilitiesTuple } from "~/modules/in-game-lists/types";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { discordFullName } from "~/utils/strings";
 import {
+  analyzerPage,
   gearImageUrl,
   mainWeaponImageUrl,
   modeImageUrl,
+  navIconUrl,
   userBuildsPage,
 } from "~/utils/urls";
 import { Ability } from "./Ability";
 import { Button, LinkButton } from "./Button";
 import { FormWithConfirm } from "./FormWithConfirm";
+import { TrashIcon } from "./icons/Trash";
+import { EditIcon } from "./icons/Edit";
 import { Image } from "./Image";
 import { Popover } from "./Popover";
+import { InfoIcon } from "./icons/Info";
 
 interface BuildProps {
   build: Pick<
@@ -62,10 +67,20 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
   } = build;
 
   const bottomRowItems = [
+    <Link
+      key="analyzer"
+      to={analyzerPage({ weaponId: weapons[0]!, abilities: abilities.flat() })}
+    >
+      <Image
+        alt={t("common:pages.analyzer")}
+        className="build__icon"
+        path={navIconUrl("analyzer")}
+      />
+    </Link>,
     description && (
       <Popover
         key="info"
-        buttonChildren={<>{t("builds:buildCard.info")}</>}
+        buttonChildren={<InfoIcon className="build__icon" />}
         triggerClassName="minimal tiny build__small-text"
       >
         {description}
@@ -80,7 +95,7 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
         to={`new?buildId=${id}&userId=${user!.id}`}
         data-cy="edit-build-button"
       >
-        {t("builds:buildCard.edit")}
+        <EditIcon className="build__icon" />
       </LinkButton>
     ),
     canEdit && (
@@ -96,7 +111,7 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
           type="submit"
           data-cy="delete-build-button"
         >
-          {t("common:actions.delete")}
+          <TrashIcon className="build__icon" />
         </Button>
       </FormWithConfirm>
     ),

app/components/icons/Info.tsx

@@ -0,0 +1,16 @@
+export function InfoIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

app/components/layout/index.tsx

@@ -2,7 +2,7 @@ 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 { LOGO_PATH, navIconUrl } from "~/utils/urls";
 import { Image } from "../Image";
 import { ColorModeToggle } from "./ColorModeToggle";
 import { Footer } from "./Footer";
@@ -54,7 +54,7 @@ export const Layout = React.memo(function Layout({
       {currentPagesNavItem && (
         <div className="layout__page-title-header">
           <Image
-            path={`/img/layout/${currentPagesNavItem.name}`}
+            path={navIconUrl(currentPagesNavItem.name)}
             width={28}
             height={28}
             alt=""

app/routes/index.tsx

@@ -14,7 +14,7 @@ import styles from "~/styles/front.css";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { discordFullName } from "~/utils/strings";
 import {
-  ANALYZER_PAGE,
+  analyzerPage,
   articlePage,
   BADGES_PAGE,
   BUILDS_PAGE,
@@ -71,7 +71,7 @@ export default function Index() {
             navItem="analyzer"
             title={t("common:pages.analyzer")}
             description={t("front:analyzer.description")}
-            to={ANALYZER_PAGE}
+            to={analyzerPage()}
           />
           <FeatureCard
             navItem="plus"

app/styles/common.css

@@ -800,7 +800,12 @@ dialog::backdrop {
   height: 100%;
   align-items: flex-end;
   justify-content: center;
-  gap: var(--s-2);
+  gap: var(--s-4);
+}
+
+.build__icon {
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .build__small-text {

app/utils/urls.ts

@@ -2,11 +2,13 @@ import slugify from "slugify";
 import type { Badge, GearType } from "~/db/types";
 import type { ModeShort, weaponCategories } from "~/modules/in-game-lists";
 import type {
+  Ability,
   AbilityWithUnknown,
   MainWeaponId,
   SpecialWeaponId,
   SubWeaponId,
 } from "~/modules/in-game-lists/types";
+import type navItems from "~/components/layout/nav-items.json";
 
 export const PLUS_SERVER_DISCORD_URL = "https://discord.gg/FW4dKrY";
 export const SENDOU_INK_DISCORD_URL = "https://discord.gg/sendou";
@@ -26,7 +28,6 @@ export const FAQ_PAGE = "/faq";
 export const CONTRIBUTIONS_PAGE = "/contributions";
 export const BADGES_PAGE = "/badges";
 export const BUILDS_PAGE = "/builds";
-export const ANALYZER_PAGE = "/analyzer";
 export const CALENDAR_PAGE = "/calendar";
 export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";
 export const SEED_URL = "/seed";
@@ -51,6 +52,17 @@ export const calendarEditPage = (eventId?: number) =>
 export const calendarReportWinnersPage = (eventId: number) =>
   `/calendar/${eventId}/report-winners`;
 export const articlePage = (slug: string) => `/a/${slug}`;
+export const analyzerPage = (args?: {
+  weaponId: MainWeaponId;
+  abilities: Ability[];
+}) =>
+  `/analyzer${
+    args
+      ? `?weapon=${args.weaponId}&build=${encodeURIComponent(
+          args.abilities.join(",")
+        )}`
+      : ""
+  }`;
 
 export const badgeUrl = ({
   code,
@@ -62,7 +74,8 @@ export const badgeUrl = ({
 export const articlePreviewUrl = (slug: string) =>
   `/img/article-previews/${slug}.png`;
 
-export const navIconUrl = (navItem: string) => `/img/layout/${navItem}`;
+export const navIconUrl = (navItem: typeof navItems[number]["name"]) =>
+  `/img/layout/${navItem}`;
 export const gearImageUrl = (gearType: GearType, gearSplId: number) =>
   `/img/gear/${gearType.toLowerCase()}/${gearSplId}`;
 export const weaponCategoryUrl = (