feat(frontend): general updates

apps/frontend/app/components/fitness.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Anchor,
@@ -24,6 +23,7 @@ import {
 import { startCase, truncate } from "@ryot/ts-utils";
 import { IconTrophy } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
+import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { withFragment } from "ufo";
 import { dayjsLib, getSetColor } from "~/lib/generals";

apps/frontend/app/components/media.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Anchor,
@@ -24,6 +23,7 @@ import {
 	ThemeIcon,
 	Tooltip,
 } from "@mantine/core";
+import { $path } from "remix-routes";
 import "@mantine/dates/styles.css";
 import { useDisclosure } from "@mantine/hooks";
 import { Form, Link, useFetcher } from "@remix-run/react";

apps/frontend/app/lib/generals.ts

@@ -1,3 +1,4 @@
+import type Umami from "@bitprojects/umami-logger-typescript";
 import {
 	createQueryKeys,
 	mergeQueryKeys,
@@ -48,6 +49,14 @@ export const queryClient = new QueryClient({
 	defaultOptions: { queries: { staleTime: Number.POSITIVE_INFINITY } },
 });
 
+declare global {
+	interface Window {
+		umami?: {
+			track: typeof Umami.trackEvent;
+		};
+	}
+}
+
 export const getSetColor = (l: SetLot) =>
 	match(l)
 		.with(SetLot.WarmUp, () => "yellow")

apps/frontend/app/lib/hooks.ts

@@ -1,5 +1,3 @@
-import type Umami from "@bitprojects/umami-logger-typescript";
-import { $path } from "@ignisda/remix-routes";
 import { useComputedColorScheme, useMantineTheme } from "@mantine/core";
 import { useForceUpdate } from "@mantine/hooks";
 import {
@@ -12,6 +10,7 @@ import type { EntityLot } from "@ryot/generated/graphql/backend/graphql";
 import { useQuery } from "@tanstack/react-query";
 import Cookies from "js-cookie";
 import type { FormEvent } from "react";
+import { $path } from "remix-routes";
 import { useInterval } from "usehooks-ts";
 import {
 	CurrentWorkoutKey,
@@ -22,14 +21,6 @@ import {
 import { type InProgressWorkout, useCurrentWorkout } from "~/lib/state/fitness";
 import type { loader as dashboardLoader } from "~/routes/_dashboard";
 
-declare global {
-	interface Window {
-		umami?: {
-			track: typeof Umami.trackEvent;
-		};
-	}
-}
-
 export const useGetMantineColor = () => {
 	const theme = useMantineTheme();
 	const colors = Object.keys(theme.colors);

apps/frontend/app/lib/state/fitness.ts

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import type { NavigateFunction } from "@remix-run/react";
 import {
 	type CreateUserWorkoutMutationVariables,
@@ -18,6 +17,7 @@ import { createDraft, finishDraft } from "immer";
 import { atom, useAtom } from "jotai";
 import { atomWithReset, atomWithStorage } from "jotai/utils";
 import Cookies from "js-cookie";
+import { $path } from "remix-routes";
 import { withFragment } from "ufo";
 import { v4 as randomUUID } from "uuid";
 import {

apps/frontend/app/lib/utilities.server.ts

@@ -1,5 +1,4 @@
 import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
-import { $path } from "@ignisda/remix-routes";
 import {
 	createCookie,
 	createCookieSessionStorage,
@@ -25,6 +24,7 @@ import {
 	type Variables,
 } from "graphql-request";
 import type { VariablesAndRequestHeadersArgs } from "node_modules/graphql-request/build/legacy/helpers/types";
+import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { withoutHost } from "ufo";
 import { v4 as randomUUID } from "uuid";

apps/frontend/app/routes/_dashboard._index.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	Alert,
 	Box,
@@ -34,6 +33,7 @@ import {
 	IconServer,
 } from "@tabler/icons-react";
 import { Fragment, type ReactNode } from "react";
+import { $path } from "remix-routes";
 import invariant from "tiny-invariant";
 import { match } from "ts-pattern";
 import { ApplicationGrid } from "~/components/common";

apps/frontend/app/routes/_dashboard.calendar.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Anchor,
@@ -24,6 +23,7 @@ import {
 } from "@ryot/generated/graphql/backend/graphql";
 import { isNumber, snakeCase, startCase, sum, truncate } from "@ryot/ts-utils";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { $path } from "remix-routes";
 import { z } from "zod";
 import { zx } from "zodix";
 import { dayjsLib } from "~/lib/generals";

apps/frontend/app/routes/_dashboard.collections.list.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Anchor,
@@ -37,6 +36,7 @@ import { IconEdit, IconPlus, IconTrashFilled } from "@tabler/icons-react";
 import { ClientError } from "graphql-request";
 import { useEffect, useState } from "react";
 import { Virtuoso } from "react-virtuoso";
+import { $path } from "remix-routes";
 import { namedAction } from "remix-utils/named-action";
 import { withQuery } from "ufo";
 import { z } from "zod";

apps/frontend/app/routes/_dashboard.fitness.$action.tsx

@@ -1,7 +1,6 @@
 import { Buffer } from "buffer";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Anchor,
@@ -79,6 +78,7 @@ import { RESET } from "jotai/utils";
 import Cookies from "js-cookie";
 import { useRef } from "react";
 import Webcam from "react-webcam";
+import { $path } from "remix-routes";
 import { ClientOnly } from "remix-utils/client-only";
 import { namedAction } from "remix-utils/named-action";
 import invariant from "tiny-invariant";
@@ -911,20 +911,7 @@ const ExerciseDisplay = (props: {
 								</Menu.Target>
 								{currentTimer?.triggeredBy?.exerciseIdentifier ===
 								exercise.identifier ? (
-									<Progress
-										pos="absolute"
-										color="violet"
-										bottom={-6}
-										value={
-											(currentTimer.endAt.diff(dayjsLib(), "seconds") * 100) /
-											currentTimer.totalTime
-										}
-										size="xs"
-										radius="md"
-										w="100%"
-										onClick={props.openTimerDrawer}
-										style={{ cursor: "pointer" }}
-									/>
+									<RestTimerProgress onClick={props.openTimerDrawer} />
 								) : null}
 							</Group>
 							{exercise.notes.map((note, idx) => (
@@ -1118,6 +1105,30 @@ const ExerciseDisplay = (props: {
 	) : null;
 };
 
+const RestTimerProgress = (props: { onClick: () => void }) => {
+	const [currentTimer] = useTimerAtom();
+	forceUpdateEverySecond();
+
+	if (!currentTimer) return null;
+
+	return (
+		<Progress
+			pos="absolute"
+			color="violet"
+			bottom={-6}
+			value={
+				(currentTimer.endAt.diff(dayjsLib(), "seconds") * 100) /
+				currentTimer.totalTime
+			}
+			size="xs"
+			radius="md"
+			w="100%"
+			onClick={props.onClick}
+			style={{ cursor: "pointer" }}
+		/>
+	);
+};
+
 const SetDisplay = (props: {
 	setIdx: number;
 	repsCol: boolean;
@@ -1214,17 +1225,20 @@ const SetDisplay = (props: {
 					{exercise.alreadyDoneSets[props.setIdx] ? (
 						<Box
 							onClick={() => {
-								if (set.confirmedAt) return;
 								setCurrentWorkout(
 									produce(currentWorkout, (draft) => {
-										draft.exercises[props.exerciseIdx].sets[
-											props.setIdx
-										].statistic =
-											exercise.alreadyDoneSets[props.setIdx].statistic;
+										const idxToTarget = set.confirmedAt
+											? props.setIdx + 1
+											: props.setIdx;
+										const setToTarget =
+											draft.exercises[props.exerciseIdx].sets[idxToTarget];
+										if (setToTarget)
+											setToTarget.statistic =
+												exercise.alreadyDoneSets[props.setIdx].statistic;
 									}),
 								);
 							}}
-							style={!set.confirmedAt ? { cursor: "pointer" } : undefined}
+							style={{ cursor: "pointer" }}
 						>
 							<DisplaySetStatistics
 								statistic={exercise.alreadyDoneSets[props.setIdx].statistic}

apps/frontend/app/routes/_dashboard.fitness.$entity.$id._index.tsx

@@ -1,5 +1,4 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Anchor,
@@ -20,6 +19,7 @@ import {
 	Title,
 } from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
+import { $path } from "remix-routes";
 import "@mantine/dates/styles.css";
 import { useDisclosure } from "@mantine/hooks";
 import { unstable_defineAction, unstable_defineLoader } from "@remix-run/node";

apps/frontend/app/routes/_dashboard.fitness.$entity.list.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	Accordion,
 	ActionIcon,
@@ -32,6 +31,7 @@ import {
 	IconWeight,
 } from "@tabler/icons-react";
 import type { ReactElement } from "react";
+import { $path } from "remix-routes";
 import invariant from "tiny-invariant";
 import { match } from "ts-pattern";
 import { z } from "zod";

apps/frontend/app/routes/_dashboard.fitness.exercises.$action.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	Button,
 	Container,
@@ -36,6 +35,7 @@ import {
 import { cloneDeep, processSubmission, startCase } from "@ryot/ts-utils";
 import { IconPhoto } from "@tabler/icons-react";
 import { ClientError } from "graphql-request";
+import { $path } from "remix-routes";
 import { namedAction } from "remix-utils/named-action";
 import invariant from "tiny-invariant";
 import { match } from "ts-pattern";

apps/frontend/app/routes/_dashboard.fitness.exercises.item.$id._index.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Affix,
@@ -40,6 +39,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { Fragment } from "react";
 import { Virtuoso } from "react-virtuoso";
+import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { withFragment } from "ufo";
 import { z } from "zod";

apps/frontend/app/routes/_dashboard.fitness.exercises.list.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Affix,
@@ -47,6 +46,7 @@ import {
 	IconFilter,
 	IconPlus,
 } from "@tabler/icons-react";
+import { $path } from "remix-routes";
 import { z } from "zod";
 import { zx } from "zodix";
 import { DebouncedSearchInput, FiltersModal } from "~/components/common";

apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Box,
@@ -48,6 +47,7 @@ import {
 	IconSortDescending,
 } from "@tabler/icons-react";
 import { useState } from "react";
+import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { withoutHost } from "ufo";
 import { z } from "zod";

apps/frontend/app/routes/_dashboard.media.create.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	Anchor,
 	Button,
@@ -29,6 +28,7 @@ import {
 } from "@ryot/generated/graphql/backend/graphql";
 import { camelCase, changeCase, processSubmission } from "@ryot/ts-utils";
 import { IconCalendar, IconPhoto, IconVideo } from "@tabler/icons-react";
+import { $path } from "remix-routes";
 import { z } from "zod";
 import { useCoreDetails } from "~/lib/hooks";
 import { s3FileUploader, serverGqlService } from "~/lib/utilities.server";

apps/frontend/app/routes/_dashboard.media.genre.list.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	Anchor,
 	Box,
@@ -20,6 +19,7 @@ import {
 } from "@remix-run/react";
 import { GenresListDocument } from "@ryot/generated/graphql/backend/graphql";
 import { truncate } from "@ryot/ts-utils";
+import { $path } from "remix-routes";
 import { z } from "zod";
 import { zx } from "zodix";
 import { ApplicationGrid, DebouncedSearchInput } from "~/components/common";

apps/frontend/app/routes/_dashboard.media.groups.$action.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	Box,
 	Center,
@@ -28,6 +27,7 @@ import {
 import { changeCase, startCase } from "@ryot/ts-utils";
 import { IconListCheck, IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
+import { $path } from "remix-routes";
 import invariant from "tiny-invariant";
 import { match } from "ts-pattern";
 import { withoutHost } from "ufo";

apps/frontend/app/routes/_dashboard.media.item.$id._index.tsx

@@ -1,5 +1,4 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { $path } from "@ignisda/remix-routes";
 import {
 	Accordion,
 	ActionIcon,
@@ -77,6 +76,7 @@ import {
 import type { HumanizeDurationOptions } from "humanize-duration-ts";
 import { Fragment, type ReactNode, forwardRef, useState } from "react";
 import { Virtuoso, VirtuosoGrid } from "react-virtuoso";
+import { $path } from "remix-routes";
 import { namedAction } from "remix-utils/named-action";
 import { match } from "ts-pattern";
 import { withQuery } from "ufo";

apps/frontend/app/routes/_dashboard.media.people.$action.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Box,
@@ -39,6 +38,7 @@ import {
 	IconSortDescending,
 } from "@tabler/icons-react";
 import { useState } from "react";
+import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { withoutHost } from "ufo";
 import { z } from "zod";

apps/frontend/app/routes/_dashboard.settings.users.tsx

@@ -1,4 +1,3 @@
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Avatar,
@@ -48,6 +47,7 @@ import {
 } from "@tabler/icons-react";
 import { forwardRef, useState } from "react";
 import { VirtuosoGrid } from "react-virtuoso";
+import { $path } from "remix-routes";
 import { namedAction } from "remix-utils/named-action";
 import { match } from "ts-pattern";
 import { withQuery } from "ufo";