components/Avatar.vue

@@ -1,10 +1,9 @@
 <template>
-	<NuxtImg v-if="displayAvatar" 
+	<Icon v-if="canvasBlocked"
+		name="lucide:user" />
+	<NuxtImg v-else 
 		:src="displayAvatar"
 		:alt="displayName" />
-	<Icon v-else
-		name="lucide:user"
-		:alt="displayName" />
 </template>
 
 <script lang="ts" setup>
@@ -18,7 +17,8 @@ const props = defineProps<{
 
 
 let displayName: string
-let displayAvatar: string | null
+let displayAvatar: string
+let canvasBlocked = false
 
 const user = props.user || props.member?.user
 
@@ -29,10 +29,8 @@ if (user) {
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
-	} else if (!isCanvasBlocked()){
-		displayAvatar = generateDefaultIcon(displayName, user.uuid)
 	} else {
-		displayAvatar = null
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
 	}
 }
 

layouts/client.vue

@@ -18,17 +18,8 @@
 				<VerticalSpacer />
 				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-						<NuxtImg v-if="guild.icon"
-							class="sidebar-icon"
-							:alt="guild.name"
-							:src="guild.icon" />
-						<NuxtImg v-else-if="!blockedCanvas"
-							class="sidebar-icon"
-							:alt="guild.name"
-							:src="generateDefaultIcon(guild.name, guild.uuid)" />
-						<Icon v-else name="lucide:server"
-							class="`sidebar-icon ${generateIrcColor(guild.uuid, 50)}``"
-							:alt="guild.name" />
+						<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+						<NuxtImg v-else class="sidebar-icon" :src="generateDefaultIcon(guild.name, guild.uuid)" :alt="guild.name"/>
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
@@ -62,8 +53,6 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
-const blockedCanvas = isCanvasBlocked()
-
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");