this repo has no description
feat: Add initial app file
+151
+151
app.js
+151
app.js
···
1
+
import { AtpAgent } from "@atproto/api";
2
+
3
+
// Main application code
4
+
let currentCursor = null;
5
+
const recordsContainer = document.getElementById("recordsContainer");
6
+
const loadMoreButton = document.getElementById("loadMoreButton");
7
+
const loadButton = document.getElementById("loadButton");
8
+
const repoInput = document.getElementById("repoInput");
9
+
10
+
// Initialize the AT Protocol client - FIXED VERSION // lol claude wrote that
11
+
const agent = new AtprotoApi.AtpAgent({
12
+
service: "https://bsky.social",
13
+
});
14
+
15
+
// Event listeners
16
+
loadButton.addEventListener("click", () => {
17
+
const repo = repoInput.value.trim();
18
+
if (!repo) {
19
+
alert("Please enter a valid repository DID or handle");
20
+
return;
21
+
}
22
+
23
+
// Clear previous records and reset cursor
24
+
recordsContainer.innerHTML = "";
25
+
currentCursor = null;
26
+
loadMoreButton.style.display = "none";
27
+
28
+
// Load the first batch of records
29
+
loadRecords(repo);
30
+
});
31
+
32
+
loadMoreButton.addEventListener("click", () => {
33
+
loadRecords(repoInput.value.trim());
34
+
});
35
+
36
+
// Function to load records from the repository
37
+
async function loadRecords(repo) {
38
+
try {
39
+
loadButton.disabled = true;
40
+
loadMoreButton.disabled = true;
41
+
loadMoreButton.textContent = "Loading...";
42
+
43
+
// Call the AT Protocol API to list records
44
+
const response = await agent.com.atproto.repo.listRecords({
45
+
repo: repo,
46
+
collection: "me.comind.blip.thought",
47
+
limit: 10,
48
+
cursor: currentCursor,
49
+
});
50
+
51
+
// Update the cursor for pagination
52
+
currentCursor = response.data.cursor;
53
+
54
+
// Show or hide the "Load More" button based on cursor availability
55
+
if (currentCursor) {
56
+
loadMoreButton.style.display = "block";
57
+
} else {
58
+
loadMoreButton.style.display = "none";
59
+
}
60
+
61
+
// Render the records
62
+
renderRecords(response.data.records);
63
+
} catch (error) {
64
+
console.error("Error loading records:", error);
65
+
alert(`Error: ${error.message || "Failed to load records"}`);
66
+
} finally {
67
+
loadButton.disabled = false;
68
+
loadMoreButton.disabled = false;
69
+
loadMoreButton.textContent = "Load More";
70
+
}
71
+
}
72
+
73
+
// Function to render the records
74
+
function renderRecords(records) {
75
+
if (records.length === 0) {
76
+
recordsContainer.innerHTML +=
77
+
'<div class="alert alert-info">No records found</div>';
78
+
return;
79
+
}
80
+
81
+
records.forEach((record) => {
82
+
const { value } = record;
83
+
const thoughtEl = document.createElement("div");
84
+
thoughtEl.className = "card thought-card p-3";
85
+
86
+
// Format the date/time
87
+
const createdAt = new Date(value.createdAt);
88
+
const formattedDate = createdAt.toLocaleString();
89
+
90
+
// Get the thought data
91
+
const thought = value.generated;
92
+
93
+
// Build the HTML
94
+
thoughtEl.innerHTML = `
95
+
<div class="card-body">
96
+
<div class="d-flex justify-content-between align-items-start">
97
+
<span class="thought-type">${thought.thoughtType}</span>
98
+
<small class="text-muted">${formattedDate}</small>
99
+
</div>
100
+
101
+
${thought.context ? `<p class="text-muted mb-2">${thought.context}</p>` : ""}
102
+
103
+
<p class="card-text">${thought.text}</p>
104
+
105
+
${
106
+
thought.evidence.length > 0
107
+
? `
108
+
<div class="mt-3">
109
+
<h6>Evidence:</h6>
110
+
<div class="evidence-list">
111
+
${thought.evidence
112
+
.map(
113
+
(item) => `
114
+
<div class="evidence-item">${item}</div>
115
+
`,
116
+
)
117
+
.join("")}
118
+
</div>
119
+
</div>
120
+
`
121
+
: ""
122
+
}
123
+
124
+
${
125
+
thought.alternatives.length > 0
126
+
? `
127
+
<div class="mt-3">
128
+
<h6>Alternative Thoughts:</h6>
129
+
<div class="alternatives-list">
130
+
${thought.alternatives
131
+
.map(
132
+
(item) => `
133
+
<div class="alternative-item">${item}</div>
134
+
`,
135
+
)
136
+
.join("")}
137
+
</div>
138
+
</div>
139
+
`
140
+
: ""
141
+
}
142
+
143
+
<div class="mt-2">
144
+
<small class="text-muted">URI: ${record.uri}</small>
145
+
</div>
146
+
</div>
147
+
`;
148
+
149
+
recordsContainer.appendChild(thoughtEl);
150
+
});
151
+
}