feat: added user avatars in author search dropdown (#4551)

* feat: added user avatars in author search dropdown

* cleanup

* cleanup

* feat: added user avatars in author search dropdown

* cleanup

* cleanup

* added user icon

* Size tweaks

Co-authored-by: Aditya Sharma <aditya167411@gmail.com>

app/components/Avatar/Avatar.tsx

@@ -74,9 +74,10 @@ const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid
-    ${(props) =>
-      props.$showBorder === false ? "transparent" : props.theme.background};
+  border: ${(props) =>
+    props.$showBorder === false
+      ? "none"
+      : `2px solid ${props.theme.background}`};
   flex-shrink: 0;
   overflow: hidden;
 `;

app/components/FilterOptions.tsx

@@ -10,6 +10,7 @@ type TFilterOption = {
   key: string;
   label: string;
   note?: string;
+  icon?: React.ReactNode;
 };
 
 type Props = {
@@ -57,6 +58,7 @@ const FilterOptions = ({
             selected={option.key === activeKey}
             {...menu}
           >
+            {option.icon && <Icon>{option.icon}</Icon>}
             {option.note ? (
               <LabelWithNote>
                 {option.label}
@@ -106,6 +108,12 @@ const StyledButton = styled(Button)`
   }
 `;
 
+const Icon = styled.div`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+
 const Wrapper = styled.div`
   margin-right: 8px;
 `;

app/scenes/Search/components/UserFilter.tsx

@@ -1,6 +1,9 @@
 import { observer } from "mobx-react";
+import { UserIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Avatar from "~/components/Avatar";
 import FilterOptions from "~/components/FilterOptions";
 import useStores from "~/hooks/useStores";
 
@@ -24,11 +27,13 @@ function UserFilter(props: Props) {
     const userOptions = users.all.map((user) => ({
       key: user.id,
       label: user.name,
+      icon: <Avatar model={user} showBorder={false} size={18} />,
     }));
     return [
       {
         key: "",
         label: t("Any author"),
+        icon: <NoAuthor size={20} />,
       },
       ...userOptions,
     ];
@@ -45,4 +50,8 @@ function UserFilter(props: Props) {
   );
 }
 
+const NoAuthor = styled(UserIcon)`
+  margin-left: -2px;
+`;
+
 export default observer(UserFilter);