Initial commit

2023-12-25 18:16:14 +07:00
commit 16b0d77075
174 changed files with 18893 additions and 0 deletions
@@ -0,0 +1,237 @@
+const { Gdk, GLib, Gtk, Pango } = imports.gi;
+import { App, Utils, Widget } from '../../../imports.js';
+const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import ChatGPT from '../../../services/chatgpt.js';
+import { MaterialIcon } from "../../../lib/materialicon.js";
+import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover.js";
+import { SystemMessage, ChatMessage } from "./chatgpt_chatmessage.js";
+import { ConfigToggle } from '../../../lib/configwidgets.js';
+import { markdownTest } from '../../../lib/md2pango.js';
+
+const chatGPTTabIcon = Icon({
+    hpack: 'center',
+    className: 'sidebar-chat-welcome-logo',
+    icon: `${App.configDir}/assets/openai-logomark.svg`,
+    setup: (self) => Utils.timeout(1, () => {
+        const styleContext = self.get_style_context();
+        const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+        const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+        self.size = Math.max(width, height, 1) * 116 / 180; // Why such a specific proportion? See https://openai.com/brand#logos
+    })
+});
+
+export const chatGPTInfo = Box({
+    vertical: true,
+    className: 'spacing-v-15',
+    children: [
+        Icon({
+            hpack: 'center',
+            className: 'sidebar-chat-welcome-logo',
+            icon: `${App.configDir}/assets/openai-logomark.svg`,
+            setup: (self) => Utils.timeout(1, () => {
+                const styleContext = self.get_style_context();
+                const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+                const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+                self.size = Math.max(width, height, 1) * 116 / 180; // Why such a specific proportion? See https://openai.com/brand#logos
+            })
+        }),
+        Label({
+            className: 'txt txt-title-small sidebar-chat-welcome-txt',
+            wrap: true,
+            justify: Gtk.Justification.CENTER,
+            label: 'ChatGPT',
+        }),
+        Box({
+            className: 'spacing-h-5',
+            hpack: 'center',
+            children: [
+                Label({
+                    className: 'txt-smallie txt-subtext',
+                    wrap: true,
+                    justify: Gtk.Justification.CENTER,
+                    label: 'Powered by OpenAI',
+                }),
+                Button({
+                    className: 'txt-subtext txt-norm icon-material',
+                    label: 'info',
+                    tooltipText: 'Uses gpt-3.5-turbo.\nNot affiliated, endorsed, or sponsored by OpenAI.',
+                    setup: setupCursorHoverInfo,
+                }),
+            ]
+        }),
+    ]
+})
+
+export const chatGPTSettings = Revealer({
+    transition: 'slide_down',
+    transitionDuration: 150,
+    revealChild: true,
+    connections: [
+        [ChatGPT, (self) => {
+            self.revealChild = false;
+        }, 'newMsg'],
+        [ChatGPT, (self) => {
+            self.revealChild = true;
+        }, 'clear'],
+    ],
+    child: Box({
+        vertical: true,
+        hpack: 'fill',
+        className: 'sidebar-chat-settings',
+        children: [
+            ConfigToggle({
+                icon: 'cycle',
+                name: 'Cycle models',
+                desc: 'Helps avoid exceeding the API rate of 3 messages per minute.\nTurn this on if you message rapidly.',
+                initValue: ChatGPT.cycleModels,
+                onChange: (self, newValue) => {
+                    ChatGPT.cycleModels = newValue;
+                },
+            }),
+            ConfigToggle({
+                icon: 'description',
+                name: 'Assistant prompt',
+                desc: 'Tells ChatGPT\n  1. It\'s a sidebar assistant on Linux\n  2. Be short and concise\n  3. Use markdown features extensively\nLeave this off for a vanilla ChatGPT experience.',
+                initValue: ChatGPT.assistantPrompt,
+                onChange: (self, newValue) => {
+                    ChatGPT.assistantPrompt = newValue;
+                },
+            }),
+        ]
+    })
+});
+
+export const openaiApiKeyInstructions = Box({
+    homogeneous: true,
+    children: [Revealer({
+        transition: 'slide_down',
+        transitionDuration: 150,
+        connections: [[ChatGPT, (self, hasKey) => {
+            self.revealChild = (ChatGPT.key.length == 0);
+        }, 'hasKey']],
+        child: Button({
+            child: Label({
+                useMarkup: true,
+                wrap: true,
+                className: 'txt sidebar-chat-welcome-txt',
+                justify: Gtk.Justification.CENTER,
+                label: 'An OpenAI API key is required\nYou can grab one <u>here</u>, then enter it below'
+            }),
+            setup: setupCursorHover,
+            onClicked: () => {
+                Utils.execAsync(['bash', '-c', `xdg-open https://platform.openai.com/api-keys &`]);
+            }
+        })
+    })]
+});
+
+export const chatGPTWelcome = Box({
+    vexpand: true,
+    homogeneous: true,
+    child: Box({
+        className: 'spacing-v-15',
+        vpack: 'center',
+        vertical: true,
+        children: [
+            chatGPTInfo,
+            openaiApiKeyInstructions,
+            chatGPTSettings,
+        ]
+    })
+});
+
+export const chatContent = Box({
+    className: 'spacing-v-15',
+    vertical: true,
+    connections: [
+        [ChatGPT, (box, id) => {
+            const message = ChatGPT.messages[id];
+            if (!message) return;
+            box.add(ChatMessage(message))
+        }, 'newMsg'],
+        [ChatGPT, (box) => {
+            box.children = [chatGPTWelcome];
+        }, 'clear'],
+        [ChatGPT, (box) => {
+            box.children = [chatGPTWelcome];
+        }, 'initialized'],
+    ]
+});
+
+export const chatGPTView = Scrollable({
+    className: 'sidebar-chat-viewport',
+    vexpand: true,
+    child: chatContent,
+    setup: (scrolledWindow) => {
+        scrolledWindow.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        const vScrollbar = scrolledWindow.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+
+        Utils.timeout(1, () => { // Fix click-to-scroll-widget-to-view behavior
+            const viewport = scrolledWindow.child;
+            viewport.set_focus_vadjustment(new Gtk.Adjustment(undefined));
+        })
+    }
+});
+
+export const chatGPTCommands = Box({
+    className: 'spacing-h-5',
+    children: [
+        Box({ hexpand: true }),
+        Button({
+            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
+            onClicked: () => chatContent.add(SystemMessage(
+                `Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``,
+                '/key')),
+            setup: setupCursorHover,
+            label: '/key',
+        }),
+        Button({
+            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
+            onClicked: () => chatContent.add(SystemMessage(
+                `Currently using \`${ChatGPT.modelName}\``,
+                '/model'
+            )),
+            setup: setupCursorHover,
+            label: '/model',
+        }),
+        Button({
+            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
+            onClicked: () => ChatGPT.clear(),
+            setup: setupCursorHover,
+            label: '/clear',
+        }),
+    ]
+});
+
+export const chatGPTSendMessage = (text) => {
+    // Check if text or API key is empty
+    if (text.length == 0) return;
+    if (ChatGPT.key.length == 0) {
+        ChatGPT.key = text;
+        chatContent.add(SystemMessage(`Key saved to\n\`${ChatGPT.keyPath}\``, 'API Key'));
+        text = '';
+        return;
+    }
+    // Commands
+    if (text.startsWith('/')) {
+        if (text.startsWith('/clear')) ChatGPT.clear();
+        else if (text.startsWith('/model')) chatContent.add(SystemMessage(`Currently using \`${ChatGPT.modelName}\``, '/model'))
+        else if (text.startsWith('/key')) {
+            const parts = text.split(' ');
+            if (parts.length == 1) chatContent.add(SystemMessage(`Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``, '/key'));
+            else {
+                ChatGPT.key = parts[1];
+                chatContent.add(SystemMessage(`Updated API Key at\n\`${ChatGPT.keyPath}\``, '/key'));
+            }
+        }
+        else if (text.startsWith('/test'))
+            chatContent.add(SystemMessage(markdownTest, `Markdown test`));
+        else
+            chatContent.add(SystemMessage(`Invalid command.`, 'Error'))
+    }
+    else {
+        ChatGPT.send(text);
+    }
+}
@@ -0,0 +1,291 @@
+const { Gdk, Gio, GLib, Gtk, Pango } = imports.gi;
+import { App, Utils, Widget } from '../../../imports.js';
+const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { MaterialIcon } from "../../../lib/materialicon.js";
+import { convert } from "../../../lib/md2pango.js";
+import GtkSource from "gi://GtkSource?version=3.0";
+
+const CUSTOM_SOURCEVIEW_SCHEME_PATH = `${App.configDir}/data/sourceviewtheme.xml`;
+const CUSTOM_SCHEME_ID = 'custom';
+const USERNAME = GLib.get_user_name();
+const CHATGPT_CURSOR = '  >> ';
+const MESSAGE_SCROLL_DELAY = 13; // In milliseconds, the time before an updated message scrolls to bottom
+
+/////////////////////// Custom source view colorscheme /////////////////////////
+
+function loadCustomColorScheme(filePath) {
+    // Read the XML file content
+    const file = Gio.File.new_for_path(filePath);
+    const [success, contents] = file.load_contents(null);
+
+    if (!success) {
+        logError('Failed to load the XML file.');
+        return;
+    }
+
+    // Parse the XML content and set the Style Scheme
+    const schemeManager = GtkSource.StyleSchemeManager.get_default();
+    schemeManager.append_search_path(file.get_parent().get_path());
+}
+loadCustomColorScheme(CUSTOM_SOURCEVIEW_SCHEME_PATH);
+
+//////////////////////////////////////////////////////////////////////////////
+
+function copyToClipboard(text) {
+    const clipboard = Gtk.Clipboard.get(Gdk.SELECTION_CLIPBOARD);
+    const textVariant = new GLib.Variant('s', text);
+    clipboard.set_text(textVariant, -1);
+    clipboard.store();
+}
+
+function substituteLang(str) {
+    const subs = [
+        { from: 'javascript', to: 'js' },
+    ];
+
+    for (const { from, to } of subs) {
+        if (from === str)
+            return to;
+    }
+
+    return str;
+}
+
+const HighlightedCode = (content, lang) => {
+    const buffer = new GtkSource.Buffer();
+    const sourceView = new GtkSource.View({
+        buffer: buffer,
+        wrap_mode: Gtk.WrapMode.WORD
+    });
+    const langManager = GtkSource.LanguageManager.get_default();
+    let displayLang = langManager.get_language(substituteLang(lang)); // Set your preferred language
+    if (displayLang) {
+        buffer.set_language(displayLang);
+    }
+    const schemeManager = GtkSource.StyleSchemeManager.get_default();
+    buffer.set_style_scheme(schemeManager.get_scheme(CUSTOM_SCHEME_ID));
+    buffer.set_text(content, -1);
+    return sourceView;
+}
+
+const TextBlock = (content = '') => Label({
+    hpack: 'fill',
+    className: 'txt sidebar-chat-txtblock sidebar-chat-txt',
+    useMarkup: true,
+    xalign: 0,
+    wrap: true,
+    selectable: true,
+    label: content,
+});
+
+const CodeBlock = (content = '', lang = 'txt') => {
+    const topBar = Box({
+        className: 'sidebar-chat-codeblock-topbar',
+        children: [
+            Label({
+                label: lang,
+                className: 'sidebar-chat-codeblock-topbar-txt',
+            }),
+            Box({
+                hexpand: true,
+            }),
+            Button({
+                className: 'sidebar-chat-codeblock-topbar-btn',
+                onClicked: (self) => {
+                    // execAsync(['bash', '-c', `wl-copy '${content}'`, `&`]).catch(print);
+                    execAsync([`wl-copy`, `${sourceView.label}`]).catch(print);
+                },
+                child: Box({
+                    className: 'spacing-h-5',
+                    children: [
+                        MaterialIcon('content_copy', 'small'),
+                        Label({
+                            label: 'Copy',
+                        })
+                    ]
+                })
+            })
+        ]
+    })
+    // Source view
+    const sourceView = HighlightedCode(content, lang);
+
+    const codeBlock = Box({
+        properties: [
+            ['updateText', (text) => {
+                sourceView.get_buffer().set_text(text, -1);
+            }]
+        ],
+        className: 'sidebar-chat-codeblock',
+        vertical: true,
+        children: [
+            topBar,
+            Box({
+                className: 'sidebar-chat-codeblock-code',
+                homogeneous: true,
+                children: [sourceView,],
+            })
+        ]
+    })
+
+    // const schemeIds = styleManager.get_scheme_ids();
+
+    // print("Available Style Schemes:");
+    // for (let i = 0; i < schemeIds.length; i++) {
+    //     print(schemeIds[i]);
+    // }
+    return codeBlock;
+}
+
+const Divider = () => Box({
+    className: 'sidebar-chat-divider',
+})
+
+const MessageContent = (content) => {
+    const contentBox = Box({
+        vertical: true,
+        properties: [
+            ['fullUpdate', (self, content, useCursor = false) => {
+                // Clear and add first text widget
+                contentBox.get_children().forEach(ch => ch.destroy());
+                contentBox.add(TextBlock())
+                // Loop lines. Put normal text in markdown parser 
+                // and put code into code highlighter (TODO)
+                let lines = content.split('\n');
+                let lastProcessed = 0;
+                let inCode = false;
+                for (const [index, line] of lines.entries()) {
+                    // Code blocks
+                    const codeBlockRegex = /^\s*```([a-zA-Z0-9]+)?\n?/;
+                    if (codeBlockRegex.test(line)) {
+                        // console.log(`code at line ${index}`);
+                        const kids = self.get_children();
+                        const lastLabel = kids[kids.length - 1];
+                        const blockContent = lines.slice(lastProcessed, index).join('\n');
+                        if (!inCode) {
+                            lastLabel.label = convert(blockContent);
+                            contentBox.add(CodeBlock('', codeBlockRegex.exec(line)[1]));
+                        }
+                        else {
+                            lastLabel._updateText(blockContent);
+                            contentBox.add(TextBlock());
+                        }
+
+                        lastProcessed = index + 1;
+                        inCode = !inCode;
+                    }
+                    // Breaks
+                    const dividerRegex = /^\s*---/;
+                    if (!inCode && dividerRegex.test(line)) {
+                        const kids = self.get_children();
+                        const lastLabel = kids[kids.length - 1];
+                        const blockContent = lines.slice(lastProcessed, index).join('\n');
+                        lastLabel.label = convert(blockContent);
+                        contentBox.add(Divider());
+                        contentBox.add(TextBlock());
+                        lastProcessed = index + 1;
+                    }
+                }
+                if (lastProcessed < lines.length) {
+                    const kids = self.get_children();
+                    const lastLabel = kids[kids.length - 1];
+                    let blockContent = lines.slice(lastProcessed, lines.length).join('\n');
+                    if (!inCode)
+                        lastLabel.label = `${convert(blockContent)}${useCursor ? CHATGPT_CURSOR : ''}`;
+                    else
+                        lastLabel._updateText(blockContent);
+                }
+                // Debug: plain text
+                // contentBox.add(Label({
+                //     hpack: 'fill',
+                //     className: 'txt sidebar-chat-txtblock sidebar-chat-txt',
+                //     useMarkup: false,
+                //     xalign: 0,
+                //     wrap: true,
+                //     selectable: true,
+                //     label: '------------------------------\n' + convert(content),
+                // }))
+                contentBox.show_all();
+            }]
+        ]
+    });
+    contentBox._fullUpdate(contentBox, content, false);
+    return contentBox;
+}
+
+export const ChatMessage = (message) => {
+    const messageContentBox = MessageContent(message.content);
+    const thisMessage = Box({
+        className: 'sidebar-chat-message',
+        children: [
+            Box({
+                className: `sidebar-chat-indicator ${message.role == 'user' ? 'sidebar-chat-indicator-user' : 'sidebar-chat-indicator-bot'}`,
+            }),
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                hexpand: true,
+                children: [
+                    Label({
+                        hpack: 'fill',
+                        xalign: 0,
+                        className: 'txt txt-bold sidebar-chat-name',
+                        wrap: true,
+                        label: (message.role == 'user' ? USERNAME : 'ChatGPT'),
+                    }),
+                    messageContentBox,
+                ],
+                connections: [
+                    [message, (self, isThinking) => {
+                        messageContentBox.toggleClassName('thinking', message.thinking);
+                    }, 'notify::thinking'],
+                    [message, (self) => { // Message update
+                        messageContentBox._fullUpdate(messageContentBox, message.content, message.role != 'user');
+                        Utils.timeout(MESSAGE_SCROLL_DELAY, () => {
+                            const scrolledWindow = thisMessage.get_parent().get_parent();
+                            var adjustment = scrolledWindow.get_vadjustment();
+                            adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
+                        });
+                    }, 'notify::content'],
+                    [message, (label, isDone) => { // Remove the cursor
+                        messageContentBox._fullUpdate(messageContentBox, message.content, false);
+                    }, 'notify::done'],
+                ]
+            })
+        ]
+    });
+    return thisMessage;
+}
+
+export const SystemMessage = (content, commandName) => {
+    const messageContentBox = MessageContent(content);
+    const thisMessage = Box({
+        className: 'sidebar-chat-message',
+        children: [
+            Box({
+                className: `sidebar-chat-indicator sidebar-chat-indicator-System`,
+            }),
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                hexpand: true,
+                children: [
+                    Label({
+                        xalign: 0,
+                        className: 'txt txt-bold sidebar-chat-name',
+                        wrap: true,
+                        label: `System  •  ${commandName}`,
+                    }),
+                    messageContentBox,
+                ],
+            })
+        ],
+        setup: (self) => Utils.timeout(MESSAGE_SCROLL_DELAY, () => {
+            const scrolledWindow = thisMessage.get_parent().get_parent();
+            var adjustment = scrolledWindow.get_vadjustment();
+            adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
+        })
+    });
+    return thisMessage;
+}
@@ -0,0 +1,88 @@
+import { App, Utils, Widget } from '../../imports.js';
+const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { setupCursorHover, setupCursorHoverInfo } from "../../lib/cursorhover.js";
+// APIs
+import ChatGPT from '../../services/chatgpt.js';
+import { chatGPTView, chatGPTCommands, chatGPTSendMessage } from './apis/chatgpt.js';
+
+const APIS = [
+    {
+        name: 'ChatGPT',
+        sendCommand: chatGPTSendMessage,
+        contentWidget: chatGPTView,
+        commandBar: chatGPTCommands,
+        tabIcon: Box({}),
+    }
+];
+let currentApiId = 0;
+
+const apiSwitcher = Box({
+    vertical: true,
+    children: [
+        Box({
+            homogeneous: true,
+            children: APIS.map(api => api.tabIcon),
+        }),
+    ]
+})
+
+export const chatEntry = Entry({
+    className: 'sidebar-chat-entry',
+    hexpand: true,
+    connections: [
+        [ChatGPT, (self) => {
+            if (APIS[currentApiId].name != 'ChatGPT') return;
+            self.placeholderText = (ChatGPT.key.length > 0 ? 'Ask a question...' : 'Enter OpenAI API Key...');
+        }, 'hasKey']
+    ],
+    onChange: (entry) => {
+        chatSendButton.toggleClassName('sidebar-chat-send-available', entry.text.length > 0);
+    },
+    onAccept: (entry) => {
+        APIS[currentApiId].sendCommand(entry.text)
+        entry.text = '';
+    },
+});
+
+const chatSendButton = Button({
+    className: 'txt-norm icon-material sidebar-chat-send',
+    vpack: 'center',
+    label: 'arrow_upward',
+    setup: setupCursorHover,
+    onClicked: (self) => {
+        APIS[currentApiId].sendCommand(chatEntry.text);
+        chatEntry.text = '';
+    },
+});
+
+const textboxArea = Box({ // Entry area
+    className: 'sidebar-chat-textarea spacing-h-10',
+    children: [
+        chatEntry,
+        chatSendButton,
+    ]
+});
+
+const apiContentStack = Stack({
+    vexpand: true,
+    transition: 'slide_left_right',
+    items: APIS.map(api => [api.name, api.contentWidget]),
+})
+
+const apiCommandStack = Stack({
+    transition: 'slide_up_down',
+    items: APIS.map(api => [api.name, api.commandBar]),
+})
+
+export default Widget.Box({
+    vertical: true,
+    className: 'spacing-v-10',
+    homogeneous: false,
+    children: [
+        apiSwitcher,
+        apiContentStack,
+        apiCommandStack,
+        textboxArea,
+    ]
+});
@@ -0,0 +1,11 @@
+import PopupWindow from '../../lib/popupwindow.js';
+import SidebarLeft from "./sideleft.js";
+
+export default () => PopupWindow({
+    focusable: true,
+    anchor: ['left', 'top', 'bottom'],
+    name: 'sideleft',
+    showClassName: 'sideleft-show',
+    hideClassName: 'sideleft-hide',
+    child: SidebarLeft(),
+});
@@ -0,0 +1,29 @@
+const { Gdk, Gtk } = imports.gi;
+import { Utils, Widget } from '../../imports.js';
+const { execAsync, exec } = Utils;
+const { Box, Button, EventBox, Label, Scrollable } = Widget;
+
+export const SidebarModule = ({
+    name,
+    child
+}) => {
+    return Box({
+        className: 'sidebar-module',
+        vertical: true,
+        children: [
+            Button({
+                child: Box({
+                    children: [
+                        Label({
+                            className: 'txt-small txt',
+                            label: `${name}`,
+                        }),
+                        Label({
+                            className: 'sidebar-module-btn-arrow',
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
@@ -0,0 +1,12 @@
+const { Gdk, Gtk } = imports.gi;
+import { Utils, Widget } from '../../imports.js';
+const { execAsync, exec } = Utils;
+const { Box, Button, EventBox, Label, Scrollable } = Widget;
+import { SidebarModule } from './module.js';
+
+export const QuickScripts = () => SidebarModule({
+    name: 'Quick scripts',
+    child: Box({
+
+    })
+})
@@ -0,0 +1,109 @@
+const { Gdk, Gtk } = imports.gi;
+import { Utils, Widget } from '../../imports.js';
+const { Box, Button, EventBox, Label, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { MaterialIcon } from "../../lib/materialicon.js";
+import { setupCursorHover } from "../../lib/cursorhover.js";
+import { NavigationIndicator } from "../../lib/navigationindicator.js";
+import toolBox from './toolbox.js';
+import apiWidgets from './apiwidgets.js';
+import { chatEntry } from './apiwidgets.js';
+
+const SidebarTabButton = (stack, stackItem, navIndicator, navIndex, icon, label) => Widget.Button({
+    // hexpand: true,
+    className: 'sidebar-selector-tab',
+    onClicked: (self) => {
+        stack.shown = stackItem;
+        // Add active class to self and remove for others
+        const allTabs = self.get_parent().get_children();
+        for (let i = 0; i < allTabs.length; i++) {
+            if (allTabs[i] != self) allTabs[i].toggleClassName('sidebar-selector-tab-active', false);
+            else self.toggleClassName('sidebar-selector-tab-active', true);
+        }
+        // Fancy highlighter line width
+        const buttonWidth = self.get_allocated_width();
+        const highlightWidth = self.get_children()[0].get_allocated_width();
+        navIndicator.css = `
+            font-size: ${navIndex}px; 
+            padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
+        `;
+    },
+    child: Box({
+        hpack: 'center',
+        className: 'spacing-h-5',
+        children: [
+            MaterialIcon(icon, 'larger'),
+            Label({
+                className: 'txt txt-smallie',
+                label: label,
+            })
+        ]
+    }),
+    setup: (button) => Utils.timeout(1, () => {
+        setupCursorHover(button);
+        button.toggleClassName('sidebar-selector-tab-active', defaultTab === stackItem);
+    }),
+});
+
+const defaultTab = 'apis';
+const contentStack = Stack({
+    vexpand: true,
+    transition: 'slide_left_right',
+    items: [
+        ['apis', apiWidgets],
+        ['tools', toolBox],
+    ],
+})
+
+const navIndicator = NavigationIndicator(2, false, { // The line thing
+    className: 'sidebar-selector-highlight',
+    css: 'font-size: 0px; padding: 0rem 4.773rem;', // Shushhhh
+})
+
+const navBar = Box({
+    vertical: true,
+    children: [
+        Box({
+            homogeneous: true,
+            children: [
+                SidebarTabButton(contentStack, 'apis', navIndicator, 0, 'api', 'APIs'),
+                SidebarTabButton(contentStack, 'tools', navIndicator, 1, 'home_repair_service', 'Tools'),
+            ]
+        }),
+        navIndicator,
+    ]
+})
+
+export default () => Box({
+    // vertical: true,
+    vexpand: true,
+    hexpand: true,
+    children: [
+        EventBox({
+            onPrimaryClick: () => App.closeWindow('sideleft'),
+            onSecondaryClick: () => App.closeWindow('sideleft'),
+            onMiddleClick: () => App.closeWindow('sideleft'),
+        }),
+        Box({
+            vertical: true,
+            vexpand: true,
+            className: 'sidebar-left',
+            children: [
+                navBar,
+                contentStack,
+            ]
+        }),
+    ],
+    connections: [
+        ['key-press-event', (widget, event) => { // Typing
+            if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
+                widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space) {
+                if (contentStack.shown == 'apis') {
+                    chatEntry.grab_focus();
+                    chatEntry.set_text(chatEntry.text + String.fromCharCode(event.get_keyval()[1]));
+                    chatEntry.set_position(-1);
+                }
+            }
+        }],
+    ],
+});
@@ -0,0 +1,16 @@
+const { Gdk, Gtk } = imports.gi;
+import { Utils, Widget } from '../../imports.js';
+const { Box, Button, EventBox, Label, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { QuickScripts } from './quickscripts.js';
+
+export default Scrollable({
+    hscroll: "never",
+    vscroll: "automatic",
+    child: Box({
+        vertical: true,
+        children: [
+            QuickScripts(),
+        ]
+    })
+});