appview-less bluesky client
1<script lang="ts">
2 import { type FeedGenerator, fetchFeedGenerator } from '$lib/at/feeds';
3 import type { SavedFeed } from '$lib/settings';
4 import Icon from '@iconify/svelte';
5
6 interface Props {
7 style: string;
8 data: SavedFeed;
9 onRemove: () => void;
10 onTogglePin: () => void;
11 }
12
13 let { style, data, onRemove, onTogglePin }: Props = $props();
14
15 const feedData = $derived(data.feed);
16 const uri = $derived(feedData.uri);
17 const pinned = $derived(data.pinned);
18</script>
19
20<div {style} class="box-border w-full py-0.5">
21 <div
22 class="group flex items-center gap-2 rounded-sm bg-(--nucleus-fg)/5 px-2 py-1.5 transition-colors hover:bg-(--nucleus-fg)/10"
23 >
24 {#if feedData.avatar}
25 <img src={feedData.avatar} alt="" class="h-6 w-6 shrink-0 rounded-sm object-cover" />
26 {/if}
27 {#if feedData}
28 <span class="semibold flex-1 truncate text-sm">
29 {feedData.displayName}
30 </span>
31 {:else}
32 <span class="flex-1 truncate text-sm opacity-50">{uri.split('/').pop()}</span>
33 {/if}
34 <button
35 onclick={onTogglePin}
36 class="text-sm opacity-50 transition-opacity hover:opacity-100"
37 title={pinned ? 'unpin' : 'pin'}
38 >
39 <Icon
40 icon={pinned ? 'heroicons:star-solid' : 'heroicons:star'}
41 width="20"
42 class={pinned ? 'text-yellow-400' : ''}
43 />
44 </button>
45 <button
46 onclick={onRemove}
47 class="text-sm text-red-400 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-500"
48 >
49 <Icon icon="heroicons:x-mark-16-solid" width="24" />
50 </button>
51 </div>
52</div>