Feat: Add polls

.changeset/add_polls.md

@@ -0,0 +1,12 @@
+---
+default: minor
+---
+
+Add polls!
+
+## Add Polls with a new Menu for adding items 
+    - The polls have a simple style for showing and interfacing with poll events
+    - There is now a simple interface for creating polls which integrates the spec
+    - Now the Plus button on the bottom left can open a menu for selecting what to send, which will be useful for future options aswell
+    - For the people that prefer to only add files with that button they can disable the menu and still create polls with the /poll command
+    - You can see who voted for what in a clear menu

src/app/components/RenderMessageContent.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo, useCallback } from 'react';
-import type { IPreviewUrlResponse } from '$types/matrix-sdk';
+import type { IPreviewUrlResponse, MatrixClient, MatrixEvent, Room } from '$types/matrix-sdk';
 import { MsgType } from '$types/matrix-sdk';
 import { parseSettingsLink } from '$features/settings/settingsLink';
 import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUrl';
@@ -45,6 +45,8 @@ import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { ClientSideHoverFreeze } from './ClientSideHoverFreeze';
 import { CuteEventType, MCuteEvent } from './message/MCuteEvent';
+import { PollEvent } from './message/PollEvent';
+import { M_TEXT } from 'matrix-js-sdk';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -61,6 +63,9 @@ type RenderMessageContentProps = {
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
   hideCaption?: boolean;
+  mEvent?: MatrixEvent;
+  mx?: MatrixClient;
+  room?: Room;
 };
 
 const getMediaType = (url: string) => {
@@ -92,6 +97,9 @@ function RenderMessageContentInternal({
   linkifyOpts,
   outlineAttachment,
   hideCaption,
+  mEvent,
+  mx,
+  room,
 }: RenderMessageContentProps) {
   const content = useMemo(() => getContent() as Record<string, unknown>, [getContent]);
 
@@ -441,7 +449,21 @@ function RenderMessageContentInternal({
         }
       />
     );
-  return <UnsupportedContent body={(content as { body?: string }).body ?? ''} />;
+  if (content['org.matrix.msc3381.poll.start']) {
+    if (mEvent && mx && room)
+      return <PollEvent content={content} mEvent={mEvent} mx={mx} room={room} />;
+    else return <UnsupportedContent body="abba" />;
+  }
+  return (
+    <UnsupportedContent
+      body={
+        (content as { body?: string }).body ??
+        (content as { [M_TEXT.name]?: string })[M_TEXT.name] ??
+        (content as { [M_TEXT.name]?: { body: string } })[M_TEXT.name]?.body ??
+        ''
+      }
+    />
+  );
 }
 
 export const RenderMessageContent = memo(RenderMessageContentInternal);

src/app/components/message/PollEvent.css.ts

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const PollEvent = style({
+  backgroundColor: color.Background.Container,
+  maxWidth: toRem(500),
+  borderRadius: config.radii.R500,
+  padding: config.space.S200,
+  textAlign: 'justify',
+});
+
+export const PollHeader = style({
+  color: color.Primary.Main,
+});
+
+export const PollEventSeparator = style({
+  width: '99%',
+  alignSelf: 'Center',
+});
+
+export const PollAnswerCount = style({
+  color: color.SurfaceVariant.OnContainer,
+  paddingLeft: config.space.S100,
+});
+// These are only here for the potential modding of event by themes
+export const PollAnswersBody = style({});
+export const PollAnswerItem = style({});
+export const PollAnswerBar = style({});