fix: ensure tags are updated in next editor

src/options/index.js

@@ -86,14 +86,12 @@ async function requestData(id) {
     (script.config.removed ? removedScripts : scripts).push(script);
   });
   // now we can render
-  store.id = id;
   store.scripts = scripts;
   store.removedScripts = removedScripts;
-  store.loading = false;
+  if (store.loaded !== 'all') store.loaded = !!id || 'all';
 }
 
 function initMain() {
-  store.loading = true;
   loadData();
   Object.assign(handlers, {
     ScriptsUpdated() {
@@ -116,8 +114,7 @@ function initMain() {
         || update.meta && store.canRenderScripts && {}; // a new script was just saved or installed
       if (!script) return; // We're in editor that doesn't have data for all scripts
       const removed = update.config?.removed;
-      const editingTags = store.id && store.tags;
-      const tagsChanged = editingTags && (script.custom.tags || '') !== (update.custom?.tags || '');
+      const oldTags = script.custom.tags;
       const [sizes] = await sendCmdDirectly('GetSizes', [where.id]);
       const { search } = store;
       Object.assign(script, update);
@@ -143,9 +140,10 @@ function initMain() {
         const list = script.config.removed ? 'removedScripts' : SCRIPTS;
         store[list] = [...store[list], script];
       }
-      if (editingTags && (tagsChanged || removed != null)) {
-        updateTags();
-      }
+      if (store.tags && (
+        removed != null ||
+        (oldTags || '') !== (script.custom.tags || '')
+      )) updateTags();
     },
     RemoveScripts(ids) {
       store.removedScripts = store.removedScripts.filter(script => !ids.includes(script.props.id));

src/options/utils/index.js

@@ -11,7 +11,8 @@ export const store = reactive({
   canRenderScripts: [SCRIPTS, TAB_RECYCLE, ''].includes(route.hash),
   scripts: [],
   removedScripts: [],
-  loading: false,
+  /** @type {'all' | boolean} */
+  loaded: false,
   /** Whether removed scripts need to be filtered from `store.scripts`. */
   needRefresh: false,
   sync: [],
@@ -80,7 +81,7 @@ export function toggleBoolean(event) {
 }
 
 export async function updateTags() {
-  store.tags = store.id
+  store.tags = store.loaded !== 'all'
     ? await sendCmdDirectly('GetTags')
     : getScriptsTags(store.scripts);
 }

src/options/views/edit/index.vue

@@ -302,6 +302,7 @@ onActivated(() => {
 
 onDeactivated(() => {
   document.body.classList.remove('edit-open');
+  store.tags =
   store.title = null;
   toggleUnloadSentry(false);
   disposeList?.forEach(dispose => dispose());

src/options/views/edit/settings.vue

@@ -11,7 +11,7 @@
     <div class="flex flex-wrap mr-1c tags">
       <span v-text="i18n('labelTags')" />
       <input ref="tagsInput" v-model="custom.tags" :disabled="readOnly" @focus.once="onTagsFocused">
-      <button v-if="!store.tags" @click.once="onTagsFocused" class="sep">...</button>
+      <button v-if="!store.tags" @click.once="onTagsFocused">...</button>
       <span v-else @click="onTagClicked" class="mr-1c">
         <a v-for="tag in store.tags" :key="tag" v-text="tag" tabindex="0" />
       </span>

src/options/views/tab-installed.vue

@@ -305,7 +305,7 @@ const draggable = computed(() => isTouch && draggableRaw.value);
 const currentSortCompare = computed(() => filterOptions.sort[filters.sort]?.compare);
 const selectedScript = computed(() => state.filteredScripts[state.focusedIndex]);
 const message = computed(() => {
-  if (store.loading) {
+  if (!store.loaded) {
     return null;
   }
   if (state.search.rules.length ? !state.sortedScripts.find(s => s.$cache.show !== false) : !state.sortedScripts.length) {
@@ -774,7 +774,7 @@ onMounted(() => {
   // Ensure the correct UI is shown when mounted:
   // * on subsequent navigation via history back/forward;
   // * on first initialization in some weird case the scripts got loaded early.
-  if (!store.loading) refreshUI();
+  if (store.loaded) refreshUI();
   // Extract --columns-cards and --columns-table from `:root` or `html` selector. CustomCSS may override it.
   if (!columnsForCardsMode.length) {
     const style = customCssElem?.textContent.match(/--columns-(cards|table)\b/)