Merge pull request #917 from hydralauncher/feat/add-undo-friendship-confirm-modal

feat: add undo friendship confirm modal and fixes text overflows

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}}"
   }
 }

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}}"
   }
 }

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);
   }
 };
 

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)",
       },
     },
   },

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({

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",

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -41,6 +41,9 @@ export function SidebarProfile() {
     return undefined;
   }, [profileBackground]);
 
+  const showPendingRequests =
+    userDetails && receivedRequests.length > 0 && !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>
   );

src/renderer/src/pages/user/user-confirm-undo-friendship-modal.tsx

@@ -0,0 +1,40 @@
+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 function 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>
+  );
+}

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={{
@@ -328,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={{

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 })}
       />

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({