From bf4fcfeefcf1fccedf197d7bd74e589ba372ca56 Mon Sep 17 00:00:00 2001
From: Xavier Abad <xabadgo01@gmail.com>
Date: Tue, 20 Jan 2026 09:49:20 +0100
Subject: [PATCH 1/6] refactor(share): extract components

---
 .../components/ShareDialog/ShareDialog.tsx    | 300 +++---------------
 .../GeneralView/InvitedUsersList.tsx          |  72 +++++
 .../GeneralView/ProtectWithPassword.tsx       |  58 ++++
 .../GeneralView/UserRoleSelection.tsx         | 151 +++++++++
 .../ShareDialog/components/Header.tsx         |  49 +++
 5 files changed, 376 insertions(+), 254 deletions(-)
 create mode 100644 src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx
 create mode 100644 src/app/drive/components/ShareDialog/components/GeneralView/ProtectWithPassword.tsx
 create mode 100644 src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx
 create mode 100644 src/app/drive/components/ShareDialog/components/Header.tsx

diff --git a/src/app/drive/components/ShareDialog/ShareDialog.tsx b/src/app/drive/components/ShareDialog/ShareDialog.tsx
index 92d99cb4df..408fcc3783 100644
--- a/src/app/drive/components/ShareDialog/ShareDialog.tsx
+++ b/src/app/drive/components/ShareDialog/ShareDialog.tsx
@@ -1,31 +1,16 @@
 import { Popover } from '@headlessui/react';
 import { SharingMeta } from '@internxt/sdk/dist/drive/share/types';
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
-import {
-  ArrowLeft,
-  CaretDown,
-  Check,
-  CheckCircle,
-  Globe,
-  Link,
-  Question,
-  UserPlus,
-  Users,
-  X,
-} from '@phosphor-icons/react';
+import { CaretDown, CheckCircle, UserPlus } from '@phosphor-icons/react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { SharePasswordDisableDialog } from 'app/share/components/SharePasswordDisableDialog/SharePasswordDisableDialog';
-import { SharePasswordInputDialog } from 'app/share/components/SharePasswordInputDialog/SharePasswordInputDialog';
 import { MAX_SHARED_NAME_LENGTH } from '../../../../views/Shared/SharedView';
-import { Avatar, Button, Checkbox, Loader, Modal } from '@internxt/ui';
-import { DELAY_SHOW_MS } from 'components/TooltipElement';
+import { Avatar, Button, Modal } from '@internxt/ui';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { Role } from 'app/store/slices/sharedLinks/types';
 import { uiActions } from 'app/store/slices/ui';
 import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import { Tooltip } from 'react-tooltip';
 import errorService from 'services/error.service';
 import localStorageService from 'services/local-storage.service';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
@@ -36,11 +21,8 @@ import { sharedThunks } from 'app/store/slices/sharedLinks';
 import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
 import { DriveItemData } from 'app/drive/types';
 import ShareInviteDialog from '../ShareInviteDialog/ShareInviteDialog';
-import StopSharingItemDialog from '../StopSharingItemDialog/StopSharingItemDialog';
 import './ShareDialog.scss';
 import envService from 'services/env.service';
-import { User } from './components/User';
-import { InvitedUsersSkeletonLoader } from './components/InvitedUsersSkeletonLoader';
 import {
   AccessMode,
   InvitedUserProps,
@@ -53,7 +35,14 @@ import {
 } from './types';
 import navigationService from 'services/navigation.service';
 import { Service } from '@internxt/sdk/dist/drive/payments/types/tiers';
+import { SharePasswordInputDialog } from 'app/share/components/SharePasswordInputDialog/SharePasswordInputDialog';
 import { UpgradeDialog } from '../UpgradeDialog/UpgradeDialog';
+import { SharePasswordDisableDialog } from 'app/share/components/SharePasswordDisableDialog/SharePasswordDisableDialog';
+import StopSharingItemDialog from '../StopSharingItemDialog/StopSharingItemDialog';
+import { ProtectWithPassword } from './components/GeneralView/ProtectWithPassword';
+import { UserRoleSelection } from './components/GeneralView/UserRoleSelection';
+import { InvitedUsersList } from './components/GeneralView/InvitedUsersList';
+import { Header } from './components/Header';
 
 const isRequestPending = (status: RequestStatus): boolean =>
   status !== REQUEST_STATUS.DENIED && status !== REQUEST_STATUS.ACCEPTED;
@@ -97,7 +86,6 @@ const getLocalUserData = () => {
   return ownerData;
 };
 
-// TODO: THIS IS TEMPORARY, REMOVE WHEN NEED TO SHOW OTHER ROLES
 const filterEditorAndReader = (users: Role[]): Role[] => {
   return users.filter((user) => user.name === 'EDITOR' || user.name === 'READER');
 };
@@ -142,6 +130,7 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     item: itemToShare?.item as AdvancedSharedItem,
     userEmail: props?.user?.email,
   });
+  const isProtectWithPasswordOptionAvailable = accessMode === 'public' && !isLoading && isUserOwner;
   const closeSelectedUserPopover = () => setSelectedUserListIndex(null);
 
   const resetDialogData = () => {
@@ -209,7 +198,7 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
       }));
 
       setInvitedUsers(invitedUsersListParsed);
-    } catch (error) {
+    } catch {
       // the server throws an error when there are no users with shared item,
       // that means that the local user is the owner as there is nobody else with this shared file.
       if (isUserOwner) {
@@ -293,7 +282,7 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     try {
       await copyTextToClipboard(`${envService.getVariable('hostname')}/shared/?folderuuid=${itemToShare?.item.uuid}`);
       notificationsService.show({ text: translate('shared-links.toast.copy-to-clipboard'), type: ToastType.Success });
-    } catch (error) {
+    } catch {
       notificationsService.show({
         text: translate('modals.shareModal.errors.copy-to-clipboard'),
         type: ToastType.Error,
@@ -328,7 +317,7 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     closeSelectedUserPopover();
   };
 
-  const onRemoveUser = async (user) => {
+  const onRemoveUser = async (user: InvitedUserProps) => {
     if (user) {
       const hasBeenRemoved = await dispatch(
         sharedThunks.removeUserFromSharedFolder({
@@ -498,42 +487,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     }
   };
 
-  const Header = (headerProps: ViewProps): JSX.Element => {
-    const headers = {
-      general: (
-        <>
-          <span
-            className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium"
-            title={translate('modals.shareModal.title', { name: itemToShare?.item.name })}
-          >
-            {translate('modals.shareModal.title', { name: itemToShare?.item.name })}
-          </span>
-          <div className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md bg-black/0 transition-all duration-200 ease-in-out hover:bg-black/4 active:bg-black/8">
-            <X onClick={() => (isLoading ? null : onClose())} size={22} />
-          </div>
-        </>
-      ),
-      invite: (
-        <div className="flex items-center space-x-4">
-          <ArrowLeft className="cursor-pointer" onClick={() => setView('general')} size={24} />
-          <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium">
-            {translate('modals.shareModal.invite.title')}
-          </span>
-        </div>
-      ),
-      requests: (
-        <div className="flex items-center space-x-4">
-          <ArrowLeft className="cursor-pointer" onClick={() => setView('general')} size={24} />
-          <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium">
-            {translate('modals.shareModal.requests.title')}
-          </span>
-        </div>
-      ),
-    };
-
-    return headers[headerProps.view];
-  };
-
   const View = (viewProps: ViewProps): JSX.Element => {
     const view = {
       general: (
@@ -568,205 +521,45 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
                 )}
               </div>
             </div>
+
             {/* List of users invited to the shared item */}
-            <div
-              ref={userList}
-              className="mt-1.5 flex flex-col overflow-y-auto"
-              style={{ minHeight: '224px', maxHeight: '336px' }}
-            >
-              {invitedUsers.length === 0 && isLoading ? (
-                <>
-                  {Array.from({ length: 4 }, (_, i) => (
-                    <InvitedUsersSkeletonLoader key={`loader-${i}`} />
-                  ))}
-                </>
-              ) : (
-                invitedUsers
-                  .sort((a, b) => {
-                    if (a.email === props.user.email && b.email !== props.user.email) return -1;
-                    return 0;
-                  })
-                  .map((user, index) => (
-                    <User
-                      user={user}
-                      key={user.email}
-                      listPosition={index}
-                      translate={translate}
-                      openUserOptions={openUserOptions}
-                      selectedUserListIndex={selectedUserListIndex}
-                      userOptionsY={userOptionsY}
-                      onRemoveUser={onRemoveUser}
-                      userOptionsEmail={userOptionsEmail}
-                      onChangeRole={handleUserRoleChange}
-                      disableUserOptionsPanel={currentUserFolderRole !== 'owner' && user.email !== props.user.email}
-                      disableRoleChange={currentUserFolderRole !== 'owner'}
-                    />
-                  ))
-              )}
-            </div>
+            <InvitedUsersList
+              areInvitedUsersLoading={isLoading}
+              currentUserFolderRole={currentUserFolderRole}
+              invitedUsers={invitedUsers}
+              userList={userList}
+              user={props.user}
+              openUserOptions={openUserOptions}
+              selectedUserListIndex={selectedUserListIndex}
+              userOptionsY={userOptionsY}
+              onRemoveUser={onRemoveUser}
+              userOptionsEmail={userOptionsEmail}
+              handleUserRoleChange={handleUserRoleChange}
+            />
           </div>
 
           <div className="h-px w-full bg-gray-5" />
 
-          {accessMode === 'public' && !isLoading && isUserOwner && (
-            <div className="flex items-center justify-between">
-              <div className="flex flex-col space-y-2.5">
-                <div className="flex items-center">
-                  <Checkbox checked={isPasswordProtected} onClick={onPasswordCheckboxChange} />
-                  <p
-                    className={`ml-2 select-none text-base font-medium ${isPasswordSharingAvailable ? '' : 'text-gray-50'}`}
-                  >
-                    {translate('modals.shareModal.protectSharingModal.protect')}
-                  </p>
-                  {isPasswordSharingAvailable ? (
-                    <>
-                      <Question
-                        size={20}
-                        className="ml-2 flex items-center justify-center font-medium text-gray-50"
-                        data-tooltip-id="uploadFolder-tooltip"
-                        data-tooltip-place="top"
-                      />
-                      <Tooltip id="uploadFolder-tooltip" delayShow={DELAY_SHOW_MS} className="z-40 rounded-md">
-                        <p className="break-word w-60 text-center text-white">
-                          {translate('modals.shareModal.protectSharingModal.protectTooltipText')}
-                        </p>
-                      </Tooltip>
-                    </>
-                  ) : (
-                    <div className="py-1 px-2 ml-2 rounded-md bg-gray-5">
-                      <p className="text-xs font-semibold">{translate('actions.locked')}</p>
-                    </div>
-                  )}
-                </div>
-              </div>
-              {isPasswordProtected && (
-                <Button variant="secondary" onClick={() => setOpenPasswordInput(true)}>
-                  <span>{translate('modals.shareModal.protectSharingModal.buttons.changePassword')}</span>
-                </Button>
-              )}
-            </div>
+          {isProtectWithPasswordOptionAvailable && (
+            <ProtectWithPassword
+              isPasswordProtected={isPasswordProtected}
+              isPasswordSharingAvailable={isPasswordSharingAvailable}
+              onChangePassword={() => setOpenPasswordInput(true)}
+              onPasswordCheckboxChange={onPasswordCheckboxChange}
+            />
           )}
-          <div className="flex items-end justify-between">
-            <div className="flex flex-col space-y-2.5">
-              <p className="font-medium">{translate('modals.shareModal.general.generalAccess')}</p>
-
-              <Popover className="relative z-10">
-                {({ open }) => (
-                  <>
-                    <Popover.Button as="div" className="z-1 outline-none">
-                      <Button variant="secondary" disabled={isLoading || !isUserOwner}>
-                        {accessMode === 'public' ? <Globe size={24} /> : <Users size={24} />}
-                        <span>
-                          {accessMode === 'public'
-                            ? translate('modals.shareModal.general.accessOptions.public.title')
-                            : translate('modals.shareModal.general.accessOptions.restricted.title')}
-                        </span>
-                        {isLoading ? (
-                          <div className="flex h-6 w-6 items-center justify-center">
-                            <Loader classNameLoader="h-5 w-5" />
-                          </div>
-                        ) : (
-                          <CaretDown size={24} />
-                        )}
-                      </Button>
-                    </Popover.Button>
-
-                    <Popover.Panel
-                      className={`absolute bottom-full z-0 mb-1 w-80 origin-bottom-left rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
-                        open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
-                      }`}
-                      static
-                    >
-                      {({ close }) => (
-                        <>
-                          {/* Public */}
-                          <button
-                            className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                            onClick={() => changeAccess('public')}
-                          >
-                            <Globe size={32} weight="light" />
-                            <div className="flex flex-1 flex-col items-start">
-                              <p className="text-base font-medium leading-none">
-                                {translate('modals.shareModal.general.accessOptions.public.title')}
-                              </p>
-                              <p className="text-left text-sm leading-tight text-gray-60">
-                                {translate('modals.shareModal.general.accessOptions.public.subtitle')}
-                              </p>
-                            </div>
-                            <div className="flex h-full w-5 items-center justify-center">
-                              {accessMode === 'public' ? (
-                                isLoading ? (
-                                  <Loader classNameLoader="h-5 w-5" />
-                                ) : (
-                                  <Check size={20} />
-                                )
-                              ) : null}
-                            </div>
-                          </button>
-                          {/* Restricted */}
-                          {!isWorkspace && (
-                            <button
-                              className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                              onClick={() => changeAccess('restricted')}
-                            >
-                              <Users size={32} weight="light" />
-                              <div className="flex flex-1 flex-col items-start">
-                                <div className="flex flex-row gap-2 items-center">
-                                  <p
-                                    className={`text-base font-medium leading-none ${isRestrictedSharingAvailable ? '' : 'text-gray-70'}`}
-                                  >
-                                    {translate('modals.shareModal.general.accessOptions.restricted.title')}
-                                  </p>
-                                  {!isRestrictedSharingAvailable && (
-                                    <div className="py-1 px-2 ml-2 rounded-md bg-gray-5">
-                                      <p className="text-xs font-semibold">{translate('actions.locked')}</p>
-                                    </div>
-                                  )}
-                                </div>
-                                <p
-                                  className={`text-left text-sm leading-tight ${isRestrictedSharingAvailable ? 'text-gray-60' : 'text-gray-70'}`}
-                                >
-                                  {translate('modals.shareModal.general.accessOptions.restricted.subtitle')}
-                                </p>
-                              </div>
-                              <div className="flex h-full w-5 items-center justify-center">
-                                {accessMode === 'restricted' ? (
-                                  isLoading ? (
-                                    <Loader classNameLoader="h-5 w-5" />
-                                  ) : (
-                                    <Check size={20} />
-                                  )
-                                ) : null}
-                              </div>
-                            </button>
-                          )}
-                          {/* Stop sharing */}
-                          {(currentUserFolderRole === 'owner' || isUserOwner || props?.isDriveItem) && (
-                            <button
-                              className="flex h-11 w-full cursor-pointer items-center justify-start rounded-lg pl-14 pr-3 hover:bg-gray-5"
-                              onClick={() => {
-                                setShowStopSharingConfirmation(true);
-                                close();
-                              }}
-                            >
-                              <p className="text-base font-medium">
-                                {translate('modals.shareModal.general.accessOptions.stopSharing')}
-                              </p>
-                            </button>
-                          )}
-                        </>
-                      )}
-                    </Popover.Panel>
-                  </>
-                )}
-              </Popover>
-            </div>
 
-            <Button variant="primary" onClick={onCopyLink}>
-              <Link size={24} />
-              <span>{translate('modals.shareModal.general.copyLink')}</span>
-            </Button>
-          </div>
+          <UserRoleSelection
+            isStopSharingAvailable={(currentUserFolderRole === 'owner' || isUserOwner || props.isDriveItem) ?? false}
+            accessMode={accessMode}
+            isUserOwner={isUserOwner}
+            isWorkspace={isWorkspace}
+            isRestrictedSharingAvailable={isRestrictedSharingAvailable}
+            isLoading={isLoading}
+            onCopyLink={onCopyLink}
+            changeAccess={changeAccess}
+            setShowStopSharingConfirmation={setShowStopSharingConfirmation}
+          />
 
           <SharePasswordInputDialog
             onClose={() => setOpenPasswordInput(false)}
@@ -798,7 +591,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
             onConfirmHandler={onDisablePassword}
           />
 
-          {/* Stop sharing confirmation dialog */}
           <StopSharingItemDialog
             showStopSharingConfirmation={showStopSharingConfirmation}
             onClose={() => setShowStopSharingConfirmation(false)}
@@ -926,7 +718,7 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
   return (
     <Modal className="p-0" isOpen={isOpen} onClose={onClose} preventClosing={isLoading}>
       <div className="flex h-16 w-full items-center justify-between space-x-4 border-b border-gray-10 px-5">
-        <Header view={view} />
+        <Header headerView={view} isLoading={isLoading} itemToShare={itemToShare} onClose={onClose} setView={setView} />
       </div>
       <div className="flex flex-col space-y-4 p-5">
         <View view={view} />
diff --git a/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx b/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx
new file mode 100644
index 0000000000..e945f014dd
--- /dev/null
+++ b/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx
@@ -0,0 +1,72 @@
+import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { User } from '../User';
+import { InvitedUsersSkeletonLoader } from '../InvitedUsersSkeletonLoader';
+import { InvitedUserProps } from '../../types';
+
+interface InvitedUsersListProps {
+  userList;
+  invitedUsers: InvitedUserProps[];
+  areInvitedUsersLoading: boolean;
+  user;
+  openUserOptions: (e: any, user: InvitedUserProps, selectedIndex: number | null) => void;
+  userOptionsY: number;
+  selectedUserListIndex: number | null;
+  onRemoveUser: (user: InvitedUserProps) => void;
+  currentUserFolderRole?: string;
+  userOptionsEmail?: InvitedUserProps;
+  handleUserRoleChange: (email: string, role: string) => Promise<void>;
+}
+
+export const InvitedUsersList = ({
+  currentUserFolderRole,
+  userList,
+  invitedUsers,
+  areInvitedUsersLoading,
+  user,
+  openUserOptions,
+  selectedUserListIndex,
+  userOptionsY,
+  onRemoveUser,
+  userOptionsEmail,
+  handleUserRoleChange,
+}: InvitedUsersListProps) => {
+  const { translate } = useTranslationContext();
+  const invitedUsersSorted = invitedUsers.toSorted((a, b) => {
+    if (a.email === user.email && b.email !== user.email) return -1;
+    return 0;
+  });
+  const isListLoading = invitedUsers.length === 0 && areInvitedUsersLoading;
+
+  return (
+    <div
+      ref={userList}
+      className="mt-1.5 flex flex-col overflow-y-auto"
+      style={{ minHeight: '224px', maxHeight: '336px' }}
+    >
+      {isListLoading ? (
+        <>
+          {Array.from({ length: 4 }, (_, i) => (
+            <InvitedUsersSkeletonLoader key={`loader-${i}`} />
+          ))}
+        </>
+      ) : (
+        invitedUsersSorted.map((invitedUser, index) => (
+          <User
+            user={invitedUser}
+            key={invitedUser.email}
+            listPosition={index}
+            translate={translate}
+            openUserOptions={openUserOptions}
+            selectedUserListIndex={selectedUserListIndex}
+            userOptionsY={userOptionsY}
+            onRemoveUser={onRemoveUser}
+            userOptionsEmail={userOptionsEmail}
+            onChangeRole={handleUserRoleChange}
+            disableUserOptionsPanel={currentUserFolderRole !== 'owner' && invitedUser.email !== user.email}
+            disableRoleChange={currentUserFolderRole !== 'owner'}
+          />
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/src/app/drive/components/ShareDialog/components/GeneralView/ProtectWithPassword.tsx b/src/app/drive/components/ShareDialog/components/GeneralView/ProtectWithPassword.tsx
new file mode 100644
index 0000000000..d9464d596d
--- /dev/null
+++ b/src/app/drive/components/ShareDialog/components/GeneralView/ProtectWithPassword.tsx
@@ -0,0 +1,58 @@
+import { Button, Checkbox } from '@internxt/ui';
+import { Question } from '@phosphor-icons/react';
+import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { DELAY_SHOW_MS } from 'components';
+import { Tooltip } from 'react-tooltip';
+
+interface ProtectWithPasswordProps {
+  isPasswordProtected: boolean;
+  onPasswordCheckboxChange: () => void;
+  isPasswordSharingAvailable: boolean;
+  onChangePassword: () => void;
+}
+
+export const ProtectWithPassword = ({
+  isPasswordProtected,
+  onPasswordCheckboxChange,
+  isPasswordSharingAvailable,
+  onChangePassword,
+}: ProtectWithPasswordProps) => {
+  const { translate } = useTranslationContext();
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-col space-y-2.5">
+        <div className="flex items-center">
+          <Checkbox checked={isPasswordProtected} onClick={onPasswordCheckboxChange} />
+          <p className={`ml-2 select-none text-base font-medium ${isPasswordSharingAvailable ? '' : 'text-gray-50'}`}>
+            {translate('modals.shareModal.protectSharingModal.protect')}
+          </p>
+          {isPasswordSharingAvailable ? (
+            <>
+              <Question
+                size={20}
+                className="ml-2 flex items-center justify-center font-medium text-gray-50"
+                data-tooltip-id="uploadFolder-tooltip"
+                data-tooltip-place="top"
+              />
+              <Tooltip id="uploadFolder-tooltip" delayShow={DELAY_SHOW_MS} className="z-40 rounded-md">
+                <p className="break-word w-60 text-center text-white">
+                  {translate('modals.shareModal.protectSharingModal.protectTooltipText')}
+                </p>
+              </Tooltip>
+            </>
+          ) : (
+            <div className="py-1 px-2 ml-2 rounded-md bg-gray-5">
+              <p className="text-xs font-semibold">{translate('actions.locked')}</p>
+            </div>
+          )}
+        </div>
+      </div>
+      {isPasswordProtected && (
+        <Button variant="secondary" onClick={onChangePassword}>
+          <span>{translate('modals.shareModal.protectSharingModal.buttons.changePassword')}</span>
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx b/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx
new file mode 100644
index 0000000000..697d33b2b2
--- /dev/null
+++ b/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx
@@ -0,0 +1,151 @@
+import { Popover } from '@headlessui/react';
+import { Button, Loader } from '@internxt/ui';
+import { CaretDown, Check, Globe, Link, Users } from '@phosphor-icons/react';
+import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { AccessMode } from '../../types';
+
+export const LoadingState = ({ isLoading }: { isLoading: boolean }) => {
+  return (
+    <div className="flex h-full w-5 items-center justify-center">
+      {isLoading ? <Loader classNameLoader="h-5 w-5" /> : <Check size={20} />}
+    </div>
+  );
+};
+
+interface UserRoleSelectionProps {
+  accessMode: AccessMode;
+  isLoading: boolean;
+  isUserOwner: boolean;
+  isWorkspace: boolean;
+  isRestrictedSharingAvailable: boolean;
+  isStopSharingAvailable: boolean;
+  onCopyLink: () => void;
+  changeAccess: (accessMode: AccessMode) => void;
+  setShowStopSharingConfirmation: (show: boolean) => void;
+}
+
+export const UserRoleSelection = ({
+  accessMode,
+  changeAccess,
+  isLoading,
+  isUserOwner,
+  isWorkspace,
+  isRestrictedSharingAvailable,
+  isStopSharingAvailable,
+  onCopyLink,
+  setShowStopSharingConfirmation,
+}: UserRoleSelectionProps) => {
+  const { translate } = useTranslationContext();
+
+  return (
+    <div className="flex items-end justify-between">
+      <div className="flex flex-col space-y-2.5">
+        <p className="font-medium">{translate('modals.shareModal.general.generalAccess')}</p>
+
+        <Popover className="relative z-10">
+          {({ open }) => (
+            <>
+              <Popover.Button as="div" className="z-1 outline-none">
+                <Button variant="secondary" disabled={isLoading || !isUserOwner}>
+                  {accessMode === 'public' ? <Globe size={24} /> : <Users size={24} />}
+                  <span>
+                    {accessMode === 'public'
+                      ? translate('modals.shareModal.general.accessOptions.public.title')
+                      : translate('modals.shareModal.general.accessOptions.restricted.title')}
+                  </span>
+                  {isLoading ? (
+                    <div className="flex h-6 w-6 items-center justify-center">
+                      <Loader classNameLoader="h-5 w-5" />
+                    </div>
+                  ) : (
+                    <CaretDown size={24} />
+                  )}
+                </Button>
+              </Popover.Button>
+
+              <Popover.Panel
+                className={`absolute bottom-full z-0 mb-1 w-80 origin-bottom-left rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
+                  open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
+                }`}
+                static
+              >
+                {({ close }) => (
+                  <>
+                    {/* Public */}
+                    <button
+                      className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                      onClick={() => changeAccess('public')}
+                    >
+                      <Globe size={32} weight="light" />
+                      <div className="flex flex-1 flex-col items-start">
+                        <p className="text-base font-medium leading-none">
+                          {translate('modals.shareModal.general.accessOptions.public.title')}
+                        </p>
+                        <p className="text-left text-sm leading-tight text-gray-60">
+                          {translate('modals.shareModal.general.accessOptions.public.subtitle')}
+                        </p>
+                      </div>
+                      <div className="flex h-full w-5 items-center justify-center">
+                        {accessMode === 'public' && <LoadingState isLoading={isLoading} />}
+                      </div>
+                    </button>
+                    {/* Restricted */}
+                    {!isWorkspace && (
+                      <button
+                        className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                        onClick={() => changeAccess('restricted')}
+                      >
+                        <Users size={32} weight="light" />
+                        <div className="flex flex-1 flex-col items-start">
+                          <div className="flex flex-row gap-2 items-center">
+                            <p
+                              className={`text-base font-medium leading-none ${isRestrictedSharingAvailable ? '' : 'text-gray-70'}`}
+                            >
+                              {translate('modals.shareModal.general.accessOptions.restricted.title')}
+                            </p>
+                            {!isRestrictedSharingAvailable && (
+                              <div className="py-1 px-2 ml-2 rounded-md bg-gray-5">
+                                <p className="text-xs font-semibold">{translate('actions.locked')}</p>
+                              </div>
+                            )}
+                          </div>
+                          <p
+                            className={`text-left text-sm leading-tight ${isRestrictedSharingAvailable ? 'text-gray-60' : 'text-gray-70'}`}
+                          >
+                            {translate('modals.shareModal.general.accessOptions.restricted.subtitle')}
+                          </p>
+                        </div>
+                        <div className="flex h-full w-5 items-center justify-center">
+                          {accessMode === 'restricted' && <LoadingState isLoading={isLoading} />}
+                        </div>
+                      </button>
+                    )}
+                    {/* Stop sharing */}
+                    {isStopSharingAvailable && (
+                      <button
+                        className="flex h-11 w-full cursor-pointer items-center justify-start rounded-lg pl-14 pr-3 hover:bg-gray-5"
+                        onClick={() => {
+                          setShowStopSharingConfirmation(true);
+                          close();
+                        }}
+                      >
+                        <p className="text-base font-medium">
+                          {translate('modals.shareModal.general.accessOptions.stopSharing')}
+                        </p>
+                      </button>
+                    )}
+                  </>
+                )}
+              </Popover.Panel>
+            </>
+          )}
+        </Popover>
+      </div>
+
+      <Button variant="primary" onClick={onCopyLink}>
+        <Link size={24} />
+        <span>{translate('modals.shareModal.general.copyLink')}</span>
+      </Button>
+    </div>
+  );
+};
diff --git a/src/app/drive/components/ShareDialog/components/Header.tsx b/src/app/drive/components/ShareDialog/components/Header.tsx
new file mode 100644
index 0000000000..aa7dc581f6
--- /dev/null
+++ b/src/app/drive/components/ShareDialog/components/Header.tsx
@@ -0,0 +1,49 @@
+import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { ArrowLeft, X } from '@phosphor-icons/react';
+import { Views } from '../types';
+
+interface HeaderProps {
+  itemToShare;
+  isLoading: boolean;
+  headerView: Views;
+  setView: (view: Views) => void;
+  onClose: () => void;
+}
+
+export const Header = ({ headerView, isLoading, itemToShare, onClose, setView }: HeaderProps): JSX.Element => {
+  const { translate } = useTranslationContext();
+
+  const headers = {
+    general: (
+      <>
+        <span
+          className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium"
+          title={translate('modals.shareModal.title', { name: itemToShare?.item.name })}
+        >
+          {translate('modals.shareModal.title', { name: itemToShare?.item.name })}
+        </span>
+        <div className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md bg-black/0 transition-all duration-200 ease-in-out hover:bg-black/4 active:bg-black/8">
+          <X onClick={() => (isLoading ? null : onClose())} size={22} />
+        </div>
+      </>
+    ),
+    invite: (
+      <div className="flex items-center space-x-4">
+        <ArrowLeft className="cursor-pointer" onClick={() => setView('general')} size={24} />
+        <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium">
+          {translate('modals.shareModal.invite.title')}
+        </span>
+      </div>
+    ),
+    requests: (
+      <div className="flex items-center space-x-4">
+        <ArrowLeft className="cursor-pointer" onClick={() => setView('general')} size={24} />
+        <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium">
+          {translate('modals.shareModal.requests.title')}
+        </span>
+      </div>
+    ),
+  };
+
+  return headers[headerView];
+};

From 17ff96037816eee8450df1ca30528c10bcb6c082 Mon Sep 17 00:00:00 2001
From: Xavier Abad <xabadgo01@gmail.com>
Date: Tue, 20 Jan 2026 17:33:21 +0100
Subject: [PATCH 2/6] fix: types and useless exports

---
 .../components/GeneralView/InvitedUsersList.tsx      | 12 +++++++++---
 .../components/GeneralView/UserRoleSelection.tsx     |  2 +-
 .../components/ShareDialog/components/Header.tsx     |  3 ++-
 src/app/store/slices/storage/storage.model.ts        | 11 +++--------
 src/app/store/slices/storage/types.ts                | 10 ++++++++++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx b/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx
index e945f014dd..4bdc26b15c 100644
--- a/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx
+++ b/src/app/drive/components/ShareDialog/components/GeneralView/InvitedUsersList.tsx
@@ -1,14 +1,20 @@
+import { RefObject, MouseEvent } from 'react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { User } from '../User';
 import { InvitedUsersSkeletonLoader } from '../InvitedUsersSkeletonLoader';
 import { InvitedUserProps } from '../../types';
+import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 
 interface InvitedUsersListProps {
-  userList;
+  userList: RefObject<HTMLDivElement>;
   invitedUsers: InvitedUserProps[];
   areInvitedUsersLoading: boolean;
-  user;
-  openUserOptions: (e: any, user: InvitedUserProps, selectedIndex: number | null) => void;
+  user: UserSettings;
+  openUserOptions: (
+    e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
+    user: InvitedUserProps,
+    selectedIndex: number | null,
+  ) => void;
   userOptionsY: number;
   selectedUserListIndex: number | null;
   onRemoveUser: (user: InvitedUserProps) => void;
diff --git a/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx b/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx
index 697d33b2b2..432a327b9e 100644
--- a/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx
+++ b/src/app/drive/components/ShareDialog/components/GeneralView/UserRoleSelection.tsx
@@ -4,7 +4,7 @@ import { CaretDown, Check, Globe, Link, Users } from '@phosphor-icons/react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { AccessMode } from '../../types';
 
-export const LoadingState = ({ isLoading }: { isLoading: boolean }) => {
+const LoadingState = ({ isLoading }: { isLoading: boolean }) => {
   return (
     <div className="flex h-full w-5 items-center justify-center">
       {isLoading ? <Loader classNameLoader="h-5 w-5" /> : <Check size={20} />}
diff --git a/src/app/drive/components/ShareDialog/components/Header.tsx b/src/app/drive/components/ShareDialog/components/Header.tsx
index aa7dc581f6..5387a9410f 100644
--- a/src/app/drive/components/ShareDialog/components/Header.tsx
+++ b/src/app/drive/components/ShareDialog/components/Header.tsx
@@ -1,9 +1,10 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { ArrowLeft, X } from '@phosphor-icons/react';
 import { Views } from '../types';
+import { ItemToShare } from 'app/store/slices/storage/types';
 
 interface HeaderProps {
-  itemToShare;
+  itemToShare: ItemToShare | null;
   isLoading: boolean;
   headerView: Views;
   setView: (view: Views) => void;
diff --git a/src/app/store/slices/storage/storage.model.ts b/src/app/store/slices/storage/storage.model.ts
index ad61d0efdf..08be63edab 100644
--- a/src/app/store/slices/storage/storage.model.ts
+++ b/src/app/store/slices/storage/storage.model.ts
@@ -1,8 +1,7 @@
-import { ShareLink } from '@internxt/sdk/dist/drive/share/types';
-import { AdvancedSharedItem, SharedNamePath } from 'app/share/types';
+import { SharedNamePath } from 'app/share/types';
 import { OrderDirection, OrderSettings } from '../../../core/types';
 import { DriveItemData, FileViewMode, FolderPath, FolderPathDialog } from 'app/drive/types';
-import { IRoot } from './types';
+import { IRoot, ItemToShare } from './types';
 
 export interface StorageFilters {
   text: string;
@@ -24,11 +23,7 @@ export interface StorageState {
   filters: StorageFilters;
   order: OrderSettings;
   selectedItems: DriveItemData[];
-  itemToShare: {
-    share?: ShareLink;
-    sharings?: { type: string; id: string }[];
-    item: DriveItemData | (AdvancedSharedItem & { user: { email: string } });
-  } | null;
+  itemToShare: ItemToShare | null;
   itemsToDelete: DriveItemData[];
   itemsToMove: DriveItemData[];
   itemToRename: DriveItemData | null;
diff --git a/src/app/store/slices/storage/types.ts b/src/app/store/slices/storage/types.ts
index 9bb300c2f5..f812b4e594 100644
--- a/src/app/store/slices/storage/types.ts
+++ b/src/app/store/slices/storage/types.ts
@@ -1,3 +1,7 @@
+import { ShareLink } from '@internxt/sdk/dist/drive/storage/types';
+import { DriveItemData } from 'app/drive/types';
+import { AdvancedSharedItem } from 'app/share/types';
+
 export interface IRoot {
   name: string;
   folderId: string | null;
@@ -5,3 +9,9 @@ export interface IRoot {
   childrenFolders: IRoot[];
   fullPathEdited: string;
 }
+
+export interface ItemToShare {
+  share?: ShareLink;
+  sharings?: { type: string; id: string }[];
+  item: DriveItemData | (AdvancedSharedItem & { user: { email: string } });
+}

From b0fec17a026d26c8e35a329c457a33f88ae35c8b Mon Sep 17 00:00:00 2001
From: Xavier Abad <xabadgo01@gmail.com>
Date: Tue, 20 Jan 2026 17:44:31 +0100
Subject: [PATCH 3/6] fix: extract props to interface

---
 .../ShareDialog/components/User.tsx           | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/app/drive/components/ShareDialog/components/User.tsx b/src/app/drive/components/ShareDialog/components/User.tsx
index 795e683b5a..5009c7ab20 100644
--- a/src/app/drive/components/ShareDialog/components/User.tsx
+++ b/src/app/drive/components/ShareDialog/components/User.tsx
@@ -4,6 +4,24 @@ import { MouseEvent } from 'react';
 import { UserOptions } from './UserOptions';
 import { InvitedUserProps } from '../types';
 
+interface UserProps {
+  user: InvitedUserProps;
+  listPosition: number | null;
+  translate: (key: string, props?: Record<string, unknown>) => string;
+  openUserOptions: (
+    event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
+    user: InvitedUserProps,
+    listPosition: number | null,
+  ) => void;
+  selectedUserListIndex: number | null;
+  userOptionsY: number;
+  onRemoveUser: (user: InvitedUserProps) => void;
+  userOptionsEmail?: InvitedUserProps;
+  onChangeRole: (email: string, roleName: string) => void;
+  disableUserOptionsPanel: boolean;
+  disableRoleChange: boolean;
+}
+
 export const User = ({
   user,
   listPosition,
@@ -16,23 +34,7 @@ export const User = ({
   onChangeRole,
   disableUserOptionsPanel,
   disableRoleChange,
-}: {
-  user: InvitedUserProps;
-  listPosition: number | null;
-  translate: (key: string, props?: Record<string, unknown>) => string;
-  openUserOptions: (
-    event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
-    user: InvitedUserProps,
-    listPosition: number | null,
-  ) => void;
-  selectedUserListIndex;
-  userOptionsY;
-  onRemoveUser;
-  userOptionsEmail;
-  onChangeRole: (email: string, roleName: string) => void;
-  disableUserOptionsPanel: boolean;
-  disableRoleChange: boolean;
-}) => (
+}: UserProps) => (
   <div
     className={`group flex h-14 shrink-0 items-center space-x-2.5 border-t ${
       user.roleName === 'owner' ? 'border-transparent' : 'border-gray-5'

From 3f3c9a06f5cefdf84f690e5efd8ef026c8faa765 Mon Sep 17 00:00:00 2001
From: Xavier Abad <xabadgo01@gmail.com>
Date: Wed, 21 Jan 2026 09:27:43 +0100
Subject: [PATCH 4/6] refactor: remove useless code

---
 .../components/ShareDialog/ShareDialog.tsx    | 128 +-----------------
 1 file changed, 2 insertions(+), 126 deletions(-)

diff --git a/src/app/drive/components/ShareDialog/ShareDialog.tsx b/src/app/drive/components/ShareDialog/ShareDialog.tsx
index 408fcc3783..fc5ee0297a 100644
--- a/src/app/drive/components/ShareDialog/ShareDialog.tsx
+++ b/src/app/drive/components/ShareDialog/ShareDialog.tsx
@@ -1,10 +1,9 @@
-import { Popover } from '@headlessui/react';
 import { SharingMeta } from '@internxt/sdk/dist/drive/share/types';
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
-import { CaretDown, CheckCircle, UserPlus } from '@phosphor-icons/react';
+import { UserPlus } from '@phosphor-icons/react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { MAX_SHARED_NAME_LENGTH } from '../../../../views/Shared/SharedView';
-import { Avatar, Button, Modal } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { Role } from 'app/store/slices/sharedLinks/types';
@@ -251,29 +250,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     }
   };
 
-  const onAcceptRequest = (email: string, roleName: UserRole) => {
-    // TODO -> Accept user access request
-    setAccessRequests((prevRequests) =>
-      prevRequests.map((request) => {
-        if (request.email === email) {
-          return { ...request, status: REQUEST_STATUS.ACCEPTED };
-        }
-        return request;
-      }),
-    );
-  };
-
-  const handleDenyRequest = (email: string) => {
-    setAccessRequests((prevRequests) =>
-      prevRequests.map((request) => {
-        if (request.email === email) {
-          return { ...request, status: REQUEST_STATUS.DENIED };
-        }
-        return request;
-      }),
-    );
-  };
-
   const onClose = (): void => {
     dispatch(uiActions.setIsShareDialogOpen(false));
   };
@@ -610,106 +586,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
           roles={inviteDialogRoles}
         />
       ),
-      requests: (
-        <div className="relative flex flex-col space-y-3 pb-24" style={{ minHeight: '377px', maxHeight: '640px' }}>
-          {accessRequests.length > 0 ? (
-            accessRequests.map((request, index) => (
-              <div
-                className={`flex flex-col space-y-3 ${
-                  index > 0 && isRequestPending(request.status) && 'border-t border-gray-5 pt-3'
-                } ${!isRequestPending(request.status) && 'hide-request'}`}
-                key={request.email + index}
-              >
-                <div className="flex shrink-0 items-center space-x-2.5">
-                  <Avatar src={request.avatar} fullName={`${request.name} ${request.lastname}`} diameter={40} />
-
-                  <div className="flex flex-1 flex-col overflow-hidden">
-                    <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap font-medium leading-tight">
-                      {request.name}&nbsp;{request.lastname}
-                    </p>
-                    <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-none text-gray-50">
-                      {request.email}
-                    </p>
-                  </div>
-
-                  <div className="flex items-center space-x-1.5">
-                    <Popover className="relative">
-                      {({ open }) => (
-                        <>
-                          <Popover.Button tabIndex={-1} className="relative">
-                            <Button variant="primary">
-                              <span>{translate('modals.shareModal.requests.actions.accept')}</span>
-                              <CaretDown size={24} />
-                            </Button>
-                          </Popover.Button>
-
-                          <Popover.Panel
-                            className={`absolute right-0 z-10 mt-1 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
-                              open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
-                            }`}
-                            style={{ minWidth: '160px' }}
-                            static
-                          >
-                            {({ close }) => (
-                              <>
-                                {/* Reader */}
-                                <button
-                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                                  onClick={() => {
-                                    onAcceptRequest(request.email, 'reader');
-                                    close();
-                                  }}
-                                >
-                                  <p className="w-full text-left text-base font-medium leading-none">
-                                    {translate('modals.shareModal.requests.actions.roles.reader')}
-                                  </p>
-                                </button>
-
-                                {/* Editor */}
-                                <button
-                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                                  onClick={() => {
-                                    onAcceptRequest(request.email, 'editor');
-                                    close();
-                                  }}
-                                >
-                                  <p className="w-full text-left text-base font-medium leading-none">
-                                    {translate('modals.shareModal.requests.actions.roles.editor')}
-                                  </p>
-                                </button>
-                              </>
-                            )}
-                          </Popover.Panel>
-                        </>
-                      )}
-                    </Popover>
-                    <Button variant="secondary" onClick={() => handleDenyRequest(request.email)}>
-                      <span>{translate('modals.shareModal.requests.actions.deny')}</span>
-                    </Button>
-                  </div>
-                </div>
-
-                {request.message ? (
-                  <div className="mb-3 flex flex-col space-y-1 rounded-lg bg-gray-5 p-4 text-base leading-tight">
-                    {request.message.split('\n').map((line) => (
-                      <p>{line}</p>
-                    ))}
-                  </div>
-                ) : (
-                  <></>
-                )}
-              </div>
-            ))
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="flex flex-col items-center justify-center space-y-1 rounded-2xl bg-gray-5 p-6 text-lg font-medium text-gray-50">
-                <CheckCircle weight="thin" size={64} />
-                <span>{translate('modals.shareModal.requests.empty')}</span>
-              </div>
-            </div>
-          )}
-        </div>
-      ),
     };
 
     return view[viewProps.view];

From fffbff7b572c56a463a38c6b8b7132e6dcaa3d2f Mon Sep 17 00:00:00 2001
From: Xavier Abad <xabadgo01@gmail.com>
Date: Wed, 21 Jan 2026 09:32:40 +0100
Subject: [PATCH 5/6] fix: revert request remoival change

---
 .../components/ShareDialog/ShareDialog.tsx    | 128 +++++++++++++++++-
 1 file changed, 126 insertions(+), 2 deletions(-)

diff --git a/src/app/drive/components/ShareDialog/ShareDialog.tsx b/src/app/drive/components/ShareDialog/ShareDialog.tsx
index fc5ee0297a..408fcc3783 100644
--- a/src/app/drive/components/ShareDialog/ShareDialog.tsx
+++ b/src/app/drive/components/ShareDialog/ShareDialog.tsx
@@ -1,9 +1,10 @@
+import { Popover } from '@headlessui/react';
 import { SharingMeta } from '@internxt/sdk/dist/drive/share/types';
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
-import { UserPlus } from '@phosphor-icons/react';
+import { CaretDown, CheckCircle, UserPlus } from '@phosphor-icons/react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { MAX_SHARED_NAME_LENGTH } from '../../../../views/Shared/SharedView';
-import { Button, Modal } from '@internxt/ui';
+import { Avatar, Button, Modal } from '@internxt/ui';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { Role } from 'app/store/slices/sharedLinks/types';
@@ -250,6 +251,29 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     }
   };
 
+  const onAcceptRequest = (email: string, roleName: UserRole) => {
+    // TODO -> Accept user access request
+    setAccessRequests((prevRequests) =>
+      prevRequests.map((request) => {
+        if (request.email === email) {
+          return { ...request, status: REQUEST_STATUS.ACCEPTED };
+        }
+        return request;
+      }),
+    );
+  };
+
+  const handleDenyRequest = (email: string) => {
+    setAccessRequests((prevRequests) =>
+      prevRequests.map((request) => {
+        if (request.email === email) {
+          return { ...request, status: REQUEST_STATUS.DENIED };
+        }
+        return request;
+      }),
+    );
+  };
+
   const onClose = (): void => {
     dispatch(uiActions.setIsShareDialogOpen(false));
   };
@@ -586,6 +610,106 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
           roles={inviteDialogRoles}
         />
       ),
+      requests: (
+        <div className="relative flex flex-col space-y-3 pb-24" style={{ minHeight: '377px', maxHeight: '640px' }}>
+          {accessRequests.length > 0 ? (
+            accessRequests.map((request, index) => (
+              <div
+                className={`flex flex-col space-y-3 ${
+                  index > 0 && isRequestPending(request.status) && 'border-t border-gray-5 pt-3'
+                } ${!isRequestPending(request.status) && 'hide-request'}`}
+                key={request.email + index}
+              >
+                <div className="flex shrink-0 items-center space-x-2.5">
+                  <Avatar src={request.avatar} fullName={`${request.name} ${request.lastname}`} diameter={40} />
+
+                  <div className="flex flex-1 flex-col overflow-hidden">
+                    <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap font-medium leading-tight">
+                      {request.name}&nbsp;{request.lastname}
+                    </p>
+                    <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-none text-gray-50">
+                      {request.email}
+                    </p>
+                  </div>
+
+                  <div className="flex items-center space-x-1.5">
+                    <Popover className="relative">
+                      {({ open }) => (
+                        <>
+                          <Popover.Button tabIndex={-1} className="relative">
+                            <Button variant="primary">
+                              <span>{translate('modals.shareModal.requests.actions.accept')}</span>
+                              <CaretDown size={24} />
+                            </Button>
+                          </Popover.Button>
+
+                          <Popover.Panel
+                            className={`absolute right-0 z-10 mt-1 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
+                              open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
+                            }`}
+                            style={{ minWidth: '160px' }}
+                            static
+                          >
+                            {({ close }) => (
+                              <>
+                                {/* Reader */}
+                                <button
+                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                                  onClick={() => {
+                                    onAcceptRequest(request.email, 'reader');
+                                    close();
+                                  }}
+                                >
+                                  <p className="w-full text-left text-base font-medium leading-none">
+                                    {translate('modals.shareModal.requests.actions.roles.reader')}
+                                  </p>
+                                </button>
+
+                                {/* Editor */}
+                                <button
+                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                                  onClick={() => {
+                                    onAcceptRequest(request.email, 'editor');
+                                    close();
+                                  }}
+                                >
+                                  <p className="w-full text-left text-base font-medium leading-none">
+                                    {translate('modals.shareModal.requests.actions.roles.editor')}
+                                  </p>
+                                </button>
+                              </>
+                            )}
+                          </Popover.Panel>
+                        </>
+                      )}
+                    </Popover>
+                    <Button variant="secondary" onClick={() => handleDenyRequest(request.email)}>
+                      <span>{translate('modals.shareModal.requests.actions.deny')}</span>
+                    </Button>
+                  </div>
+                </div>
+
+                {request.message ? (
+                  <div className="mb-3 flex flex-col space-y-1 rounded-lg bg-gray-5 p-4 text-base leading-tight">
+                    {request.message.split('\n').map((line) => (
+                      <p>{line}</p>
+                    ))}
+                  </div>
+                ) : (
+                  <></>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="flex flex-col items-center justify-center space-y-1 rounded-2xl bg-gray-5 p-6 text-lg font-medium text-gray-50">
+                <CheckCircle weight="thin" size={64} />
+                <span>{translate('modals.shareModal.requests.empty')}</span>
+              </div>
+            </div>
+          )}
+        </div>
+      ),
     };
 
     return view[viewProps.view];

From 0e27a4224a735dd7f12eb15b043ffcfd52c83e99 Mon Sep 17 00:00:00 2001
From: Xavier Abad <xabadgo01@gmail.com>
Date: Wed, 21 Jan 2026 09:34:32 +0100
Subject: [PATCH 6/6] refactor(shared): remove requests dialog and its logic

---
 .../components/ShareDialog/ShareDialog.tsx    | 166 +-----------------
 1 file changed, 3 insertions(+), 163 deletions(-)

diff --git a/src/app/drive/components/ShareDialog/ShareDialog.tsx b/src/app/drive/components/ShareDialog/ShareDialog.tsx
index 408fcc3783..0f411c548a 100644
--- a/src/app/drive/components/ShareDialog/ShareDialog.tsx
+++ b/src/app/drive/components/ShareDialog/ShareDialog.tsx
@@ -1,10 +1,9 @@
-import { Popover } from '@headlessui/react';
 import { SharingMeta } from '@internxt/sdk/dist/drive/share/types';
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
-import { CaretDown, CheckCircle, UserPlus } from '@phosphor-icons/react';
+import { UserPlus } from '@phosphor-icons/react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { MAX_SHARED_NAME_LENGTH } from '../../../../views/Shared/SharedView';
-import { Avatar, Button, Modal } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { Role } from 'app/store/slices/sharedLinks/types';
@@ -23,16 +22,7 @@ import { DriveItemData } from 'app/drive/types';
 import ShareInviteDialog from '../ShareInviteDialog/ShareInviteDialog';
 import './ShareDialog.scss';
 import envService from 'services/env.service';
-import {
-  AccessMode,
-  InvitedUserProps,
-  REQUEST_STATUS,
-  RequestProps,
-  RequestStatus,
-  UserRole,
-  ViewProps,
-  Views,
-} from './types';
+import { AccessMode, InvitedUserProps, UserRole, ViewProps, Views } from './types';
 import navigationService from 'services/navigation.service';
 import { Service } from '@internxt/sdk/dist/drive/payments/types/tiers';
 import { SharePasswordInputDialog } from 'app/share/components/SharePasswordInputDialog/SharePasswordInputDialog';
@@ -44,9 +34,6 @@ import { UserRoleSelection } from './components/GeneralView/UserRoleSelection';
 import { InvitedUsersList } from './components/GeneralView/InvitedUsersList';
 import { Header } from './components/Header';
 
-const isRequestPending = (status: RequestStatus): boolean =>
-  status !== REQUEST_STATUS.DENIED && status !== REQUEST_STATUS.ACCEPTED;
-
 const cropSharedName = (name: string) => {
   if (name.length > MAX_SHARED_NAME_LENGTH) {
     return name.substring(0, 32).concat('...');
@@ -118,7 +105,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
   const [isRestrictedSharingDialogOpen, setIsRestrictedSharingDialogOpen] = useState<boolean>(false);
   const [isRestrictedPasswordDialogOpen, setIsRestrictedPasswordDialogOpen] = useState<boolean>(false);
 
-  const [accessRequests, setAccessRequests] = useState<RequestProps[]>([]);
   const [userOptionsEmail, setUserOptionsEmail] = useState<InvitedUserProps>();
   const [userOptionsY, setUserOptionsY] = useState<number>(0);
   const [view, setView] = useState<Views>('general');
@@ -139,7 +125,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     setShowStopSharingConfirmation(false);
     setIsLoading(false);
     setInvitedUsers([]);
-    setAccessRequests([]);
     setUserOptionsEmail(undefined);
     setUserOptionsY(0);
     setView('general');
@@ -167,17 +152,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     if (roles.length > 0 && isOpen) loadShareInfo();
   }, [roles, isOpen]);
 
-  useEffect(() => {
-    const removeDeniedRequests = () => {
-      setAccessRequests((prevRequests) => prevRequests.filter((request) => isRequestPending(request.status)));
-    };
-
-    let timer;
-    if (accessRequests.some((req) => !isRequestPending(req.status))) timer = setTimeout(removeDeniedRequests, 500);
-
-    return () => clearTimeout(timer);
-  }, [accessRequests]);
-
   useEffect(() => {
     const currentInvitedUser = invitedUsers.find((user) => user.email === props.user.email);
     setCurrentUserFolderRole(currentInvitedUser?.roleName);
@@ -251,29 +225,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
     }
   };
 
-  const onAcceptRequest = (email: string, roleName: UserRole) => {
-    // TODO -> Accept user access request
-    setAccessRequests((prevRequests) =>
-      prevRequests.map((request) => {
-        if (request.email === email) {
-          return { ...request, status: REQUEST_STATUS.ACCEPTED };
-        }
-        return request;
-      }),
-    );
-  };
-
-  const handleDenyRequest = (email: string) => {
-    setAccessRequests((prevRequests) =>
-      prevRequests.map((request) => {
-        if (request.email === email) {
-          return { ...request, status: REQUEST_STATUS.DENIED };
-        }
-        return request;
-      }),
-    );
-  };
-
   const onClose = (): void => {
     dispatch(uiActions.setIsShareDialogOpen(false));
   };
@@ -500,17 +451,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
                 {translate('modals.shareModal.list.peopleWithAccess')}
               </span>
               <div className="flex items-center space-x-1.5">
-                {accessRequests.length > 0 && (
-                  <Button variant="secondary" onClick={() => setView('requests')}>
-                    <span>{translate('modals.shareModal.requests.button')}</span>
-                    <div
-                      className="flex h-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-white"
-                      style={{ minWidth: '20px' }}
-                    >
-                      {accessRequests.length}
-                    </div>
-                  </Button>
-                )}
                 {currentUserFolderRole !== 'reader' && !isWorkspace ? (
                   <Button variant="secondary" onClick={onInviteUser}>
                     <UserPlus size={24} />
@@ -610,106 +550,6 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
           roles={inviteDialogRoles}
         />
       ),
-      requests: (
-        <div className="relative flex flex-col space-y-3 pb-24" style={{ minHeight: '377px', maxHeight: '640px' }}>
-          {accessRequests.length > 0 ? (
-            accessRequests.map((request, index) => (
-              <div
-                className={`flex flex-col space-y-3 ${
-                  index > 0 && isRequestPending(request.status) && 'border-t border-gray-5 pt-3'
-                } ${!isRequestPending(request.status) && 'hide-request'}`}
-                key={request.email + index}
-              >
-                <div className="flex shrink-0 items-center space-x-2.5">
-                  <Avatar src={request.avatar} fullName={`${request.name} ${request.lastname}`} diameter={40} />
-
-                  <div className="flex flex-1 flex-col overflow-hidden">
-                    <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap font-medium leading-tight">
-                      {request.name}&nbsp;{request.lastname}
-                    </p>
-                    <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-none text-gray-50">
-                      {request.email}
-                    </p>
-                  </div>
-
-                  <div className="flex items-center space-x-1.5">
-                    <Popover className="relative">
-                      {({ open }) => (
-                        <>
-                          <Popover.Button tabIndex={-1} className="relative">
-                            <Button variant="primary">
-                              <span>{translate('modals.shareModal.requests.actions.accept')}</span>
-                              <CaretDown size={24} />
-                            </Button>
-                          </Popover.Button>
-
-                          <Popover.Panel
-                            className={`absolute right-0 z-10 mt-1 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
-                              open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
-                            }`}
-                            style={{ minWidth: '160px' }}
-                            static
-                          >
-                            {({ close }) => (
-                              <>
-                                {/* Reader */}
-                                <button
-                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                                  onClick={() => {
-                                    onAcceptRequest(request.email, 'reader');
-                                    close();
-                                  }}
-                                >
-                                  <p className="w-full text-left text-base font-medium leading-none">
-                                    {translate('modals.shareModal.requests.actions.roles.reader')}
-                                  </p>
-                                </button>
-
-                                {/* Editor */}
-                                <button
-                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                                  onClick={() => {
-                                    onAcceptRequest(request.email, 'editor');
-                                    close();
-                                  }}
-                                >
-                                  <p className="w-full text-left text-base font-medium leading-none">
-                                    {translate('modals.shareModal.requests.actions.roles.editor')}
-                                  </p>
-                                </button>
-                              </>
-                            )}
-                          </Popover.Panel>
-                        </>
-                      )}
-                    </Popover>
-                    <Button variant="secondary" onClick={() => handleDenyRequest(request.email)}>
-                      <span>{translate('modals.shareModal.requests.actions.deny')}</span>
-                    </Button>
-                  </div>
-                </div>
-
-                {request.message ? (
-                  <div className="mb-3 flex flex-col space-y-1 rounded-lg bg-gray-5 p-4 text-base leading-tight">
-                    {request.message.split('\n').map((line) => (
-                      <p>{line}</p>
-                    ))}
-                  </div>
-                ) : (
-                  <></>
-                )}
-              </div>
-            ))
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="flex flex-col items-center justify-center space-y-1 rounded-2xl bg-gray-5 p-6 text-lg font-medium text-gray-50">
-                <CheckCircle weight="thin" size={64} />
-                <span>{translate('modals.shareModal.requests.empty')}</span>
-              </div>
-            </div>
-          )}
-        </div>
-      ),
     };
 
     return view[viewProps.view];