handlenett-frontend: show creator

why? then you know who to contact if you dont understand the
mission

handlenett-frontend/components/Item.vue

@@ -1,8 +1,11 @@
 <template>
     <div class="groceryitem">
-        <label :class="{ 'complete': status }">
-            <input type="checkbox" :checked="status" @change="update"> {{ props.element?.name }}
-        </label>
+        <div>
+            <label :class="{ 'complete': status }">
+                <input type="checkbox" :checked="status" @change="update"> {{ props.element?.name }}
+            </label>
+            <div class="gi-creator">📝{{ createdBy }}</div>
+        </div>
         <div class="button-group">
             <button v-if="false" class="btn primary" @click="editeleement">✏️
             </button>
@@ -35,6 +38,14 @@ const deleteeleement = () => {
     emit('delete', { id: props.element.id })
 }
 
+const createdBy = computed(() => {
+
+    const fullEmail = props.element.createdBy;
+    const dottedName = fullEmail.split('@')[0];
+    const firstName = dottedName.split('.')[0];
+    return firstName.charAt(0).toUpperCase() + firstName.slice(1);
+});
+
 </script>
 <style scoped>
 .groceryitem {
@@ -46,6 +57,12 @@ const deleteeleement = () => {
     font-weight: bold;
 }
 
+.gi-creator{
+    font-size: 0.8rem;
+    font-weight: 100;
+    padding-left: 1rem;
+}
+
 .button-group {
     display: flex;
     gap: 1rem;

handlenett-frontend/components/NewItem.vue

@@ -5,7 +5,7 @@
     </form>
 </template>
 <script setup>
-import { ref, defineEmits } from 'vue'
+import { ref } from 'vue'
 const item = ref('')
 const emit = defineEmits(['changed'])