malice

<script lang="ts">

  export let pinned: boolean;

  export let label: string;

  export let onToggle: () => void;

</script>

<button

  type="button"

  class="pin-btn"

  class:pinned

  aria-pressed={pinned}

  aria-label={pinned ? `Unpin ${label}` : `Pin ${label}`}

  title={pinned ? 'Unpin' : 'Pin'}

  on:click={onToggle}

>

  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">

    <path

      d="M9 3h6l-1 6 4 4v2h-5v6l-1 1-1-1v-6H6v-2l4-4z"

      fill={pinned ? 'currentColor' : 'none'}

      stroke="currentColor"

      stroke-width="1.8"

      stroke-linejoin="round"

    />

  </svg>

</button>

<style>

  .pin-btn {

    flex: none;

    display: grid;

    place-items: center;

    width: 24px;

    height: 24px;

    padding: 0;

    border: none;

    border-radius: var(--r-sm);

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    opacity: 0;

  }

  .pin-btn.pinned { opacity: 1; color: var(--accent); }

  .pin-btn:hover { background: var(--hover); color: var(--text); }

  :global(.room-item:hover) .pin-btn, :global(.room-item:focus-within) .pin-btn, .pin-btn:focus-visible { opacity: 1; }

</style>