feat: implement base for team name and avatar loading (use fixtures for now)

Author: valeriansaliou

public/images/components/base/BaseServerLogo/logo-prose-org-local.png

@@ -20,6 +20,7 @@ div(
 )
   sidebar-header(
     @add-contact="onAddContact"
+    :jid="selfJID"
     :translucent="runtimeTranslucent"
     :class=`[
       "a-app-sidebar__header",

public/images/components/base/BaseServerLogo/logo-prose-org.png

@@ -128,6 +128,18 @@ class BrokerDelegate implements ProseClientDelegate {
     logger.info("Account information changed");
 
     await Store.$account.loadInformation(true);
+
+    // TODO: REMOVE THIS ONE! USED FOR DEBUG ONLY, WE NEED A PROPER DELEGATE \
+    //   EVENT!!
+    this.teamInfoChanged();
+  }
+
+  async teamInfoChanged(): Promise<void> {
+    // TODO: this delegate event does NOT YET exist, it WILL BE implemented.
+
+    logger.info("Team information changed");
+
+    await Store.$account.loadTeam(true);
   }
 
   async messagesAppended(

src/assemblies/app/AppSidebar.vue

@@ -9,16 +9,13 @@
      ********************************************************************** -->
 
 <template lang="pug">
-div(
-  :class=`[
-    "c-base-server-logo",
-    "c-base-server-logo--shadow-" + shadow
-  ]`
-  :style=`{
-    backgroundImage: backgroundImage,
-    height: size,
-    width: size
-  }`
+base-avatar(
+  :jid="jid"
+  :name="name"
+  :size="size"
+  :shadow="shadow"
+  class="c-base-server-logo"
+  circle
 )
 </template>
 
@@ -27,13 +24,22 @@ div(
      ********************************************************************** -->
 
 <script lang="ts">
+// NPM
+import { PropType } from "vue";
+import { JID } from "@prose-im/prose-sdk-js";
+
 export default {
   name: "BaseServerLogo",
 
   props: {
-    domain: {
+    jid: {
+      type: Object as PropType<JID>,
+      default: null
+    },
+
+    name: {
       type: String,
-      required: true
+      default: null
     },
 
     size: {
@@ -49,46 +55,6 @@ export default {
         return ["none", "normal"].includes(x);
       }
     }
-  },
-
-  computed: {
-    logoImageUrl(): string {
-      // TODO: acquire from cache using provided domain, this is only a \
-      //   temporary fixture
-      const handle = this.domain.replaceAll(".", "-");
-
-      return [
-        "/images/components/base/BaseServerLogo",
-        `logo-${handle}.png`
-      ].join("/");
-    },
-
-    backgroundImage(): string {
-      return `url("${this.logoImageUrl}")`;
-    }
   }
 };
 </script>
-
-<!-- **********************************************************************
-     STYLE
-     ********************************************************************** -->
-
-<style lang="scss">
-$c: ".c-base-server-logo";
-
-#{$c} {
-  background-color: rgb(var(--color-base-grey-light));
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: inline-block;
-  border-radius: 100%;
-
-  // --> SHADOWS <--
-
-  &--shadow-normal {
-    box-shadow: 0 2px 4px 0 rgba(var(--color-shadow-primary), 0.08);
-  }
-}
-</style>

src/broker/delegate.ts

@@ -41,7 +41,7 @@
         )
 
       template(
-        v-if="this.session.connected"
+        v-if="session.connected"
         v-slot:presence
       )
         base-presence(
@@ -409,7 +409,7 @@ export default {
 
           properties: {
             type: "server",
-            name: this.teamName,
+            name: this.teamNameOrDomain,
             address: this.teamDomain
           }
         },
@@ -421,7 +421,7 @@ export default {
           children: [
             {
               type: PopoverItemType.Button,
-              label: this.teamName,
+              label: this.teamNameOrDomain,
               click: this.onActionsPopoverSwitchTeamClick
             }
           ]
@@ -443,8 +443,8 @@ export default {
       return this.jid.domain;
     },
 
-    teamName(): string {
-      return `@${this.teamDomain}`;
+    teamNameOrDomain(): string {
+      return Store.$account.getTeamName() || this.teamDomain;
     },
 
     localAvailability(): ReturnType<

src/components/base/BaseServerLogo.vue

@@ -19,7 +19,8 @@
 
   base-server-logo(
     v-else-if="type === 'server'"
-    :domain="address"
+    :jid="addressJID"
+    :name="name"
     size="30px"
     class="c-sidebar-context-account__avatar"
   )

src/components/sidebar/SidebarContext.vue

@@ -27,9 +27,10 @@ div(
     )
       base-server-logo(
         @click="onIdentityLogoClick"
-        class="c-sidebar-header__identity-logo"
-        domain="prose.org"
+        :jid="teamDomainJID"
+        :name="teamName"
         size="30px"
+        class="c-sidebar-header__identity-logo"
       )
 
     base-popover-list(
@@ -62,6 +63,13 @@ div(
      ********************************************************************** -->
 
 <script lang="ts">
+// NPM
+import { PropType } from "vue";
+import { JID } from "@prose-im/prose-sdk-js";
+
+// PROJECT: STORES
+import Store from "@/store";
+
 // PROJECT: COMPONENTS
 import {
   Item as PopoverItem,
@@ -78,6 +86,11 @@ export default {
   name: "SidebarHeader",
 
   props: {
+    jid: {
+      type: Object as PropType<JID>,
+      required: true
+    },
+
     translucent: {
       type: Boolean,
       default: false
@@ -111,17 +124,6 @@ export default {
           type: PopoverItemType.Button,
           label: "Create a channel",
           click: this.onIdentityPopoverCreateChannelClick
-        },
-
-        {
-          type: PopoverItemType.Divider
-        },
-
-        {
-          type: PopoverItemType.Button,
-          label: "Manage server",
-          emphasis: true,
-          disabled: true
         }
       ];
     },
@@ -131,6 +133,14 @@ export default {
         "ctrl+n": this.onHotkeyControlN,
         "command+n": this.onHotkeyControlN
       };
+    },
+
+    teamDomainJID(): JID {
+      return new JID(this.jid.domain);
+    },
+
+    teamName(): string {
+      return Store.$account.getTeamName();
     }
   },
 

src/components/sidebar/SidebarContextAccount.vue

@@ -43,14 +43,20 @@ interface Account {
     name: string;
     availability: Availability;
   };
+
+  team: {
+    name: string;
+    accent: string;
+  };
 }
 
 /**************************************************************************
  * CONSTANTS
  * ************************************************************************* */
 
 const LOCAL_STATES = {
-  informationLoaded: false
+  informationLoaded: false,
+  teamLoaded: false
 };
 
 const INFORMATION_AVAILABILITY_DEFAULT = Availability.Available;
@@ -78,6 +84,11 @@ const $account = defineStore("account", {
         jid: "",
         name: "",
         availability: INFORMATION_AVAILABILITY_DEFAULT
+      },
+
+      team: {
+        name: "",
+        accent: ""
       }
     };
   },
@@ -114,6 +125,18 @@ const $account = defineStore("account", {
       return (): Availability => {
         return this.information.availability;
       };
+    },
+
+    getTeamName: function () {
+      return (): string => {
+        return this.team.name;
+      };
+    },
+
+    getTeamAccent: function () {
+      return (): string => {
+        return this.team.accent;
+      };
     }
   },
 
@@ -188,6 +211,10 @@ const $account = defineStore("account", {
         state.information.jid = "";
         state.information.name = "";
         state.information.availability = INFORMATION_AVAILABILITY_DEFAULT;
+
+        // Clear team
+        state.team.name = "";
+        state.team.accent = "";
       });
     },
 
@@ -235,6 +262,35 @@ const $account = defineStore("account", {
       }
     },
 
+    async loadTeam(reload = false): Promise<void> {
+      // Load team? (or reload)
+      if (LOCAL_STATES.teamLoaded === false || reload === true) {
+        // Load team information
+        // TODO: load, remove those fixtures!
+        const teamInfo = await Promise.resolve({
+          domain: "prose.org.local",
+          name: "Prose Dev",
+          accent: "#1f1e25",
+          avatar: undefined
+        });
+
+        if (teamInfo) {
+          // Update stored team information
+          this.setTeamName(teamInfo.name);
+          this.setTeamAccent(teamInfo.accent);
+
+          // Update team avatar
+          // Notice: this is a cross-store operation, for convenience.
+          if (teamInfo.avatar !== undefined) {
+            Store.$avatar.refresh(teamInfo.domain, teamInfo.avatar);
+          }
+        }
+
+        // Mark as loaded
+        LOCAL_STATES.teamLoaded = true;
+      }
+    },
+
     setCredentialsPassword(password: string): void {
       this.$patch(() => {
         this.credentials.password = password;
@@ -257,6 +313,18 @@ const $account = defineStore("account", {
       this.$patch(() => {
         this.information.availability = availability;
       });
+    },
+
+    setTeamName(name: string): void {
+      this.$patch(() => {
+        this.team.name = name;
+      });
+    },
+
+    setTeamAccent(accent: string): void {
+      this.$patch(() => {
+        this.team.accent = accent;
+      });
     }
   }
 });