beavergram/frontend/src/lib/components/disk/StorageRow.svelte

<script lang="ts">
  import type { Snippet } from "svelte";
  import StorageThumb from "#lib/components/disk/StorageThumb.svelte";
  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
  import Icon from "#lib/components/ui/Icon.svelte";
  import { formatBytes } from "#lib/format/media.js";
  import { groupOf } from "#lib/format/storage.js";

  interface Props {
    fileName: string;
    kind: string;
    lead?: string;
    menu: Snippet;
    mime: string | null;
    note?: string;
    onopen: () => void;
    ontoggle: () => void;
    refetchable: boolean;
    selected: boolean;
    size: number | null;
    src: string;
    sub: string;
    tail?: string;
    weight: number;
  }

  let {
    fileName,
    kind,
    mime,
    src,
    lead,
    sub,
    tail,
    note,
    size,
    weight,
    refetchable,
    selected,
    onopen,
    ontoggle,
    menu,
  }: Props = $props();

  const MIN_WEIGHT = 0.02;

  const scale = $derived(Math.max(MIN_WEIGHT, Math.min(1, weight)));
</script>

<div
  class="row"
  style:--group="var(--color-storage-{groupOf(kind)})"
  class:selected
>
  <span class="check">
    <input
      aria-label="Выбрать {fileName}"
      checked={selected}
      onchange={ontoggle}
      type="checkbox"
    >
    <span class="circle"><Icon name="check" size="0.875rem" /></span>
  </span>
  <ContextMenu {menu}>
    {#snippet children({
      props,
    })}
      <button {...props} class="main" onclick={onopen} type="button">
        <StorageThumb {fileName} {kind} {mime} {src} />
        <span class="text">
          <span class="name">{fileName}</span>
          <span class="sub">
            {#if lead}
              <span class="rigid">{`${lead} · `}</span>
            {/if}
            <span class="fluid">{sub}</span>
            {#if tail}
              <span class="rigid">{` · ${tail}`}</span>
            {/if}
          </span>
          {#if note}
            <span class="note">{note}</span>
          {/if}
          {#if !refetchable}
            <span class="gone">Не скачать заново</span>
          {/if}
        </span>
        <span class="size">{formatBytes(size)}</span>
        <span class="weight"><span style:--scale={scale}></span></span>
      </button>
    {/snippet}
  </ContextMenu>
</div>

<style lang="scss">
  .row {
    display: flex;
    align-items: center;
    padding-left: 0.4375rem;

    &.selected {
      background-color: var(--color-chat-hover);
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-chat-hover);
      }
    }
  }

  .check {
    cursor: pointer;
    position: relative;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    align-self: stretch;
    width: 2.5rem;
    min-height: 2.5rem;

    input {
      cursor: pointer;
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;
      margin: 0;

      opacity: 0;
    }
  }

  .circle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid var(--color-borders-input);
    border-radius: 50%;

    color: transparent;

    transition:
      background-color 0.15s ease-out,
      border-color 0.15s ease-out;

    input:checked + & {
      border-color: var(--color-primary);
      color: var(--color-white);
      background-color: var(--color-primary);
    }

    input:focus-visible + & {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  .main {
    cursor: pointer;

    display: grid;
    flex: 1;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;

    min-width: 0;
    padding: 0.5rem 1rem 0.625rem 0.3125rem;
    border: 0;

    font: inherit;
    color: var(--color-text);
    text-align: start;

    background: none;

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
  }

  .text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .name,
  .fluid {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sub {
    display: flex;
    min-width: 0;
  }

  .rigid {
    flex-shrink: 0;
    white-space: pre;
  }

  .name {
    font-size: 0.9375rem;
  }

  .sub,
  .note,
  .gone {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
  }

  .gone {
    color: var(--color-storage-warning);
  }

  .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);

    span {
      transform: scaleX(var(--scale));
      transform-origin: 0 50%;

      display: block;

      height: 100%;
      border-radius: inherit;

      background-color: var(--group);

      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
  }
</style>