Add badges page and fix bugs

Nerimity · Feb 25, 2025 · 0911579 · 0911579
1 parent 41db01e
commit 0911579
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 151 deletions.
diff --git a/src/common/Settings.ts b/src/common/Settings.ts
@@ -25,6 +25,7 @@ const settings: Setting[] = [
     icon: "account_circle",
     element: lazy(() => import("@/components/settings/AccountSettings")),
   },
+
   {
     path: "/account/profile",
     routePath: "/account/profile",
@@ -33,6 +34,13 @@ const settings: Setting[] = [
     element: lazy(() => import("@/components/settings/ProfileSettings")),
     hide: true,
   },
+  {
+    path: "badges",
+    routePath: "/badges",
+    name: "settings.drawer.badges",
+    icon: "local_police",
+    element: lazy(() => import("@/components/settings/BadgeSettings")),
+  },
   {
     path: "interface",
     routePath: "/interface",

diff --git a/src/components/InVoiceActions.tsx b/src/components/InVoiceActions.tsx
@@ -11,9 +11,9 @@ import Button from "./ui/Button";
 
 const InVoiceActionsContainer = styled(FlexColumn)`
   background-color: rgb(15, 15, 15);
-  margin: 5px;
+  margin: 3px;
   margin-bottom: 0;
-  border-radius: 8px;
+  border-radius: 6px;
   flex-shrink: 0;
   padding-top: 6px;
 

diff --git a/src/components/SupportBlock.tsx b/src/components/SupportBlock.tsx
@@ -0,0 +1,84 @@
+import { A } from "solid-navigator";
+import { styled } from "solid-styled-components";
+import ItemContainer from "./ui/LegacyItem";
+import { FlexRow } from "./ui/Flexbox";
+import Icon from "./ui/icon/Icon";
+import { t } from "i18next";
+import Text from "./ui/Text";
+const SettingItemContainer = styled(ItemContainer)<{ nested?: boolean }>`
+  height: 32px;
+  gap: 5px;
+  padding-left: ${(props) => (props.nested ? "25px" : "10px")};
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-bottom: 2px;
+  :first {
+    background-color: red;
+  }
+
+  .label {
+    opacity: ${(props) => (props.selected ? 1 : 0.6)};
+    font-size: 14px;
+    transition: 0.2s;
+    color: white;
+  }
+
+  &:hover .label {
+    opacity: 1;
+  }
+`;
+export function SupportBlock() {
+  return (
+    <A
+      href="https://boosty.to/supertigerdev/donate"
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ "text-decoration": "none" }}
+    >
+      <SettingItemContainer
+        style={{
+          background: "var(--alert-color)",
+          "border-radius": "6px",
+          height: "initial",
+          padding: "6px",
+          "align-items": "start",
+          "flex-direction": "column",
+        }}
+      >
+        <FlexRow gap={4}>
+          <Icon
+            style={{ "align-self": "start", "margin-top": "3px" }}
+            name="favorite"
+            size={18}
+          />
+          <div>
+            <Text style={{ "font-weight": "bold" }}>
+              {t("supportBlock.support")}
+            </Text>
+            <div>
+              <Text size={12}>{t("supportBlock.supportDescription")}</Text>
+            </div>
+          </div>
+        </FlexRow>
+        <FlexRow style={{ "align-self": "center" }} gap={6}>
+          <a target="_blank" href="https://ko-fi.com/supertiger">
+            <img
+              style={{ "border-radius": "50%" }}
+              src="/assets/kofi.png"
+              width={28}
+              height={28}
+            />
+          </a>
+          <a target="_blank" href="https://boosty.to/supertigerdev/donate">
+            <img
+              style={{ "border-radius": "50%" }}
+              src="/assets/boosty.jpg"
+              width={28}
+              height={28}
+            />
+          </a>
+        </FlexRow>
+      </SettingItemContainer>
+    </A>
+  );
+}
diff --git a/src/components/explore/ExploreDrawer.tsx b/src/components/explore/ExploreDrawer.tsx
@@ -10,6 +10,7 @@ import { DrawerHeader } from "../drawer-header/DrawerHeader";
 import { useTransContext } from "@mbarzda/solid-i18next";
 import { t } from "i18next";
 import InVoiceActions from "../InVoiceActions";
+import { SupportBlock } from "../SupportBlock";
 
 const DrawerContainer = styled(FlexColumn)`
   height: 100%;
@@ -97,63 +98,8 @@ const FooterContainer = styled(FlexColumn)`
 function Footer() {
   return (
     <FooterContainer gap={2}>
-      <SupportItem />
+      <SupportBlock />
       <InVoiceActions />
     </FooterContainer>
   );
 }
-
-function SupportItem() {
-  return (
-    <A
-      href="https://boosty.to/supertigerdev/donate"
-      target="_blank"
-      rel="noopener noreferrer"
-      style={{ "text-decoration": "none" }}
-    >
-      <ExploreItemContainer
-        style={{
-          background: "var(--alert-color)",
-          height: "initial",
-          padding: "6px",
-          "align-items": "start",
-          "flex-direction": "column",
-        }}
-      >
-        <FlexRow gap={4}>
-          <Icon
-            style={{ "align-self": "start", "margin-top": "3px" }}
-            name="favorite"
-            size={18}
-          />
-          <div>
-            <Text style={{ "font-weight": "bold" }}>
-              {t("supportBlock.support")}
-            </Text>
-            <div>
-              <Text size={12}>{t("supportBlock.supportDescription")}</Text>
-            </div>
-          </div>
-        </FlexRow>
-        <FlexRow style={{ "align-self": "center" }} gap={6}>
-          <a target="_blank" href="https://ko-fi.com/supertiger">
-            <img
-              style={{ "border-radius": "50%" }}
-              src="/assets/kofi.png"
-              width={28}
-              height={28}
-            />
-          </a>
-          <a target="_blank" href="https://boosty.to/supertigerdev/donate">
-            <img
-              style={{ "border-radius": "50%" }}
-              src="/assets/boosty.jpg"
-              width={28}
-              height={28}
-            />
-          </a>
-        </FlexRow>
-      </ExploreItemContainer>
-    </A>
-  );
-}
diff --git a/src/components/servers/settings/ServerSettingsDrawer.tsx b/src/components/servers/settings/ServerSettingsDrawer.tsx
@@ -13,17 +13,21 @@ import { Bitwise } from "@/chat-api/Bitwise";
 import { ChannelType } from "@/chat-api/RawData";
 import InVoiceActions from "@/components/InVoiceActions";
 import { useCustomScrollbar } from "@/components/custom-scrollbar/CustomScrollbar";
+import { SupportBlock } from "@/components/SupportBlock";
+import { FlexColumn } from "@/components/ui/Flexbox";
 
+const MainContainer = styled(FlexColumn)`
+  height: 100%;
+  &[data-scrollbar-visible="true"] {
+    margin-right: 8px;
+  }
+`;
 const SettingsListContainer = styled("div")`
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding-bottom: 3px;
   flex: 1;
-
-  &[data-scrollbar-visible="true"] {
-    margin-right: 8px;
-  }
 `;
 
 const SettingItemContainer = styled(ItemContainer)<{ nested?: boolean }>`
@@ -46,13 +50,15 @@ const SettingItemContainer = styled(ItemContainer)<{ nested?: boolean }>`
 `;
 
 export default function ServerSettingsDrawer() {
+  const { isVisible } = useCustomScrollbar();
+
   return (
-    <div
-      style={{ display: "flex", "flex-direction": "column", height: "100%" }}
-    >
-      <SettingsList />
-      <InVoiceActions />
-    </div>
+    <>
+      <MainContainer data-scrollbar-visible={isVisible()}>
+        <SettingsList />
+        <Footer />
+      </MainContainer>
+    </>
   );
 }
 
@@ -62,7 +68,6 @@ function SettingsList() {
   const { serverMembers, account, servers } = useStore();
   const member = () => serverMembers.get(params.serverId, account.user()?.id!);
   const server = () => servers.get(params.serverId);
-  const { isVisible } = useCustomScrollbar();
 
   const hasPermission = (role?: Bitwise) => {
     if (!role) return true;
@@ -73,7 +78,7 @@ function SettingsList() {
   return (
     <>
       <ServerDrawerHeader />
-      <SettingsListContainer data-scrollbar-visible={isVisible()}>
+      <SettingsListContainer>
         <For each={serverSettings}>
           {(setting) => {
             if (setting.hideDrawer) return null;
@@ -124,32 +129,19 @@ function Item(props: {
   );
 }
 
-function ServerChannelsList() {
-  const params = useParams();
-  const { channels } = useStore();
-  const sortedServerChannels = () =>
-    channels.getSortedChannelsByServerId(params.serverId);
+const FooterContainer = styled(FlexColumn)`
+  padding-bottom: 0px;
+  margin-top: 8px;
+  position: sticky;
+  bottom: 2px;
+  background-color: var(--pane-color);
+`;
 
+function Footer() {
   return (
-    <For each={sortedServerChannels()}>
-      {(channel) => {
-        const path = RouterEndpoints.SERVER_SETTINGS_CHANNEL(
-          params.serverId,
-          channel!.id
-        );
-        const selected = () => params.id === channel!.id;
-        return (
-          <Item
-            nested={true}
-            icon={
-              channel!.type === ChannelType.CATEGORY ? "segment" : "storage"
-            }
-            label={channel!.name}
-            path={path}
-            selected={selected()}
-          />
-        );
-      }}
-    </For>
+    <FooterContainer gap={2}>
+      <SupportBlock />
+      <InVoiceActions style={{ bottom: "0" }} />
+    </FooterContainer>
   );
 }