Supposedly we're saving which view you prefer per markwhen document. …

…Get rid of global default view setting. Hide the active view business

src/AppSettings/Settings.vue

@@ -13,7 +13,7 @@ const visualizationStore = useVisualizationStore();
 <template>
  <div class="gap-2 flex flex-col overflow-scroll">
  <div class="flex flex-col px-2 gap-2">
- <div class="ml-2 flex">
+ <!-- <div class="ml-2 flex">
  <label for="defaultView" class="mr-auto">Default view</label>
  <select
  v-model="settingsStore.defaultView"
@@ -22,7 +22,7 @@ const visualizationStore = useVisualizationStore();
  >
  <option v-for="view in defaultViewOptions">{{ view }}</option>
  </select>
- </div>
+ </div> -->
  <div class="ml-2 flex">
  <label for="theme" class="mr-auto">Theme</label>
  <select

src/AppSettings/appSettingsStore.ts

@@ -17,22 +17,20 @@ export const useAppSettingsStore = defineStore("appSettings", () => {
  const defaultView = ref<typeof defaultViewOptions[number]>("Timeline");
  const theme = ref<typeof themeOptions[number]>("System");
 
- const visualizationStore = useVisualizationStore();
-
  const savedSettings = getSettings();
  if (savedSettings) {
- if (
- savedSettings.defaultView &&
- defaultViewOptions.includes(savedSettings.defaultView)
- ) {
- defaultView.value = savedSettings.defaultView;
- const foundView = visualizationStore.activeViews.findIndex(
- (v) => v.name === savedSettings.defaultView
- );
- if (foundView >= 0) {
- visualizationStore.selectedViewIndex = foundView;
- }
- }
+ // if (
+ //  savedSettings.defaultView &&
+ //  defaultViewOptions.includes(savedSettings.defaultView)
+ // ) {
+ //  defaultView.value = savedSettings.defaultView;
+ //  const foundView = visualizationStore.activeViews.findIndex(
+ //  (v) => v.name === savedSettings.defaultView
+ //  );
+ //  if (foundView >= 0) {
+ //  visualizationStore.selectedViewIndex = foundView;
+ //  }
+ // }
  if (savedSettings.theme && themeOptions.includes(savedSettings.theme)) {
  theme.value = savedSettings.theme;
  }

src/Drawer/VisualizationSwitcher/VisualizationIndicator.vue

@@ -7,10 +7,18 @@ import { useVisualizationStore } from "@/Views/visualizationStore";
 
 const visualizationStore = useVisualizationStore();
 const view = computed(() => visualizationStore.currentView);
+const click = () => {
+ visualizationStore.showingWelcomeViewPicker =
+ !visualizationStore.showingWelcomeViewPicker;
+};
 </script>
 
 <template>
- <SettingsButton class="p-1 w-full justify-center" :hover-hint-left="-1">
+ <SettingsButton
+ class="p-1 w-full justify-center"
+ :hover-hint-left="-1"
+ @click="click"
+ >
  <div
  class="flex flex-row items-center gap-1"
  v-if="!visualizationStore.showingWelcomeViewPicker"
@@ -42,8 +50,8 @@ const view = computed(() => visualizationStore.currentView);
  d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
  ></path>
  <path d="M14 7l6 0"></path>
- <path d="M17 4l0 6"></path>
- </svg><span class="text-sm">Views</span>
+ <path d="M17 4l0 6"></path></svg
+ ><span class="text-sm">Views</span>
  </div>
  <template #hover="slotProps">
  <HoverMenu :hovering="slotProps.hovering">

src/Drawer/VisualizationSwitcher/VisualizationSwitcherMenu.vue

@@ -17,7 +17,7 @@ const selectView = (i: number) => {
 <template>
  <div class="flex flex-col">
  <button
- @click="visualizationStore.showWelcomeViewPicker"
+ @click.stop="visualizationStore.showWelcomeViewPicker"
  class="flex flex-row px-3 py-1 items-center gap-2 hover:bg-indigo-600"
  :class="{
  'bg-indigo-600': visualizationStore.showingWelcomeViewPicker,
@@ -47,7 +47,7 @@ const selectView = (i: number) => {
  ></path>
  <path d="M14 7l6 0"></path>
  <path d="M17 4l0 6"></path></svg
- ><span class="text-sm">All views...</span>
+ ><span class="text-sm">Views...</span>
  </button>
  <hr class="border-slate-700 my-[2px]" />
  <button
@@ -58,7 +58,7 @@ const selectView = (i: number) => {
  visualizationStore.currentView.name === view.name,
  }"
  class="flex flex-row px-3 py-1 items-center gap-2 hover:bg-indigo-600"
- @click="selectView(i)"
+ @click.stop="selectView(i)"
  >
  <div class="w-4 h-4" v-html="view.iconSvg"></div>
  <span class="text-sm">{{ view.name }}</span>

src/Markwhen/composables/useParserWorker.ts

@@ -24,7 +24,7 @@ export const useParserWorker = (rawTimelineString: Ref<string>) => {
 
  worker.addEventListener("message", (message) => {
  const { timelines: fromWorker, cache: c } = message.data;
- console.log("parse time", performance.now() - timeStart);
+ // console.log("parse time", performance.now() - timeStart);
  timelines.value = fromWorker;
  if (queuedString.value !== rawTimelineString.value) {
  worker.postMessage({ rawTimelineString: queuedString.value });

src/Views/visualizationStore.ts

@@ -1,29 +1,20 @@
+import { useStorageStore } from "@/Storage/storageStore";
 import type { ViewProvider } from "@/viewProvider";
 import { defineStore } from "pinia";
 import { computed, ref, watch, watchEffect } from "vue";
 import { useViewProviders } from "./useViewProviders";
 import { useViewOrchestrator } from "./ViewOrchestrator/useViewOrchestrator";
 
+const viewAssociationsKey = "viewAssociations";
+
 export const useVisualizationStore = defineStore("visualization", () => {
- const activeFrame = ref<HTMLIFrameElement>();
+ const storageStore = useStorageStore();
  const showingWelcomeViewPicker = ref(true);
+ const activeFrame = ref<HTMLIFrameElement>();
  const selectedViewIndex = ref(-1);
 
  const getViewOptions = () => {
  const defaultOptions = useViewProviders();
- if (typeof localStorage !== "undefined") {
- const saved = localStorage.getItem("viewOptions");
- if (saved) {
- try {
- const parsed = JSON.parse(saved);
- return parsed as ViewProvider[];
- } catch {
- return defaultOptions;
- }
- } else {
- return defaultOptions;
- }
- }
  return defaultOptions;
  };
 
@@ -39,28 +30,113 @@ export const useVisualizationStore = defineStore("visualization", () => {
  activeFrame.value = frame;
  };
 
- watch(
- viewOptions,
- (vo) => {
- if (typeof localStorage !== "undefined") {
- localStorage.setItem(
- "viewOptions",
- JSON.stringify(vo.filter((v) => typeof v.url === "string"))
- );
+ // watch(
+ // viewOptions,
+ // (vo) => {
+ // if (typeof localStorage !== "undefined") {
+ // for (const vp of useViewProviders()) {
+
+ // }
+ // localStorage.setItem(
+ // "viewOptions",
+ // JSON.stringify(vo.filter((v) => typeof v.url === "string"))
+ // );
+ // }
+ // },
+ // { deep: true }
+ // );
+
+ const getExistingViewAssociations = () => {
+ if (!localStorage || typeof localStorage === "undefined") {
+ return;
+ }
+ return JSON.parse(
+ localStorage.getItem(viewAssociationsKey) || "{}"
+ ) as Record<string, string>;
+ };
+
+ const viewAssociationKeyForStorageType = computed(() => {
+ switch (storageStore.storageType) {
+ case "cloud":
+ return storageStore.cloudPath;
+ case "draft":
+ return storageStore.draftName || "draft";
+ }
+ });
+
+ const setViewAssociation = () => {
+ const existingViewAssociations = getExistingViewAssociations();
+ if (!existingViewAssociations) {
+ return;
+ }
+
+ if (viewAssociationKeyForStorageType.value && currentView.value) {
+ const updatedAssociations = {
+ ...existingViewAssociations,
+ [viewAssociationKeyForStorageType.value]: currentView.value.id,
+ };
+ localStorage.setItem(
+ viewAssociationsKey,
+ JSON.stringify(updatedAssociations)
+ );
+ }
+ };
+
+ const getAndApplyViewAssociation = () => {
+ const existingViewAssociations = getExistingViewAssociations();
+ if (!existingViewAssociations) {
+ return;
+ }
+ if (existingViewAssociations && viewAssociationKeyForStorageType.value) {
+ const viewId =
+ existingViewAssociations[viewAssociationKeyForStorageType.value];
+ if (viewId) {
+ const index = viewOptions.value.findIndex((vp) => vp.id === viewId);
+ if (index !== -1) {
+ selectedViewIndex.value = index;
+ showingWelcomeViewPicker.value = false;
+ return true;
+ }
  }
+ }
+ return false;
+ };
+
+ watch(
+ [
+ () => storageStore.storageType,
+ () => storageStore.draftName,
+ () => storageStore.cloudPath,
+ ],
+ () => {
+ getAndApplyViewAssociation();
+ setViewAssociation();
  },
- { deep: true }
+ { immediate: true }
  );
 
+ watch(selectedViewIndex, (val, oldVal) => {
+ if (val !== oldVal) {
+ setViewAssociation();
+ }
+ });
+
  watchEffect(() => {
  if (selectedViewIndex.value >= activeViews.value.length) {
  selectedViewIndex.value = 0;
  } else if (selectedViewIndex.value < 0) {
  // Set default view
+ // Don't set view association here because we're just setting the default
  selectedViewIndex.value = 2;
  }
  });
 
+ watch(showingWelcomeViewPicker, (showing) => {
+ if (!showing) {
+ setViewAssociation();
+ }
+ });
+
  const showWelcomeViewPicker = () => {
  showingWelcomeViewPicker.value = true;
  };
@@ -76,6 +152,8 @@ export const useVisualizationStore = defineStore("visualization", () => {
  currentView,
  showingWelcomeViewPicker,
 
+ getAndApplyViewAssociation,
+ setViewAssociation,
  showWelcomeViewPicker,
  setActiveFrame,
  jumpToRange,

src/WelcomeViewPicker/CustomViewOption.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+ <div
+ class="flex flex-col gap-2 p-2 group dark:hover:bg-slate-600 hover:bg-slate-200 rounded transition cursor-pointer outline outline-2 outline-slate-200 dark:outline-slate-600"
+ ></div>
+</template>
+
+<style scoped></style>

src/WelcomeViewPicker/ViewPicker.vue

@@ -3,6 +3,7 @@ import VisualizationOption from "./VisualizationOption.vue";
 import { useVisualizationStore } from "@/Views/visualizationStore";
 import type { ViewProvider } from "@/viewProvider";
 import { onMounted } from "vue";
+import CustomViewOption from "./CustomViewOption.vue";
 
 const visualizationStore = useVisualizationStore();
 
@@ -24,6 +25,15 @@ const removeView = (v: ViewProvider) => {
  visualizationStore.viewOptions.splice(index, 1);
  }
 };
+
+const select = (v: ViewProvider) => {
+ v.active = true;
+ const index = visualizationStore.activeViews.findIndex(
+ (vo) => v.name === vo.name && v.url === vo.url
+ );
+ visualizationStore.selectedViewIndex = index;
+ visualizationStore.showingWelcomeViewPicker = false
+};
 </script>
 
 <template>
@@ -36,7 +46,9 @@ const removeView = (v: ViewProvider) => {
  :is-active="!!view.active"
  @toggle="toggleView(view)"
  @remove="removeView(view)"
+ @click="select(view)"
  ></VisualizationOption>
+ <!-- <CustomViewOption></CustomViewOption> -->
  </div>
  </section>
 </template>

src/WelcomeViewPicker/VisualizationOption.vue

@@ -33,7 +33,7 @@ const events = canHover.value
  <h1 class="text-xl font-bold flex flex-row items-center gap-2">
  <div class="h-5 w-5" v-html="vp.iconSvg"></div>
  {{ vp.name }}
- <div class="ml-auto px-1 relative" v-on="events">
+ <!-- <div class="ml-auto px-1 relative" v-on="events">
  <transition>
  <input
  class="transition"
@@ -44,13 +44,14 @@ const events = canHover.value
  type="checkbox"
  :checked="isActive"
  :disabled="isActive && !canChange"
- @change="emit('toggle')"
+ @click.stop=""
+ @change.prevent.stop="emit('toggle')"
  />
  </transition>
  <HoverHint :hovering="hovering" hover-position="top" :left="-3"
  ><span class="text-sm">Quick access</span></HoverHint
  >
- </div>
+ </div> -->
  </h1>
  <div class="py-1" v-if="vp.screenshots && vp.screenshots.length">
  <img :src="vp.screenshots[0]" class="rounded" />

src/WelcomeViewPicker/WelcomeViewPicker.vue

@@ -21,7 +21,7 @@ const close = () => {
 
 <template>
  <div class="w-full h-full flex justify-center @container">
- <main class="p-6 flex flex-col gap-4 overflow-auto">
+ <main class="py-6 px-6 @lg:px-24 flex flex-col gap-4 overflow-auto">
  <WelcomeBanner v-if="showingBanner" @close="close"></WelcomeBanner>
  <ViewPicker></ViewPicker>
  </main>
@@ -30,6 +30,6 @@ const close = () => {
 
 <style scoped>
 main {
- width: min(96ch, 100%);
+ width: min(104ch, 100%);
 }
 </style>

src/viewProvider.ts

@@ -19,7 +19,8 @@ export interface ViewSetting {
 }
 
 export interface ViewProvider {
- url: string,
+ id: string,
+ url: string | any,
  name: string,
  iconSvg?: string,
  settings?: (() => ViewSetting | any)[]