refactor: use query.id in favor of route hash

TODOs.md

@@ -22,6 +22,8 @@
   - [ ] web push
 - [x] load setting: if specified a json path, priority to load localstorage history
   - [x] remind user if to history mode
+- [ ] comments(giscus)
+  - [ ] splitted story comments and translation comments
 
 ### Improvements
 

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "start": "vite",
+    "start": "make prebuild && vite",
     "serve:doc": "honkit serve --reload",
     "build:doc": "honkit build",
     "build": "make prebuild && vue-tsc && vite build && honkit build",

src/components/bgm/BgmPanel.vue

@@ -196,8 +196,9 @@ const createColumns = (): any => {
             query: {
               forceReload: '1',
               source: DataSource.Remote,
+              id: row.jsonPath,
             },
-            hash: `#${row.jsonPath}`,
+            // hash: `#${row.jsonPath}`,
           })
         }
         const style = {

src/components/home/HistorySaves.vue

@@ -98,9 +98,10 @@ const columns = ref(
         query: {
           forceReload: '1',
           source: DataSource.Browser,
+          id: row.id,
         },
         // do not use encodeURIComponent
-        hash: `#${row.id}`,
+        // hash: `#${row.id}`,
       })
     },
   })

src/components/list/ListPanel.vue

@@ -269,9 +269,10 @@ const createColumns = (): any => {
               query: {
                 forceReload: '1',
                 source: DataSource.Remote,
+                id: row.communications[0].jsonPath,
               },
               // do not use encodeURIComponent
-              hash: `#${row.communications[0].jsonPath}`,
+              // hash: `#${row.communications[0].jsonPath}`,
             })
           }
           style = {

src/components/search/VoiceSearchPanel.vue

@@ -198,9 +198,10 @@ const createColumns = (): any => {
             query: {
               forceReload: '1',
               source: DataSource.Remote,
+              id: getEventIdFromVoiceId(row._id),
             },
             // do not use encodeURIComponent
-            hash: `#${getEventIdFromVoiceId(row._id)}`,
+            // hash: `#${getEventIdFromVoiceId(row._id)}`,
           })
         }
         const style = {

src/components/translate/CommunicationLogs.vue

@@ -247,8 +247,9 @@ export default defineComponent({
                   query: {
                     forceReload: '1',
                     source: DataSource.Remote,
+                    id: url,
                   },
-                  hash: `#${url}`,
+                  // hash: `#${url}`,
                 })
               },
               style: {

src/components/translate/DialogueLine.vue

@@ -241,9 +241,10 @@ export default defineComponent({
       store.currentMode = DataMode.History
       this.$router.replace({
         path: this.$route.path,
-        hash: `#${this.base}.json`, // for file mode
+        // hash: `#${this.base}.json`, // for file mode
         query: {
           source: DataSource.Browser,
+          id: `${this.base}.json`,
         },
       })
     },

src/components/translate/TranslationPanel.vue

@@ -140,10 +140,10 @@ watch(routeQuery, async (newQuery) => {
 })
 
 async function loadDataFromLocation() {
-  if (!route.hash) return
   const source = route.query?.source as DataSource | undefined
   // storage id, should be jsonUrl
-  const id = route.hash.substring(1)
+  const id = (route.query?.id || route.hash.substring(1)) as string
+  if (!id) return
   if (source === DataSource.Browser) {
     // store.currentMode = DataMode.History
     // why push, use replace is also ok
@@ -173,6 +173,7 @@ async function loadDataFromLocalStorage(id: string) {
     path: route.path,
     query: {
       source: DataSource.Browser,
+      id: route.query.id,
     },
     hash: route.hash,
   })
@@ -190,9 +191,10 @@ async function loadDataFromEncodedUrl(encodedSrcUrl: string) {
   )
   router.replace({
     path: route.path,
-    hash: `#${encodedSrcUrl}`,
+    // hash: `#${encodedSrcUrl}`,
     query: {
       source: DataSource.Remote,
+      id: encodedSrcUrl,
     },
   })
   nextTick(() =>
@@ -232,8 +234,9 @@ async function to(source: DataSource | undefined, id: string) {
     query: {
       source,
       forceReload: '1',
+      id,
     },
-    hash: `#${id}`,
+    // hash: `#${id}`,
   })
 }