From 5f2a945b411752c2518fc6d6be49ec9c769d0be9 Mon Sep 17 00:00:00 2001
From: TB <105883378+grouting@users.noreply.github.com>
Date: Tue, 4 Jul 2023 13:02:35 +0100
Subject: [PATCH 1/2] address #36

---
 .../navigation/channels/ServerSidebar.tsx     | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/ui/components/navigation/channels/ServerSidebar.tsx b/components/ui/components/navigation/channels/ServerSidebar.tsx
index ec7e30b9..b918c481 100644
--- a/components/ui/components/navigation/channels/ServerSidebar.tsx
+++ b/components/ui/components/navigation/channels/ServerSidebar.tsx
@@ -3,11 +3,13 @@ import {
   BiRegularPhoneCall,
   BiSolidChevronRight,
   BiSolidCog,
+  BiSolidCheckCircle,
+  BiRegularCheckCircle
 } from "solid-icons/bi";
 import { For, Match, Show, Switch, createMemo, createSignal } 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 { TextWithEmoji } from "@revolt/markdown";
 import { Link } from "@revolt/routing";
@@ -19,6 +21,7 @@ import { MenuButton } from "../../design/atoms/inputs/MenuButton";
 import { Column, OverflowingText, Row } from "../../design/layout";
 
 import { SidebarBase } from "./common";
+import { Tooltip } from "../../floating";
 
 scrollable;
 
@@ -104,6 +107,7 @@ function ServerInfo(
 ) {
   return (
     <Row align grow>
+      <ServerBadge flags={props.server.flags} />
       <ServerName onClick={props.openServerInfo}>
         <OverflowingText>
           <TextWithEmoji content={props.server.name} />
@@ -134,6 +138,19 @@ const SettingsLink = styled.a`
   }
 `;
 
+/**
+ * Server badge
+ */
+function ServerBadge(props: { flags: ServerFlags }) {
+  return (
+    <Show when={props.flags}>
+      <Tooltip content={props.flags === 1 ? "Official server" : "Verified server"} placement="top">
+        {props.flags === 1 ? (<BiSolidCheckCircle size={12} />) : (<BiRegularCheckCircle size={12} />)}
+      </Tooltip>
+    </Show>
+  );
+}
+
 /**
  * Single category entry
  */

From e8c3187ea32270b958d6f793aa9ee543eaf9aebe Mon Sep 17 00:00:00 2001
From: TB <105883378+grouting@users.noreply.github.com>
Date: Tue, 4 Jul 2023 13:19:06 +0100
Subject: [PATCH 2/2] fix: use i18n

---
 .../ui/components/navigation/channels/ServerSidebar.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/ui/components/navigation/channels/ServerSidebar.tsx b/components/ui/components/navigation/channels/ServerSidebar.tsx
index b918c481..1ad3609a 100644
--- a/components/ui/components/navigation/channels/ServerSidebar.tsx
+++ b/components/ui/components/navigation/channels/ServerSidebar.tsx
@@ -13,6 +13,7 @@ import type { API, Channel, Server, ServerFlags } from "revolt.js";
 
 import { TextWithEmoji } from "@revolt/markdown";
 import { Link } from "@revolt/routing";
+import { useTranslation } from "@revolt/i18n";
 
 import { scrollable } from "../../../directives";
 import { Header, HeaderWithImage } from "../../design/atoms/display/Header";
@@ -142,9 +143,11 @@ const SettingsLink = styled.a`
  * Server badge
  */
 function ServerBadge(props: { flags: ServerFlags }) {
+  const t = useTranslation();
+
   return (
     <Show when={props.flags}>
-      <Tooltip content={props.flags === 1 ? "Official server" : "Verified server"} placement="top">
+      <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>