User:Docmoates/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* SocialFeed v5 - Clean professional design */
if (mw.config.get("wgPageName").indexOf("User:Docmoates/Social") !== -1) {
mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(function() {
var $=jQuery,api=new mw.Api(),apiUrl=mw.util.wikiScript("api"),user=mw.config.get("wgUserName")||"Guest";
var ud={photo:localStorage.getItem("sf_photo_"+user)||"",bio:localStorage.getItem("sf_bio_"+user)||"",name:localStorage.getItem("sf_name_"+user)||user};
var pp={image:"",video:"",location:""},uf={};

function gi(n){return(n||"?").split(/[\s_]+/).map(function(w){return(w[0]||"").toUpperCase();}).join("").substring(0,2)||"?";}
function esc(t){var d=document.createElement("div");d.textContent=t;return d.innerHTML;}
function ago(ds){var s=Math.floor((Date.now()-new Date(ds))/1000);if(s<60)return"Just now";var m=Math.floor(s/60);if(m<60)return m+" min ago";var h=Math.floor(m/60);if(h<24)return h+"h ago";return Math.floor(h/24)+"d ago";}
function av(pic,name,sz){if(pic)return'<img src="'+esc(pic)+'">';return'<div class="sf-av-ph" style="font-size:'+(sz||14)+'px">'+gi(name)+'</div>';}
function om(id){$("#"+id).addClass("open");}
function cm(id){$("#"+id).removeClass("open");}
function upload(file,pre,prog){return api.getToken("csrf").then(function(tk){var ext=file.name.split(".").pop()||"jpg",fn=pre+"_"+user+"_"+Date.now()+"."+ext,fd=new FormData();fd.append("action","upload");fd.append("filename",fn);fd.append("file",file);fd.append("token",tk);fd.append("format","json");fd.append("ignorewarnings","1");return $.ajax({url:apiUrl,type:"POST",data:fd,processData:false,contentType:false,xhr:function(){var x=$.ajaxSettings.xhr();if(x.upload&&prog)x.upload.addEventListener("progress",function(e){if(e.lengthComputable)prog(Math.round(e.loaded/e.total*100));});return x;}});}).then(function(r){if(r.upload&&r.upload.imageinfo)return r.upload.imageinfo.url;throw new Error(r.error?r.error.info:"Upload failed");});}

// Hide Design Page button
setTimeout(function(){$('button,a').filter(function(){return $(this).text().indexOf('Design')!==-1;}).hide();},100);
setTimeout(function(){$('button,a').filter(function(){return $(this).text().indexOf('Design')!==-1;}).hide();},500);

var css='\
[class*="wikibox"]{display:none!important}\
#social-app{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f5f5;min-height:100vh;padding:20px}\
#social-app *{box-sizing:border-box;margin:0;padding:0}\
.sf-layout{display:flex;gap:24px;max-width:1100px;margin:0 auto}\
.sf-main{flex:1;min-width:0}\
.sf-sidebar{width:280px;flex-shrink:0}\
.sf-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,0.08);margin-bottom:20px;overflow:hidden}\
.sf-profile-card .sf-card-header{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:16px 20px;font-weight:600;font-size:15px}\
.sf-profile-card .sf-card-body{padding:0}\
.sf-profile-row{display:flex;padding:14px 20px;border-bottom:1px solid #f0f0f0;font-size:14px}\
.sf-profile-row:last-child{border-bottom:none}\
.sf-profile-label{width:110px;color:#666;font-weight:500}\
.sf-profile-value{flex:1;color:#333}\
.sf-profile-value a{color:#0095f6;text-decoration:none}\
.sf-compose{padding:20px}\
.sf-compose-toolbar{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #eee;margin-bottom:16px}\
.sf-toolbar-btn{background:#f5f5f5;border:1px solid #e0e0e0;padding:8px 12px;border-radius:6px;font-size:13px;cursor:pointer;font-weight:500;color:#333}\
.sf-toolbar-btn:hover{background:#eee}\
.sf-compose-main{display:flex;gap:16px}\
.sf-compose-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0}\
.sf-compose-avatar img{width:100%;height:100%;object-fit:cover}\
.sf-av-ph{width:100%;height:100%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;border-radius:50%}\
.sf-compose-input{flex:1;border:none;resize:none;font-size:15px;outline:none;font-family:inherit;min-height:80px;color:#333}\
.sf-compose-input::placeholder{color:#999}\
.sf-compose-preview{margin-top:12px;display:none}\
.sf-compose-preview.show{display:block}\
.sf-compose-preview img{max-width:100%;max-height:200px;border-radius:12px}\
.sf-compose-loc{margin-top:10px;font-size:13px;color:#ef4444;display:none;align-items:center;gap:6px}\
.sf-compose-loc.show{display:flex}\
.sf-compose-loc button{background:none;border:none;cursor:pointer;color:#999;margin-left:4px}\
.sf-compose-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid #eee}\
.sf-action-btns{display:flex;gap:8px}\
.sf-action-btn{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform 0.15s}\
.sf-action-btn:hover{transform:scale(1.1)}\
.sf-action-btn.gif{background:#10b981;color:#fff}\
.sf-action-btn.photo{background:#3b82f6;color:#fff}\
.sf-action-btn.check{background:#6366f1;color:#fff}\
.sf-action-btn.person{background:#0ea5e9;color:#fff}\
.sf-action-btn.emoji{background:#f59e0b;color:#fff}\
.sf-action-btn.video{background:#ef4444;color:#fff}\
.sf-action-btn.location{background:#ec4899;color:#fff}\
.sf-action-btn.file{background:#6b7280;color:#fff}\
.sf-share-btn{background:#f5f5f5;border:1px solid #e0e0e0;padding:10px 16px;border-radius:8px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px}\
.sf-share-btn:hover{background:#eee}\
.sf-post-btn{background:#3b82f6;color:#fff;border:none;padding:12px 28px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer}\
.sf-post-btn:disabled{opacity:0.4;cursor:default}\
.sf-post-btn:not(:disabled):hover{background:#2563eb}\
.sf-post{padding:0}\
.sf-post-header{display:flex;align-items:center;gap:14px;padding:18px 20px}\
.sf-post-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden}\
.sf-post-avatar img{width:100%;height:100%;object-fit:cover}\
.sf-post-info{flex:1}\
.sf-post-name{font-weight:600;font-size:15px;color:#333;display:flex;align-items:center;gap:8px}\
.sf-post-badge{width:18px;height:18px}\
.sf-post-time{font-size:13px;color:#888;margin-top:2px}\
.sf-post-actions-top{display:flex;gap:8px}\
.sf-post-action-btn{width:32px;height:32px;border-radius:8px;border:1px solid #e0e0e0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#666}\
.sf-post-action-btn:hover{background:#f5f5f5}\
.sf-post-content{padding:0 20px 16px;font-size:15px;line-height:1.5;color:#333}\
.sf-post-media{border-radius:0}\
.sf-post-media img{width:100%;display:block}\
.sf-post-media video{width:100%}\
.sf-post-media iframe{width:100%;height:400px;border:none}\
.sf-post-footer{padding:16px 20px;display:flex;gap:20px;border-top:1px solid #f0f0f0}\
.sf-post-react{background:none;border:none;cursor:pointer;font-size:22px;padding:0}\
.sf-post-react:hover{transform:scale(1.15)}\
.sf-post-react.liked{color:#ef4444}\
.sf-post-stats{padding:0 20px 12px;font-size:14px;color:#333}\
.sf-post-stats b{font-weight:600}\
.sf-post-comments-link{padding:0 20px 12px;font-size:14px;color:#888;cursor:pointer}\
.sf-post-comments-link:hover{color:#333}\
.sf-post-comments{display:none;padding:0 20px 16px;max-height:200px;overflow-y:auto}\
.sf-post-comments.show{display:block}\
.sf-comment{display:flex;gap:10px;margin-bottom:12px}\
.sf-comment-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}\
.sf-comment-avatar img{width:100%;height:100%;object-fit:cover}\
.sf-comment-body{flex:1}\
.sf-comment-text{font-size:14px;line-height:1.4}\
.sf-comment-text b{font-weight:600}\
.sf-comment-time{font-size:12px;color:#888;margin-top:3px}\
.sf-comment-form{display:flex;gap:12px;padding:14px 20px;border-top:1px solid #f0f0f0;align-items:center}\
.sf-comment-input{flex:1;border:none;font-size:14px;outline:none;background:transparent}\
.sf-comment-input::placeholder{color:#999}\
.sf-comment-submit{background:none;border:none;color:#3b82f6;font-weight:600;cursor:pointer;font-size:14px}\
.sf-empty{text-align:center;padding:60px 20px}\
.sf-empty-icon{font-size:48px;margin-bottom:16px}\
.sf-empty-title{font-size:20px;font-weight:500;margin-bottom:8px;color:#333}\
.sf-empty-text{color:#888;font-size:14px}\
.sf-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;padding:20px}\
.sf-modal.open{display:flex}\
.sf-modal-box{background:#fff;border-radius:16px;width:100%;max-width:420px;max-height:85vh;overflow:auto}\
.sf-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #eee}\
.sf-modal-title{font-weight:600;font-size:17px}\
.sf-modal-x{background:none;border:none;font-size:24px;cursor:pointer;color:#666;line-height:1}\
.sf-modal-body{padding:20px}\
.sf-tabs{display:flex;border-bottom:1px solid #eee}\
.sf-tab{flex:1;padding:14px;text-align:center;cursor:pointer;font-weight:600;font-size:14px;color:#888;border-bottom:2px solid transparent;margin-bottom:-1px}\
.sf-tab.active{color:#333;border-bottom-color:#3b82f6}\
.sf-panel{display:none;padding:20px}\
.sf-panel.active{display:block}\
.sf-upload{border:2px dashed #ddd;border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:all 0.2s}\
.sf-upload:hover{border-color:#3b82f6;background:#f8faff}\
.sf-upload input{display:none}\
.sf-upload-icon{font-size:40px;margin-bottom:12px}\
.sf-upload-text{color:#888;font-size:14px}\
.sf-input{width:100%;padding:14px;border:1px solid #ddd;border-radius:10px;font-size:14px;margin-bottom:14px;outline:none}\
.sf-input:focus{border-color:#3b82f6}\
.sf-textarea{width:100%;padding:14px;border:1px solid #ddd;border-radius:10px;font-size:14px;margin-bottom:14px;outline:none;resize:vertical;min-height:80px;font-family:inherit}\
.sf-textarea:focus{border-color:#3b82f6}\
.sf-preview{width:100%;max-height:150px;object-fit:contain;border-radius:10px;margin-top:12px;display:none}\
.sf-preview.show{display:block}\
.sf-progress{height:4px;background:#eee;border-radius:2px;margin-top:12px;overflow:hidden;display:none}\
.sf-progress.show{display:block}\
.sf-progress-bar{height:100%;background:#3b82f6;width:0;transition:width 0.3s}\
.sf-btn-row{display:flex;gap:10px;margin-top:20px}\
.sf-btn{flex:1;padding:14px;border:none;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer}\
.sf-btn-primary{background:#3b82f6;color:#fff}\
.sf-btn-primary:hover{background:#2563eb}\
.sf-btn-secondary{background:#f5f5f5;color:#333;border:1px solid #e0e0e0}\
.sf-btn-secondary:hover{background:#eee}\
@media(max-width:900px){.sf-sidebar{display:none}.sf-layout{max-width:700px}}';
$("<style>").text(css).appendTo("head");

var h='<div class="sf-layout"><div class="sf-main">';

// Composer
h+='<div class="sf-card sf-compose">';
h+='<div class="sf-compose-toolbar"><button class="sf-toolbar-btn"><b>B</b></button><button class="sf-toolbar-btn"><i>I</i></button><button class="sf-toolbar-btn"><u>U</u></button><button class="sf-toolbar-btn">Text Color ▾</button><button class="sf-toolbar-btn">Outline ▾</button></div>';
h+='<div class="sf-compose-main"><div class="sf-compose-avatar" id="composer-avatar">'+av(ud.photo,user,18)+'</div><textarea class="sf-compose-input" id="post-input" placeholder="What\'s on your mind, '+esc(user.split(/[\s_]/)[0])+'?"></textarea></div>';
h+='<div class="sf-compose-preview" id="post-preview"></div>';
h+='<div class="sf-compose-loc" id="post-location">📍 <span></span><button id="remove-location">✕</button></div>';
h+='<div class="sf-compose-actions"><div class="sf-action-btns">';
h+='<button class="sf-action-btn gif" title="GIF">GIF</button>';
h+='<button class="sf-action-btn photo" id="btn-add-photo" title="Photo">🖼</button>';
h+='<button class="sf-action-btn check" title="Poll">✓</button>';
h+='<button class="sf-action-btn person" title="Tag">👤</button>';
h+='<button class="sf-action-btn emoji" id="btn-add-emoji" title="Emoji">😊</button>';
h+='<button class="sf-action-btn video" id="btn-add-video" title="Video">🎬</button>';
h+='<button class="sf-action-btn location" id="btn-add-location" title="Location">📍</button>';
h+='<button class="sf-action-btn file" title="File">📁</button>';
h+='</div>';
h+='<button class="sf-share-btn">Share to... ▾</button>';
h+='<button class="sf-post-btn" id="btn-submit-post" disabled>Post</button>';
h+='</div></div>';

// Feed
h+='<div class="sf-feed" id="feed-container"></div>';
h+='</div>';

// Sidebar
h+='<div class="sf-sidebar"><div class="sf-card sf-profile-card">';
h+='<div class="sf-card-header">Profile Details</div>';
h+='<div class="sf-card-body">';
h+='<div class="sf-profile-row"><div class="sf-profile-label">Username</div><div class="sf-profile-value">@'+esc(user)+'</div></div>';
h+='<div class="sf-profile-row"><div class="sf-profile-label">Member Since</div><div class="sf-profile-value">January 1, 2026</div></div>';
h+='<div class="sf-profile-row"><div class="sf-profile-label">Location</div><div class="sf-profile-value" id="profile-location">'+(ud.bio||"Not set")+'</div></div>';
h+='<div class="sf-profile-row"><div class="sf-profile-label">Total Posts</div><div class="sf-profile-value" id="total-posts">0</div></div>';
h+='<div class="sf-profile-row"><div class="sf-profile-label">Website</div><div class="sf-profile-value"><a href="https://docmoates.com" target="_blank">docmoates.com</a></div></div>';
h+='</div></div>';
h+='<button class="sf-btn sf-btn-secondary" style="width:100%" id="edit-profile-btn">Edit Profile</button>';
h+='</div></div>';

// Modals
h+='<div class="sf-modal" id="modal-edit-profile"><div class="sf-modal-box"><div class="sf-modal-head"><span class="sf-modal-title">Edit Profile</span><button class="sf-modal-x" data-close="modal-edit-profile">✕</button></div><div class="sf-modal-body"><label style="font-weight:600;font-size:13px;display:block;margin-bottom:8px">Display Name</label><input class="sf-input" id="input-display-name" value="'+esc(ud.name)+'"><label style="font-weight:600;font-size:13px;display:block;margin-bottom:8px">Location / Bio</label><textarea class="sf-textarea" id="input-bio" placeholder="Your location or short bio...">'+esc(ud.bio)+'</textarea><label style="font-weight:600;font-size:13px;display:block;margin-bottom:8px">Profile Photo</label><div class="sf-upload" id="zone-profile-pic"><input type="file" accept="image/*"><div class="sf-upload-icon">📷</div><div class="sf-upload-text">Click to upload photo</div></div><div class="sf-progress" id="progress-profile-pic"><div class="sf-progress-bar"></div></div><img class="sf-preview" id="preview-profile-pic"><div class="sf-btn-row"><button class="sf-btn sf-btn-secondary" data-close="modal-edit-profile">Cancel</button><button class="sf-btn sf-btn-primary" id="save-profile">Save Changes</button></div></div></div></div>';

h+='<div class="sf-modal" id="modal-photo"><div class="sf-modal-box"><div class="sf-modal-head"><span class="sf-modal-title">Add Photo</span><button class="sf-modal-x" data-close="modal-photo">✕</button></div><div class="sf-tabs"><div class="sf-tab active" data-panel="panel-photo-upload">Upload</div><div class="sf-tab" data-panel="panel-photo-url">URL</div></div><div class="sf-panel active" id="panel-photo-upload"><div class="sf-upload" id="zone-photo"><input type="file" accept="image/*"><div class="sf-upload-icon">📷</div><div class="sf-upload-text">Click to upload</div></div><div class="sf-progress" id="progress-photo"><div class="sf-progress-bar"></div></div><img class="sf-preview" id="preview-photo"></div><div class="sf-panel" id="panel-photo-url"><input class="sf-input" id="input-photo-url" placeholder="Paste image URL..."><img class="sf-preview" id="preview-photo-url"></div><div class="sf-btn-row" style="padding:0 20px 20px"><button class="sf-btn sf-btn-secondary" data-close="modal-photo">Cancel</button><button class="sf-btn sf-btn-primary" id="add-photo">Add Photo</button></div></div></div>';

$("#social-app").html(h);
var $a=$("#social-app");

$a.on("click","[data-close]",function(){cm($(this).data("close"));});
$a.on("click",".sf-modal",function(e){if($(e.target).hasClass("sf-modal"))cm(this.id);});
$a.on("click",".sf-tab",function(){var $t=$(this),$p=$("#"+$t.data("panel"));$t.addClass("active").siblings().removeClass("active");$p.addClass("active").siblings(".sf-panel").removeClass("active");});

function suz(zid,pid,prid,fk){var $z=$("#"+zid),$i=$z.find("input"),$pv=$("#"+pid),$pr=$("#"+prid);$z.on("click",function(){$i.click();});$i.on("change",function(){if(this.files.length){var f=this.files[0];uf[fk]=f;if(f.type.startsWith("image/")){var r=new FileReader();r.onload=function(e){$pv.attr("src",e.target.result).addClass("show");};r.readAsDataURL(f);}}});return{reset:function(){uf[fk]=null;$pv.removeClass("show").attr("src","");$pr.removeClass("show").find(".sf-progress-bar").css("width",0);$i.val("");},setP:function(p){$pr.addClass("show").find(".sf-progress-bar").css("width",p+"%");}};}

var upPic=suz("zone-profile-pic","preview-profile-pic","progress-profile-pic","profilePic");
var upPho=suz("zone-photo","preview-photo","progress-photo","photo");

$("#input-photo-url").on("input",function(){var v=$(this).val();$("#preview-photo-url").attr("src",v).toggleClass("show",!!v);});

$("#edit-profile-btn").on("click",function(){upPic.reset();om("modal-edit-profile");});
$("#save-profile").on("click",function(){
  ud.name=$("#input-display-name").val().trim()||user;
  ud.bio=$("#input-bio").val().trim();
  localStorage.setItem("sf_name_"+user,ud.name);
  localStorage.setItem("sf_bio_"+user,ud.bio);
  $("#profile-location").text(ud.bio||"Not set");
  if(uf.profilePic){
    upload(uf.profilePic,"ProfilePic",upPic.setP).then(function(u){
      ud.photo=u;localStorage.setItem("sf_photo_"+user,u);
      $("#composer-avatar").html(av(u,user,18));
      cm("modal-edit-profile");upPic.reset();
    }).fail(function(){alert("Upload error");});
  }else{cm("modal-edit-profile");}
});

$("#btn-add-photo").on("click",function(){upPho.reset();$("#input-photo-url").val("");$("#preview-photo-url").removeClass("show");om("modal-photo");});
$("#add-photo").on("click",function(){var ap=$("#modal-photo .sf-tab.active").data("panel");if(ap==="panel-photo-url"){var u=$("#input-photo-url").val().trim();if(u){pp.image=u;$("#post-preview").addClass("show").html('<img src="'+u+'" style="max-width:100%;max-height:200px;border-radius:12px">');upd();cm("modal-photo");}else alert("Enter a URL");}else if(uf.photo){upload(uf.photo,"Post",upPho.setP).then(function(u){pp.image=u;$("#post-preview").addClass("show").html('<img src="'+u+'" style="max-width:100%;max-height:200px;border-radius:12px">');upd();cm("modal-photo");upPho.reset();}).fail(function(){alert("Upload error");});}else alert("Select an image");});

$("#btn-add-location").on("click",function(){var l=prompt("Enter location:");if(l){pp.location=l;$("#post-location").addClass("show").find("span").text(l);}});
$a.on("click","#remove-location",function(){pp.location="";$("#post-location").removeClass("show");});
$("#btn-add-emoji").on("click",function(){var e=prompt("Enter emoji:");if(e){var $i=$("#post-input")[0];var s=$i.selectionStart,v=$i.value;$i.value=v.slice(0,s)+e+v.slice($i.selectionEnd);$i.selectionStart=$i.selectionEnd=s+e.length;$i.focus();upd();}});

$("#post-input").on("input",upd);
function upd(){var h=$("#post-input").val().trim()||pp.image||pp.video;$("#btn-submit-post").prop("disabled",!h);}

$("#btn-submit-post").on("click",function(){var t=$("#post-input").val().trim();if(!t&&!pp.image&&!pp.video)return;var $b=$(this);$b.prop("disabled",true).text("Posting...");var p={action:"socialfeed",sfaction:"createpost",content:t||"(media)"};if(pp.image)p.image_url=pp.image;if(pp.video)p.video_url=pp.video;if(pp.location)p.location=pp.location;api.postWithToken("csrf",p).then(function(){$("#post-input").val("");pp={image:"",video:"",location:""};$("#post-preview").removeClass("show").html("");$("#post-location").removeClass("show");$b.prop("disabled",true).text("Post");loadP();}).fail(function(c,d){alert("Error: "+(d&&d.error?d.error.info:c));$b.prop("disabled",false).text("Post");});});

$a.on("click",".sf-post-react[data-like]",function(){var id=$(this).data("like");api.postWithToken("csrf",{action:"socialfeed",sfaction:"react",post_id:id,reaction_type:"like"}).then(loadP);});
$a.on("click",".sf-post-action-btn[data-del]",function(){if(confirm("Delete this post?")){api.postWithToken("csrf",{action:"socialfeed",sfaction:"deletepost",post_id:$(this).data("del")}).then(loadP);}});
$a.on("click",".sf-post-comments-link",function(){var id=$(this).data("post"),$s=$("#cmts-"+id);if($s.hasClass("show"))$s.removeClass("show");else{$s.addClass("show");loadC(id);}});
$a.on("keypress",".sf-comment-input",function(e){if(e.which===13){var $i=$(this),t=$i.val().trim(),id=$i.data("post");if(t){$i.val("").prop("disabled",true);api.postWithToken("csrf",{action:"socialfeed",sfaction:"comment",post_id:id,content:t}).then(function(){$i.prop("disabled",false);loadC(id);loadP();}).fail(function(){$i.prop("disabled",false);});}}});

function loadP(){api.get({action:"socialfeed",sfaction:"getposts",limit:20}).then(function(r){var ps=(r.socialfeed&&r.socialfeed.posts)||[];$("#total-posts").text(ps.length);if(!ps.length){$("#feed-container").html('<div class="sf-card"><div class="sf-empty"><div class="sf-empty-icon">📷</div><div class="sf-empty-title">Share Photos</div><div class="sf-empty-text">When you share photos, they will appear here.</div></div></div>');return;}var h=ps.map(function(p){var up=localStorage.getItem("sf_photo_"+p.username)||"",tr=0;for(var k in p.reaction_counts)tr+=p.reaction_counts[k];var m="";if(p.image_url)m='<div class="sf-post-media"><img src="'+esc(p.image_url)+'"></div>';if(p.video_url){if(p.video_url.match(/youtube|youtu\.be/)){var vi=(p.video_url.match(/(?:v=|youtu\.be\/)([^&]+)/)||[])[1];if(vi)m='<div class="sf-post-media"><iframe src="https://www.youtube.com/embed/'+vi+'" allowfullscreen></iframe></div>';}else m='<div class="sf-post-media"><video src="'+esc(p.video_url)+'" controls></video></div>';}var del=p.username===user?'<button class="sf-post-action-btn" data-del="'+p.id+'" title="Delete">✕</button>':"";var lc=p.user_reaction==="like"?" liked":"";return'<div class="sf-card sf-post"><div class="sf-post-header"><div class="sf-post-avatar">'+av(up,p.username,16)+'</div><div class="sf-post-info"><div class="sf-post-name">'+esc(p.username)+'</div><div class="sf-post-time">'+ago(p.created)+'</div></div><div class="sf-post-actions-top"><button class="sf-post-action-btn" title="Edit">✎</button>'+del+'</div></div>'+m+(p.content&&p.content!=="(media)"?'<div class="sf-post-content">'+esc(p.content)+'</div>':'')+'<div class="sf-post-footer"><button class="sf-post-react'+lc+'" data-like="'+p.id+'">'+(p.user_reaction==="like"?"❤️":"🤍")+'</button><button class="sf-post-react">💬</button><button class="sf-post-react">📤</button><button class="sf-post-react">🔖</button></div>'+(tr?'<div class="sf-post-stats"><b>'+tr+"</b> like"+(tr>1?"s":"")+"</div>":"")+(p.comments?'<div class="sf-post-comments-link" data-post="'+p.id+'">View all '+p.comments+" comment"+(p.comments>1?"s":"")+"</div>":"")+'<div class="sf-post-comments" id="cmts-'+p.id+'"></div><div class="sf-comment-form"><input class="sf-comment-input" data-post="'+p.id+'" placeholder="Add a comment..."><button class="sf-comment-submit">Post</button></div></div>';}).join("");$("#feed-container").html(h);});}

function loadC(id){api.get({action:"socialfeed",sfaction:"getcomments",post_id:id}).then(function(r){var cs=(r.socialfeed&&r.socialfeed.comments)||[];var h=cs.map(function(c){var up=localStorage.getItem("sf_photo_"+c.username)||"";return'<div class="sf-comment"><div class="sf-comment-avatar">'+av(up,c.username,11)+'</div><div class="sf-comment-body"><div class="sf-comment-text"><b>'+esc(c.username)+"</b> "+esc(c.content)+'</div><div class="sf-comment-time">'+ago(c.created)+"</div></div></div>";}).join("");$("#cmts-"+id).html(h||'<div style="color:#888;font-size:13px;padding:8px 0">No comments yet</div>');});}

loadP();
});
}