Various improvements and refactors

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx

@@ -34,22 +34,16 @@ import { Button } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
-import { Header2, Header3 } from "~/components/primitives/Headers";
+import { Header2 } from "~/components/primitives/Headers";
 import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
-import {
-  Popover,
-  PopoverContent,
-  PopoverCustomTrigger,
-  PopoverTrigger,
-} from "~/components/primitives/Popover";
-import { Spinner, SpinnerWhite } from "~/components/primitives/Spinner";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { SpinnerWhite } from "~/components/primitives/Spinner";
 import { prisma } from "~/db.server";
 import { useFaviconUrl } from "~/hooks/useFaviconUrl";
-import { useOrganization } from "~/hooks/useOrganizations";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { clearCurrentProject } from "~/services/dashboardPreferences.server";
 import { DeleteOrganizationService } from "~/services/deleteOrganization.server";
@@ -59,7 +53,6 @@ import { cn } from "~/utils/cn";
 import { extractDomain, faviconUrl as buildFaviconUrl } from "~/utils/favicon";
 import {
   OrganizationParamsSchema,
-  organizationPath,
   organizationSettingsPath,
   rootPath,
 } from "~/utils/pathBuilder";
@@ -92,14 +85,11 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     throw new Response("Not found", { status: 404 });
   }
 
-  const onboardingData =
-    organization.onboardingData && typeof organization.onboardingData === "object"
-      ? (organization.onboardingData as Record<string, unknown>)
-      : {};
+  const onboardingData = toRecord(organization.onboardingData);
 
   const parsedAvatar = parseAvatar(organization.avatar, defaultAvatar);
   const lastIconHex =
-    parsedAvatar.type === "image" && "lastIconHex" in parsedAvatar && typeof parsedAvatar.lastIconHex === "string"
+    parsedAvatar.type === "image" && parsedAvatar.lastIconHex
       ? parsedAvatar.lastIconHex
       : defaultAvatarHex;
 
@@ -236,19 +226,9 @@ export const action: ActionFunction = async ({ request, params }) => {
             select: { avatar: true, onboardingData: true },
           });
 
-          const existingData =
-            existing?.onboardingData && typeof existing.onboardingData === "object"
-              ? (existing.onboardingData as Record<string, unknown>)
-              : {};
-
-          const existingAvatarJson = existing ? existing.avatar : null;
-          const existingAvatar = parseAvatar(existingAvatarJson, defaultAvatar);
-          const lastIconHex =
-            "hex" in existingAvatar
-              ? existingAvatar.hex
-              : existingAvatar.type === "image" && "lastIconHex" in existingAvatar
-                ? (existingAvatar.lastIconHex as string)
-                : undefined;
+          const existingData = toRecord(existing?.onboardingData);
+          const existingAvatar = parseAvatar(existing?.avatar ?? null, defaultAvatar);
+          const lastIconHex = extractLastIconHex(existingAvatar);
 
           await prisma.organization.update({
             where: orgWhere,
@@ -293,8 +273,9 @@ export const action: ActionFunction = async ({ request, params }) => {
         );
       }
     }
-  } catch (error: any) {
-    return json({ errors: { body: error.message } }, { status: 400 });
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : "An unexpected error occurred";
+    return json({ errors: { body: message } }, { status: 400 });
   }
 };
 
@@ -451,7 +432,7 @@ function LogoForm({
   const hex =
     "hex" in avatar
       ? avatar.hex
-      : avatar.type === "image" && "lastIconHex" in avatar && avatar.lastIconHex
+      : avatar.type === "image" && avatar.lastIconHex
         ? avatar.lastIconHex
         : organization.lastIconHex;
   const mode: "logo" | "icon" = avatar.type === "image" ? "logo" : "icon";
@@ -489,24 +470,14 @@ function LogoForm({
             <input type="hidden" name="action" value="avatar" />
             <input type="hidden" name="type" value="image" />
             <input type="hidden" name="url" value={companyUrl} />
-            <button
-              type="submit"
-              className="flex shrink-0 items-center gap-3"
-            >
-              <div
-                className={cn(
-                  "flex shrink-0 items-center justify-center rounded-full border-2 p-0.5 transition",
-                  mode === "logo" ? "border-indigo-500" : "border-charcoal-700 hover:border-charcoal-600"
-                )}
-              >
-                <div className="size-2 rounded-full" style={{ backgroundColor: mode === "logo" ? "#6366f1" : "transparent" }} />
-              </div>
+            <button type="submit" className="flex shrink-0 items-center gap-3">
+              <RadioDot active={mode === "logo"} />
             </button>
             <div className="flex flex-1 items-center gap-1.5">
               <button
                 type="submit"
                 className={cn(
-                  "box-content grid size-10 shrink-0 place-items-center rounded-sm border-2 bg-charcoal-775",
+                  iconTileClass,
                   mode === "logo"
                     ? "border-indigo-500"
                     : "border-charcoal-775 hover:border-charcoal-600"
@@ -551,14 +522,8 @@ function LogoForm({
               <input type="hidden" name="action" value="avatar" />
               <input type="hidden" name="type" value="letters" />
               <input type="hidden" name="hex" value={hex} />
-              <button
-                type="submit"
-                className={cn(
-                  "flex items-center justify-center rounded-full border-2 p-0.5 transition",
-                  mode === "icon" ? "border-indigo-500" : "border-charcoal-700 hover:border-charcoal-600"
-                )}
-              >
-                <div className="size-2 rounded-full" style={{ backgroundColor: mode === "icon" ? "#6366f1" : "transparent" }} />
+              <button type="submit">
+                <RadioDot active={mode === "icon"} />
               </button>
             </Form>
             <div className="flex flex-wrap items-center gap-1.5">
@@ -570,10 +535,8 @@ function LogoForm({
                 <button
                   type="submit"
                   className={cn(
-                    "box-content grid size-10 place-items-center rounded-sm border-2 bg-charcoal-775",
-                    avatar.type === "letters"
-                      ? undefined
-                      : "border-charcoal-775 hover:border-charcoal-600"
+                    iconTileClass,
+                    avatar.type !== "letters" && "border-charcoal-775 hover:border-charcoal-600"
                   )}
                   style={{
                     borderColor: avatar.type === "letters" ? hex : undefined,
@@ -597,10 +560,9 @@ function LogoForm({
                   <button
                     type="submit"
                     className={cn(
-                      "box-content grid size-10 place-items-center rounded-sm border-2 bg-charcoal-775",
-                      avatar.type === "icon" && avatar.name === name
-                        ? undefined
-                        : "border-charcoal-775 hover:border-charcoal-600"
+                      iconTileClass,
+                      !(avatar.type === "icon" && avatar.name === name) &&
+                        "border-charcoal-775 hover:border-charcoal-600"
                     )}
                     style={{
                       borderColor:
@@ -629,18 +591,18 @@ function LogoForm({
 function HexPopover({ avatar, hex }: { avatar: Avatar; hex: string }) {
   return (
     <Popover>
-      <PopoverTrigger className="box-content grid size-10 place-items-center rounded-sm border-2 border-charcoal-775 bg-charcoal-775 hover:border-charcoal-600">
+      <PopoverTrigger className={cn(iconTileClass, "border-charcoal-775 hover:border-charcoal-600")}>
         <img src={colorWheelIcon} className="m-0 block size-[30px] p-0" />
       </PopoverTrigger>
       <PopoverContent
         className="overflow-y-auto p-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
-        <Form method="post" className="flex w-fit min-w-40 flex-col gap-1 ">
+        <Form method="post" className="flex w-fit min-w-40 flex-col gap-1">
           <input type="hidden" name="action" value="avatar" />
-          <input type="hidden" name="type" value={avatar.type} />
-          {"name" in avatar && <input type="hidden" name="name" value={avatar.name} />}
+          <input type="hidden" name="type" value={avatar.type === "image" ? "letters" : avatar.type} />
+          {avatar.type === "icon" && <input type="hidden" name="name" value={avatar.name} />}
           {defaultAvatarColors.map((color) => (
             <Button
               key={color.hex}
@@ -674,35 +636,52 @@ function HexPopover({ avatar, hex }: { avatar: Avatar; hex: string }) {
   );
 }
 
-function avatarFromFormData(formData: FormData): AvatarT | undefined {
-  const action = formData.get("action");
-  if (!action || action !== "avatar") {
-    return undefined;
-  }
+function RadioDot({ active }: { active: boolean }) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center justify-center rounded-full border-2 p-0.5 transition",
+        active ? "border-indigo-500" : "border-charcoal-700 hover:border-charcoal-600"
+      )}
+    >
+      <div
+        className="size-2 rounded-full"
+        style={{ backgroundColor: active ? "#6366f1" : "transparent" }}
+      />
+    </div>
+  );
+}
 
-  const type = formData.get("type");
-  const hex = formData.get("hex");
+const iconTileClass = "box-content grid size-10 shrink-0 place-items-center rounded-sm border-2 bg-charcoal-775";
 
-  if (type === "letters") {
-    return {
-      type: "letters",
-      hex: hex as string,
-    };
-  }
+function toRecord(json: unknown): Record<string, unknown> {
+  return json && typeof json === "object" ? (json as Record<string, unknown>) : {};
+}
 
-  if (type === "icon") {
-    return {
-      type: "icon",
-      name: formData.get("name") as string,
-      hex: hex as string,
-    };
-  }
+function extractLastIconHex(avatar: AvatarT): string | undefined {
+  if ("hex" in avatar) return avatar.hex;
+  if (avatar.type === "image") return avatar.lastIconHex;
+  return undefined;
+}
 
-  if (type === "image") {
-    const url = formData.get("url") as string;
-    const domain = url ? extractDomain(url) : null;
-    return { type: "image", url: domain ? buildFaviconUrl(domain) : "" };
-  }
+function avatarFromFormData(formData: FormData): AvatarT | undefined {
+  const action = formData.get("action");
+  if (action !== "avatar") return undefined;
 
-  return undefined;
+  const type = formData.get("type");
+  const hex = formData.get("hex") as string;
+
+  switch (type) {
+    case "letters":
+      return { type: "letters", hex };
+    case "icon":
+      return { type: "icon", name: formData.get("name") as string, hex };
+    case "image": {
+      const url = formData.get("url") as string;
+      const domain = url ? extractDomain(url) : null;
+      return { type: "image", url: domain ? buildFaviconUrl(domain) : "" };
+    }
+    default:
+      return undefined;
+  }
 }