docbook 0.1.0

data/frontend/src/components/SettingsPanel.vue

@@ -0,0 +1,236 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="isSettingsOpen"
+        class="fixed inset-0 z-50 flex items-center justify-center"
+        @click.self="ebookStore.toggleSettings"
+      >
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="ebookStore.toggleSettings"></div>
+
+        <div class="relative bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+          <!-- Header -->
+          <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Display Settings</h2>
+            <button
+              @click="ebookStore.toggleSettings"
+              class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="px-6 py-5 space-y-6">
+            <!-- Reading Mode -->
+            <div>
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 block">Reading Mode</label>
+              <div class="grid grid-cols-4 gap-2">
+                <button
+                  v-for="mode in readingModes"
+                  :key="mode.value"
+                  @click="ebookStore.setReadingMode(mode.value)"
+                  :class="[
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all',
+                    currentReadingMode === mode.value
+                      ? 'border-cyan-500 bg-cyan-50 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300'
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-600 dark:text-gray-400'
+                  ]"
+                >
+                  <span class="text-xl mb-1">{{ mode.icon }}</span>
+                  <span class="text-xs">{{ mode.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Divider -->
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+
+            <!-- Theme -->
+            <div>
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 block">Theme</label>
+              <div class="grid grid-cols-4 gap-2">
+                <button
+                  v-for="t in themes"
+                  :key="t.value"
+                  @click="ebookStore.setTheme(t.value)"
+                  :class="[
+                    'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all',
+                    currentTheme === t.value
+                      ? 'border-cyan-500 bg-cyan-50 dark:bg-cyan-900/30'
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                  ]"
+                >
+                  <div :class="['w-8 h-8 rounded-full mb-1', t.preview]"></div>
+                  <span class="text-xs" :class="t.textClass">{{ t.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Divider -->
+            <div class="border-t border-gray-200 dark:border-gray-700"></div>
+
+            <!-- Font Size -->
+            <div>
+              <div class="flex items-center justify-between mb-2">
+                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Font Size</label>
+                <span class="text-sm text-gray-500 dark:text-gray-400">{{ currentFontSize }}px</span>
+              </div>
+              <input
+                type="range"
+                min="12"
+                max="32"
+                :value="currentFontSize"
+                @input="ebookStore.setFontSize(Number(($event.target as HTMLInputElement).value))"
+                class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
+              />
+              <div class="flex justify-between text-xs text-gray-400 mt-1">
+                <span>12px</span>
+                <span>32px</span>
+              </div>
+            </div>
+
+            <!-- Font Weight -->
+            <div>
+              <div class="flex items-center justify-between mb-2">
+                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Font Weight</label>
+                <span class="text-sm text-gray-500 dark:text-gray-400">{{ currentFontWeight }}</span>
+              </div>
+              <input
+                type="range"
+                min="300"
+                max="700"
+                step="100"
+                :value="currentFontWeight"
+                @input="ebookStore.setFontWeight(Number(($event.target as HTMLInputElement).value))"
+                class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
+              />
+              <div class="flex justify-between text-xs text-gray-400 mt-1">
+                <span>Light</span>
+                <span>Bold</span>
+              </div>
+            </div>
+
+            <!-- Line Height -->
+            <div>
+              <div class="flex items-center justify-between mb-2">
+                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Line Height</label>
+                <span class="text-sm text-gray-500 dark:text-gray-400">{{ currentLineHeight }}</span>
+              </div>
+              <input
+                type="range"
+                min="1.2"
+                max="2.0"
+                step="0.1"
+                :value="currentLineHeight"
+                @input="ebookStore.setLineHeight(Number(($event.target as HTMLInputElement).value))"
+                class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
+              />
+              <div class="flex justify-between text-xs text-gray-400 mt-1">
+                <span>Compact</span>
+                <span>Spacious</span>
+              </div>
+            </div>
+
+            <!-- Margin -->
+            <div>
+              <div class="flex items-center justify-between mb-2">
+                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Margins</label>
+                <span class="text-sm text-gray-500 dark:text-gray-400">{{ currentMargin }}px</span>
+              </div>
+              <input
+                type="range"
+                min="16"
+                max="96"
+                step="8"
+                :value="currentMargin"
+                @input="ebookStore.setMargin(Number(($event.target as HTMLInputElement).value))"
+                class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
+              />
+              <div class="flex justify-between text-xs text-gray-400 mt-1">
+                <span>Narrow</span>
+                <span>Wide</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+            <button
+              @click="resetToDefaults"
+              class="w-full py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+            >
+              Reset to Defaults
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEbookStore, type ReadingMode, type Theme } from '@/composables/useEbookStore'
+
+const ebookStore = useEbookStore()
+
+// Settings open state - use local computed to ensure reactivity
+const isSettingsOpen = computed(() => ebookStore.settingsOpen.value)
+
+// Computed properties for template comparisons
+const currentReadingMode = computed(() => ebookStore.readingMode.value)
+const currentTheme = computed(() => ebookStore.theme.value)
+const currentFontSize = computed(() => ebookStore.fontSize.value)
+const currentFontWeight = computed(() => ebookStore.fontWeight.value)
+const currentLineHeight = computed(() => ebookStore.lineHeight.value.toFixed(1))
+const currentMargin = computed(() => ebookStore.margin.value)
+
+const readingModes = [
+  { value: 'scroll' as ReadingMode, label: 'Scroll', icon: '📜' },
+  { value: 'page' as ReadingMode, label: 'Page', icon: '📄' },
+  { value: 'chapter' as ReadingMode, label: 'Chapter', icon: '📑' },
+  { value: 'reference' as ReadingMode, label: 'Cards', icon: '💳' },
+]
+
+const themes = [
+  { value: 'day' as Theme, label: 'Day', preview: 'bg-white border border-gray-300', textClass: 'text-gray-700' },
+  { value: 'sepia' as Theme, label: 'Sepia', preview: 'bg-amber-100', textClass: 'text-amber-800' },
+  { value: 'night' as Theme, label: 'Night', preview: 'bg-gray-800', textClass: 'text-gray-300' },
+  { value: 'oled' as Theme, label: 'OLED', preview: 'bg-black border border-gray-600', textClass: 'text-gray-300' },
+]
+
+function resetToDefaults() {
+  ebookStore.setFontSize(18)
+  ebookStore.setFontWeight(400)
+  ebookStore.setLineHeight(1.6)
+  ebookStore.setMargin(48)
+  ebookStore.setTheme('day')
+  ebookStore.setReadingMode('scroll')
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active > div:last-child,
+.modal-leave-active > div:last-child {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.modal-enter-from > div:last-child,
+.modal-leave-to > div:last-child {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>

data/frontend/src/components/TocTreeItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <li>
+    <!-- Item with children (collapsible) -->
+    <template v-if="item.children && item.children.length > 0">
+      <div class="flex items-start gap-1">
+        <button
+          @click="toggle"
+          class="flex-shrink-0 w-6 h-6 flex items-center justify-center p-1 text-sm text-left rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors self-center"
+          :class="buttonClass"
+        >
+          <svg
+            class="w-3.5 h-3.5 transition-transform"
+            :class="{ 'rotate-90': isOpen }"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        </button>
+        <a
+          :href="'#' + item.id"
+          class="flex items-center gap-2 py-1 px-1 text-sm rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex-grow truncate"
+          :class="linkClass"
+        >
+          <span v-if="typeLabel" class="w-8 text-center text-xs px-1 py-0.5 rounded flex-shrink-0" :class="typeBadgeClass">{{ typeLabel }}</span>
+          <span class="w-10 text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 font-mono text-right">{{ getNumber(item.id) }}</span>
+          <span class="truncate">{{ item.title }}</span>
+        </a>
+      </div>
+      <ul v-if="isOpen" class="pl-4 mt-0.5 space-y-0.5 border-l border-gray-200 dark:border-gray-700">
+        <TocTreeItem
+          v-for="child in item.children"
+          :key="child.id"
+          :item="child"
+          :depth="depth + 1"
+        />
+      </ul>
+    </template>
+
+    <!-- Leaf item (no children) -->
+    <a
+      v-else
+      :href="'#' + item.id"
+      class="flex items-center gap-2 py-1 px-1 pl-5 text-sm rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors truncate"
+      :class="linkClass"
+    >
+      <span v-if="typeLabel" class="w-8 text-center text-xs px-1 py-0.5 rounded flex-shrink-0" :class="typeBadgeClass">{{ typeLabel }}</span>
+      <span class="w-10 text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 font-mono text-right">{{ getNumber(item.id) }}</span>
+      <span class="truncate">{{ item.title }}</span>
+    </a>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useDocumentStore, type TocItem } from '@/stores/documentStore'
+import { useUiStore } from '@/stores/uiStore'
+
+interface Props {
+  item: TocItem
+  depth: number
+}
+
+const props = defineProps<Props>()
+const documentStore = useDocumentStore()
+const uiStore = useUiStore()
+const isOpen = ref(props.depth <= 1)
+
+const typeLabel = computed(() => {
+  switch (props.item.type) {
+    case 'part': return 'Pt'
+    case 'chapter': return 'Ch'
+    case 'appendix': return 'App'
+    case 'section': return ''
+    case 'glossary': return 'Gl'
+    case 'bibliography': return 'Bib'
+    case 'index': return 'Idx'
+    case 'preface': return 'Pref'
+    case 'reference': return 'Ref'
+    default: return ''
+  }
+})
+
+const typeBadgeClass = computed(() => {
+  switch (props.item.type) {
+    case 'part':
+      return 'bg-purple-200 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-medium'
+    case 'chapter':
+      return 'bg-blue-200 dark:bg-blue-800 text-blue-800 dark:text-blue-200 font-medium'
+    case 'appendix':
+      return 'bg-green-200 dark:bg-green-800 text-green-800 dark:text-green-200 font-medium'
+    case 'section':
+      return 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+    case 'glossary':
+      return 'bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 font-medium'
+    case 'bibliography':
+      return 'bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 font-medium'
+    case 'index':
+      return 'bg-indigo-200 dark:bg-indigo-800 text-indigo-800 dark:text-indigo-200 font-medium'
+    case 'preface':
+      return 'bg-orange-200 dark:bg-orange-800 text-orange-800 dark:text-orange-200 font-medium'
+    case 'reference':
+      return 'bg-cyan-200 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 font-medium'
+    default:
+      return 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
+  }
+})
+
+const buttonClass = computed(() => {
+  if (props.item.type === 'part') {
+    return 'font-semibold text-gray-800 dark:text-gray-100'
+  }
+  return 'text-gray-700 dark:text-gray-300'
+})
+
+const linkClass = computed(() => {
+  const isActive = uiStore.activeSectionId === props.item.id
+  if (isActive) {
+    return 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium'
+  }
+  if (props.item.type === 'part') {
+    return 'font-semibold text-gray-800 dark:text-gray-100'
+  }
+  return 'text-gray-600 dark:text-gray-400'
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function getNumber(id: string): string {
+  return documentStore.getNumbering(id)
+}
+</script>

data/frontend/src/composables/useEbookStore.ts

@@ -0,0 +1,191 @@
+import { reactive, computed, watch } from 'vue'
+
+export type ReadingMode = 'scroll' | 'page' | 'chapter' | 'reference'
+export type Theme = 'day' | 'sepia' | 'night' | 'oled'
+
+interface EbookState {
+  readingMode: ReadingMode
+  fontSize: number
+  fontWeight: number
+  lineHeight: number
+  margin: number
+  theme: Theme
+  uiVisible: boolean
+  tocOpen: boolean
+  settingsOpen: boolean
+}
+
+const STORAGE_KEY = 'docbook_ebook_preferences'
+
+// Default state
+const defaultState: EbookState = {
+  readingMode: 'scroll',
+  fontSize: 18,
+  fontWeight: 400,
+  lineHeight: 1.6,
+  margin: 48,
+  theme: 'day',
+  uiVisible: true,
+  tocOpen: false,
+  settingsOpen: false
+}
+
+// Load from localStorage
+function loadPreferences(): Partial<EbookState> {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      return JSON.parse(stored)
+    }
+  } catch (e) {
+    console.warn('Failed to load preferences:', e)
+  }
+  return {}
+}
+
+// Save to localStorage
+function savePreferences(state: EbookState) {
+  try {
+    const { uiVisible, tocOpen, settingsOpen, ...persisted } = state
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(persisted))
+  } catch (e) {
+    console.warn('Failed to save preferences:', e)
+  }
+}
+
+// Global reactive state - settingsOpen ALWAYS starts false regardless of localStorage
+const loadedPrefs = loadPreferences()
+// Ensure settingsOpen is never true from localStorage
+delete loadedPrefs.settingsOpen
+const state = reactive<EbookState>(Object.assign({}, defaultState, loadedPrefs, { settingsOpen: false }))
+
+// Auto-save when persisted fields change (not deep watch for performance)
+watch(
+  () => ({
+    readingMode: state.readingMode,
+    fontSize: state.fontSize,
+    fontWeight: state.fontWeight,
+    lineHeight: state.lineHeight,
+    margin: state.margin,
+    theme: state.theme
+  }),
+  () => savePreferences(state),
+  { immediate: true }
+)
+
+// Theme application function - applies Tailwind dark class based on theme
+function applyTheme() {
+  const isDark = state.theme === 'night' || state.theme === 'oled'
+  document.documentElement.classList.toggle('dark', isDark)
+}
+
+// Apply theme on load and when theme changes
+applyTheme()
+watch(() => state.theme, applyTheme)
+
+export function useEbookStore() {
+  // Computed getters - these ARE reactive and will auto-unwrap in templates
+  const readingMode = computed(() => state.readingMode)
+  const fontSize = computed(() => state.fontSize)
+  const fontWeight = computed(() => state.fontWeight)
+  const lineHeight = computed(() => state.lineHeight)
+  const margin = computed(() => state.margin)
+  const theme = computed(() => state.theme)
+  const uiVisible = computed(() => state.uiVisible)
+  const tocOpen = computed(() => state.tocOpen)
+  const settingsOpen = computed(() => state.settingsOpen)
+
+  // Actions
+  function setReadingMode(mode: ReadingMode) {
+    state.readingMode = mode
+  }
+
+  function setFontSize(size: number) {
+    state.fontSize = Math.max(12, Math.min(32, size))
+  }
+
+  function setFontWeight(weight: number) {
+    state.fontWeight = Math.max(300, Math.min(700, weight))
+  }
+
+  function setLineHeight(height: number) {
+    state.lineHeight = Math.max(1.2, Math.min(2.0, height))
+  }
+
+  function setMargin(m: number) {
+    state.margin = Math.max(16, Math.min(96, m))
+  }
+
+  function setTheme(t: Theme) {
+    state.theme = t
+    applyTheme()
+  }
+
+  function setUiVisible(visible: boolean) {
+    state.uiVisible = visible
+  }
+
+  function toggleToc() {
+    state.tocOpen = !state.tocOpen
+    if (state.tocOpen) {
+      state.settingsOpen = false
+    }
+  }
+
+  function toggleSettings() {
+    state.settingsOpen = !state.settingsOpen
+    if (state.settingsOpen) {
+      state.tocOpen = false
+    }
+  }
+
+  function closeAll() {
+    state.tocOpen = false
+    state.settingsOpen = false
+  }
+
+  // Theme CSS class
+  function getThemeClass(): string {
+    return `theme-${state.theme}`
+  }
+
+  // Generate CSS variables object
+  function getCssVariables(): Record<string, string | number> {
+    return {
+      '--ebook-font-size': `${state.fontSize}px`,
+      '--ebook-font-weight': state.fontWeight,
+      '--ebook-line-height': state.lineHeight,
+      '--ebook-margin': `${state.margin}px`,
+    }
+  }
+
+  return {
+    // Computed getters (reactive, auto-unwrap in templates)
+    readingMode,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    margin,
+    theme,
+    uiVisible,
+    tocOpen,
+    settingsOpen,
+
+    // Actions
+    setReadingMode,
+    setFontSize,
+    setFontWeight,
+    setLineHeight,
+    setMargin,
+    setTheme,
+    applyTheme,
+    setUiVisible,
+    toggleToc,
+    toggleSettings,
+    closeAll,
+
+    // Utilities
+    getThemeClass,
+    getCssVariables
+  }
+}