System Initiative

<template> <!-- Hover styles - hover:bg-action-200 dark:hover:bg-action-500 cursor-pointer --> <div class="flex flex-row items-center gap-xs p-xs pl-sm overflow-hidden flex-none" > <UserIcon :user="user" changeSetStarSide :hideChangesetStar="hideChangeSetInfo" :hasHoverState="iconHasHoverState" @click="emit('iconClicked')" /> <div class="flex flex-col min-w-0"> <div class="w-full truncate leading-tight"> {{ user.name }} </div> <div v-if="!hideChangeSetInfo" class="text-xs font-bold line-clamp-3 break-words" > {{ user.changeSet ? changeSetsStore.changeSetsById[user.changeSet]?.name || "Head" : "Head" }} </div> <div v-if="!hideStatus" class="text-xs italic line-clamp-3 break-words"> {{ user.status }} </div> </div> </div> </template> <script lang="ts" setup> import { PropType } from "vue"; import { useChangeSetsStore } from "@/store/change_sets.store"; import UserIcon from "./UserIcon.vue"; import { UserInfo } from "./Collaborators.vue"; const changeSetsStore = useChangeSetsStore(); defineProps({ user: { type: Object as PropType<UserInfo>, required: true }, hideChangeSetInfo: { type: Boolean }, iconHasHoverState: { type: Boolean }, hideStatus: { type: Boolean }, }); const emit = defineEmits<{ (e: "iconClicked"): void; }>(); </script>