slack status without the slack status.zzstoatzz.io
hatk statusphere
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

move embed code toggle next to share button

zzstoatzz fa0921ce a7eb0dc1

+57 -40
+35 -19
site/app.js
··· 877 877 ${current.text ? `<span id="current-text">${parseLinks(current.text)}</span>` : ''} 878 878 <span class="meta">since ${relativeTime(current.createdAt)}${expiresHtml}</span> 879 879 </div> 880 - <button class="share-btn current-share-btn" data-uri="${escapeHtml(current.uri)}" title="copy link"> 881 - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 882 - <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> 883 - <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> 884 - </svg> 885 - </button> 880 + <div class="current-status-actions"> 881 + <button class="share-btn current-share-btn" data-uri="${escapeHtml(current.uri)}" title="copy link"> 882 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 883 + <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> 884 + <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> 885 + </svg> 886 + </button> 887 + <button class="embed-toggle-btn" title="get embed code"> 888 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 889 + <polyline points="16 18 22 12 16 6"></polyline> 890 + <polyline points="8 6 2 12 8 18"></polyline> 891 + </svg> 892 + </button> 893 + </div> 886 894 `; 887 895 if (statuses.length > 1) { 888 896 historyHtml = '<section class="history"><h2>history</h2><div id="history-list">'; ··· 945 953 <div class="profile-card"> 946 954 <div class="current-status">${currentHtml}</div> 947 955 </div> 956 + <div class="embed-section hidden" id="embed-section"> 957 + <div class="embed-code-container"> 958 + <pre class="embed-code"><code>${escapeHtml(embedCode)}</code></pre> 959 + <button class="copy-embed-btn" title="copy code"> 960 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 961 + <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> 962 + <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> 963 + </svg> 964 + </button> 965 + </div> 966 + </div> 948 967 <form id="status-form" class="status-form"> 949 968 <div class="emoji-input-row"> 950 969 <button type="button" id="emoji-trigger" class="emoji-trigger"> ··· 970 989 </div> 971 990 </form> 972 991 ${historyHtml} 973 - <section class="embed-section"> 974 - <h2>embed your status</h2> 975 - <p class="embed-description">add this to your website to show your current status:</p> 976 - <div class="embed-code-container"> 977 - <pre class="embed-code"><code>${escapeHtml(embedCode)}</code></pre> 978 - <button class="copy-embed-btn" title="copy code"> 979 - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 980 - <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> 981 - <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> 982 - </svg> 983 - </button> 984 - </div> 985 - </section> 986 992 `; 987 993 988 994 // Set up emoji picker ··· 1077 1083 copyToClipboard(permalink, btn); 1078 1084 }); 1079 1085 }); 1086 + 1087 + // Embed toggle button 1088 + const embedToggleBtn = document.querySelector('.embed-toggle-btn'); 1089 + const embedSection = document.getElementById('embed-section'); 1090 + if (embedToggleBtn && embedSection) { 1091 + embedToggleBtn.addEventListener('click', () => { 1092 + embedSection.classList.toggle('hidden'); 1093 + embedToggleBtn.classList.toggle('active'); 1094 + }); 1095 + } 1080 1096 1081 1097 // Copy embed button 1082 1098 const copyEmbedBtn = document.querySelector('.copy-embed-btn');
+22 -21
site/styles.css
··· 395 395 position: relative; 396 396 } 397 397 398 - /* Share button on current status - always visible */ 399 - .current-share-btn { 398 + /* Current status action buttons */ 399 + .current-status-actions { 400 + display: flex; 401 + gap: 0.5rem; 402 + margin-top: 0.75rem; 403 + } 404 + 405 + .current-share-btn, 406 + .embed-toggle-btn { 400 407 opacity: 0.6; 401 - margin-top: 0.5rem; 408 + background: transparent; 409 + border: 1px solid var(--border); 410 + color: var(--text-secondary); 411 + cursor: pointer; 412 + padding: 0.5rem; 413 + border-radius: 6px; 414 + transition: opacity 0.15s, color 0.15s, border-color 0.15s; 402 415 } 403 416 404 - .current-share-btn:hover { 417 + .current-share-btn:hover, 418 + .embed-toggle-btn:hover, 419 + .embed-toggle-btn.active { 405 420 opacity: 1; 421 + color: var(--accent); 422 + border-color: var(--accent); 406 423 } 407 424 408 425 .delete-btn:hover { ··· 422 439 423 440 /* Embed section */ 424 441 .embed-section { 425 - margin-top: 2rem; 426 - padding-top: 1.5rem; 427 - border-top: 1px solid var(--border); 428 - } 429 - 430 - .embed-section h2 { 431 - font-size: 0.875rem; 432 - text-transform: uppercase; 433 - letter-spacing: 0.05em; 434 - color: var(--text-secondary); 435 - margin-bottom: 0.5rem; 436 - } 437 - 438 - .embed-description { 439 - font-size: 0.875rem; 440 - color: var(--text-secondary); 441 - margin-bottom: 1rem; 442 + margin-bottom: 1.5rem; 442 443 } 443 444 444 445 .embed-code-container {