FlowyLabs/llink
1
0
Fork 0
Code Issues 71 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: position reactions in better spot

Browse Source 
This prevents overlap with captions. It also introduces the laughing
emoji.
This commit is contained in:
talksik
2026-04-08 17:25:50 -07:00
parent be7a42c483
commit fbce997180
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/src/api/types.ts
+1 -1
View File
@@ -158,7 +158,7 @@ export type PaperProperties = z.infer<typeof PaperPropertiesSchema>;
export const ReactionsSchema = z.record(z.string(), z.array(z.string())).optional(); export const ReactionsSchema = z.record(z.string(), z.array(z.string())).optional();
export type Reactions = z.infer<typeof ReactionsSchema>; export type Reactions = z.infer<typeof ReactionsSchema>;
export const REACTION_EMOJIS = ["\u{1F44D}", "\u{2764}\u{FE0F}", "\u{1F525}", "\u{1F440}", "\u{2705}", "\u{2753}"] as const; export const REACTION_EMOJIS = ["\u{1F44D}", "\u{2764}\u{FE0F}", "\u{1F525}", "\u{1F440}", "\u{2705}", "\u{2753}", "\u{1F602}"] as const;
export interface ParticlePropertiesMap { export interface ParticlePropertiesMap {
stream: StreamProperties; stream: StreamProperties;
js/src/features/particles/reaction-bar.tsx
+4 -4
View File
@@ -37,7 +37,7 @@ export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: Rea
}; };
return ( return (
<div className="flex items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
{/* Existing reaction pills */} {/* Existing reaction pills */}
{activeEmojis.map((emoji) => { {activeEmojis.map((emoji) => {
const reactors = reactions![emoji]; const reactors = reactions![emoji];
@@ -58,7 +58,7 @@ export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: Rea
<span className="text-white/80">{reactors.length}</span> <span className="text-white/80">{reactors.length}</span>
</button> </button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top" className="text-xs"> <TooltipContent side="left" className="text-xs">
{getReactorNames(reactors, humans)} {getReactorNames(reactors, humans)}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
@@ -67,7 +67,7 @@ export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: Rea
{/* Expand / picker toggle */} {/* Expand / picker toggle */}
{expanded ? ( {expanded ? (
<div className="flex items-center gap-0.5 rounded-full bg-black/40 px-1.5 py-0.5 backdrop-blur-sm"> <div className="flex flex-col items-center gap-0.5 rounded-full bg-black/40 px-0.5 py-1.5 backdrop-blur-sm">
{REACTION_EMOJIS.map((emoji) => { {REACTION_EMOJIS.map((emoji) => {
// Skip emojis that already have pills // Skip emojis that already have pills
if (activeEmojis.includes(emoji)) return null; if (activeEmojis.includes(emoji)) return null;
@@ -75,7 +75,7 @@ export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: Rea
<button <button
key={emoji} key={emoji}
onClick={(e) => { e.stopPropagation(); handleToggle(emoji); }} onClick={(e) => { e.stopPropagation(); handleToggle(emoji); }}
className="rounded-full px-1 py-0.5 text-sm transition-colors hover:bg-white/15" className="rounded-full px-0.5 py-1 text-sm transition-colors hover:bg-white/15"
> >
{emoji} {emoji}
</button> </button>
js/src/features/particles/stream-view.tsx
+3 -3
View File
@@ -138,7 +138,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
{ {
label: "Reactions", label: "Reactions",
bindings: [ bindings: [
{ keys: ["1-6"], description: "Toggle emoji reaction" }, { keys: ["1-7"], description: "Toggle emoji reaction" },
], ],
}, },
]; ];
@@ -288,7 +288,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
e.preventDefault(); e.preventDefault();
setShowKeybindings((v) => !v); setShowKeybindings((v) => !v);
break; break;
case "1": case "2": case "3": case "4": case "5": case "6": case "1": case "2": case "3": case "4": case "5": case "6": case "7":
e.preventDefault(); e.preventDefault();
handleToggleReaction(REACTION_EMOJIS[parseInt(e.key) - 1]); handleToggleReaction(REACTION_EMOJIS[parseInt(e.key) - 1]);
break; break;
@@ -419,7 +419,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
{/* Reaction bar — always visible */} {/* Reaction bar — always visible */}
{currentParticle && ( {currentParticle && (
<div className="absolute bottom-16 left-4 z-10"> <div className="absolute right-4 top-1/2 -translate-y-1/2 z-10">
<ReactionBar <ReactionBar
reactions={getReactions(currentParticle)} reactions={getReactions(currentParticle)}
currentHumanId={authedUser?.id ?? ""} currentHumanId={authedUser?.id ?? ""}