@kangsicj/dcinsideenhancer 1.1.0 → 1.1.1

package/README.en.md

@@ -62,6 +62,7 @@ One userscript for DCInside on mobile and PC: smart blocking, endless lists, ima
 - Gaps left by blocked posts are **refilled** from the next page
 - Come back from a post and you're **right where you left off**
 - Cleaner read-post colors and a back-to-top button
+- Keyboard shortcuts on PC: **J/K** next/previous post, Enter to open, S to scrap, / to search
 
 </td>
 </tr>
@@ -77,7 +78,7 @@ One userscript for DCInside on mobile and PC: smart blocking, endless lists, ima
 <td valign="top">
 
 #### 🔄 Same setup on every device
-- Block lists, scraps, settings and **recently visited galleries** stay in sync automatically
+- Block lists, scraps, settings, **recently visited galleries** and mobile search history stay in sync automatically
 - Link over the same Wi-Fi, with a 6-digit code or a link
 - Data is **encrypted on your device** — only you can read it
 - Get notified about incoming changes, with **undo**

package/README.md

@@ -62,6 +62,7 @@
 - 차단으로 빈 자리는 다음 페이지 글로 **채워 둠**
 - 글을 보고 돌아오면 **보던 위치 그대로**
 - 읽은 글 색 정리, 맨 위로 버튼
+- PC 키보드 단축키: **J/K** 다음·이전 글, Enter 열기, S 스크랩, / 검색
 
 </td>
 </tr>
@@ -77,7 +78,7 @@
 <td valign="top">
 
 #### 🔄 모든 기기에서 같은 설정
-- 차단 목록 · 스크랩 · 설정 · **최근 방문 갤러리**를 자동으로 맞춤
+- 차단 목록 · 스크랩 · 설정 · **최근 방문 갤러리** · 모바일 검색 기록을 자동으로 맞춤
 - 같은 와이파이, 6자리 코드, 연결 링크로 간단 연결
 - 기기에서 **암호화**해 보내므로 내용은 나만 볼 수 있음
 - 받은 변경은 알림으로 알려 주고 **되돌리기** 가능

package/dist/DCInsideEnhancer.meta.js

@@ -2,7 +2,7 @@
 // @name         DCInside Enhancer
 // @name:ko      디시 인핸서
 // @namespace    https://github.com/kangsicj/DCInsideEnhancer
-// @version      1.1.0
+// @version      1.1.1
 // @description  DCInside filter & enhancer — mobile & PC. Block users/words/heads/notices/images & GIFs across posts, infinite list, zoom viewer, theme sync, encrypted multi-device sync.
 // @description:ko 디시인사이드 차단·편의 기능 (모바일·PC) - 유저·단어(제목/본문)·말머리·공지 차단, 같은/비슷한 이미지·움짤 모든 글 차단, 디시콘 제거, 차단 미디어 데이터 절약, 목록 자동 보충·무한 스크롤·뒤로 가기 위치 복원, 스크랩, 이미지 확대뷰 개선, 야간모드 자동 연동, 암호화 기기 간 동기화
 // @author       kangsicj

package/dist/DCInsideEnhancer.user.js

@@ -2,7 +2,7 @@
 // @name         DCInside Enhancer
 // @name:ko      디시 인핸서
 // @namespace    https://github.com/kangsicj/DCInsideEnhancer
-// @version      1.1.0
+// @version      1.1.1
 // @description  DCInside filter & enhancer — mobile & PC. Block users/words/heads/notices/images & GIFs across posts, infinite list, zoom viewer, theme sync, encrypted multi-device sync.
 // @description:ko 디시인사이드 차단·편의 기능 (모바일·PC) - 유저·단어(제목/본문)·말머리·공지 차단, 같은/비슷한 이미지·움짤 모든 글 차단, 디시콘 제거, 차단 미디어 데이터 절약, 목록 자동 보충·무한 스크롤·뒤로 가기 위치 복원, 스크랩, 이미지 확대뷰 개선, 야간모드 자동 연동, 암호화 기기 간 동기화
 // @author       kangsicj
@@ -75,7 +75,7 @@
     // 0. 설정·상수
     // =========================================================
 
-    const SCRIPT_VERSION = '1.1.0';
+    const SCRIPT_VERSION = '1.1.1';
     const PROJECT_URL = 'https://github.com/kangsicj/DCInsideEnhancer';
     const DONATE_URL = 'https://fairy.hada.io/@jinny#support';
 
@@ -107,6 +107,7 @@
         syncRt: 'dc_sync_rt',
         recent: 'dc_recent_galls',
         recentNative: 'dc_recent_native',
+        searchHistory: 'dc_search_history',
         alarmSeen: 'dc_alarm_marks',
         seenVersion: 'dc_seen_version'
     };
@@ -222,6 +223,7 @@
         hideSilbeAlarm: true,
         alarmBubble: true,
         alarmKeepPolling: true,
+        keyboardShortcuts: true,
         pcFitWidth: true,
         autoHideScrollbar: true,
         scrapIntercept: true,
@@ -275,6 +277,8 @@
         --dc-type-id: #6d538d;
         --dc-shadow: 0 8px 24px rgba(0,0,0,.16);
         --dc-shadow-sm: 0 2px 8px rgba(0,0,0,.12);
+        --dc-raised: #ffffff;
+        --dc-raised-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.08);
         --dc-overlay: rgba(0,0,0,.45);
         --dc-ghost-bg: rgba(128,128,128,.12);
         --dc-ghost-border: rgba(128,128,128,.38);
@@ -300,6 +304,8 @@
         --dc-type-id: #9c86b1;
         --dc-shadow: 0 8px 28px rgba(0,0,0,.55);
         --dc-shadow-sm: 0 2px 10px rgba(0,0,0,.45);
+        --dc-raised: #383b44;
+        --dc-raised-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3);
         --dc-overlay: rgba(0,0,0,.6);
         --dc-ghost-bg: rgba(150,150,150,.11);
         --dc-ghost-border: rgba(150,150,150,.30);
@@ -949,6 +955,10 @@
 
         #dc-custom-modal .dc-head-btn {
             flex: 0 0 auto;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
             height: 30px;
             padding: 0 12px;
             border: 1px solid var(--dc-border);
@@ -957,7 +967,7 @@
             color: var(--dc-text-dim);
             font-size: 12px;
             font-weight: 700;
-            line-height: 28px;
+            line-height: 1;
             cursor: pointer;
         }
 
@@ -978,7 +988,15 @@
 
         #dc-custom-modal .dc-modal-tab {
             flex: 1 1 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 3px;
+            min-width: 0;
+            box-sizing: border-box;
             height: 36px;
+            margin: 0;
+            line-height: 1;
             padding: 0 2px;
             border: none;
             border-radius: 9px;
@@ -992,11 +1010,14 @@
         }
 
         #dc-custom-modal .dc-modal-tab.active {
-            background: var(--dc-surface);
+            background: var(--dc-raised);
             color: var(--dc-accent-ink);
-            box-shadow: var(--dc-shadow-sm);
+            box-shadow: var(--dc-raised-shadow);
         }
 
+        #dc-custom-modal .dc-modal-tab .dc-tab-ico { flex: 0 0 auto; font-size: 13px; line-height: 1; }
+        #dc-custom-modal .dc-modal-tab .dc-tab-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
+
         #dc-custom-modal .dc-section-title {
             display: flex;
             align-items: center;
@@ -1830,6 +1851,8 @@
 
         #dc-custom-modal .dc-row.dc-row-new .dc-row-title { font-weight: 800; }
 
+        .dc-key-cursor { outline: 2px solid var(--dc-accent-ink) !important; outline-offset: -2px; background: var(--dc-accent-soft) !important; }
+
         #dc-custom-modal .dc-about {
             margin-top: 14px;
             padding: 12px 13px;
@@ -3234,7 +3257,7 @@
 
     window.addEventListener('beforeunload', noteNetLeaving);
 
-    document.addEventListener('click', event => {
+    window.addEventListener('click', event => {
         const link = event.target instanceof Element ? event.target.closest('a[href]') : null;
 
         if (!link || event.defaultPrevented || event.button > 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
@@ -3253,7 +3276,7 @@
             }
         } catch {
         }
-    }, true);
+    });
 
     try {
         if (window.navigation && typeof window.navigation.addEventListener === 'function') {
@@ -5823,6 +5846,38 @@
     // =========================================================
 
     let toastTimer = null;
+    const toastListeners = [];
+
+    const notifyToastListeners = () => toastListeners.forEach(fn => {
+        try {
+            fn();
+        } catch {
+        }
+    });
+
+    const placeToast = toast => {
+        toast.style.bottom = '';
+
+        const fab = document.getElementById('dc-custom-fab');
+
+        if (!fab || getComputedStyle(fab).display === 'none') {
+            return;
+        }
+
+        const f = fab.getBoundingClientRect();
+        const t = toast.getBoundingClientRect();
+
+        if (!f.width || !t.width) {
+            return;
+        }
+
+        const overlapX = t.left < f.right + 6 && t.right > f.left - 6;
+        const overlapY = t.top < f.bottom + 6 && t.bottom > f.top - 6;
+
+        if (overlapX && overlapY) {
+            toast.style.bottom = `${Math.round(window.innerHeight - f.top + 10)}px`;
+        }
+    };
 
     const showToast = (text, { actionLabel = '', onAction = null, duration = 3500 } = {}) => {
         let toast = document.getElementById('dc-toast');
@@ -5851,8 +5906,13 @@
         };
 
         toast.classList.add('show');
+        placeToast(toast);
+        notifyToastListeners();
         clearTimeout(toastTimer);
-        toastTimer = setTimeout(() => toast.classList.remove('show'), duration);
+        toastTimer = setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(notifyToastListeners, 220);
+        }, duration);
     };
 
     const offerUndo = (text, undo) => {
@@ -10138,6 +10198,14 @@
             off: '모든 댓글을 보여 줍니다.',
             refresh: 'all'
         },
+        {
+            group: 'list',
+            key: 'keyboardShortcuts',
+            name: '키보드 단축키 (PC)',
+            on: '목록에서 J/K 로 글을 고르고 Enter 로 엽니다. 글에서는 J/K 로 다음·이전 글, S 스크랩, / 검색창, B 차단 관리, ? 안내.',
+            off: '단축키를 쓰지 않습니다.',
+            refresh: 'none'
+        },
         {
             group: 'list',
             key: 'autoFillList',
@@ -11295,7 +11363,11 @@
             '<button id="dc-modal-close-btn" class="dc-head-btn" type="button">닫기</button>' +
             '</div>' +
             `<div class="dc-modal-tabs">${Object.keys(MODAL_VIEWS)
-                .map(key => `<button class="dc-modal-tab" type="button" data-dc-view="${key}">${MODAL_VIEWS[key].tab}</button>`)
+                .map(key => {
+                    const [ico, ...rest] = MODAL_VIEWS[key].tab.split(' ');
+
+                    return `<button class="dc-modal-tab" type="button" data-dc-view="${key}"><span class="dc-tab-ico" aria-hidden="true">${ico}</span><span class="dc-tab-txt">${rest.join(' ')}</span></button>`;
+                })
                 .join('')}</div>` +
             '</div>' +
             '<div id="dc-modal-content"></div>';
@@ -11385,6 +11457,7 @@
         { key: 'heads', label: '말머리', fields: ['heads'] },
         { key: 'scraps', label: '스크랩', fields: ['scraps'] },
         { key: 'recent', label: '최근 갤러리', fields: ['recent'] },
+        { key: 'search', label: '검색 기록', fields: ['search'] },
         { key: 'settings', label: '설정', fields: ['settings'] }
     ];
 
@@ -11552,7 +11625,8 @@
         heads: JSON.parse(JSON.stringify(hiddenHeadMap || {})),
         scraps: scraps.map(item => ({ ...item })),
         settings: syncedSettings(),
-        recent: collectRecentForSync()
+        recent: collectRecentForSync(),
+        search: collectSearchForSync()
     });
 
     const skippedFields = skip => SYNC_PARTS.filter(part => skip.includes(part.key)).flatMap(part => part.fields);
@@ -11659,7 +11733,8 @@
             heads: mergeHeads(local.heads, base && base.heads, remote && remote.heads),
             scraps: mergeScraps(local.scraps, base && base.scraps, remote && remote.scraps),
             settings: mergeSettings(local.settings, base && base.settings, remote && remote.settings),
-            recent: mergeRecent(local.recent, base && base.recent, remote && remote.recent)
+            recent: mergeRecent(local.recent, base && base.recent, remote && remote.recent),
+            search: mergeSearchHistory(local.search, base && base.search, remote && remote.search)
         };
 
         skippedFields(skip).forEach(field => {
@@ -11713,12 +11788,14 @@
         const data = collectSyncData();
 
         delete data.recent;
+        delete data.search;
 
         return JSON.stringify(data);
     };
 
     const applySyncData = data => {
         const recentChanged = data && 'recent' in data ? applyRecentFromSync(data.recent) : false;
+        const searchChanged = data && 'search' in data ? applySearchFromSync(data.search) : false;
         const clean = sanitizeBackup({ app: BACKUP_APP, ...data });
         const before = blockSyncData();
 
@@ -11773,7 +11850,7 @@
             refreshAfterBlockChange();
         }
 
-        return changed || recentChanged;
+        return changed || recentChanged || searchChanged;
     };
 
     const saveSyncUndo = (before, incoming, summary, from) => {
@@ -13134,8 +13211,12 @@
         const nativeKeys = new Set(native.map(recentKeyOf));
         const snapshot = readArray(STORAGE.recentNative).filter(key => typeof key === 'string');
 
-        if (snapshot.length && native.length < RECENT_NATIVE_CAP - 1) {
-            const removed = new Set(snapshot.filter(key => !nativeKeys.has(key)));
+        if (snapshot.length) {
+            const snapSet = new Set(snapshot);
+            const added = native.filter(item => !snapSet.has(recentKeyOf(item))).length;
+            const overflow = Math.max(0, snapshot.length + added - RECENT_NATIVE_CAP);
+            const kept = snapshot.slice(0, snapshot.length - overflow);
+            const removed = new Set(kept.filter(key => !nativeKeys.has(key)));
 
             if (removed.size) {
                 recentGalls = recentGalls.filter(item => !removed.has(recentKeyOf(item)));
@@ -13489,24 +13570,40 @@
         }
 
         const fab = document.getElementById('dc-custom-fab');
-        const rect = fab && fab.offsetParent !== null ? fab.getBoundingClientRect() : null;
+        const rect = fab && getComputedStyle(fab).display !== 'none' ? fab.getBoundingClientRect() : null;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
+        let bottom = 144;
 
         if (rect && rect.width) {
             const onRight = rect.left + rect.width / 2 > vw / 2;
 
             bubbleBox.style.left = onRight ? '' : `${Math.max(8, rect.left)}px`;
             bubbleBox.style.right = onRight ? `${Math.max(8, vw - rect.right)}px` : '';
-            bubbleBox.style.bottom = `${Math.max(8, vh - rect.top + 10)}px`;
+            bottom = Math.max(8, vh - rect.top + 10);
             bubbleBox.classList.toggle('dc-left', !onRight);
         } else {
             bubbleBox.style.left = '';
             bubbleBox.style.right = '15px';
-            bubbleBox.style.bottom = 'calc(144px + env(safe-area-inset-bottom))';
+            bubbleBox.classList.remove('dc-left');
+        }
+
+        const toast = document.getElementById('dc-toast');
+
+        if (toast && toast.classList.contains('show')) {
+            const t = toast.getBoundingClientRect();
+            const box = bubbleBox.getBoundingClientRect();
+
+            if (t.width && t.left < box.right && t.right > box.left) {
+                bottom = Math.max(bottom, vh - t.top + 8);
+            }
         }
+
+        bubbleBox.style.bottom = `${Math.round(bottom)}px`;
     };
 
+    toastListeners.push(() => placeBubbleBox());
+
     const ensureBubbleBox = () => {
         if (bubbleBox && bubbleBox.isConnected) {
             return bubbleBox;
@@ -13730,9 +13827,24 @@
         }
     };
 
-    const initSiteAlarms = () => {
-        if (alarmWatchTimer || !alarmStorageKeys().length && !siteUserId()) {
+    function initSiteAlarms() {
+        if (alarmWatchTimer || !(IS_MOBILE_SITE || /^gall\.dcinside\.com$/i.test(location.hostname))) {
+            paintAlarmBadge();
+            return;
+        }
+
+        if (!siteUserId() && !alarmStorageKeys().length) {
             paintAlarmBadge();
+
+            if (!initSiteAlarms.retried) {
+                initSiteAlarms.retried = true;
+                [3000, 10000].forEach(delay => setTimeout(() => {
+                    if (!alarmWatchTimer && (siteUserId() || alarmStorageKeys().length)) {
+                        initSiteAlarms();
+                    }
+                }, delay));
+            }
+
             return;
         }
 
@@ -13873,6 +13985,180 @@
     })();
 
     initRecentEarly();
+
+    // =========================================================
+
+    // =========================================================
+
+    const KEY_HELP = 'J/K 다음·이전 글 · Enter 열기 · S 스크랩 · / 검색 · B 차단 관리';
+
+    const typingTarget = el =>
+        !!el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || !!el.closest?.('[contenteditable="true"]'));
+
+    const visibleListRows = () => {
+        const listEl = pickListElement(document);
+
+        if (!listEl) {
+            return [];
+        }
+
+        return realListItems(listEl).filter(row => row.getClientRects().length && listItemKey(row) && !row.closest('.dc-ui'));
+    };
+
+    let keyCursor = null;
+
+    const moveKeyCursor = step => {
+        const rows = visibleListRows();
+
+        if (!rows.length) {
+            return false;
+        }
+
+        const here = currentPostKey();
+        let index = keyCursor ? rows.indexOf(keyCursor) : -1;
+
+        if (currentPostInfo()) {
+            const at = rows.findIndex(row => listItemKey(row) === here);
+            const target = at >= 0 ? rows[at + step] : step > 0 ? rows[0] : null;
+            const link = target && target.querySelector(POST_LINK_SELECTOR);
+
+            if (link) {
+                location.href = link.href;
+                return true;
+            }
+
+            showToast(step > 0 ? '아래에 더 볼 글이 없습니다' : '첫 글입니다');
+            return true;
+        }
+
+        if (index < 0) {
+            index = rows.findIndex(row => row.getBoundingClientRect().bottom > 60);
+            index = Math.max(0, step > 0 ? index : index);
+        } else {
+            index = Math.min(rows.length - 1, Math.max(0, index + step));
+        }
+
+        keyCursor?.classList.remove('dc-key-cursor');
+        keyCursor = rows[index];
+        keyCursor.classList.add('dc-key-cursor');
+        keyCursor.scrollIntoView({ block: 'nearest' });
+
+        return true;
+    };
+
+    const initKeyboardShortcuts = () => {
+        document.addEventListener('keydown', event => {
+            if (settings.keyboardShortcuts === false || event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+                return;
+            }
+
+            if (typingTarget(event.target) || typingTarget(document.activeElement)) {
+                return;
+            }
+
+            if (document.getElementById('dc-custom-modal')?.classList.contains('show')) {
+                return;
+            }
+
+            const key = event.key;
+            let handled = false;
+
+            if (key === 'j' || key === 'J') {
+                handled = moveKeyCursor(1);
+            } else if (key === 'k' || key === 'K') {
+                handled = moveKeyCursor(-1);
+            } else if ((key === 'Enter' || key === 'o' || key === 'O') && keyCursor && keyCursor.isConnected) {
+                const link = keyCursor.querySelector(POST_LINK_SELECTOR);
+
+                if (link) {
+                    location.href = link.href;
+                    handled = true;
+                }
+            } else if (key === 's' || key === 'S') {
+                const info = currentPostInfo();
+
+                if (info) {
+                    toggleScrap(info);
+                    handled = true;
+                }
+            } else if (key === '/') {
+                const box = document.querySelector('.in_keyword, #preSWord, input.js-keyword, input[name="search_keyword"], .top_search input[type="text"]');
+
+                if (box) {
+                    box.focus();
+                    handled = true;
+                }
+            } else if (key === 'b' || key === 'B') {
+                openBlockModal(document.getElementById('dc-custom-fab')?.dataset.dcAlarm ? 'recent' : 'overview');
+                handled = true;
+            } else if (key === '?') {
+                showToast(`⌨️ ${KEY_HELP}`, { duration: 6000 });
+                handled = true;
+            }
+
+            if (handled) {
+                event.preventDefault();
+            }
+        });
+    };
+
+    // =========================================================
+
+    // =========================================================
+
+    const SEARCH_HISTORY_MAX = 30;
+
+    const readSiteSearchHistory = () => {
+        if (!IS_MOBILE_SITE) {
+            return null;
+        }
+
+        try {
+            const list = JSON.parse(localStorage.getItem('searchHistory') || '[]');
+
+            return Array.isArray(list) ? list.filter(item => typeof item === 'string' && item.trim()).map(item => item.slice(0, 60)) : [];
+        } catch {
+            return [];
+        }
+    };
+
+    const collectSearchForSync = () => {
+        const site = readSiteSearchHistory();
+        const list = site || readArray(STORAGE.searchHistory).filter(item => typeof item === 'string');
+
+        return [...new Set(list)].slice(-SEARCH_HISTORY_MAX);
+    };
+
+    const mergeSearchHistory = (local = [], base, remote) => {
+        if (!Array.isArray(remote)) {
+            return [...new Set(local || [])].slice(-SEARCH_HISTORY_MAX);
+        }
+
+        return mergeList(local || [], Array.isArray(base) ? base : null, remote).slice(-SEARCH_HISTORY_MAX);
+    };
+
+    const applySearchFromSync = list => {
+        if (!Array.isArray(list)) {
+            return false;
+        }
+
+        const next = [...new Set(list.filter(item => typeof item === 'string'))].slice(-SEARCH_HISTORY_MAX);
+
+        if (JSON.stringify(next) === JSON.stringify(collectSearchForSync())) {
+            return false;
+        }
+
+        writeJson(STORAGE.searchHistory, next);
+
+        if (IS_MOBILE_SITE) {
+            try {
+                localStorage.setItem('searchHistory', JSON.stringify(next));
+            } catch {
+            }
+        }
+
+        return true;
+    };
     // =========================================================
     // 14. 플로팅 버튼
     // =========================================================
@@ -14860,6 +15146,7 @@
         initSync();
         initRecent();
         initSiteAlarms();
+        initKeyboardShortcuts();
         restoreListSnapshot();
         processElements();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kangsicj/dcinsideenhancer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "DCInside filter & enhancer userscript for mobile and PC (디시인사이드 차단·편의 유저스크립트)",
   "license": "MIT",
   "author": "kangsicj",