feat(userpicker): add chip list (#3552)

components/interactables/Chip/Chip.vue

@@ -1,14 +1,28 @@
 <template>
-  <div v-if="show" class="chip-item">
-    {{ text }}
-    <x-icon size="1x" @click="hide" />
+  <div :class="`chip-item size-${size}`">
+    <UiCircle
+      v-if="friend"
+      :type="src ? 'image' : 'random'"
+      :seed="friend.address"
+      :size="16"
+      :source="src"
+    />
+    <div class="text">
+      {{ text }}
+    </div>
+    <x-icon class="delete-icon" size="1x" @click="$emit('delete')" />
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-
+import Vue, { PropType } from 'vue'
 import { XIcon } from 'satellite-lucide-icons'
+import { Friend } from '~/types/ui/friends'
+
+export enum ChipSize {
+  Medium = 'medium',
+  Small = 'small',
+}
 
 export default Vue.extend({
   components: {
@@ -19,19 +33,19 @@ export default Vue.extend({
       type: String,
       default: '',
     },
+    size: {
+      type: String as unknown as PropType<ChipSize>,
+      default: ChipSize.Medium,
+    },
+    friend: {
+      type: Object as PropType<Friend> | undefined,
+      default: undefined,
+    },
   },
-  data() {
-    return {
-      show: true,
-    }
-  },
-  methods: {
-    /**
-     * @method hide
-     * @description Hides chip element
-     */
-    hide() {
-      this.show = false
+  computed: {
+    src(): string {
+      const hash = this.friend.profilePicture
+      return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
     },
   },
 })
@@ -40,15 +54,27 @@ export default Vue.extend({
 <style scoped lang="less">
 .chip-item {
   .fa-times {
-    margin-bottom: -2px;
-    margin-left: @light-spacing;
     cursor: pointer;
   }
-  display: inline-block;
-  margin-right: @light-spacing;
-  margin-bottom: @light-spacing;
-  padding: @xlight-spacing @light-spacing;
+  display: inline-flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: center;
+  padding: @xlight-spacing;
   border-radius: @corner-rounding-xxlarge;
   color: white;
+  line-height: 0;
+
+  .text {
+    margin: 0 0.125rem 0 @xlight-spacing;
+  }
+
+  &.size-small {
+    font-size: @mini-text-size;
+  }
+
+  .delete-icon {
+    cursor: pointer;
+  }
 }
 </style>

components/interactables/UserPicker/UserPicker.html

@@ -1,13 +1,30 @@
 <div class="user-picker">
+  <div class="chips">
+    <InteractablesChip
+      v-for="(friend, i) in selected"
+      :key="friend.address"
+      :text="friend.name"
+      :friend="friend"
+      size="small"
+      @delete="toggle(friend)"
+    />
+  </div>
   <InteractablesInput
     v-model="filter"
     size="small"
     type="dark"
     :placeholder="$t('servers.create.select_friends_placeholder')"
   />
   <UiScroll verticalScroll scrollbarVisibility="scroll" enableWrap>
+    <TypographyText
+      v-if="!filteredFriends.length"
+      :text="$t('servers.create.user_picker_empty')"
+      class="empty-results-text"
+    />
     <InteractablesUserPickerListItem
+      v-else
       v-for="friend in filteredFriends"
+      :key="friend.address"
       :friend="friend"
       :selected="isSelected(friend)"
       @click="toggle(friend)"

components/interactables/UserPicker/UserPicker.less

@@ -3,4 +3,17 @@
   display: flex;
   flex-direction: column;
   gap: @light-spacing;
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @xlight-spacing;
+  }
+
+  .empty-results-text {
+    text-align: center;
+    color: @gray;
+    margin: @light-spacing;
+  }
 }

locales/en-US.js

@@ -561,6 +561,7 @@ export default {
       select_friends: 'Invite your friends to this server',
       server_name_error: 'Server name must be at least 5 characters.',
       select_friends_placeholder: 'Search friends...',
+      user_picker_empty: 'No friends found',
     },
   },
   conversation: {