appview-less bluesky client
show feed avatar / icon in selector trigger aswell
+29
-15
+29
-15
src/components/FeedSelector.svelte
+29
-15
src/components/FeedSelector.svelte
···
39
39
const selectedName = $derived(selectedFeed === null ? 'replies' : getDisplayName(selectedFeed));
40
40
</script>
41
41
42
+
{#snippet feedIcon({
43
+
avatar,
44
+
replies,
45
+
following
46
+
}: {
47
+
avatar?: string;
48
+
replies?: boolean;
49
+
following?: boolean;
50
+
})}
51
+
{#if replies}
52
+
<Icon icon="heroicons:chat-bubble-left-ellipsis-16-solid" width="20" />
53
+
{:else if following}
54
+
<Icon icon="heroicons:users-solid" width="20" />
55
+
{:else if avatar}
56
+
<img src={avatar} alt="" class="h-5 w-5 shrink-0 rounded-sm object-cover" />
57
+
{:else}
58
+
<Icon icon="heroicons:rss" width="20" />
59
+
{/if}
60
+
{/snippet}
61
+
42
62
<Dropdown
43
63
class="min-w-48 rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg) shadow-2xl"
44
64
bind:isOpen
···
47
67
{#snippet trigger()}
48
68
<button
49
69
onclick={() => (isOpen = !isOpen)}
50
-
class="flex action-button items-center gap-1.5 text-sm hover:scale-102!"
70
+
class="flex action-button items-center gap-1.5 p-2 text-sm hover:scale-102!"
51
71
>
52
-
<Icon icon="heroicons:list-bullet" width="20" />
72
+
{@render feedIcon({
73
+
replies: selectedFeed === null,
74
+
following: selectedFeed === 'following',
75
+
avatar: selectedFeed ? feedMeta.get(selectedFeed)?.avatar : undefined
76
+
})}
53
77
<span>{selectedName}</span>
54
78
<span class="opacity-50">▾</span>
55
79
</button>
···
65
89
? 'bg-(--nucleus-accent)/20'
66
90
: ''}"
67
91
>
68
-
<Icon icon="heroicons:chat-bubble-left-ellipsis-16-solid" width="20" />
92
+
{@render feedIcon({ replies: true })}
69
93
<span>replies</span>
70
94
</button>
71
95
<button
···
78
102
? 'bg-(--nucleus-accent)/20'
79
103
: ''}"
80
104
>
81
-
<Icon icon="heroicons:users-solid" width="20" />
105
+
{@render feedIcon({ following: true })}
82
106
<span>following</span>
83
107
</button>
84
108
{#each sortedFeeds as savedFeed (savedFeed.feed.uri)}
···
92
116
? 'bg-(--nucleus-accent)/20'
93
117
: ''}"
94
118
>
95
-
{#if savedFeed.feed.avatar}
96
-
<img
97
-
src={savedFeed.feed.avatar}
98
-
alt=""
99
-
class="h-5 w-5 shrink-0 rounded-sm object-cover"
100
-
/>
101
-
{:else if savedFeed.pinned}
102
-
<Icon icon="heroicons:star-solid" width="20" class="text-yellow-400" />
103
-
{:else}
104
-
<Icon icon="heroicons:rss" width="20" />
105
-
{/if}
119
+
{@render feedIcon({ avatar: savedFeed.feed.avatar })}
106
120
<span class="truncate">{savedFeed.feed.displayName}</span>
107
121
</button>
108
122
{/each}