@churchapps/apphelper 0.4.17 → 0.4.18

package/src/components/FormSubmissionEdit.tsx

@@ -58,10 +58,9 @@ export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackgr
   }
 
   const loadData = () => {
-    console.log("loadData", "fs", props.formSubmissionId, "af", props.addFormId, props.unRestrictedFormId)
-    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then(data => setFormSubmission(data));
-    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then(data => setFormSubmissionData(data));
-    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then(data => setFormSubmissionData(data));
+    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then((data: any) => setFormSubmission(data));
+    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then((data: any) => setFormSubmissionData(data));
+    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then((data: any) => setFormSubmissionData(data));
   }
 
   const getDefaultValue = (q: QuestionInterface) => {
@@ -116,7 +115,7 @@ export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackgr
       fs.submissionDate = new Date();
       fs.churchId = props.churchId || null;
 
-      ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res) => {
+      ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res: any) => {
         if (res?.[0]?.error) {
           setErrors([res?.[0].error]);
         } else {
@@ -143,7 +142,7 @@ export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackgr
 
   React.useEffect(() => {
     if (props.churchId) {
-      ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then(data => {
+      ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then((data: any) => {
         if (data.length && data[0]?.publicKey) {
           setStripe(loadStripe(data[0].publicKey));
         }

package/src/components/PageHeader.tsx

@@ -0,0 +1,107 @@
+import React, { ReactNode } from "react";
+import { Box, Typography, Stack } from "@mui/material";
+
+interface PageHeaderProps {
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  children?: ReactNode; // For action buttons or tabs
+  statistics?: Array<{ icon: ReactNode; value: string; label: string }>;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ icon, title, subtitle, children, statistics }) => {
+  return (
+    <Box sx={{ 
+      backgroundColor: "var(--c1l2)", 
+      color: "#FFF", 
+      position: 'relative',
+      left: '50%',
+      right: '50%',
+      marginLeft: '-50vw',
+      marginRight: '-50vw',
+      width: '100vw',
+      '--c1': '#1565C0',
+      '--c1d1': '#1358AD', 
+      '--c1d2': '#114A99',
+      '--c1l2': '#568BDA'
+    }}>
+      <Box sx={{ 
+        paddingX: { xs: 2, sm: 3, md: 4 }, 
+        paddingY: 3
+      }}>
+        <Stack direction={{ xs: "column", md: "row" }} spacing={{ xs: 2, md: 4 }} alignItems={{ xs: "flex-start", md: "center" }} sx={{ width: "100%" }}>
+        {/* Left side: Title and Icon */}
+        <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+          <Box
+            sx={{
+              backgroundColor: "rgba(255,255,255,0.2)",
+              borderRadius: "12px",
+              p: 1.5,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {React.cloneElement(icon as React.ReactElement<any>, { sx: { fontSize: 32, color: "#FFF" } })}
+          </Box>
+          <Box>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 600,
+                mb: 0.5,
+                fontSize: { xs: "1.75rem", md: "2.125rem" },
+              }}
+            >
+              {title}
+            </Typography>
+            {subtitle && (
+              <Typography
+                variant="body1"
+                sx={{
+                  color: "rgba(255,255,255,0.9)",
+                  fontSize: { xs: "0.875rem", md: "1rem" },
+                }}
+              >
+                {subtitle}
+              </Typography>
+            )}
+          </Box>
+        </Stack>
+
+        {/* Right side: Action Buttons/Tabs */}
+        {children && (
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              flexShrink: 0,
+              justifyContent: { xs: "flex-start", md: "flex-end" },
+              width: { xs: "100%", md: "auto" },
+            }}
+          >
+            {children}
+          </Stack>
+        )}
+      </Stack>
+
+      {/* Statistics row */}
+      {statistics && statistics.length > 0 && (
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={3} sx={{ mt: 3 }}>
+          {statistics.map((stat, index) => (
+            <Stack key={index} direction="row" spacing={1} alignItems="center">
+              {React.cloneElement(stat.icon as React.ReactElement<any>, { sx: { color: "#FFF", fontSize: 20 } })}
+              <Typography variant="h6" sx={{ color: "#FFF", fontWeight: 600, mr: 1 }}>
+                {stat.value}
+              </Typography>
+              <Typography variant="body2" sx={{ color: "rgba(255,255,255,0.9)", fontSize: "0.875rem" }}>
+                {stat.label}
+              </Typography>
+            </Stack>
+          ))}
+        </Stack>
+      )}
+      </Box>
+    </Box>
+  );
+};

package/src/components/PersonAvatar.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React from "react";
+import { Avatar, SxProps } from "@mui/material";
+import { PersonInterface } from "@churchapps/helpers";
+import { PersonHelper } from "../helpers";
+
+interface Props {
+  person: PersonInterface;
+  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "responsive";
+  sx?: SxProps;
+  onClick?: () => void;
+}
+
+export const PersonAvatar: React.FC<Props> = ({ person, size = "medium", sx, onClick }) => {
+  const [imageError, setImageError] = React.useState(false);
+  
+  const getSizeProps = () => {
+    switch (size) {
+      case "small":
+        return { width: 48, height: 48 };
+      case "medium":
+        return { width: 56, height: 56 };
+      case "large":
+        return { width: 80, height: 80 };
+      case "xlarge":
+        return { width: 100, height: 100 };
+      case "xxlarge":
+        return { width: 120, height: 120 };
+      case "responsive":
+        return { width: { xs: 70, sm: 80, md: 100 }, height: { xs: 70, sm: 80, md: 100 } };
+      default:
+        return { width: 56, height: 56 };
+    }
+  };
+
+  const getInitials = () => {
+    if (!person?.name?.display) return "?";
+    
+    const names = person.name.display.trim().split(" ");
+    if (names.length >= 2) {
+      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+    } else if (names.length === 1) {
+      return names[0][0]?.toUpperCase() || "?";
+    }
+    return "?";
+  };
+
+  const photoUrl = PersonHelper.getPhotoUrl(person);
+  const sizeProps = getSizeProps();
+  
+  // Combine default styles with custom sx
+  const combinedSx = {
+    ...sizeProps,
+    cursor: onClick ? "pointer" : "default",
+    "&:hover": onClick ? {
+      opacity: 0.8,
+      transition: "opacity 0.2s ease-in-out",
+    } : {},
+    ...sx,
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  return (
+    <Avatar
+      src={!imageError ? photoUrl : undefined}
+      alt={person?.name?.display || "User avatar"}
+      sx={combinedSx}
+      onClick={onClick}
+      onError={handleImageError}
+    >
+      {(imageError || !photoUrl) && getInitials()}
+    </Avatar>
+  );
+};

package/src/components/header/SiteHeader.tsx

@@ -7,7 +7,8 @@ import { PrimaryMenu } from "./PrimaryMenu";
 import { SecondaryMenu } from "./SecondaryMenu";
 import { SecondaryMenuAlt } from "./SecondaryMenuAlt";
 import { SupportDrawer } from "./SupportDrawer";
-import { UserContextInterface } from "@churchapps/helpers";
+import { UserContextInterface, CommonEnvironmentHelper } from "@churchapps/helpers";
+import { NotificationService } from "../../helpers/NotificationService";
 
 type Props = {
   primaryMenuLabel: string;
@@ -19,11 +20,68 @@ type Props = {
   onNavigate: (url: string) => void;
 }
 
-export const SiteHeader = (props:Props) => {
+export const SiteHeader = React.memo((props:Props) => {
+  // Initialize NotificationService without subscribing to count changes to prevent re-renders
+  React.useEffect(() => {
+    const initializeNotifications = async () => {
+      if (props.context?.person?.id && props.context?.userChurch?.church?.id) {
+        const service = NotificationService.getInstance();
+        await service.initialize(props.context);
+      }
+    };
+    
+    initializeNotifications();
+  }, [props.context?.person?.id, props.context?.userChurch?.church?.id]);
+  
+  const refresh = React.useCallback(async () => {
+    // Direct access to NotificationService for refresh functionality
+    await NotificationService.getInstance().refresh();
+  }, []);
+  
+  // Memoize userName to prevent recreation
+  const userName = React.useMemo(() => {
+    if (props.context?.user) {
+      return `${props.context.user.firstName} ${props.context.user.lastName}`;
+    }
+    return '';
+  }, [props.context?.user?.firstName, props.context?.user?.lastName]);
+  
+  // Memoize profilePicture URL
+  const profilePicture = React.useMemo(() => {
+    return PersonHelper.getPhotoUrl(props.context?.person);
+  }, [props.context?.person]);
+  
+  // Create a stable context object to prevent UserMenu recreation
+  const stableContext = React.useMemo(() => {
+    if (!props.context) return undefined;
+    
+    return {
+      user: props.context.user,
+      person: props.context.person,
+      userChurch: props.context.userChurch,
+      userChurches: props.context.userChurches,
+      setUser: props.context.setUser,
+      setPerson: props.context.setPerson,
+      setUserChurch: props.context.setUserChurch,
+      setUserChurches: props.context.setUserChurches
+    };
+  }, [
+    props.context?.user?.id,
+    props.context?.user?.firstName,
+    props.context?.user?.lastName,
+    props.context?.person?.id,
+    props.context?.userChurch?.church?.id,
+    props.context?.userChurches,
+    props.context?.setUser,
+    props.context?.setPerson,
+    props.context?.setUserChurch,
+    props.context?.setUserChurches
+  ]);
 
   const CustomAppBar = styled(AppBar)(
     ({ theme }) => ({
       zIndex: theme.zIndex.drawer + 1,
+      backgroundColor: "var(--c1, #1565C0)",
       transition: theme.transitions.create(["width", "margin"], {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.leavingScreen
@@ -63,21 +121,86 @@ export const SiteHeader = (props:Props) => {
 
   /*<Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>*/
   return (<>
-    <div style={{backgroundColor:"var(--c1)", color: "#FFF"}}>
+    <div style={{
+      '--c1': '#1565C0',
+      '--c1d1': '#1358AD', 
+      '--c1d2': '#114A99',
+      '--c1l2': '#568BDA',
+      backgroundColor:"var(--c1)", 
+      color: "#FFF"
+    } as React.CSSProperties}>
       <CustomAppBar position="absolute">
-        <Toolbar sx={{ pr: "24px", backgroundColor: "var(--c1)" }}>
+        <Toolbar sx={{ pr: "24px", backgroundColor: "var(--c1)", minHeight: "64px !important" }}>
           <PrimaryMenu label={props.primaryMenuLabel} menuItems={props.primaryMenuItems} onNavigate={props.onNavigate} />
           <SecondaryMenu label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
           <div style={{ flex: 1 }}>
             <SecondaryMenuAlt label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
           </div>
-          {UserHelper.user && <UserMenu profilePicture={PersonHelper.getPhotoUrl(props.context?.person)} userName={`${UserHelper.user?.firstName} ${UserHelper.user?.lastName}`} userChurches={UserHelper.userChurches} currentUserChurch={UserHelper.currentUserChurch} context={props.context} appName={props.appName} loadCounts={() => {}} notificationCounts={{notificationCount:0, pmCount:0}} onNavigate={props.onNavigate} />}
-          {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
+          {props.context?.user?.id && (
+            <UserMenu 
+              key="user-menu-stable" 
+              profilePicture={profilePicture} 
+              userName={userName} 
+              userChurches={props.context?.userChurches} 
+              currentUserChurch={props.context?.userChurch} 
+              context={stableContext} 
+              appName={props.appName} 
+              loadCounts={refresh} 
+              notificationCounts={{notificationCount: 0, pmCount: 0}} 
+              onNavigate={props.onNavigate} 
+            />
+          )}
+          {!props.context?.user?.id && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
           <SupportDrawer appName={props.appName} relatedArticles={getRelatedArticles()} />
         </Toolbar>
       </CustomAppBar>
-
+      <div id="appBarSpacer"></div>
     </div>
   </>
   );
-}
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent unnecessary re-renders
+  
+  // Check if essential props have changed
+  if (prevProps.primaryMenuLabel !== nextProps.primaryMenuLabel ||
+      prevProps.secondaryMenuLabel !== nextProps.secondaryMenuLabel ||
+      prevProps.appName !== nextProps.appName) {
+    return false;
+  }
+  
+  // Check if menu items arrays have changed (shallow comparison)
+  if (prevProps.primaryMenuItems?.length !== nextProps.primaryMenuItems?.length ||
+      prevProps.secondaryMenuItems?.length !== nextProps.secondaryMenuItems?.length) {
+    return false;
+  }
+  
+  // Check if user context has actually changed (deep comparison of essential parts)
+  const prevUser = prevProps.context?.user;
+  const nextUser = nextProps.context?.user;
+  
+  if (prevUser?.id !== nextUser?.id ||
+      prevUser?.firstName !== nextUser?.firstName ||
+      prevUser?.lastName !== nextUser?.lastName) {
+    return false;
+  }
+  
+  // Check if person context has changed
+  if (prevProps.context?.person?.id !== nextProps.context?.person?.id) {
+    return false;
+  }
+  
+  // Check if church context has changed
+  if (prevProps.context?.userChurch?.church?.id !== nextProps.context?.userChurch?.church?.id) {
+    return false;
+  }
+  
+  // Check if onNavigate function reference has changed
+  if (prevProps.onNavigate !== nextProps.onNavigate) {
+    return false;
+  }
+  
+  // All essential props are the same, skip re-render
+  return true;
+});
+
+SiteHeader.displayName = 'SiteHeader';

package/src/components/header/SupportDrawer.tsx

@@ -33,7 +33,7 @@ export const SupportDrawer = (props: Props) => {
 
   const loadData = () => {
     if (UserHelper?.currentUserChurch?.church?.id) {
-      ApiHelper.get("/settings/public/" + UserHelper.currentUserChurch.church.id, "MembershipApi").then((data) => {
+      ApiHelper.get("/settings/public/" + UserHelper.currentUserChurch.church.id, "MembershipApi").then((data: any) => {
         const contactRes = data?.supportContact;
         if (contactRes && contactRes !== "") setSupportContact(contactRes);
         

package/src/components/index.tsx

@@ -8,6 +8,8 @@ export { ImageEditor } from "./ImageEditor";
 export { InputBox } from "./InputBox";
 export { Loading } from "./Loading";
 export { Notes } from "./notes/Notes";
+export { PageHeader } from "./PageHeader";
+export { PersonAvatar } from "./PersonAvatar";
 export { QuestionEdit } from "./QuestionEdit";
 export { SmallButton } from "./SmallButton";
 export { SupportModal } from "./SupportModal";

package/src/components/notes/AddNote.tsx

@@ -3,7 +3,16 @@
 import React, { useState, useEffect } from "react"
 import { ApiHelper, Locale, PersonHelper } from "../../helpers"
 import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
-import { Icon, Stack, TextField } from "@mui/material"
+import { 
+  Box,
+  Stack,
+  TextField,
+  IconButton,
+  Paper,
+  CircularProgress,
+  Avatar
+} from "@mui/material"
+import { Send as SendIcon, Delete as DeleteIcon } from "@mui/icons-material"
 import { ErrorMessages } from "../ErrorMessages"
 import { SmallButton } from "../SmallButton"
 
@@ -22,7 +31,7 @@ export function AddNote({ context, ...props }: Props) {
   const headerText = props.messageId ? "Edit note" : "Add a note"
 
   useEffect(() => {
-    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
+    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then((n: any) => setMessage(n));
     else setMessage({ conversationId: props.conversationId, content: "" });
     return () => {
       setMessage(null);
@@ -38,7 +47,7 @@ export function AddNote({ context, ...props }: Props) {
 
   const validate = () => {
     const result = [];
-    if (!message.content.trim()) result.push(Locale.label("notes.validate.content"));
+    if (!message.content.trim()) result.push(Locale.label("notes.validate.content", "Please enter a message"));
     setErrors(result);
     return result.length === 0;
   }
@@ -58,8 +67,13 @@ export function AddNote({ context, ...props }: Props) {
           m.content = "";
           setMessage(m);
         })
-        .catch((error) => {
-          if (error?.message === "Forbidden") setErrors(["You can't edit the message sent by others."])
+        .catch((error: any) => {
+          console.error("Error saving message:", error);
+          if (error?.message === "Forbidden") {
+            setErrors(["You can't edit the message sent by others."]);
+          } else {
+            setErrors([error?.message || "Failed to save message. Please try again."]);
+          }
         })
         .finally(() => { setIsSubmitting(false); });
     }
@@ -75,21 +89,93 @@ export function AddNote({ context, ...props }: Props) {
   const image = PersonHelper.getPhotoUrl(context?.person)
 
   return (
-    <>
+    <Box sx={{ width: '100%' }}>
       <ErrorMessages errors={errors} />
-
-      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
-
-        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
-        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
-          <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
-        </Stack>
-        <Stack direction="column" spacing={1} justifyContent="end">
-          <SmallButton icon="send" onClick={handleSave} />
-          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
+      
+      <Paper 
+        variant="outlined" 
+        sx={{ 
+          p: 2, 
+          bgcolor: 'grey.50',
+          borderColor: 'grey.300'
+        }}
+      >
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Avatar 
+            src={image} 
+            alt={context?.person?.name?.display}
+            sx={{ width: 48, height: 48 }}
+          />
+          
+          <Box sx={{ flex: 1 }}>
+            <TextField
+              fullWidth
+              multiline
+              rows={2}
+              name="noteText"
+              aria-label={headerText}
+              placeholder={props.messageId ? "Edit your message..." : "Type a message..."}
+              variant="standard"
+              value={message?.content || ''}
+              onChange={handleChange}
+              disabled={isSubmitting}
+              InputProps={{
+                disableUnderline: true,
+                sx: { 
+                  fontSize: '1rem',
+                  '& textarea': {
+                    resize: 'vertical',
+                    minHeight: '40px'
+                  }
+                }
+              }}
+              sx={{ 
+                bgcolor: 'white',
+                borderRadius: 1,
+                p: 1,
+                border: '1px solid',
+                borderColor: 'grey.300',
+                '&:hover': {
+                  borderColor: 'grey.400'
+                },
+                '&.Mui-focused': {
+                  borderColor: 'primary.main'
+                }
+              }}
+            />
+            
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 1, gap: 0.5 }}>
+              {deleteFunction && (
+                <IconButton
+                  size="small"
+                  onClick={deleteFunction}
+                  disabled={isSubmitting}
+                  sx={{ color: 'error.main' }}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              )}
+              <IconButton
+                size="small"
+                color="primary"
+                onClick={handleSave}
+                disabled={isSubmitting || !message?.content?.trim()}
+                sx={{ 
+                  bgcolor: 'primary.main', 
+                  color: 'white',
+                  '&:hover': { bgcolor: 'primary.dark' },
+                  '&:disabled': { 
+                    bgcolor: 'action.disabledBackground',
+                    color: 'action.disabled'
+                  }
+                }}
+              >
+                {isSubmitting ? <CircularProgress size={18} color="inherit" /> : <SendIcon fontSize="small" />}
+              </IconButton>
+            </Box>
+          </Box>
         </Stack>
-      </Stack>
-    </>
+      </Paper>
+    </Box>
   );
 }

package/src/components/notes/Note.tsx

@@ -1,7 +1,8 @@
-import { Icon, IconButton, Stack, Box } from "@mui/material";
+import { Icon, IconButton, Stack, Box, Typography } from "@mui/material";
 import React, { useState, useEffect } from "react";
 import { DateHelper, PersonHelper } from "../../helpers"
 import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
+import { PersonAvatar } from "../PersonAvatar"
 
 interface Props {
   message: MessageInterface;
@@ -15,33 +16,53 @@ export const Note: React.FC<Props> = (props) => {
   useEffect(() => setMessage(props.message), [props.message]);
 
   if (message === null) return null;
-  const photoUrl = PersonHelper.getPhotoUrl(message.person);
   let datePosted = new Date(message.timeUpdated || message.timeSent);
   const displayDuration = DateHelper.getDisplayDuration(datePosted);
 
-  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
+  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent;
   const contents = message.content?.split("\n");
+  
   return (
-    <div className="note">
-      <div className="postedBy">
-        <img src={photoUrl} alt="avatar" />
-      </div>
-      <Box sx={{ width: "100%" }} className="note-contents">
-        <Stack direction="row" justifyContent="space-between">
-          <div>
-            <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
-            {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
-          </div>
-          <div>
-            {(message?.id && message.personId === props.context?.person.id) && (
-              <IconButton aria-label="editNote" onClick={() => props.showEditNote(message.id)}>
-                <Icon style={{ color: "#03a9f4" }}>edit</Icon>
-              </IconButton>
-            )}
-          </div>
+    <Box sx={{ display: 'flex', gap: 2, mb: 2, p: 1, '&:hover': { bgcolor: 'action.hover', borderRadius: 1 } }}>
+      <PersonAvatar person={message.person} size="small" />
+      <Box sx={{ flex: 1 }}>
+        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+          <Box sx={{ flex: 1 }}>
+            <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 0.5 }}>
+              <Typography variant="subtitle2" fontWeight="bold">
+                {message.person?.name?.display}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {displayDuration}
+              </Typography>
+              {isEdited && (
+                <Typography variant="caption" color="text.secondary">
+                  (edited)
+                </Typography>
+              )}
+            </Stack>
+            <Box>
+              {contents.map((c, i) => c ? (
+                <Typography key={i} variant="body2" sx={{ mb: 0.5 }}>
+                  {c}
+                </Typography>
+              ) : (
+                <Box key={i} sx={{ height: '1em' }} />
+              ))}
+            </Box>
+          </Box>
+          {(message?.id && message.personId === props.context?.person.id) && (
+            <IconButton 
+              size="small" 
+              aria-label="editNote" 
+              onClick={() => props.showEditNote(message.id)}
+              sx={{ opacity: 0.7, '&:hover': { opacity: 1 } }}
+            >
+              <Icon fontSize="small">edit</Icon>
+            </IconButton>
+          )}
         </Stack>
-
       </Box>
-    </div>
+    </Box>
   );
 };