aheh/thefeed
1
0
Fork 0
mirror of https://github.com/sartoopjj/thefeed.git synced 2026-05-19 10:46:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: show @handle subtitle in channel list and chat header; add mobile kebab menu

Browse Source 
- Channel list: always show @handle as subtitle below display name for Telegram channels
- Chat header: show @handle as subtitle below channel title
- Mobile (<768px): hide Search/Export buttons; show them in a ⋮ kebab menu (rightmost button)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sepehr
2026-04-20 19:17:12 -04:00
parent 85558074b4
commit 1496b00a94
1 changed files with 79 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/index.html
+79 -2
View File
@@ -329,6 +329,19 @@
text-overflow: ellipsis
}
.ch-sub {
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: .7
}
.ch-item.active .ch-sub {
color: rgba(255,255,255,.75)
}
.ch-badge {
background: #fff;
color: var(--accent);
@@ -1453,6 +1466,42 @@
}
/* ===== MOBILE ===== */
.header-kebab {
position: relative;
display: none
}
.header-kebab-menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
min-width: 150px;
z-index: 100;
display: none;
flex-direction: column;
overflow: hidden
}
.header-kebab-menu.open { display: flex }
.header-kebab-menu button {
width: 100%;
padding: 11px 16px;
background: none;
border: none;
color: var(--text);
font-size: 13px;
font-family: inherit;
cursor: pointer;
text-align: left
}
.header-kebab-menu button:hover { background: var(--hover) }
@media(max-width:768px) {
.app {
position: relative;
@@ -1494,6 +1543,10 @@
display: flex
}
.header-search-btn, .header-export-btn { display: none }
.header-kebab { display: flex }
.msg {
max-width: 90%
}
@@ -1569,17 +1622,25 @@
<button class="back-btn" onclick="openSidebar()">&#8592;</button>
<div class="chat-header-info">
<div class="chat-header-name" id="chatName">thefeed</div>
<div class="chat-header-sub" id="chatSub"></div>
</div>
<div class="chat-header-actions">
<span class="next-fetch-label" id="nextFetchTimer"></span><span class="next-fetch-info" id="nextFetchInfoBtn"
style="display:none" data-i18n-title="next_fetch_info" title="" onclick="showToast(t('next_fetch_info'))"
tabindex="0">ⓘ</span>
<button class="icon-btn" onclick="toggleMsgSearch()" title="Search" data-i18n-title="search_messages"
<button class="icon-btn header-search-btn" onclick="toggleMsgSearch()" title="Search" data-i18n-title="search_messages"
style="width:auto;height:30px;font-size:12px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface)" data-i18n="search_messages">Search</button>
<button class="icon-btn" onclick="openExportModal()" title="Export" data-i18n-title="export_messages"
<button class="icon-btn header-export-btn" onclick="openExportModal()" title="Export" data-i18n-title="export_messages"
style="width:auto;height:30px;font-size:12px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface)" data-i18n="export_messages">Export</button>
<button class="icon-btn" id="refreshBtn" onclick="doRefreshUI()" title="Refresh"
style="width:40px;height:40px;font-size:20px">&#8635;</button>
<div class="header-kebab" id="headerKebab">
<button class="icon-btn" onclick="toggleKebabMenu(event)" title="More" style="width:40px;height:40px;font-size:20px">&#8942;</button>
<div class="header-kebab-menu" id="headerKebabMenu">
<button onclick="toggleMsgSearch();closeKebabMenu()" data-i18n="search_messages">Search</button>
<button onclick="openExportModal();closeKebabMenu()" data-i18n="export_messages">Export</button>
</div>
</div>
</div>
</div>
<div class="msg-search-bar" id="msgSearchBar">
@@ -3129,7 +3190,9 @@
var badge = (previousMsgIDs[chNm2] > 0 && lastID > previousMsgIDs[chNm2] && num2 !== selectedChannel) ? '<span class="ch-badge">NEW</span>' : '';
h += '<div class="ch-item' + active + '" data-name="' + escAttr(handle) + '" data-label="' + escAttr(label) + '" onclick="selectChannel(' + num2 + ')">';
h += '<div class="ch-avatar">' + esc(avatarText) + '</div>';
var chSubText = !isX ? (handle.charAt(0) === '@' ? handle : '@' + handle) : '';
h += '<div class="ch-info"><div class="ch-name">' + esc(label) + (isPriv ? '<span class="ch-type-tag">' + t('private') + '</span>' : (isX ? '<span class="ch-type-tag x-tag">' + t('x_label') + '</span>' : '')) + '</div>';
if (chSubText) h += '<div class="ch-sub">' + esc(chSubText) + '</div>';
h += '<div class="ch-preview">' + badge + '</div></div></div>';
}
return h;
@@ -3158,6 +3221,10 @@
openChat();
var ch = channels[num - 1]; var name = (ch && (ch.DisplayName || ch.displayName || ch.Name || ch.name)) || 'Channel ' + num;
document.getElementById('chatName').textContent = name;
var chHandle = (ch && (ch.Name || ch.name)) || '';
var isXCh = ch && (ch.ChatType || ch.chatType) === 2;
var subHandle = (!isXCh && chHandle) ? (chHandle.charAt(0) === '@' ? chHandle : '@' + chHandle) : '';
document.getElementById('chatSub').textContent = subHandle;
renderChannels(); updateSendPanel();
document.getElementById('messages').innerHTML = '<div class="empty-state"><p>' + t('loading') + '</p></div>';
document.getElementById('scrollDownBtn').classList.remove('visible');
@@ -3993,6 +4060,16 @@
.replace(/[\u064B-\u065F\u0610-\u061A\u0670]/g, '') // strip tashkil/diacritics
.replace(/[\u200C\u200D\u200E\u200F]/g, '') // strip ZWNJ, ZWJ, directional marks
}
function toggleKebabMenu(e) {
e.stopPropagation();
document.getElementById('headerKebabMenu').classList.toggle('open');
}
function closeKebabMenu() {
var m = document.getElementById('headerKebabMenu');
if (m) m.classList.remove('open');
}
document.addEventListener('click', closeKebabMenu);
function toggleMsgSearch() {
var bar = document.getElementById('msgSearchBar');
if (bar.classList.contains('active')) { closeMsgSearch(); return }