Collapse welcome recent chats button

0c411398f057806e394b58948ae32108c2e165e5

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: ae0aa42e7a2497be1bfb5a8ff49d025eb1678ae2
3 files changed, +33 -0Ignore whitespace
public/css/welcome.css+8 -0
@@ -10,6 +10,13 @@
10 padding-bottom: 5px;10 padding-bottom: 5px;
11}11}
1212
13.welcomePanel.recentHidden .welcomeRecent,
14.welcomePanel.recentHidden .recentChatsTitle,
15.welcomePanel.recentHidden .hideRecentChats,
16.welcomePanel:not(.recentHidden) .showRecentChats {
17 display: none;
18}
19
13body.bubblechat .welcomePanel {20body.bubblechat .welcomePanel {
14 border-radius: 10px;21 border-radius: 10px;
15 background-color: var(--SmartThemeBotMesBlurTintColor);22 background-color: var(--SmartThemeBotMesBlurTintColor);
@@ -42,6 +49,7 @@ body.bubblechat .welcomePanel {
42.welcomePanel .welcomeHeaderVersionDisplay {49.welcomePanel .welcomeHeaderVersionDisplay {
43 font-size: calc(var(--mainFontSize) * 1.3);50 font-size: calc(var(--mainFontSize) * 1.3);
44 font-weight: 600;51 font-weight: 600;
52 flex-grow: 1;
45}53}
4654
47.welcomePanel .welcomeHeaderLogo {55.welcomePanel .welcomeHeaderLogo {
public/scripts/templates/welcomePanel.html+6 -0
@@ -2,6 +2,12 @@
2 <div class="welcomeHeaderTitle">2 <div class="welcomeHeaderTitle">
3 <img src="img/logo.png" alt="SillyTavern Logo" class="welcomeHeaderLogo">3 <img src="img/logo.png" alt="SillyTavern Logo" class="welcomeHeaderLogo">
4 <span class="welcomeHeaderVersionDisplay">{{version}}</span>4 <span class="welcomeHeaderVersionDisplay">{{version}}</span>
5 <div class="mes_button showRecentChats" title="Show recent chats" data-i18n="[title]Show recent chats">
6 <i class="fa-solid fa-circle-chevron-down fa-fw fa-lg"></i>
7 </div>
8 <div class="mes_button hideRecentChats" title="Hide recent chats" data-i18n="[title]Hide recent chats">
9 <i class="fa-solid fa-circle-xmark fa-fw fa-lg"></i>
10 </div>
5 </div>11 </div>
6 <div class="welcomeHeader">12 <div class="welcomeHeader">
7 <div class="recentChatsTitle" data-i18n="Recent Chats">13 <div class="recentChatsTitle" data-i18n="Recent Chats">
public/scripts/welcome-screen.js+19 -0
@@ -94,6 +94,25 @@ async function sendWelcomePanel() {
94 };94 };
95 const template = await renderTemplateAsync('welcomePanel', templateData);95 const template = await renderTemplateAsync('welcomePanel', templateData);
96 const fragment = document.createRange().createContextualFragment(template);96 const fragment = document.createRange().createContextualFragment(template);
97 fragment.querySelectorAll('.welcomePanel').forEach((root) => {
98 const recentHiddenClass = 'recentHidden';
99 const recentHiddenKey = 'WelcomePage_RecentChatsHidden';
100 if (accountStorage.getItem(recentHiddenKey) === 'true') {
101 root.classList.add(recentHiddenClass);
102 }
103 root.querySelectorAll('.showRecentChats').forEach((button) => {
104 button.addEventListener('click', () => {
105 root.classList.remove(recentHiddenClass);
106 accountStorage.setItem(recentHiddenKey, 'false');
107 });
108 });
109 root.querySelectorAll('.hideRecentChats').forEach((button) => {
110 button.addEventListener('click', () =>{
111 root.classList.add(recentHiddenClass);
112 accountStorage.setItem(recentHiddenKey, 'true');
113 });
114 });
115 });
97 fragment.querySelectorAll('.recentChat').forEach((item) => {116 fragment.querySelectorAll('.recentChat').forEach((item) => {
98 item.addEventListener('click', () => {117 item.addEventListener('click', () => {
99 const avatarId = item.getAttribute('data-avatar');118 const avatarId = item.getAttribute('data-avatar');