Merge pull request #126 from hyphacoop/feat-add-any-bsky-post

feat: add bsky post from anyone on the atmosphere

src/components/site-editor.ts

···
 import { getConfig, saveConfig, getSiteOwnerDid } from '../config';
 import { getCurrentDid, putRecord, uploadBlob } from '../oauth';
-import { getRecord, getProfile, buildAtUri } from '../at-client';
+import { getRecord, getProfile, buildAtUri, resolveHandle } from '../at-client';
 import { getCollectionRecords, getCollections, getRecordByUri } from '../records/loader';
 import { getCollection } from '../config/nsid';
 import { setCachedActivity } from './recent-gardens';
···
       if (posts.length === 0) {
         modal.querySelector('.modal-content')!.innerHTML = `
           <p>No posts found in your Bluesky feed.</p>
-          <button class="button modal-close">Close</button>
+          <div class="selector-actions"><button class="button button-secondary modal-close">Close</button></div>
         `;
         modal.querySelector('.modal-close')?.addEventListener('click', closeModal);
         return;
···
     } catch (error) {
       modal.querySelector('.modal-content')!.innerHTML = `
         <p>Failed to load posts. Please try again.</p>
-        <button class="button modal-close">Close</button>
+        <div class="selector-actions"><button class="button button-secondary modal-close">Close</button></div>
       `;
       modal.querySelector('.modal-close')?.addEventListener('click', closeModal);
     }
···
     modal.querySelector('.modal-content')!.innerHTML = `
       <div class="welcome-selector">
         <h2>Select Bluesky Post</h2>
-        <p>Choose a post to add to your garden</p>
+        <p>Choose one of your posts to add to your garden</p>
         <div class="post-list">
           ${posts.map((post) => {
       const uri = post.uri || '';
···
       const text = val?.text?.slice(0, 200) || 'Post';
       const createdAt = val?.createdAt ? new Date(val.createdAt).toLocaleDateString() : '';
       return `
-              <button class="post-item-selectable" data-uri="${uri}">
+              <button class="post-item" data-uri="${uri}">
                 <div class="post-content">
-                  <p class="post-text">${escapeHtml(text)}${text.length >= 200 ? '...' : ''}</p>
+                  <p class="post-text">${escapeHtml(text)}</p>
                   ${createdAt ? `<time class="post-date">${createdAt}</time>` : ''}
                 </div>
               </button>
             `;
     }).join('')}
         </div>
-        <button class="button button-secondary modal-close">Cancel</button>
+        <p>Choose a post from another user to add to your garden</p>
+        <div class="bsky-user-search">
+          <input type="text" class="input" placeholder="@alice.bsky.social" id="bsky-other-handle">
+          <button class="button" data-action="search-user">Search another user</button>
+        </div>
+        <div class="selector-actions">
+          <button class="button button-secondary modal-close">Cancel</button>
+        </div>
       </div>
     `;
 
-    modal.querySelectorAll('.post-item-selectable').forEach(btn => {
+    modal.querySelectorAll('.post-item').forEach(btn => {
       btn.addEventListener('click', async () => {
         const uri = btn.getAttribute('data-uri');
         if (uri) {
···
           };
           config.sections = [...(config.sections || []), section];
           this.renderCallback();
-
           closeModal();
         }
       });
+    });
+
+    modal.querySelector('[data-action="search-user"]')?.addEventListener('click', async () => {
+      const input = modal.querySelector<HTMLInputElement>('#bsky-other-handle');
+      const handleOrDid = (input?.value || '').trim().replace(/^@/, '');
+      if (!handleOrDid) return;
+
+      modal.querySelector('.modal-content')!.innerHTML = `
+        <div class="welcome-loading"><div class="spinner"></div><p>Loading posts...</p></div>
+      `;
+
+      try {
+        const did = handleOrDid.startsWith('did:') ? handleOrDid : await resolveHandle(handleOrDid);
+        const posts = await getCollectionRecords(did, 'app.bsky.feed.post', { limit: 50 });
+
+        if (posts.length === 0) {
+          modal.querySelector('.modal-content')!.innerHTML = `
+            <p>No posts found for that user.</p>
+            <div class="selector-actions"><button class="button button-secondary modal-close">Close</button></div>
+          `;
+          modal.querySelector('.modal-close')?.addEventListener('click', closeModal);
+          return;
+        }
+
+        this.renderPostSelector(modal, posts, closeModal);
+      } catch (error) {
+        modal.querySelector('.modal-content')!.innerHTML = `
+          <p>Failed to load posts. Please check the handle and try again.</p>
+          <div class="selector-actions"><button class="button button-secondary modal-close">Close</button></div>
+        `;
+        modal.querySelector('.modal-close')?.addEventListener('click', closeModal);
+      }
     });
 
     modal.querySelector('.modal-close')?.addEventListener('click', closeModal);

src/components/welcome-modal.ts

···
 import { getCollections, getCollectionRecords } from '../records/loader';
 import { getCurrentDid } from '../oauth';
 import { addSection, updateConfig, updateTheme, saveConfig } from '../config';
-import { getProfile } from '../at-client';
+import { getProfile, resolveHandle } from '../at-client';
 import { generateThemeFromDid } from '../themes/engine';
 import { getSafeHandle, getDisplayHandle } from '../utils/identity';
 import { createHelpTooltip } from '../utils/help-tooltip';
···
     this.showLoading('Loading your Bluesky posts...');
 
     try {
-      // Use the same method that works in "Explore your data"
       const posts = await getCollectionRecords(this.did, 'app.bsky.feed.post', { limit: 50 });
 
       if (posts.length === 0) {
···
     content.innerHTML = `
       <div class="welcome-selector">
         <h2>Select Bluesky Post</h2>
-        <p>Choose a post to add to your garden</p>
+        <p>Choose one of your posts to add to your garden</p>
         <div class="post-list">
-          ${posts.map((post, idx) => {
-      const rkey = post.uri?.split('/').pop() || idx.toString();
+          ${posts.map((post) => {
       const uri = post.uri || '';
       const val = post.value as any;
       const text = val?.text?.slice(0, 200) || 'Post';
···
         ? new Date(val.createdAt).toLocaleDateString()
         : '';
       return `
-              <button class="post-item-selectable" data-uri="${uri}" data-rkey="${rkey}">
+              <button class="post-item" data-uri="${uri}">
                 <div class="post-content">
-                  <p class="post-text">${this.escapeHtml(text)}${text.length >= 200 ? '...' : ''}</p>
+                  <p class="post-text">${this.escapeHtml(text)}</p>
                   ${createdAt ? `<time class="post-date">${createdAt}</time>` : ''}
                 </div>
               </button>
             `;
     }).join('')}
+        </div>
+        <p>Choose a post from another user to add to your garden</p>
+        <div class="bsky-user-search">
+          <input type="text" class="input" placeholder="@alice.bsky.social" id="bsky-other-handle">
+          <button class="button" data-action="search-user">Search another user</button>
         </div>
         <div class="selector-actions">
           <button class="button button-secondary" data-action="back-main">Back</button>
···
       </div>
     `;
 
-    // Attach event listeners - clicking a post adds it
-    content.querySelectorAll('.post-item-selectable').forEach(btn => {
+    content.querySelectorAll('.post-item').forEach(btn => {
       btn.addEventListener('click', () => {
         const uri = btn.getAttribute('data-uri');
         if (uri) {
           this.addSinglePost(uri);
         }
       });
+    });
+
+    content.querySelector('[data-action="search-user"]')?.addEventListener('click', async () => {
+      const input = content.querySelector<HTMLInputElement>('#bsky-other-handle');
+      const handleOrDid = (input?.value || '').trim().replace(/^@/, '');
+      if (!handleOrDid) return;
+
+      this.showLoading('Loading posts...');
+
+      try {
+        const did = handleOrDid.startsWith('did:') ? handleOrDid : await resolveHandle(handleOrDid);
+        const newPosts = await getCollectionRecords(did, 'app.bsky.feed.post', { limit: 50 });
+
+        if (newPosts.length === 0) {
+          this.showMessage('No posts found for that user.');
+          return;
+        }
+
+        this.showPostSelector(newPosts);
+      } catch (error) {
+        console.error('Failed to load posts:', error);
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        this.showMessage(`Failed to load posts: ${errorMessage}. Please check the handle and try again.`);
+      }
     });
 
     content.querySelector('[data-action="back-main"]')?.addEventListener('click', () => {

src/themes/base.css

···
 .record-item,
 .post-item {
   display: flex;
-  align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-md);
   background: var(--color-surface);
···
   text-align: left;
   min-width: 0;
   max-width: 100%;
+}
+
+.collection-item,
+.record-item {
+  align-items: center;
+}
+
+.post-item {
+  align-items: flex-start;
 }
 
 .collection-item:hover,
···
   flex-direction: column;
   gap: var(--spacing-xs);
   min-width: 0;
-  overflow: hidden;
 }
 
 .post-text {
   margin: 0;
   line-height: 1.5;
-  word-break: break-word;
-  overflow-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .post-date {
···
   display: flex;
   gap: var(--spacing-md);
   justify-content: flex-end;
+}
+
+.bsky-user-search {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: stretch;
+  margin-bottom: var(--spacing-md);
+}
+
+.bsky-user-search .input {
+  flex: 1;
+  min-width: 0;
+}
+
+.bsky-user-search .button {
+  white-space: nowrap;
+}
+
+/* Post selector mobile: add side padding to elements that lose it when modal-content padding is 0 */
+@media (max-width: 479px) {
+  .modal-content .welcome-selector p {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+
+  .modal-content .bsky-user-search {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0 var(--spacing-md);
+  }
+
+  .modal-content .bsky-user-search .button {
+    width: 100%;
+    min-height: 44px;
+    justify-content: center;
+  }
+
+  .modal-content .selector-actions {
+    padding: 0 var(--spacing-md) var(--spacing-lg);
+  }
+
+  .modal-content .selector-actions .button {
+    width: 100%;
+    min-height: 44px;
+    justify-content: center;
+  }
 }
 
 /* ============================================