Recent Chats: Add pin functionality (#5030) * feat: Implement pinned chat functionality in welcome screen * Highlight pinned / unpinned blocks * Reduce flash duration

1ff98e76f8a80f0d9025b2cc288bab8045c25335

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

Signed

Parents: a50fecee258da15b934c04e47b03a3891d4bfc71

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

     cursor: pointer;
     gap: 10px;
     border: 1px solid var(--SmartThemeBorderColor);
 +    position: relative;
+}
 .welcomeRecent .recentChatList .recentChat .avatar {

     transform: rotate(180deg);
+}
 +.welcomeRecent .recentChatList .recentChat .recentChatPinned {
 +    top: 1px;
 +    left: 1px;
 +    position: absolute;
 +    opacity: 0.8;
 +    color: var(--SmartThemeQuoteColor);
 +}
++
 @media screen and (max-width: 1000px) {
     .welcomePanel .welcomeShortcuts a span {
         display: none;

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

         {{#each chats}}
             {{#with this}}
             <div class="recentChat {{#if hidden}}hidden{{/if}} {{#if is_group}}group{{/if}}" data-file="{{chat_name}}" data-avatar="{{avatar}}" data-group="{{group}}">
 +                {{#if pinned}}
 +                    <div class="recentChatPinned">
 +                        <i class="fa-solid fa-thumbtack fa-fw fa-xs" title="Pinned chat" data-i18n="[title]Pinned chat"></i>
 +                    </div>
 +                {{/if}}
                 <div class="avatar" title="[Character] {{char_name}}&#10;File: {{avatar}}">
                     <img src="{{char_thumbnail}}" alt="{{char_name}}">
                 </div>

                         </div>
                         <small class="chatDate" title="{{date_long}}">{{date_short}}</small>
                         <div class="chatActions">
 +                            <button class="menu_button menu_button_icon pinChat {{#if pinned}}active{{/if}}" title="Pin chat" data-i18n="[title]Pin chat">
 +                                <i class="fa-solid fa-thumbtack fa-fw"></i>
 +                            </button>
                             <button class="menu_button menu_button_icon renameChat" title="Rename chat" data-i18n="[title]Rename chat">
                                 <i class="fa-solid fa-pen-to-square fa-fw"></i>
                             </button>

public/scripts/welcome-screen.js+170 -7 Viewed

 import { getMessageTimeStamp } from './RossAscends-mods.js';
 import { renderTemplateAsync } from './templates.js';
 import { accountStorage } from './util/AccountStorage.js';
 import { flashHighlight, sortMoments, timestampToMoment } from './utils.js';
 const assistantAvatarKey = 'assistant';
 +const pinnedChatsKey = 'pinnedChats';
 const defaultAssistantAvatar = 'default_Assistant.png';
 const DEFAULT_DISPLAYED = 3;
 const MAX_DISPLAYED = 15;
 +/**
 + * @typedef {Pick<RecentChat, 'group' | 'avatar' | 'file_name'>} PinnedChat
 + */
++
 +/**
 + * Manages pinned chat storage and operations.
 + */
 +class PinnedChatsManager {
 +    /** @type {Record<string, PinnedChat> | null} */
 +    static #cachedState = null;
++
 +    /**
 +     * Initializes the cached state from storage.
 +     * Should be called once on app init.
 +     */
 +    static init() {
 +        this.#cachedState = this.#loadFromStorage();
 +    }
++
 +    /**
 +     * Loads state from storage.
 +     * @returns {Record<string, PinnedChat>}
 +     */
 +    static #loadFromStorage() {
 +        const pinnedState = /** @type {Record<string, PinnedChat>} */ ({});
 +        const value = accountStorage.getItem(pinnedChatsKey);
 +        if (value) {
 +            try {
 +                Object.assign(pinnedState, JSON.parse(value));
 +            } catch (error) {
 +                console.warn('Failed to parse pinned chats from storage.', error);
 +            }
 +        }
 +        return pinnedState;
 +    }
++
 +    /**
 +     * Generates a key for pinned chat storage.
 +     * @param {RecentChat} recentChat Recent chat data
 +     * @returns {string} Key for pinned chat storage
 +     */
 +    static getKey(recentChat) {
 +        return `${recentChat.group ? 'group_' + recentChat.group : ''}${recentChat.avatar ? 'char_' + recentChat.avatar : ''}_${recentChat.file_name}`;
 +    }
++
 +    /**
 +     * Gets the pinned chat state from cache.
 +     * @returns {Record<string, PinnedChat>}
 +     */
 +    static getState() {
 +        if (this.#cachedState === null) {
 +            this.#cachedState = this.#loadFromStorage();
 +        }
 +        return this.#cachedState;
 +    }
++
 +    /**
 +     * Saves the pinned chat state to storage and updates cache.
 +     * @param {Record<string, PinnedChat>} state The state to save
 +     */
 +    static #saveState(state) {
 +        this.#cachedState = state;
 +        accountStorage.setItem(pinnedChatsKey, JSON.stringify(state));
 +    }
++
 +    /**
 +     * Checks if a chat is pinned.
 +     * @param {RecentChat} recentChat Recent chat data
 +     * @returns {boolean} True if the chat is pinned, false otherwise
 +     */
 +    static isPinned(recentChat) {
 +        const pinKey = this.getKey(recentChat);
 +        const pinState = this.getState();
 +        return pinKey in pinState;
 +    }
++
 +    /**
 +     * Toggles the pinned state of a chat.
 +     * @param {RecentChat} recentChat Recent chat data
 +     * @param {boolean} pinned New pinned state
 +     */
 +    static toggle(recentChat, pinned) {
 +        const pinKey = this.getKey(recentChat);
 +        const pinState = { ...this.getState() };
 +        if (pinned) {
 +            pinState[pinKey] = {
 +                group: recentChat.group,
 +                avatar: recentChat.avatar,
 +                file_name: recentChat.file_name,
 +            };
 +        } else {
 +            delete pinState[pinKey];
 +        }
 +        this.#saveState(pinState);
 +    }
++
 +    /**
 +     * Gets all pinned chats.
 +     * @returns {PinnedChat[]}
 +     */
 +    static getAll() {
 +        const pinState = this.getState();
 +        return Object.values(pinState);
 +    }
 +}
++
 export function getPermanentAssistantAvatar() {
     const assistantAvatar = accountStorage.getItem(assistantAvatarKey);
     if (assistantAvatar === null) {

+                }
             });
         });
 +        fragment.querySelectorAll('.recentChat .pinChat').forEach((pinButton) => {
 +            pinButton.addEventListener('click', async (event) => {
 +                event.stopPropagation();
 +                const chatItem = pinButton.closest('.recentChat');
 +                if (!chatItem) {
 +                    return;
 +                }
 +                const avatarId = chatItem.getAttribute('data-avatar');
 +                const groupId = chatItem.getAttribute('data-group');
 +                const fileName = chatItem.getAttribute('data-file');
 +                const recentChat = chats.find(c => c.chat_name === fileName && ((c.is_group && c.group === groupId) || (!c.is_group && c.avatar === avatarId)));
 +                if (!recentChat) {
 +                    console.error('Recent chat not found for pinning.');
 +                    return;
 +                }
 +                const currentlyPinned = PinnedChatsManager.isPinned(recentChat);
 +                PinnedChatsManager.toggle(recentChat, !currentlyPinned);
 +                await refreshWelcomeScreen({ flashChat: recentChat });
 +            });
 +        });
         chatElement.append(fragment.firstChild);
         if (expand) {
             chatElement.querySelectorAll('button.showMoreChats').forEach((button) => {

 /**
  * Reopens the welcome screen and restores the scroll position.
 + * @param {object} param Additional parameters
 + * @param {RecentChat} [param.flashChat] Recent chat to flash (if any)
  * @returns {Promise<void>}
  */
 async function refreshWelcomeScreen({ flashChat = null } = {}) {
     const chatElement = document.getElementById('chat');
     if (!chatElement) {
         console.error('Chat element not found');

     await openWelcomeScreen({ force: true, expand });
     // Restore scroll position or flash specific chat
 -    chatElement.scrollTop = scrollTop + (chatElement.scrollHeight - scrollHeight);
 +    if (flashChat) {
 +        const recentChats = Array.from(chatElement.querySelectorAll('.recentChat'));
 +        const chatToFlash = recentChats.find(el => {
 +            const file = el.getAttribute('data-file');
 +            const group = el.getAttribute('data-group');
 +            const avatar = el.getAttribute('data-avatar');
 +            return file === flashChat.chat_name &&
 +                ((flashChat.is_group && group === flashChat.group) || (!flashChat.is_group && avatar === flashChat.avatar));
 +        });
 +        if (chatToFlash instanceof HTMLElement) {
 +            chatElement.scrollTop = chatToFlash.offsetTop - chatElement.offsetTop - (chatToFlash.clientHeight / 2);
 +            flashHighlight($(chatToFlash), 1000);
 +        }
 +    } else {
 +        // Restore scroll position
 +        chatElement.scrollTop = scrollTop + (chatElement.scrollHeight - scrollHeight);
 +    }
+}
 /**

  * @property {string} group Group ID (if applicable)
  * @property {boolean} is_group Indicates if the chat is a group chat
  * @property {boolean} hidden Chat will be hidden by default
 + * @property {boolean} pinned Indicates if the chat is pinned
  */
 async function getRecentChats() {
     const response = await fetch('/api/chats/recent', {
         method: 'POST',
         headers: getRequestHeaders(),
         body: JSON.stringify({ max: MAX_DISPLAYED, pinned: PinnedChatsManager.getAll() }),
 +        cache: 'no-cache',
     });
     if (!response.ok) {

+    }
     const dataWithEntities = data
 -        .sort((a, b) => sortMoments(timestampToMoment(a.last_mes), timestampToMoment(b.last_mes)))
         .map(chat => ({ chat, character: characters.find(x => x.avatar === chat.avatar), group: groups.find(x => x.id === chat.group) }))
         .filter(t => t.character || t.group);
 +        .sort((a, b) => {
 +            const isAPinned = PinnedChatsManager.isPinned(a.chat);
 +            const isBPinned = PinnedChatsManager.isPinned(b.chat);
 +            const momentComparison = sortMoments(timestampToMoment(a.chat.last_mes), timestampToMoment(b.chat.last_mes));
++
 +            if (isAPinned && !isBPinned) {
 +                return -1;
 +            }
 +            if (!isAPinned && isBPinned) {
 +                return 1;
 +            }
++
 +            return momentComparison;
 +        });
     dataWithEntities.forEach(({ chat, character, group }, index) => {
         const chatTimestamp = timestampToMoment(chat.last_mes);

         chat.hidden = index >= DEFAULT_DISPLAYED;
         chat.avatar = chat.avatar || '';
         chat.group = chat.group || '';
 +        chat.pinned = PinnedChatsManager.isPinned(chat);
     });
     return dataWithEntities.map(t => t.chat);

+}
 export function initWelcomeScreen() {
 +    PinnedChatsManager.init();
++
     const events = [event_types.CHAT_CHANGED, event_types.APP_READY];
     for (const event of events) {
         eventSource.makeFirst(event, openWelcomeScreen);

src/endpoints/chats.js+15 -3 Viewed

 router.post('/recent', async function (request, response) {
     try {
         /** @typetypedef {{pngFile?: string, groupId?: string, filePath: string, mtime: number}[]} ChatFile */
 +        /** @type {ChatFile[]} */
         const allChatFiles = [];
 +        /** @type {import('../../public/scripts/welcome-screen.js').PinnedChat[]} */
 +        const pinnedChats = Array.isArray(request.body.pinned) ? request.body.pinned : [];
         const getCharacterChatFiles = async () => {
             const pngDirents = await fs.promises.readdir(request.user.directories.characters, { withFileTypes: true });

         await Promise.allSettled([getCharacterChatFiles(), getGroupChatFiles(), getRootChatFiles()]);
         const max = parseInt(request.body.max ?? Number.MAX_SAFE_INTEGER) + pinnedChats.length;
 -        const recentChats = allChatFiles.sort((a, b) => b.mtime - a.mtime).slice(0, max);
 +        const isPinned = (/** @type {ChatFile} */ chatFile) => pinnedChats.some(p => p.file_name === path.basename(chatFile.filePath) && (p.avatar === chatFile.pngFile || p.group === chatFile.groupId));
 +        const recentChats = allChatFiles.sort((a, b) => {
 +            const isAPinned = isPinned(a);
 +            const isBPinned = isPinned(b);
++
 +            if (isAPinned && !isBPinned) return -1;
 +            if (!isAPinned && isBPinned) return 1;
++
 +            return b.mtime - a.mtime;
 +        }).slice(0, max);
         const jsonFilesPromise = recentChats.map((file) => {
             const withMetadata = !!request.body.metadata;
             return file.groupId