From 50de72f207a4774c981ef075c8b4353ef652fcb7 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Sat, 7 Feb 2026 22:20:02 +0100
Subject: [PATCH 01/14] feature: add read check

---
 .../page-read-check/PageReadCheck/index.tsx   | 51 +++++++++++
 .../PageReadCheck/styles.module.scss          |  0
 packages/tdev/page-read-check/README.mdx      |  9 ++
 packages/tdev/page-read-check/index.ts        | 14 +++
 .../tdev/page-read-check/model/ModelMeta.ts   | 24 ++++++
 packages/tdev/page-read-check/model/index.ts  | 86 +++++++++++++++++++
 packages/tdev/page-read-check/package.json    | 17 ++++
 packages/tdev/page-read-check/register.ts     |  8 ++
 packages/tdev/page-read-check/tsconfig.json   |  3 +
 src/models/iDocument.ts                       |  2 +-
 src/stores/ViewStores/index.ts                |  6 ++
 src/theme/Root.tsx                            | 18 +++-
 tdev-website/siteConfig.ts                    |  3 +-
 13 files changed, 238 insertions(+), 3 deletions(-)
 create mode 100644 packages/tdev/page-read-check/PageReadCheck/index.tsx
 create mode 100644 packages/tdev/page-read-check/PageReadCheck/styles.module.scss
 create mode 100644 packages/tdev/page-read-check/README.mdx
 create mode 100644 packages/tdev/page-read-check/index.ts
 create mode 100644 packages/tdev/page-read-check/model/ModelMeta.ts
 create mode 100644 packages/tdev/page-read-check/model/index.ts
 create mode 100644 packages/tdev/page-read-check/package.json
 create mode 100644 packages/tdev/page-read-check/register.ts
 create mode 100644 packages/tdev/page-read-check/tsconfig.json

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
new file mode 100644
index 000000000..b847b9d34
--- /dev/null
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import { MetaInit, ModelMeta } from '../model/ModelMeta';
+import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
+import Button from '@tdev-components/shared/Button';
+import { mdiClock, mdiClockDigital } from '@mdi/js';
+import { SIZE_S } from '@tdev-components/shared/iconSizes';
+
+interface Props extends MetaInit {
+    id: string;
+    hideTime?: boolean;
+}
+
+const PageReadCheck = observer((props: Props) => {
+    const [meta] = React.useState(new ModelMeta(props));
+    const viewStore = useStore('viewStore');
+    const doc = useFirstMainDocument(props.id, meta);
+    React.useEffect(() => {
+        if (!viewStore.isPageVisible) {
+            return;
+        }
+        const id = setInterval(() => {
+            doc?.incrementReadTime(1);
+        }, 1000);
+        return () => {
+            clearInterval(id);
+        };
+    }, [doc, viewStore.isPageVisible]);
+    if (!doc) {
+        return null;
+    }
+
+    return (
+        <Button
+            text={doc.fReadTime}
+            icon={mdiClock}
+            color={doc.read ? 'green' : 'gray'}
+            iconSide="left"
+            title={`Lesezeit: ${doc.fReadTimeLong}`}
+            size={SIZE_S}
+            onClick={() => {
+                doc.setReadState(!doc.read);
+            }}
+        />
+    );
+});
+
+export default PageReadCheck;
diff --git a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
new file mode 100644
index 000000000..25d20e616
--- /dev/null
+++ b/packages/tdev/page-read-check/README.mdx
@@ -0,0 +1,9 @@
+---
+page_id: 34714568-d5e3-4965-8947-fdcf46da810a
+---
+
+import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
+
+# Page Read Checks
+
+<PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
\ No newline at end of file
diff --git a/packages/tdev/page-read-check/index.ts b/packages/tdev/page-read-check/index.ts
new file mode 100644
index 000000000..0c51491ad
--- /dev/null
+++ b/packages/tdev/page-read-check/index.ts
@@ -0,0 +1,14 @@
+import PageReadCheck from './model';
+export interface PageReadCheckData {
+    readTime: number;
+    read: boolean;
+}
+
+declare module '@tdev-api/document' {
+    export interface TypeDataMapping {
+        ['page_read_check']: PageReadCheckData;
+    }
+    export interface TypeModelMapping {
+        ['page_read_check']: PageReadCheck;
+    }
+}
diff --git a/packages/tdev/page-read-check/model/ModelMeta.ts b/packages/tdev/page-read-check/model/ModelMeta.ts
new file mode 100644
index 000000000..0513f015f
--- /dev/null
+++ b/packages/tdev/page-read-check/model/ModelMeta.ts
@@ -0,0 +1,24 @@
+import { TypeDataMapping, Access } from '@tdev-api/document';
+import { TypeMeta } from '@tdev-models/DocumentRoot';
+
+export interface MetaInit {
+    readonly?: boolean;
+    minReadTime?: number;
+}
+
+export class ModelMeta extends TypeMeta<'page_read_check'> {
+    readonly type = 'page_read_check';
+    readonly minReadTime: number;
+
+    constructor(props: Partial<MetaInit>) {
+        super('page_read_check', props.readonly ? Access.RO_User : undefined);
+        this.minReadTime = props.minReadTime || -1;
+    }
+
+    get defaultData(): TypeDataMapping['page_read_check'] {
+        return {
+            readTime: 0,
+            read: false
+        };
+    }
+}
diff --git a/packages/tdev/page-read-check/model/index.ts b/packages/tdev/page-read-check/model/index.ts
new file mode 100644
index 000000000..659cdbae6
--- /dev/null
+++ b/packages/tdev/page-read-check/model/index.ts
@@ -0,0 +1,86 @@
+import { action, computed, observable } from 'mobx';
+import iDocument, { Source } from '@tdev-models/iDocument';
+import { Document as DocumentProps, TypeDataMapping, Factory } from '@tdev-api/document';
+import DocumentStore from '@tdev-stores/DocumentStore';
+import { ModelMeta } from './ModelMeta';
+
+export const createModel: Factory = (data, store) => {
+    return new PageReadChecker(data as DocumentProps<'page_read_check'>, store);
+};
+
+class PageReadChecker extends iDocument<'page_read_check'> {
+    @observable accessor readTime: number = 0;
+    @observable accessor read: boolean = false;
+    constructor(props: DocumentProps<'page_read_check'>, store: DocumentStore) {
+        super(props, store);
+        this.readTime = props.data.readTime || 0;
+        this.read = props.data.read || false;
+    }
+
+    @action
+    setData(data: Partial<TypeDataMapping['page_read_check']>, from: Source, updatedAt?: Date): void {
+        if (data.readTime !== undefined) {
+            this.readTime = data.readTime;
+        }
+        if (data.read !== undefined) {
+            this.read = data.read;
+        }
+        if (from === Source.LOCAL) {
+            this.save();
+        }
+        if (updatedAt) {
+            this.updatedAt = new Date(updatedAt);
+        }
+    }
+
+    @computed
+    get fReadTime(): string {
+        const hours = Math.floor(this.readTime / 3600);
+        const minutes = Math.floor((this.readTime % 3600) / 60);
+        const seconds = this.readTime % 60;
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        }
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+
+    @computed
+    get fReadTimeLong(): string {
+        const hours = Math.floor(this.readTime / 3600);
+        const minutes = Math.floor((this.readTime % 3600) / 60);
+        const seconds = this.readTime % 60;
+        if (hours > 0) {
+            return `${hours} Stunden ${minutes.toString().padStart(2, '0')} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
+        }
+        return `${minutes} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
+    }
+
+    @action
+    setReadState(read: boolean) {
+        this.read = read;
+        this.save();
+    }
+
+    @action
+    incrementReadTime(by: number = 1) {
+        this.readTime += by;
+        this.save();
+    }
+
+    get data(): TypeDataMapping['page_read_check'] {
+        return {
+            readTime: this.readTime,
+            read: this.read
+        };
+    }
+
+    @computed
+    get meta(): ModelMeta {
+        if (this.root?.type === 'page_read_check') {
+            return this.root.meta as ModelMeta;
+        }
+        return new ModelMeta({});
+    }
+}
+
+export default PageReadChecker;
diff --git a/packages/tdev/page-read-check/package.json b/packages/tdev/page-read-check/package.json
new file mode 100644
index 000000000..19a6f8e58
--- /dev/null
+++ b/packages/tdev/page-read-check/package.json
@@ -0,0 +1,17 @@
+{
+    "name": "@tdev/page-read-check",
+    "version": "1.0.0",
+    "main": "index.ts",
+    "types": "index.ts",
+    "dependencies": {
+    },
+    "devDependencies": {
+        "vitest": "*",
+        "@docusaurus/module-type-aliases": "*",
+        "@docusaurus/core": "*",
+        "@types/node": "*"
+    },
+    "peerDependencies": {
+        "@tdev/core": "1.0.0"
+    }
+}
diff --git a/packages/tdev/page-read-check/register.ts b/packages/tdev/page-read-check/register.ts
new file mode 100644
index 000000000..98f105b14
--- /dev/null
+++ b/packages/tdev/page-read-check/register.ts
@@ -0,0 +1,8 @@
+import { rootStore } from '@tdev-stores/rootStore';
+import { createModel } from './model';
+
+const register = () => {
+    rootStore.documentStore.registerFactory('page_read_check', createModel);
+};
+
+register();
diff --git a/packages/tdev/page-read-check/tsconfig.json b/packages/tdev/page-read-check/tsconfig.json
new file mode 100644
index 000000000..ab1408716
--- /dev/null
+++ b/packages/tdev/page-read-check/tsconfig.json
@@ -0,0 +1,3 @@
+{
+    "extends": "../../../tsconfig.package.json"
+}
diff --git a/src/models/iDocument.ts b/src/models/iDocument.ts
index 90e1441e2..39f8f89bc 100644
--- a/src/models/iDocument.ts
+++ b/src/models/iDocument.ts
@@ -35,7 +35,7 @@ abstract class iDocument<Type extends DocumentType> {
      * Time [s] :    0        1        2        3        4        5        6        7
      * Edits    :    |||  |            |||   ||  |  |     ||  ||||  |||    ||  ||| |||||
      */
-    save: DebouncedFunc<() => Promise<boolean>>;
+    save: DebouncedFunc<typeof iDocument.prototype._save>;
 
     @observable accessor state: ApiState = ApiState.IDLE;
 
diff --git a/src/stores/ViewStores/index.ts b/src/stores/ViewStores/index.ts
index 124d94221..14abae9eb 100644
--- a/src/stores/ViewStores/index.ts
+++ b/src/stores/ViewStores/index.ts
@@ -10,6 +10,7 @@ export default class ViewStore {
     readonly root: RootStore;
     stores = new Map<ViewStoreType, ViewStores>();
     @observable accessor fullscreenTargetId: string | null = null;
+    @observable accessor isPageVisible: boolean = true;
     constructor(store: RootStore) {
         this.root = store;
     }
@@ -25,6 +26,11 @@ export default class ViewStore {
         this.stores.set(type, store(this));
     }
 
+    @action
+    setPageVisibility(visible: boolean) {
+        this.isPageVisible = visible;
+    }
+
     @action
     requestFullscreen(targetId: string) {
         if (this.fullscreenTargetId === targetId) {
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index dd1b10f47..0ff583458 100644
--- a/src/theme/Root.tsx
+++ b/src/theme/Root.tsx
@@ -4,7 +4,7 @@ import { enableStaticRendering, observer } from 'mobx-react-lite';
 import Head from '@docusaurus/Head';
 import siteConfig from '@generated/docusaurus.config';
 import { useStore } from '@tdev-hooks/useStore';
-import { reaction } from 'mobx';
+import { action, reaction } from 'mobx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useHistory, useLocation } from '@docusaurus/router';
 import LoggedOutOverlay from '@tdev-components/LoggedOutOverlay';
@@ -111,6 +111,21 @@ const Sentry = observer(() => {
     return null;
 });
 
+const TrackPageVisibility = observer(() => {
+    const viewStore = useStore('viewStore');
+    const onVisibilityChange = React.useEffectEvent(() => {
+        viewStore.setPageVisibility(!document.hidden);
+    });
+    React.useEffect(() => {
+        document.addEventListener('visibilitychange', onVisibilityChange);
+
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, [viewStore]);
+    return null;
+});
+
 const LivenessChecker = observer(() => {
     const lastHiddenTimeRef = React.useRef<number | null>(null);
     React.useEffect(() => {
@@ -252,6 +267,7 @@ function Root({ children }: { children: React.ReactNode }) {
                         <LivenessChecker />
                     </>
                 )}
+                <TrackPageVisibility />
                 <FullscreenHandler />
                 {SENTRY_DSN && <Sentry />}
                 <DevGlobalDataTracker />
diff --git a/tdev-website/siteConfig.ts b/tdev-website/siteConfig.ts
index e83c4f787..634f28ac1 100644
--- a/tdev-website/siteConfig.ts
+++ b/tdev-website/siteConfig.ts
@@ -78,7 +78,8 @@ const getSiteConfig: SiteConfigProvider = () => {
             require.resolve('@tdev/netpbm-graphic/register'),
             require.resolve('@tdev/text-message/register'),
             require.resolve('@tdev/pyodide-code/register'),
-            require.resolve('@tdev/brython-code/register')
+            require.resolve('@tdev/brython-code/register'),
+            require.resolve('@tdev/page-read-check/register')
         ]
     };
 };

From 803dda926682a7d467df8f6493a1b194a229afbc Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Sun, 8 Feb 2026 22:18:12 +0100
Subject: [PATCH 02/14] add slide button

---
 .../page-read-check/PageReadCheck/index.tsx   |  18 +--
 packages/tdev/page-read-check/README.mdx      |   4 +-
 src/components/shared/SlideButton/index.tsx   | 136 ++++++++++++++++++
 .../shared/SlideButton/styles.module.scss     | 114 +++++++++++++++
 4 files changed, 258 insertions(+), 14 deletions(-)
 create mode 100644 src/components/shared/SlideButton/index.tsx
 create mode 100644 src/components/shared/SlideButton/styles.module.scss

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index b847b9d34..3a97aaf24 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -5,9 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from '@tdev-hooks/useStore';
 import { MetaInit, ModelMeta } from '../model/ModelMeta';
 import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
-import Button from '@tdev-components/shared/Button';
-import { mdiClock, mdiClockDigital } from '@mdi/js';
-import { SIZE_S } from '@tdev-components/shared/iconSizes';
+import SlideButton from '@tdev-components/shared/SlideButton';
 
 interface Props extends MetaInit {
     id: string;
@@ -34,16 +32,12 @@ const PageReadCheck = observer((props: Props) => {
     }
 
     return (
-        <Button
+        <SlideButton
             text={doc.fReadTime}
-            icon={mdiClock}
-            color={doc.read ? 'green' : 'gray'}
-            iconSide="left"
-            title={`Lesezeit: ${doc.fReadTimeLong}`}
-            size={SIZE_S}
-            onClick={() => {
-                doc.setReadState(!doc.read);
-            }}
+            unlockedText={`Gelesen ${doc.fReadTime}`}
+            onUnlock={() => doc.setReadState(true)}
+            onReset={() => doc.setReadState(false)}
+            isUnlocked={doc.read}
         />
     );
 });
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
index 25d20e616..b4a8e104e 100644
--- a/packages/tdev/page-read-check/README.mdx
+++ b/packages/tdev/page-read-check/README.mdx
@@ -4,6 +4,6 @@ page_id: 34714568-d5e3-4965-8947-fdcf46da810a
 
 import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
 
-# Page Read Checks
+# page-read-check
 
-<PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
\ No newline at end of file
+<PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
diff --git a/src/components/shared/SlideButton/index.tsx b/src/components/shared/SlideButton/index.tsx
new file mode 100644
index 000000000..91be55559
--- /dev/null
+++ b/src/components/shared/SlideButton/index.tsx
@@ -0,0 +1,136 @@
+import React, { useRef, useState } from 'react';
+import styles from './styles.module.scss';
+import Icon from '@mdi/react';
+import { mdiArrowRightBoldBox, mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
+import Button from '@tdev-components/shared/Button';
+import { SIZE_S } from '@tdev-components/shared/iconSizes';
+import { observer } from 'mobx-react-lite';
+import clsx from 'clsx';
+
+const SLIDER_WIDTH = 320; // px
+const HANDLE_SIZE = 32; // px
+const THRESHOLD = 0.85; // %
+
+interface Props {
+    onUnlock: () => void;
+    onReset?: () => void;
+    isUnlocked?: boolean;
+    text?: string;
+    unlockedText?: string;
+    sliderWidth?: number;
+    title?: string;
+}
+
+const SlideButton = observer((props: Props) => {
+    const { onUnlock, text = 'Ziehen', sliderWidth = SLIDER_WIDTH } = props;
+    const trackRef = useRef<HTMLDivElement | null>(null);
+    const [dragging, setDragging] = useState(false);
+    const [offset, setOffset] = useState(props.isUnlocked ? sliderWidth - HANDLE_SIZE : 0);
+    const [unlocked, setUnlocked] = useState(props.isUnlocked ?? false);
+
+    const getRelativeX = (clientX: number) => {
+        const rect = trackRef.current!.getBoundingClientRect();
+        const x = Math.max(0, Math.min(clientX - rect.left, sliderWidth - HANDLE_SIZE));
+        return x;
+    };
+
+    React.useEffect(() => {
+        if (props.isUnlocked === undefined) {
+            return;
+        }
+        setUnlocked(props.isUnlocked);
+        if (!props.isUnlocked) {
+            setOffset(0);
+        } else {
+            setOffset(sliderWidth - HANDLE_SIZE);
+        }
+    }, [props.isUnlocked]);
+
+    const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
+        if (unlocked) return;
+        setDragging(true);
+        e.preventDefault();
+    };
+
+    const handleDragMove = (e: MouseEvent | TouchEvent) => {
+        if (!dragging || unlocked) return;
+        let clientX = 'touches' in e ? e.touches[0].clientX : (e as MouseEvent).clientX;
+        setOffset(getRelativeX(clientX));
+    };
+
+    const handleDragEnd = () => {
+        if (!dragging || unlocked) return;
+        const progress = offset / (sliderWidth - HANDLE_SIZE);
+        if (progress >= THRESHOLD) {
+            setOffset(sliderWidth - HANDLE_SIZE);
+            setUnlocked(true);
+            onUnlock();
+        } else {
+            setOffset(0);
+        }
+        setDragging(false);
+    };
+
+    React.useEffect(() => {
+        const moveListener = (e: MouseEvent | TouchEvent) => handleDragMove(e);
+        const upListener = () => handleDragEnd();
+        if (dragging) {
+            window.addEventListener('mousemove', moveListener);
+            window.addEventListener('touchmove', moveListener, { passive: false });
+            window.addEventListener('mouseup', upListener);
+            window.addEventListener('touchend', upListener);
+        }
+        return () => {
+            window.removeEventListener('mousemove', moveListener);
+            window.removeEventListener('touchmove', moveListener);
+            window.removeEventListener('mouseup', upListener);
+            window.removeEventListener('touchend', upListener);
+        };
+    }, [dragging, offset, unlocked]);
+
+    return (
+        <div className={styles.container} title={props.title}>
+            <div
+                className={clsx(styles.track, unlocked && styles.unlocked)}
+                ref={trackRef}
+                style={{ width: sliderWidth }}
+            >
+                {props.onReset && unlocked && (
+                    <div className={styles.resetButton}>
+                        <Button
+                            icon={mdiCloseCircle}
+                            color="red"
+                            size={SIZE_S}
+                            noBorder
+                            title="Zurücksetzen"
+                            onClick={() => {
+                                setUnlocked(false);
+                                setOffset(0);
+                                props.onReset?.();
+                            }}
+                        />
+                    </div>
+                )}
+                <span className={styles.text}>{unlocked ? props.unlockedText : text}</span>
+                <div
+                    className={clsx(
+                        styles.handle,
+                        dragging && styles.dragging,
+                        unlocked && styles.handleUnlocked
+                    )}
+                    style={{ left: unlocked ? undefined : offset }}
+                    onMouseDown={handleDragStart}
+                    onTouchStart={handleDragStart}
+                    tabIndex={0}
+                >
+                    <span className={clsx(styles.arrow)}>
+                        <Icon path={unlocked ? mdiCheckCircle : mdiArrowRightBoldBox} size={1} />
+                    </span>
+                </div>
+                <div className={clsx(styles.progress)} style={{ width: offset + HANDLE_SIZE / 2 }} />
+            </div>
+        </div>
+    );
+});
+
+export default SlideButton;
diff --git a/src/components/shared/SlideButton/styles.module.scss b/src/components/shared/SlideButton/styles.module.scss
new file mode 100644
index 000000000..62bd8fffb
--- /dev/null
+++ b/src/components/shared/SlideButton/styles.module.scss
@@ -0,0 +1,114 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    --tdev-slide-button-size: 2em;
+    .track {
+        position: relative;
+        height: var(--tdev-slide-button-size);
+        background: linear-gradient(90deg, var(--ifm-color-gray-400) 0%, var(--ifm-color-gray-100) 100%);
+        border-radius: var(--ifm-global-radius);
+        overflow: hidden;
+        box-shadow: var(--ifm-global-shadow-tl);
+        transition: background 0.2s;
+        .text {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.1rem;
+            color: var(--ifm-color-secondary-darkest);
+            font-weight: var(--ifm-font-weight-base);
+            z-index: 2;
+            pointer-events: none;
+            letter-spacing: 0.04em;
+            transition: opacity 0.3s;
+        }
+        .handle {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: var(--tdev-slide-button-size);
+            height: var(--tdev-slide-button-size);
+            border-radius: var(--ifm-global-radius);
+
+            background: var(--ifm-background-surface-color);
+            box-shadow: var(--ifm-global-shadow-md);
+            z-index: 3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: grab;
+            transition:
+                box-shadow 0.15s,
+                background 0.15s;
+            user-select: none;
+            &:active,
+            &.dragging {
+                background: var(--ifm-color-gray-100);
+                box-shadow: 0 3px 28px 0 var(--ifm-color-success-lightest);
+                cursor: grabbing;
+            }
+            &.handleUnlocked {
+                background: var(--ifm-color-success);
+                color: var(--ifm-color-white);
+                pointer-events: none;
+            }
+
+            .arrow {
+                font-size: 1.7rem;
+                user-select: none;
+                pointer-events: none;
+            }
+        }
+        .progress {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            background: linear-gradient(
+                90deg,
+                var(--ifm-color-gray-100) 0%,
+                var(--ifm-color-success-lightest) 100%
+            );
+            border-radius: var(--ifm-global-radius);
+            z-index: 1;
+            pointer-events: none;
+            transition: width 0.15s;
+        }
+        .resetButton {
+            display: none;
+            align-items: center;
+            height: 100%;
+        }
+        &.unlocked {
+            background: linear-gradient(
+                90deg,
+                var(--ifm-color-gray-100) 0%,
+                var(--ifm-color-success-lightest) 100%
+            );
+            .progress {
+                display: none;
+            }
+            .text {
+                color: var(--ifm-color-gray-700);
+            }
+            .handle {
+                right: 0;
+                left: auto;
+            }
+        }
+    }
+    &:hover {
+        .track {
+            .resetButton {
+                display: flex;
+            }
+        }
+    }
+}

From b9179c9cabe5a9e48a06a694feeab80ebc8158bf Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Sun, 8 Feb 2026 22:33:05 +0100
Subject: [PATCH 03/14] fix docs for implementing plugin

---
 packages/tdev/page-index/README.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/tdev/page-index/README.mdx b/packages/tdev/page-index/README.mdx
index 7f6c93007..5a6a8bd70 100644
--- a/packages/tdev/page-index/README.mdx
+++ b/packages/tdev/page-index/README.mdx
@@ -84,7 +84,7 @@ Wenn ein Plugin ein weiteres *Statusdokument* implementiert, das im Seitenindex
         export interface TaskableDocumentMapping {
             ['my_new_taskable_document']: MyNewTaskableData;
         }
-        export interface TypeModelMapping {
+        export interface TaskableTypeModelMapping {
             ['my_new_taskable_document']: MyNewTaskableDocument;
         }
     }
@@ -104,6 +104,7 @@ Wenn ein Plugin ein weiteres *Statusdokument* implementiert, das im Seitenindex
     und den neuen Dokumenttyp im `ComponentStore` registrieren:
     ```ts title="packages/<scope>/<new-plugin>/register.ts"
     const register = () => {
+        rootStore.documentStore.registerFactory('my_new_taskable_document', createModel);
         rootStore.componentStore.registerTaskableDocumentType('my_new_taskable_document');
     };
     ```

From cbf05415d330e7197d9713a4f1e3cb6d366ee23c Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Sun, 8 Feb 2026 22:33:16 +0100
Subject: [PATCH 04/14] register as taskable document

---
 packages/tdev/page-read-check/index.ts        |  4 +-
 .../tdev/page-read-check/model/ModelMeta.ts   |  2 +-
 packages/tdev/page-read-check/model/index.ts  | 42 ++++++++++++++++++-
 packages/tdev/page-read-check/register.ts     |  1 +
 src/siteConfig/markdownPluginConfigs.ts       |  4 ++
 5 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/packages/tdev/page-read-check/index.ts b/packages/tdev/page-read-check/index.ts
index 0c51491ad..49cebf435 100644
--- a/packages/tdev/page-read-check/index.ts
+++ b/packages/tdev/page-read-check/index.ts
@@ -5,10 +5,10 @@ export interface PageReadCheckData {
 }
 
 declare module '@tdev-api/document' {
-    export interface TypeDataMapping {
+    export interface TaskableDocumentMapping {
         ['page_read_check']: PageReadCheckData;
     }
-    export interface TypeModelMapping {
+    export interface TaskableTypeModelMapping {
         ['page_read_check']: PageReadCheck;
     }
 }
diff --git a/packages/tdev/page-read-check/model/ModelMeta.ts b/packages/tdev/page-read-check/model/ModelMeta.ts
index 0513f015f..250cf9e69 100644
--- a/packages/tdev/page-read-check/model/ModelMeta.ts
+++ b/packages/tdev/page-read-check/model/ModelMeta.ts
@@ -12,7 +12,7 @@ export class ModelMeta extends TypeMeta<'page_read_check'> {
 
     constructor(props: Partial<MetaInit>) {
         super('page_read_check', props.readonly ? Access.RO_User : undefined);
-        this.minReadTime = props.minReadTime || -1;
+        this.minReadTime = props.minReadTime || 10;
     }
 
     get defaultData(): TypeDataMapping['page_read_check'] {
diff --git a/packages/tdev/page-read-check/model/index.ts b/packages/tdev/page-read-check/model/index.ts
index 659cdbae6..a774e7641 100644
--- a/packages/tdev/page-read-check/model/index.ts
+++ b/packages/tdev/page-read-check/model/index.ts
@@ -1,16 +1,19 @@
 import { action, computed, observable } from 'mobx';
 import iDocument, { Source } from '@tdev-models/iDocument';
+import { iTaskableDocument } from '@tdev-models/iTaskableDocument';
 import { Document as DocumentProps, TypeDataMapping, Factory } from '@tdev-api/document';
 import DocumentStore from '@tdev-stores/DocumentStore';
 import { ModelMeta } from './ModelMeta';
+import { mdiBookCheck, mdiBookCheckOutline, mdiBookEducation, mdiBookOpenVariantOutline } from '@mdi/js';
 
 export const createModel: Factory = (data, store) => {
     return new PageReadChecker(data as DocumentProps<'page_read_check'>, store);
 };
 
-class PageReadChecker extends iDocument<'page_read_check'> {
+class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableDocument<'page_read_check'> {
     @observable accessor readTime: number = 0;
     @observable accessor read: boolean = false;
+    @observable accessor scrollTo: boolean = false;
     constructor(props: DocumentProps<'page_read_check'>, store: DocumentStore) {
         super(props, store);
         this.readTime = props.data.readTime || 0;
@@ -33,6 +36,43 @@ class PageReadChecker extends iDocument<'page_read_check'> {
         }
     }
 
+    get isDone() {
+        return this.read;
+    }
+
+    get progress() {
+        return this.read ? 1 : 0;
+    }
+
+    get totalSteps() {
+        return 1;
+    }
+
+    @computed
+    get editingIconState() {
+        if (this.read) {
+            return {
+                path: mdiBookCheck,
+                color: 'var(--ifm-color-success)'
+            };
+        }
+        if (this.readTime < this.meta.minReadTime) {
+            return {
+                path: mdiBookOpenVariantOutline,
+                color: 'var(--ifm-color-grey-500)'
+            };
+        }
+        return {
+            path: mdiBookEducation,
+            color: 'var(--ifm-color-warning)'
+        };
+    }
+
+    @action
+    setScrollTo(scrollTo: boolean) {
+        this.scrollTo = scrollTo;
+    }
+
     @computed
     get fReadTime(): string {
         const hours = Math.floor(this.readTime / 3600);
diff --git a/packages/tdev/page-read-check/register.ts b/packages/tdev/page-read-check/register.ts
index 98f105b14..2c88385f9 100644
--- a/packages/tdev/page-read-check/register.ts
+++ b/packages/tdev/page-read-check/register.ts
@@ -3,6 +3,7 @@ import { createModel } from './model';
 
 const register = () => {
     rootStore.documentStore.registerFactory('page_read_check', createModel);
+    rootStore.componentStore.registerTaskableDocumentType('page_read_check');
 };
 
 register();
diff --git a/src/siteConfig/markdownPluginConfigs.ts b/src/siteConfig/markdownPluginConfigs.ts
index f219e8a39..0699e1f5a 100644
--- a/src/siteConfig/markdownPluginConfigs.ts
+++ b/src/siteConfig/markdownPluginConfigs.ts
@@ -157,6 +157,10 @@ export const PageIndexPluginDefaultOptions: PageIndexPluginOptions = {
             name: 'ProgressState',
             docTypeExtractor: () => 'progress_state'
         },
+        {
+            name: 'PageReadCheck',
+            docTypeExtractor: () => 'page_read_check'
+        },
         {
             name: 'TaskState',
             docTypeExtractor: () => 'task_state'

From 1ffc09b90e16210207ec70527e7337bdfb1c28b9 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Sun, 8 Feb 2026 22:45:30 +0100
Subject: [PATCH 05/14] add min time example

---
 .../page-read-check/PageReadCheck/index.tsx   |  4 ++--
 .../PageReadCheck/styles.module.scss          |  0
 packages/tdev/page-read-check/README.mdx      |  3 +++
 packages/tdev/page-read-check/model/index.ts  |  4 ++--
 src/components/shared/SlideButton/index.tsx   | 13 +++++++-----
 .../shared/SlideButton/styles.module.scss     | 21 +++++++++++++++++++
 6 files changed, 36 insertions(+), 9 deletions(-)
 delete mode 100644 packages/tdev/page-read-check/PageReadCheck/styles.module.scss

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index 3a97aaf24..fe491acde 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.scss';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@tdev-hooks/useStore';
 import { MetaInit, ModelMeta } from '../model/ModelMeta';
@@ -24,6 +22,7 @@ const PageReadCheck = observer((props: Props) => {
             doc?.incrementReadTime(1);
         }, 1000);
         return () => {
+            doc?.saveNow();
             clearInterval(id);
         };
     }, [doc, viewStore.isPageVisible]);
@@ -38,6 +37,7 @@ const PageReadCheck = observer((props: Props) => {
             onUnlock={() => doc.setReadState(true)}
             onReset={() => doc.setReadState(false)}
             isUnlocked={doc.read}
+            disabled={doc.readTime < meta.minReadTime}
         />
     );
 });
diff --git a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
index b4a8e104e..1ab3f2ee8 100644
--- a/packages/tdev/page-read-check/README.mdx
+++ b/packages/tdev/page-read-check/README.mdx
@@ -7,3 +7,6 @@ import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
 # page-read-check
 
 <PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
+
+
+<PageReadCheck id="2c48f62d-0123-49c1-8296-c8cae7b54832" minReadTime={120} />
diff --git a/packages/tdev/page-read-check/model/index.ts b/packages/tdev/page-read-check/model/index.ts
index a774e7641..3f73e0d8d 100644
--- a/packages/tdev/page-read-check/model/index.ts
+++ b/packages/tdev/page-read-check/model/index.ts
@@ -41,11 +41,11 @@ class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableD
     }
 
     get progress() {
-        return this.read ? 1 : 0;
+        return this.read ? 2 : this.readTime > this.meta.minReadTime ? 1 : 0;
     }
 
     get totalSteps() {
-        return 1;
+        return 2;
     }
 
     @computed
diff --git a/src/components/shared/SlideButton/index.tsx b/src/components/shared/SlideButton/index.tsx
index 91be55559..abe6b5eef 100644
--- a/src/components/shared/SlideButton/index.tsx
+++ b/src/components/shared/SlideButton/index.tsx
@@ -19,10 +19,11 @@ interface Props {
     unlockedText?: string;
     sliderWidth?: number;
     title?: string;
+    disabled?: boolean;
 }
 
 const SlideButton = observer((props: Props) => {
-    const { onUnlock, text = 'Ziehen', sliderWidth = SLIDER_WIDTH } = props;
+    const { onUnlock, text, sliderWidth = SLIDER_WIDTH } = props;
     const trackRef = useRef<HTMLDivElement | null>(null);
     const [dragging, setDragging] = useState(false);
     const [offset, setOffset] = useState(props.isUnlocked ? sliderWidth - HANDLE_SIZE : 0);
@@ -89,7 +90,7 @@ const SlideButton = observer((props: Props) => {
     }, [dragging, offset, unlocked]);
 
     return (
-        <div className={styles.container} title={props.title}>
+        <div className={clsx(styles.container, props.disabled && styles.disabled)} title={props.title}>
             <div
                 className={clsx(styles.track, unlocked && styles.unlocked)}
                 ref={trackRef}
@@ -98,6 +99,7 @@ const SlideButton = observer((props: Props) => {
                 {props.onReset && unlocked && (
                     <div className={styles.resetButton}>
                         <Button
+                            disabled={props.disabled}
                             icon={mdiCloseCircle}
                             color="red"
                             size={SIZE_S}
@@ -111,16 +113,17 @@ const SlideButton = observer((props: Props) => {
                         />
                     </div>
                 )}
-                <span className={styles.text}>{unlocked ? props.unlockedText : text}</span>
+                <span className={styles.text}>{unlocked ? props.unlockedText : (text ?? 'Ziehen')}</span>
                 <div
                     className={clsx(
                         styles.handle,
                         dragging && styles.dragging,
                         unlocked && styles.handleUnlocked
                     )}
+                    title={props.disabled ? 'Deakitiviert' : unlocked ? undefined : 'Ziehen zum Entsperren'}
                     style={{ left: unlocked ? undefined : offset }}
-                    onMouseDown={handleDragStart}
-                    onTouchStart={handleDragStart}
+                    onMouseDown={props.disabled ? undefined : handleDragStart}
+                    onTouchStart={props.disabled ? undefined : handleDragStart}
                     tabIndex={0}
                 >
                     <span className={clsx(styles.arrow)}>
diff --git a/src/components/shared/SlideButton/styles.module.scss b/src/components/shared/SlideButton/styles.module.scss
index 62bd8fffb..864a9b44b 100644
--- a/src/components/shared/SlideButton/styles.module.scss
+++ b/src/components/shared/SlideButton/styles.module.scss
@@ -111,4 +111,25 @@
             }
         }
     }
+    &.disabled {
+        .track {
+            &.unlocked {
+                background: linear-gradient(
+                    90deg,
+                    var(--ifm-color-gray-400) 0%,
+                    var(--ifm-color-gray-100) 100%
+                );
+            }
+            .handle {
+                &.handleUnlocked {
+                    background: var(--ifm-color-secondary-darkest);
+                }
+
+                &:active,
+                &:hover {
+                    cursor: not-allowed;
+                }
+            }
+        }
+    }
 }

From 0e9d18f4e973460e37438e922c7fe26ad8b01d06 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Mon, 9 Feb 2026 19:34:14 +0100
Subject: [PATCH 06/14] style: enhance SlideButton appearance and update color
 variables

---
 src/components/shared/SlideButton/index.tsx   |  7 ++++-
 .../shared/SlideButton/styles.module.scss     | 26 +++++++++----------
 src/css/custom.scss                           |  1 +
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/shared/SlideButton/index.tsx b/src/components/shared/SlideButton/index.tsx
index abe6b5eef..a85ff87c2 100644
--- a/src/components/shared/SlideButton/index.tsx
+++ b/src/components/shared/SlideButton/index.tsx
@@ -127,7 +127,12 @@ const SlideButton = observer((props: Props) => {
                     tabIndex={0}
                 >
                     <span className={clsx(styles.arrow)}>
-                        <Icon path={unlocked ? mdiCheckCircle : mdiArrowRightBoldBox} size={1} />
+                        <Icon
+                            path={unlocked ? mdiCheckCircle : mdiArrowRightBoldBox}
+                            size={1}
+                            color={unlocked ? 'white' : 'var(--ifm-color-blue-darkest)'}
+                            className={clsx(styles.arrowIcon)}
+                        />
                     </span>
                 </div>
                 <div className={clsx(styles.progress)} style={{ width: offset + HANDLE_SIZE / 2 }} />
diff --git a/src/components/shared/SlideButton/styles.module.scss b/src/components/shared/SlideButton/styles.module.scss
index 864a9b44b..c172bd7f5 100644
--- a/src/components/shared/SlideButton/styles.module.scss
+++ b/src/components/shared/SlideButton/styles.module.scss
@@ -11,7 +11,6 @@
         border-radius: var(--ifm-global-radius);
         overflow: hidden;
         box-shadow: var(--ifm-global-shadow-tl);
-        transition: background 0.2s;
         .text {
             position: absolute;
             left: 0;
@@ -27,7 +26,6 @@
             z-index: 2;
             pointer-events: none;
             letter-spacing: 0.04em;
-            transition: opacity 0.3s;
         }
         .handle {
             position: absolute;
@@ -37,25 +35,23 @@
             height: var(--tdev-slide-button-size);
             border-radius: var(--ifm-global-radius);
 
-            background: var(--ifm-background-surface-color);
+            background-color: var(--ifm-background-surface-color);
             box-shadow: var(--ifm-global-shadow-md);
             z-index: 3;
             display: flex;
             justify-content: center;
             align-items: center;
             cursor: grab;
-            transition:
-                box-shadow 0.15s,
-                background 0.15s;
             user-select: none;
+            background-color: var(--ifm-color-white);
             &:active,
             &.dragging {
-                background: var(--ifm-color-gray-100);
+                background-color: var(--ifm-color-gray-300);
                 box-shadow: 0 3px 28px 0 var(--ifm-color-success-lightest);
                 cursor: grabbing;
             }
             &.handleUnlocked {
-                background: var(--ifm-color-success);
+                background-color: var(--ifm-color-success);
                 color: var(--ifm-color-white);
                 pointer-events: none;
             }
@@ -64,6 +60,9 @@
                 font-size: 1.7rem;
                 user-select: none;
                 pointer-events: none;
+                .arrowIcon {
+                    line-height: 0;
+                }
             }
         }
         .progress {
@@ -79,7 +78,6 @@
             border-radius: var(--ifm-global-radius);
             z-index: 1;
             pointer-events: none;
-            transition: width 0.15s;
         }
         .resetButton {
             display: none;
@@ -101,6 +99,12 @@
             .handle {
                 right: 0;
                 left: auto;
+                .arrow {
+                    background-color: unset;
+                    .arrowIcon {
+                        line-height: 0;
+                    }
+                }
             }
         }
     }
@@ -121,10 +125,6 @@
                 );
             }
             .handle {
-                &.handleUnlocked {
-                    background: var(--ifm-color-secondary-darkest);
-                }
-
                 &:active,
                 &:hover {
                     cursor: not-allowed;
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 62c0c4840..559af70d1 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -19,6 +19,7 @@
     --ifm-color-blue: #3578e5;
     --ifm-color-blue-dark: #306cce;
     --ifm-color-blue-darker: #2d66c3;
+    --ifm-color-blue-darkest: #2554a0;
     --ifm-color-disabled: #6e6e6e;
     --ifm-color-violet: #8957e5;
     --ifm-color-boxed: #3348b5;

From 25fc4cc00f895bf77a1b8f77905d836d8af3ab3d Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Mon, 9 Feb 2026 20:59:02 +0100
Subject: [PATCH 07/14] style: simplify arrow styling by removing unnecessary
 nested class

---
 src/components/shared/SlideButton/styles.module.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/shared/SlideButton/styles.module.scss b/src/components/shared/SlideButton/styles.module.scss
index c172bd7f5..8a1e0cbd4 100644
--- a/src/components/shared/SlideButton/styles.module.scss
+++ b/src/components/shared/SlideButton/styles.module.scss
@@ -101,9 +101,7 @@
                 left: auto;
                 .arrow {
                     background-color: unset;
-                    .arrowIcon {
-                        line-height: 0;
-                    }
+                    line-height: 0;
                 }
             }
         }

From ef788bdbfbc9b9b1e443a2a9fefbb4b9025d87b3 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 00:28:31 +0100
Subject: [PATCH 08/14] feat: enhance PageReadCheck component with minimum read
 time and warning features

---
 .../page-read-check/PageReadCheck/index.tsx   | 44 +++++++++++++++----
 .../PageReadCheck/styles.module.scss          | 15 +++++++
 packages/tdev/page-read-check/README.mdx      | 21 ++++++++-
 packages/tdev/page-read-check/helpers/time.ts | 19 ++++++++
 .../tdev/page-read-check/model/ModelMeta.ts   |  5 +++
 packages/tdev/page-read-check/model/index.ts  | 35 +++++++--------
 src/components/shared/SlideButton/index.tsx   | 36 +++++++++++----
 .../shared/SlideButton/styles.module.scss     |  5 +--
 src/theme/Root.tsx                            |  1 +
 9 files changed, 139 insertions(+), 42 deletions(-)
 create mode 100644 packages/tdev/page-read-check/PageReadCheck/styles.module.scss
 create mode 100644 packages/tdev/page-read-check/helpers/time.ts

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index fe491acde..352941ee7 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -4,10 +4,17 @@ import { useStore } from '@tdev-hooks/useStore';
 import { MetaInit, ModelMeta } from '../model/ModelMeta';
 import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
 import SlideButton from '@tdev-components/shared/SlideButton';
+import Badge from '@tdev-components/shared/Badge';
+import styles from './styles.module.scss';
+import clsx from 'clsx';
+import SyncStatus from '@tdev-components/SyncStatus';
+import { mdiFlashTriangle } from '@mdi/js';
+import Icon from '@mdi/react';
 
 interface Props extends MetaInit {
     id: string;
     hideTime?: boolean;
+    hideWarning?: boolean;
 }
 
 const PageReadCheck = observer((props: Props) => {
@@ -31,14 +38,35 @@ const PageReadCheck = observer((props: Props) => {
     }
 
     return (
-        <SlideButton
-            text={doc.fReadTime}
-            unlockedText={`Gelesen ${doc.fReadTime}`}
-            onUnlock={() => doc.setReadState(true)}
-            onReset={() => doc.setReadState(false)}
-            isUnlocked={doc.read}
-            disabled={doc.readTime < meta.minReadTime}
-        />
+        <div className={clsx(styles.pageReadCheck)}>
+            <SlideButton
+                text={(unlocked) => (unlocked ? `Gelesen ${doc.fReadTime}` : doc.fReadTime)}
+                onUnlock={() => doc.setReadState(true)}
+                onReset={() => doc.setReadState(false)}
+                isUnlocked={doc.read}
+                disabled={!doc.canUnlock}
+                sliderWidth={320}
+                disabledReason={`Mindestens ${doc.meta.fMinReadTime} lesen, um zu entsperren`}
+            />
+            <div className={clsx(styles.status)}>
+                {!doc.canUnlock && (
+                    <Badge
+                        title={`Mindestens ${doc.meta.fMinReadTime} lesen, um zu entsperren`}
+                        className={clsx(styles.minReadTime)}
+                    >
+                        {doc.meta.fMinReadTime}
+                    </Badge>
+                )}
+                {doc.isDummy && !props.hideWarning && (
+                    <Icon
+                        path={mdiFlashTriangle}
+                        size={0.7}
+                        color="var(--ifm-color-warning)"
+                        title="Wird nicht gespeichert."
+                    />
+                )}
+            </div>
+        </div>
     );
 });
 
diff --git a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
new file mode 100644
index 000000000..4192e51cf
--- /dev/null
+++ b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
@@ -0,0 +1,15 @@
+.pageReadCheck {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .status {
+        margin-left: 240px;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        .minReadTime {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+}
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
index 1ab3f2ee8..68e861b50 100644
--- a/packages/tdev/page-read-check/README.mdx
+++ b/packages/tdev/page-read-check/README.mdx
@@ -3,10 +3,29 @@ page_id: 34714568-d5e3-4965-8947-fdcf46da810a
 ---
 
 import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
+import BrowserWindow from '@tdev-components/BrowserWindow';
 
 # page-read-check
 
+```tsx
 <PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
+```
+
+
+<BrowserWindow>
+    <PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
+</BrowserWindow>
+
+## Mit Mindestlesezeit
+
+Über die `minReadTime` kann eine Mindestlesezeit vorgegeben werden, bevor die Seite als "gelesen" markiert werden kann. Der Timer startet und stoppt automatisch, wenn die Seite sichtbar bzw. unsichtbar wird. Der Standardwert beträgt 10 Sekunden.
+
+```tsx
+<PageReadCheck minReadTime={15} hideWarning />
+```
+
+<BrowserWindow>
+    <PageReadCheck minReadTime={15} hideWarning/>
+</BrowserWindow>
 
 
-<PageReadCheck id="2c48f62d-0123-49c1-8296-c8cae7b54832" minReadTime={120} />
diff --git a/packages/tdev/page-read-check/helpers/time.ts b/packages/tdev/page-read-check/helpers/time.ts
new file mode 100644
index 000000000..bc708930f
--- /dev/null
+++ b/packages/tdev/page-read-check/helpers/time.ts
@@ -0,0 +1,19 @@
+export const fSeconds = (time: number) => {
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = time % 60;
+    if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+export const fSecondsLong = (time: number) => {
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = time % 60;
+    if (hours > 0) {
+        return `${hours} Stunden ${minutes.toString().padStart(2, '0')} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
+    }
+    return `${minutes} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
+};
diff --git a/packages/tdev/page-read-check/model/ModelMeta.ts b/packages/tdev/page-read-check/model/ModelMeta.ts
index 250cf9e69..27421bbef 100644
--- a/packages/tdev/page-read-check/model/ModelMeta.ts
+++ b/packages/tdev/page-read-check/model/ModelMeta.ts
@@ -1,5 +1,6 @@
 import { TypeDataMapping, Access } from '@tdev-api/document';
 import { TypeMeta } from '@tdev-models/DocumentRoot';
+import { fSeconds } from '../helpers/time';
 
 export interface MetaInit {
     readonly?: boolean;
@@ -21,4 +22,8 @@ export class ModelMeta extends TypeMeta<'page_read_check'> {
             read: false
         };
     }
+
+    get fMinReadTime() {
+        return fSeconds(this.minReadTime);
+    }
 }
diff --git a/packages/tdev/page-read-check/model/index.ts b/packages/tdev/page-read-check/model/index.ts
index 3f73e0d8d..eca7f517b 100644
--- a/packages/tdev/page-read-check/model/index.ts
+++ b/packages/tdev/page-read-check/model/index.ts
@@ -5,6 +5,7 @@ import { Document as DocumentProps, TypeDataMapping, Factory } from '@tdev-api/d
 import DocumentStore from '@tdev-stores/DocumentStore';
 import { ModelMeta } from './ModelMeta';
 import { mdiBookCheck, mdiBookCheckOutline, mdiBookEducation, mdiBookOpenVariantOutline } from '@mdi/js';
+import { fSeconds, fSecondsLong } from '../helpers/time';
 
 export const createModel: Factory = (data, store) => {
     return new PageReadChecker(data as DocumentProps<'page_read_check'>, store);
@@ -40,8 +41,14 @@ class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableD
         return this.read;
     }
 
+    @computed
+    get canUnlock() {
+        return this.readTime >= this.meta.minReadTime;
+    }
+
+    @computed
     get progress() {
-        return this.read ? 2 : this.readTime > this.meta.minReadTime ? 1 : 0;
+        return this.read ? 2 : this.canUnlock ? 1 : 0;
     }
 
     get totalSteps() {
@@ -56,15 +63,15 @@ class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableD
                 color: 'var(--ifm-color-success)'
             };
         }
-        if (this.readTime < this.meta.minReadTime) {
+        if (this.canUnlock) {
             return {
-                path: mdiBookOpenVariantOutline,
-                color: 'var(--ifm-color-grey-500)'
+                path: mdiBookEducation,
+                color: 'var(--ifm-color-warning)'
             };
         }
         return {
-            path: mdiBookEducation,
-            color: 'var(--ifm-color-warning)'
+            path: mdiBookOpenVariantOutline,
+            color: 'var(--ifm-color-grey-500)'
         };
     }
 
@@ -75,24 +82,12 @@ class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableD
 
     @computed
     get fReadTime(): string {
-        const hours = Math.floor(this.readTime / 3600);
-        const minutes = Math.floor((this.readTime % 3600) / 60);
-        const seconds = this.readTime % 60;
-        if (hours > 0) {
-            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-        }
-        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        return fSeconds(this.readTime);
     }
 
     @computed
     get fReadTimeLong(): string {
-        const hours = Math.floor(this.readTime / 3600);
-        const minutes = Math.floor((this.readTime % 3600) / 60);
-        const seconds = this.readTime % 60;
-        if (hours > 0) {
-            return `${hours} Stunden ${minutes.toString().padStart(2, '0')} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
-        }
-        return `${minutes} Minuten ${seconds.toString().padStart(2, '0')} Sekunden`;
+        return fSecondsLong(this.readTime);
     }
 
     @action
diff --git a/src/components/shared/SlideButton/index.tsx b/src/components/shared/SlideButton/index.tsx
index a85ff87c2..2ccaf7e4b 100644
--- a/src/components/shared/SlideButton/index.tsx
+++ b/src/components/shared/SlideButton/index.tsx
@@ -15,11 +15,11 @@ interface Props {
     onUnlock: () => void;
     onReset?: () => void;
     isUnlocked?: boolean;
-    text?: string;
-    unlockedText?: string;
+    text?: (unlocked: boolean) => string;
     sliderWidth?: number;
     title?: string;
     disabled?: boolean;
+    disabledReason?: string;
 }
 
 const SlideButton = observer((props: Props) => {
@@ -48,19 +48,25 @@ const SlideButton = observer((props: Props) => {
     }, [props.isUnlocked]);
 
     const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
-        if (unlocked) return;
+        if (unlocked) {
+            return;
+        }
         setDragging(true);
         e.preventDefault();
     };
 
     const handleDragMove = (e: MouseEvent | TouchEvent) => {
-        if (!dragging || unlocked) return;
+        if (!dragging || unlocked) {
+            return;
+        }
         let clientX = 'touches' in e ? e.touches[0].clientX : (e as MouseEvent).clientX;
         setOffset(getRelativeX(clientX));
     };
 
     const handleDragEnd = () => {
-        if (!dragging || unlocked) return;
+        if (!dragging || unlocked) {
+            return;
+        }
         const progress = offset / (sliderWidth - HANDLE_SIZE);
         if (progress >= THRESHOLD) {
             setOffset(sliderWidth - HANDLE_SIZE);
@@ -113,27 +119,33 @@ const SlideButton = observer((props: Props) => {
                         />
                     </div>
                 )}
-                <span className={styles.text}>{unlocked ? props.unlockedText : (text ?? 'Ziehen')}</span>
+                <Label text={text} isUnlocked={unlocked} />
                 <div
                     className={clsx(
                         styles.handle,
                         dragging && styles.dragging,
                         unlocked && styles.handleUnlocked
                     )}
-                    title={props.disabled ? 'Deakitiviert' : unlocked ? undefined : 'Ziehen zum Entsperren'}
+                    title={
+                        props.disabled
+                            ? (props.disabledReason ?? 'Deakitiviert')
+                            : unlocked
+                              ? undefined
+                              : 'Ziehen zum Entsperren'
+                    }
                     style={{ left: unlocked ? undefined : offset }}
                     onMouseDown={props.disabled ? undefined : handleDragStart}
                     onTouchStart={props.disabled ? undefined : handleDragStart}
                     tabIndex={0}
                 >
-                    <span className={clsx(styles.arrow)}>
+                    <div className={clsx(styles.arrow)}>
                         <Icon
                             path={unlocked ? mdiCheckCircle : mdiArrowRightBoldBox}
                             size={1}
                             color={unlocked ? 'white' : 'var(--ifm-color-blue-darkest)'}
                             className={clsx(styles.arrowIcon)}
                         />
-                    </span>
+                    </div>
                 </div>
                 <div className={clsx(styles.progress)} style={{ width: offset + HANDLE_SIZE / 2 }} />
             </div>
@@ -141,4 +153,10 @@ const SlideButton = observer((props: Props) => {
     );
 });
 
+const Label = observer((props: Pick<Props, 'text' | 'isUnlocked'>) => {
+    return (
+        <span className={styles.text}>{props.text ? props.text(props.isUnlocked ?? false) : 'Ziehen'}</span>
+    );
+});
+
 export default SlideButton;
diff --git a/src/components/shared/SlideButton/styles.module.scss b/src/components/shared/SlideButton/styles.module.scss
index 8a1e0cbd4..490b5c3e4 100644
--- a/src/components/shared/SlideButton/styles.module.scss
+++ b/src/components/shared/SlideButton/styles.module.scss
@@ -57,12 +57,9 @@
             }
 
             .arrow {
-                font-size: 1.7rem;
                 user-select: none;
                 pointer-events: none;
-                .arrowIcon {
-                    line-height: 0;
-                }
+                line-height: 0;
             }
         }
         .progress {
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index 0ff583458..ab1df0fd5 100644
--- a/src/theme/Root.tsx
+++ b/src/theme/Root.tsx
@@ -194,6 +194,7 @@ const FullscreenHandler = observer(() => {
     }, []);
     return null;
 });
+
 let devHash: string | null = null;
 const DevGlobalDataTracker = observer(() => {
     if (process.env.NODE_ENV === 'production') {

From aca552cfb9fa6f185a220bcbdfa09a67204a3da0 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 00:47:14 +0100
Subject: [PATCH 09/14] feat: add continueAfterUnlock option to PageReadCheck
 and update README

---
 .../page-read-check/PageReadCheck/index.tsx   |  9 +++++----
 .../PageReadCheck/styles.module.scss          |  2 ++
 packages/tdev/page-read-check/README.mdx      | 20 +++++++++++++++++--
 packages/tdev/page-read-check/model/index.ts  |  4 ++--
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index 352941ee7..ba3192979 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -7,7 +7,6 @@ import SlideButton from '@tdev-components/shared/SlideButton';
 import Badge from '@tdev-components/shared/Badge';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
-import SyncStatus from '@tdev-components/SyncStatus';
 import { mdiFlashTriangle } from '@mdi/js';
 import Icon from '@mdi/react';
 
@@ -15,6 +14,7 @@ interface Props extends MetaInit {
     id: string;
     hideTime?: boolean;
     hideWarning?: boolean;
+    continueAfterUnlock?: boolean;
 }
 
 const PageReadCheck = observer((props: Props) => {
@@ -26,13 +26,14 @@ const PageReadCheck = observer((props: Props) => {
             return;
         }
         const id = setInterval(() => {
-            doc?.incrementReadTime(1);
+            if (!doc?.read || props.continueAfterUnlock) {
+                doc?.incrementReadTime(1);
+            }
         }, 1000);
         return () => {
-            doc?.saveNow();
             clearInterval(id);
         };
-    }, [doc, viewStore.isPageVisible]);
+    }, [doc, viewStore.isPageVisible, props.continueAfterUnlock]);
     if (!doc) {
         return null;
     }
diff --git a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
index 4192e51cf..56d5868aa 100644
--- a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
+++ b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
@@ -4,9 +4,11 @@
     align-items: center;
     .status {
         margin-left: 240px;
+        min-width: 4em;
         display: flex;
         gap: 8px;
         align-items: center;
+        justify-content: flex-end;
         .minReadTime {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
index 68e861b50..c5d8ea2aa 100644
--- a/packages/tdev/page-read-check/README.mdx
+++ b/packages/tdev/page-read-check/README.mdx
@@ -1,5 +1,7 @@
 ---
 page_id: 34714568-d5e3-4965-8947-fdcf46da810a
+sidebar_custom_props:
+    taskable_state: 'show'
 ---
 
 import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
@@ -7,7 +9,11 @@ import BrowserWindow from '@tdev-components/BrowserWindow';
 
 # page-read-check
 
+Mit der Komponente `PageReadCheck` kann die Bearbeitung einer Seite gekennzeichnet werden.
+
 ```tsx
+import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
+
 <PageReadCheck id="2cf38080-4b13-4b0f-a589-94e78cce585c" />
 ```
 
@@ -21,11 +27,21 @@ import BrowserWindow from '@tdev-components/BrowserWindow';
 Über die `minReadTime` kann eine Mindestlesezeit vorgegeben werden, bevor die Seite als "gelesen" markiert werden kann. Der Timer startet und stoppt automatisch, wenn die Seite sichtbar bzw. unsichtbar wird. Der Standardwert beträgt 10 Sekunden.
 
 ```tsx
-<PageReadCheck minReadTime={15} hideWarning />
+<PageReadCheck minReadTime={15} />
 ```
 
 <BrowserWindow>
-    <PageReadCheck minReadTime={15} hideWarning/>
+    <PageReadCheck minReadTime={15}/>
 </BrowserWindow>
 
+## Lesezeit nach Freischaltung fortsetzen
+
+Standardmässig wird die Lesezeit nicht weiter gezählt, wenn die Seite freigeschaltet wurde. Mit der Option `continueAfterUnlock` kann dieses Verhalten geändert werden, sodass die Lesezeit auch nach Freischaltung weiter gezählt wird.
 
+```tsx
+<PageReadCheck continueAfterUnlock id="4a84e4a2-dee6-4575-bcd3-9682af03a17d" />
+```
+
+<BrowserWindow>
+    <PageReadCheck continueAfterUnlock id="4a84e4a2-dee6-4575-bcd3-9682af03a17d" />
+</BrowserWindow>
\ No newline at end of file
diff --git a/packages/tdev/page-read-check/model/index.ts b/packages/tdev/page-read-check/model/index.ts
index eca7f517b..a3cb156c6 100644
--- a/packages/tdev/page-read-check/model/index.ts
+++ b/packages/tdev/page-read-check/model/index.ts
@@ -93,13 +93,13 @@ class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableD
     @action
     setReadState(read: boolean) {
         this.read = read;
-        this.save();
+        this.saveNow();
     }
 
     @action
     incrementReadTime(by: number = 1) {
         this.readTime += by;
-        this.save();
+        this.saveNow();
     }
 
     get data(): TypeDataMapping['page_read_check'] {

From f6b092486a7ebf0304212b5d6921ad29f6fbb4ae Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 00:53:23 +0100
Subject: [PATCH 10/14] update SlideButton to handle disabled state with new
 icon and color

---
 src/components/shared/SlideButton/index.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/shared/SlideButton/index.tsx b/src/components/shared/SlideButton/index.tsx
index 2ccaf7e4b..31f11bcf1 100644
--- a/src/components/shared/SlideButton/index.tsx
+++ b/src/components/shared/SlideButton/index.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import styles from './styles.module.scss';
 import Icon from '@mdi/react';
-import { mdiArrowRightBoldBox, mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
+import { mdiArrowRightBoldBox, mdiCheckCircle, mdiCloseCircle, mdiTimerSand } from '@mdi/js';
 import Button from '@tdev-components/shared/Button';
 import { SIZE_S } from '@tdev-components/shared/iconSizes';
 import { observer } from 'mobx-react-lite';
@@ -140,9 +140,21 @@ const SlideButton = observer((props: Props) => {
                 >
                     <div className={clsx(styles.arrow)}>
                         <Icon
-                            path={unlocked ? mdiCheckCircle : mdiArrowRightBoldBox}
+                            path={
+                                unlocked
+                                    ? mdiCheckCircle
+                                    : props.disabled
+                                      ? mdiTimerSand
+                                      : mdiArrowRightBoldBox
+                            }
                             size={1}
-                            color={unlocked ? 'white' : 'var(--ifm-color-blue-darkest)'}
+                            color={
+                                props.disabled
+                                    ? 'var(--ifm-color-gray-700)'
+                                    : unlocked
+                                      ? 'var(--ifm-color-white)'
+                                      : 'var(--ifm-color-blue-darkest)'
+                            }
                             className={clsx(styles.arrowIcon)}
                         />
                     </div>

From 1aadbed1187c49c9905329deca9b9d4eaa5eaf5d Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 09:21:57 +0100
Subject: [PATCH 11/14] enhance PageReadCheck with customizable text and
 disabled reason props

---
 .../page-read-check/PageReadCheck/index.tsx   | 18 +++++++----
 packages/tdev/page-read-check/README.mdx      | 31 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index ba3192979..598262061 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -9,15 +9,24 @@ import styles from './styles.module.scss';
 import clsx from 'clsx';
 import { mdiFlashTriangle } from '@mdi/js';
 import Icon from '@mdi/react';
+import PageReadChecker from '../model';
 
 interface Props extends MetaInit {
     id: string;
+    text?: (unlocked: boolean, doc: PageReadChecker) => string;
+    disabledReason?: (doc: PageReadChecker) => string;
     hideTime?: boolean;
     hideWarning?: boolean;
     continueAfterUnlock?: boolean;
 }
 
+const defaultText = (unlocked: boolean, doc: PageReadChecker) =>
+    unlocked ? `Gelesen ${doc.fReadTime}` : doc.fReadTime;
+const defaultDisabledReason = (doc: PageReadChecker) =>
+    `Mindestens ${doc.meta.fMinReadTime} lesen, um zu entsperren`;
+
 const PageReadCheck = observer((props: Props) => {
+    const { text = defaultText, disabledReason = defaultDisabledReason } = props;
     const [meta] = React.useState(new ModelMeta(props));
     const viewStore = useStore('viewStore');
     const doc = useFirstMainDocument(props.id, meta);
@@ -41,20 +50,17 @@ const PageReadCheck = observer((props: Props) => {
     return (
         <div className={clsx(styles.pageReadCheck)}>
             <SlideButton
-                text={(unlocked) => (unlocked ? `Gelesen ${doc.fReadTime}` : doc.fReadTime)}
+                text={(unlocked) => text(unlocked, doc)}
                 onUnlock={() => doc.setReadState(true)}
                 onReset={() => doc.setReadState(false)}
                 isUnlocked={doc.read}
                 disabled={!doc.canUnlock}
                 sliderWidth={320}
-                disabledReason={`Mindestens ${doc.meta.fMinReadTime} lesen, um zu entsperren`}
+                disabledReason={disabledReason(doc)}
             />
             <div className={clsx(styles.status)}>
                 {!doc.canUnlock && (
-                    <Badge
-                        title={`Mindestens ${doc.meta.fMinReadTime} lesen, um zu entsperren`}
-                        className={clsx(styles.minReadTime)}
-                    >
+                    <Badge title={disabledReason(doc)} className={clsx(styles.minReadTime)}>
                         {doc.meta.fMinReadTime}
                     </Badge>
                 )}
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
index c5d8ea2aa..258704c8d 100644
--- a/packages/tdev/page-read-check/README.mdx
+++ b/packages/tdev/page-read-check/README.mdx
@@ -6,10 +6,11 @@ sidebar_custom_props:
 
 import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
 import BrowserWindow from '@tdev-components/BrowserWindow';
+import { action } from 'mobx';
 
 # page-read-check
 
-Mit der Komponente `PageReadCheck` kann die Bearbeitung einer Seite gekennzeichnet werden.
+Mit der Komponente `PageReadCheck` kann der Bearbeitungs- und Lesezustand einer Seite als "gelesen" oder "ungelesen" markiert werden.
 
 ```tsx
 import PageReadCheck from '@tdev/page-read-check/PageReadCheck';
@@ -44,4 +45,32 @@ Standardmässig wird die Lesezeit nicht weiter gezählt, wenn die Seite freigesc
 
 <BrowserWindow>
     <PageReadCheck continueAfterUnlock id="4a84e4a2-dee6-4575-bcd3-9682af03a17d" />
+</BrowserWindow>
+
+## Anpassung der Texte
+
+Die angezeigten Texte und Tooltipps können angepasst werden:
+
+```tsx
+<PageReadCheck
+    text={(unlocked, doc) => {
+        if (unlocked || doc.canUnlock) {
+            return `Gelesen ${doc.fReadTime}`;
+        }
+        return `Noch ${doc.meta.minReadTime - doc.readTime}s übrig`;
+    }}
+    disabledReason={(doc) => `Erst ${doc.fReadTime} bearbeitet, das ist zu wenig!`}
+/>
+```
+
+<BrowserWindow>
+    <PageReadCheck
+        text={(unlocked, doc) => {
+            if (unlocked || doc.canUnlock) {
+                return `Gelesen ${doc.fReadTime}`;
+            }
+            return `Noch ${doc.meta.minReadTime - doc.readTime}s übrig`;
+        }}
+        disabledReason={(doc) => `Erst ${doc.fReadTime} bearbeitet, das ist zu wenig!`}
+    />
 </BrowserWindow>
\ No newline at end of file

From 45d94f37ec9825abfdef82c14ae75c942a241460 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 09:44:35 +0100
Subject: [PATCH 12/14] docs: update README for PageReadCheck installation and
 configuration instructions

---
 packages/tdev/page-index/README.mdx      |  5 +++
 packages/tdev/page-read-check/README.mdx | 51 +++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/tdev/page-index/README.mdx b/packages/tdev/page-index/README.mdx
index 5a6a8bd70..69d309837 100644
--- a/packages/tdev/page-index/README.mdx
+++ b/packages/tdev/page-index/README.mdx
@@ -62,6 +62,11 @@ export const Comp = observer(() => {
 
 ## Für Plugin-Autoren
 
+:::tip[`@tdev/page-read-check` als Beispiel]
+Das Plugin `@tdev/page-read-check` implementiert das `iTaskableDocument`-Interface und wird daher automatisch im Seitenindex erfasst.
+Es dient als Beispiel und Referenz, wie ein *Statusdokument* implementiert werden kann, damit es im Seitenindex erfasst wird.
+:::
+
 Wenn ein Plugin ein weiteres *Statusdokument* implementiert, das im Seitenindex erfasst werden soll, müssen folgende Schritte durchgeführt werden:
 1. In der `siteConfig` die neue Komponente für das `remark`-Plugin registrieren:
     ```ts  title="siteConfig.ts"
diff --git a/packages/tdev/page-read-check/README.mdx b/packages/tdev/page-read-check/README.mdx
index 258704c8d..5e0c27979 100644
--- a/packages/tdev/page-read-check/README.mdx
+++ b/packages/tdev/page-read-check/README.mdx
@@ -73,4 +73,53 @@ Die angezeigten Texte und Tooltipps können angepasst werden:
         }}
         disabledReason={(doc) => `Erst ${doc.fReadTime} bearbeitet, das ist zu wenig!`}
     />
-</BrowserWindow>
\ No newline at end of file
+</BrowserWindow>
+
+## Installation
+
+:::info[`packages/tdev/page-read-check`]
+Kopiere des `packages/tdev/page-read-check`-Verzeichnis in das `tdev-website/website/packages`-Verzeichnis oder über `updateTdev.config.yaml` hinzufügen.
+:::
+
+Hinzufügen des `page-read-check`-Package zu den `apiDocumentProviders` im `siteConfig.ts`:
+
+```ts title="siteConfig.ts"
+const getSiteConfig: SiteConfigProvider = () => {
+    return {
+        apiDocumentProviders: [
+            require.resolve('@tdev/page-read-check/register'),
+        ]
+    };
+};
+```
+
+Falls **nicht** die standardoptionen des `PageIndexPluginDefaultOptions` verwendet werden, muss zusätzlich die `remark`-Plugin-Konfiguration angepasst werden, damit die neuen Dokumente im Seitenindex erfasst werden:
+
+```ts title="siteConfig.ts"
+import pageIndexPlugin from './packages/tdev/page-index/plugin';
+
+const getSiteConfig: SiteConfigProvider = () => ({
+    remarkPlugins: [
+        [
+            pageIndexPlugin,
+            {
+                // ...
+                components: [
+                    // highlight-start
+                    {
+                        name: 'PageReadCheck',
+                        docTypeExtractor: () => 'page_read_check'
+                    }
+                    // highlight-end
+                ]
+            }
+        ]
+    ]
+});
+```
+
+Danach muss erneut installiert werden:
+
+```bash
+yarn install
+```
\ No newline at end of file

From 0e484743ff558949f00318c18390caf2d3e6a445 Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 09:49:28 +0100
Subject: [PATCH 13/14] add scroll to animation effects to PageReadCheck
 component

---
 .../page-read-check/PageReadCheck/index.tsx   | 25 ++++++++++++-
 .../PageReadCheck/styles.module.scss          | 36 +++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index 598262061..ea3b7a1ee 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -28,8 +28,11 @@ const defaultDisabledReason = (doc: PageReadChecker) =>
 const PageReadCheck = observer((props: Props) => {
     const { text = defaultText, disabledReason = defaultDisabledReason } = props;
     const [meta] = React.useState(new ModelMeta(props));
+    const ref = React.useRef<HTMLDivElement>(null);
+
     const viewStore = useStore('viewStore');
     const doc = useFirstMainDocument(props.id, meta);
+    const [animate, setAnimate] = React.useState(false);
     React.useEffect(() => {
         if (!viewStore.isPageVisible) {
             return;
@@ -43,12 +46,32 @@ const PageReadCheck = observer((props: Props) => {
             clearInterval(id);
         };
     }, [doc, viewStore.isPageVisible, props.continueAfterUnlock]);
+
+    React.useEffect(() => {
+        if (ref.current && doc?.scrollTo) {
+            ref.current.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
+            doc.setScrollTo(false);
+            setAnimate(true);
+        }
+    }, [ref, doc?.scrollTo]);
+
+    React.useEffect(() => {
+        if (animate) {
+            const timeout = setTimeout(() => {
+                setAnimate(false);
+            }, 2000);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [animate]);
+
     if (!doc) {
         return null;
     }
 
     return (
-        <div className={clsx(styles.pageReadCheck)}>
+        <div className={clsx(styles.pageReadCheck, animate && styles.animate)} ref={ref}>
             <SlideButton
                 text={(unlocked) => text(unlocked, doc)}
                 onUnlock={() => doc.setReadState(true)}
diff --git a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
index 56d5868aa..604d5bb6f 100644
--- a/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
+++ b/packages/tdev/page-read-check/PageReadCheck/styles.module.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    border-radius: var(--ifm-global-radius);
     .status {
         margin-left: 240px;
         min-width: 4em;
@@ -14,4 +15,39 @@
             border-top-right-radius: 0;
         }
     }
+    @keyframes flash {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.7;
+        }
+    }
+
+    @keyframes shake {
+        0%,
+        100% {
+            transform: translateX(0);
+        }
+        10%,
+        30%,
+        50%,
+        70%,
+        90% {
+            transform: translateX(-5px);
+        }
+        20%,
+        40%,
+        60%,
+        80% {
+            transform: translateX(5px);
+        }
+    }
+    &.animate {
+        animation:
+            flash 1s normal,
+            shake 1.5s normal;
+        transform-origin: center;
+    }
 }

From 3b8e84bebc988e66ac077614668e0a7a6ee7b35c Mon Sep 17 00:00:00 2001
From: bh0fer <lebalz@outlook.com>
Date: Tue, 10 Feb 2026 09:49:46 +0100
Subject: [PATCH 14/14] only run ticker when needed

---
 .../tdev/page-read-check/PageReadCheck/index.tsx     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index ea3b7a1ee..0316a20a8 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -33,19 +33,21 @@ const PageReadCheck = observer((props: Props) => {
     const viewStore = useStore('viewStore');
     const doc = useFirstMainDocument(props.id, meta);
     const [animate, setAnimate] = React.useState(false);
+
     React.useEffect(() => {
-        if (!viewStore.isPageVisible) {
+        if (!viewStore.isPageVisible || !doc) {
+            return;
+        }
+        if (doc.read && !props.continueAfterUnlock) {
             return;
         }
         const id = setInterval(() => {
-            if (!doc?.read || props.continueAfterUnlock) {
-                doc?.incrementReadTime(1);
-            }
+            doc.incrementReadTime(1);
         }, 1000);
         return () => {
             clearInterval(id);
         };
-    }, [doc, viewStore.isPageVisible, props.continueAfterUnlock]);
+    }, [doc, doc?.read, viewStore.isPageVisible, props.continueAfterUnlock]);
 
     React.useEffect(() => {
         if (ref.current && doc?.scrollTo) {