From 51bec140014d1ed8c4b2dc4bc420acdb0fd70010 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 15:32:25 +1000
Subject: [PATCH 01/10] feat(interactables): add checkbox component

---
 .../interactables/Checkbox/Checkbox.html      |  4 ++
 .../interactables/Checkbox/Checkbox.less      | 44 +++++++++++++++++++
 .../interactables/Checkbox/Checkbox.vue       | 21 +++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 components/interactables/Checkbox/Checkbox.html
 create mode 100644 components/interactables/Checkbox/Checkbox.less
 create mode 100644 components/interactables/Checkbox/Checkbox.vue

diff --git a/components/interactables/Checkbox/Checkbox.html b/components/interactables/Checkbox/Checkbox.html
new file mode 100644
index 0000000000..6a4d8ba98b
--- /dev/null
+++ b/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>
diff --git a/components/interactables/Checkbox/Checkbox.less b/components/interactables/Checkbox/Checkbox.less
new file mode 100644
index 0000000000..71d3840c59
--- /dev/null
+++ b/components/interactables/Checkbox/Checkbox.less
@@ -0,0 +1,44 @@
+.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;
+
+    &:active {
+      // background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
diff --git a/components/interactables/Checkbox/Checkbox.vue b/components/interactables/Checkbox/Checkbox.vue
new file mode 100644
index 0000000000..82520be0d5
--- /dev/null
+++ b/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>

From 20d16b7f627d29ad124c2a2093999c1a67b3731b Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 15:39:02 +1000
Subject: [PATCH 02/10] feat(interactables): user picker component

---
 .../UserPicker/ListItem/ListItem.html         | 10 ++++
 .../UserPicker/ListItem/ListItem.less         | 19 ++++++++
 .../UserPicker/ListItem/ListItem.vue          | 31 ++++++++++++
 .../interactables/UserPicker/UserPicker.html  | 40 ++++++++++++++++
 .../interactables/UserPicker/UserPicker.less  |  6 +++
 .../interactables/UserPicker/UserPicker.vue   | 48 +++++++++++++++++++
 6 files changed, 154 insertions(+)
 create mode 100644 components/interactables/UserPicker/ListItem/ListItem.html
 create mode 100644 components/interactables/UserPicker/ListItem/ListItem.less
 create mode 100644 components/interactables/UserPicker/ListItem/ListItem.vue
 create mode 100644 components/interactables/UserPicker/UserPicker.html
 create mode 100644 components/interactables/UserPicker/UserPicker.less
 create mode 100644 components/interactables/UserPicker/UserPicker.vue

diff --git a/components/interactables/UserPicker/ListItem/ListItem.html b/components/interactables/UserPicker/ListItem/ListItem.html
new file mode 100644
index 0000000000..b9a1e2af81
--- /dev/null
+++ b/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>
diff --git a/components/interactables/UserPicker/ListItem/ListItem.less b/components/interactables/UserPicker/ListItem/ListItem.less
new file mode 100644
index 0000000000..b3fe804a8e
--- /dev/null
+++ b/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;
+
+  }
+}
diff --git a/components/interactables/UserPicker/ListItem/ListItem.vue b/components/interactables/UserPicker/ListItem/ListItem.vue
new file mode 100644
index 0000000000..f4c58a5a9e
--- /dev/null
+++ b/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>
diff --git a/components/interactables/UserPicker/UserPicker.html b/components/interactables/UserPicker/UserPicker.html
new file mode 100644
index 0000000000..71bccd5458
--- /dev/null
+++ b/components/interactables/UserPicker/UserPicker.html
@@ -0,0 +1,40 @@
+<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)"
+    />
+    <InteractablesUserPickerListItem
+      v-for="friend in filteredFriends"
+      :friend="friend"
+      :selected="isSelected(friend)"
+      @click="toggle(friend)"
+    />
+    <InteractablesUserPickerListItem
+      v-for="friend in filteredFriends"
+      :friend="friend"
+      :selected="isSelected(friend)"
+      @click="toggle(friend)"
+    />
+    <InteractablesUserPickerListItem
+      v-for="friend in filteredFriends"
+      :friend="friend"
+      :selected="isSelected(friend)"
+      @click="toggle(friend)"
+    />
+    <InteractablesUserPickerListItem
+      v-for="friend in filteredFriends"
+      :friend="friend"
+      :selected="isSelected(friend)"
+      @click="toggle(friend)"
+    />
+  </UiScroll>
+</div>
diff --git a/components/interactables/UserPicker/UserPicker.less b/components/interactables/UserPicker/UserPicker.less
new file mode 100644
index 0000000000..e406c8d354
--- /dev/null
+++ b/components/interactables/UserPicker/UserPicker.less
@@ -0,0 +1,6 @@
+.user-picker {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: @light-spacing;
+}
diff --git a/components/interactables/UserPicker/UserPicker.vue b/components/interactables/UserPicker/UserPicker.vue
new file mode 100644
index 0000000000..748fe1930e
--- /dev/null
+++ b/components/interactables/UserPicker/UserPicker.vue
@@ -0,0 +1,48 @@
+<template src="./UserPicker.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+import { Friend } from '~/types/ui/friends'
+
+export default Vue.extend({
+  name: 'UserPicker',
+  data: () => ({
+    selected: [] as Friend[],
+    filter: '',
+  }),
+  computed: {
+    ...mapState(['friends']),
+    filteredFriends() {
+      if (this.filter) {
+        const filterLower = this.filter.toLowerCase()
+        return this.friends.all.filter((friend: Friend) => {
+          return friend.name.toLowerCase().includes(filterLower)
+        })
+      }
+      return this.friends.all
+    },
+  },
+  watch: {
+    selected() {
+      console.log('emit', this.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>

From 296086f1a8c6428912c90bde410997dde6191c78 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 15:42:26 +1000
Subject: [PATCH 03/10] feat(quick): use user picker

---
 components/views/friends/quick/Quick.html | 12 +++---------
 components/views/friends/quick/Quick.less |  1 -
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/components/views/friends/quick/Quick.html b/components/views/friends/quick/Quick.html
index 26165de911..eca3355a4c 100644
--- a/components/views/friends/quick/Quick.html
+++ b/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>
diff --git a/components/views/friends/quick/Quick.less b/components/views/friends/quick/Quick.less
index 72066260ee..aa00e88d94 100644
--- a/components/views/friends/quick/Quick.less
+++ b/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 {

From 4a9f08cd835cea4ba4ce4833c52fc7fe717dae25 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 15:42:43 +1000
Subject: [PATCH 04/10] fix(interactables): button animation speed

---
 components/interactables/Button/Button.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/interactables/Button/Button.less b/components/interactables/Button/Button.less
index 14f090ceee..f8f48e5bae 100644
--- a/components/interactables/Button/Button.less
+++ b/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;

From fc53f80aae71db193b015c45abc861c7dbe92ebb Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 15:43:12 +1000
Subject: [PATCH 05/10] fix(interactables): add missing type

---
 components/interactables/Button/types.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/interactables/Button/types.d.ts b/components/interactables/Button/types.d.ts
index dd2836a0ab..461a1ab9a3 100644
--- a/components/interactables/Button/types.d.ts
+++ b/components/interactables/Button/types.d.ts
@@ -1,5 +1,6 @@
 export type ButtonType =
   | 'primary'
+  | 'dark'
   | 'link'
   | 'info'
   | 'success'

From 12512876483ae7c61a3f478d66a2407965a5de57 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 16:12:06 +1000
Subject: [PATCH 06/10] fix(checkbox): style

---
 components/interactables/Checkbox/Checkbox.less | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/interactables/Checkbox/Checkbox.less b/components/interactables/Checkbox/Checkbox.less
index 71d3840c59..8ea95f9efe 100644
--- a/components/interactables/Checkbox/Checkbox.less
+++ b/components/interactables/Checkbox/Checkbox.less
@@ -36,9 +36,5 @@
     appearance: none;
     width: 24px;
     height: 24px;
-
-    &:active {
-      // background-color: rgba(0, 0, 0, 0.1);
-    }
   }
 }

From 5ab323774054a60a16386de8bf386cdf933158f6 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 16:12:39 +1000
Subject: [PATCH 07/10] fix(userpicker): typo

---
 .../interactables/UserPicker/UserPicker.html  | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/components/interactables/UserPicker/UserPicker.html b/components/interactables/UserPicker/UserPicker.html
index 71bccd5458..7752419f5c 100644
--- a/components/interactables/UserPicker/UserPicker.html
+++ b/components/interactables/UserPicker/UserPicker.html
@@ -12,29 +12,5 @@
       :selected="isSelected(friend)"
       @click="toggle(friend)"
     />
-    <InteractablesUserPickerListItem
-      v-for="friend in filteredFriends"
-      :friend="friend"
-      :selected="isSelected(friend)"
-      @click="toggle(friend)"
-    />
-    <InteractablesUserPickerListItem
-      v-for="friend in filteredFriends"
-      :friend="friend"
-      :selected="isSelected(friend)"
-      @click="toggle(friend)"
-    />
-    <InteractablesUserPickerListItem
-      v-for="friend in filteredFriends"
-      :friend="friend"
-      :selected="isSelected(friend)"
-      @click="toggle(friend)"
-    />
-    <InteractablesUserPickerListItem
-      v-for="friend in filteredFriends"
-      :friend="friend"
-      :selected="isSelected(friend)"
-      @click="toggle(friend)"
-    />
   </UiScroll>
 </div>

From 4f28e900defcb7d44a3b7137d17c16b63baa84eb Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 16:19:46 +1000
Subject: [PATCH 08/10] fix(userpicker): types

---
 components/interactables/UserPicker/UserPicker.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/interactables/UserPicker/UserPicker.vue b/components/interactables/UserPicker/UserPicker.vue
index 748fe1930e..cd49743217 100644
--- a/components/interactables/UserPicker/UserPicker.vue
+++ b/components/interactables/UserPicker/UserPicker.vue
@@ -4,6 +4,7 @@
 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',
@@ -12,20 +13,21 @@ export default Vue.extend({
     filter: '',
   }),
   computed: {
-    ...mapState(['friends']),
-    filteredFriends() {
+    ...mapState({
+      friends: (state) => (state as RootState).friends.all,
+    }),
+    filteredFriends(): Friend[] {
       if (this.filter) {
         const filterLower = this.filter.toLowerCase()
-        return this.friends.all.filter((friend: Friend) => {
+        return this.friends.filter((friend: Friend) => {
           return friend.name.toLowerCase().includes(filterLower)
         })
       }
-      return this.friends.all
+      return this.friends
     },
   },
   watch: {
     selected() {
-      console.log('emit', this.selected)
       this.$emit('input', this.selected)
     },
   },

From 0d60c4cb4aeebe9f245ff436fafd16369a20a685 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Wed, 8 Jun 2022 16:24:12 +1000
Subject: [PATCH 09/10] style(userpicker): reverse guard clause

---
 components/interactables/UserPicker/UserPicker.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/interactables/UserPicker/UserPicker.vue b/components/interactables/UserPicker/UserPicker.vue
index cd49743217..8cd7754b04 100644
--- a/components/interactables/UserPicker/UserPicker.vue
+++ b/components/interactables/UserPicker/UserPicker.vue
@@ -17,13 +17,13 @@ export default Vue.extend({
       friends: (state) => (state as RootState).friends.all,
     }),
     filteredFriends(): Friend[] {
-      if (this.filter) {
-        const filterLower = this.filter.toLowerCase()
-        return this.friends.filter((friend: Friend) => {
-          return friend.name.toLowerCase().includes(filterLower)
-        })
+      if (!this.filter) {
+        return this.friends
       }
-      return this.friends
+      const filterLower = this.filter.toLowerCase()
+      return this.friends.filter((friend: Friend) => {
+        return friend.name.toLowerCase().includes(filterLower)
+      })
     },
   },
   watch: {

From 5aa484d1bf0a3b47d56e1531b3b7cde6eaf5a20c Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Thu, 9 Jun 2022 10:49:08 +1000
Subject: [PATCH 10/10] fix(group): remove z-index

---
 components/views/group/icon/GroupIcon.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/views/group/icon/GroupIcon.less b/components/views/group/icon/GroupIcon.less
index 7d52a8a1ad..c066ae9574 100644
--- a/components/views/group/icon/GroupIcon.less
+++ b/components/views/group/icon/GroupIcon.less
@@ -64,7 +64,6 @@
   }
 
   &.unread {
-    &:extend(.first-layer);
     position: relative;
 
     .label {