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 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 {
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 (
<div className="flex items-center gap-1.5">
<div className="flex flex-col items-center gap-1.5">
{/* Existing reaction pills */}
{activeEmojis.map((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>
</button>
</TooltipTrigger>
<TooltipContent side="top" className="text-xs">
<TooltipContent side="left" className="text-xs">
{getReactorNames(reactors, humans)}
</TooltipContent>
</Tooltip>
@@ -67,7 +67,7 @@ export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: Rea
{/* Expand / picker toggle */}
{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) => {
// Skip emojis that already have pills
if (activeEmojis.includes(emoji)) return null;
@@ -75,7 +75,7 @@ export function ReactionBar({ reactions, currentHumanId, humans, onToggle }: Rea
<button
key={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}
</button>
js/src/features/particles/stream-view.tsx
+3 -3
View File
@@ -138,7 +138,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
{
label: "Reactions",
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();
setShowKeybindings((v) => !v);
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();
handleToggleReaction(REACTION_EMOJIS[parseInt(e.key) - 1]);
break;
@@ -419,7 +419,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
{/* Reaction bar — always visible */}
{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
reactions={getReactions(currentParticle)}
currentHumanId={authedUser?.id ?? ""}