Merge pull request #17 from CMU-313/US6_emoji_reaction

US6: Add React button option next to message on hover, display selected emoji at bottom of message

src/views/partials/chats/message.tpl

@@ -21,6 +21,12 @@
 		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
 			{messages.content}
 		</div>
+
+		<div class="message-reaction" style="display: none;">
+    		<!-- Reaction emoji will appear here -->
+		</div>
+
+
 		<!-- IMPORT partials/chats/reactions.tpl -->
 		<div component="chat/message/controls" class="position-relative">
 			<div class="btn-group border shadow-sm controls position-absolute bg-body end-0" style="bottom:1rem;">
@@ -46,7 +52,7 @@
 						<li>
 							<a href="#" class="dropdown-item rounded-1" data-action="pin" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-thumbtack text-muted"></i> [[modules:chat.pin-message]]</span></a>
 						</li>
-						<li>
+						<li> 
 							<a href="#" class="dropdown-item rounded-1" data-action="unpin" role="menuitem"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-thumbtack fa-rotate-90 text-muted"></i> [[modules:chat.unpin-message]]</span></a>
 						</li>
 						<li class="dropdown-divider"></li>
@@ -70,6 +76,9 @@
 						</li>
 					</ul>
 				</div>
+
+				<button data-action="message-emoji" class="btn-ghost-sm px-2 d-none d-md-flex" type="button" data-bs-toggle=tooltip" aria-label="Emoji" data-bs-original-title="Emoji"><i class="fa fa-smile"></i></button>
+
 			</div>
 		</div>
 	</div>