From fb60c91c8399ef0b556da22892f14d12f3fc3b6e Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:23:32 -0300
Subject: [PATCH 1/7] feat: add undo friendship confirm modal

---
 src/locales/en/translation.json               |  3 +-
 src/locales/pt/translation.json               |  3 +-
 .../user-confirm-undo-friendship-modal.tsx    | 42 +++++++++++++++++++
 src/renderer/src/pages/user/user-content.tsx  | 16 ++++---
 4 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index e2726b79..08c9fda2 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -270,6 +270,7 @@
     "pending": "Pending",
     "no_pending_invites": "You have no pending invites",
     "no_blocked_users": "You have no blocked users",
-    "friend_code_copied": "Friend code copied"
+    "friend_code_copied": "Friend code copied",
+    "undo_friendship_modal_text": "This will undo your friendship with {{displayName}}"
   }
 }
diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
index 36d38c96..a97a81cf 100644
--- a/src/locales/pt/translation.json
+++ b/src/locales/pt/translation.json
@@ -273,6 +273,7 @@
     "pending": "Pendentes",
     "no_pending_invites": "Você não possui convites de amizade pendentes",
     "no_blocked_users": "Você não tem nenhum usuário bloqueado",
-    "friend_code_copied": "Código de amigo copiado"
+    "friend_code_copied": "Código de amigo copiado",
+    "undo_friendship_modal_text": "Isso irá remover sua amizade com {{displayName}}"
   }
 }
diff --git a/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
new file mode 100644
index 00000000..cf2a0415
--- /dev/null
+++ b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
@@ -0,0 +1,42 @@
+import { Button, Modal } from "@renderer/components";
+import * as styles from "./user.css";
+import { useTranslation } from "react-i18next";
+
+export interface UserConfirmUndoFriendshipModalProps {
+  visible: boolean;
+  displayName: string;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export const UserConfirmUndoFriendshipModal = ({
+  visible,
+  displayName,
+  onConfirm,
+  onClose,
+}: UserConfirmUndoFriendshipModalProps) => {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        title={t("sign_out_modal_title")}
+        onClose={onClose}
+      >
+        <div className={styles.signOutModalContent}>
+          <p>{t("undo_friendship_modal_text", { displayName })}</p>
+          <div className={styles.signOutModalButtonsContainer}>
+            <Button onClick={onConfirm} theme="danger">
+              {t("undo_friendship")}
+            </Button>
+
+            <Button onClick={onClose} theme="primary">
+              {t("cancel")}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index c334389e..fb092d06 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/src/renderer/src/pages/user/user-content.tsx
@@ -34,6 +34,7 @@ import { UserProfileSettingsModal } from "./user-profile-settings-modal";
 import { UserSignOutModal } from "./user-sign-out-modal";
 import { UserFriendModalTab } from "../shared-modals/user-friend-modal";
 import { UserBlockModal } from "./user-block-modal";
+import { UserConfirmUndoFriendshipModal } from "./user-confirm-undo-friendship-modal";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 
@@ -68,6 +69,7 @@ export function UserContent({
     useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
   const [showUserBlockModal, setShowUserBlockModal] = useState(false);
+  const [showUndoFriendshipModal, setShowUndoFriendshipModal] = useState(false);
   const [currentGame, setCurrentGame] = useState<GameRunning | null>(null);
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
@@ -213,17 +215,12 @@ export function UserContent({
     }
 
     if (userProfile.relation.status === "ACCEPTED") {
-      const userId =
-        userProfile.relation.AId === userDetails?.id
-          ? userProfile.relation.BId
-          : userProfile.relation.AId;
-
       return (
         <>
           <Button
             theme="outline"
             className={styles.cancelRequestButton}
-            onClick={() => handleFriendAction(userId, "UNDO")}
+            onClick={() => setShowUndoFriendshipModal(true)}
           >
             <XCircleIcon size={28} /> {t("undo_friendship")}
           </Button>
@@ -291,6 +288,13 @@ export function UserContent({
         displayName={userProfile.displayName}
       />
 
+      <UserConfirmUndoFriendshipModal
+        visible={showUndoFriendshipModal}
+        onClose={() => setShowUndoFriendshipModal(false)}
+        onConfirm={() => handleFriendAction(userProfile.id, "UNDO")}
+        displayName={userProfile.displayName}
+      />
+
       <section
         className={styles.profileContentBox}
         style={{

From 9e02504e143338d4d0d60f273cb2cc11cbcf8a91 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:45:27 -0300
Subject: [PATCH 2/7] fix: profile display name

---
 src/renderer/src/pages/user/user-content.tsx             | 4 +++-
 .../user-profile-settings-modal/user-edit-profile.tsx    | 1 +
 src/renderer/src/pages/user/user.css.ts                  | 9 +++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index fb092d06..f4a46ccd 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/src/renderer/src/pages/user/user-content.tsx
@@ -332,7 +332,9 @@ export function UserContent({
         </div>
 
         <div className={styles.profileInformation}>
-          <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
+          <h2 className={styles.profileDisplayName}>
+            {userProfile.displayName}
+          </h2>
           {currentGame && (
             <div
               style={{
diff --git a/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx b/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
index f6a430ba..6ecdb8a1 100644
--- a/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
+++ b/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
@@ -126,6 +126,7 @@ export const UserEditProfile = ({
         value={form.displayName}
         required
         minLength={3}
+        maxLength={50}
         containerProps={{ style: { width: "100%" } }}
         onChange={(e) => setForm({ ...form, displayName: e.target.value })}
       />
diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts
index 4e1c2139..6bcb30b0 100644
--- a/src/renderer/src/pages/user/user.css.ts
+++ b/src/renderer/src/pages/user/user.css.ts
@@ -23,6 +23,7 @@ export const profileContentBox = style({
 
 export const profileAvatarContainer = style({
   width: "96px",
+  minWidth: "96px",
   height: "96px",
   borderRadius: "50%",
   display: "flex",
@@ -100,6 +101,14 @@ export const profileInformation = style({
   alignItems: "flex-start",
   color: "#c0c1c7",
   zIndex: 1,
+  overflow: "hidden",
+});
+
+export const profileDisplayName = style({
+  fontWeight: "bold",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  width: "100%",
 });
 
 export const profileContent = style({

From 3293320926e74a867a39188231604840c0f0c3aa Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 13:21:21 -0300
Subject: [PATCH 3/7] fix: sidebar profile layout

---
 .../components/sidebar/sidebar-profile.css.ts | 20 +++++---------
 .../components/sidebar/sidebar-profile.tsx    | 27 ++++++++++---------
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
index ba29c850..d97b0c44 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
@@ -7,22 +7,24 @@ export const profileContainerBackground = createVar();
 export const profileContainer = style({
   background: profileContainerBackground,
   position: "relative",
+  display: "flex",
+  gap: `${SPACING_UNIT}px`,
   cursor: "pointer",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.15)",
   },
+  borderBottom: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
 });
 
 export const profileButton = style({
   display: "flex",
   cursor: "pointer",
   transition: "all ease 0.1s",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
   color: vars.color.muted,
-  borderBottom: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
   width: "100%",
-  zIndex: "10",
+  overflow: "hidden",
 });
 
 export const profileButtonContent = style({
@@ -75,16 +77,6 @@ export const profileButtonTitle = style({
   whiteSpace: "nowrap",
 });
 
-export const friendRequestContainer = style({
-  position: "absolute",
-  padding: "8px",
-  right: `${SPACING_UNIT}px`,
-  display: "flex",
-  top: 0,
-  bottom: 0,
-  alignItems: "center",
-});
-
 export const friendRequestButton = style({
   color: vars.color.success,
   cursor: "pointer",
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 069831cb..e41d7da2 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -41,6 +41,9 @@ export function SidebarProfile() {
     return undefined;
   }, [profileBackground]);
 
+  const showPendingRequests =
+    userDetails && receivedRequests.length > -1 && !gameRunning;
+
   return (
     <div
       className={styles.profileContainer}
@@ -88,19 +91,17 @@ export function SidebarProfile() {
           )}
         </div>
       </button>
-      {userDetails && receivedRequests.length > 0 && !gameRunning && (
-        <div className={styles.friendRequestContainer}>
-          <button
-            type="button"
-            className={styles.friendRequestButton}
-            onClick={() =>
-              showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-            }
-          >
-            <PersonAddIcon size={24} />
-            {receivedRequests.length}
-          </button>
-        </div>
+      {showPendingRequests && (
+        <button
+          type="button"
+          className={styles.friendRequestButton}
+          onClick={() =>
+            showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
+          }
+        >
+          <PersonAddIcon size={24} />
+          {receivedRequests.length}
+        </button>
       )}
     </div>
   );

From 0bedb7c9b7e237e3bf872b1754f21782c624e4ce Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 14:12:42 -0300
Subject: [PATCH 4/7] fix: header overflow text

---
 src/renderer/src/components/header/header.css.ts        | 5 +++++
 src/renderer/src/components/header/header.tsx           | 2 +-
 src/renderer/src/components/sidebar/sidebar-profile.tsx | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/header/header.css.ts b/src/renderer/src/components/header/header.css.ts
index 0e82aaef..12855986 100644
--- a/src/renderer/src/components/header/header.css.ts
+++ b/src/renderer/src/components/header/header.css.ts
@@ -104,6 +104,7 @@ export const section = style({
   alignItems: "center",
   gap: `${SPACING_UNIT * 2}px`,
   height: "100%",
+  overflow: "hidden",
 });
 
 export const backButton = recipe({
@@ -136,11 +137,15 @@ export const backButton = recipe({
 export const title = recipe({
   base: {
     transition: "all ease 0.2s",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
   },
   variants: {
     hasBackButton: {
       true: {
         transform: "translateX(28px)",
+        width: "calc(100% - 28px)",
       },
     },
   },
diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx
index d3315098..c37e4b44 100644
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -72,7 +72,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
           isWindows: window.electron.platform === "win32",
         })}
       >
-        <section className={styles.section}>
+        <section className={styles.section} style={{ flex: 1 }}>
           <button
             type="button"
             className={styles.backButton({
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index e41d7da2..6b2c990e 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -42,7 +42,7 @@ export function SidebarProfile() {
   }, [profileBackground]);
 
   const showPendingRequests =
-    userDetails && receivedRequests.length > -1 && !gameRunning;
+    userDetails && receivedRequests.length > 0 && !gameRunning;
 
   return (
     <div

From cc10186ec3fa1e0e69a2dc374d4f469e8b2c7928 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:24:32 -0300
Subject: [PATCH 5/7] feat: add trycatch for handleDeepLinkPath

---
 src/main/index.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index e288302b..11eb479d 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -86,10 +86,15 @@ app.on("browser-window-created", (_, window) => {
 
 const handleDeepLinkPath = (uri?: string) => {
   if (!uri) return;
-  const url = new URL(uri);
 
-  if (url.host === "install-source") {
-    WindowManager.redirect(`settings${url.search}`);
+  try {
+    const url = new URL(uri);
+
+    if (url.host === "install-source") {
+      WindowManager.redirect(`settings${url.search}`);
+    }
+  } catch (error) {
+    logger.error("Error handling deep link", uri, error);
   }
 };
 

From 40d2b36a20461ef7dc1a9a391ba35dab6074312d Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 30 Aug 2024 10:06:10 -0300
Subject: [PATCH 6/7] feat: remove unnecessary react fragment

---
 .../user-confirm-undo-friendship-modal.tsx    | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
index cf2a0415..ad83bc00 100644
--- a/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
+++ b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
@@ -18,25 +18,23 @@ export const UserConfirmUndoFriendshipModal = ({
   const { t } = useTranslation("user_profile");
 
   return (
-    <>
-      <Modal
-        visible={visible}
-        title={t("sign_out_modal_title")}
-        onClose={onClose}
-      >
-        <div className={styles.signOutModalContent}>
-          <p>{t("undo_friendship_modal_text", { displayName })}</p>
-          <div className={styles.signOutModalButtonsContainer}>
-            <Button onClick={onConfirm} theme="danger">
-              {t("undo_friendship")}
-            </Button>
+    <Modal
+      visible={visible}
+      title={t("sign_out_modal_title")}
+      onClose={onClose}
+    >
+      <div className={styles.signOutModalContent}>
+        <p>{t("undo_friendship_modal_text", { displayName })}</p>
+        <div className={styles.signOutModalButtonsContainer}>
+          <Button onClick={onConfirm} theme="danger">
+            {t("undo_friendship")}
+          </Button>
 
-            <Button onClick={onClose} theme="primary">
-              {t("cancel")}
-            </Button>
-          </div>
+          <Button onClick={onClose} theme="primary">
+            {t("cancel")}
+          </Button>
         </div>
-      </Modal>
-    </>
+      </div>
+    </Modal>
   );
 };

From d4d94dfc4cf3ff401a846596d40a843fe32ff8e5 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 30 Aug 2024 10:13:18 -0300
Subject: [PATCH 7/7] feat: use function expression for component

---
 .../src/pages/user/user-confirm-undo-friendship-modal.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
index ad83bc00..cfdb5d06 100644
--- a/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
+++ b/src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx
@@ -9,12 +9,12 @@ export interface UserConfirmUndoFriendshipModalProps {
   onClose: () => void;
 }
 
-export const UserConfirmUndoFriendshipModal = ({
+export function UserConfirmUndoFriendshipModal({
   visible,
   displayName,
   onConfirm,
   onClose,
-}: UserConfirmUndoFriendshipModalProps) => {
+}: UserConfirmUndoFriendshipModalProps) {
   const { t } = useTranslation("user_profile");
 
   return (
@@ -37,4 +37,4 @@ export const UserConfirmUndoFriendshipModal = ({
       </div>
     </Modal>
   );
-};
+}