ServerDrawer: add server names toggle

plugins/server-drawer/src/components/FolderItem.tsx

@@ -82,7 +82,7 @@ function FadeIn({ children }: { children: React.ReactNode }) {
     return <Animated.View style={{ opacity }}>{children}</Animated.View>;
 }
 
-export default function FolderItem({ node, onPick }: { node: GuildNode; onPick: (id: string) => void }) {
+export default function FolderItem({ node, onPick, showNames }: { node: GuildNode; onPick: (id: string) => void; showNames?: boolean }) {
     const open = useFolderExpanded(node.id);
 
     const toggle = () => {
@@ -99,7 +99,7 @@ export default function FolderItem({ node, onPick }: { node: GuildNode; onPick:
                 </Pressable>
                 {node.children.map((ch) => (
                     <FadeIn key={ch.id}>
-                        <GuildItem node={ch} onPick={onPick} />
+                        <GuildItem node={ch} onPick={onPick} showNames={showNames} />
                     </FadeIn>
                 ))}
             </>

plugins/server-drawer/src/components/GuildItem.tsx

@@ -12,6 +12,7 @@ const GuildReadStateStore = findByStoreName("GuildReadStateStore");
 const GuildStore = findByStoreName("GuildStore");
 const SortedGuildStore = findByStoreName("SortedGuildStore");
 const Haptic = findByProps("triggerHapticFeedback", "HapticFeedbackTypes");
+const colors = findByProps("colors", "unsafe_rawColors")?.colors;
 
 function Badge({ guildId }: { guildId: string }) {
     const mentionCount = Flux?.useStateFromStores?.(
@@ -47,7 +48,7 @@ function Badge({ guildId }: { guildId: string }) {
     return null;
 }
 
-export default function GuildItem({ node, onPick }: { node: GuildNode; onPick: (id: string) => void }) {
+export default function GuildItem({ node, onPick, showNames }: { node: GuildNode; onPick: (id: string) => void; showNames?: boolean }) {
     const viewRef = React.useRef<View>(null);
     const scale = React.useRef(new Animated.Value(1)).current;
     const scaleDown = () => Animated.spring(scale, { toValue: 0.85, useNativeDriver: true }).start();
@@ -102,6 +103,12 @@ export default function GuildItem({ node, onPick }: { node: GuildNode; onPick: (
 
     const guildId = node.id as string;
 
+    const name = Flux?.useStateFromStores?.(
+        [GuildStore],
+        () => GuildStore?.getGuild?.(guildId)?.name ?? "",
+        [guildId],
+    ) ?? "";
+
     return (
         <>
             <Pressable
@@ -111,11 +118,18 @@ export default function GuildItem({ node, onPick }: { node: GuildNode; onPick: (
                 onLongPress={handleLongPress}
                 delayLongPress={500}
             >
-                <View ref={viewRef} style={st.outer} collapsable={false}>
-                    <Animated.View style={[st.icon, { transform: [{ scale }] }]}>
-                        <GuildIcon id={guildId} />
-                    </Animated.View>
-                    <Badge guildId={guildId} />
+                <View style={st.outer}>
+                    <View ref={viewRef} style={st.iconWrap} collapsable={false}>
+                        <Animated.View style={[st.icon, { transform: [{ scale }] }]}>
+                            <GuildIcon id={guildId} />
+                        </Animated.View>
+                        <Badge guildId={guildId} />
+                    </View>
+                    {showNames && (
+                        <Text numberOfLines={1} ellipsizeMode="tail" style={st.label}>
+                            {name}
+                        </Text>
+                    )}
                 </View>
             </Pressable>
             <ContextMenuModal
@@ -131,8 +145,17 @@ export default function GuildItem({ node, onPick }: { node: GuildNode; onPick: (
 }
 
 const st = StyleSheet.create({
-    outer: { width: ICON, height: ICON },
+    outer: { width: ICON, alignItems: "center" },
+    iconWrap: { width: ICON, height: ICON },
     icon: { width: ICON, height: ICON, borderRadius: 16, overflow: "hidden" },
+    label: {
+        marginTop: 3,
+        width: ICON + 8,
+        fontSize: 9.5,
+        lineHeight: 11,
+        textAlign: "center",
+        color: colors?.TEXT_MUTED ?? colors?.HEADER_SECONDARY ?? "#96989d",
+    },
 });
 
 const bd = StyleSheet.create({

plugins/server-drawer/src/components/ServerDrawerSheet.tsx

@@ -118,8 +118,8 @@ export default function ServerDrawerSheet({ gestureContext }: { gestureContext:
                 {!storage.hideDmTile && <DmTile />}
                 {nodes.map((node) =>
                     node.type === "folder"
-                        ? <FolderItem key={node.id} node={node} onPick={pick} />
-                        : <GuildItem key={node.id} node={node} onPick={pick} />
+                        ? <FolderItem key={node.id} node={node} onPick={pick} showNames={!!storage.showGuildNames} />
+                        : <GuildItem key={node.id} node={node} onPick={pick} showNames={!!storage.showGuildNames} />
                 )}
                 <CreateJoinButton />
             </View>

plugins/server-drawer/src/index.tsx

@@ -14,6 +14,7 @@ const cleanups: (() => void)[] = [];
 export default {
     onLoad() {
         storage.hideDmTile ??= false;
+        storage.showGuildNames ??= false;
 
         console.log(TAG, "onLoad");
 

plugins/server-drawer/src/ui/Settings.tsx

@@ -22,6 +22,12 @@ export default function Settings() {
                     value={!!storage.hideDmTile}
                     onValueChange={(v: boolean) => { storage.hideDmTile = v; }}
                 />
+                <TableSwitchRow
+                    label="Show server names"
+                    subLabel="Print each server's name under its icon in the drawer"
+                    value={!!storage.showGuildNames}
+                    onValueChange={(v: boolean) => { storage.showGuildNames = v; }}
+                />
             </TableRowGroup>
         </SettingsScaffold>
     );