Pari Plus add max history pages limit

locales/en-US.yml

@@ -1289,8 +1289,9 @@ pariPlusSystemSettings: "Pari Plus! system settings"
 pariPlusNoteSettings: "Pari Plus! note settings"
 pariPlusAppearanceSettings: "Pari Plus! appearance settings"
 pariPlusFontPicker: "Default fonts"
-enableRenderingOptimization: "Enable rendering optimization"
 useHardwareAcceleration: "Enable hardware acceleration"
+enableRenderingOptimization: "Enable rendering optimization"
+maxHistoryPages: "Max history pages"
 autoTranslateButton: "Display translation function on notes in different languages"
 showDetailTimeWhenHover: "Hover the timestamp of the note to expand the detailed time"
 noteClickToOpen: "Click to open note details"

packages/frontend/src/boot/main-boot.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { createApp, defineAsyncComponent, markRaw } from 'vue';
+import { createApp, defineAsyncComponent, markRaw, Router } from 'vue';
 import { ui } from '@@/js/config.js';
 import { common } from './common.js';
 import type * as Misskey from 'misskey-js';
@@ -23,15 +23,38 @@ import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mainRouter } from '@/router/main.js';
 import { type Keymap, makeHotkey } from '@/scripts/hotkey.js';
 import { addCustomEmoji, removeCustomEmojis, updateCustomEmojis } from '@/custom-emojis.js';
+import { HistoryManager } from '@/scripts/history-manager.js';
 
 export async function mainBoot() {
-	const { isClientUpdated } = await common(() => createApp(
-		new URLSearchParams(window.location.search).has('zen') || (ui === 'deck' && deckStore.state.useSimpleUiForNonRootPages && location.pathname !== '/') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
-	));
+    const { isClientUpdated } = await common(() => {
+        const app = createApp(
+            new URLSearchParams(window.location.search).has('zen') || (ui === 'deck' && deckStore.state.useSimpleUiForNonRootPages && location.pathname !== '/') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
+            !$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
+            ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
+            ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+            defineAsyncComponent(() => import('@/ui/universal.vue')),
+        );
+
+        const historyManager = new HistoryManager(mainRouter as Router);
+
+        (mainRouter as Router).beforeEach((to, from, next) => {
+            if (from.name !== null) {
+                const currentHistoryLength = window.history.length;
+                const maxHistory = defaultStore.state.maxHistoryPages ?? 5;
+
+                if (currentHistoryLength > maxHistory) {
+                    next({ 
+                        ...to,
+                        replace: true 
+                    });
+                    return;
+                }
+            }
+            next();
+        });
+
+        return app;
+    });
 
 	reactionPicker.init();
 	emojiPicker.init();

packages/frontend/src/pages/settings/pari.vue

@@ -13,6 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_gaps_s">
 				<MkSwitch v-model="useHardwareAcceleration">{{ i18n.ts.useHardwareAcceleration }}</MkSwitch>
 				<MkSwitch v-model="enableRenderingOptimization">{{ i18n.ts.enableRenderingOptimization }}</MkSwitch>
+				<MkRange v-model="maxHistoryPages" :min="1" :max="10" :step="1" easing>
+				<template #label>{{ i18n.ts.maxHistoryPages }}</template>
+			</MkRange>
 			</div>
 		</div>
 	</FormSection>
@@ -91,6 +94,7 @@ import { getDefaultFontSettings } from '@/scripts/font-settings.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
+import MkRange from '@/components/MkRange.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkRange from '@/components/MkRange.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -113,6 +117,7 @@ function saveFontSize() {
 
 const useHardwareAcceleration = computed(defaultStore.makeGetterSetter('useHardwareAcceleration'));
 const enableRenderingOptimization = computed(defaultStore.makeGetterSetter('enableRenderingOptimization'));
+const maxHistoryPages = computed(defaultStore.makeGetterSetter('maxHistoryPages'));
 
 const autoTranslateButton = computed(defaultStore.makeGetterSetter('autoTranslateButton'));
 const showDetailTimeWhenHover = computed(defaultStore.makeGetterSetter('showDetailTimeWhenHover'));

packages/frontend/src/scripts/autospacing.ts

@@ -135,4 +135,4 @@ export function spacingNote(note: misskey.entities.Note) {
         ? autoSpacing(noteAsRecord.__autospacing_raw_cw)
         : null;
     return note;
-}
+}

packages/frontend/src/scripts/history-manager.ts

@@ -0,0 +1,60 @@
+import type { Router } from 'vue-router';
+import { defaultStore } from '@/store.js';
+import { watch } from 'vue';
+
+export class HistoryManager {
+  private history: string[] = [];
+
+  constructor(private router: Router) {
+    this.setupHistoryManagement();
+  }
+
+  private get maxHistory(): number {
+    return defaultStore.state.maxHistoryPages ?? 5;
+  }
+
+  private setupHistoryManagement() {
+    this.router.beforeEach((to, from, next) => {
+      if (from.path !== to.path) {
+        this.addToHistory(to.path);
+      }
+      next();
+    });
+
+    const originalPushState = history.pushState;
+    history.pushState = (...args) => {
+      if (this.history.length >= this.maxHistory) {
+        this.history.shift();
+      }
+      return originalPushState.apply(history, args);
+    };
+
+    watch(
+      () => defaultStore.state.maxHistoryPages,
+      (newMaxPages) => {
+        if (newMaxPages && this.history.length > newMaxPages) {
+          this.history = this.history.slice(-newMaxPages);
+        }
+      }
+    );
+  }
+
+  private addToHistory(path: string) {
+    if (this.history.length >= this.maxHistory) {
+      this.history.shift();
+    }
+    this.history.push(path);
+  }
+
+  public getHistoryLength(): number {
+    return this.history.length;
+  }
+
+  public clearHistory(): void {
+    this.history = [];
+  }
+
+  public getMaxHistory(): number {
+    return this.maxHistory;
+  }
+}

packages/frontend/src/store.ts

@@ -516,6 +516,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	maxHistoryPages: {
+		where: 'device',
+		default: 5,
+	},
 	autoTranslateButton: {
 		where: 'device',
 		default: false,