some profile ui rework

MareSynchronos/UI/CompactUI.cs

@@ -46,6 +46,8 @@ public class CompactUi : WindowMediatorSubscriberBase
     private string _characterOrCommentFilter = string.Empty;
     private Pair? _lastAddedUser;
     private string _lastAddedUserComment = string.Empty;
+    private Vector2 _lastPosition = Vector2.One;
+    private Vector2 _lastSize = Vector2.One;
     private string _pairToAdd = string.Empty;
     private int _secretKeyIdx = 0;
     private bool _showModalForUserAddition;
@@ -197,6 +199,15 @@ public class CompactUi : WindowMediatorSubscriberBase
             UiSharedService.SetScaledWindowSize(275);
             ImGui.EndPopup();
         }
+
+        var pos = ImGui.GetWindowPos();
+        var size = ImGui.GetWindowSize();
+        if (_lastSize != size || _lastPosition != pos)
+        {
+            _lastSize = size;
+            _lastPosition = pos;
+            Mediator.Publish(new CompactUiChange(_lastSize, _lastPosition));
+        }
     }
 
     public override void OnClose()
@@ -346,52 +357,6 @@ public class CompactUi : WindowMediatorSubscriberBase
         }
     }
 
-    private void DrawPairedClientMenu(Pair entry)
-    {
-        if (entry.IsVisible)
-        {
-            if (UiSharedService.IconTextButton(FontAwesomeIcon.Sync, "Reload last data"))
-            {
-                entry.ApplyLastReceivedData(forced: true);
-                ImGui.CloseCurrentPopup();
-            }
-            UiSharedService.AttachToolTip("This reapplies the last received character data to this character");
-        }
-
-        var entryUID = entry.UserData.AliasOrUID;
-        if (UiSharedService.IconTextButton(FontAwesomeIcon.Folder, "Pair Groups"))
-        {
-            _selectGroupForPairUi.Open(entry);
-        }
-        UiSharedService.AttachToolTip("Choose pair groups for " + entryUID);
-
-        var isDisableSounds = entry.UserPair!.OwnPermissions.IsDisableSounds();
-        string disableSoundsText = isDisableSounds ? "Enable sound sync" : "Disable sound sync";
-        var disableSoundsIcon = isDisableSounds ? FontAwesomeIcon.VolumeUp : FontAwesomeIcon.VolumeMute;
-        if (UiSharedService.IconTextButton(disableSoundsIcon, disableSoundsText))
-        {
-            var permissions = entry.UserPair.OwnPermissions;
-            permissions.SetDisableSounds(!isDisableSounds);
-            _ = _apiController.UserSetPairPermissions(new UserPermissionsDto(entry.UserData, permissions));
-        }
-
-        var isDisableAnims = entry.UserPair!.OwnPermissions.IsDisableAnimations();
-        string disableAnimsText = isDisableAnims ? "Enable animation sync" : "Disable animation sync";
-        var disableAnimsIcon = isDisableAnims ? FontAwesomeIcon.Running : FontAwesomeIcon.Stop;
-        if (UiSharedService.IconTextButton(disableAnimsIcon, disableAnimsText))
-        {
-            var permissions = entry.UserPair.OwnPermissions;
-            permissions.SetDisableAnimations(!isDisableAnims);
-            _ = _apiController.UserSetPairPermissions(new UserPermissionsDto(entry.UserData, permissions));
-        }
-
-        if (UiSharedService.IconTextButton(FontAwesomeIcon.Trash, "Unpair Permanently") && UiSharedService.CtrlPressed())
-        {
-            _ = _apiController.UserRemovePair(new(entry.UserData));
-        }
-        UiSharedService.AttachToolTip("Hold CTRL and click to unpair permanently from " + entryUID);
-    }
-
     private void DrawPairList()
     {
         UiSharedService.DrawWithID("addpair", DrawAddPair);

MareSynchronos/UI/Components/DrawPairBase.cs

@@ -11,10 +11,10 @@ public abstract class DrawPairBase
 {
     protected static bool _showModalReport = false;
     protected readonly ApiController _apiController;
+    protected readonly UidDisplayHandler _displayHandler;
     protected Pair _pair;
     private static bool _reportPopupOpen = false;
     private static string _reportReason = string.Empty;
-    private readonly UidDisplayHandler _displayHandler;
     private readonly string _id;
 
     protected DrawPairBase(string id, Pair entry, ApiController apiController, UidDisplayHandler uIDDisplayHandler)

MareSynchronos/UI/Components/DrawUserPair.cs

@@ -26,7 +26,7 @@ public class DrawUserPair : DrawPairBase
     public bool IsVisible => _pair.IsVisible;
     public UserPairDto UserPair => _pair.UserPair!;
 
-    protected override void DrawLeftSide(float textPos, float originalY)
+    protected override void DrawLeftSide(float textPosY, float originalY)
     {
         FontAwesomeIcon connectionIcon;
         Vector4 connectionColor;
@@ -50,7 +50,7 @@ public class DrawUserPair : DrawPairBase
             connectionColor = ImGuiColors.ParsedGreen;
         }
 
-        ImGui.SetCursorPosY(textPos);
+        ImGui.SetCursorPosY(textPosY);
         ImGui.PushFont(UiBuilder.IconFont);
         UiSharedService.ColorText(connectionIcon.ToIconString(), connectionColor);
         ImGui.PopFont();
@@ -58,7 +58,7 @@ public class DrawUserPair : DrawPairBase
         if (_pair is { IsOnline: true, IsVisible: true })
         {
             ImGui.SameLine();
-            ImGui.SetCursorPosY(textPos);
+            ImGui.SetCursorPosY(textPosY);
             ImGui.PushFont(UiBuilder.IconFont);
             UiSharedService.ColorText(FontAwesomeIcon.Eye.ToIconString(), ImGuiColors.ParsedGreen);
             ImGui.PopFont();
@@ -165,6 +165,15 @@ public class DrawUserPair : DrawPairBase
 
     private void DrawPairedClientMenu(Pair entry)
     {
+        if (!entry.IsPaused)
+        {
+            if (UiSharedService.IconTextButton(FontAwesomeIcon.User, "Open Profile"))
+            {
+                _displayHandler.OpenProfile(entry);
+                ImGui.CloseCurrentPopup();
+            }
+            UiSharedService.AttachToolTip("Opens the profile for this user in a new window");
+        }
         if (entry.IsVisible)
         {
             if (UiSharedService.IconTextButton(FontAwesomeIcon.Sync, "Reload last data"))
@@ -175,6 +184,11 @@ public class DrawUserPair : DrawPairBase
             UiSharedService.AttachToolTip("This reapplies the last received character data to this character");
         }
 
+        if (UiSharedService.IconTextButton(FontAwesomeIcon.PlayCircle, "Cycle pause state"))
+        {
+            _ = _apiController.CyclePause(entry.UserData);
+            ImGui.CloseCurrentPopup();
+        }
         var entryUID = entry.UserData.AliasOrUID;
         if (UiSharedService.IconTextButton(FontAwesomeIcon.Folder, "Pair Groups"))
         {

MareSynchronos/UI/EditProfileUi.cs

@@ -100,6 +100,7 @@ public class EditProfileUi : WindowMediatorSubscriberBase
             ImGui.BeginDisabled();
             ImGui.Checkbox("Is NSFW", ref nsfw);
             ImGui.EndDisabled();
+            ImGui.NewLine();
             ImGui.PushFont(_uiBuilder.GetGameFontHandle(new GameFontStyle(GameFontFamilyAndSize.Axis12)).ImFont);
             UiSharedService.TextWrapped("Description:" + Environment.NewLine + profile.Description);
             ImGui.PopFont();

MareSynchronos/UI/Handlers/UidDisplayHandler.cs

@@ -3,40 +3,29 @@ using ImGuiNET;
 using MareSynchronos.PlayerData.Pairs;
 using MareSynchronos.Services.ServerConfiguration;
 using MareSynchronos.MareConfiguration;
-using Dalamud.Interface.Colors;
-using MareSynchronos.API.Data.Extensions;
 using ImGuiScene;
-using System.Numerics;
-using Microsoft.Extensions.Logging;
-using MareSynchronos.Services;
-using Dalamud.Interface.GameFonts;
+using MareSynchronos.Services.Mediator;
 
 namespace MareSynchronos.UI.Handlers;
 
 public class UidDisplayHandler
 {
-    private readonly ILogger<UidDisplayHandler> _logger;
     private readonly MareConfigService _mareConfigService;
-    private readonly MareProfileManager _mareProfileManager;
+    private readonly MareMediator _mediator;
     private readonly PairManager _pairManager;
     private readonly ServerConfigurationManager _serverManager;
     private readonly Dictionary<string, bool> _showUidForEntry = new(StringComparer.Ordinal);
-    private readonly UiBuilder _uiBuilder;
-    private readonly UiSharedService _uiSharedService;
     private string _editNickEntry = string.Empty;
     private string _editUserComment = string.Empty;
     private string _lastMouseOverUid = string.Empty;
-    private byte[] _lastProfilePicture = Array.Empty<byte>();
+    private bool _popupShown = false;
     private DateTime? _popupTime;
     private TextureWrap? _textureWrap;
 
-    public UidDisplayHandler(ILogger<UidDisplayHandler> logger, UiBuilder uiBuilder, MareProfileManager mareProfileManager,
-        UiSharedService uiSharedService, PairManager pairManager, ServerConfigurationManager serverManager, MareConfigService mareConfigService)
+    public UidDisplayHandler(MareMediator mediator, PairManager pairManager,
+        ServerConfigurationManager serverManager, MareConfigService mareConfigService)
     {
-        _logger = logger;
-        _uiBuilder = uiBuilder;
-        _mareProfileManager = mareProfileManager;
-        _uiSharedService = uiSharedService;
+        _mediator = mediator;
         _pairManager = pairManager;
         _serverManager = serverManager;
         _mareConfigService = mareConfigService;
@@ -63,108 +52,23 @@ public class UidDisplayHandler
 
                 if (_popupTime > DateTime.UtcNow || !_mareConfigService.Current.ProfilesShow)
                 {
-                    ImGui.SetTooltip("Left click to switch between UID display and nick" + Environment.NewLine + "Right click to change nick for " + pair.UserData.AliasOrUID);
+                    ImGui.SetTooltip("Left click to switch between UID display and nick" + Environment.NewLine
+                        + "Right click to change nick for " + pair.UserData.AliasOrUID + Environment.NewLine
+                        + "Middle Mouse Button to open their profile in a separate window");
                 }
-                else
+                else if (_popupTime < DateTime.UtcNow && !_popupShown)
                 {
-                    try
-                    {
-                        var spacing = ImGui.GetStyle().ItemSpacing;
-
-                        ImGui.SetNextWindowSizeConstraints(new Vector2(512 + spacing.X * 4, 256 + spacing.Y * 3), new Vector2(512 + spacing.X * 4, 512 + spacing.Y * 3));
-                        ImGui.BeginTooltip();
-
-                        var mareProfile = _mareProfileManager.GetMareProfile(pair.UserData);
-
-                        if (_textureWrap == null || !mareProfile.Profile.ImageData.Value.SequenceEqual(_lastProfilePicture))
-                        {
-                            _textureWrap?.Dispose();
-                            _lastProfilePicture = mareProfile.Profile.ImageData.Value;
-                            _textureWrap = _uiBuilder.LoadImage(_lastProfilePicture);
-                        }
-
-                        var drawList = ImGui.GetWindowDrawList();
-                        var rect = drawList.GetClipRectMin();
-                        var rectMax = drawList.GetClipRectMax();
-
-                        ImGui.Indent(256 + spacing.X * 2);
-                        if (_uiSharedService.UidFontBuilt) ImGui.PushFont(_uiSharedService.UidFont);
-                        UiSharedService.ColorText(pair.UserData.AliasOrUID, ImGuiColors.HealerGreen);
-                        if (_uiSharedService.UidFontBuilt) ImGui.PopFont();
-                        var pos = ImGui.GetCursorPos();
-                        var note = _serverManager.GetNoteForUid(pair.UserData.UID);
-                        if (!string.IsNullOrEmpty(note))
-                        {
-                            UiSharedService.ColorText(note, ImGuiColors.DalamudGrey);
-                        }
-                        string status = pair.IsVisible ? "Visible" : (pair.IsOnline ? "Online" : "Offline");
-                        UiSharedService.ColorText(status, (pair.IsVisible || pair.IsOnline) ? ImGuiColors.HealerGreen : ImGuiColors.DalamudRed);
-                        if (pair.IsVisible)
-                        {
-                            ImGui.SameLine();
-                            ImGui.TextUnformatted($"({pair.PlayerName})");
-                        }
-                        if (pair.UserPair != null)
-                        {
-                            ImGui.TextUnformatted("Directly paired");
-                            if (pair.UserPair.OwnPermissions.IsPaused())
-                            {
-                                ImGui.SameLine();
-                                UiSharedService.ColorText("You: paused", ImGuiColors.DalamudYellow);
-                            }
-                            if (pair.UserPair.OtherPermissions.IsPaused())
-                            {
-                                ImGui.SameLine();
-                                UiSharedService.ColorText("They: paused", ImGuiColors.DalamudYellow);
-                            }
-                        }
-                        if (pair.GroupPair.Any())
-                        {
-                            ImGui.TextUnformatted("Paired through Syncshells:");
-                            foreach (var groupPair in pair.GroupPair)
-                            {
-                                ImGui.TextUnformatted("- " + groupPair.Key.GroupAliasOrGID);
-                            }
-                        }
-
-                        var posDone = ImGui.GetCursorPos();
-                        ImGui.PushFont(_uiBuilder.GetGameFontHandle(new GameFontStyle(GameFontFamilyAndSize.Axis12)).ImFont);
-                        UiSharedService.TextWrapped(mareProfile.Profile.Description);
-                        ImGui.PopFont();
-                        ImGui.Unindent();
-
-                        var sepColor = ImGui.GetStyle().Colors[(int)ImGuiCol.Separator];
-
-                        bool tallerThanWide = _textureWrap.Height >= _textureWrap.Width;
-                        var stretchFactor = tallerThanWide ? 256f / _textureWrap.Height : 256f / _textureWrap.Width;
-                        var newWidth = _textureWrap.Width * stretchFactor;
-                        var newHeight = _textureWrap.Height * stretchFactor;
-                        var remainingWidth = (256f - newWidth) / 2f;
-                        var remainingHeight = (256f - newHeight) / 2f;
-                        drawList.AddImage(_textureWrap.ImGuiHandle, new Vector2(rect.X + spacing.X + remainingWidth, rect.Y + spacing.Y + remainingHeight),
-                            new Vector2(rect.X + spacing.X + remainingWidth + newWidth, rect.Y + spacing.Y + remainingHeight + newHeight));
-
-                        drawList.AddLine(new Vector2(rect.X + 256 + spacing.X * 2, rect.Y + pos.Y - spacing.Y),
-                            new Vector2(rectMax.X - spacing.X, rect.Y + pos.Y - spacing.Y),
-                            UiSharedService.Color((byte)(sepColor.X * 255), (byte)(sepColor.Y * 255), (byte)(sepColor.Z * 255), (byte)(sepColor.W * 255)));
-                        drawList.AddLine(new Vector2(rect.X + 256 + spacing.X * 2, rect.Y + posDone.Y - spacing.Y),
-                            new Vector2(rectMax.X - spacing.X, rect.Y + posDone.Y - spacing.Y),
-                            UiSharedService.Color((byte)(sepColor.X * 255), (byte)(sepColor.Y * 255), (byte)(sepColor.Z * 255), (byte)(sepColor.W * 255)));
-
-                        ImGui.EndTooltip();
-                    }
-                    catch (Exception ex)
-                    {
-                        _logger.LogWarning("Error during draw tooltip", ex);
-                    }
+                    _popupShown = true;
+                    _mediator.Publish(new ProfilePopoutToggle(pair));
                 }
             }
             else
             {
                 if (string.Equals(_lastMouseOverUid, id))
                 {
-                    _lastProfilePicture = Array.Empty<byte>();
+                    _mediator.Publish(new ProfilePopoutToggle(null));
                     _lastMouseOverUid = string.Empty;
+                    _popupShown = false;
                     _textureWrap?.Dispose();
                     _textureWrap = null;
                 }
@@ -187,6 +91,11 @@ public class UidDisplayHandler
                 _editUserComment = pair.GetNote() ?? string.Empty;
                 _editNickEntry = pair.UserData.UID;
             }
+
+            if (ImGui.IsItemClicked(ImGuiMouseButton.Middle))
+            {
+                _mediator.Publish(new ProfileOpenStandaloneMessage(pair));
+            }
         }
         else
         {
@@ -244,6 +153,11 @@ public class UidDisplayHandler
         _editUserComment = string.Empty;
     }
 
+    internal void OpenProfile(Pair entry)
+    {
+        _mediator.Publish(new ProfileOpenStandaloneMessage(entry));
+    }
+
     private bool ShowUidInsteadOfName(Pair pair)
     {
         _showUidForEntry.TryGetValue(pair.UserData.UID, out var showUidInsteadOfName);

MareSynchronos/UI/PopoutProfileUi.cs

@@ -0,0 +1,191 @@
+using Dalamud.Interface.Colors;
+using ImGuiNET;
+using ImGuiScene;
+using MareSynchronos.PlayerData.Pairs;
+using MareSynchronos.Services;
+using MareSynchronos.Services.Mediator;
+using MareSynchronos.Services.ServerConfiguration;
+using Microsoft.Extensions.Logging;
+using System.Numerics;
+using MareSynchronos.API.Data.Extensions;
+using MareSynchronos.MareConfiguration;
+using Dalamud.Interface;
+
+namespace MareSynchronos.UI;
+
+public class PopoutProfileUi : WindowMediatorSubscriberBase
+{
+    private readonly MareProfileManager _mareProfileManager;
+    private readonly ServerConfigurationManager _serverManager;
+    private readonly UiSharedService _uiSharedService;
+    private Vector2 _lastMainPos = Vector2.Zero;
+    private Vector2 _lastMainSize = Vector2.Zero;
+    private byte[] _lastProfilePicture = Array.Empty<byte>();
+    private byte[] _lastSupporterPicture = Array.Empty<byte>();
+    private Pair? _pair;
+    private TextureWrap? _supporterTextureWrap;
+    private TextureWrap? _textureWrap;
+
+    public PopoutProfileUi(ILogger<PopoutProfileUi> logger, MareMediator mediator, UiSharedService uiBuilder,
+        ServerConfigurationManager serverManager, MareConfigService mareConfigService,
+        MareProfileManager mareProfileManager) : base(logger, mediator, "###MareSynchronosPopoutProfileUI")
+    {
+        _uiSharedService = uiBuilder;
+        _serverManager = serverManager;
+        _mareProfileManager = mareProfileManager;
+
+        Flags = ImGuiWindowFlags.NoDecoration;
+
+        Mediator.Subscribe<ProfilePopoutToggle>(this, (msg) =>
+        {
+            IsOpen = msg.Pair != null;
+            _pair = msg.Pair;
+            _lastProfilePicture = Array.Empty<byte>();
+            _lastSupporterPicture = Array.Empty<byte>();
+            _textureWrap?.Dispose();
+            _textureWrap = null;
+            _supporterTextureWrap?.Dispose();
+            _supporterTextureWrap = null;
+        });
+
+        Mediator.Subscribe<CompactUiChange>(this, (msg) =>
+        {
+            if (msg.Size != Vector2.Zero)
+            {
+                var border = ImGui.GetStyle().WindowBorderSize;
+                var padding = ImGui.GetStyle().WindowPadding;
+                var spacing = ImGui.GetStyle().ItemSpacing;
+                Size = new(256 + (padding.X * 2) + border, msg.Size.Y / ImGuiHelpers.GlobalScale);
+                _lastMainSize = msg.Size;
+            }
+            var mainPos = msg.Position == Vector2.Zero ? _lastMainPos : msg.Position;
+            if (mareConfigService.Current.ProfilePopoutRight)
+            {
+                Position = new(mainPos.X + _lastMainSize.X * ImGuiHelpers.GlobalScale, mainPos.Y);
+            }
+            else
+            {
+                Position = new(mainPos.X - Size.Value.X * ImGuiHelpers.GlobalScale, mainPos.Y);
+            }
+
+            if (msg.Position != Vector2.Zero)
+            {
+                _lastMainPos = msg.Position;
+            }
+        });
+
+        IsOpen = false;
+    }
+
+    public override void Draw()
+    {
+        if (_pair == null) return;
+
+        try
+        {
+            var spacing = ImGui.GetStyle().ItemSpacing;
+
+            var mareProfile = _mareProfileManager.GetMareProfile(_pair.UserData);
+
+            if (_textureWrap == null || !mareProfile.Profile.ImageData.Value.SequenceEqual(_lastProfilePicture))
+            {
+                _textureWrap?.Dispose();
+                _lastProfilePicture = mareProfile.Profile.ImageData.Value;
+                _textureWrap = _uiSharedService.LoadImage(_lastProfilePicture);
+            }
+
+            if (_supporterTextureWrap == null || !mareProfile.Profile.SupporterImageData.Value.SequenceEqual(_lastSupporterPicture))
+            {
+                _supporterTextureWrap?.Dispose();
+                _supporterTextureWrap = null;
+                if (!string.IsNullOrEmpty(mareProfile.Profile.Base64SupporterPicture))
+                {
+                    _lastSupporterPicture = mareProfile.Profile.SupporterImageData.Value;
+                    _supporterTextureWrap = _uiSharedService.LoadImage(_lastSupporterPicture);
+                }
+            }
+
+            var drawList = ImGui.GetWindowDrawList();
+            var rectMin = drawList.GetClipRectMin();
+            var rectMax = drawList.GetClipRectMax();
+
+            if (_uiSharedService.UidFontBuilt) ImGui.PushFont(_uiSharedService.UidFont);
+            UiSharedService.ColorText(_pair.UserData.AliasOrUID, ImGuiColors.HealerGreen);
+            if (_uiSharedService.UidFontBuilt) ImGui.PopFont();
+            ImGui.Dummy(new(spacing.Y, spacing.Y));
+            var textPos = ImGui.GetCursorPosY();
+            ImGui.Separator();
+            var imagePos = ImGui.GetCursorPos();
+            ImGui.Dummy(new(256, 256 * ImGuiHelpers.GlobalScale + spacing.Y));
+            var note = _serverManager.GetNoteForUid(_pair.UserData.UID);
+            if (!string.IsNullOrEmpty(note))
+            {
+                UiSharedService.ColorText(note, ImGuiColors.DalamudGrey);
+            }
+            string status = _pair.IsVisible ? "Visible" : (_pair.IsOnline ? "Online" : "Offline");
+            UiSharedService.ColorText(status, (_pair.IsVisible || _pair.IsOnline) ? ImGuiColors.HealerGreen : ImGuiColors.DalamudRed);
+            if (_pair.IsVisible)
+            {
+                ImGui.SameLine();
+                ImGui.TextUnformatted($"({_pair.PlayerName})");
+            }
+            if (_pair.UserPair != null)
+            {
+                ImGui.TextUnformatted("Directly paired");
+                if (_pair.UserPair.OwnPermissions.IsPaused())
+                {
+                    ImGui.SameLine();
+                    UiSharedService.ColorText("You: paused", ImGuiColors.DalamudYellow);
+                }
+                if (_pair.UserPair.OtherPermissions.IsPaused())
+                {
+                    ImGui.SameLine();
+                    UiSharedService.ColorText("They: paused", ImGuiColors.DalamudYellow);
+                }
+            }
+            if (_pair.GroupPair.Any())
+            {
+                ImGui.TextUnformatted("Paired through Syncshells:");
+                foreach (var groupPair in _pair.GroupPair)
+                {
+                    ImGui.TextUnformatted("- " + groupPair.Key.GroupAliasOrGID);
+                }
+            }
+
+            ImGui.Separator();
+            ImGui.PushFont(_uiSharedService.GetGameFontHandle());
+            var remaining = ImGui.GetWindowContentRegionMax().Y - ImGui.GetCursorPosY();
+            var descText = mareProfile.Profile.Description;
+            var textSize = ImGui.CalcTextSize(descText, 256f * ImGuiHelpers.GlobalScale);
+            bool trimmed = textSize.Y > remaining;
+            while (textSize.Y > remaining && descText.Contains(' '))
+            {
+                descText = descText.Substring(0, descText.LastIndexOf(' ')).TrimEnd();
+                textSize = ImGui.CalcTextSize(descText + $"...{Environment.NewLine}[Open Full Profile for complete description]", 256f * ImGuiHelpers.GlobalScale);
+            }
+            UiSharedService.TextWrapped(trimmed ? descText + $"...{Environment.NewLine}[Open Full Profile for complete description]" : mareProfile.Profile.Description);
+            ImGui.PopFont();
+
+            var padding = ImGui.GetStyle().WindowPadding.X / 2;
+            bool tallerThanWide = _textureWrap.Height >= _textureWrap.Width;
+            var stretchFactor = tallerThanWide ? 256f * ImGuiHelpers.GlobalScale / _textureWrap.Height : 256f * ImGuiHelpers.GlobalScale / _textureWrap.Width;
+            var newWidth = _textureWrap.Width * stretchFactor;
+            var newHeight = _textureWrap.Height * stretchFactor;
+            var remainingWidth = (256f * ImGuiHelpers.GlobalScale - newWidth) / 2f;
+            var remainingHeight = (256f * ImGuiHelpers.GlobalScale - newHeight) / 2f;
+            drawList.AddImage(_textureWrap.ImGuiHandle, new Vector2(rectMin.X + padding + remainingWidth, rectMin.Y + spacing.Y + imagePos.Y + remainingHeight),
+                new Vector2(rectMin.X + padding + remainingWidth + newWidth, rectMin.Y + spacing.Y + imagePos.Y + remainingHeight + newHeight));
+            if (_supporterTextureWrap != null)
+            {
+                const float iconSize = 38;
+                drawList.AddImage(_supporterTextureWrap.ImGuiHandle,
+                    new Vector2(rectMax.X - iconSize - spacing.X, rectMin.Y + (textPos / 2) - (iconSize / 2)),
+                    new Vector2(rectMax.X - spacing.X, rectMin.Y + iconSize + (textPos / 2) - (iconSize / 2)));
+            }
+        }
+        catch (Exception ex)
+        {
+            _logger.LogWarning(ex, "Error during draw tooltip");
+        }
+    }
+}

MareSynchronos/UI/SettingsUi.cs

@@ -495,6 +495,7 @@ public class SettingsUi : WindowMediatorSubscriberBase
         var showProfiles = _configService.Current.ProfilesShow;
         var showNsfwProfiles = _configService.Current.ProfilesAllowNsfw;
         var profileDelay = _configService.Current.ProfileDelay;
+        var profileOnRight = _configService.Current.ProfilePopoutRight;
 
         if (ImGui.Checkbox("Show separate Visible group", ref showVisibleSeparate))
         {
@@ -526,6 +527,13 @@ public class SettingsUi : WindowMediatorSubscriberBase
         UiSharedService.DrawHelpText("This will show the configured user profile after a set delay");
         ImGui.Indent();
         if (!showProfiles) ImGui.BeginDisabled();
+        if (ImGui.Checkbox("Popout profiles on the right", ref profileOnRight))
+        {
+            _configService.Current.ProfilePopoutRight = profileOnRight;
+            _configService.Save();
+            Mediator.Publish(new CompactUiChange(Vector2.Zero, Vector2.Zero));
+        }
+        UiSharedService.DrawHelpText("Will show profiles on the right side of the main UI");
         if (ImGui.Checkbox("Show profiles marked as NSFW", ref showNsfwProfiles))
         {
             Mediator.Publish(new ClearProfileDataMessage());

MareSynchronos/UI/StandaloneProfileUi.cs

@@ -0,0 +1,176 @@
+using Dalamud.Interface.Colors;
+using ImGuiNET;
+using ImGuiScene;
+using MareSynchronos.PlayerData.Pairs;
+using MareSynchronos.Services;
+using MareSynchronos.Services.Mediator;
+using MareSynchronos.Services.ServerConfiguration;
+using Microsoft.Extensions.Logging;
+using System.Numerics;
+using MareSynchronos.API.Data.Extensions;
+using Dalamud.Interface;
+
+namespace MareSynchronos.UI;
+
+public class StandaloneProfileUi : WindowMediatorSubscriberBase
+{
+    private readonly MareProfileManager _mareProfileManager;
+    private readonly ServerConfigurationManager _serverManager;
+    private readonly UiSharedService _uiSharedService;
+    private bool _adjustedForScrollBars = false;
+    private byte[] _lastProfilePicture = Array.Empty<byte>();
+    private byte[] _lastSupporterPicture = Array.Empty<byte>();
+    private TextureWrap? _supporterTextureWrap;
+    private TextureWrap? _textureWrap;
+
+    public StandaloneProfileUi(ILogger<StandaloneProfileUi> logger, MareMediator mediator, UiSharedService uiBuilder,
+        ServerConfigurationManager serverManager, MareProfileManager mareProfileManager, Pair pair)
+        : base(logger, mediator, "Mare Profile of " + pair.UserData.AliasOrUID + "##MareSynchronosStandaloneProfileUI" + pair.UserData.AliasOrUID)
+    {
+        _uiSharedService = uiBuilder;
+        _serverManager = serverManager;
+        _mareProfileManager = mareProfileManager;
+        Pair = pair;
+
+        Flags = ImGuiWindowFlags.NoResize | ImGuiWindowFlags.AlwaysAutoResize;
+
+        var spacing = ImGui.GetStyle().ItemSpacing;
+
+        Size = new(512 + spacing.X * 3 + ImGui.GetStyle().WindowPadding.X + ImGui.GetStyle().WindowBorderSize, 512);
+
+        IsOpen = true;
+    }
+
+    public Pair Pair { get; init; }
+
+    public override void Draw()
+    {
+        try
+        {
+            var spacing = ImGui.GetStyle().ItemSpacing;
+
+            var mareProfile = _mareProfileManager.GetMareProfile(Pair.UserData);
+
+            if (_textureWrap == null || !mareProfile.Profile.ImageData.Value.SequenceEqual(_lastProfilePicture))
+            {
+                _textureWrap?.Dispose();
+                _lastProfilePicture = mareProfile.Profile.ImageData.Value;
+                _textureWrap = _uiSharedService.LoadImage(_lastProfilePicture);
+            }
+
+            if (_supporterTextureWrap == null || !mareProfile.Profile.SupporterImageData.Value.SequenceEqual(_lastSupporterPicture))
+            {
+                _supporterTextureWrap?.Dispose();
+                _supporterTextureWrap = null;
+                if (!string.IsNullOrEmpty(mareProfile.Profile.Base64SupporterPicture))
+                {
+                    _lastSupporterPicture = mareProfile.Profile.SupporterImageData.Value;
+                    _supporterTextureWrap = _uiSharedService.LoadImage(_lastSupporterPicture);
+                }
+            }
+
+            var drawList = ImGui.GetWindowDrawList();
+            var rectMin = drawList.GetClipRectMin();
+            var rectMax = drawList.GetClipRectMax();
+            var headerSize = ImGui.GetCursorPosY() - ImGui.GetStyle().WindowPadding.Y;
+
+            if (_uiSharedService.UidFontBuilt) ImGui.PushFont(_uiSharedService.UidFont);
+            UiSharedService.ColorText(Pair.UserData.AliasOrUID, ImGuiColors.HealerGreen);
+            if (_uiSharedService.UidFontBuilt) ImGui.PopFont();
+            ImGuiHelpers.ScaledDummy(new Vector2(spacing.Y, spacing.Y));
+            var textPos = ImGui.GetCursorPosY() - headerSize;
+            ImGui.Separator();
+            var pos = ImGui.GetCursorPos() with { Y = ImGui.GetCursorPosY() - headerSize };
+            ImGuiHelpers.ScaledDummy(new Vector2(256, 256 + spacing.Y));
+            var postDummy = ImGui.GetCursorPosY();
+            ImGui.SameLine();
+            var descriptionTextSize = ImGui.CalcTextSize(mareProfile.Profile.Description, 256f);
+            var descriptionChildHeight = rectMax.Y - pos.Y - rectMin.Y - spacing.Y * 2;
+            if (descriptionTextSize.Y > descriptionChildHeight && !_adjustedForScrollBars)
+            {
+                Size = Size.Value with { X = Size.Value.X + ImGui.GetStyle().ScrollbarSize };
+                _adjustedForScrollBars = true;
+            }
+            else if (descriptionTextSize.Y < descriptionChildHeight && _adjustedForScrollBars)
+            {
+                Size = Size.Value with { X = Size.Value.X - ImGui.GetStyle().ScrollbarSize };
+                _adjustedForScrollBars = false;
+            }
+            var childFrame = ImGuiHelpers.ScaledVector2(256 + ImGui.GetStyle().WindowPadding.X + ImGui.GetStyle().WindowBorderSize, descriptionChildHeight);
+            childFrame = childFrame with
+            {
+                X = childFrame.X + (_adjustedForScrollBars ? ImGui.GetStyle().ScrollbarSize : 0),
+                Y = childFrame.Y / ImGuiHelpers.GlobalScale
+            };
+            if (ImGui.BeginChildFrame(1000, childFrame))
+            {
+                ImGui.PushFont(_uiSharedService.GetGameFontHandle());
+                ImGui.TextWrapped(mareProfile.Profile.Description);
+                ImGui.PopFont();
+            }
+            ImGui.EndChildFrame();
+
+            ImGui.SetCursorPosY(postDummy);
+            var note = _serverManager.GetNoteForUid(Pair.UserData.UID);
+            if (!string.IsNullOrEmpty(note))
+            {
+                UiSharedService.ColorText(note, ImGuiColors.DalamudGrey);
+            }
+            string status = Pair.IsVisible ? "Visible" : (Pair.IsOnline ? "Online" : "Offline");
+            UiSharedService.ColorText(status, (Pair.IsVisible || Pair.IsOnline) ? ImGuiColors.HealerGreen : ImGuiColors.DalamudRed);
+            if (Pair.IsVisible)
+            {
+                ImGui.SameLine();
+                ImGui.TextUnformatted($"({Pair.PlayerName})");
+            }
+            if (Pair.UserPair != null)
+            {
+                ImGui.TextUnformatted("Directly paired");
+                if (Pair.UserPair.OwnPermissions.IsPaused())
+                {
+                    ImGui.SameLine();
+                    UiSharedService.ColorText("You: paused", ImGuiColors.DalamudYellow);
+                }
+                if (Pair.UserPair.OtherPermissions.IsPaused())
+                {
+                    ImGui.SameLine();
+                    UiSharedService.ColorText("They: paused", ImGuiColors.DalamudYellow);
+                }
+            }
+            if (Pair.GroupPair.Any())
+            {
+                ImGui.TextUnformatted("Paired through Syncshells:");
+                foreach (var groupPair in Pair.GroupPair)
+                {
+                    ImGui.TextUnformatted("- " + groupPair.Key.GroupAliasOrGID);
+                }
+            }
+
+            var padding = ImGui.GetStyle().WindowPadding.X / 2;
+            bool tallerThanWide = _textureWrap.Height >= _textureWrap.Width;
+            var stretchFactor = tallerThanWide ? 256f * ImGuiHelpers.GlobalScale / _textureWrap.Height : 256f * ImGuiHelpers.GlobalScale / _textureWrap.Width;
+            var newWidth = _textureWrap.Width * stretchFactor;
+            var newHeight = _textureWrap.Height * stretchFactor;
+            var remainingWidth = (256f * ImGuiHelpers.GlobalScale - newWidth) / 2f;
+            var remainingHeight = (256f * ImGuiHelpers.GlobalScale - newHeight) / 2f;
+            drawList.AddImage(_textureWrap.ImGuiHandle, new Vector2(rectMin.X + padding + remainingWidth, rectMin.Y + spacing.Y + pos.Y + remainingHeight),
+                new Vector2(rectMin.X + padding + remainingWidth + newWidth, rectMin.Y + spacing.Y + pos.Y + remainingHeight + newHeight));
+            if (_supporterTextureWrap != null)
+            {
+                const float iconSize = 38;
+                drawList.AddImage(_supporterTextureWrap.ImGuiHandle,
+                    new Vector2(rectMax.X - iconSize - spacing.X, rectMin.Y + (textPos / 2) - (iconSize / 2)),
+                    new Vector2(rectMax.X - spacing.X, rectMin.Y + iconSize + (textPos / 2) - (iconSize / 2)));
+            }
+        }
+        catch (Exception ex)
+        {
+            _logger.LogWarning(ex, "Error during draw tooltip");
+        }
+    }
+
+    public override void OnClose()
+    {
+        Mediator.Publish(new RemoveWindowMessage(this));
+    }
+}

MareSynchronos/UI/UISharedService.cs

@@ -1,9 +1,11 @@
 using Dalamud.Interface;
 using Dalamud.Interface.Colors;
+using Dalamud.Interface.GameFonts;
 using Dalamud.Interface.ImGuiFileDialog;
 using Dalamud.Plugin;
 using Dalamud.Utility;
 using ImGuiNET;
+using ImGuiScene;
 using MareSynchronos.FileCache;
 using MareSynchronos.Interop;
 using MareSynchronos.Localization;
@@ -43,17 +45,11 @@ public partial class UiSharedService : DisposableMediatorSubscriberBase
     private readonly MareConfigService _configService;
 
     private readonly DalamudUtilService _dalamudUtil;
-
     private readonly IpcManager _ipcManager;
-
     private readonly Dalamud.Localization _localization;
-
     private readonly DalamudPluginInterface _pluginInterface;
-
     private readonly Dictionary<string, object> _selectedComboItems = new(StringComparer.Ordinal);
-
     private readonly ServerConfigurationManager _serverConfigurationManager;
-
     private bool _cacheDirectoryHasOtherFilesThanCache = false;
 
     private bool _cacheDirectoryIsValidPath = true;
@@ -78,7 +74,8 @@ public partial class UiSharedService : DisposableMediatorSubscriberBase
 
     private int _serverSelectionIndex = -1;
 
-    public UiSharedService(ILogger<UiSharedService> logger, IpcManager ipcManager, ApiController apiController, PeriodicFileScanner cacheScanner, FileDialogManager fileDialogManager,
+    public UiSharedService(ILogger<UiSharedService> logger, IpcManager ipcManager, ApiController apiController,
+        PeriodicFileScanner cacheScanner, FileDialogManager fileDialogManager,
         MareConfigService configService, DalamudUtilService dalamudUtil, DalamudPluginInterface pluginInterface, Dalamud.Localization localization,
         ServerConfigurationManager serverManager, MareMediator mediator) : base(logger, mediator)
     {
@@ -761,6 +758,16 @@ public partial class UiSharedService : DisposableMediatorSubscriberBase
     [LibraryImport("user32")]
     internal static partial short GetKeyState(int nVirtKey);
 
+    internal ImFontPtr GetGameFontHandle()
+    {
+        return _pluginInterface.UiBuilder.GetGameFontHandle(new GameFontStyle(GameFontFamilyAndSize.Axis12)).ImFont;
+    }
+
+    internal TextureWrap LoadImage(byte[] imageData)
+    {
+        return _pluginInterface.UiBuilder.LoadImage(imageData);
+    }
+
     protected override void Dispose(bool disposing)
     {
         base.Dispose(disposing);