From 20bd9c63faeda1bce26248fce8c02e774acc41d8 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 23 Feb 2026 02:38:33 +0000 Subject: [PATCH] Refactor TranscriptViewer inline styles to CSS and fix build issues Co-authored-by: alfieprojectsdev <11991855+alfieprojectsdev@users.noreply.github.com> --- field-logic/package-lock.json | 7 ++ field-logic/package.json | 1 + field-logic/src/components/SurveyWizard.tsx | 6 +- .../src/components/TranscriptViewer.tsx | 111 +++++++++--------- field-logic/src/styles/main.css | 58 ++++++++- 5 files changed, 120 insertions(+), 63 deletions(-) diff --git a/field-logic/package-lock.json b/field-logic/package-lock.json index 9c7e74f..dcb9689 100644 --- a/field-logic/package-lock.json +++ b/field-logic/package-lock.json @@ -13,6 +13,7 @@ "@types/react": "^19.2.10", "@types/react-dom": "^19.2.3", "astro": "^5.16.16", + "dexie": "^4.3.0", "idb": "^8.0.3", "nanostores": "^1.1.0", "react": "^19.2.4", @@ -3084,6 +3085,12 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/dexie": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.3.0.tgz", + "integrity": "sha512-5EeoQpJvMKHe6zWt/FSIIuRa3CWlZeIl6zKXt+Lz7BU6RoRRLgX9dZEynRfXrkLcldKYCBiz7xekTEylnie1Ug==", + "license": "Apache-2.0" + }, "node_modules/diff": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz", diff --git a/field-logic/package.json b/field-logic/package.json index b47e2ed..59b8c41 100644 --- a/field-logic/package.json +++ b/field-logic/package.json @@ -14,6 +14,7 @@ "@types/react": "^19.2.10", "@types/react-dom": "^19.2.3", "astro": "^5.16.16", + "dexie": "^4.3.0", "idb": "^8.0.3", "nanostores": "^1.1.0", "react": "^19.2.4", diff --git a/field-logic/src/components/SurveyWizard.tsx b/field-logic/src/components/SurveyWizard.tsx index 4f7bc72..9a1e493 100644 --- a/field-logic/src/components/SurveyWizard.tsx +++ b/field-logic/src/components/SurveyWizard.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; -import { SurveyEngine } from '../lib/engine'; -import type { SurveyDefinition, SurveyNode } from '../lib/types'; +import { SurveyEngine } from '../lib/SurveyEngine'; +import type { SurveyDefinition, SurveyNode } from '../types/schema'; import '../styles/main.css'; interface Props { @@ -30,7 +30,7 @@ export const SurveyWizard: React.FC = ({ definition }) => { return; } - const nextNode = engine.next(inputValue); + const nextNode = engine.submitAnswer(inputValue); setCurrentNode(nextNode); setInputValue(null); // Reset input for next question }; diff --git a/field-logic/src/components/TranscriptViewer.tsx b/field-logic/src/components/TranscriptViewer.tsx index 9929047..aee96bf 100644 --- a/field-logic/src/components/TranscriptViewer.tsx +++ b/field-logic/src/components/TranscriptViewer.tsx @@ -1,74 +1,73 @@ -import React from 'react'; +import React from "react"; interface TranscriptSegment { - start: number; - end: number; - text: string; - confidence: number; - flagged?: boolean; + start: number; + end: number; + text: string; + confidence: number; + flagged?: boolean; } interface TranscriptData { - meta: { - file: string; - duration: number; - engine: string; - }; - segments: TranscriptSegment[]; + meta: { + file: string; + duration: number; + engine: string; + }; + segments: TranscriptSegment[]; } interface Props { - data: TranscriptData; + data: TranscriptData; } export const TranscriptViewer: React.FC = ({ data }) => { - const handleDeepLink = (e: React.MouseEvent, start: number) => { - e.preventDefault(); - const file = data.meta.file; - // Construct custom protocol link - const url = `fieldlogic://open?file=${file}&t=${start}`; - window.location.href = url; - }; + const handleDeepLink = (e: React.MouseEvent, start: number) => { + e.preventDefault(); + const file = data.meta.file; + // Construct custom protocol link + const url = `fieldlogic://open?file=${file}&t=${start}`; + window.location.href = url; + }; - return ( -
-

Transcription Review: {data.meta.file}

+ return ( +
+

Transcription Review: {data.meta.file}

-
- {data.segments.map((seg, idx) => ( -
- - [{new Date(seg.start * 1000).toISOString().substr(14, 5)}] - +
+ {data.segments.map((seg, idx) => ( +
+ + [{new Date(seg.start * 1000).toISOString().substr(14, 5)}] + - {seg.text} + {seg.text} -
- {/* Primary: In-browser audio (mock) */} - +
+ {/* Primary: In-browser audio (mock) */} + - {/* Secondary: VLC Deep Link */} - handleDeepLink(e, seg.start)} - title="Open in VLC" - style={{ textDecoration: 'none' }} - > - 🚀 - -
-
- ))} + {/* Secondary: VLC Deep Link */} + handleDeepLink(e, seg.start)} + title="Open in VLC" + className="deep-link" + > + 🚀 +
-
- ); +
+ ))} +
+
+ ); }; diff --git a/field-logic/src/styles/main.css b/field-logic/src/styles/main.css index b82737a..fef976b 100644 --- a/field-logic/src/styles/main.css +++ b/field-logic/src/styles/main.css @@ -9,11 +9,16 @@ --radius-lg: 1rem; --radius-md: 0.5rem; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-lg: + 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } body { - font-family: 'Inter', system-ui, -apple-system, sans-serif; + font-family: + "Inter", + system-ui, + -apple-system, + sans-serif; background-color: var(--color-bg); color: var(--color-text); margin: 0; @@ -120,6 +125,51 @@ button:disabled { } @keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* TranscriptViewer Styles */ +.transcript-viewer { + max-width: 800px; + margin: 0 auto; + font-family: monospace; +} + +.transcript-viewer .segment-item { + padding: 8px; + border-bottom: 1px solid #eee; + background-color: transparent; +} + +.transcript-viewer .segment-item.low-confidence { + background-color: #fef3c7; +} + +.transcript-viewer .segment-timestamp { + color: var(--color-text-muted); + margin-right: 10px; + user-select: none; +} + +.transcript-viewer .segment-text { + margin-right: 10px; +} + +.transcript-viewer .segment-actions { + float: right; +} + +.transcript-viewer .action-btn { + margin-right: 5px; +} + +.transcript-viewer .deep-link { + text-decoration: none; }