adding the api

src/api/Tablist.tsx

@@ -0,0 +1,67 @@
+import { Channel } from "discord-types/general";
+//import { Logger } from "@utils/Logger";
+
+//const logger = new Logger("Tablist"); useless
+
+export interface ExpressionMate {
+    CHAT_INPUT_BUTTON_CLASSNAME: string;
+    expressionPickerViewType: object;
+    expressionPickerWidths: { MIN: "min", MAX: "max"; };
+    MIN_EXPRESSION_PICKER_WIDTH: number; // what's really matter here
+}
+
+export interface TablistButtonProps {
+    id?: string;
+    "aria-controls": string;
+    "aria-selected": boolean;
+    isActive: boolean;
+    viewType: string;
+    children: string | JSX.Element;
+    autoFocus?: boolean;
+    [key: string]: any;
+}
+
+export interface TablistPanelProps {
+    selectedTab: string;
+    channel: Channel;
+    expressionMate: ExpressionMate;
+}
+
+export type TablistButtonComponent = (props: TablistButtonProps) => JSX.Element | null;
+export type TablistPanelComponent = (props: TablistPanelProps) => JSX.Element | null;
+
+
+export interface TablistItem {
+    tab: string,
+    Component: TablistPanelComponent;
+    autoFocus?: boolean;
+}
+
+const TablistComponents = new Map<string, TablistItem>();
+
+
+export const addTablistButton = (id: string, tab: string, PanelComponent: TablistPanelComponent, autoFocus?: boolean) => TablistComponents.set(id, { tab: tab, Component: PanelComponent, autoFocus: autoFocus });
+export const removeTablistButton = (id: string) => TablistComponents.delete(id);
+
+
+export function* RenderButtons(TablistButtonComponent: TablistButtonComponent, selectedTab: string, expressionMate: ExpressionMate) {
+    for (const tab in TablistComponents) {
+        yield (<TablistButtonComponent
+            id={tab + "-picker-tab"}
+            aria-controls={tab + "-picker-tab-panel"}
+            aria-selected={tab === selectedTab}
+            viewType={tab}
+            isActive={tab === selectedTab}
+            expressionMate={expressionMate}
+        >{TablistComponents[tab].tab}
+        </TablistButtonComponent>);
+    }
+}
+
+export function* TabPanels(selectedTab: string, expressionMate: ExpressionMate, channel: Channel) {
+    for (const tab in TablistComponents) {
+        if (tab !== selectedTab) { continue; }
+        let PanelComponent: TablistPanelComponent = TablistComponents[tab].Component;
+        yield (<PanelComponent selectedTab={selectedTab} channel={channel} expressionMate={expressionMate} />);
+    }
+}

src/api/index.ts

@@ -31,6 +31,7 @@ import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
 import * as $Settings from "./Settings";
 import * as $Styles from "./Styles";
+import * as $Tablist from "./Tablist";
 
 /**
  * An API allowing you to listen to Message Clicks or run your own logic
@@ -110,3 +111,8 @@ export const ContextMenu = $ContextMenu;
  * An API allowing you to add buttons to the chat input
  */
 export const ChatButtons = $ChatButtons;
+
+/**
+ * An API allowing you to add panels to the expression picker
+ */
+export const Tablist = $Tablist;

src/plugins/_api/tablist.ts

@@ -0,0 +1,24 @@
+import definePlugin from "@utils/types";
+import { Devs } from "@utils/constants";
+
+
+export default definePlugin({
+    name: "TablistApi",
+    description: "API to add panels to the expression picker",
+    authors: [Devs.iamme],
+    patches: [
+        {
+            find: ".EXPRESSION_PICKER_CATEGORIES_A11Y_LABEL",
+            replacement: [
+                {
+                    match: /\.jsx)\((\i),\{id:\i\.\i,.+?,"aria-selected":(\i)===.+?,viewType:(\i).+?\}\)/,//\]
+                    replace: "$&,...Vencord.Api.Tablist.RenderButtons($1, $2, $3)"
+                },
+                {
+                    match: /null,(\i)===(\i)\.ExpressionPickerViewType\.EMOJI\?.{0,55}channel:(\i),.+?\):null/,
+                    replace: "$&,...Vencord.Api.Tablist.TabPanels($1, $2, $3)"
+                }
+            ]
+        }
+    ]
+});

src/utils/constants.ts

@@ -438,6 +438,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "Sqaaakoi",
         id: 259558259491340288n
     },
+    iamme: {
+        name: "i am me",
+        id: 984392761929256980n
+    },
     Byron: {
         name: "byeoon",
         id: 1167275288036655133n