rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.7.8 bugs fixes for pinned messages

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-11 19:38:59 -04:00
parent 08243be745
commit 67bea6c2c3
6 changed files with 82 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@@ -7,7 +7,7 @@ TZ=UTC
# Copy this file to .env and customize
# Image version to run (set by build.sh, or use 'latest')
JAMA_VERSION=0.7.7
JAMA_VERSION=0.7.8
# Default admin credentials (used on FIRST RUN only)
ADMIN_NAME=Admin User

2
backend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "jama-backend",
"version": "0.7.7",
"version": "0.7.8",
"description": "TeamChat backend server",
"main": "src/index.js",
"scripts": {

2
build.sh
View File

@@ -13,7 +13,7 @@
# ─────────────────────────────────────────────────────────────
set -euo pipefail
VERSION="${1:-0.7.7}"
VERSION="${1:-0.7.8}"
ACTION="${2:-}"
REGISTRY="${REGISTRY:-}"
IMAGE_NAME="jama"

2
frontend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "jama-frontend",
"version": "0.7.7",
"version": "0.7.8",
"private": true,
"scripts": {
"dev": "vite",

97
frontend/src/components/Message.css
View File

@@ -334,72 +334,46 @@
user-select: text;
}
/* Triple-dot pin button wrapper */
.msg-pin-wrap {
position: relative;
/* Pinned state highlight for toolbar pin button */
.action-pinned {
color: var(--primary) !important;
}
/* Mobile bottom-sheet overlay for long-press / right-click pin */
.msg-sheet-overlay {
position: fixed;
inset: 0;
z-index: 500;
background: rgba(0,0,0,0.35);
display: flex;
align-items: center;
align-self: flex-end;
margin-bottom: 2px;
align-items: flex-end;
justify-content: center;
}
.msg-pin-btn {
opacity: 0;
transition: opacity 0.15s;
color: var(--text-tertiary);
padding: 2px 4px;
border-radius: 4px;
}
.msg-pin-btn:hover,
.msg-pin-btn.active {
opacity: 1 !important;
color: var(--text-primary);
background: var(--surface-variant);
}
/* Show pin button on message row hover */
.msg-bubble-wrap:hover .msg-pin-btn,
.msg-pin-btn.active {
opacity: 1;
}
/* On touch devices always show it so users know it's there */
@media (hover: none) {
.msg-pin-btn {
opacity: 0.45;
}
}
/* Message pin/options popup menu */
.msg-options-menu {
position: absolute;
z-index: 200;
.msg-sheet {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 4px 0;
min-width: 170px;
bottom: calc(100% + 4px);
white-space: nowrap;
border-radius: 16px 16px 0 0;
padding: 8px 0 max(16px, env(safe-area-inset-bottom)) 0;
width: 100%;
max-width: 480px;
box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
.msg-options-menu.options-left {
right: 0;
.msg-sheet-handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: var(--border);
margin: 0 auto 12px;
}
.msg-options-menu.options-right {
left: 0;
}
.msg-options-menu button {
.msg-sheet-btn {
display: flex;
align-items: center;
gap: 8px;
gap: 14px;
width: 100%;
padding: 8px 14px;
font-size: 13px;
padding: 14px 24px;
font-size: 15px;
color: var(--text-primary);
background: none;
border: none;
@@ -408,11 +382,20 @@
transition: background var(--transition);
}
.msg-options-menu button:hover:not(:disabled) {
.msg-sheet-btn:hover:not(:disabled) {
background: var(--surface-variant);
}
.msg-options-menu button:disabled {
.msg-sheet-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.msg-sheet-cancel {
color: var(--text-secondary);
font-weight: 500;
border-top: 1px solid var(--border);
margin-top: 4px;
justify-content: center;
gap: 0;
}

45
frontend/src/components/Message.jsx
View File

@@ -216,6 +216,7 @@ export default function Message({ message: msg, prevMessage, currentUser, onRepl
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
onTouchMove={handleTouchEnd}
onContextMenu={isDirect ? (e => { e.preventDefault(); setShowOptionsMenu(true); }) : undefined}
>
{/* Actions toolbar — floats above the bubble, aligned to correct side */}
{!isDeleted && (showActions || showEmojiPicker) && (
@@ -239,6 +240,16 @@ export default function Message({ message: msg, prevMessage, currentUser, onRepl
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
</button>
)}
{isDirect && (
<button
className={`btn-icon action-btn${isPinned ? ' action-pinned' : ''}`}
onClick={() => { isPinned ? onUnpin(msg.id) : (pinCount < 5 && onPin(msg.id)); setShowActions(false); }}
disabled={!isPinned && pinCount >= 5}
title={isPinned ? 'Unpin message' : pinCount >= 5 ? 'Pin limit reached (5/5)' : `Pin message (${pinCount + 1}/5)`}
>
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
</button>
)}
{/* Emoji picker anchored to the toolbar */}
{showEmojiPicker && (
<div
@@ -275,38 +286,34 @@ export default function Message({ message: msg, prevMessage, currentUser, onRepl
<span className="msg-time">{formatTime(msg.created_at)}</span>
{/* Triple-dot pin button — sits outside the hover toolbar so mouse-leave doesn't race */}
{isDirect && (
<div className="msg-pin-wrap" ref={optionsMenuRef}>
<button
className={`btn-icon msg-pin-btn ${showOptionsMenu ? 'active' : ''}`}
onClick={e => { e.stopPropagation(); setShowOptionsMenu(p => !p); }}
title="Message options"
>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><circle cx="12" cy="5" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="19" r="1.2" fill="currentColor"/></svg>
</button>
{showOptionsMenu && (
{/* Mobile long-press / right-click bottom sheet for pin */}
{isDirect && showOptionsMenu && (
<div className="msg-sheet-overlay" onClick={() => setShowOptionsMenu(false)}>
<div
className={`msg-options-menu ${isOwn ? 'options-left' : 'options-right'}`}
onMouseDown={e => e.stopPropagation()}
className="msg-sheet"
ref={optionsMenuRef}
onClick={e => e.stopPropagation()}
>
<div className="msg-sheet-handle" />
{isPinned ? (
<button onClick={() => { onUnpin(msg.id); setShowOptionsMenu(false); }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
<button className="msg-sheet-btn" onClick={() => { onUnpin(msg.id); setShowOptionsMenu(false); }}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
Unpin message
</button>
) : (
<button
className="msg-sheet-btn"
onClick={() => { if (pinCount < 5) { onPin(msg.id); setShowOptionsMenu(false); } }}
disabled={pinCount >= 5}
title={pinCount >= 5 ? 'Maximum 5 pinned messages reached' : ''}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
{pinCount >= 5 ? 'Pin (5/5)' : `Pin (${pinCount + 1}/5)`}
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
{pinCount >= 5 ? 'Pin limit reached (5/5)' : `Pin message (${pinCount + 1}/5)`}
</button>
)}
<button className="msg-sheet-btn msg-sheet-cancel" onClick={() => setShowOptionsMenu(false)}>
Cancel
</button>
</div>
)}
</div>
)}
</div>