feat: add owner icon

src/assets/icons/owner.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="url(#paint0_linear_14171_23293)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2431 5.96725C12.4162 5.86325 12.6357 5.87375 12.7982 5.99425C12.9602 6.11525 13.0342 6.32125 12.9857 6.51725L11.9857 10.5173C11.9297 10.7403 11.7297 10.8963 11.5002 10.8963H4.50018C4.27068 10.8963 4.07068 10.7397 4.01468 10.5173L3.01468 6.51725C2.96618 6.32125 3.04018 6.11525 3.20218 5.99425C3.36518 5.87425 3.58418 5.86375 3.75768 5.96725L5.84918 7.22225L7.58468 4.61875C7.59654 4.60096 7.61307 4.58921 7.62965 4.57743C7.63964 4.57033 7.64966 4.56321 7.65868 4.55475L7.17718 4.07275C7.08018 3.97575 7.08018 3.81625 7.17718 3.71925L7.82368 3.07275C7.92068 2.97575 8.08018 2.97575 8.17718 3.07275L8.82368 3.71925C8.92068 3.81625 8.92068 3.97575 8.82368 4.07275L8.34218 4.55475C8.3512 4.56338 8.3614 4.57062 8.37161 4.57787C8.38802 4.58951 8.40447 4.60119 8.41618 4.61875L10.1517 7.22225L12.2431 5.96725ZM4.00025 11.3962H12.0002V12.3963H4.00025V11.3962Z" fill="#ECE9FE"/>
+<defs>
+<linearGradient id="paint0_linear_14171_23293" x1="0" y1="0" x2="16" y2="-1.66785e-09" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7F56D9"/>
+<stop offset="1" stop-color="#9E77ED"/>
+</linearGradient>
+</defs>
+</svg>

src/common/component/Contact.js

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import Tippy from "@tippyjs/react";
+import IconOwner from "../../assets/icons/owner.svg";
 import Avatar from "./Avatar";
 import Profile from "./Profile";
 
@@ -62,6 +63,7 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Contact({
+  owner = false,
   dm = false,
   interactive = true,
   uid = "",
@@ -96,6 +98,7 @@ export default function Contact({
           <div className={`status ${curr.online ? "online" : "offline"}`}></div>
         </div>
         {!compact && <span className="name">{curr?.name}</span>}
+        {owner && <IconOwner />}
       </StyledWrapper>
     </Tippy>
   );

src/common/component/ManageMembers.js

@@ -12,6 +12,7 @@ import Contact from "./Contact";
 import StyledMenu from "./styled/Menu";
 import InviteLink from "./InviteLink";
 import moreIcon from "../../assets/icons/more.svg?url";
+import IconOwner from "../../assets/icons/owner.svg";
 const StyledWrapper = styled.section`
   display: flex;
   flex-direction: column;
@@ -58,6 +59,9 @@ const StyledWrapper = styled.section`
             font-size: 14px;
             line-height: 20px;
             color: #52525b;
+            display: flex;
+            align-items: center;
+            gap: 4px;
           }
           .email {
             font-weight: normal;
@@ -154,12 +158,15 @@ export default function ManageMembers({ cid = null }) {
       <ul className="members">
         {uids.map((uid) => {
           const { name, email, is_admin } = contacts.byId[uid];
+          const owner = channel && channel.owner == uid;
           return (
             <li key={uid} className="member">
               <div className="left">
                 <Contact compact uid={uid} interactive={false} />
                 <div className="info">
-                  <span className="name">{name}</span>
+                  <span className="name">
+                    {name} {owner && <IconOwner />}
+                  </span>
                   <span className="email">{email}</span>
                 </div>
               </div>

src/routes/chat/ChannelChat/index.js

@@ -79,7 +79,9 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   };
 
   const { name, description, is_public, members = [], owner } = data;
-  const memberIds = is_public ? userIds : members;
+  const memberIds = is_public
+    ? userIds
+    : members.sort((n) => (n == owner ? -1 : 0));
   const addVisible = loginUser?.is_admin || owner == loginUid;
   console.log("channel message list", msgIds);
   const readIndex = footprint.readChannels[cid];
@@ -214,7 +216,15 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </div>
                 )}
                 {memberIds.map((uid) => {
-                  return <Contact key={uid} uid={uid} dm popover />;
+                  return (
+                    <Contact
+                      owner={owner == uid}
+                      key={uid}
+                      uid={uid}
+                      dm
+                      popover
+                    />
+                  );
                 })}
               </StyledContacts>
             </>