144 lines
3.2 KiB
Svelte
144 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import type { StorageChat } from "#lib/api/types.js";
|
|
import Avatar from "#lib/components/ui/Avatar.svelte";
|
|
import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
|
|
import { formatBytes } from "#lib/format/media.js";
|
|
import { filesLabel, groupLabel } from "#lib/format/storage.js";
|
|
|
|
interface Props {
|
|
chat: StorageChat;
|
|
hasAvatar: boolean;
|
|
menu: Snippet;
|
|
onopen: () => void;
|
|
title: string;
|
|
weight: number;
|
|
}
|
|
|
|
let { chat, title, hasAvatar, weight, onopen, menu }: Props = $props();
|
|
|
|
const MIN_WEIGHT = 0.02;
|
|
const AVATAR_REM = 3;
|
|
|
|
const scale = $derived(Math.max(MIN_WEIGHT, Math.min(1, weight)));
|
|
const parts = $derived(chat.groups.filter((item) => item.bytes > 0));
|
|
const makeup = $derived(
|
|
parts
|
|
.map((item) => `${groupLabel(item.group)}: ${formatBytes(item.bytes)}`)
|
|
.join(", ")
|
|
);
|
|
</script>
|
|
|
|
<ContextMenu {menu}>
|
|
{#snippet children({
|
|
props,
|
|
})}
|
|
<button {...props} class="row" onclick={onopen} type="button">
|
|
<Avatar
|
|
avatar={{ id: chat.chat_id, kind: chat.chat_id > 0 ? "peer" : "chat" }}
|
|
colorKey={chat.chat_id}
|
|
{hasAvatar}
|
|
name={title}
|
|
size={AVATAR_REM}
|
|
/>
|
|
<span class="text">
|
|
<span class="name">{title}</span>
|
|
<span class="sub">{filesLabel(chat.files)}</span>
|
|
</span>
|
|
<span class="size">{formatBytes(chat.bytes)}</span>
|
|
<span class="weight" title={makeup}>
|
|
<span class="fill" style:width="{scale * 100}%">
|
|
{#each parts as part (part.group)}
|
|
<span
|
|
style:background-color="var(--color-storage-{part.group})"
|
|
style:flex-grow={part.bytes}
|
|
></span>
|
|
{/each}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
{/snippet}
|
|
</ContextMenu>
|
|
|
|
<style lang="scss">
|
|
.row {
|
|
cursor: pointer;
|
|
|
|
display: grid;
|
|
grid-template-columns: 3rem minmax(0, 1fr) auto;
|
|
column-gap: 0.75rem;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
padding: 0.5rem 1rem 0.625rem;
|
|
border: 0;
|
|
|
|
font: inherit;
|
|
color: var(--color-text);
|
|
text-align: start;
|
|
|
|
background: none;
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.name {
|
|
overflow: hidden;
|
|
font-size: 0.9375rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sub {
|
|
margin-top: 0.125rem;
|
|
font-size: 0.8125rem;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.size {
|
|
font-size: 0.9375rem;
|
|
font-weight: var(--font-weight-medium);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.weight {
|
|
grid-column: 2 / 4;
|
|
|
|
height: 0.1875rem;
|
|
margin-top: 0.4375rem;
|
|
border-radius: 0.125rem;
|
|
|
|
background-color: rgba(var(--color-text-secondary-rgb), 0.16);
|
|
}
|
|
|
|
.fill {
|
|
overflow: hidden;
|
|
display: flex;
|
|
gap: 2px;
|
|
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
|
|
span {
|
|
min-width: 2px;
|
|
}
|
|
}
|
|
</style>
|