init
This commit is contained in:
227
src/components/atbrowser.ts
Normal file
227
src/components/atbrowser.ts
Normal file
@@ -0,0 +1,227 @@
|
||||
import { describeRepo, listRecordsRaw, getRecordRaw, fetchLexicon, resolveHandle, getServiceInfo } from '../lib/api.js'
|
||||
import { deleteRecord } from '../lib/auth.js'
|
||||
|
||||
function extractRkey(uri: string): string {
|
||||
const parts = uri.split('/')
|
||||
return parts[parts.length - 1]
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('ja-JP', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function escapeHtml(str: string): string {
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
}
|
||||
|
||||
async function renderServices(did: string, handle: string): Promise<string> {
|
||||
const collections = await describeRepo(did)
|
||||
|
||||
if (collections.length === 0) {
|
||||
return '<p class="no-data">No collections found</p>'
|
||||
}
|
||||
|
||||
// Group by service domain
|
||||
const serviceMap = new Map<string, { name: string; favicon: string; count: number }>()
|
||||
|
||||
for (const col of collections) {
|
||||
const info = getServiceInfo(col)
|
||||
if (info) {
|
||||
const key = info.domain
|
||||
if (!serviceMap.has(key)) {
|
||||
serviceMap.set(key, { name: info.name, favicon: info.favicon, count: 0 })
|
||||
}
|
||||
serviceMap.get(key)!.count++
|
||||
}
|
||||
}
|
||||
|
||||
const items = Array.from(serviceMap.entries()).map(([domain, info]) => {
|
||||
return `
|
||||
<li class="service-list-item">
|
||||
<a href="?mode=browser&handle=${handle}&service=${encodeURIComponent(domain)}" class="service-list-link">
|
||||
<img src="${info.favicon}" class="service-list-favicon" alt="" onerror="this.style.display='none'">
|
||||
<span class="service-list-name">${info.name}</span>
|
||||
<span class="service-list-count">${info.count}</span>
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
}).join('')
|
||||
|
||||
return `
|
||||
<div class="services-list">
|
||||
<h3>Services</h3>
|
||||
<ul class="service-list">${items}</ul>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
async function renderCollections(did: string, handle: string, serviceDomain: string): Promise<string> {
|
||||
const collections = await describeRepo(did)
|
||||
|
||||
// Filter by service domain
|
||||
const filtered = collections.filter(col => {
|
||||
const info = getServiceInfo(col)
|
||||
return info && info.domain === serviceDomain
|
||||
})
|
||||
|
||||
if (filtered.length === 0) {
|
||||
return '<p class="no-data">No collections found</p>'
|
||||
}
|
||||
|
||||
// Get favicon from first collection
|
||||
const firstInfo = getServiceInfo(filtered[0])
|
||||
const favicon = firstInfo ? `<img src="${firstInfo.favicon}" class="collection-header-favicon" alt="" onerror="this.style.display='none'">` : ''
|
||||
|
||||
const items = filtered.map(col => {
|
||||
return `
|
||||
<li class="collection-item">
|
||||
<a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(col)}" class="collection-link">
|
||||
<span class="collection-nsid">${col}</span>
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
}).join('')
|
||||
|
||||
return `
|
||||
<div class="collections">
|
||||
<h3 class="collection-header">${favicon}<span>${serviceDomain}</span></h3>
|
||||
<ul class="collection-list">${items}</ul>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
async function renderRecordList(did: string, handle: string, collection: string): Promise<string> {
|
||||
const records = await listRecordsRaw(did, collection)
|
||||
|
||||
if (records.length === 0) {
|
||||
return '<p class="no-data">No records found</p>'
|
||||
}
|
||||
|
||||
const items = records.map(rec => {
|
||||
const rkey = extractRkey(rec.uri)
|
||||
const preview = rec.value.title || rec.value.text?.slice(0, 50) || rkey
|
||||
return `
|
||||
<li class="record-item">
|
||||
<a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}&rkey=${rkey}" class="record-link">
|
||||
<span class="record-rkey">${rkey}</span>
|
||||
<span class="record-preview">${preview}</span>
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
}).join('')
|
||||
|
||||
return `
|
||||
<div class="records">
|
||||
<h3>${collection}</h3>
|
||||
<p class="record-count">${records.length} records</p>
|
||||
<ul class="record-list">${items}</ul>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
async function renderRecordDetail(did: string, handle: string, collection: string, rkey: string, canDelete: boolean): Promise<string> {
|
||||
const record = await getRecordRaw(did, collection, rkey)
|
||||
|
||||
if (!record) {
|
||||
return '<p class="error">Record not found</p>'
|
||||
}
|
||||
|
||||
const lexicon = await fetchLexicon(collection)
|
||||
const schemaStatus = lexicon ? 'verified' : 'none'
|
||||
const schemaLabel = lexicon ? '✓ Schema' : '○ No schema'
|
||||
const json = JSON.stringify(record, null, 2)
|
||||
|
||||
const deleteBtn = canDelete
|
||||
? `<button class="delete-btn" data-collection="${collection}" data-rkey="${rkey}">Delete</button>`
|
||||
: ''
|
||||
|
||||
return `
|
||||
<div class="record-detail">
|
||||
<div class="record-header">
|
||||
<h3>${collection}</h3>
|
||||
<p class="record-uri">${record.uri}</p>
|
||||
<p class="record-cid">CID: ${record.cid}</p>
|
||||
<span class="schema-status schema-${schemaStatus}">${schemaLabel}</span>
|
||||
${deleteBtn}
|
||||
</div>
|
||||
<div class="json-view">
|
||||
<pre><code>${escapeHtml(json)}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
export async function mountAtBrowser(
|
||||
container: HTMLElement,
|
||||
handle: string,
|
||||
collection: string | null,
|
||||
rkey: string | null,
|
||||
service: string | null = null,
|
||||
loginDid: string | null = null
|
||||
): Promise<void> {
|
||||
container.innerHTML = '<p class="loading">Loading...</p>'
|
||||
|
||||
try {
|
||||
const did = handle.startsWith('did:') ? handle : await resolveHandle(handle)
|
||||
const canDelete = loginDid !== null && loginDid === did
|
||||
|
||||
let content: string
|
||||
let nav = ''
|
||||
|
||||
if (collection && rkey) {
|
||||
nav = `<a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}" class="back-link">← Back</a>`
|
||||
content = await renderRecordDetail(did, handle, collection, rkey, canDelete)
|
||||
} else if (collection) {
|
||||
// Get service from collection for back link
|
||||
const info = getServiceInfo(collection)
|
||||
const backService = info ? info.domain : ''
|
||||
nav = `<a href="?mode=browser&handle=${handle}&service=${encodeURIComponent(backService)}" class="back-link">← ${info?.name || 'Back'}</a>`
|
||||
content = await renderRecordList(did, handle, collection)
|
||||
} else if (service) {
|
||||
nav = `<a href="?mode=browser&handle=${handle}" class="back-link">← Services</a>`
|
||||
content = await renderCollections(did, handle, service)
|
||||
} else {
|
||||
content = await renderServices(did, handle)
|
||||
}
|
||||
|
||||
container.innerHTML = nav + content
|
||||
|
||||
// Add delete button handler
|
||||
const deleteBtn = container.querySelector('.delete-btn')
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', async (e) => {
|
||||
e.preventDefault()
|
||||
const btn = e.target as HTMLButtonElement
|
||||
const col = btn.dataset.collection
|
||||
const rk = btn.dataset.rkey
|
||||
|
||||
if (!col || !rk) return
|
||||
|
||||
if (!confirm('Delete this record?')) return
|
||||
|
||||
try {
|
||||
btn.disabled = true
|
||||
btn.textContent = 'Deleting...'
|
||||
await deleteRecord(col, rk)
|
||||
// Go back to collection
|
||||
window.location.href = `?mode=browser&handle=${handle}&collection=${encodeURIComponent(col)}`
|
||||
} catch (err) {
|
||||
alert('Delete failed: ' + err)
|
||||
btn.disabled = false
|
||||
btn.textContent = 'Delete'
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
container.innerHTML = `<p class="error">Failed to load: ${err}</p>`
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user