add translate

2026-01-18 15:47:24 +09:00
parent 6ef8780ac6
commit 1aac3b75e0
18 changed files with 1049 additions and 153 deletions
--- a/src/web/components/browser.ts
+++ b/src/web/components/browser.ts
@@ -25,8 +25,18 @@ function groupCollectionsByService(collections: string[]): Map<string, string[]>
  return groups
 }

+// Local favicon mappings
+const localFavicons: Record<string, string> = {
+  'syui.ai': '/icon/syui.ai.png',
+  'bsky.app': '/icon/bsky.app.png',
+  'atproto.com': '/icon/atproto.com.png',
+}
+
 // Get favicon URL for service
 function getFaviconUrl(service: string): string {
+  if (localFavicons[service]) {
+    return localFavicons[service]
+  }
  return `https://www.google.com/s2/favicons?domain=${service}&sz=32`
 }

@@ -167,14 +177,21 @@ export function renderRecordList(
 // Render single record detail
 export function renderRecordDetail(
  record: { uri: string; cid: string; value: unknown },
-  collection: string
+  collection: string,
+  isOwner: boolean = false
 ): string {
+  const rkey = record.uri.split('/').pop() || ''
+  const deleteBtn = isOwner ? `
+    <button type="button" class="record-delete-btn" id="record-delete-btn" data-collection="${collection}" data-rkey="${rkey}">Delete</button>
+  ` : ''
+
  return `
    <article class="record-detail">
      <header class="record-header">
        <h3>${collection}</h3>
        <p class="record-uri">URI: ${record.uri}</p>
        <p class="record-cid">CID: ${record.cid}</p>
+        ${deleteBtn}
      </header>
      <div class="json-view">
        <pre><code>${escapeHtml(JSON.stringify(record.value, null, 2))}</code></pre>
--- a/src/web/components/discussion.ts
+++ b/src/web/components/discussion.ts
@@ -0,0 +1,105 @@
+import { searchPostsForUrl, type SearchPost } from '../lib/api'
+
+const DISCUSSION_POST_LIMIT = 10
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('ja-JP', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function getPostUrl(uri: string, appUrl: string): string {
+  // at://did:plc:xxx/app.bsky.feed.post/rkey -> {appUrl}/profile/did:plc:xxx/post/rkey
+  const parts = uri.replace('at://', '').split('/')
+  if (parts.length >= 3) {
+    return `${appUrl}/profile/${parts[0]}/post/${parts[2]}`
+  }
+  return '#'
+}
+
+export function renderDiscussion(postUrl: string, appUrl: string = 'https://bsky.app'): string {
+  // Build search URL (truncate for search limit)
+  let searchQuery = postUrl
+  try {
+    const urlObj = new URL(postUrl)
+    const pathParts = urlObj.pathname.split('/').filter(Boolean)
+    const basePath = urlObj.host + '/' + (pathParts[0] || '') + '/'
+    const rkey = pathParts[1] || ''
+    const remainingLength = 20 - basePath.length
+    const rkeyPrefix = remainingLength > 0 ? rkey.slice(0, remainingLength) : ''
+    searchQuery = basePath + rkeyPrefix
+  } catch {
+    // Keep original
+  }
+
+  const searchUrl = `${appUrl}/search?q=${encodeURIComponent(searchQuery)}`
+
+  return `
+    <div class="discussion-section">
+      <a href="${searchUrl}" target="_blank" rel="noopener" class="discussion-link">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2.546 20.2A1.5 1.5 0 0 0 4 22h.5l2.83-.892A9.96 9.96 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2z"/>
+        </svg>
+        Discuss on Bluesky
+      </a>
+      <div id="discussion-posts" class="discussion-posts" data-app-url="${escapeHtml(appUrl)}"></div>
+    </div>
+  `
+}
+
+export async function loadDiscussionPosts(container: HTMLElement, postUrl: string, appUrl: string = 'https://bsky.app'): Promise<void> {
+  const postsContainer = container.querySelector('#discussion-posts') as HTMLElement
+  if (!postsContainer) return
+
+  const dataAppUrl = postsContainer.dataset.appUrl || appUrl
+
+  postsContainer.innerHTML = '<div class="loading-small">Loading comments...</div>'
+
+  const posts = await searchPostsForUrl(postUrl)
+
+  if (posts.length === 0) {
+    postsContainer.innerHTML = ''
+    return
+  }
+
+  const postsHtml = posts.slice(0, DISCUSSION_POST_LIMIT).map((post: SearchPost) => {
+    const author = post.author
+    const avatar = author.avatar || ''
+    const displayName = author.displayName || author.handle
+    const handle = author.handle
+    const record = post.record as { text?: string; createdAt?: string }
+    const text = record?.text || ''
+    const createdAt = record?.createdAt || ''
+    const postLink = getPostUrl(post.uri, dataAppUrl)
+
+    // Truncate text
+    const truncatedText = text.length > 200 ? text.slice(0, 200) + '...' : text
+
+    return `
+      <a href="${postLink}" target="_blank" rel="noopener" class="discussion-post">
+        <div class="discussion-author">
+          ${avatar ? `<img src="${escapeHtml(avatar)}" class="discussion-avatar" alt="">` : '<div class="discussion-avatar-placeholder"></div>'}
+          <div class="discussion-author-info">
+            <span class="discussion-name">${escapeHtml(displayName)}</span>
+            <span class="discussion-handle">@${escapeHtml(handle)}</span>
+          </div>
+          <span class="discussion-date">${formatDate(createdAt)}</span>
+        </div>
+        <div class="discussion-text">${escapeHtml(truncatedText)}</div>
+      </a>
+    `
+  }).join('')
+
+  postsContainer.innerHTML = postsHtml
+}
--- a/src/web/components/header.ts
+++ b/src/web/components/header.ts
@@ -1,12 +1,12 @@
-import { isLoggedIn, getLoggedInDid } from '../lib/auth'
+import { isLoggedIn, getLoggedInHandle } from '../lib/auth'

 export function renderHeader(currentHandle: string): string {
  const loggedIn = isLoggedIn()
-  const did = getLoggedInDid()
+  const handle = getLoggedInHandle()

  const loginBtn = loggedIn
-    ? `<button type="button" class="header-btn user-btn" id="logout-btn" title="Logout (${did?.slice(0, 20)}...)">✓</button>`
-    : `<button type="button" class="header-btn login-btn" id="login-btn" title="Login">↗</button>`
+    ? `<button type="button" class="header-btn user-btn" id="logout-btn" title="Logout">${handle || 'logout'}</button>`
+    : `<button type="button" class="header-btn login-btn" id="login-btn" title="Login"><img src="/icon/user.svg" alt="Login" class="login-icon"></button>`

  return `
    <header id="header">
--- a/src/web/components/loading.ts
+++ b/src/web/components/loading.ts
@@ -0,0 +1,22 @@
+// Loading indicator component
+
+export function showLoading(container: HTMLElement): void {
+  const existing = container.querySelector('.loading-overlay')
+  if (existing) return
+
+  const overlay = document.createElement('div')
+  overlay.className = 'loading-overlay'
+  overlay.innerHTML = '<div class="loading-spinner"></div>'
+  container.appendChild(overlay)
+}
+
+export function hideLoading(container: HTMLElement): void {
+  const overlay = container.querySelector('.loading-overlay')
+  if (overlay) {
+    overlay.remove()
+  }
+}
+
+export function renderLoadingSmall(): string {
+  return '<div class="loading-small">Loading...</div>'
+}
--- a/src/web/components/mode-tabs.ts
+++ b/src/web/components/mode-tabs.ts
@@ -1,6 +1,8 @@
 import { getNetworks } from '../lib/api'
+import { isLoggedIn } from '../lib/auth'

 let currentNetwork = 'bsky.social'
+let currentLang = localStorage.getItem('preferred-lang') || 'en'

 export function getCurrentNetwork(): string {
  return currentNetwork
@@ -10,15 +12,29 @@ export function setCurrentNetwork(network: string): void {
  currentNetwork = network
 }

-export function renderModeTabs(handle: string, activeTab: 'blog' | 'browser' = 'blog'): string {
+export function getCurrentLang(): string {
+  return currentLang
+}
+
+export function setCurrentLang(lang: string): void {
+  currentLang = lang
+  localStorage.setItem('preferred-lang', lang)
+}
+
+export function renderModeTabs(handle: string, activeTab: 'blog' | 'browser' | 'post' = 'blog'): string {
  let tabs = `
-    <a href="/@${handle}" class="tab ${activeTab === 'blog' ? 'active' : ''}">Blog</a>
-    <a href="/@${handle}/at" class="tab ${activeTab === 'browser' ? 'active' : ''}">Browser</a>
+    <a href="/" class="tab">/</a>
+    <a href="/@${handle}" class="tab ${activeTab === 'blog' ? 'active' : ''}">${handle}</a>
+    <a href="/@${handle}/at" class="tab ${activeTab === 'browser' ? 'active' : ''}">at</a>
  `

+  if (isLoggedIn()) {
+    tabs += `<a href="/@${handle}/at/post" class="tab ${activeTab === 'post' ? 'active' : ''}">post</a>`
+  }
+
  tabs += `
    <div class="pds-selector" id="pds-selector">
-      <button type="button" class="tab" id="pds-tab">PDS</button>
+      <button type="button" class="tab" id="pds-tab">pds</button>
      <div class="pds-dropdown" id="pds-dropdown"></div>
    </div>
  `
@@ -26,55 +42,114 @@ export function renderModeTabs(handle: string, activeTab: 'blog' | 'browser' = '
  return `<div class="mode-tabs">${tabs}</div>`
 }

-export async function setupModeTabs(onNetworkChange: (network: string) => void): Promise<void> {
+// Render language selector (above content)
+export function renderLangSelector(langs: string[]): string {
+  if (langs.length < 2) return ''
+
+  return `
+    <div class="lang-selector" id="lang-selector">
+      <button type="button" class="lang-btn" id="lang-tab">
+        <img src="/icon/language.svg" alt="Lang" class="lang-icon">
+      </button>
+      <div class="lang-dropdown" id="lang-dropdown"></div>
+    </div>
+  `
+}
+
+export async function setupModeTabs(onNetworkChange: (network: string) => void, availableLangs?: string[], onLangChange?: (lang: string) => void): Promise<void> {
  const pdsTab = document.getElementById('pds-tab')
-  const dropdown = document.getElementById('pds-dropdown')
+  const pdsDropdown = document.getElementById('pds-dropdown')

-  if (!pdsTab || !dropdown) return
+  if (pdsTab && pdsDropdown) {
+    // Load networks
+    const networks = await getNetworks()

-  // Load networks
-  const networks = await getNetworks()
+    // Build options
+    const optionsHtml = Object.keys(networks).map(key => {
+      const isSelected = key === currentNetwork
+      return `
+        <div class="pds-option ${isSelected ? 'selected' : ''}" data-network="${key}">
+          <span class="pds-name">${key}</span>
+          <span class="pds-check">✓</span>
+        </div>
+      `
+    }).join('')

-  // Build options
-  const optionsHtml = Object.keys(networks).map(key => {
-    const isSelected = key === currentNetwork
-    return `
-      <div class="pds-option ${isSelected ? 'selected' : ''}" data-network="${key}">
-        <span class="pds-name">${key}</span>
-        <span class="pds-check">✓</span>
-      </div>
-    `
-  }).join('')
+    pdsDropdown.innerHTML = optionsHtml

-  dropdown.innerHTML = optionsHtml
-
-  // Toggle dropdown
-  pdsTab.addEventListener('click', (e) => {
-    e.stopPropagation()
-    dropdown.classList.toggle('show')
-  })
-
-  // Close on outside click
-  document.addEventListener('click', () => {
-    dropdown.classList.remove('show')
-  })
-
-  // Handle option selection
-  dropdown.querySelectorAll('.pds-option').forEach(opt => {
-    opt.addEventListener('click', (e) => {
+    // Toggle dropdown
+    pdsTab.addEventListener('click', (e) => {
      e.stopPropagation()
-      const network = (opt as HTMLElement).dataset.network || ''
-
-      currentNetwork = network
-
-      // Update UI
-      dropdown.querySelectorAll('.pds-option').forEach(o => {
-        o.classList.remove('selected')
-      })
-      opt.classList.add('selected')
-      dropdown.classList.remove('show')
-
-      onNetworkChange(network)
+      pdsDropdown.classList.toggle('show')
    })
+
+    // Handle option selection
+    pdsDropdown.querySelectorAll('.pds-option').forEach(opt => {
+      opt.addEventListener('click', (e) => {
+        e.stopPropagation()
+        const network = (opt as HTMLElement).dataset.network || ''
+
+        currentNetwork = network
+
+        // Update UI
+        pdsDropdown.querySelectorAll('.pds-option').forEach(o => {
+          o.classList.remove('selected')
+        })
+        opt.classList.add('selected')
+        pdsDropdown.classList.remove('show')
+
+        onNetworkChange(network)
+      })
+    })
+  }
+
+  // Setup language selector
+  const langTab = document.getElementById('lang-tab')
+  const langDropdown = document.getElementById('lang-dropdown')
+
+  if (langTab && langDropdown && availableLangs && availableLangs.length > 0) {
+    // Build language options
+    const langOptionsHtml = availableLangs.map(lang => {
+      const isSelected = lang === currentLang
+      return `
+        <div class="lang-option ${isSelected ? 'selected' : ''}" data-lang="${lang}">
+          <span class="lang-name">${lang.toUpperCase()}</span>
+          <span class="lang-check">✓</span>
+        </div>
+      `
+    }).join('')
+
+    langDropdown.innerHTML = langOptionsHtml
+
+    // Toggle dropdown
+    langTab.addEventListener('click', (e) => {
+      e.stopPropagation()
+      langDropdown.classList.toggle('show')
+    })
+
+    // Handle option selection
+    langDropdown.querySelectorAll('.lang-option').forEach(opt => {
+      opt.addEventListener('click', (e) => {
+        e.stopPropagation()
+        const lang = (opt as HTMLElement).dataset.lang || ''
+
+        setCurrentLang(lang)
+
+        // Update UI
+        langDropdown.querySelectorAll('.lang-option').forEach(o => {
+          o.classList.remove('selected')
+        })
+        opt.classList.add('selected')
+        langDropdown.classList.remove('show')
+
+        if (onLangChange) onLangChange(lang)
+      })
+    })
+  }
+
+  // Close dropdowns on outside click
+  document.addEventListener('click', () => {
+    pdsDropdown?.classList.remove('show')
+    langDropdown?.classList.remove('show')
  })
 }
--- a/src/web/components/posts.ts
+++ b/src/web/components/posts.ts
@@ -1,5 +1,7 @@
 import type { Post } from '../types'
 import { renderMarkdown } from '../lib/markdown'
+import { renderDiscussion, loadDiscussionPosts } from './discussion'
+import { getCurrentLang } from './mode-tabs'

 // Render post list
 export function renderPostList(posts: Post[], handle: string): string {
@@ -7,14 +9,24 @@ export function renderPostList(posts: Post[], handle: string): string {
    return '<p class="no-posts">No posts yet.</p>'
  }

+  const currentLang = getCurrentLang()
+
  const items = posts.map(post => {
    const rkey = post.uri.split('/').pop() || ''
-    const date = new Date(post.value.createdAt).toLocaleDateString('ja-JP')
+    const date = new Date(post.value.createdAt).toLocaleDateString('en-US')
+    const originalLang = post.value.lang || 'ja'
+    const translations = post.value.translations
+
+    // Use translation if available
+    let displayTitle = post.value.title
+    if (translations && currentLang !== originalLang && translations[currentLang]) {
+      displayTitle = translations[currentLang].title || post.value.title
+    }

    return `
      <article class="post-item">
        <a href="/@${handle}/${rkey}" class="post-link">
-          <h2 class="post-title">${escapeHtml(post.value.title)}</h2>
+          <h2 class="post-title">${escapeHtml(displayTitle)}</h2>
          <time class="post-date">${date}</time>
        </a>
      </article>
@@ -25,26 +37,83 @@ export function renderPostList(posts: Post[], handle: string): string {
 }

 // Render single post detail
-export function renderPostDetail(post: Post, handle: string, collection: string): string {
+export function renderPostDetail(
+  post: Post,
+  handle: string,
+  collection: string,
+  isOwner: boolean = false,
+  siteUrl?: string,
+  appUrl: string = 'https://bsky.app'
+): string {
  const rkey = post.uri.split('/').pop() || ''
-  const date = new Date(post.value.createdAt).toLocaleDateString('ja-JP')
-  const content = renderMarkdown(post.value.content)
+  const date = new Date(post.value.createdAt).toLocaleDateString('en-US')
  const jsonUrl = `/@${handle}/at/collection/${collection}/${rkey}`

+  // Build post URL for discussion search
+  const postUrl = siteUrl ? `${siteUrl}/${rkey}` : `${window.location.origin}/@${handle}/${rkey}`
+
+  const editBtn = isOwner ? `<button type="button" class="post-edit-btn" id="post-edit-btn">Edit</button>` : ''
+
+  // Get current language and show appropriate content
+  const currentLang = getCurrentLang()
+  const translations = post.value.translations
+  const originalLang = post.value.lang || 'ja'
+
+  let displayTitle = post.value.title
+  let displayContent = post.value.content
+
+  // Use translation if available and not original language
+  if (translations && currentLang !== originalLang && translations[currentLang]) {
+    const trans = translations[currentLang]
+    displayTitle = trans.title || post.value.title
+    displayContent = trans.content
+  }
+
+  const content = renderMarkdown(displayContent)
+
+  const editForm = isOwner ? `
+    <div class="post-edit-form" id="post-edit-form" style="display: none;">
+      <input type="text" class="post-edit-title" id="post-edit-title" value="${escapeHtml(post.value.title)}" placeholder="Title">
+      <textarea class="post-edit-content" id="post-edit-content" rows="15">${escapeHtml(post.value.content)}</textarea>
+      <div class="post-edit-actions">
+        <button type="button" class="post-edit-cancel" id="post-edit-cancel">Cancel</button>
+        <button type="button" class="post-edit-save" id="post-edit-save" data-collection="${collection}" data-rkey="${rkey}">Save</button>
+      </div>
+    </div>
+  ` : ''
+
  return `
-    <article class="post-detail">
+    <article class="post-detail" data-post-url="${escapeHtml(postUrl)}" data-app-url="${escapeHtml(appUrl)}">
      <header class="post-header">
-        <h1 class="post-title">${escapeHtml(post.value.title)}</h1>
        <div class="post-meta">
          <time class="post-date">${date}</time>
          <a href="${jsonUrl}" class="json-btn">json</a>
+          ${editBtn}
        </div>
      </header>
-      <div class="post-content">${content}</div>
+      ${editForm}
+      <div id="post-display">
+        <h1 class="post-title">${escapeHtml(displayTitle)}</h1>
+        <div class="post-content">${content}</div>
+      </div>
    </article>
+    ${renderDiscussion(postUrl, appUrl)}
  `
 }

+// Setup post detail interactions (discussion loading)
+export function setupPostDetail(container: HTMLElement): void {
+  const article = container.querySelector('.post-detail') as HTMLElement
+  if (!article) return
+
+  // Load discussion posts
+  const postUrl = article.dataset.postUrl
+  const appUrl = article.dataset.appUrl || 'https://bsky.app'
+  if (postUrl) {
+    loadDiscussionPosts(container, postUrl, appUrl)
+  }
+}
+
 export function mountPostList(container: HTMLElement, html: string): void {
  container.innerHTML = html
 }
--- a/src/web/components/profile.ts
+++ b/src/web/components/profile.ts
@@ -19,24 +19,17 @@ export async function renderProfile(
    : `<span>@${escapeHtml(handle)}</span>`

  const avatarHtml = avatarUrl
-    ? `<a href="/"><img class="profile-avatar" src="${avatarUrl}" alt="${displayName}"></a>`
-    : `<a href="/"><div class="profile-avatar-placeholder"></div></a>`
+    ? `<img src="${avatarUrl}" alt="${escapeHtml(displayName)}" class="profile-avatar">`
+    : `<div class="profile-avatar-placeholder"></div>`

  return `
    <div class="profile">
-      <div class="profile-row">
-        ${avatarHtml}
-        <div class="profile-meta">
-          <span class="profile-name">${escapeHtml(displayName)}</span>
-          <span class="profile-handle">${handleHtml}</span>
-        </div>
+      ${avatarHtml}
+      <div class="profile-info">
+        <h1 class="profile-name">${escapeHtml(displayName)}</h1>
+        <p class="profile-handle">${handleHtml}</p>
+        ${description ? `<p class="profile-desc">${escapeHtml(description)}</p>` : ''}
      </div>
-      ${description ? `
-      <div class="profile-row">
-        <div class="profile-avatar-spacer"></div>
-        <p class="profile-description">${escapeHtml(description)}</p>
-      </div>
-      ` : ''}
    </div>
  `
 }