Editor Flow

Midnight Refactor

northstar-dashboard / feat/presence-stack

PROMPT · 0%

AGENT REASONING

Frame the constraintPresence can change without moving the surrounding header.

◇PresenceStack.vue●TSusePresenceChannel.ts●TPresenceStack.test.ts+Ln 24, Col 18▯•••

src › components › presence › PresenceStack.vueoutline · setup

<script setup lang="ts">
import { computed, onBeforeUnmount } from 'vue'
import { usePresenceChannel } from '@/composables/usePresenceChannel'
import type { WorkspaceMember } from '@/types/workspace'
const props = defineProps<{
  workspaceId: string
  members: WorkspaceMember[]
  maxVisible?: number
}>()
const emit = defineEmits<{
  select: [member: WorkspaceMember]
}>()
const maxVisible = computed(() => props.maxVisible ?? 4)
const { onlineIds, disconnect } = usePresenceChannel(props.workspaceId)
const onlineMembers = computed(() =>
  props.members
    .filter((member) => onlineIds.value.has(member.id))
    .sort((a, b) => a.name.localeCompare(b.name))
)
+const visibleMembers = computed(() =>
+  onlineMembers.value.slice(0, maxVisible.value)
+)
+const overflowCount = computed(() =>
+  Math.max(0, onlineMembers.value.length - visibleMembers.value.length)
+)
onBeforeUnmount(disconnect)
</script>
<template>
  <TransitionGroup name="presence" tag="div" class="presence-stack">
+    <button v-for="member in visibleMembers" :key="member.id"
+      class="avatar" @click="emit('select', member)">
+      <img :src="member.avatarUrl" :alt="member.name">
+      <span class="online-dot" />
+    </button>
+    <span v-if="overflowCount" class="overflow">+{{ overflowCount }}</span>
  </TransitionGroup>
</template>

TERMINALvitest · northstar×

❯ pnpm vitest PresenceStack.test.ts --run

RUNS tests/components/PresenceStack.test.ts

✓

Presence stack refactored with stable keyed transitions3 files changed · +42 −11

Hot update appliedPresenceStack.vue · 34ms

About this scene

Midnight Refactor

A calm editor flow with glowing syntax, deliberate typing, and a passing test suite.

Designed for deep work, streaming backgrounds, and the quiet pleasure of watching software take shape.

VS Code inspiredTypeScriptFocus