diff --git a/content.js b/content.js index e29cffc..2dae07e 100644 --- a/content.js +++ b/content.js @@ -26,7 +26,9 @@ const chatOrganizerState = { draftCategoryName: "", draftChatId: "", visibleChatsExpanded: false, - expandedCategoryIds: {} + expandedCategoryIds: {}, + createPanelOpen: false, + addPanelOpen: false }; function getOrganizerRoot() { @@ -294,6 +296,22 @@ function toggleVisibleChatsExpanded() { renderChatOrganizer(); } +function toggleCreatePanel() { + chatOrganizerState.createPanelOpen = !chatOrganizerState.createPanelOpen; + if (chatOrganizerState.createPanelOpen) { + chatOrganizerState.addPanelOpen = false; + } + renderChatOrganizer(); +} + +function toggleAddPanel() { + chatOrganizerState.addPanelOpen = !chatOrganizerState.addPanelOpen; + if (chatOrganizerState.addPanelOpen) { + chatOrganizerState.createPanelOpen = false; + } + renderChatOrganizer(); +} + function renderChatCard(chatId, categoryId) { const meta = getChatMeta(chatId) || { id: chatId, name: chatId, avatarUrl: "" }; const avatar = meta.avatarUrl @@ -417,6 +435,20 @@ function ensureChatOrganizerUI() { gap: 16px; } + .teams-alias-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + padding: 16px 20px 0; + } + + .teams-alias-toolbar-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + } + .teams-alias-panel { border: 1px solid #e5e7eb; border-radius: 14px; @@ -459,6 +491,17 @@ function ensureChatOrganizerUI() { color: #fff; } + .teams-alias-primary-button { + border: none; + border-radius: 10px; + padding: 9px 14px; + font-size: 13px; + cursor: pointer; + background: #2563eb; + color: #fff; + font-weight: 600; + } + .teams-alias-category-list, .teams-alias-visible-list, .teams-alias-chat-list { @@ -592,6 +635,13 @@ function ensureChatOrganizerUI() { display: none; } + .teams-alias-main-title { + margin: 0; + font-size: 14px; + font-weight: 600; + color: #334155; + } + @media (max-width: 900px) { .teams-alias-modal { left: 12px; @@ -635,6 +685,7 @@ function ensureChatOrganizerUI() { const input = root.querySelector('[data-role="new-category-name"]'); createCategory(input?.value || ""); chatOrganizerState.draftCategoryName = ""; + chatOrganizerState.createPanelOpen = false; return; } @@ -643,6 +694,16 @@ function ensureChatOrganizerUI() { return; } + if (action === "toggle-create-panel") { + toggleCreatePanel(); + return; + } + + if (action === "toggle-add-panel") { + toggleAddPanel(); + return; + } + if (action === "toggle-category") { toggleCategoryExpanded(actionElement.getAttribute("data-category-id")); return; @@ -657,6 +718,7 @@ function ensureChatOrganizerUI() { const input = root.querySelector('[data-role="chat-id-input"]'); addChatToCategory(chatOrganizerState.selectedCategoryId, input?.value || ""); chatOrganizerState.draftChatId = ""; + renderChatOrganizer(); return; } @@ -750,16 +812,26 @@ function renderChatOrganizer() {