merge: pull request #247 from grouting/master

feat: server badges (addresses #36)

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

@@ -3,6 +3,8 @@ import {
   BiRegularPhoneCall,
   BiSolidChevronRight,
   BiSolidCog,
+  BiSolidCheckCircle,
+  BiRegularCheckCircle
 } from "solid-icons/bi";
 import {
   For,
@@ -17,12 +19,13 @@ import {
 } from "solid-js";
 import { styled } from "solid-styled-components";
 
-import type { API, Channel, Server } from "revolt.js";
+import type { API, Channel, Server, ServerFlags } from "revolt.js";
 
 import { getController } from "@revolt/common";
 import { KeybindAction } from "@revolt/keybinds/actions";
 import { TextWithEmoji } from "@revolt/markdown";
-import { Link, useNavigate } from "@revolt/routing";
+import { Link } from "@revolt/routing";
+import { useTranslation } from "@revolt/i18n";
 
 import MdPersonAdd from "@material-design-icons/svg/filled/person_add.svg?component-solid";
 import MdSettings from "@material-design-icons/svg/filled/settings.svg?component-solid";
@@ -36,6 +39,7 @@ import { MenuButton } from "../../design/atoms/inputs/MenuButton";
 import { Column, OverflowingText, Row } from "../../design/layout";
 
 import { SidebarBase } from "./common";
+import { Tooltip } from "../../floating";
 
 void scrollable;
 void floating;
@@ -194,6 +198,7 @@ function ServerInfo(
 ) {
   return (
     <Row align grow>
+      <ServerBadge flags={props.server.flags} />
       <ServerName onClick={props.openServerInfo}>
         <OverflowingText>
           <TextWithEmoji content={props.server.name} />
@@ -224,6 +229,21 @@ const SettingsLink = styled.a`
   }
 `;
 
+/**
+ * Server badge
+ */
+function ServerBadge(props: { flags: ServerFlags }) {
+  const t = useTranslation();
+
+  return (
+    <Show when={props.flags}>
+      <Tooltip content={props.flags === 1 ? t("app.special.server-badges.official") : t("app.special.server-badges.verified")} placement="top">
+        {props.flags === 1 ? (<BiSolidCheckCircle size={12} />) : (<BiRegularCheckCircle size={12} />)}
+      </Tooltip>
+    </Show>
+  );
+}
+
 /**
  * Single category entry
  */