make tickets assignable to users

web/src/components/Timeline.vue

@@ -11,12 +11,16 @@
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'" :class="'bg-' + stateInfo(item.state).color">
                 <font-awesome-icon :icon="stateInfo(item.state).icon"/>
             </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'assignment'" :class="'bg-secondary'">
+                <font-awesome-icon icon="user"/>
+            </span>
             <span class="timeline-item-icon faded-icon" v-else>
                 <font-awesome-icon icon="pen"/>
             </span>
             <TimelineMail v-if="item.type === 'mail'" :item="item"/>
             <TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
             <TimelineStateChange v-else-if="item.type === 'state'" :item="item"/>
+            <TimelineAssignment v-else-if="item.type === 'assignment'" :item="item"/>
             <p v-else>{{ item }}</p>
         </li>
         <li class="timeline-item">
@@ -61,10 +65,11 @@ import TimelineMail from "@/components/TimelineMail.vue";
 import TimelineComment from "@/components/TimelineComment.vue";
 import TimelineStateChange from "@/components/TimelineStateChange.vue";
 import {mapGetters} from "vuex";
+import TimelineAssignment from "@/components/TimelineAssignment.vue";
 
 export default {
     name: 'Timeline',
-    components: {TimelineStateChange, TimelineComment, TimelineMail},
+    components: {TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail},
     props: {
         timeline: {
             type: Array,

web/src/components/TimelineAssignment.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <span><a href="#">$USER</a> assigned ticket to <span
+            class="badge badge-pill badge-secondary">{{ item.assigned_to }}</span> at <time
+            :datetime="timestamp">{{ timestamp }}</time>
+        </span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineAssignment',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+
+    }
+};
+</script>
+
+<style scoped>
+
+
+a {
+    color: inherit;
+}
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+</style>

web/src/components/TimelineStateChange.vue

@@ -41,9 +41,6 @@ export default {
         'timestamp': function () {
             return new Date(this.item.timestamp).toLocaleString();
         },
-        'body': function () {
-            return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
-        }
 
     }
 };