coasys · leifriksheim · Feb 2, 2023
diff --git a/app/src/containers/Profile.vue b/app/src/containers/Profile.vue
@@ -19,36 +19,38 @@
     </j-text>
     <j-text color="ui-500"> @{{ profile.username }}</j-text>
     <j-text v-if="profile.bio" size="400"> {{ profile.bio }}</j-text>
-    <j-button variant="link" @click="() => $emit('openCompleteProfile')">
+    <j-box>
+      <j-button size="sm" variant="primary" v-if="!sameAgent">
+        <j-icon
+          slot="start"
+          size="sm"
+          :name="isFriend ? 'person-dash-fill' : 'person-plus-fill'"
+        ></j-icon>
+        {{ isFriend ? "Remove friend" : "Hello" }}
+      </j-button>
+    </j-box>
+    <j-button full variant="link" @click="() => $emit('openCompleteProfile')">
       View full profile
     </j-button>
   </j-box>
-  <j-box p="800" v-else>
-    <j-flex a="center" direction="column" gap="500">
-      <j-skeleton variant="circle" width="xxl" height="xxl" />
-      <j-skeleton width="xxl" height="text" />
-      <j-skeleton width="xxl" height="text" />
-      <j-button
-        disabled
-        variant="link"
-        @click="() => $emit('openCompleteProfile')"
-      >
-        View full profile
-      </j-button>
-    </j-flex>
-  </j-box>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { Profile } from "utils/types";
 import getProfile from "utils/api/getProfile";
 import Avatar from "@/components/avatar/Avatar.vue";
+import { useUserStore } from "@/store/user";
 
 export default defineComponent({
   components: { Avatar },
   props: ["did", "langAddress"],
   emits: ["openCompleteProfile"],
+  setup() {
+    return {
+      userStore: useUserStore(),
+    };
+  },
   data() {
     return {
       profile: null as null | Profile,
@@ -66,6 +68,14 @@ export default defineComponent({
       immediate: true,
     },
   },
+  computed: {
+    sameAgent() {
+      return this.userStore.agent.did === this.did;
+    },
+    isFriend() {
+      return this.userStore.friends.includes(this.did);
+    },
+  },
 });
 </script>
 

diff --git a/app/src/router/index.ts b/app/src/router/index.ts
@@ -27,6 +27,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "home",
         component: () => import(`@/views/profile/ProfileView.vue`),
       },
+      {
+        path: "dm",
+        name: "dm",
+        component: () => import(`@/views/dm/DmView.vue`),
+      },
       {
         path: "communities/:communityId",
         name: "community",

diff --git a/app/src/store/types/userprofile.ts b/app/src/store/types/userprofile.ts
@@ -3,6 +3,7 @@ import type { AgentStatus } from "@perspect3vism/ad4m";
 import { Profile } from "utils/types";
 
 export interface UserState {
+  friends: string[];
   agent: AgentStatus;
   profile: Profile | null;
   agentProfileProxyPerspectiveId?: string;

diff --git a/app/src/store/user/actions/addFriend.ts b/app/src/store/user/actions/addFriend.ts
@@ -0,0 +1,29 @@
+import { useAppStore } from "@/store/app";
+import { useDataStore } from "../../data";
+import { addFriend } from "utils/api/friends";
+import { useUserStore } from "..";
+
+export interface Payload {
+  did: string;
+}
+
+export default async (payload: Payload): Promise<any> => {
+  const dataStore = useDataStore();
+  const appStore = useAppStore();
+  const userStore = useUserStore();
+
+  try {
+    await addFriend(payload.did);
+
+    const newFriends = userStore.friends.includes(payload.did)
+      ? userStore.friends
+      : [...userStore.friends, payload.did];
+
+    userStore.setFriends(newFriends);
+  } catch (e) {
+    appStore.showDangerToast({
+      message: e.message,
+    });
+    throw new Error(e);
+  }
+};
diff --git a/app/src/store/user/actions/getFriends.ts b/app/src/store/user/actions/getFriends.ts
@@ -0,0 +1,19 @@
+import { useAppStore } from "@/store/app";
+import { useDataStore } from "../../data";
+import { getFriends } from "utils/api/friends";
+import { useUserStore } from "..";
+
+export default async (): Promise<any> => {
+  const userStore = useUserStore();
+  const appStore = useAppStore();
+
+  try {
+    const friends = await getFriends();
+    userStore.setFriends(friends);
+  } catch (e) {
+    appStore.showDangerToast({
+      message: e.message,
+    });
+    throw new Error(e);
+  }
+};
diff --git a/app/src/store/user/actions/index.ts b/app/src/store/user/actions/index.ts
@@ -1,8 +1,14 @@
 import logIn from "./logIn";
 import updateProfile from "./updateProfile";
 import createUser from "./createUser";
+import addFriend from "../actions/addFriend";
+import getFriends from "../actions/getFriends";
+import removeFriend from "./removeFriend";
 
 export default {
+  addFriend,
+  getFriends,
+  removeFriend,
   logIn,
   createUser,
   updateProfile,

diff --git a/app/src/store/user/actions/removeFriend.ts b/app/src/store/user/actions/removeFriend.ts
@@ -0,0 +1,29 @@
+import { useAppStore } from "@/store/app";
+import { useDataStore } from "../../data";
+import { removeFriend } from "utils/api/friends";
+import { useUserStore } from "..";
+
+export interface Payload {
+  did: string;
+}
+
+export default async (payload: Payload): Promise<any> => {
+  const dataStore = useDataStore();
+  const userStore = useUserStore();
+  const appStore = useAppStore();
+
+  try {
+    await removeFriend(payload.did);
+
+    const filteredFriends = userStore.friends.filter(
+      (did) => did !== payload.did
+    );
+
+    userStore.setFriends(filteredFriends);
+  } catch (e) {
+    appStore.showDangerToast({
+      message: e.message,
+    });
+    throw new Error(e);
+  }
+};
diff --git a/app/src/store/user/index.ts b/app/src/store/user/index.ts
@@ -8,12 +8,13 @@ export const useUserStore = defineStore("user", {
   state(): UserState {
     return {
       profile: null,
+      friends: [],
       agent: {
         isInitialized: false,
         isUnlocked: false,
         did: "",
         didDocument: "",
-      }
+      },
     };
   },
   getters,

diff --git a/app/src/store/user/mutations/index.ts b/app/src/store/user/mutations/index.ts
@@ -16,5 +16,10 @@ export default {
   setUserProfile(payload: Profile): void {
     const store = useUserStore();
     store.profile = payload;
-  }
+  },
+
+  setFriends(payload: string[]) {
+    const store = useUserStore();
+    store.friends = payload;
+  },
 };
diff --git a/app/src/views/dm/DmView.vue b/app/src/views/dm/DmView.vue
@@ -0,0 +1,41 @@
+<template>
+  <sidebar-layout>
+    <template v-slot:sidebar>
+      hello
+      <j-box pt="500" pb="800">
+        <j-menu-item v-for="did in friends">
+          <Avatar size="xs" :did="did"></Avatar>
+        </j-menu-item>
+      </j-box>
+    </template>
+
+    <div>Hello</div>
+  </sidebar-layout>
+</template>
+
+<script lang="ts">
+import Avatar from "@/components/avatar/Avatar.vue";
+import SidebarLayout from "@/layout/SidebarLayout.vue";
+import { useUserStore } from "@/store/user";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "DmView",
+  components: {
+    SidebarLayout,
+    Avatar,
+  },
+  setup() {
+    return {
+      userStore: useUserStore(),
+    };
+  },
+  computed: {
+    friends() {
+      return this.userStore.friends;
+    },
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/app/src/views/main/main-sidebar/CommunitiesList.vue b/app/src/views/main/main-sidebar/CommunitiesList.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="left-nav__communities-list">
+    <Avatar
+      slot="trigger"
+      class="left-nav__community-item"
+      :selected="$route.name === 'dm'"
+      icon="chat"
+      @click="() => $router.push({ name: 'dm' })"
+    ></Avatar>
+
     <j-tooltip
       v-for="community in communities"
       :key="community.state.perspectiveUuid"

diff --git a/app/src/views/profile/ProfileView.vue b/app/src/views/profile/ProfileView.vue
@@ -14,6 +14,7 @@
               :hash="did"
               :url="profile?.profilePicture"
             ></Avatar>
+
             <j-button
               v-if="sameAgent"
               variant="ghost"
@@ -39,6 +40,16 @@
               {{ profile.bio || "No bio yet" }}
             </j-text>
           </j-box>
+          <j-box pt="400" v-if="!sameAgent">
+            <j-button size="sm" variant="primary" @click="toggleFriend">
+              <j-icon
+                slot="start"
+                size="sm"
+                :name="isFriend ? 'person-dash-fill' : 'person-plus-fill'"
+              ></j-icon>
+              {{ isFriend ? "Remove friend" : "Add friend" }}
+            </j-button>
+          </j-box>
         </div>
 
         <div class="profile__content">
@@ -62,7 +73,7 @@
 
           <j-box my="500" v-if="sameAgent">
             <j-tabs
-              @change="(e: any) => (currentTab = e.target.value)"
+              @change="(e) => (currentTab = e.target.value)"
               :value="currentTab"
             >
               <j-tab-item value="communities">
@@ -133,7 +144,7 @@
     v-if="showAddlinkModal"
     size="sm"
     :open="showAddlinkModal"
-    @toggle="(e: any) => setAddLinkModal(e.target.open)"
+    @toggle="(e) => setAddLinkModal(e.target.open)"
   >
     <WebLinkAdd
       @cancel="() => setAddLinkModal(false)"
@@ -145,7 +156,7 @@
     v-if="showJoinCommunityModal"
     size="lg"
     :open="showJoinCommunityModal"
-    @toggle="(e: any) => setShowJoinCommunityModal(e.target.open)"
+    @toggle="(e) => setShowJoinCommunityModal(e.target.open)"
   >
     <ProfileJoinLink
       @submit="() => setShowJoinCommunityModal(false)"
@@ -156,7 +167,7 @@
   <j-modal
     v-if="modals.showEditProfile"
     :open="modals.showEditProfile"
-    @toggle="(e: any) => setShowEditProfile(e.target.open)"
+    @toggle="(e) => setShowEditProfile(e.target.open)"
   >
     <edit-profile
       @submit="() => setShowEditProfile(false)"
@@ -196,13 +207,10 @@ export default defineComponent({
     Avatar,
   },
   setup() {
-    const appStore = useAppStore();
-    const dataStore = useDataStore();
-    const userStore = useUserStore();
     return {
-      appStore,
-      dataStore,
-      userStore,
+      appStore: useAppStore(),
+      dataStore: useDataStore(),
+      userStore: useUserStore(),
     };
   },
   data() {
@@ -218,6 +226,9 @@ export default defineComponent({
       editArea: null as any,
     };
   },
+  async created() {
+    this.userStore.getFriends();
+  },
   beforeCreate() {
     this.appStore.changeCurrentTheme("global");
   },
@@ -229,6 +240,13 @@ export default defineComponent({
         this.profile = await getProfile(this.did);
       }
     },
+    async toggleFriend() {
+      if (this.isFriend) {
+        await this.userStore.removeFriend({ did: this.did });
+      } else {
+        await this.userStore.addFriend({ did: this.did });
+      }
+    },
     setAddLinkModal(value: boolean): void {
       this.showAddlinkModal = value;
     },
@@ -287,6 +305,12 @@ export default defineComponent({
     },
   },
   computed: {
+    isFriend(): boolean {
+      return !!this.friends.find((did) => this.did === did);
+    },
+    friends() {
+      return this.userStore.friends;
+    },
     hasHistory() {
       return this.$router.options.history.state.back;
     },

diff --git a/packages/components/src/components/avatar/Avatar.ts b/packages/components/src/components/avatar/Avatar.ts
@@ -69,7 +69,7 @@ const styles = css`
   }
 
   [part="icon"] {
-    --j-icon-size: calc(var(--j-avatar-size) * 0.6);
+    --j-icon-size: calc(var(--j-avatar-size) * 0.4);
   }
 
   [part="img"] {