selection states preserve

update selectable
sortable
2026-03-14 19:04:06 -04:00 · 2026-03-14 18:59:13 -04:00 · 2026-03-14 18:49:38 -04:00 · 2026-03-14 18:40:34 -04:00
5 changed files with 425 additions and 90 deletions
--- a/src/components/SoftwareCard.vue
+++ b/src/components/SoftwareCard.vue
@@ -1,5 +1,25 @@
 <template>
-  <div class="software-card" :class="{ 'installed-mode': software.status === 'installed' }">
+  <div 
+    class="software-card" 
+    :class="{ 
+      'installed-mode': software.status === 'installed',
+      'is-selected': isSelected && software.status !== 'installed'
+    }"
+    @click="handleCardClick"
+  >
+    <!-- 左侧勾选框 -->
+    <div class="selection-area" v-if="selectable">
+      <div 
+        class="checkbox" 
+        :class="{ 
+          'checked': isSelected, 
+          'disabled': software.status === 'installed' 
+        }"
+      >
+        <span v-if="isSelected">✓</span>
+      </div>
+    </div>
+
    <div class="card-left">
      <div class="icon-container">
        <img v-if="software.icon_url" :src="software.icon_url" :alt="software.name" class="software-icon" />
@@ -26,7 +46,7 @@
      <div class="action-wrapper">
        <button 
          v-if="software.status === 'idle'" 
-          @click="$emit('install', software.id)"
+          @click.stop="$emit('install', software.id)"
          class="action-btn install-btn"
        >
          {{ actionLabel }}
@@ -49,7 +69,6 @@
              />
            </svg>
          </div>
-          <span class="status-text">{{ software.status === 'pending' ? '等待中...' : '安装中...' }}</span>
        </div>

        <div v-else-if="software.status === 'success'" class="status-success">
@@ -78,9 +97,13 @@ const props = defineProps<{
    status: string;
    progress: number;
  },
-  actionLabel?: string
+  actionLabel?: string,
+  selectable?: boolean,
+  isSelected?: boolean
 }>();

+const emit = defineEmits(['install', 'toggleSelect']);
+
 const placeholderColor = computed(() => {
  const colors = ['#FF9500', '#FF3B30', '#34C759', '#007AFF', '#5856D6', '#AF52DE'];
  let hash = 0;
@@ -89,6 +112,12 @@ const placeholderColor = computed(() => {
  }
  return colors[Math.abs(hash) % colors.length];
 });
+
+const handleCardClick = () => {
+  if (props.selectable && props.software.status !== 'installed') {
+    emit('toggleSelect', props.software.id);
+  }
+};
 </script>

 <style scoped>
@@ -103,11 +132,49 @@ const placeholderColor = computed(() => {
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.02);
  margin-bottom: 12px;
+  cursor: default;
 }

-.software-card:hover {
-  transform: scale(1.01);
+.software-card:not(.installed-mode):hover {
+  transform: scale(1.005);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 122, 255, 0.1);
+}
+
+.software-card.is-selected {
+  background-color: rgba(0, 122, 255, 0.02);
+  border-color: rgba(0, 122, 255, 0.2);
+}
+
+/* 勾选框样式 */
+.selection-area {
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.checkbox {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.checkbox.checked {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.checkbox.disabled {
+  background-color: #F2F2F7;
+  border-color: #E5E5E7;
+  cursor: not-allowed;
 }

 .card-left {
@@ -207,8 +274,8 @@ const placeholderColor = computed(() => {
 }

 .action-btn {
-  width: 90px; /* 固定宽度，确保对齐 */
-  height: 34px; /* 固定高度 */
+  width: 90px;
+  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -231,8 +298,8 @@ const placeholderColor = computed(() => {
 }

 .installed-btn {
-  background-color: #F2F2F7; /* 更浅的灰色 */
-  color: #AEAEB2; /* 更淡的文字颜色 */
+  background-color: #F2F2F7;
+  color: #AEAEB2;
  cursor: not-allowed;
 }

@@ -263,13 +330,6 @@ const placeholderColor = computed(() => {
  transition: stroke-dashoffset 0.3s ease;
 }

-.status-text {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--primary-color);
-  display: none; /* 在固定宽度下隐藏文字，保持简洁 */
-}
-
 .status-success, .status-error {
  width: 90px;
  text-align: center;
--- a/src/store/software.ts
+++ b/src/store/software.ts
@@ -2,13 +2,17 @@ import { defineStore } from 'pinia'
 import { invoke } from '@tauri-apps/api/core'
 import { listen } from '@tauri-apps/api/event'

+const sortByName = (a: any, b: any) => a.name.localeCompare(b.name, 'zh-CN', { sensitivity: 'accent' });
+
 export const useSoftwareStore = defineStore('software', {
  state: () => ({
    essentials: [] as any[],
    updates: [] as any[],
    allSoftware: [] as any[],
+    selectedEssentialIds: [] as string[],
+    selectedUpdateIds: [] as string[],
    loading: false,
-    lastFetched: 0 // 记录上次完整同步的时间戳
+    lastFetched: 0
  }),
  getters: {
    mergedEssentials: (state) => {
@@ -28,39 +32,75 @@ export const useSoftwareStore = defineStore('software', {
          }
        }
        
-        return {
-          ...item,
-          status: displayStatus,
-          actionLabel
-        };
+        return { ...item, status: displayStatus, actionLabel };
      });
-    }
+    },
+    sortedUpdates: (state) => [...state.updates].sort(sortByName),
+    sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
  },
  actions: {
+    // 通用的勾选切换逻辑
+    toggleSelection(id: string, type: 'essential' | 'update') {
+      const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
+      const index = list.indexOf(id);
+      if (index === -1) {
+        list.push(id);
+      } else {
+        list.splice(index, 1);
+      }
+    },
+    selectAll(type: 'essential' | 'update') {
+      if (type === 'essential') {
+        const selectable = this.mergedEssentials.filter(s => s.status !== 'installed');
+        this.selectedEssentialIds = selectable.map(s => s.id);
+      } else {
+        this.selectedUpdateIds = this.updates.map(s => s.id);
+      }
+    },
+    deselectAll(type: 'essential' | 'update') {
+      if (type === 'essential') this.selectedEssentialIds = [];
+      else this.selectedUpdateIds = [];
+    },
+    invertSelection(type: 'essential' | 'update') {
+      if (type === 'essential') {
+        const selectable = this.mergedEssentials.filter(s => s.status !== 'installed').map(s => s.id);
+        this.selectedEssentialIds = selectable.filter(id => !this.selectedEssentialIds.includes(id));
+      } else {
+        const selectable = this.updates.map(s => s.id);
+        this.selectedUpdateIds = selectable.filter(id => !this.selectedUpdateIds.includes(id));
+      }
+    },
+
    async fetchEssentials() {
      this.essentials = await invoke('get_essentials')
    },
    async fetchUpdates() {
      this.loading = true
-      this.updates = await invoke('get_updates')
-      this.loading = false
+      try {
+        const res = await invoke('get_updates')
+        this.updates = res as any[]
+        // 刷新数据后，如果没选过，默认全选
+        if (this.selectedUpdateIds.length === 0) this.selectAll('update');
+      } finally {
+        this.loading = false
+      }
    },
    async fetchAll() {
      this.loading = true
-      this.allSoftware = await invoke('get_all_software')
-      this.loading = false
+      try {
+        const res = await invoke('get_all_software')
+        this.allSoftware = res as any[]
+      } finally {
+        this.loading = false
+      }
    },
-    // 智能同步：如果数据较新，则直接返回
    async syncDataIfNeeded(force = false) {
      const now = Date.now();
-      const CACHE_TIMEOUT = 5 * 60 * 1000; // 5 分钟缓存
-
+      const CACHE_TIMEOUT = 5 * 60 * 1000;
      if (!force && this.allSoftware.length > 0 && (now - this.lastFetched < CACHE_TIMEOUT)) {
-        // 如果不是强制刷新，且数据在 5 分钟内，且已经有数据，则跳过
        if (this.essentials.length === 0) await this.fetchEssentials();
        return;
      }
-
      await this.fetchAllData();
    },
    async fetchAllData() {
@@ -75,6 +115,8 @@ export const useSoftwareStore = defineStore('software', {
        this.allSoftware = all as any[];
        this.updates = updates as any[];
        this.lastFetched = Date.now();
+        // 如果没选过，默认全选
+        if (this.selectedEssentialIds.length === 0) this.selectAll('essential');
      } finally {
        this.loading = false;
      }
@@ -85,13 +127,11 @@ export const useSoftwareStore = defineStore('software', {
      await invoke('install_software', { id })
    },
    findSoftware(id: string) {
-      // 这里的逻辑会从多个列表中查找对象
      return this.essentials.find(s => s.id === id) || 
             this.updates.find(s => s.id === id) || 
             this.allSoftware.find(s => s.id === id)
    },
    initListener() {
-      // 避免重复监听
      if ((window as any).__tauri_listener_init) return;
      (window as any).__tauri_listener_init = true;

@@ -102,10 +142,11 @@ export const useSoftwareStore = defineStore('software', {
          software.status = status
          software.progress = progress
        }
-        
-        // 如果安装成功，标记数据过期，以便下次切换或刷新时同步最新状态
        if (status === 'success') {
          this.lastFetched = 0;
+          // 安装成功后从选择列表中移除
+          this.selectedEssentialIds = this.selectedEssentialIds.filter(i => i !== id);
+          this.selectedUpdateIds = this.selectedUpdateIds.filter(i => i !== id);
        }
      })
    }
--- a/src/views/AllSoftware.vue
+++ b/src/views/AllSoftware.vue
@@ -5,17 +5,34 @@
        <h1>全部软件</h1>
        <p class="count">共 {{ filteredSoftware.length }} 个项目</p>
      </div>
-      <div class="search-box">
-        <input 
-          type="text" 
-          v-model="searchQuery" 
-          placeholder="搜索已安装的软件..." 
-          class="search-input"
-        />
+      <div class="header-actions">
+        <button 
+          @click="store.fetchAll" 
+          class="secondary-btn action-btn" 
+          :disabled="store.loading"
+        >
+          <span class="icon" :class="{ 'spinning': store.loading }">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 2v6h-6"></path>
+              <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
+              <path d="M3 22v-6h6"></path>
+              <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
+            </svg>
+          </span>
+          {{ store.loading ? '正在扫描...' : '重新扫描' }}
+        </button>
+        <div class="search-box">
+          <input 
+            type="text" 
+            v-model="searchQuery" 
+            placeholder="搜索已安装的软件..." 
+            class="search-input"
+          />
+        </div>
      </div>
    </header>
    
-    <div v-if="store.loading" class="loading-state">
+    <div v-if="store.loading && store.sortedAllSoftware.length === 0" class="loading-state">
      <div class="spinner"></div>
      <p>正在读取已安装软件列表...</p>
    </div>
@@ -45,9 +62,10 @@ onMounted(() => {
 });

 const filteredSoftware = computed(() => {
-  if (!searchQuery.value) return store.allSoftware;
+  const data = store.sortedAllSoftware;
+  if (!searchQuery.value) return data;
  const q = searchQuery.value.toLowerCase();
-  return store.allSoftware.filter(s => 
+  return data.filter(s => 
    s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q)
  );
 });
@@ -78,20 +96,62 @@ const filteredSoftware = computed(() => {
  margin-top: 4px;
 }

+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-light);
+  color: var(--text-main);
+  white-space: nowrap;
+}
+
+.action-btn:hover {
+  background-color: white;
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.icon.spinning {
+  animation: spin 1s linear infinite;
+}
+
 .search-input {
-  width: 280px;
-  padding: 10px 16px;
-  border-radius: 12px;
+  width: 240px;
+  padding: 8px 16px;
+  border-radius: 10px;
  border: 1px solid var(--border-color);
  background-color: white;
-  font-size: 14px;
+  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
 }

 .search-input:focus {
  border-color: var(--primary-color);
-  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
 }

 .software-list {
--- a/src/views/Essentials.vue
+++ b/src/views/Essentials.vue
@@ -21,14 +21,28 @@
          {{ store.loading ? '正在同步...' : '同步状态' }}
        </button>
        <button 
-          @click="installAll" 
+          @click="installSelected" 
          class="primary-btn action-btn" 
-          :disabled="store.loading"
+          :disabled="store.loading || store.selectedEssentialIds.length === 0"
        >
-          一键安装全部
+          安装/更新所选 ({{ store.selectedEssentialIds.length }})
        </button>
      </div>
    </header>
+
+    <!-- 批量选择控制栏 -->
+    <div class="selection-toolbar" v-if="selectableItems.length > 0">
+      <div class="toolbar-left">
+        <span class="selection-count">已选 {{ store.selectedEssentialIds.length }} / {{ selectableItems.length }} 项</span>
+      </div>
+      <div class="toolbar-actions">
+        <button @click="store.selectAll('essential')" class="text-btn">全选</button>
+        <div class="divider"></div>
+        <button @click="store.deselectAll('essential')" class="text-btn">取消</button>
+        <div class="divider"></div>
+        <button @click="store.invertSelection('essential')" class="text-btn">反选</button>
+      </div>
+    </div>
    
    <div v-if="store.loading && store.mergedEssentials.length === 0" class="loading-state">
      <div class="spinner"></div>
@@ -41,7 +55,10 @@
        :key="item.id" 
        :software="item"
        :action-label="item.actionLabel"
+        :selectable="true"
+        :is-selected="store.selectedEssentialIds.includes(item.id)"
        @install="store.install"
+        @toggle-select="id => store.toggleSelection(id, 'essential')"
      />
    </div>
  </main>
@@ -50,22 +67,24 @@
 <script setup lang="ts">
 import SoftwareCard from '../components/SoftwareCard.vue';
 import { useSoftwareStore } from '../store/software';
-import { onMounted } from 'vue';
+import { onMounted, computed } from 'vue';

 const store = useSoftwareStore();

+const selectableItems = computed(() => {
+  return store.mergedEssentials.filter(s => s.status !== 'installed');
+});
+
+const installSelected = () => {
+  store.selectedEssentialIds.forEach(id => {
+    store.install(id);
+  });
+};
+
 onMounted(() => {
  store.syncDataIfNeeded();
  store.initListener();
 });
-
-const installAll = () => {
-  store.mergedEssentials.forEach(s => {
-    if (s.status === 'idle') {
-      store.install(s.id);
-    }
-  });
-};
 </script>

 <style scoped>
@@ -79,7 +98,7 @@ const installAll = () => {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }

 .content-header h1 {
@@ -95,6 +114,52 @@ const installAll = () => {
  align-items: center;
 }

+/* 批量选择工具栏 */
+.selection-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.selection-count {
+  font-size: 13px;
+  color: var(--text-sec);
+  font-weight: 500;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.text-btn {
+  background: none;
+  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.text-btn:hover {
+  background-color: rgba(0, 122, 255, 0.08);
+}
+
+.divider {
+  width: 1px;
+  height: 12px;
+  background-color: var(--border-color);
+}
+
 .action-btn {
  display: flex;
  align-items: center;
@@ -133,9 +198,10 @@ const installAll = () => {
 }

 .action-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
+  box-shadow: none;
 }

 .icon {
--- a/src/views/Updates.vue
+++ b/src/views/Updates.vue
@@ -1,32 +1,69 @@
 <template>
  <main class="content">
    <header class="content-header">
-      <h1>软件更新</h1>
-      <div class="actions">
-        <button @click="store.fetchUpdates" class="secondary-btn" :disabled="store.loading">
-          {{ store.loading ? '检查中...' : '检查更新' }}
+      <div class="header-left">
+        <h1>软件更新</h1>
+      </div>
+      <div class="header-actions">
+        <button 
+          @click="store.fetchUpdates" 
+          class="secondary-btn action-btn" 
+          :disabled="store.loading"
+        >
+          <span class="icon" :class="{ 'spinning': store.loading }">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 2v6h-6"></path>
+              <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
+              <path d="M3 22v-6h6"></path>
+              <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
+            </svg>
+          </span>
+          {{ store.loading ? '正在检查...' : '检查更新' }}
+        </button>
+        <button 
+          @click="updateSelected" 
+          class="primary-btn action-btn" 
+          :disabled="store.selectedUpdateIds.length === 0 || store.loading"
+        >
+          更新所选 ({{ store.selectedUpdateIds.length }})
        </button>
-        <button @click="updateAll" class="primary-btn" :disabled="!store.updates.length">全部更新</button>
      </div>
    </header>
+
+    <!-- 批量选择控制栏 -->
+    <div class="selection-toolbar" v-if="store.sortedUpdates.length > 0">
+      <div class="toolbar-left">
+        <span class="selection-count">已选 {{ store.selectedUpdateIds.length }} / {{ store.sortedUpdates.length }} 项</span>
+      </div>
+      <div class="toolbar-actions">
+        <button @click="store.selectAll('update')" class="text-btn">全选</button>
+        <div class="divider"></div>
+        <button @click="store.deselectAll('update')" class="text-btn">取消</button>
+        <div class="divider"></div>
+        <button @click="store.invertSelection('update')" class="text-btn">反选</button>
+      </div>
+    </div>
    
-    <div v-if="store.loading" class="loading-state">
+    <div v-if="store.loading && store.updates.length === 0" class="loading-state">
      <div class="spinner"></div>
      <p>正在使用 Winget 扫描可用的更新...</p>
    </div>

-    <div v-else-if="store.updates.length === 0" class="empty-state">
+    <div v-else-if="store.updates.length === 0 && !store.loading" class="empty-state">
      <span class="empty-icon">✅</span>
      <p>所有软件已是最新版本</p>
    </div>

    <div v-else class="software-list">
      <SoftwareCard 
-        v-for="item in store.updates" 
+        v-for="item in store.sortedUpdates" 
        :key="item.id" 
        :software="item"
        action-label="更新"
+        :selectable="true"
+        :is-selected="store.selectedUpdateIds.includes(item.id)"
        @install="store.install"
+        @toggle-select="id => store.toggleSelection(id, 'update')"
      />
    </div>
  </main>
@@ -39,19 +76,17 @@ import { onMounted } from 'vue';

 const store = useSoftwareStore();

+const updateSelected = () => {
+  store.selectedUpdateIds.forEach(id => {
+    store.install(id);
+  });
+};
+
 onMounted(() => {
  if (store.updates.length === 0) {
    store.fetchUpdates();
  }
 });
-
-const updateAll = () => {
-  store.updates.forEach(s => {
-    if (s.status === 'idle') {
-      store.install(s.id);
-    }
-  });
-};
 </script>

 <style scoped>
@@ -65,27 +100,79 @@ const updateAll = () => {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }

 .content-header h1 {
  font-size: 32px;
  font-weight: 700;
+  letter-spacing: -0.5px;
 }

-.actions {
+.header-actions {
  display: flex;
  gap: 12px;
+  align-items: center;
 }

-.primary-btn, .secondary-btn {
+/* 批量选择工具栏 */
+.selection-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.selection-count {
+  font-size: 13px;
+  color: var(--text-sec);
+  font-weight: 500;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.text-btn {
+  background: none;
  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.text-btn:hover {
+  background-color: rgba(0, 122, 255, 0.08);
+}
+
+.divider {
+  width: 1px;
+  height: 12px;
+  background-color: var(--border-color);
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
+  border: none;
+  white-space: nowrap;
 }

 .primary-btn {
@@ -94,15 +181,36 @@ const updateAll = () => {
  box-shadow: var(--btn-shadow);
 }

-.primary-btn:disabled {
-  background-color: var(--border-color);
-  box-shadow: none;
-  cursor: not-allowed;
+.primary-btn:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
 }

 .secondary-btn {
-  background-color: var(--border-color);
+  background-color: var(--bg-light);
  color: var(--text-main);
+  border: 1px solid var(--border-color);
+}
+
+.secondary-btn:hover {
+  background-color: white;
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.icon.spinning {
+  animation: spin 1s linear infinite;
 }

 .software-list {
Author	SHA1	Message	Date
Julian Freeman	cdee6b47c7	selection states preserve	2026-03-14 19:04:06 -04:00
Julian Freeman	34ad167ad2	update selectable	2026-03-14 18:59:13 -04:00
Julian Freeman	8d700770aa	sortable	2026-03-14 18:49:38 -04:00
Julian Freeman	2955e1eada	essentials selectable	2026-03-14 18:40:34 -04:00