Collapse welcome recent chats button

0c411398f057806e394b58948ae32108c2e165e5

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

public/css/welcome.css+8 -0 Viewed

     padding-bottom: 5px;
+}
 +.welcomePanel.recentHidden .welcomeRecent,
 +.welcomePanel.recentHidden .recentChatsTitle,
 +.welcomePanel.recentHidden .hideRecentChats,
 +.welcomePanel:not(.recentHidden) .showRecentChats {
 +    display: none;
 +}
++
 body.bubblechat .welcomePanel {
     border-radius: 10px;
     background-color: var(--SmartThemeBotMesBlurTintColor);

 .welcomePanel .welcomeHeaderVersionDisplay {
     font-size: calc(var(--mainFontSize) * 1.3);
     font-weight: 600;
 +    flex-grow: 1;
+}
 .welcomePanel .welcomeHeaderLogo {

public/scripts/templates/welcomePanel.html+6 -0 Viewed

     <div class="welcomeHeaderTitle">
         <img src="img/logo.png" alt="SillyTavern Logo" class="welcomeHeaderLogo">
         <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 class="welcomeHeader">
         <div class="recentChatsTitle" data-i18n="Recent Chats">

public/scripts/welcome-screen.js+19 -0 Viewed

         };
         const template = await renderTemplateAsync('welcomePanel', templateData);
         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) => {
             item.addEventListener('click', () => {
                 const avatarId = item.getAttribute('data-avatar');