From 28639b38d0a1585ec784a35bf30ce61ba7612df5 Mon Sep 17 00:00:00 2001 From: Claas Date: Tue, 30 Jun 2026 23:29:08 +0200 Subject: [PATCH] Clean up directory structure --- client/src/{ => components}/Body.tsx | 0 client/src/{ => components}/ErrorDetails.tsx | 2 +- .../{ => components}/FloatingActionButton.tsx | 0 client/src/{ => components}/Icon.tsx | 0 client/src/{ => components}/Navigation.tsx | 29 +++++++++++++++---- client/src/{ => components}/TextField.tsx | 0 client/src/{ => components}/Title.tsx | 0 client/src/{ => components}/TopAppBar.tsx | 0 client/src/index.tsx | 5 ++-- client/src/routes/__root.tsx | 11 ++----- .../src/routes/_app/organizations/index.tsx | 20 ++++++------- client/src/routes/_app/projects.tsx | 14 +++++---- client/src/routes/_app/route.tsx | 18 ++++++++---- client/src/routes/_app/timer.tsx | 6 ++-- client/src/routes/_app/times.tsx | 6 ++-- client/src/routes/organizations/$id/edit.tsx | 5 ++-- .../routes/organizations/$id/members/add.tsx | 9 +++--- .../organizations/$id/members/index.tsx | 18 +++++++----- client/src/routes/organizations/new.tsx | 5 ++-- client/src/routes/projects/$id.edit.tsx | 5 ++-- client/src/routes/projects/new.tsx | 5 ++-- client/src/routes/settings.tsx | 5 ++-- client/src/routes/sign-in.tsx | 22 +++++++++++--- client/src/routes/sign-up.tsx | 15 ++++++++-- client/src/routes/times/new.tsx | 10 +++---- 25 files changed, 130 insertions(+), 80 deletions(-) rename client/src/{ => components}/Body.tsx (100%) rename client/src/{ => components}/ErrorDetails.tsx (97%) rename client/src/{ => components}/FloatingActionButton.tsx (100%) rename client/src/{ => components}/Icon.tsx (100%) rename client/src/{ => components}/Navigation.tsx (84%) rename client/src/{ => components}/TextField.tsx (100%) rename client/src/{ => components}/Title.tsx (100%) rename client/src/{ => components}/TopAppBar.tsx (100%) diff --git a/client/src/Body.tsx b/client/src/components/Body.tsx similarity index 100% rename from client/src/Body.tsx rename to client/src/components/Body.tsx diff --git a/client/src/ErrorDetails.tsx b/client/src/components/ErrorDetails.tsx similarity index 97% rename from client/src/ErrorDetails.tsx rename to client/src/components/ErrorDetails.tsx index 6c7ce13..a37d3a4 100644 --- a/client/src/ErrorDetails.tsx +++ b/client/src/components/ErrorDetails.tsx @@ -1,7 +1,7 @@ import type { ErrorComponentProps } from "@tanstack/solid-router"; import { Show } from "solid-js"; -import { useI18n } from "./i18n"; +import { useI18n } from "@/i18n"; export function ErrorDetails( properties: ErrorComponentProps & { title: string; explainer: string }, diff --git a/client/src/FloatingActionButton.tsx b/client/src/components/FloatingActionButton.tsx similarity index 100% rename from client/src/FloatingActionButton.tsx rename to client/src/components/FloatingActionButton.tsx diff --git a/client/src/Icon.tsx b/client/src/components/Icon.tsx similarity index 100% rename from client/src/Icon.tsx rename to client/src/components/Icon.tsx diff --git a/client/src/Navigation.tsx b/client/src/components/Navigation.tsx similarity index 84% rename from client/src/Navigation.tsx rename to client/src/components/Navigation.tsx index b2e3919..04cbbd6 100644 --- a/client/src/Navigation.tsx +++ b/client/src/components/Navigation.tsx @@ -2,10 +2,11 @@ import { Link } from "@tanstack/solid-router"; import { Show } from "solid-js"; import type { JSX, VoidProps } from "solid-js"; -import { useFloatingActionButton } from "@/FloatingActionButton"; -import Icon from "@/Icon"; import { useI18n } from "@/i18n"; +import { useFloatingActionButton } from "./FloatingActionButton"; +import Icon from "./Icon"; + export default function Navigation(_properties: VoidProps>) { const floatingActionButton = useFloatingActionButton(); const { t } = useI18n(); @@ -43,7 +44,11 @@ export default function Navigation(_properties: VoidProps
  • - +
  • - +
  • - + {/* Any way to avoid drawing a box around the icon? */}
  • - +
    { const { t } = useI18n(); - return ( - - ); + return ; }, }); diff --git a/client/src/routes/_app/organizations/index.tsx b/client/src/routes/_app/organizations/index.tsx index f072808..46c1fd1 100644 --- a/client/src/routes/_app/organizations/index.tsx +++ b/client/src/routes/_app/organizations/index.tsx @@ -2,8 +2,10 @@ import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/solid-q import { createFileRoute, Link } from "@tanstack/solid-router"; import { For, onCleanup, onMount, Show } from "solid-js"; -import { FloatingActionButton } from "../../../FloatingActionButton"; -import Icon from "../../../Icon"; +import { FloatingActionButton } from "@/components/FloatingActionButton"; +import Icon from "@/components/Icon"; +import { Title } from "@/components/Title"; + import { useI18n } from "../../../i18n"; import { deleteOrganization, @@ -11,7 +13,6 @@ import { pagedQuery, type Id as OrganizationId, } from "../../../organization"; -import { Title } from "../../../Title"; import { idQuery } from "../../../user"; export const Route = createFileRoute("/_app/organizations/")({ @@ -70,18 +71,17 @@ function Organizations() { return ( <> - <FloatingActionButton - to="/organizations/new" - label={t("organizations-create")} - icon="add" - /> - <main class="overflow-y-auto px-6 py-4 text-title-lg"> + <FloatingActionButton to="/organizations/new" label={t("organizations-create")} icon="add" /> + <main class="text-title-lg overflow-y-auto px-6 py-4"> <ul data-testid="organizations-list" class="grid grid-cols-[1fr_auto_auto_auto] gap-y-4"> <For each={allOrganizations()} fallback={<p>{t("organizations-loading")}</p>}> {(organization) => { return ( <Show when={!isOrganization(organization) || !isDeleting(organization.id)}> - <li data-testid="organization-item" class="bg-surface-container rounded-large col-span-full grid grid-cols-subgrid items-center p-4"> + <li + data-testid="organization-item" + class="bg-surface-container rounded-large col-span-full grid grid-cols-subgrid items-center p-4" + > <span class="ps-3">{organization.name}</span> <Show when={isOrganization(organization) && organization.id}> diff --git a/client/src/routes/_app/projects.tsx b/client/src/routes/_app/projects.tsx index 39dd8f5..2b614d3 100644 --- a/client/src/routes/_app/projects.tsx +++ b/client/src/routes/_app/projects.tsx @@ -2,11 +2,12 @@ import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/solid-q import { createFileRoute, Link } from "@tanstack/solid-router"; import { For, onCleanup, onMount, Show } from "solid-js"; -import { FloatingActionButton } from "../../FloatingActionButton"; -import Icon from "../../Icon"; +import { FloatingActionButton } from "@/components/FloatingActionButton"; +import Icon from "@/components/Icon"; +import { Title } from "@/components/Title"; + import { useI18n } from "../../i18n"; import { deleteProject, isProject, pagedQuery, type Id as ProjectId } from "../../project"; -import { Title } from "../../Title"; import { idQuery } from "../../user"; export const Route = createFileRoute("/_app/projects")({ @@ -66,13 +67,16 @@ function Projects() { <> <Title title={t("projects-title")} /> <FloatingActionButton to="/projects/new" label={t("projects-create")} icon="add" /> - <main class="overflow-y-auto px-6 py-4 text-title-lg"> + <main class="text-title-lg overflow-y-auto px-6 py-4"> <ul data-testid="projects-list" class="grid grid-cols-[1fr_auto_auto_auto] gap-y-4"> <For each={allProjects()} fallback={<p>{t("projects-loading")}</p>}> {(project) => { return ( <Show when={!isProject(project) || !isDeleting(project.id)}> - <li data-testid="project-item" class="bg-surface-container rounded-large col-span-full grid grid-cols-subgrid items-center p-4"> + <li + data-testid="project-item" + class="bg-surface-container rounded-large col-span-full grid grid-cols-subgrid items-center p-4" + > <span class="ps-3">{project.name}</span> <Show when={isProject(project) && project.id}> diff --git a/client/src/routes/_app/route.tsx b/client/src/routes/_app/route.tsx index e6ff769..42c796c 100644 --- a/client/src/routes/_app/route.tsx +++ b/client/src/routes/_app/route.tsx @@ -1,11 +1,12 @@ import { createFileRoute, Link, Outlet } from "@tanstack/solid-router"; -import Body from "../../Body"; -import Icon from "../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; +import Navigation from "@/components/Navigation"; +import { useTitle } from "@/components/Title"; +import { TopAppBar } from "@/components/TopAppBar"; + import { useI18n } from "../../i18n"; -import Navigation from "../../Navigation"; -import { useTitle } from "../../Title"; -import { TopAppBar } from "../../TopAppBar"; export const Route = createFileRoute("/_app")({ component: RouteComponent, @@ -21,7 +22,12 @@ function RouteComponent() { <TopAppBar title={title()} trailingAction={ - <Link data-testid="open-settings" to="/settings" data-position="trailing" class="action-button"> + <Link + data-testid="open-settings" + to="/settings" + data-position="trailing" + class="action-button" + > <Icon name="settings" class="fill-on-surface size-6" /> <span class="sr-only">{t("app-settings")}</span> </Link> diff --git a/client/src/routes/_app/timer.tsx b/client/src/routes/_app/timer.tsx index fcabda3..a0b66e5 100644 --- a/client/src/routes/_app/timer.tsx +++ b/client/src/routes/_app/timer.tsx @@ -2,9 +2,10 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/solid-query"; import { createFileRoute } from "@tanstack/solid-router"; import { createEffect, createMemo, createSignal, For, onCleanup, Show, Suspense } from "solid-js"; -import { FloatingActionButtonAction } from "@/FloatingActionButton"; +import { FloatingActionButtonAction } from "@/components/FloatingActionButton"; +import Icon from "@/components/Icon"; +import { Title } from "@/components/Title"; import { useI18n } from "@/i18n"; -import Icon from "@/Icon"; import { isProject, query as projectQuery, type Id as ProjectId } from "@/project"; import { query as timesQuery } from "@/time"; import { @@ -19,7 +20,6 @@ import { type TimerEntryId, TIMER_STATUS, } from "@/timer"; -import { Title } from "@/Title"; import { idQuery } from "@/user"; export const Route = createFileRoute("/_app/timer")({ diff --git a/client/src/routes/_app/times.tsx b/client/src/routes/_app/times.tsx index ec3f22b..287ce76 100644 --- a/client/src/routes/_app/times.tsx +++ b/client/src/routes/_app/times.tsx @@ -2,11 +2,11 @@ import { useInfiniteQuery, useMutation } from "@tanstack/solid-query"; import { createFileRoute } from "@tanstack/solid-router"; import { createMemo, createSignal, For, onCleanup, onMount, Show, type VoidProps } from "solid-js"; -import { FloatingActionButton } from "@/FloatingActionButton"; +import { FloatingActionButton } from "@/components/FloatingActionButton"; +import Icon from "@/components/Icon"; +import { Title } from "@/components/Title"; import { useI18n } from "@/i18n"; -import Icon from "@/Icon"; import { deleteTimes, query, updateTimes, type Time, type TimeId } from "@/time"; -import { Title } from "@/Title"; import { idQuery, type UserId } from "@/user"; // Assume time zone does not change during the runtime of the application diff --git a/client/src/routes/organizations/$id/edit.tsx b/client/src/routes/organizations/$id/edit.tsx index 89f01f9..19d137e 100644 --- a/client/src/routes/organizations/$id/edit.tsx +++ b/client/src/routes/organizations/$id/edit.tsx @@ -1,8 +1,9 @@ import { useMutation, useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, useNavigate } from "@tanstack/solid-router"; -import Body from "../../../Body"; -import Icon from "../../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { useI18n } from "../../../i18n"; import { query, updateOrganizationName, type Id as OrganizationId } from "../../../organization"; import { idQuery, type UserId } from "../../../user"; diff --git a/client/src/routes/organizations/$id/members/add.tsx b/client/src/routes/organizations/$id/members/add.tsx index 0ae7f0e..737ad4a 100644 --- a/client/src/routes/organizations/$id/members/add.tsx +++ b/client/src/routes/organizations/$id/members/add.tsx @@ -1,8 +1,9 @@ import { createFileRoute, Link, useNavigate } from "@tanstack/solid-router"; import { createSignal } from "solid-js"; -import Body from "../../../../Body"; -import Icon from "../../../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { useI18n } from "../../../../i18n"; import { addMember, type Id as OrganizationId } from "../../../../organization"; @@ -57,9 +58,7 @@ function RouteComponent() { required class="text-field col-span-2 mt-1 w-full" /> - {error() && ( - <p class="text-error col-span-2 mt-2 text-sm">{error()}</p> - )} + {error() && <p class="text-error col-span-2 mt-2 text-sm">{error()}</p>} </form> </main> <footer class="mt-6 grid grid-cols-2 gap-4 px-6 py-4"> diff --git a/client/src/routes/organizations/$id/members/index.tsx b/client/src/routes/organizations/$id/members/index.tsx index c7e7e5d..706bafa 100644 --- a/client/src/routes/organizations/$id/members/index.tsx +++ b/client/src/routes/organizations/$id/members/index.tsx @@ -1,9 +1,12 @@ -import { createFileRoute, Link, useRouter } from "@tanstack/solid-router"; import { useMutation, useQuery } from "@tanstack/solid-query"; +import { createFileRoute, Link, useRouter } from "@tanstack/solid-router"; import { For, Show, type ParentProps } from "solid-js"; -import { ErrorDetails } from "../../../../ErrorDetails"; -import Icon from "../../../../Icon"; +import { ErrorDetails } from "@/components/ErrorDetails"; +import Icon from "@/components/Icon"; +import { Title } from "@/components/Title"; +import { TopAppBar } from "@/components/TopAppBar"; + import { useI18n } from "../../../../i18n"; import { changeMemberRole, @@ -11,8 +14,6 @@ import { type Id as OrganizationId, type OrganizationRole, } from "../../../../organization"; -import { Title } from "../../../../Title"; -import { TopAppBar } from "../../../../TopAppBar"; import { idQuery, type UserId } from "../../../../user"; type OrganizationMember = { id: UserId; name: string; username: string; role: OrganizationRole }; @@ -118,9 +119,10 @@ function RouteComponent() { {(user) => ( <li class="text-title-lg bg-surface-container rounded-large grid grid-cols-[1fr_auto_auto] items-center gap-2 py-2 ps-6 pe-2"> <span> - <span class="font-semibold">{user.name}</span>{" "} - <span>({user.username})</span>{" "} - <span class="text-label-md text-on-surface-variant">{roleLabel(user.role, t)}</span> + <span class="font-semibold">{user.name}</span> <span>({user.username})</span>{" "} + <span class="text-label-md text-on-surface-variant"> + {roleLabel(user.role, t)} + </span> </span> <Show when={canChangeRoles() && user.id !== currentUserId()}> <select diff --git a/client/src/routes/organizations/new.tsx b/client/src/routes/organizations/new.tsx index 435e1ec..94c181a 100644 --- a/client/src/routes/organizations/new.tsx +++ b/client/src/routes/organizations/new.tsx @@ -1,8 +1,9 @@ import { useMutation, useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, useNavigate } from "@tanstack/solid-router"; -import Body from "../../Body"; -import Icon from "../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { useI18n } from "../../i18n"; import { createOrganization, query } from "../../organization"; import { idQuery } from "../../user"; diff --git a/client/src/routes/projects/$id.edit.tsx b/client/src/routes/projects/$id.edit.tsx index f3bd138..af37bf3 100644 --- a/client/src/routes/projects/$id.edit.tsx +++ b/client/src/routes/projects/$id.edit.tsx @@ -2,8 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, useNavigate } from "@tanstack/solid-router"; import { For, Suspense } from "solid-js"; -import Body from "../../Body"; -import Icon from "../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { useI18n } from "../../i18n"; import { query as organizationQuery, diff --git a/client/src/routes/projects/new.tsx b/client/src/routes/projects/new.tsx index 57ced68..89fd539 100644 --- a/client/src/routes/projects/new.tsx +++ b/client/src/routes/projects/new.tsx @@ -2,8 +2,9 @@ import { useQuery, useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, useNavigate } from "@tanstack/solid-router"; import { For, Suspense } from "solid-js"; -import Body from "../../Body"; -import Icon from "../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { useI18n } from "../../i18n"; import { isOrganization, query } from "../../organization"; import { idQuery } from "../../user"; diff --git a/client/src/routes/settings.tsx b/client/src/routes/settings.tsx index 89bb55f..f9ce94f 100644 --- a/client/src/routes/settings.tsx +++ b/client/src/routes/settings.tsx @@ -2,9 +2,10 @@ import { useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, useNavigate } from "@tanstack/solid-router"; import { createSignal, For } from "solid-js"; -import Body from "../Body"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { type SupportedLocale, useI18n } from "../i18n"; -import Icon from "../Icon"; import { QUERY_BASE } from "../user"; export const Route = createFileRoute("/settings")({ diff --git a/client/src/routes/sign-in.tsx b/client/src/routes/sign-in.tsx index 11cf1e3..0dffe4b 100644 --- a/client/src/routes/sign-in.tsx +++ b/client/src/routes/sign-in.tsx @@ -2,7 +2,8 @@ import { useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, redirect, useNavigate } from "@tanstack/solid-router"; import { createSignal } from "solid-js"; -import Body from "../Body"; +import Body from "@/components/Body"; + import { useI18n } from "../i18n"; import { idQuery, type UserId } from "../user"; import { Route as TimesRoute } from "./_app/times"; @@ -89,7 +90,10 @@ function SignIn() { <main class="grid h-full items-end"> <h1 class="text-primary text-display-lg text-center font-serif">{t("sign-in-welcome")}</h1> <form onSubmit={handleSubmit} class="rounded-3xl text-base leading-6"> - <p data-testid="sign-in-error" class="text-error text-body-lg min-h-6 text-center transition empty:opacity-0"> + <p + data-testid="sign-in-error" + class="text-error text-body-lg min-h-6 text-center transition empty:opacity-0" + > {error()} </p> <label for="username" class="text-label-lg text-on-surface-variant block"> @@ -119,10 +123,20 @@ function SignIn() { /> {/* TODO loading state */} - <button data-testid="sign-in-submit" type="submit" data-variant="filled" class="button mt-6 w-full"> + <button + data-testid="sign-in-submit" + type="submit" + data-variant="filled" + class="button mt-6 w-full" + > {t("sign-in-submit")} </button> - <Link data-testid="sign-in-go-sign-up" to="/sign-up" data-variant="text" class="button mt-4 w-full"> + <Link + data-testid="sign-in-go-sign-up" + to="/sign-up" + data-variant="text" + class="button mt-4 w-full" + > {t("sign-in-go-sign-up")} </Link> </form> diff --git a/client/src/routes/sign-up.tsx b/client/src/routes/sign-up.tsx index 6365aa2..ddf7118 100644 --- a/client/src/routes/sign-up.tsx +++ b/client/src/routes/sign-up.tsx @@ -2,7 +2,8 @@ import { useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, redirect, useNavigate } from "@tanstack/solid-router"; import { createSignal } from "solid-js"; -import Body from "../Body"; +import Body from "@/components/Body"; + import { useI18n } from "../i18n"; import { idQuery, UnauthenticatedError, type UserId } from "../user"; @@ -85,7 +86,10 @@ function RouteComponent() { {t("sign-up-create-account")} </h1> <form onSubmit={handleSubmit} class="rounded-3xl text-base leading-6"> - <p data-testid="sign-up-error" class="text-error text-body-lg min-h-6 text-center transition empty:opacity-0"> + <p + data-testid="sign-up-error" + class="text-error text-body-lg min-h-6 text-center transition empty:opacity-0" + > {error()} </p> <label for="name" class="text-label-lg text-on-surface-variant block"> @@ -127,7 +131,12 @@ function RouteComponent() { /> {/* TODO loading state */} - <button data-testid="sign-up-submit" type="submit" data-variant="filled" class="button mt-6 w-full"> + <button + data-testid="sign-up-submit" + type="submit" + data-variant="filled" + class="button mt-6 w-full" + > {t("sign-up-submit")} </button> {/* Do not need to pass redirect as a user that signs up should not have been on the app before to be redirected to where they left off */} diff --git a/client/src/routes/times/new.tsx b/client/src/routes/times/new.tsx index 20e9762..a2406f8 100644 --- a/client/src/routes/times/new.tsx +++ b/client/src/routes/times/new.tsx @@ -2,8 +2,9 @@ import { useQuery, useQueryClient } from "@tanstack/solid-query"; import { createFileRoute, Link, useNavigate } from "@tanstack/solid-router"; import { For, Suspense } from "solid-js"; -import Body from "../../Body"; -import Icon from "../../Icon"; +import Body from "@/components/Body"; +import Icon from "@/components/Icon"; + import { useI18n } from "../../i18n"; import { isProject, query } from "../../project"; import { idQuery } from "../../user"; @@ -121,10 +122,7 @@ function RouteComponent() { class="text-field col-span-full mt-1 w-full" /> - <label - for="start" - class="text-label-lg text-on-surface-variant row-start-3 mt-4 block" - > + <label for="start" class="text-label-lg text-on-surface-variant row-start-3 mt-4 block"> {t("time-new-start-label")} </label> <input -- 2.51.2