メッセージにホバーしたときに色が変わるようにし、右クリックでドロップダウンメニューを出せるようにした

[Kanata844]

No description provided.

[aster-void]

JavaScript の命名規則はほとんどの場合スネークケース variable_name ではなくキャメルケース variableName なので、そのような名前にしてね。

[aster-void]

ドロップダウンのメニューをこちら側で再実装するのではなく、 MessageList の方で #snippet を使って作ってやると onclick_ボタン名 みたいなのをボタンごとに渡さなくてもよくなりそう

そうすると MessageDropdown が複数 HTML に出てくることになるので、 visibility: hidden ではなく {#if visible}...{/if} で表示を操作してやると、やりたいことができると思う

[aster-void]

例

<!-- MessageDropdown.svelte -->
<script lang="ts">
  import type { Snippet } from "svelte";

  const {
    x,
    y,
    visible,
    children,
  }: { children: Snippet; x: number; y: number; visible: boolean } = $props();
</script>

{#if visible}
  <div
    style={`top: ${y}px; left: ${x}px; visibility: ${visible ? "visible" : "hidden"}`}
    class="fixed"
  >
    {@render children()}
  </div>
{/if}

<!-- MessageList.svelte (抜粋) -->
<script lang="ts">
  // 適切なタイミングで変更するハンドラを入れる
  let dropdownVisibleOn = $state<Id<"messages"> | null>(null);
</script>

{#each messages as message (message._id)}
  <MessageDropdown visible={dropdownVisibleOn === message._id}>
    {@render dropdownContent()}
  </MessageDropdown>
  {#snippet dropdownContent()}
    <ul>...</ul>
  {/snippet}
{/each}

[aster-void]

よさそう