Add Google AI Studio shortcut

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project partially follows [Semantic Versioning](https://semver.org/spec
 ### Added
 
 - Added support for touch-swipe and mouse-wheel gestures on the search engine icon to switch search engines when they are hidden ([@prem-k-r](https://github.com/prem-k-r)) ([#145](https://github.com/prem-k-r/MaterialYouNewTab/pull/145))
+- Added Google AI Studio to the AI Tools shortcuts ([#177](https://github.com/prem-k-r/MaterialYouNewTab/issues/177))
 - Added support for custom shortcut icons via upload, URL, or pasted SVG ([@smurf11k](https://github.com/smurf11k)), ([@prem-k-r](https://github.com/prem-k-r)) ([#187](https://github.com/prem-k-r/MaterialYouNewTab/pull/187/)), ([#199](https://github.com/prem-k-r/MaterialYouNewTab/pull/199/))
 - Added Daily Quote option to show one quote per day instead of refreshing on every new tab ([@KomeshBathula](https://github.com/KomeshBathula)) ([#141](https://github.com/prem-k-r/MaterialYouNewTab/pull/141))
 

index.html

@@ -1026,6 +1026,17 @@ <h2 id="editBookmarkHeading">Edit Bookmark</h2>
                 <div class="tLabel" id="gemini">Gemini</div>
             </a>
             <!-- ---------------- -->
+            <a href="https://aistudio.google.com/prompts/new_chat">
+                <div class="tIcon">
+                    <svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg">
+                        <rect class="accentColor aiDarkIcons" height="100%" rx="50%" width="100%" />
+                        <path class="bgLightTint notTargeted" style="transform: scale(0.78); transform-origin: center;"
+                            d="M12 2.5a.85.85 0 0 1 .816.61l1.536 5.202 4.99 2.01a.85.85 0 0 1 0 1.576l-4.99 2.01-1.536 5.202a.85.85 0 0 1-1.632 0l-1.536-5.202-4.99-2.01a.85.85 0 0 1 0-1.576l4.99-2.01 1.536-5.202A.85.85 0 0 1 12 2.5Zm0 3.955-.955 3.235a.85.85 0 0 1-.498.546l-3.09 1.245 3.09 1.245a.85.85 0 0 1 .498.546L12 16.503l.955-3.235a.85.85 0 0 1 .498-.546l3.09-1.245-3.09-1.245a.85.85 0 0 1-.498-.546L12 6.455ZM5.5 15.5a.75.75 0 0 1 .72.538l.384 1.303 1.24.5a.75.75 0 0 1 0 1.391l-1.24.5-.384 1.303a.75.75 0 0 1-1.44 0l-.384-1.303-1.24-.5a.75.75 0 0 1 0-1.391l1.24-.5.384-1.303a.75.75 0 0 1 .72-.538Zm13-13a.75.75 0 0 1 .72.538l.272.921.877.354a.75.75 0 0 1 0 1.391l-.877.354-.272.921a.75.75 0 0 1-1.44 0l-.272-.921-.877-.354a.75.75 0 0 1 0-1.391l.877-.354.272-.921a.75.75 0 0 1 .72-.538Z" />
+                    </svg>
+                </div>
+                <div class="tLabel" id="googleAIStudio">Google AI Studio</div>
+            </a>
+            <!-- ---------------- -->
             <a href="https://copilot.microsoft.com/">
                 <div class="tIcon">
                     <svg height="100%" width="100%" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
@@ -1966,4 +1977,4 @@ <h1>Material You New Tab</h1>
 
 </body>
 
-</html>
+</html>

locales/en.js

@@ -154,6 +154,7 @@ const en = {
     "ai_tools": "AI Tools",
     "chatGPT": "ChatGPT",
     "gemini": "Gemini",
+    "googleAIStudio": "Google AI Studio",
     "copilot": "Copilot",
     "claude": "Claude",
     "grok": "Grok",

scripts/ai-tools.js

@@ -10,14 +10,15 @@
 const aiToolsRaw = [
     { id: "chatGPT", visible: true, order: 0 },
     { id: "gemini", visible: true, order: 1 },
-    { id: "copilot", visible: true, order: 2 },
-    { id: "claude", visible: true, order: 3 },
-    { id: "deepseek", visible: true, order: 4 },
-    { id: "perplexity", visible: false, order: 5 },
-    { id: "grok", visible: false, order: 6 },
-    { id: "metaAI", visible: false, order: 7 },
-    { id: "qwen", visible: false, order: 8 },
-    { id: "firefly", visible: false, order: 9 }
+    { id: "googleAIStudio", visible: false, order: 2 },
+    { id: "copilot", visible: true, order: 3 },
+    { id: "claude", visible: true, order: 4 },
+    { id: "deepseek", visible: true, order: 5 },
+    { id: "perplexity", visible: false, order: 6 },
+    { id: "grok", visible: false, order: 7 },
+    { id: "metaAI", visible: false, order: 8 },
+    { id: "qwen", visible: false, order: 9 },
+    { id: "firefly", visible: false, order: 10 }
 ];
 // Translations for AI tools
 const aiTools = aiToolsRaw.map(tool => ({
@@ -39,6 +40,35 @@ const aiToolsEditButton = document.getElementById("aiToolsEditButton");
 const aiToolsCont = document.getElementById("aiToolsCont");
 const aiToolsEditField = document.getElementById("aiToolsEditField");
 
+function createDefaultAIToolsSettings() {
+    return aiTools.map(tool => tool.visible ? tool.id : { [tool.id]: false });
+}
+
+function getAIToolId(settingItem) {
+    if (typeof settingItem === "string") return settingItem;
+    if (settingItem && typeof settingItem === "object") return Object.keys(settingItem)[0];
+    return null;
+}
+
+function mergeAIToolsSettings(savedSettings) {
+    const defaultSettings = createDefaultAIToolsSettings();
+    if (!Array.isArray(savedSettings)) return defaultSettings;
+
+    const validToolIds = new Set(aiToolsRaw.map(tool => tool.id));
+    const normalizedSavedSettings = savedSettings.filter(settingItem => {
+        const toolId = getAIToolId(settingItem);
+        return toolId && validToolIds.has(toolId);
+    });
+
+    const savedToolIds = new Set(normalizedSavedSettings.map(getAIToolId));
+    const missingSettings = defaultSettings.filter(settingItem => {
+        const toolId = getAIToolId(settingItem);
+        return toolId && !savedToolIds.has(toolId);
+    });
+
+    return [...normalizedSavedSettings, ...missingSettings];
+}
+
 // Animation helper function
 function animateReorder(element1, element2, direction) {
     return new Promise((resolve) => {
@@ -129,14 +159,10 @@ function saveAIToolsSettings() {
 // Function to apply saved settings (visibility and order)
 function applyAIToolsSettings() {
     const savedSettings = JSON.parse(localStorage.getItem("aiToolsSettings") || "null");
-    let settingsToApply;
+    const settingsToApply = mergeAIToolsSettings(savedSettings);
 
-    if (!savedSettings || !Array.isArray(savedSettings)) {
-        // Initialize with default values if no settings exist
-        settingsToApply = aiTools.map(tool => tool.visible ? tool.id : { [tool.id]: false });
+    if (JSON.stringify(savedSettings) !== JSON.stringify(settingsToApply)) {
         localStorage.setItem("aiToolsSettings", JSON.stringify(settingsToApply));
-    } else {
-        settingsToApply = savedSettings;
     }
 
     // Create a map of current tool elements for quick lookup
@@ -152,15 +178,9 @@ function applyAIToolsSettings() {
 
     // Append tools in order based on settings
     settingsToApply.forEach(item => {
-        let toolId, isVisible;
-
-        if (typeof item === "string") {
-            toolId = item;
-            isVisible = true;
-        } else {
-            toolId = Object.keys(item)[0];
-            isVisible = false;
-        }
+        const toolId = getAIToolId(item);
+        const isVisible = typeof item === "string";
+        if (!toolId) return;
 
         const toolElement = toolElements.get(toolId);
         if (toolElement) {
@@ -176,15 +196,9 @@ function generateAIToolsForm(settings) {
 
     // Create form elements
     settings.forEach((settingItem, index) => {
-        let toolId, isVisible;
-
-        if (typeof settingItem === "string") {
-            toolId = settingItem;
-            isVisible = true;
-        } else {
-            toolId = Object.keys(settingItem)[0];
-            isVisible = false;
-        }
+        const toolId = getAIToolId(settingItem);
+        const isVisible = typeof settingItem === "string";
+        if (!toolId) return;
 
         const originalTool = aiTools.find(t => t.id === toolId);
         const toolLabel = originalTool?.label || toolId;
@@ -244,19 +258,7 @@ function showAIToolsSettings() {
 
     // Load saved tool order and visibility or initialize from defaults
     let savedSettings = JSON.parse(localStorage.getItem("aiToolsSettings") || "null");
-
-    // If no settings exist, create from aiTools
-    if (!savedSettings || !Array.isArray(savedSettings)) {
-        savedSettings = aiTools.map(tool => {
-            if (tool.visible) {
-                return tool.id;
-            } else {
-                const hiddenTool = {};
-                hiddenTool[tool.id] = false;
-                return hiddenTool;
-            }
-        });
-    }
+    savedSettings = mergeAIToolsSettings(savedSettings);
 
     // Generate the form with the saved settings
     generateAIToolsForm(savedSettings);
@@ -382,15 +384,7 @@ document.addEventListener("DOMContentLoaded", function () {
     // Reset button in settings modal
     resetAISettingsBtn.addEventListener("click", function () {
         // Create default settings
-        const defaultSettings = aiTools.map(tool => {
-            if (tool.visible) {
-                return tool.id;
-            } else {
-                const hiddenTool = {};
-                hiddenTool[tool.id] = false;
-                return hiddenTool;
-            }
-        });
+        const defaultSettings = createDefaultAIToolsSettings();
 
         // Generate the form with default settings
         generateAIToolsForm(defaultSettings);

scripts/languages.js

@@ -194,6 +194,7 @@ function applyLanguage(lang) {
         "quoraEngine",
         "chatGPT",
         "gemini",
+        "googleAIStudio",
         "copilot",
         "claude",
         "grok",