Function AssetTabView

packages/app-core/src/components/EditorPane.tsx:3486–3554

({
  tabPath,
  vaultRoot
}: {
  tabPath: string
  vaultRoot: string | null
})

}

function AssetTabView({
  tabPath,
  vaultRoot
}: {
  tabPath: string
  vaultRoot: string | null
}): JSX.Element {
  const assetPath = assetPathFromTab(tabPath)
  const title = assetTitleFromPath(assetPath)
  const assetUrl =
    assetPath && vaultRoot ? window.zen.resolveVaultAssetUrl(vaultRoot, assetPath) : null
  const assetKind = assetPath ? classifyLocalAssetHref(assetPath) ?? 'file' : 'file'
  const canReveal =
    !!assetPath &&
    window.zen.getAppInfo().runtime === 'desktop' &&
    useStore.getState().workspaceMode !== 'remote'

  const body = !assetPath || !assetUrl ? (
    <div className="flex min-h-0 flex-1 items-center justify-center text-sm text-ink-400">
      Couldn't resolve asset path.
    </div>
  ) : assetKind === 'image' ? (
    <div className="flex min-h-0 min-w-0 flex-1 items-center justify-center overflow-auto bg-black/5 p-6">
      <img
        src={assetUrl}
        alt={title}
        className="max-h-full max-w-full rounded-lg object-contain shadow-sm"
      />
    </div>
  ) : assetKind === 'video' ? (
    <div className="flex min-h-0 min-w-0 flex-1 items-center justify-center bg-black">
      <video src={assetUrl} controls className="max-h-full max-w-full" />
    </div>
  ) : assetKind === 'audio' ? (
    <div className="flex min-h-0 min-w-0 flex-1 items-center justify-center bg-paper-100/35 p-6">
      <div className="w-full max-w-md rounded-lg border border-paper-300/70 bg-paper-50/80 p-4 shadow-sm">
        <div className="mb-3 truncate text-sm font-medium text-ink-900">{title}</div>
        <audio src={assetUrl} controls className="w-full" />
      </div>
    </div>
  ) : (
    <iframe
      src={assetUrl}
      title={title}
      className="min-h-0 min-w-0 flex-1 border-0 bg-paper-50"
    />
  )

  return (
    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
      <header className="glass-header flex h-12 shrink-0 items-center justify-between gap-3 border-b border-paper-300/70 px-4">
        <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-ink-900">
          <DocumentIcon width={15} height={15} className="shrink-0 text-accent" />
          <span className="truncate">{title}</span>
        </div>
        {canReveal && assetPath && (
          <button
            type="button"