@@ -471,49 +325,263 @@ document.addEventListener('DOMContentLoaded', () => {
`;
- // This is a bit tricky with existing static posts.
- // Ideally we keep static posts static and just inject dynamic ones.
- if (prepend) {
- feedContainer.insertBefore(article, feedContainer.firstChild);
- // Note: index.html has static articles directly. `firstChild` might be text node or first article.
- // A safer insert would be after the first spacer if I had one, or simply `prepend`.
- // Let's use `prepend` on the container, but strict ordering might be weird with existing static HTML.
- // Actually, `prepend` puts it before the first child, which IS the first post card. Perfect.
- } else {
- feedContainer.appendChild(article);
- }
+ if (prepend) feedContainer.insertBefore(article, feedContainer.firstChild);
+ else feedContainer.appendChild(article);
}
- // Load User Posts on Init
- const savedUserPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
- savedUserPosts.forEach(post => {
- // Check if already in DOM to avoid dupes (simple check)
- if (!document.querySelector(`[data-post-id="${post.id}"]`)) {
- renderPost(post, true); // Keep order inverted?
- // If we loop saved posts [newest, ..., oldest], we should Append?
- // Actually saved as [newest, oldest].
- // If we prepend one by one:
- // 1. Newest -> Prepend -> Top.
- // 2. Oldest -> Prepend -> Top (Wrong).
- // So we should iterate in reverse if we prepend, OR just append at top once properly sorted.
- // Let's keep it simple: Iterate in reverse order [oldest ... newest] and prepend each, so newest ends up on top.
- }
- });
- // Fix order: Reverse iteration for prepend logic
- // savedUserPosts.reverse().forEach(...) -> Wait, `unshift` adds to start. So [0] is newest.
- // Loop:
- // Post 0 (Newest) -> Prepend (become first).
- // Post 1 (Older) -> Prepend (become first).
- // Result: Post 1 is above Post 0. WRONG.
- // Correct: Iterate from last to first (reverse) and prepend.
- // Post Last (Oldest) -> Prepend.
- // ...
- // Post 0 (Newest) -> Prepend (Top). CORRECT.
- // So:
- [...savedUserPosts].reverse().forEach(post => {
- if (!document.querySelector(`[data-post-id="${post.id}"]`)) {
- renderPost(post, true);
- }
- });
+ // --- FEED LISTENERS ---
+ if (feedView) {
+ initFeed(); // Initial Load logic
+ feedView.addEventListener('click', (e) => {
+ const target = e.target;
+
+ // 1. OPTIONS MENU
+ const trigger = target.closest('.options-trigger');
+ if (trigger) {
+ const header = trigger.closest('.post-header');
+ const menu = header.querySelector('.options-menu');
+ if (menu) {
+ document.querySelectorAll('.options-menu.active').forEach(m => {
+ if (m !== menu) m.classList.remove('active');
+ });
+ menu.classList.toggle('active');
+ e.stopPropagation();
+ }
+ return;
+ }
+
+ // 2. DELETE ACTION
+ const deleteBtn = target.closest('.delete');
+ if (deleteBtn) {
+ const card = deleteBtn.closest('.post-card');
+ const id = card.getAttribute('data-post-id');
+
+ if (id && id.startsWith('post_')) { // Double check ownership
+ if (confirm('Delete this post?')) {
+ card.style.transition = 'opacity 0.3s, transform 0.3s';
+ card.style.opacity = '0';
+ card.style.transform = 'scale(0.9)';
+ setTimeout(() => card.remove(), 300);
+
+ let userPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
+ userPosts = userPosts.filter(p => p.id !== id);
+ localStorage.setItem('socialAppUserPosts', JSON.stringify(userPosts));
+
+ // Also ban ID to be safe
+ const deletedPosts = JSON.parse(localStorage.getItem('socialAppDeletedPosts') || '[]');
+ if (!deletedPosts.includes(id)) {
+ deletedPosts.push(id);
+ localStorage.setItem('socialAppDeletedPosts', JSON.stringify(deletedPosts));
+ }
+ }
+ }
+ return;
+ }
+
+ // 3. LIKE ACTION
+ const likeBtn = target.closest('.heart-icon')?.closest('.icon-btn');
+ if (likeBtn) {
+ const icon = likeBtn.querySelector('.heart-icon');
+ const postCard = likeBtn.closest('.post-card');
+ const likesText = postCard.querySelector('.likes');
+ const postId = postCard.getAttribute('data-post-id');
+
+ icon.classList.toggle('liked');
+ let count = parseInt(likesText.innerText);
+ let isLiked = false;
+
+ if (icon.classList.contains('liked')) {
+ icon.style.fill = '#EF4444';
+ icon.style.stroke = '#EF4444';
+ count++;
+ isLiked = true;
+ } else {
+ icon.style.fill = 'none';
+ icon.style.stroke = 'white';
+ count--;
+ isLiked = false;
+ }
+ likesText.innerText = count + ' likes';
+
+ if (postId) {
+ const state = getPostState();
+ if (!state[postId]) state[postId] = { comments: [] };
+ state[postId].liked = isLiked;
+ state[postId].likesCount = count;
+ if (!state[postId].comments) state[postId].comments = [];
+ savePostState(state);
+ }
+ return;
+ }
+
+ // 4. COMMENT TOGGLE
+ const commentBtn = target.closest('.icon-btn');
+ if (commentBtn && !commentBtn.querySelector('.heart-icon') && !commentBtn.closest('.post-actions').querySelector('.action-left').contains(commentBtn) === false) {
+ // The comment button is the second one in action-left.
+ // Easier check:
+ const svgs = commentBtn.innerHTML;
+ if (svgs.includes('M21 11.5')) {
+ const postCard = commentBtn.closest('.post-card');
+ const commentSection = postCard.querySelector('.comment-section');
+ commentSection.classList.toggle('active');
+ if (commentSection.classList.contains('active')) {
+ commentSection.querySelector('input').focus();
+ }
+ return;
+ }
+ }
+
+ // 5. POST COMMENT
+ if (target.classList.contains('post-btn')) {
+ const wrapper = target.closest('.comment-input-wrapper');
+ const input = wrapper.querySelector('.comment-input');
+ const text = input.value.trim();
+ const postCard = wrapper.closest('.post-card');
+ const postId = postCard.getAttribute('data-post-id');
+
+ if (text) {
+ addComment(wrapper.closest('.comment-section'), text);
+ if (postId) {
+ const state = getPostState();
+ if (!state[postId]) state[postId] = { liked: false, likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] };
+ if (!state[postId].comments) state[postId].comments = [];
+ state[postId].comments.push(text);
+ savePostState(state);
+ }
+ input.value = '';
+ }
+ }
+ });
+
+ // Enter key for comments
+ feedView.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && e.target.classList.contains('comment-input')) {
+ const text = e.target.value.trim();
+ const wrapper = e.target.closest('.comment-input-wrapper');
+ const postCard = wrapper.closest('.post-card');
+ const postId = postCard.getAttribute('data-post-id');
+
+ if (text) {
+ addComment(e.target.closest('.comment-section'), text);
+ if (postId) {
+ const state = getPostState();
+ if (!state[postId]) state[postId] = { liked: false, likesCount: parseInt(postCard.querySelector('.likes').innerText) || 0, comments: [] };
+ if (!state[postId].comments) state[postId].comments = [];
+ state[postId].comments.push(text);
+ savePostState(state);
+ }
+ e.target.value = '';
+ }
+ }
+ });
+
+ // Close menus
+ document.addEventListener('click', (e) => {
+ if (!e.target.closest('.options-menu') && !e.target.closest('.options-trigger')) {
+ document.querySelectorAll('.options-menu.active').forEach(m => m.classList.remove('active'));
+ }
+ });
+ }
+
+ function addComment(section, text) {
+ const container = section.querySelector('.added-comments');
+ const commentEl = document.createElement('div');
+ commentEl.classList.add('comment-item');
+ commentEl.innerHTML = ` ${text}`;
+ container.appendChild(commentEl);
+ }
+
+ // --- CREATE POST LOGIC ---
+ // Navigation
+ if (navPostBtn) {
+ navPostBtn.addEventListener('click', () => {
+ if (feedView && createPostView) {
+ feedView.classList.add('hidden');
+ createPostView.classList.remove('hidden');
+ createPostView.classList.add('fade-in');
+ }
+ });
+ }
+
+ // Cancel
+ if (cancelPostBtn) {
+ cancelPostBtn.addEventListener('click', () => {
+ resetPostForm();
+ createPostView.classList.add('hidden');
+ feedView.classList.remove('hidden');
+ });
+ }
+ // Home Nav
+ if (navHomeBtn) {
+ navHomeBtn.addEventListener('click', () => {
+ if (createPostView && !createPostView.classList.contains('hidden')) {
+ resetPostForm();
+ createPostView.classList.add('hidden');
+ feedView.classList.remove('hidden');
+ }
+ });
+ }
+
+ // Upload
+ if (uploadTrigger && imageInput) {
+ uploadTrigger.addEventListener('click', () => imageInput.click());
+ imageInput.addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ imagePreview.src = e.target.result;
+ imagePreview.classList.remove('hidden');
+ document.querySelector('.upload-placeholder').classList.add('hidden');
+ };
+ reader.readAsDataURL(file);
+ }
+ });
+ }
+
+ // Share
+ if (sharePostBtn) {
+ sharePostBtn.addEventListener('click', () => {
+ if (!imagePreview.src || imagePreview.classList.contains('hidden')) {
+ alert('Please select an image first.');
+ return;
+ }
+
+ const caption = captionInput.value.trim();
+ const imageSrc = imagePreview.src;
+ const id = 'post_' + Date.now();
+
+ const newPost = {
+ id,
+ imageSrc,
+ caption,
+ timestamp: new Date().toISOString(),
+ username: 'you',
+ likes: 0
+ };
+
+ const userPosts = JSON.parse(localStorage.getItem('socialAppUserPosts') || '[]');
+ userPosts.unshift(newPost);
+ localStorage.setItem('socialAppUserPosts', JSON.stringify(userPosts));
+
+ renderPost(newPost, true);
+ resetPostForm();
+ createPostView.classList.add('hidden');
+ feedView.classList.remove('hidden');
+
+ // Note: Don't need full reload, but let's ensure state is clean
+ });
+ }
+
+ function resetPostForm() {
+ if (imageInput) imageInput.value = '';
+ if (captionInput) captionInput.value = '';
+ if (imagePreview) {
+ imagePreview.src = '';
+ imagePreview.classList.add('hidden');
+ }
+ const ph = document.querySelector('.upload-placeholder');
+ if (ph) ph.classList.remove('hidden');
+ }
});
diff --git a/styles/main.css b/styles/main.css
index 51b702c..baac6e6 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -600,6 +600,57 @@ p {
margin-right: 5px;
}
+/* Options Menu */
+.post-header {
+ position: relative;
+ /* Context for menu */
+}
+
+.options-menu {
+ position: absolute;
+ top: 40px;
+ right: 15px;
+ background: rgba(20, 20, 22, 0.95);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border: 1px solid var(--glass-border);
+ border-radius: var(--radius-sm);
+ padding: 5px;
+ z-index: 10;
+ min-width: 120px;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+ display: none;
+}
+
+.options-menu.active {
+ display: block;
+ animation: fadeIn 0.2s ease-out;
+}
+
+.menu-btn {
+ width: 100%;
+ background: none;
+ border: none;
+ padding: 10px 15px;
+ text-align: left;
+ color: var(--text-main);
+ font-size: 14px;
+ cursor: pointer;
+ border-radius: 8px;
+ transition: background 0.2s;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.menu-btn:hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.menu-btn.delete {
+ color: #EF4444;
+}
+
/* Bottom Navigation */
.bottom-nav {
position: fixed;