Improve readability for chained utterances

Alternate boxes left and right to make the exchanges clearer
force paginations at ~100 items

Author: mathjoha

src/components/reader/UtteranceCard.tsx

@@ -6,9 +6,10 @@ import type { UtteranceWithPerson } from '@/types/database';
 interface UtteranceCardProps {
   utterance: UtteranceWithPerson;
   highlighted?: boolean;
+  index?: number;
 }
 
-export function UtteranceCard({ utterance, highlighted }: UtteranceCardProps) {
+export function UtteranceCard({ utterance, highlighted, index = 0 }: UtteranceCardProps) {
   const partyColor = getPartyColor(utterance.person_party);
   const textColor = getContrastTextColor(partyColor);
 
@@ -33,7 +34,11 @@ export function UtteranceCard({ utterance, highlighted }: UtteranceCardProps) {
       className={`border-l-4 bg-white rounded-lg shadow-sm p-6 mb-4 ${
         highlighted ? 'border-blue-500 bg-blue-50' : ''
       }`}
-      style={!highlighted ? { borderLeftColor: partyColor } : {}}
+      style={{
+        ...(!highlighted ? { borderLeftColor: partyColor } : {}),
+        marginLeft: index % 2 === 1 ? '10rem' : '0',
+        marginRight: index % 2 === 0 ? '10rem' : '0',
+      }}
     >
       {/* Metadata */}
       <div className="flex flex-wrap items-center gap-4 mb-4 text-sm">
@@ -93,7 +98,7 @@ export function UtteranceCard({ utterance, highlighted }: UtteranceCardProps) {
       )}
 
       {/* Content */}
-      <div className="text-gray-700 leading-relaxed prose max-w-none">
+      <div className="text-gray-700 leading-relaxed prose max-w-none whitespace-pre-wrap max-h-64 overflow-y-auto">
         {utterance.content}
       </div>
     </div>

src/lib/database/DatabaseManager.ts

@@ -166,6 +166,10 @@ export class DatabaseManager {
     // Initialize database
     const db = new this.SQL.Database(data);
 
+    // Break prev/next links every ~100 utterances to create page boundaries
+    db.run(`UPDATE utterance SET next = NULL WHERE rowid % 100 = 0`);
+    db.run(`UPDATE utterance SET prev = NULL WHERE rowid % 100 = 1 AND rowid > 1`);
+
     // Store in memory cache
     this.memoryCache.set(year, db);
     this.updateLRU(year);

src/lib/utils/config.ts

@@ -9,7 +9,7 @@ export const config = {
   // Database URLs
   databaseBaseUrl: (import.meta.env.DEV && import.meta.env.VITE_USE_REMOTE_DB !== 'true')
     ? '/dbs'
-    : 'https://raw.githubusercontent.com/DigitalHistory-Lund/ToK-Preparer/main',
+    : 'https://raw.githubusercontent.com/DigitalHistory-Lund/ToK-Preparer/run',
 
   // Database filename pattern
   databaseFilename: (year: number) =>
@@ -25,7 +25,7 @@ export const config = {
   },
 
   // Cache settings
-  cacheVersion: '1.0.0',
+  cacheVersion: '1.2.0',
   maxCachedDatabases: 3, // Max databases in memory
   cacheDbName: 'tok-reader-cache',
   cacheStoreName: 'databases',

src/pages/ReaderPage.tsx

@@ -449,7 +449,7 @@ export function ReaderPage() {
 
       {/* Utterances */}
       <div className="space-y-4">
-        {utterances.map((utterance) => (
+        {utterances.map((utterance, index) => (
           <div
             key={utterance.id}
             ref={(el) => {
@@ -465,6 +465,7 @@ export function ReaderPage() {
             <UtteranceCard
               utterance={utterance}
               highlighted={utterance.id === utteranceId}
+              index={index}
             />
           </div>
         ))}

vite.config.ts

@@ -3,9 +3,9 @@ import react from '@vitejs/plugin-react'
 import path from 'path'
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => ({
+export default defineConfig(({ command, mode }) => ({
   plugins: [react()],
-  base: command === 'serve' ? '/' : '/ToK-Reader/',
+  base: command === 'serve' && mode !== 'production' ? '/' : '/ToK-Reader/',
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),