refactor(profile): migrate edit profile modal to SolidJS

Author: AzureNightlock

frontend/src/html/popups.html

@@ -355,78 +355,3 @@
     <div class="suggestions"></div>
   </div>
 </dialog>
-
-<dialog id="editProfileModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title">Edit Profile</div>
-    <div>
-      <label>name</label>
-      <div>
-        To update your name, go to Account Settings > Account > Update account
-        name
-      </div>
-    </div>
-    <div>
-      <label>avatar</label>
-      <div>
-        To update your avatar make sure your Discord account is linked, then go
-        to Account Settings > Account > Discord Integration and click "Update
-        Avatar"
-      </div>
-    </div>
-    <div>
-      <label>bio</label>
-      <textarea class="bio" autocomplete="off" maxlength="250"></textarea>
-    </div>
-    <div>
-      <label>keyboard</label>
-      <textarea class="keyboard" autocomplete="off" maxlength="75"></textarea>
-    </div>
-    <div>
-      <label>github</label>
-      <div class="socialURL">
-        <p>https://github.com/</p>
-        <input
-          class="github"
-          type="text"
-          value=""
-          placeholder="username"
-          maxlength="39"
-        />
-      </div>
-    </div>
-    <div>
-      <label>twitter</label>
-      <div class="socialURL">
-        <p>https://x.com/</p>
-        <input
-          class="twitter"
-          type="text"
-          value=""
-          placeholder="username"
-          maxlength="20"
-        />
-      </div>
-    </div>
-    <div>
-      <label>website</label>
-      <input class="website" type="text" value="" maxlength="200" />
-    </div>
-    <div>
-      <label>badge</label>
-      <div class="badgeSelectionContainer"></div>
-    </div>
-    <div>
-      <label>public activity</label>
-      <label class="checkbox">
-        <input
-          class="editProfileShowActivityOnPublicProfile"
-          type="checkbox"
-          checked
-        />
-        <span>Include test activity graph on your public profile.</span>
-      </label>
-    </div>
-    <button class="edit-profile-submit" type="submit">save</button>
-  </form>
-</dialog>

frontend/src/styles/popups.scss

@@ -667,63 +667,4 @@ body.darkMode {
       }
     }
   }
-}
-
-#editProfileModal {
-  .modal {
-    max-width: 600px;
-    max-height: 100%;
-    label {
-      color: var(--sub-color);
-      margin-bottom: 0.25em;
-      display: block;
-    }
-    input:not([type="checkbox"]) {
-      width: 100%;
-    }
-    input[type="checkbox"] {
-      vertical-align: text-bottom;
-    }
-    textarea {
-      resize: vertical;
-      width: 100%;
-      padding: 10px;
-      line-height: 1.2rem;
-      min-height: 5rem;
-      max-height: 10rem;
-    }
-
-    .socialURL {
-      display: flex;
-    }
-
-    .socialURL > p {
-      margin-block: 0.5rem;
-      margin-inline-end: 0.5rem;
-    }
-
-    .badgeSelectionContainer {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .badgeSelectionItem {
-      width: max-content;
-      opacity: 25%;
-      cursor: pointer;
-      margin-right: 0.5rem;
-      margin-bottom: 0.5rem;
-      padding: 0;
-      border-radius: calc(var(--roundness) / 2);
-    }
-
-    .badgeSelectionItem.selected,
-    .badgeSelectionItem:hover {
-      opacity: 100%;
-    }
-
-    span {
-      color: var(--text-color);
-    }
-  }
-}
+}

frontend/src/ts/components/pages/profile/UserDetails.tsx

@@ -16,10 +16,10 @@ import { createEffect, createSignal, For, JSXElement, Show } from "solid-js";
 
 import { Snapshot } from "../../../constants/default-snapshot";
 import { addFriend, isFriend } from "../../../db";
-import * as EditProfileModal from "../../../modals/edit-profile";
 import * as UserReportModal from "../../../modals/user-report";
 import { bp } from "../../../states/breakpoints";
 import { getUserId, isAuthenticated } from "../../../states/core";
+import { showModal } from "../../../states/modals";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -36,6 +36,7 @@ import { Button } from "../../common/Button";
 import { DiscordAvatar } from "../../common/DiscordAvatar";
 import { UserBadge } from "../../common/UserBadge";
 import { UserFlags } from "../../common/UserFlags";
+import { EditProfile } from "../../popups/EditProfile";
 
 type Variant = "basic" | "hasSocials" | "hasBioOrKeyboard" | "full";
 
@@ -98,6 +99,9 @@ export function UserDetails(props: {
           isAccountPage={props.isAccountPage}
         />
       </div>
+      <Show when={props.isAccountPage === true}>
+        <EditProfile />
+      </Show>
     </div>
   );
 }
@@ -177,7 +181,7 @@ function ActionButtons(props: {
             showNoticeNotification("Banned users cannot edit their profile");
             return;
           }
-          EditProfileModal.show();
+          showModal("EditProfile");
         }}
       />
       <Button