do not merge me

components/app/interface/settings/_layout/Content.tsx

@@ -113,9 +113,9 @@ const CloseAnchor = styled.a`
   transition: ${(props) => props.theme!.transitions.fast} background-color;
 
   svg {
-    transition: ${(props) => props.theme!.transitions.fast} background-color;
     color: ${(props) =>
       props.theme!.colours["settings-close-anchor"]} !important;
+    transition: ${(props) => props.theme!.transitions.fast} background-color;
   }
 
   &:hover {
@@ -151,7 +151,7 @@ const CloseAction = styled.div`
     justify-content: center;
     width: 36px;
     font-weight: 600;
-    color: ${(props) => props.theme!.colours["settings-content-foreground"]};
     font-size: 0.75rem;
+    color: ${(props) => props.theme!.colours["settings-foreground"]};
   }
 `;

components/app/interface/settings/_layout/SidebarButton.tsx

@@ -19,6 +19,7 @@ export const SidebarButton = styled.a<Props>`
   font-size: 15px;
   user-select: none;
   transition: background-color 0.1s ease-in-out;
+  fill: ${(props) => props.theme!.colours["settings-sidebar-foreground"]};
   color: ${(props) => props.theme!.colours["settings-sidebar-foreground"]};
 
   svg {

components/app/interface/settings/client/Account.tsx

@@ -68,9 +68,9 @@ function UserInformation() {
                 </div>
               </div>
             </ProfileDetails>
-            <div class="button">
+            {/*<div class="button">
               <MdEdit {...iconSize(22)} />
-            </div>
+  </div>*/}
           </div>
           <BadgeContainer>
             <ProfileBadges>
@@ -119,6 +119,7 @@ const ProfileBadges = styled.div`
   display: flex;
 
   background: ${(props) => props.theme!.colours["settings-background"]};
+  fill: ${(props) => props.theme!.colours["settings-foreground"]};
 `;
 
 /**
@@ -133,7 +134,7 @@ const AccountBox = styled(Row)`
       rgba(255, 255, 255, 0.7)
     ),
     url("https://autumn.revolt.chat/backgrounds/PA-U1R3u-iw72V-WH0C9aDN1rBTbnm-sKNR8YN4RL8?width=1000");
-  color: ${(props) => props.theme!.colours["foreground"]};
+  color: black;
 
   .column {
     display: flex;

components/app/interface/settings/client/index.tsx

@@ -122,11 +122,11 @@ const Config: SettingsConfiguration<{ server: Server }> = {
               title: <></>,
               hidden: true,
             },
-            {
+            /*{
               id: "profile",
               icon: <MdAccountCircle {...iconSize(20)} />,
               title: t("app.settings.pages.profile.title"),
-            },
+            },*/
             {
               id: "sessions",
               icon: <MdVerifiedUser {...iconSize(20)} />,
@@ -154,7 +154,7 @@ const Config: SettingsConfiguration<{ server: Server }> = {
             },
           ],
         },
-        {
+        /*{
           title: t("app.settings.categories.client_settings"),
           entries: [
             {
@@ -212,15 +212,15 @@ const Config: SettingsConfiguration<{ server: Server }> = {
               title: t("app.settings.pages.experiments.title"),
             },
           ],
-        },
+        },*/
         {
           entries: [
-            {
+            /*{
               onClick: () =>
                 getController("modal").push({ type: "changelog", posts: [] }),
               icon: <MdFormatListBulleted {...iconSize(20)} />,
               title: t("app.special.modals.changelogs.title"),
-            },
+            },*/
             {
               href: "https://github.com/revoltchat",
               icon: <MdMemory {...iconSize(20)} />,

components/app/menus/ChannelContextMenu.tsx

@@ -7,6 +7,7 @@ import { getController } from "@revolt/common";
 import MdBadge from "@material-design-icons/svg/outlined/badge.svg?component-solid";
 import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-solid";
 import MdLibraryAdd from "@material-design-icons/svg/outlined/library_add.svg?component-solid";
+import MdMarkChatRead from "@material-design-icons/svg/outlined/mark_chat_read.svg?component-solid";
 import MdShield from "@material-design-icons/svg/outlined/shield.svg?component-solid";
 
 import {
@@ -21,6 +22,13 @@ import {
  * @returns
  */
 export function ChannelContextMenu(props: { channel: Channel }) {
+  /**
+   * Mark server as read
+   */
+  function markAsRead() {
+    props.channel.ack();
+  }
+
   /**
    * Create a new channel
    */
@@ -60,6 +68,13 @@ export function ChannelContextMenu(props: { channel: Channel }) {
 
   return (
     <ContextMenu>
+      <Show when={props.channel.unread}>
+        <ContextMenuButton icon={MdMarkChatRead} onClick={markAsRead}>
+          Mark as read
+        </ContextMenuButton>
+        <ContextMenuDivider />
+      </Show>
+
       <Show when={props.channel.server?.havePermission("ManageChannel")}>
         {/* TODO re order */}
         <ContextMenuButton icon={MdLibraryAdd} onClick={createChannel}>
@@ -72,6 +87,7 @@ export function ChannelContextMenu(props: { channel: Channel }) {
         </ContextMenuButton>
         <ContextMenuDivider />
       </Show>
+
       <ContextMenuButton icon={MdShield} onClick={openAdminPanel}>
         Admin Panel
       </ContextMenuButton>

components/app/menus/ContextMenu.tsx

@@ -13,6 +13,7 @@ export const ContextMenu = styled.div`
     props.theme!.colours["component-context-menu-background"]};
   color: ${(props) =>
     props.theme!.colours["component-context-menu-foreground"]};
+  fill: ${(props) => props.theme!.colours["component-context-menu-foreground"]};
 
   box-shadow: 0 0 3px
     ${(props) => props.theme!.colours["component-context-menu-shadow"]};

components/app/menus/MessageContextMenu.tsx

@@ -40,7 +40,7 @@ export function MessageContextMenu(props: { message: Message }) {
    * Mark message as unread
    */
   function markAsUnread() {
-    props.message.ack();
+    props.message.channel!.ack(props.message, false, false, true);
   }
 
   /**

components/auth/src/flows/FlowHome.tsx

@@ -18,8 +18,7 @@ const AccountSwitcher = styled(Column)`
 
 const Logo = styled(RevoltSvg)`
   margin: auto;
-  fill: ${(props) => props.theme!.colours.foreground};
-  /* filter: invert(1); */
+  filter: ${(props) => props.theme!.effects.svg.light};
 `;
 
 /**

components/client/Controller.ts

@@ -83,7 +83,9 @@ export default class ClientController {
    */
   createClient(session: PrivateSession) {
     if (typeof session === "string") throw "Bot login not supported";
-    if (this.#clients.get(session.user_id)) throw "User client already exists";
+    // if (this.#clients.get(session.user_id)) throw "User client already exists";
+    this.#clients.delete(session.user_id);
+    // TODO: yeah whatever
 
     const client = new Client({
       baseURL: CONFIGURATION.DEFAULT_API_URL,

components/modal/modals/DemoJoinLounge.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from "@revolt/i18n";
+
+import { createFormModal } from "../form";
+import { PropGenerator } from "../types";
+
+const DemoJoinLounge: PropGenerator<"demo"> = (props) => {
+  const t = useTranslation();
+
+  return createFormModal({
+    modalProps: {
+      title: "You are about to join the Revolt server",
+      description:
+        "Here you will be able to test the client and give feedback.",
+    },
+    schema: {},
+    data: {},
+    callback: async () => {
+      await props.client.api.post(`/invites/Testers`);
+    },
+    submit: {
+      children: t("app.special.modals.actions.ok"),
+    },
+  });
+};
+
+export default DemoJoinLounge;

components/modal/modals/index.tsx

@@ -23,6 +23,7 @@ import delete_bot from "./DeleteBot";
 import delete_channel from "./DeleteChannel";
 import delete_message from "./DeleteMessage";
 import delete_server from "./DeleteServer";
+import demo from "./DemoJoinLounge";
 import edit_email from "./EditEmail";
 import edit_keybind from "./EditKeybind";
 import edit_password from "./EditPassword";
@@ -44,6 +45,7 @@ import sign_out_sessions from "./SignOutSessions";
 import signed_out from "./SignedOut";
 
 const Modals: Record<AllModals["type"], PropGenerator<any>> = {
+  demo,
   add_friend,
   ban_member,
   changelog,

components/modal/types.ts

@@ -22,6 +22,7 @@ import { ChangelogPost } from "./modals/Changelog";
 export type Modals =
   | {
       type:
+        | "demo"
         | "add_friend"
         | "create_group"
         | "create_or_join_server"

components/ui/components/design/atoms/display/Header.tsx

@@ -68,13 +68,7 @@ export const HeaderWithImage = styled(Header)`
   > * {
     flex-grow: 1;
     padding: 6px 14px;
-    color: ${(props) =>
-      props.theme!.colours["sidebar-header-with-image-text-foreground"]};
-    background: linear-gradient(
-      0deg,
-      ${(props) =>
-        props.theme!.colours["sidebar-header-with-image-text-background"]},
-      transparent
-    );
+    color: white;
+    background: linear-gradient(0deg, black, transparent);
   }
 `;

components/ui/components/design/atoms/inputs/CategoryButton.tsx

@@ -144,6 +144,8 @@ const IconWrapper = styled.div`
   svg {
     color: ${(props) =>
       props.theme!.colours["component-categorybtn-foreground-description"]};
+    fill: ${(props) =>
+      props.theme!.colours["component-categorybtn-foreground-description"]};
   }
 `;
 

components/ui/components/design/atoms/inputs/MenuButton.tsx

@@ -57,6 +57,15 @@ const Base = styled(Row)<Pick<Props, "size" | "attention">>`
 
   ${(props) => generateTypographyCSS(props.theme!, "menu-button")};
 
+  fill: ${(props) =>
+    props.theme!.colours[
+      props.attention === "active" || props.attention === "selected"
+        ? "component-menubtn-selected-foreground"
+        : props.attention === "muted"
+        ? "component-menubtn-muted-foreground"
+        : "component-menubtn-default-foreground"
+    ]};
+
   color: ${(props) =>
     props.theme!.colours[
       props.attention === "active" || props.attention === "selected"

components/ui/components/navigation/channels/ServerSidebar.tsx

@@ -175,13 +175,18 @@ export const ServerSidebar = (props: Props) => {
         <List gap="lg">
           <div />
           <For each={props.server.orderedChannels}>
-            {(category) => (
-              <Category
-                category={category}
-                channelId={props.channelId}
-                menuGenerator={props.menuGenerator}
-              />
-            )}
+            {(category) =>
+              ![
+                "01G3E05H65N1K6WM64SPVJ4PSE",
+                "01HC0JQH88WC02Y0S1VE9WEBRM",
+              ].includes(category.id) && (
+                <Category
+                  category={category}
+                  channelId={props.channelId}
+                  menuGenerator={props.menuGenerator}
+                />
+              )
+            }
           </For>
           <div />
         </List>
@@ -204,9 +209,9 @@ function ServerInfo(
           <TextWithEmoji content={props.server.name} />
         </OverflowingText>
       </ServerName>
-      <SettingsLink onClick={props.openServerSettings}>
+      {/* <SettingsLink onClick={props.openServerSettings}>
         <BiSolidCog size={18} />
-      </SettingsLink>
+      </SettingsLink> */}
     </Row>
   );
 }
@@ -381,7 +386,7 @@ function Entry(
               <MdPersonAdd {...iconSize("14px")} />
             </a>
 
-            <a
+            {/* <a
               use:floating={{
                 tooltip: {
                   placement: "top",
@@ -398,7 +403,7 @@ function Entry(
               }}
             >
               <MdSettings {...iconSize("14px")} />
-            </a>
+            </a> */}
           </>
         }
       >