fix: remove side effects from project selector

src/lib/Overlay.svelte

···
   import { Button, Group, Tooltip } from '@svelteuidev/core';
   import Options from "./Options.svelte";
   import ProjectSelector from "src/lib/ProjectSelector.svelte"
-  import { MessageRequest } from "../utils.ts"
+  import { MessageRequest, getOrderedProjects } from "../utils.ts"
 
   let settings: Settings = {
     show: false,
     alignment: "right"
   };
+  let projects = [];
   let isHovering = false;
 
   onMount(async () => {
     settings = await chrome.runtime.sendMessage({type: MessageRequest.GET_SETTINGS});
+    projects = await getOrderedProjects()
   });
 
   function changeAlignment(event) {
···
       </Group>
     </div>
     <div class="selector">
-      <ProjectSelector handleProjectChange={handleProjectChange} />
+      <ProjectSelector projects={projects} handleProjectChange={handleProjectChange} />
     </div>
     <div>
       <Options/>

src/lib/ProjectSelector.svelte

···
   import { MessageRequest } from "../utils.ts"
 
   export let handleProjectChange;
-  let projects = [];
-  let unsortedProjects = [];
-
-  onMount(async () => {
-    await makeActiveProjectFirst();
-  });
-
-  async function makeActiveProjectFirst() {
-    unsortedProjects = await chrome.runtime.sendMessage({type: MessageRequest.GET_ALL_PROJECTS});
-    const activeProject = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ACTIVE_PROJECT });
-
-    // FIXME: what even....
-    projects = unsortedProjects;
-
-    for (let i = 0; i < projects.length; i++) {
-      if (projects[i].name === activeProject.name) {
-        projects.splice(i, 1);
-      }
-    }
-    projects.unshift(activeProject);
-  }
-
-  async function handleProjectChangeWrapper(event) {
-    await handleProjectChange(event);
-    await makeActiveProjectFirst();
-  }
+  export let projects = [];
 </script>
 
 <div>
  <NativeSelect data={projects.map(p => { return { label: p.name, value: p.id }; })}
-    on:change={handleProjectChangeWrapper}
+    on:change={handleProjectChange}
     />
 </div>

src/lib/Rabbithole.svelte

···
   import { onMount } from "svelte";
   import Timeline from "src/lib/Timeline.svelte"
   import Sidebar from "src/lib/Sidebar.svelte"
-  import { MessageRequest } from "../utils"
+  import { MessageRequest, getOrderedProjects } from "../utils"
   import { SvelteUIProvider, fns, AppShell, Aside, Navbar, Header, Title, Divider } from "@svelteuidev/core";
 
   let activeProject = {};
   let websites = [];
+  let projects = [];
   let isDark = true;
   let opened = false;
 
   onMount(async () => {
+    projects = await getOrderedProjects()
     activeProject = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ACTIVE_PROJECT })
     updateWebsites();
   });
···
       newName: event.detail.newActiveProjectName,
       projectId: activeProject.id
     });
+    projects = await getOrderedProjects();
   }
 
   async function updateWebsites() {
···
       }}
       hidden={!opened}>
       <Sidebar
+        projects={projects}
         on:projectChange={updateActiveProject}
         on:newProject={createNewProject}
         on:newProjectSync={createNewProjectFromWindow}

src/lib/Sidebar.svelte

···
 
   // FIXME: why aren't types working here?
   const dispatch = createEventDispatcher();
+
+  export let projects;
+
   let newRabbitholeName = "";
   let isHovering = false;
-
-  let projects = [];
 
   async function handleProjectChange(event) {
     dispatch('projectChange', {

src/utils.ts

···
+import type { Project } from "./storage/db";
+
 // Can these be reordered without breaking older versions?
 // seems like no because they are bound to ints
 export enum MessageRequest {
···
   PING,
   RENAME_PROJECT
 }
+
+export async function getOrderedProjects(): Promise<Project[]> {
+  let projects = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ALL_PROJECTS });
+  const activeProject = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ACTIVE_PROJECT });
+
+
+  for (let i = 0; i < projects.length; i++) {
+    if (projects[i].name === activeProject.name) {
+      projects.splice(i, 1);
+    }
+  }
+  projects.unshift(activeProject);
+  return projects
+}