From 1cf4871ca4d1fc7043623f6e30297ad94be08510 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 9 Dec 2024 22:02:10 -0800
Subject: [PATCH] showing message options

---
 app/client/web/src/message/Message.module.css | 29 +++++++++++++++++++
 app/client/web/src/message/Message.tsx        | 15 ++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/app/client/web/src/message/Message.module.css b/app/client/web/src/message/Message.module.css
index cf2c76d6..0a1cec03 100644
--- a/app/client/web/src/message/Message.module.css
+++ b/app/client/web/src/message/Message.module.css
@@ -107,6 +107,7 @@
         line-height: 16px;
         padding-bottom: 4px;
         gap: 16px;
+        position: relative;
 
         &:hover {
           .options {
@@ -118,6 +119,34 @@
 
         .options {
           display: none;
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+
+        .surface {
+          display: flex;
+          background-color: var(--mantine-color-surface-4);
+          gap: 10px;
+          padding-top: 4px;
+          padding-bottom: 4px;
+          padding-left: 8px;
+          padding-right: 8px;
+          border-radius: 4px;
+        }
+
+        .option {
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          color: var(--mantine-color-dbgreen-1);
+        }
+    
+        .careful {
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          color: var(--mantine-color-red-2);
         }
 
         .name {
diff --git a/app/client/web/src/message/Message.tsx b/app/client/web/src/message/Message.tsx
index 88ca578a..5473bdc8 100644
--- a/app/client/web/src/message/Message.tsx
+++ b/app/client/web/src/message/Message.tsx
@@ -10,7 +10,7 @@ import { BinaryAsset } from './binaryAsset/BinaryAsset';
 import type { MediaAsset } from '../conversation/Conversation';
 import { useMessage } from './useMessage.hook';
 import failed from '../images/failed.png'
-import { IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
+import { IconForbid, IconTrash, IconEdit, IconAlertSquareRounded, IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
 import { useResizeDetector } from 'react-resize-detector';
 
 export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) {
@@ -73,7 +73,18 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
               )}
               <span className={classes.timestamp}> { timestamp }</span>
             </div>
-            <div className={classes.options}>OPTIONS</div>
+            <div className={classes.options}>
+              <div className={classes.surface}>
+                { !locked && profile && (
+                  <IconEdit className={classes.option} />
+                )}
+                { (host || profile) && (
+                  <IconTrash className={classes.careful} />
+                )}
+                <IconForbid className={classes.careful} />
+                <IconAlertSquareRounded className={classes.careful} />
+              </div>
+            </div>
           </div>
           { !locked && status === 'confirmed' && text && (
             <div style={textStyle}>