Backlog fixes (#141)

* Backlog fixes

* Clear searching

* slider units

* Run lint

* errant editing

* Toggle selected

* Update Mods.vue

* update disablers

* titlebar position

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

Cargo.lock

@@ -4281,8 +4281,10 @@ name = "theseus_gui"
 version = "0.0.0"
 dependencies = [
  "chrono",
+ "cocoa",
  "daedalus",
  "futures",
+ "objc",
  "os_info",
  "regex",
  "serde",

theseus_gui/package.json

@@ -17,7 +17,7 @@
     "dayjs": "^1.11.7",
     "floating-vue": "^2.0.0-beta.20",
     "ofetch": "^1.0.1",
-    "omorphia": "^0.4.24",
+    "omorphia": "^0.4.27",
     "pinia": "^2.1.3",
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.3.4",

theseus_gui/pnpm-lock.yaml

@@ -14,8 +14,8 @@ dependencies:
     specifier: ^1.0.1
     version: 1.0.1
   omorphia:
-    specifier: ^0.4.24
+    specifier: ^0.4.27
-    version: 0.4.24
+    version: 0.4.27
   pinia:
     specifier: ^2.1.3
     version: 2.1.3(vue@3.3.4)
@@ -1326,8 +1326,8 @@ packages:
       ufo: 1.1.2
     dev: false
 
-  /omorphia@0.4.24:
+  /omorphia@0.4.27:
-    resolution: {integrity: sha512-tYhg88wkv9yfCNF8uVDkt6MIZ5WuCEezWrWJuBpHXP0X1yNGey6ICbH0LSuNuOMtqhGJEIupGEB7uV4Db9b7uQ==}
+    resolution: {integrity: sha512-DvT8jTAE0RW9qAD2LAIkztVmhZkkITZ3ER587guK69KD2iErm+ZRSKCUJIOXFet94B9+d8+M3eM2pIiBnAkD9Q==}
     dependencies:
       dayjs: 1.11.7
       floating-vue: 2.0.0-beta.20(vue@3.3.4)

theseus_gui/src-tauri/Cargo.toml

@@ -37,6 +37,10 @@ tracing = "0.1.37"
 tracing-subscriber = "0.2"
 tracing-error = "0.1"
 
+[target.'cfg(target_os = "macos")'.dependencies]
+cocoa = "0.24.1"
+objc = "0.2.7"
+
 [features]
 # by default Tauri runs in production mode
 # when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL

theseus_gui/src-tauri/src/api/mod.rs

@@ -13,6 +13,7 @@ pub mod profile_create;
 pub mod settings;
 pub mod tags;
 pub mod utils;
+pub mod window_ext;
 
 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;
 

theseus_gui/src-tauri/src/api/window_ext.rs

@@ -0,0 +1,71 @@
+/// from: https://github.com/tauri-apps/tauri/issues/4789, full credit to haasal
+#[cfg(target_os = "macos")]
+use tauri::{Runtime, Window};
+
+#[cfg(target_os = "macos")]
+pub trait WindowExt {
+    fn set_transparent_titlebar(&self, transparent: bool);
+    fn position_traffic_lights(&self, x: f64, y: f64);
+}
+
+#[cfg(target_os = "macos")]
+impl<R: Runtime> WindowExt for Window<R> {
+    fn set_transparent_titlebar(&self, transparent: bool) {
+        use cocoa::appkit::{NSWindow, NSWindowTitleVisibility};
+
+        let window = self.ns_window().unwrap() as cocoa::base::id;
+
+        unsafe {
+            window.setTitleVisibility_(
+                NSWindowTitleVisibility::NSWindowTitleHidden,
+            );
+
+            if transparent {
+                window.setTitlebarAppearsTransparent_(cocoa::base::YES);
+            } else {
+                window.setTitlebarAppearsTransparent_(cocoa::base::NO);
+            }
+        }
+    }
+
+    fn position_traffic_lights(&self, x: f64, y: f64) {
+        use cocoa::appkit::{NSView, NSWindow, NSWindowButton};
+        use cocoa::foundation::NSRect;
+        use objc::{msg_send, sel, sel_impl};
+
+        let window = self.ns_window().unwrap() as cocoa::base::id;
+
+        unsafe {
+            let close = window
+                .standardWindowButton_(NSWindowButton::NSWindowCloseButton);
+            let miniaturize = window.standardWindowButton_(
+                NSWindowButton::NSWindowMiniaturizeButton,
+            );
+            let zoom = window
+                .standardWindowButton_(NSWindowButton::NSWindowZoomButton);
+
+            let title_bar_container_view = close.superview().superview();
+
+            let close_rect: NSRect = msg_send![close, frame];
+            let button_height = close_rect.size.height;
+
+            let title_bar_frame_height = button_height + y;
+            let mut title_bar_rect = NSView::frame(title_bar_container_view);
+            title_bar_rect.size.height = title_bar_frame_height;
+            title_bar_rect.origin.y =
+                NSView::frame(window).size.height - title_bar_frame_height;
+            let _: () =
+                msg_send![title_bar_container_view, setFrame: title_bar_rect];
+
+            let window_buttons = vec![close, miniaturize, zoom];
+            let space_between = NSView::frame(miniaturize).origin.x
+                - NSView::frame(close).origin.x;
+
+            for (i, button) in window_buttons.into_iter().enumerate() {
+                let mut rect: NSRect = NSView::frame(button);
+                rect.origin.x = x + (i as f64 * space_between);
+                button.setFrameOrigin(rect.origin);
+            }
+        }
+    }
+}

theseus_gui/src-tauri/src/main.rs

@@ -5,7 +5,7 @@
 
 use theseus::prelude::*;
 
-use tauri::Manager;
+use tauri::{Manager, WindowEvent};
 use tracing_error::ErrorLayer;
 use tracing_subscriber::EnvFilter;
 
@@ -55,86 +55,108 @@ fn main() {
     tracing::subscriber::set_global_default(subscriber)
         .expect("setting default subscriber failed");
 
-    tauri::Builder::default()
+    let mut builder = tauri::Builder::default()
         .plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
             app.emit_all("single-instance", Payload { args: argv, cwd })
                 .unwrap();
         }))
-        .plugin(tauri_plugin_window_state::Builder::default().build())
+        .plugin(tauri_plugin_window_state::Builder::default().build());
-        .invoke_handler(tauri::generate_handler![
+
-            initialize_state,
+    #[cfg(target_os = "macos")]
-            api::progress_bars_list,
+    {
-            api::profile_create::profile_create_empty,
+        builder = builder
-            api::profile_create::profile_create,
+            .setup(|app| {
-            api::profile::profile_remove,
+                use api::window_ext::WindowExt;
-            api::profile::profile_get,
+                let win = app.get_window("main").unwrap();
-            api::profile::profile_get_optimal_jre_key,
+                win.set_transparent_titlebar(true);
-            api::profile::profile_list,
+                win.position_traffic_lights(0.0, 0.0);
-            api::profile::profile_install,
+                Ok(())
-            api::profile::profile_update_all,
+            })
-            api::profile::profile_update_project,
+            .on_window_event(|e| {
-            api::profile::profile_add_project_from_version,
+                use api::window_ext::WindowExt;
-            api::profile::profile_add_project_from_path,
+                if let WindowEvent::Resized(..) = e.event() {
-            api::profile::profile_toggle_disable_project,
+                    let win = e.window();
-            api::profile::profile_remove_project,
+                    win.position_traffic_lights(0., 0.);
-            api::profile::profile_run,
+                }
-            api::profile::profile_run_wait,
+            })
-            api::profile::profile_run_credentials,
+    }
-            api::profile::profile_run_wait_credentials,
+
-            api::profile::profile_edit,
+    builder = builder.invoke_handler(tauri::generate_handler![
-            api::profile::profile_edit_icon,
+        initialize_state,
-            api::profile::profile_check_installed,
+        api::progress_bars_list,
-            api::pack::pack_install_version_id,
+        api::profile_create::profile_create_empty,
-            api::pack::pack_install_file,
+        api::profile_create::profile_create,
-            api::auth::auth_authenticate_begin_flow,
+        api::profile::profile_remove,
-            api::auth::auth_authenticate_await_completion,
+        api::profile::profile_get,
-            api::auth::auth_cancel_flow,
+        api::profile::profile_get_optimal_jre_key,
-            api::auth::auth_refresh,
+        api::profile::profile_list,
-            api::auth::auth_remove_user,
+        api::profile::profile_install,
-            api::auth::auth_has_user,
+        api::profile::profile_update_all,
-            api::auth::auth_users,
+        api::profile::profile_update_project,
-            api::auth::auth_get_user,
+        api::profile::profile_add_project_from_version,
-            api::tags::tags_get_categories,
+        api::profile::profile_add_project_from_path,
-            api::tags::tags_get_donation_platforms,
+        api::profile::profile_toggle_disable_project,
-            api::tags::tags_get_game_versions,
+        api::profile::profile_remove_project,
-            api::tags::tags_get_loaders,
+        api::profile::profile_run,
-            api::tags::tags_get_report_types,
+        api::profile::profile_run_wait,
-            api::tags::tags_get_tag_bundle,
+        api::profile::profile_run_credentials,
-            api::settings::settings_get,
+        api::profile::profile_run_wait_credentials,
-            api::settings::settings_set,
+        api::profile::profile_edit,
-            api::jre::jre_get_all_jre,
+        api::profile::profile_edit_icon,
-            api::jre::jre_autodetect_java_globals,
+        api::profile::profile_check_installed,
-            api::jre::jre_find_jre_18plus_jres,
+        api::pack::pack_install_version_id,
-            api::jre::jre_find_jre_17_jres,
+        api::pack::pack_install_file,
-            api::jre::jre_find_jre_8_jres,
+        api::auth::auth_authenticate_begin_flow,
-            api::jre::jre_validate_globals,
+        api::auth::auth_authenticate_await_completion,
-            api::jre::jre_get_jre,
+        api::auth::auth_cancel_flow,
-            api::jre::jre_auto_install_java,
+        api::auth::auth_refresh,
-            api::jre::jre_get_max_memory,
+        api::auth::auth_remove_user,
-            api::process::process_get_all_uuids,
+        api::auth::auth_has_user,
-            api::process::process_get_all_running_uuids,
+        api::auth::auth_users,
-            api::process::process_get_uuids_by_profile_path,
+        api::auth::auth_get_user,
-            api::process::process_get_all_running_profile_paths,
+        api::tags::tags_get_categories,
-            api::process::process_get_all_running_profiles,
+        api::tags::tags_get_donation_platforms,
-            api::process::process_get_exit_status_by_uuid,
+        api::tags::tags_get_game_versions,
-            api::process::process_has_finished_by_uuid,
+        api::tags::tags_get_loaders,
-            api::process::process_get_stderr_by_uuid,
+        api::tags::tags_get_report_types,
-            api::process::process_get_stdout_by_uuid,
+        api::tags::tags_get_tag_bundle,
-            api::process::process_kill_by_uuid,
+        api::settings::settings_get,
-            api::process::process_wait_for_by_uuid,
+        api::settings::settings_set,
-            api::metadata::metadata_get_game_versions,
+        api::jre::jre_get_all_jre,
-            api::metadata::metadata_get_fabric_versions,
+        api::jre::jre_autodetect_java_globals,
-            api::metadata::metadata_get_forge_versions,
+        api::jre::jre_find_jre_18plus_jres,
-            api::metadata::metadata_get_quilt_versions,
+        api::jre::jre_find_jre_17_jres,
-            api::logs::logs_get_logs,
+        api::jre::jre_find_jre_8_jres,
-            api::logs::logs_get_logs_by_datetime,
+        api::jre::jre_validate_globals,
-            api::logs::logs_get_stdout_by_datetime,
+        api::jre::jre_get_jre,
-            api::logs::logs_get_stderr_by_datetime,
+        api::jre::jre_auto_install_java,
-            api::logs::logs_delete_logs,
+        api::jre::jre_get_max_memory,
-            api::logs::logs_delete_logs_by_datetime,
+        api::process::process_get_all_uuids,
-            api::utils::show_in_folder,
+        api::process::process_get_all_running_uuids,
-            api::utils::should_disable_mouseover,
+        api::process::process_get_uuids_by_profile_path,
-        ])
+        api::process::process_get_all_running_profile_paths,
+        api::process::process_get_all_running_profiles,
+        api::process::process_get_exit_status_by_uuid,
+        api::process::process_has_finished_by_uuid,
+        api::process::process_get_stderr_by_uuid,
+        api::process::process_get_stdout_by_uuid,
+        api::process::process_kill_by_uuid,
+        api::process::process_wait_for_by_uuid,
+        api::metadata::metadata_get_game_versions,
+        api::metadata::metadata_get_fabric_versions,
+        api::metadata::metadata_get_forge_versions,
+        api::metadata::metadata_get_quilt_versions,
+        api::logs::logs_get_logs,
+        api::logs::logs_get_logs_by_datetime,
+        api::logs::logs_get_stdout_by_datetime,
+        api::logs::logs_get_stderr_by_datetime,
+        api::logs::logs_delete_logs,
+        api::logs::logs_delete_logs_by_datetime,
+        api::utils::show_in_folder,
+        api::utils::should_disable_mouseover,
+    ]);
+
+    builder
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

theseus_gui/src/components/GridDisplay.vue

@@ -189,6 +189,9 @@ const filteredResults = computed(() => {
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
+      <Button @click="() => (search = '')">
+        <XIcon />
+      </Button>
     </div>
     <div class="labeled_button">
       <span>Sort by</span>

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -1,9 +1,17 @@
 <template>
-  <div v-if="currentProcesses[0]" class="status">
+  <div v-if="selectedProfile" class="status">
     <span class="circle running" />
-    <span class="running-text">
+    <div
-      {{ currentProcesses[0].metadata.name }}
+      ref="profileButton"
-    </span>
+      class="running-text"
+      :class="{ clickable: currentProcesses.length > 1 }"
+      @click="toggleProfiles()"
+    >
+      {{ selectedProfile.metadata.name }}
+      <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
+        <DropdownIcon />
+      </div>
+    </div>
     <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
       <StopCircleIcon />
     </Button>
@@ -44,10 +52,56 @@
       </div>
     </Card>
   </transition>
+  <transition name="download">
+    <Card v-if="showCard === true" ref="card" class="info-card">
+      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+        <h3 class="info-title">
+          {{ loadingBar.bar_type.pack_name ?? 'Installing Modpack' }}
+        </h3>
+        <ProgressBar :progress="Math.floor(loadingBar.current)" />
+        <div class="row">{{ Math.floor(loadingBar.current) }}% {{ loadingBar.message }}</div>
+      </div>
+    </Card>
+  </transition>
+  <transition name="download">
+    <Card v-if="showProfiles === true" ref="profiles" class="profile-card">
+      <Button
+        v-for="profile in currentProcesses"
+        :key="profile.id"
+        class="profile-button"
+        @click="selectProfile(profile)"
+      >
+        <div class="text"><span class="circle running" /> {{ profile.metadata.name }}</div>
+        <Button
+          v-tooltip="'Stop instance'"
+          icon-only
+          class="icon-button stop"
+          @click.stop="stop(profile.path)"
+        >
+          <StopCircleIcon />
+        </Button>
+        <Button
+          v-tooltip="'View logs'"
+          icon-only
+          class="icon-button"
+          @click.stop="goToTerminal(profile.path)"
+        >
+          <TerminalSquareIcon />
+        </Button>
+      </Button>
+    </Card>
+  </transition>
 </template>
 
 <script setup>
-import { Button, DownloadIcon, Card, StopCircleIcon, TerminalSquareIcon } from 'omorphia'
+import {
+  Button,
+  DownloadIcon,
+  Card,
+  StopCircleIcon,
+  TerminalSquareIcon,
+  DropdownIcon,
+} from 'omorphia'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   get_all_running_profiles as getRunningProfiles,
@@ -62,10 +116,14 @@ import { handleError } from '@/store/notifications.js'
 
 const router = useRouter()
 const card = ref(null)
+const profiles = ref(null)
 const infoButton = ref(null)
+const profileButton = ref(null)
 const showCard = ref(false)
+const showProfiles = ref(false)
 
 const currentProcesses = ref(await getRunningProfiles().catch(handleError))
+const selectedProfile = ref(currentProcesses.value[0])
 
 const unlistenProcess = await process_listener(async () => {
   await refresh()
@@ -73,11 +131,14 @@ const unlistenProcess = await process_listener(async () => {
 
 const refresh = async () => {
   currentProcesses.value = await getRunningProfiles().catch(handleError)
+  if (!currentProcesses.value.includes(selectedProfile.value)) {
+    selectedProfile.value = currentProcesses.value[0]
+  }
 }
 
-const stop = async () => {
+const stop = async (path) => {
   try {
-    const processes = await getProfileProcesses(currentProcesses.value[0].path)
+    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
     await killProfile(processes[0])
   } catch (e) {
     console.error(e)
@@ -85,8 +146,8 @@ const stop = async () => {
   await refresh()
 }
 
-const goToTerminal = () => {
+const goToTerminal = (path) => {
-  router.push(`/instance/${encodeURIComponent(currentProcesses.value[0].path)}/logs`)
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProfile.value.path)}/logs`)
 }
 
 const currentLoadingBars = ref(Object.values(await progress_bars_list().catch(handleError)))
@@ -105,35 +166,70 @@ const refreshInfo = async () => {
   }
 }
 
-const handleClickOutside = (event) => {
+const selectProfile = (profile) => {
+  selectedProfile.value = profile
+  showProfiles.value = false
+}
+
+const handleClickOutsideCard = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (
     card.value &&
-    infoButton.value.$el !== event.target &&
     card.value.$el !== event.target &&
-    !document.elementsFromPoint(event.clientX, event.clientY).includes(card.value.$el) &&
+    !elements.includes(card.value.$el) &&
-    !document.elementsFromPoint(event.clientX, event.clientY).includes(infoButton.value.$el)
+    !infoButton.value.contains(event.target)
   ) {
     showCard.value = false
   }
 }
 
+const handleClickOutsideProfile = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    profiles.value &&
+    profiles.value.$el !== event.target &&
+    !elements.includes(profiles.value.$el) &&
+    !profileButton.value.contains(event.target)
+  ) {
+    showProfiles.value = false
+  }
+}
+
 const toggleCard = async () => {
   showCard.value = !showCard.value
+  showProfiles.value = false
   await refreshInfo()
 }
 
+const toggleProfiles = async () => {
+  if (currentProcesses.value.length === 1) return
+  showProfiles.value = !showProfiles.value
+  showCard.value = false
+}
+
 onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
+  window.addEventListener('click', handleClickOutsideCard)
+  window.addEventListener('click', handleClickOutsideProfile)
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('click', handleClickOutsideCard)
+  window.removeEventListener('click', handleClickOutsideProfile)
   unlistenProcess()
   unlistenLoading()
 })
 </script>
 
 <style scoped lang="scss">
+.arrow {
+  transition: transform 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  &.rotate {
+    transform: rotate(180deg);
+  }
+}
+
 .status {
   height: 100%;
   display: flex;
@@ -146,8 +242,18 @@ onBeforeUnmount(() => {
 }
 
 .running-text {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-xs);
   white-space: nowrap;
   overflow: hidden;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
 }
 
 .circle {
@@ -266,4 +372,37 @@ onBeforeUnmount(() => {
 .info-title {
   margin: 0;
 }
+
+.profile-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: none;
+
+  .text {
+    margin-right: auto;
+  }
+}
+
+.profile-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-md);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
 </style>

theseus_gui/src/pages/Browse.vue

@@ -14,6 +14,7 @@ import {
   formatCategoryHeader,
   formatCategory,
   Promotion,
+  XIcon,
   DropdownSelect,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
@@ -630,6 +631,9 @@ const showLoaders = computed(
             :placeholder="`Search ${projectType}s...`"
             @input="onSearchChange(1)"
           />
+          <Button @click="() => (searchStore.searchInput = '')">
+            <XIcon />
+          </Button>
         </div>
         <div class="inline-option">
           <span>Sort by</span>

theseus_gui/src/pages/Settings.vue

@@ -209,6 +209,7 @@ watch(
           :min="256"
           :max="maxMemory"
           :step="1"
+          unit="mb"
         />
       </div>
     </Card>

theseus_gui/src/pages/instance/Mods.vue

@@ -13,6 +13,9 @@
           class="text-input"
           autocomplete="off"
         />
+        <Button @click="() => (searchFilter = '')">
+          <XIcon />
+        </Button>
       </div>
       <span class="manage">
         <span class="text-combo">
@@ -39,22 +42,63 @@
         </Button>
       </span>
     </div>
-    <Chips
+    <div class="second-row">
-      v-if="Object.keys(selectableProjectTypes).length > 1"
+      <Chips
-      v-model="selectedProjectType"
+        v-if="Object.keys(selectableProjectTypes).length > 1"
-      :items="Object.keys(selectableProjectTypes)"
+        v-model="selectedProjectType"
-    />
+        :items="Object.keys(selectableProjectTypes)"
+      />
+      <Button :disabled="!projects.some((x) => x.outdated)" class="no-wrap" @click="updateAll">
+        <UpdatedIcon />
+        Update {{ selected.length > 0 ? 'selected' : 'all' }}
+      </Button>
+      <Button v-if="selected.length > 0" class="no-wrap" @click="deleteWarning.show()">
+        <TrashIcon />
+        Remove selected
+      </Button>
+      <DropdownButton
+        v-if="selected.length > 0"
+        :options="['toggle', 'disable', 'enable']"
+        default-value="toggle"
+        @option-click="toggleSelected"
+      >
+        <template #toggle>
+          <GlobeIcon />
+          Toggle selected
+        </template>
+        <template #disable>
+          <EditIcon />
+          Disable selected
+        </template>
+        <template #enable>
+          <HashIcon />
+          Enable selected
+        </template>
+      </DropdownButton>
+      <DropdownButton
+        v-if="selected.length > 0"
+        :options="['copy_name', 'copy_url', 'copy_slug']"
+        default-value="copy_name"
+        @option-click="copySelected"
+      >
+        <template #copy_name>
+          <EditIcon />
+          Copy names
+        </template>
+        <template #copy_slug>
+          <HashIcon />
+          Copy slugs
+        </template>
+        <template #copy_url>
+          <GlobeIcon />
+          Copy URLs
+        </template>
+      </DropdownButton>
+    </div>
     <div class="table">
       <div class="table-row table-head">
         <div class="table-cell table-text">
-          <Button
+          <Checkbox v-model="selectAll" class="select-checkbox" />
-            v-tooltip="'Update all projects'"
-            icon-only
-            :disabled="!projects.some((x) => x.outdated)"
-            @click="updateAll"
-          >
-            <UpdatedIcon />
-          </Button>
         </div>
         <div class="table-cell table-text name-cell">Name</div>
         <div class="table-cell table-text">Version</div>
@@ -68,17 +112,7 @@
         @contextmenu.prevent.stop="(c) => handleRightClick(c, mod)"
       >
         <div class="table-cell table-text">
-          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
+          <Checkbox v-model="mod.selected" class="select-checkbox" />
-          <Button
-            v-else
-            v-tooltip="'Update project'"
-            :disabled="!mod.outdated"
-            icon-only
-            @click="updateProject(mod)"
-          >
-            <UpdatedIcon v-if="mod.outdated" />
-            <CheckIcon v-else />
-          </Button>
         </div>
         <div class="table-cell table-text name-cell">
           <router-link
@@ -100,6 +134,17 @@
           <Button v-tooltip="'Remove project'" icon-only @click="removeMod(mod)">
             <TrashIcon />
           </Button>
+          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
+          <Button
+            v-else
+            v-tooltip="'Update project'"
+            :disabled="!mod.outdated"
+            icon-only
+            @click="updateProject(mod)"
+          >
+            <UpdatedIcon v-if="mod.outdated" />
+            <CheckIcon v-else />
+          </Button>
           <input
             id="switch-1"
             autocomplete="off"
@@ -112,6 +157,25 @@
       </div>
     </div>
   </Card>
+  <Modal ref="deleteWarning" header="Are you sure?">
+    <div class="modal-body">
+      <div class="markdown-body">
+        <p>
+          Are you sure you want to remove <strong>{{ selected.length }} projects</strong> from
+          {{ instance.metadata.name }}?
+          <br />
+          This action <strong>cannot</strong> be undone.
+        </p>
+      </div>
+      <div class="button-group push-right">
+        <Button @click="deleteWarning.hide()"> Cancel </Button>
+        <Button color="danger" @click="deleteSelected">
+          <TrashIcon />
+          Remove
+        </Button>
+      </div>
+    </div>
+  </Modal>
 </template>
 <script setup>
 import {
@@ -126,9 +190,16 @@ import {
   DropdownSelect,
   AnimatedLogo,
   Chips,
+  Checkbox,
   formatProjectType,
+  DropdownButton,
+  EditIcon,
+  GlobeIcon,
+  HashIcon,
+  Modal,
+  XIcon,
 } from 'omorphia'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { useRouter } from 'vue-router'
 import {
@@ -201,8 +272,11 @@ for (const [path, project] of Object.entries(props.instance.projects)) {
 }
 
 const searchFilter = ref('')
+const selectAll = ref(false)
 const sortFilter = ref('')
 const selectedProjectType = ref('All')
+const selected = computed(() => projects.value.filter((mod) => mod.selected))
+const deleteWarning = ref(null)
 
 const selectableProjectTypes = computed(() => {
   const obj = { All: 'all' }
@@ -274,7 +348,7 @@ function updateSort(projects, sort) {
 
 async function updateAll() {
   const setProjects = []
-  for (const [i, project] of projects.value.entries()) {
+  for (const [i, project] of selected.value ?? projects.value.entries()) {
     if (project.outdated) {
       project.updating = true
       setProjects.push(i)
@@ -318,6 +392,68 @@ async function removeMod(mod) {
   projects.value = projects.value.filter((x) => mod.path !== x.path)
 }
 
+async function deleteSelected() {
+  for (const project of selected.value) {
+    await remove_project(props.instance.path, project.path).catch(handleError)
+  }
+  projects.value = projects.value.filter((x) => !x.selected)
+  deleteWarning.value.hide()
+}
+
+async function copySelected(args) {
+  switch (args.option) {
+    case 'copy_name':
+      await navigator.clipboard.writeText(selected.value.map((x) => x.name).join('\n'))
+      break
+    case 'copy_slug':
+      await navigator.clipboard.writeText(
+        selected.value
+          .filter((x) => x.slug)
+          .map((x) => x.slug)
+          .join('\n')
+      )
+      break
+    case 'copy_url':
+      await navigator.clipboard.writeText(
+        selected.value
+          .filter((x) => x.slug)
+          .map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
+          .join('\n')
+      )
+      break
+  }
+}
+
+async function toggleSelected(args) {
+  switch (args.option) {
+    case 'toggle':
+      for (const project of selected.value) {
+        await toggleDisableMod(project)
+      }
+      break
+    case 'enable':
+      for (const project of selected.value) {
+        if (project.disabled) {
+          await toggleDisableMod(project)
+        }
+      }
+      break
+    case 'disable':
+      for (const project of selected.value) {
+        if (!project.disabled) {
+          await toggleDisableMod(project)
+        }
+      }
+      break
+  }
+}
+
+watch(selectAll, () => {
+  for (const project of projects.value) {
+    project.selected = selectAll.value
+  }
+})
+
 const handleRightClick = (event, mod) => {
   if (mod.slug && mod.project_type) {
     props.options.showMenu(
@@ -346,7 +482,7 @@ const handleRightClick = (event, mod) => {
 }
 
 .table-row {
-  grid-template-columns: min-content 2fr 1fr 1fr 8rem;
+  grid-template-columns: min-content 2fr 1fr 1fr 11rem;
 }
 
 .table-cell {
@@ -384,6 +520,34 @@ const handleRightClick = (event, mod) => {
 .sort {
   padding-left: 0.5rem;
 }
+
+.second-row {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+
+  .chips {
+    flex-grow: 1;
+  }
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: var(--gap-lg);
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  strong {
+    color: var(--color-contrast);
+  }
+}
 </style>
 <style lang="scss">
 .updating-indicator {
@@ -395,4 +559,10 @@ const handleRightClick = (event, mod) => {
 .v-popper--theme-tooltip .v-popper__inner {
   background: #fff !important;
 }
+
+.select-checkbox {
+  button.checkbox {
+    border: none;
+  }
+}
 </style>

theseus_gui/src/pages/instance/Options.vue

@@ -167,6 +167,7 @@
         :min="256"
         :max="maxMemory"
         :step="1"
+        unit="mb"
       />
     </div>
   </Card>