|
| 1 | +<script lang="ts"> |
| 2 | +import { editBookmarkStore } from '$lib/stores/edit-bookmark.store'; |
| 3 | +import { importBookmarkStore } from '$lib/stores/import-bookmarks.store'; |
| 4 | +import { createSlug } from '$lib/utils/create-slug'; |
| 5 | +import { |
| 6 | + IconCircleDashedCheck, |
| 7 | + IconExclamationCircle, |
| 8 | + IconPhotoX, |
| 9 | + IconStopwatch |
| 10 | +} from '@tabler/icons-svelte'; |
| 11 | +
|
| 12 | +export let id: number; |
| 13 | +export let selected = false; |
| 14 | +export let icon: string | null; |
| 15 | +export let url: string; |
| 16 | +export let title: string; |
| 17 | +export let category: { |
| 18 | + id?: number; |
| 19 | + name: string; |
| 20 | +}; |
| 21 | +export let isLoading: boolean; |
| 22 | +export let metadataFetched: boolean; |
| 23 | +export let metadata: any; |
| 24 | +
|
| 25 | +let urlObj = new URL(url); |
| 26 | +
|
| 27 | +const onEditItem = () => { |
| 28 | + editBookmarkStore.set({ |
| 29 | + ...metadata, |
| 30 | + category: { |
| 31 | + id: category.id, |
| 32 | + name: category.name |
| 33 | + } |
| 34 | + }); |
| 35 | +}; |
| 36 | +
|
| 37 | +const onRemoveItem = () => { |
| 38 | + importBookmarkStore.removeItem(id); |
| 39 | +}; |
| 40 | +</script> |
| 41 | + |
| 42 | +<tr> |
| 43 | + <th> |
| 44 | + <label> |
| 45 | + <input |
| 46 | + type="checkbox" |
| 47 | + class="checkbox" |
| 48 | + bind:checked={selected} |
| 49 | + on:change={() => importBookmarkStore.toggleSelectionForItem(id)} /> |
| 50 | + </label> |
| 51 | + </th> |
| 52 | + <td> |
| 53 | + <div class="flex flex-col gap-1"> |
| 54 | + <div class="flex items-center gap-3"> |
| 55 | + <div class="avatar"> |
| 56 | + <div class="mask mask-squircle h-12 w-12"> |
| 57 | + {#if icon} |
| 58 | + <img src={icon} alt="Icon" /> |
| 59 | + {:else} |
| 60 | + <IconPhotoX class="m-2 h-8 w-8 opacity-80" /> |
| 61 | + {/if} |
| 62 | + </div> |
| 63 | + </div> |
| 64 | + <div class="max-w-lg"> |
| 65 | + <div class="tooltip" data-tip={url}> |
| 66 | + <a href={url} target="_blank" class="font-bold"> |
| 67 | + {urlObj.pathname !== '/' |
| 68 | + ? `${urlObj.hostname}/.../${urlObj.pathname.slice(-5)}` |
| 69 | + : urlObj.hostname} |
| 70 | + </a> |
| 71 | + </div> |
| 72 | + <div class="flex items-center gap-1 text-sm tracking-tight text-secondary"> |
| 73 | + {new URL(url).hostname.replace(/^www\./, '')} |
| 74 | + {#if metadataFetched} |
| 75 | + <div class="tooltip" data-tip="Metadata fetched"> |
| 76 | + <IconCircleDashedCheck class="h-4 w-4 text-success" /> |
| 77 | + </div> |
| 78 | + {:else if isLoading} |
| 79 | + <div class="tooltip" data-tip="Loading metadata"> |
| 80 | + <IconStopwatch class="h-4 w-4 text-warning" /> |
| 81 | + </div> |
| 82 | + {:else} |
| 83 | + <div class="tooltip" data-tip="Failed to fetch metadata"> |
| 84 | + <IconExclamationCircle class="h-4 w-4 text-error" /> |
| 85 | + </div> |
| 86 | + {/if} |
| 87 | + </div> |
| 88 | + </div> |
| 89 | + </div> |
| 90 | + <div class="ml-2 flex gap-1 text-sm"> |
| 91 | + {#if metadata?.bookmarkTags?.length} |
| 92 | + <span class="font-sans text-xs">Tags: </span> |
| 93 | + {/if} |
| 94 | + {#each metadata?.bookmarkTags || [] as tag (tag.value)} |
| 95 | + <a href={`/tags/${createSlug(tag.value)}`} class="link font-sans text-xs">{tag.value}</a> |
| 96 | + {/each} |
| 97 | + </div> |
| 98 | + </div> |
| 99 | + </td> |
| 100 | + <td class="max-w-xs"> |
| 101 | + <div class="tooltip" data-tip={title}> |
| 102 | + <span title={title} class="line-clamp-2">{title}</span> |
| 103 | + </div> |
| 104 | + </td> |
| 105 | + <td |
| 106 | + ><a |
| 107 | + class="link hover:link-secondary" |
| 108 | + href={`/categories/${createSlug(category.name)}`} |
| 109 | + target="_blank">{category.name}</a |
| 110 | + ></td> |
| 111 | + <th> |
| 112 | + <button class="btn btn-ghost btn-xs text-secondary" on:click|preventDefault={onEditItem} |
| 113 | + >edit</button> |
| 114 | + <button class="btn btn-ghost btn-xs text-error" on:click|preventDefault={onRemoveItem} |
| 115 | + >remove</button> |
| 116 | + </th> |
| 117 | +</tr> |
0 commit comments