Skip to content

Commit

Permalink
improve ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@f
f committed Feb 4, 2025
1 parent 1fbb25a commit 7c68845
Showing 1 changed file with 52 additions and 8 deletions.
60 changes: 52 additions & 8 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1462,16 +1462,22 @@ <h3>e-Books by @f</h3>
document.addEventListener('DOMContentLoaded', () => {
// Initialize dev mode
const devModeToggle = document.getElementById('devModeToggle');
const isDevMode = localStorage.getItem('dev-mode') === 'true';
devModeToggle.checked = isDevMode;
const initialDevMode = localStorage.getItem('dev-mode') === 'true';
devModeToggle.checked = initialDevMode;

// Initialize chat button icons
updateChatButtonIcons(initialDevMode);

// Handle dev mode toggle
devModeToggle.addEventListener('change', (e) => {
const isDevMode = e.target.checked;
localStorage.setItem('dev-mode', isDevMode);
const newDevMode = e.target.checked;
localStorage.setItem('dev-mode', newDevMode);

// Update chat button icons
updateChatButtonIcons(newDevMode);

// Check if we should show Copilot suggestion
if (isDevMode) {
if (newDevMode) {
const currentPlatform = document.querySelector('.platform-tag.active');
const shouldNotShow = localStorage.getItem('copilot-suggestion-hidden') === 'true';

Expand Down Expand Up @@ -1523,6 +1529,10 @@ <h3>e-Books by @f</h3>

// Initialize search functionality
initializeSearch();

// Initialize chat button icons on page load
const isDevMode = localStorage.getItem('dev-mode') === 'true';
updateChatButtonIcons(isDevMode);
});

// Search functionality
Expand Down Expand Up @@ -1854,9 +1864,13 @@ <h3>e-Books by @f</h3>
${title}
<div class="action-buttons">
<button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(content.trim())}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</button>
<button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(content.trim())}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
Expand Down Expand Up @@ -1963,9 +1977,13 @@ <h2 class="modal-title"></h2>
</div>
<div class="modal-footer-right">
<button class="modal-chat-button" onclick="openModalChat()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
Start Chat
</button>
</div>
Expand Down Expand Up @@ -1997,15 +2015,29 @@ <h2 class="modal-title"></h2>

// Update chat button text with platform name and handle visibility
const platform = document.querySelector('.platform-tag.active');
const isDevMode = document.getElementById('devModeToggle').checked;

if (platform) {
const shouldHideChat = ['gemini', 'llama'].includes(platform.dataset.platform);
modalChatButton.style.display = shouldHideChat ? 'none' : 'flex';

if (!shouldHideChat) {
const chatIcon = modalChatButton.querySelector('.chat-icon');
const terminalIcon = modalChatButton.querySelector('.terminal-icon');

if (chatIcon && terminalIcon) {
chatIcon.style.display = isDevMode ? 'none' : 'block';
terminalIcon.style.display = isDevMode ? 'block' : 'none';
}

modalChatButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${isDevMode ? 'none' : 'block'}">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${isDevMode ? 'block' : 'none'}">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
Chat with ${platform.textContent}
`;
}
Expand Down Expand Up @@ -2191,6 +2223,18 @@ <h2 class="modal-title"></h2>
document.body.style.overflow = '';
}
}

// Function to update chat button icons based on dev mode
function updateChatButtonIcons(isDevMode) {
document.querySelectorAll('.chat-button, .modal-chat-button').forEach(button => {
const chatIcon = button.querySelector('.chat-icon');
const terminalIcon = button.querySelector('.terminal-icon');
if (chatIcon && terminalIcon) {
chatIcon.style.display = isDevMode ? 'none' : 'block';
terminalIcon.style.display = isDevMode ? 'block' : 'none';
}
});
}
</script>
<style>video { max-width: 100% !important; }</style>
<!-- Google tag (gtag.js) -->
Expand Down

0 comments on commit 7c68845

Please sign in to comment.