Skip to content

work.md

Latest commit

 

History

History
213 lines (171 loc) · 8.8 KB

work.md

File metadata and controls

213 lines (171 loc) · 8.8 KB

Work Log - Bookmark Deck

Этот файл отслеживает текущее состояние разработки проекта.

Текущий статус

Фаза: Клавиатурная навигация v1.2 Последнее обновление: 2026-01-30

Клавиатурная навигация v1.2

Спецификация: /docs/keyboard-navigation-spec.md

План работ

Этап 1: Composable для клавиатурной навигации

  • Создать src/composables/useKeyboardNavigation.js
  • Реализовать state machine (IDLE → BLOCK_SELECTED_UPPER/LOWER → действие)
  • Маппинг клавиш на координаты (таблица из спецификации)
  • Обработка переключения табов (клавиши 1-8)
  • Таймаут сброса выбора блока (1.5 сек, конфигурируемый)
  • Отключение навигации при фокусе в input/textarea

Этап 2: Подсказки клавиш на ячейках

  • Добавить двухбуквенные подсказки в компонент ячейки
  • Стилизация: приглушённый цвет, 10-12px, левый верхний угол
  • Конфигурируемая прозрачность (keyHintOpacity)

Этап 3: Номера на табах

  • Отображение номера 1-8 на каждом табе
  • Стилизация аналогично подсказкам на ячейках

Этап 4: Подсветка при выборе блока

  • Визуальное выделение 4 ячеек выбранного блока
  • Затемнение остальных ячеек
  • Усиление видимости подсказок в активном блоке

Этап 5: Конфигурация

  • Добавить настройки в composable config:
    • blockSelectionTimeout (1500 мс)
    • showKeyHints (true)
    • keyHintOpacity (0.4)

Этап 6: Accessibility

  • Добавить aria-keyshortcuts на ячейки и табы
  • Screen reader: озвучивание состояния при выборе блока (отложено)

Этап 7: Интеграция и тестирование

  • Интеграция в ExtensionApp.vue и NewTabApp.vue
  • Логика крайних случаев:
    • Пустая ячейка → игнорирование
    • Несуществующий таб → игнорирование
    • Неверная клавиша после выбора блока → сброс
    • Escape → сброс состояния

Chrome Extension v1.0

Возможности доступа

  1. Новая вкладка — Bookmark Deck заменяет стартовую страницу Chrome
  2. Оверлей — Alt+B открывает оверлей поверх любой страницы
  3. Иконка — клик по иконке расширения в toolbar

Функциональность

  • Оверлей поверх любой страницы
  • Override New Tab — Bookmark Deck на стартовой странице
  • Открытие по горячей клавише Alt+B или клику на иконку
  • Закрытие оверлея: Escape, клик вне оверлея, переход по ссылке
  • При клике на закладку — открытие URL в новой вкладке
  • При копировании URL (Ctrl+Click) — копирование в буфер
  • Хранение данных в chrome.storage.local (синхронизация между вкладками)

Файлы расширения

extension/
├── manifest.json      # Manifest V3
├── background.js      # Service worker
├── content.js         # Внедрение оверлея
├── overlay.html       # HTML страница оверлея
├── newtab.html        # HTML для новой вкладки
├── assets/            # Собранный JS/CSS
│   ├── extension.js
│   ├── newtab.js
│   ├── shared-extensionBookmarkStore.js
│   └── *.css
└── icons/             # Иконки расширения
    ├── icon.svg
    └── icon{16,32,48,128}.png

Исходные файлы

  • src/extension/ — оверлей (ExtensionApp.vue, main.js)
  • src/newtab/ — новая вкладка (NewTabApp.vue, main.js)
  • src/stores/extensionBookmarkStore.js — store с chrome.storage
  • src/composables/useExtensionStorage.js — работа с chrome.storage.local
  • vite.config.extension.js — конфиг сборки расширения

Команды

npm run build:extension   # Собрать расширение
npm run dev:extension     # Собрать с watch-режимом
npm run generate-icons    # Сгенерировать PNG иконки из SVG

Установка в Chrome

  1. Открыть chrome://extensions/
  2. Включить "Режим разработчика"
  3. "Загрузить распакованное расширение"
  4. Выбрать папку extension/

Заметки

Технические решения

  • Использовать crypto.randomUUID() для генерации ID
  • Для drag-n-drop рассмотреть HTML5 Drag and Drop API или библиотеку vuedraggable
  • Цвета хранить как строковые идентификаторы, маппинг в utils/colors.js
  • Tailwind CSS 4: используется @theme для кастомных цветов в style.css

Структура проекта (создана)

src/
├── components/
│   ├── layout/
│   ├── tabs/
│   ├── grid/
│   ├── buffer/
│   ├── modals/
│   ├── ui/
│   └── common/
├── composables/
├── stores/
├── utils/
├── App.vue
├── main.js
└── style.css

Отложенные фичи (не включать в v1)

  • Селектор иконок (поле icon зарезервировано)
  • Поиск по закладкам
  • Импорт из браузера
  • Облачная синхронизация
  • Светлая тема
  • Мобильная адаптация

История версий

v1.1 (завершено 2026-01-27)

Доработки UI/UX:

  • Табы оформлены как pills, выровнены по левому краю
  • Размер блока увеличен до 88px, отступы до 12px
  • Расширенная палитра — 32 цвета
  • Убран hover для пустых ячеек в основном режиме

Буфер:

  • Панель 3×4 справа от основной сетки
  • Поддержка copy/cut/paste операций
  • Перетаскивание в корзину

Корзина:

  • Отображение блоками в сетке 4 колонки
  • Drag-n-drop в буфер и на панель
  • Закрытие по клику вне попапа

Режим редактирования:

  • Alt+Click — в буфер, Alt+Shift+Click — в корзину
  • Динамический курсор по модификаторам
  • Информационный блок clipboard с превью

Прочее:

  • Закрытие модальных окон по Esc
  • Автофокус при создании таба
  • Ctrl+Click в основном режиме копирует URL
  • При удалении вкладки блоки идут в корзину

v1.0 (завершено 2026-01-26)

Все 11 этапов разработки успешно выполнены.

Основные возможности:

  • Сетка закладок 8×4 (32 ячейки на страницу)
  • До 8 табов с drag-n-drop переупорядочиванием
  • 16 цветов/градиентов для блоков
  • Режим редактирования с полным CRUD
  • Drag-n-drop блоков между ячейками
  • Контекстное меню при конфликтах (swap/buffer/delete)
  • Буфер и корзина с восстановлением
  • Clipboard операции (Ctrl+клик copy, Shift+клик cut)
  • Экспорт/импорт в JSON
  • Сброс к defaults
  • Темная тема с neon-эффектами
  • Accessibility support
  • Полная локализация на русский язык

Команды

npm run dev      # Dev-сервер
npm run build    # Production сборка
npm run preview  # Превью production