Refactor sidebar

src/components/userlist/UserList.vue

@@ -0,0 +1,22 @@
+<template>
+<div class="d-flex flex-column">
+  <User :user="self" />
+  <div v-for="user in users" :key="user.id" class="d-flex flex-row align-items-center">
+    <User :user="user" />
+  </div>
+</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useUserStore } from '../../stores/userStore'
+import User from './User.vue'
+
+const props = defineProps(['channel'])
+const channelId = computed(() => { return props.channel.id })
+
+const userStore = useUserStore()
+const users = computed(() => { return userStore.getUsersByChannelId(channelId.value) })
+
+const self = userStore.getSelf()
+</script>