better sidebar 0

started making it by erasing the old and making a new container

.gitignore

@@ -0,0 +1,2 @@
+*.zip
+.vscode

_locales/en/messages.json

@@ -50,6 +50,9 @@
 	"better_todo": {
 		"message": "Better todo list"
 	},
+	"better_sidebar": {
+		"message": "Better Sidebar"
+	},
 	"max_items": {
 		"message": "Max Items: "
 	},

html/popup.html

@@ -235,6 +235,45 @@
                         </div>
                     </div>
                 </div>
+                <div class="option-container">
+                    <div class="option" id="better_sidebar">
+                        <input type="radio" id="off" name="better_sidebar">
+                        <input type="radio" id="on" name="better_sidebar">
+                        <div class="slider">
+                            <div class="sliderknob"></div>
+                            <div class="sliderbg"></div>
+                        </div>
+                        <span class="option-name" data-i18n="better_sidebar">Better Sidebar</span>
+                    </div>
+                    <div class="sub-options">
+                        <div class="sub-option" style="display:none;">
+                            <input type="checkbox" id="hover_preview" name="hover_preview">
+                            <label for="hover_preview" class="sub-text" data-i18n="hover_preview">Hover to preview
+                                details</label>
+                        </div>
+                        <div class="sub-option">
+                            <input type="checkbox" id="todo_separate_scrollbar" name="todo_separate_scrollbar">
+                            <label for="todo_separate_scrollbar" class="sub-text" data-i18n="todo_separate_scrollbar">Separate Scrollbar</label>
+                        </div>
+                        <div class="sub-option">
+                            <input type="checkbox" id="todo_hr24" name="todo_hr24">
+                            <label for="todo_hr24" class="sub-text" data-i18n="24hrformat">Use 24hr format</label>
+                        </div>
+                        <div class="sub-option">
+                            <input type="checkbox" id="todo_full_height" name="todo_full_height">
+                            <label for="todo_full_height" class="sub-text" data-i18n="todo_full_height">Force Full Height</label> <!-- TO REMOVE and replace with full height -->
+                        </div>
+                        <div class="sub-option">
+                            <input type="checkbox" id="todo_hide_feedback" name="todo_hide_feedback">
+                            <label for="todo_hide_feedback" class="sub-text" data-i18n="todo_hide_feedback">Hide Recent Feedback</label>
+                        </div>
+                        <div style="margin-top: 5px">
+                            <span class="sub-text" data-i18n="max_items">Max items to show: </span><span
+                                id="numTodoItems"></span>
+                            <input type="range" min="1" max="12" id="numTodoItemsSlider">
+                        </div>
+                    </div>
+                </div>
                 <div class="option-container" style="display:flex;flex-direction:column;gap:6px;">
                     <div class="option" id="dashboard_notes">
                         <input type="radio" id="off" name="dashboard_notes">

js/background.js

@@ -40,6 +40,7 @@ chrome.runtime.onInstalled.addListener(function () {
             "better_todo": false,
             "todo_hr24": false,
 			"todo_separate_scrollbar": false,
+            "better_sidebar": true,
             "condensed_cards": false,
             "custom_cards": {},
             "custom_cards_2": {},

js/content.js

@@ -459,6 +459,7 @@ function checkDashboardReady() {
                 } else if (mutation.target == document.querySelector('#right-side')) {
                     if (!mutation.target.querySelector(".bettercanvas-todosidebar")) {
                         setupBetterTodo();
+                        setupBetterSidebar();
                         // loadBetterTodo();
                     }
                 }
@@ -1287,6 +1288,43 @@ function setupBetterTodo() {
     }
 }
 
+function setupBetterSidebar() {
+    if (!options.better_sidebar) return;
+    if (document.querySelector('#better-sidebar-container')) return;
+    let wrapper = document.querySelector("#wrapper");
+    if (!wrapper) return;
+    try {
+        document.querySelector("#header")?.remove();
+        document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
+        // rebuild sidebar
+        const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
+        mainWrapper.style.display = "flex";
+
+        let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container", 
+            style: "display:flex;flex-direction:column;width:250px;justify-content:center;gap:20px;padding:20px;box-sizing:border-box;position:relative;background-color:red;"
+        }, true);
+        sidebarList.innerHTML = `
+            
+        `;
+        let expander = makeElement("div", sidebarList, {
+            style: "display:flex;flex-direction:column;gap:10px;position:absolute:bottom:10px;"
+        });
+        expander.innerHTML = `
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:50px;height:50px;transition:all .3s ease;cursor:pointer;">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier"> 
+                    <path d="M20 4V20M4 12H16M16 12L12 8M16 12L12 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </svg>
+        `
+
+    } catch (e) {
+        logError(e);
+    }
+    
+}
+
 let delay;
 let moreAssignmentCount = 0;
 let moreAnnouncementCount = 0;
@@ -2639,12 +2677,16 @@ function getApiData() {
 }
 
 
-function makeElement(element, location, options) {
+function makeElement(element, location, options, prepend = false) {
     let creation = document.createElement(element);
     Object.keys(options).forEach(key => {
         creation[key] = options[key];
     });
-    location.appendChild(creation);
+    if (prepend) {
+        location.insertBefore(creation, location.firstChild);
+    } else {
+        location.appendChild(creation);
+    }
     return creation
 }
 

js/popup.js

@@ -1,4 +1,4 @@
-const syncedSwitches = ['remind', 'tab_icons', 'hide_feedback', 'dark_mode', 'remlogo', 'full_width', 'auto_dark', 'assignments_due', 'gpa_calc', 'gradient_cards', 'disable_color_overlay', 'dashboard_grades', 'dashboard_notes', 'better_todo', 'condensed_cards'];
+const syncedSwitches = ['remind', 'tab_icons', 'hide_feedback', 'dark_mode', 'remlogo', 'full_width', 'auto_dark', 'assignments_due', 'gpa_calc', 'gradient_cards', 'disable_color_overlay', 'dashboard_grades', 'dashboard_notes', 'better_todo', 'better_sidebar', 'condensed_cards'];
 const syncedSubOptions = [
 	"todo_hide_feedback",
 	"todo_full_height",
@@ -69,6 +69,7 @@ const defaultOptions = {
         "dashboard_notes": false,
         "dashboard_notes_text": "",
         "better_todo": false,
+        "better_sidebar": true,
         "todo_hr24": false,
 		"todo_separate_scrollbar": false,
         "condensed_cards": false,