feat: add plugin button and navigation slots for enhanced plugin integration across various components

src/app/features/room/RoomInput.tsx

@@ -105,6 +105,7 @@ import { getMemberDisplayName, getMentionContent, trimReplyFromBody } from '../.
 import { CommandAutocomplete } from './CommandAutocomplete';
 import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
 import { pluginRegistry } from '../settings/plugins/PluginAPI';
+import { PluginButtonSlot } from '../settings/plugins/PluginButtonSlot';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import { ReplyLayout, ThreadIndicator } from '../../components/message';
@@ -746,14 +747,17 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             </>
           }
           before={
-            <IconButton
-              onClick={() => pickFile('*')}
-              variant="SurfaceVariant"
-              size="300"
-              radii="300"
-            >
-              <Icon src={Icons.PlusCircle} />
-            </IconButton>
+            <>
+              <IconButton
+                onClick={() => pickFile('*')}
+                variant="SurfaceVariant"
+                size="300"
+                radii="300"
+              >
+                <Icon src={Icons.PlusCircle} />
+              </IconButton>
+              <PluginButtonSlot location="composer-actions" />
+            </>
           }
           after={
             <>
@@ -832,6 +836,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   </PopOut>
                 )}
               </UseStateProvider>
+              <PluginButtonSlot location="text-composer-toolbar" />
               <IconButton onClick={submit} variant="SurfaceVariant" size="300" radii="300">
                 <Icon src={Icons.Send} />
               </IconButton>

src/app/features/room/RoomViewHeader.tsx

@@ -55,6 +55,7 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
 import { getViaServers } from '../../plugins/via-servers';
+import { PluginButtonSlot } from '../settings/plugins/PluginButtonSlot';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
@@ -229,6 +230,10 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
         </UseStateProvider>
       </Box>
       <Line variant="Surface" size="300" />
+      <Box direction="Row" gap="100" style={{ padding: config.space.S100 }}>
+        <PluginButtonSlot location="room-menu" />
+      </Box>
+      <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <UseStateProvider initial={false}>
           {(promptLeave, setPromptLeave) => (
@@ -713,6 +718,7 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
+          <PluginButtonSlot location="room-header" />
           <TooltipProvider
             position="Bottom"
             align="End"

src/app/features/room/message/Message.tsx

@@ -75,6 +75,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { PluginButtonSlot } from '../../../features/settings/plugins/PluginButtonSlot';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
 import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
@@ -1070,6 +1071,7 @@ export const Message = as<'div', MessageProps>(
                     <Icon src={Icons.Delete} size="100" />
                   </IconButton>
                 )}
+                <PluginButtonSlot location="message-actions" />
                 <PopOut
                   anchor={menuAnchor}
                   position="Bottom"
@@ -1333,6 +1335,7 @@ export const Event = as<'div', EventProps>(
           <div className={css.MessageOptionsBase}>
             <Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
               <Box gap="100">
+                <PluginButtonSlot location="message-actions" />
                 <PopOut
                   anchor={menuAnchor}
                   position="Bottom"