remove props.histories and directly access store instead: hist scro…

…ll list

client/src/components/History/HistoryScrollList.vue

@@ -26,7 +26,6 @@ type PinnedHistory = { id: string };
 
 const props = defineProps({
     multiple: { type: Boolean, default: false },
-    histories: { type: Array as PropType<HistorySummary[]>, default: () => [] },
     selectedHistories: { type: Array as PropType<PinnedHistory[]>, default: () => [] },
     additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
     showModal: { type: Boolean, default: false },
@@ -49,7 +48,7 @@ const showAdvanced = ref(false);
 const scrollableDiv: Ref<HTMLElement | null> = ref(null);
 
 const historyStore = useHistoryStore();
-const { currentHistoryId, totalHistoryCount, pinnedHistories } = storeToRefs(useHistoryStore());
+const { currentHistoryId, histories, totalHistoryCount, pinnedHistories } = storeToRefs(historyStore);
 const { currentUser } = storeToRefs(useUserStore());
 
 const hasNoResults = computed(() => props.filter && filtered.value.length == 0);
@@ -85,13 +84,10 @@ watch(
     }
 );
 
-// reactive proxy for props.histories, as the prop is not
-// always guaranteed to be reactive for some strange reason.
-// TODO: Re investigate when upgrading to vue3
 /** `historyStore` histories for current user */
 const historiesProxy: Ref<HistorySummary[]> = ref([]);
 watch(
-    () => props.histories as HistoryDetailed[],
+    () => histories.value as HistoryDetailed[],
     (h: HistoryDetailed[]) => {
         historiesProxy.value = h.filter(
             (h) => !h.user_id || (!currentUser.value?.isAnonymous && h.user_id === currentUser.value?.id)

client/src/components/History/Modals/SelectorModal.vue

@@ -124,7 +124,6 @@ function setFilterValue(newFilter: string, newValue: string) {
             <HistoryList
                 v-show="!showAdvanced"
                 :multiple="props.multiple"
-                :histories="histories"
                 :selected-histories="selectedHistories"
                 :additional-options="props.additionalOptions"
                 :show-modal.sync="propShowModal"

client/src/components/Panels/MultiviewPanel.vue

@@ -29,7 +29,7 @@ const loading = ref(false);
 
 const isAnonymous = computed(() => useUserStore().isAnonymous);
 const historyStore = useHistoryStore();
-const { histories, historiesLoading, currentHistoryId } = storeToRefs(historyStore);
+const { historiesLoading, currentHistoryId } = storeToRefs(historyStore);
 
 const pinnedHistoryCount = computed(() => {
     return Object.keys(historyStore.pinnedHistories).length;
@@ -155,12 +155,6 @@ function userTitle(title: string) {
                 Please <a :href="withPrefix('/login')">log in or register</a> to create multiple histories.
             </b-badge>
         </div>
-        <HistoryList
-            v-show="!showAdvanced"
-            multiple
-            :filter="filter"
-            :histories="histories"
-            :loading.sync="loading"
-            @setFilter="setFilter" />
+        <HistoryList v-show="!showAdvanced" multiple :filter="filter" :loading.sync="loading" @setFilter="setFilter" />
     </div>
 </template>

client/src/stores/historyStore.ts

@@ -180,6 +180,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
             await createNewHistory();
         }
         Vue.delete(storedHistories.value, deletedHistory.id);
+        unpinHistories([deletedHistory.id]);
         await handleTotalCountChange(1, true);
     }