refactor(profile): migrate edit profile modal to SolidJS (@AzureNightlock, @fehmer)

[AzureNightlock]

Description

This PR: Migrates the Edit Profile modal to a SolidJS component

Changes Made:

• Added the new SolidJS + Tanstack EditProfile popup component
• Sends the updated profile details to the backend when the form is saved
• Immediately updates the page to show the new updated values
• Integrated the new EditProfile popup into UserDetails
• Deleted the edit-profile.ts and the popup dialog from popups.html
• Removed the event-handler from account.ts
• Removed popups.scss for edit-profile

Additional Changes Made:

• Changed twitter schema maxlength to 15 instead of 20
• Using tailwind instead of popups.scss
• Added EditProfile to modals.ts

Checks

• Check if any open issues are related to this PR; if so, be sure to tag them below.
• Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

Closes #7683

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[AzureNightlock]

Hey @fehmer I have made the changes as you have requested. Please take a look and tell me what you think!

[AzureNightlock]

Changes Made:

• Changed SubmitButton.tsx to use isDefaultValue instead of isDirty
• Renamed skipDirtyCheck to skipUnchangedCheck and applied it to files that use it
• Moved EditProfile.tsx to modals and renamed it to EditProfileModal.tsx
• Changed the length of the Twitter and GitHub textbox
• Changed the CSS for the character counter for Bio and Keyboard

[AzureNightlock]

I have created a fresh pr with the merged changes

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[AzureNightlock]

I have fixed the formatting issue and as for the ci-fe issue, its just the early return at: https://github.com/monkeytypegame/monkeytype/pull/7900/changes#diff-e77a791bc9db0467c326ea13f987cb523782a3d8e2df6a0cc86dd67a9a1f2fedR27

The suggestion is to wrap it in fragments or but its not done anywhere in the codebase. I could make this change if you would like me to?

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[fehmer]

hi @AzureNightlock, i pushed the fixes. I think it looks good enough.

Could you please solve #7900 (comment) ?
nevermind, merging master fixed it

[AzureNightlock]

Hey @fehmer sorry I took a while. I noticed that the ui doesn't refresh for me after submitting. The page remains the same with the old values. Also is it okay to add a false property to balloon and based on whether balloon is false or not we add different independant styles?

The spacing is a bit off but it does look a bit like the original button

import { JSXElement, Show } from "solid-js";

import {
  badges,
  UserBadge as UserBadgeType,
} from "../../controllers/badge-controller";
import { cn } from "../../utils/cn";
import { Balloon, BalloonProps } from "./Balloon";
import { Fa } from "./Fa";

export function UserBadge(props: {
  id?: number;
  iconOnly?: true;
  class?: string;
  balloon?: Omit<BalloonProps, "text"> | false;
  hideTextOnSmallScreens?: boolean;
}): JSXElement {
  const badge = (): UserBadgeType | undefined =>
    props.id !== undefined ? badges[props.id] : undefined;
  return (
    <Show when={badge() !== undefined}>
      <Show when={props.balloon === false}>
        <Show when={badge()?.icon}>
          <Fa
            icon={badge()?.icon ?? "fa-question"}
            fixedWidth={props.iconOnly === true}
          />
          <Show when={!props.iconOnly}>
            <span
              class={cn(
                "pl-[0.75em]",
                (props.hideTextOnSmallScreens ?? true) && "hidden md:inline",
              )}
            >
              {badge()?.name}
            </span>
          </Show>
        </Show>
      </Show>
      <Show when={props.balloon !== false}>
        <Balloon
          class={cn(
            "rounded-[0.5em] px-[0.5em] py-[0.25em] text-em-xs",
            props.class,
          )}
          text={badge()?.description ?? ""}
          {...props.balloon}
          style={{
            background: badge()?.background ?? "inherit",
            color: badge()?.color ?? "inherit",
            ...badge()?.customStyle,
          }}
        >
          <Show when={badge()?.icon}>
            <Fa
              icon={badge()?.icon ?? "fa-question"}
              fixedWidth={props.iconOnly === true}
            />
            <Show when={!props.iconOnly}>
              <span
                class={cn(
                  "pl-[0.75em]",
                  (props.hideTextOnSmallScreens ?? true) && "hidden md:inline",
                )}
              >
                {badge()?.name}
              </span>
            </Show>
          </Show>
        </Balloon>
      </Show>
    </Show>
  );
}

It's very tedious but gets the job done ig, I can't find any other alternatives

[fehmer]

tbh i don't mind the balloon on the badge.

The update issue should be fixed.

[AzureNightlock]

I have found a way to make the badge more appealing by using a tailwind override please take a look and let me know what you think.

<form.Field name="badgeId">
            {(field) => (
              <div class="flex flex-wrap gap-2">
                <Button
                  class={cn("rounded-[0.5em] p-1.5 opacity-25", {
                    "opacity-100": field().state.value === -1,
                  })}
                  active={field().state.value === -1}
                  onClick={() => field().handleChange(-1)}
                >
                  <Fa icon="fa-frown-open" />
                  none
                </Button>
                <For each={badges}>
                  {(badge) => (
                    <Button
                      class={cn("p-0 opacity-25", {
                        "opacity-100": field().state.value === badge.id,
                      })}
                      active={field().state.value === badge.id}
                      onClick={() => field().handleChange(badge.id)}
                    >
                      <UserBadge id={badge.id} class="p-1.5 text-em-sm!" /> // <-- here
                    </Button>
                  )}
                </For>
              </div>
            )}
          </form.Field>   
          

The Change: Uses p-1.5 and overrides text-em-xs in UserBadge

Current:

New:

[fehmer]

hi @AzureNightlock, looks good

[AzureNightlock]

Hey @fehmer the snapshot still isn't refreshing from me. Only after I refresh the page does it refresh.

snapshot-not-refreshing.mp4

I tried it with DB.setSnapshot aswell and got the same result (makes no difference but yeah)

[fehmer]

Hi @AzureNightlock ,

i was testing with the bio, not the selected badge. Should be fixed now 😊

[AzureNightlock]

Hey @fehmer Just tested it and everything works great! There is a very small CSS issue where the none button has a completely different hover effect compared to the other badges. I have tried to fix this but it seems like the button uses a
default styling unlike userbadge and I'm not sure how to fix it

Other than that everything looks great

[fehmer]

hi @AzureNightlock , good catch, should be fixed now