Collapse welcome recent chats button

This commit is contained in:
Cohee
2025-05-13 01:27:45 +03:00
parent ae0aa42e7a
commit 0c411398f0
3 changed files with 33 additions and 0 deletions

View File

@@ -10,6 +10,13 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
.welcomePanel.recentHidden .welcomeRecent,
.welcomePanel.recentHidden .recentChatsTitle,
.welcomePanel.recentHidden .hideRecentChats,
.welcomePanel:not(.recentHidden) .showRecentChats {
display: none;
}
body.bubblechat .welcomePanel { body.bubblechat .welcomePanel {
border-radius: 10px; border-radius: 10px;
background-color: var(--SmartThemeBotMesBlurTintColor); background-color: var(--SmartThemeBotMesBlurTintColor);
@@ -42,6 +49,7 @@ body.bubblechat .welcomePanel {
.welcomePanel .welcomeHeaderVersionDisplay { .welcomePanel .welcomeHeaderVersionDisplay {
font-size: calc(var(--mainFontSize) * 1.3); font-size: calc(var(--mainFontSize) * 1.3);
font-weight: 600; font-weight: 600;
flex-grow: 1;
} }
.welcomePanel .welcomeHeaderLogo { .welcomePanel .welcomeHeaderLogo {

View File

@@ -2,6 +2,12 @@
<div class="welcomeHeaderTitle"> <div class="welcomeHeaderTitle">
<img src="img/logo.png" alt="SillyTavern Logo" class="welcomeHeaderLogo"> <img src="img/logo.png" alt="SillyTavern Logo" class="welcomeHeaderLogo">
<span class="welcomeHeaderVersionDisplay">{{version}}</span> <span class="welcomeHeaderVersionDisplay">{{version}}</span>
<div class="mes_button showRecentChats" title="Show recent chats" data-i18n="[title]Show recent chats">
<i class="fa-solid fa-circle-chevron-down fa-fw fa-lg"></i>
</div>
<div class="mes_button hideRecentChats" title="Hide recent chats" data-i18n="[title]Hide recent chats">
<i class="fa-solid fa-circle-xmark fa-fw fa-lg"></i>
</div>
</div> </div>
<div class="welcomeHeader"> <div class="welcomeHeader">
<div class="recentChatsTitle" data-i18n="Recent Chats"> <div class="recentChatsTitle" data-i18n="Recent Chats">

View File

@@ -94,6 +94,25 @@ async function sendWelcomePanel() {
}; };
const template = await renderTemplateAsync('welcomePanel', templateData); const template = await renderTemplateAsync('welcomePanel', templateData);
const fragment = document.createRange().createContextualFragment(template); const fragment = document.createRange().createContextualFragment(template);
fragment.querySelectorAll('.welcomePanel').forEach((root) => {
const recentHiddenClass = 'recentHidden';
const recentHiddenKey = 'WelcomePage_RecentChatsHidden';
if (accountStorage.getItem(recentHiddenKey) === 'true') {
root.classList.add(recentHiddenClass);
}
root.querySelectorAll('.showRecentChats').forEach((button) => {
button.addEventListener('click', () => {
root.classList.remove(recentHiddenClass);
accountStorage.setItem(recentHiddenKey, 'false');
});
});
root.querySelectorAll('.hideRecentChats').forEach((button) => {
button.addEventListener('click', () =>{
root.classList.add(recentHiddenClass);
accountStorage.setItem(recentHiddenKey, 'true');
});
});
});
fragment.querySelectorAll('.recentChat').forEach((item) => { fragment.querySelectorAll('.recentChat').forEach((item) => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
const avatarId = item.getAttribute('data-avatar'); const avatarId = item.getAttribute('data-avatar');