Fix: Message copy brackets and icon changes

src/pages/channels/ChannelHeader.tsx

@@ -8,7 +8,7 @@ import { getChannelName } from "../../context/revoltjs/util";
 import UserStatus from "../../components/common/user/UserStatus";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 import { At, Hash } from "@styled-icons/boxicons-regular";
-import { Save, Group } from "@styled-icons/boxicons-solid";
+import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
@@ -62,7 +62,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
     let icon, recipient;
     switch (channel.channel_type) {
         case "SavedMessages":
-            icon = <Save size={24} />;
+            icon = <Notepad size={24} />;
             break;
         case "DirectMessage":
             icon = <At size={24} />;

src/pages/friends/Friend.module.scss

@@ -6,12 +6,16 @@
     .overline {
         display: flex;
         position: sticky;
+        align-items: center;
         top: 0;
         background: var(--primary-background);
-        padding: 8px 0;
+        padding: 5px 0;
         z-index: 10;
+        cursor: pointer;
         
-        
+        svg {
+            margin-inline-end: 4px;
+        }
     }
 
     &[data-empty="true"] {
@@ -90,9 +94,16 @@
     }
 }
 
+.divider {
+    width: 1px;
+    height: 24px;
+    margin: 0 8px;
+    background: var(--primary-background);
+}
+
 @media only screen and (max-width: 768px) {
     .list {
-        padding: 0 12px 12px 12px;
+        padding: 0 8px 8px 8px;
     }
 
     .call {
@@ -100,10 +111,9 @@
     }
 }
 
-
 //! FIXME: Move this to the Header component, do this:
 // 1. Check if header has topic, if yes, flex-grow: 0 on the title.
 // 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
 .title {
     flex-grow: 1;
-}
+}

src/pages/friends/Friends.tsx

@@ -1,8 +1,7 @@
-import styles from "./Friend.module.scss";
-import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
-
 import { Friend } from "./Friend";
 import { Text } from "preact-i18n";
+import styles from "./Friend.module.scss";
+import Tooltip from "../../components/common/Tooltip";
 import Header from "../../components/ui/Header";
 import Overline from "../../components/ui/Overline";
 import IconButton from "../../components/ui/IconButton";
@@ -10,6 +9,8 @@ import { useUsers } from "../../context/revoltjs/hooks";
 import { User, Users } from "revolt.js/dist/api/objects";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
+import { UserDetail, Conversation, UserPlus, TennisBall } from "@styled-icons/boxicons-solid";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -39,12 +40,24 @@ export default function Friends() {
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>
-                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
-                    <Conversation size={24} />
-                </IconButton>
-                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
-                    <UserPlus size={24} />
-                </IconButton>
+                <Tooltip content={"Create Group"} placement="bottom">
+                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
+                        <Conversation size={24} />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip content={"Add Friend"} placement="bottom">
+                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
+                        <UserPlus size={24} />
+                    </IconButton>
+                </Tooltip>
+                {/* 
+                <div className={styles.divider} />
+                <Tooltip content={"Friend Activity"} placement="bottom">
+                    <IconButton>
+                        <TennisBall size={24} />
+                    </IconButton>            
+                </Tooltip>
+                */}
             </Header>
             <div
                 className={styles.list}
@@ -60,6 +73,7 @@ export default function Friends() {
                 )}
                 {pending.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
+                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
                         <Text id="app.special.friends.pending" /> —{" "}
                         {pending.length}
                     </Overline>
@@ -69,6 +83,7 @@ export default function Friends() {
                 ))}
                 {online.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
+                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
                         <Text id="app.status.online" /> —{" "}
                         {online.length}
                     </Overline>
@@ -78,6 +93,7 @@ export default function Friends() {
                 ))}
                 {offline.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
+                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
                         <Text id="app.status.offline" /> —{" "}
                         {offline.length}
                     </Overline>