feat(interactables): user picker component (#3506)

components/interactables/Button/Button.less

@@ -3,7 +3,7 @@
   min-width: 35px;
   overflow: hidden;
   line-height: unset;
-  transition: 250ms all ease-in;
+  transition: all @animation-speed ease-in;
 
   #custom-cursor-area {
     display: inline-flex;

components/interactables/Button/types.d.ts

@@ -1,5 +1,6 @@
 export type ButtonType =
   | 'primary'
+  | 'dark'
   | 'link'
   | 'info'
   | 'success'

components/interactables/Checkbox/Checkbox.html

@@ -0,0 +1,4 @@
+<div class="checkbox" :class="{checked: value}">
+  <check-icon />
+  <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+</div>

components/interactables/Checkbox/Checkbox.less

@@ -0,0 +1,40 @@
+.checkbox {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid @gray;
+  border-radius: @corner-rounding;
+  transition: all @animation-speed ease;
+
+  svg, input {
+    position: absolute;
+  }
+
+  svg {
+    transition: all @animation-speed ease;
+    opacity: 0;
+    transform: scale(0.5);
+    stroke: @white;
+    width: 16px;
+    height: 16px;
+  }
+
+  &.checked {
+    border-color: @flair-color;
+    background-color: @flair-color;
+    &:extend(.glow-flair);
+
+    svg {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  input {
+    appearance: none;
+    width: 24px;
+    height: 24px;
+  }
+}

components/interactables/Checkbox/Checkbox.vue

@@ -0,0 +1,21 @@
+<template src="./Checkbox.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { CheckIcon } from 'satellite-lucide-icons'
+
+export default Vue.extend({
+  name: 'Checkbox',
+  components: {
+    CheckIcon,
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./Checkbox.less"></style>

components/interactables/UserPicker/ListItem/ListItem.html

@@ -0,0 +1,10 @@
+<div class="list-item" @click="$emit('click', $event)">
+    <UiCircle
+      :type="src ? 'image' : 'random'"
+      :seed="friend.address"
+      :size="32"
+      :source="src"
+    />
+  <div class="name">{{friend.name}}</div>
+  <InteractablesCheckbox :value="selected"/>
+</div>

components/interactables/UserPicker/ListItem/ListItem.less

@@ -0,0 +1,19 @@
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: @light-spacing;
+  cursor: pointer;
+  padding: @light-spacing;
+  padding-right: @normal-spacing;
+
+  &:hover {
+    background: @semitransparent-light-gradient;
+  }
+
+  .name {
+    font-size: @mini-text-size;
+    flex-grow: 1;
+
+  }
+}

components/interactables/UserPicker/ListItem/ListItem.vue

@@ -0,0 +1,31 @@
+<template src="./ListItem.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Friend } from '~/types/ui/friends'
+
+export default Vue.extend({
+  name: 'ListItem',
+  props: {
+    friend: {
+      type: Object as PropType<Friend>,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  computed: {
+    src(): string {
+      const hash =
+        this.friend?.photoHash ||
+        this.friend?.profilePicture ||
+        this.friend?.request?.userInfo?.photoHash
+      return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./ListItem.less"></style>

components/interactables/UserPicker/UserPicker.html

@@ -0,0 +1,16 @@
+<div class="user-picker">
+  <InteractablesInput
+    v-model="filter"
+    size="small"
+    type="dark"
+    :placeholder="$t('servers.create.select_friends_placeholder')"
+  />
+  <UiScroll verticalScroll scrollbarVisibility="scroll" enableWrap>
+    <InteractablesUserPickerListItem
+      v-for="friend in filteredFriends"
+      :friend="friend"
+      :selected="isSelected(friend)"
+      @click="toggle(friend)"
+    />
+  </UiScroll>
+</div>

components/interactables/UserPicker/UserPicker.less

@@ -0,0 +1,6 @@
+.user-picker {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: @light-spacing;
+}

components/interactables/UserPicker/UserPicker.vue

@@ -0,0 +1,50 @@
+<template src="./UserPicker.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+import { Friend } from '~/types/ui/friends'
+import { RootState } from '~/types/store/store'
+
+export default Vue.extend({
+  name: 'UserPicker',
+  data: () => ({
+    selected: [] as Friend[],
+    filter: '',
+  }),
+  computed: {
+    ...mapState({
+      friends: (state) => (state as RootState).friends.all,
+    }),
+    filteredFriends(): Friend[] {
+      if (!this.filter) {
+        return this.friends
+      }
+      const filterLower = this.filter.toLowerCase()
+      return this.friends.filter((friend: Friend) => {
+        return friend.name.toLowerCase().includes(filterLower)
+      })
+    },
+  },
+  watch: {
+    selected() {
+      this.$emit('input', this.selected)
+    },
+  },
+  methods: {
+    toggle(friend: Friend): void {
+      if (this.isSelected(friend)) {
+        const index = this.selected.indexOf(friend)
+        this.selected.splice(index, 1)
+        return
+      }
+      this.selected.push(friend)
+    },
+    isSelected(friend: Friend): boolean {
+      return this.selected.includes(friend)
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./UserPicker.less"></style>

components/views/friends/quick/Quick.html

@@ -3,13 +3,7 @@
     <TypographySubtitle :size="6" :text="$t('pages.chat.new_chat')" />
     <TypographyText :text="$t('pages.chat.new_chat_description')" />
   </div>
-  <SettingsPagesUserSearch
-    v-model="friends"
-    :placeholder="$t('servers.create.select_friends_placeholder')"
-    size="small"
-    type="primary"
-    drop="bottom"
-  />
+  <InteractablesUserPicker v-model="friends" />
   <template v-if="friends.length > 1">
     <InteractablesInput
       v-model="name"
@@ -24,11 +18,11 @@
     <TypographyError v-if="error" :text="error" small />
   </template>
   <InteractablesButton
-    v-if="friends.length"
-    type="primary"
+    :type="friends.length ? 'primary' : 'dark'"
     size="small"
     :text="$t('pages.chat.chat_now')"
     :action="confirm"
     :loading="isLoading"
+    full-width
   />
 </div>

components/views/friends/quick/Quick.less

@@ -11,7 +11,6 @@
   left: @sidebar-size + 2rem;
   display: flex;
   flex-direction: column;
-  max-height: 24rem;
   gap: @normal-spacing;
 
   &.compact {

components/views/group/icon/GroupIcon.less

@@ -64,7 +64,6 @@
   }
 
   &.unread {
-    &:extend(.first-layer);
     position: relative;
 
     .label {