+ {/* Color swatches */}
+
+ {colors.map((preset) => {
+ const isSelected = selectedColor === preset.color;
+ return (
+
+
+ {/* Labels Section - collapsible */}
+
+
+ {labelsExpanded && (
+
+ {/* Count display */}
+ {markerTypes.length > 0 && (
+
{markerTypes.map((type, idx) => (
{idx > 0 && ' | '}
@@ -293,118 +280,83 @@ export default function Toolbox({
))}
+ )}
- {/* Search input */}
-
setSearchText(e.target.value)}
- className="h-8 text-sm"
- />
+
setSearchText(e.target.value)}
+ className="h-7 text-xs"
+ />
- {/* Filter dropdown */}
+ {filterType !== 'all' || markerTypes.length > 1 ? (
+ ) : null}
- {/* Labels list */}
-
- {filteredAnnotations.length === 0 ? (
-
- {labelAnnotations.length === 0
- ? 'No labels yet. Click Break Up or Break Down tools to add labels.'
- : 'No matching labels found.'}
-
- ) : (
- filteredAnnotations.map((annotation) => {
- const formattedTime = new Date(annotation.timestamp * 1000).toLocaleString('en-US', {
- month: 'short',
- day: 'numeric',
- hour: '2-digit',
- minute: '2-digit',
- });
- const isSelected = annotation.id === selectedLabelId;
- const annotationType = annotationTypes.find((t) => t.name === annotation.label_type);
+
+ {filteredAnnotations.length === 0 ? (
+
+ {labelAnnotations.length === 0 ? 'No annotations yet.' : 'No matching labels.'}
+
+ ) : (
+ filteredAnnotations.map((annotation) => {
+ const formattedTime = new Date(annotation.timestamp * 1000).toLocaleString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+ const isSelected = annotation.id === selectedLabelId;
+ const annotationType = annotationTypes.find((t) => t.name === annotation.label_type);
- return (
-
onLabelSelect?.(annotation.id)}
- className={`p-2 rounded border text-xs cursor-pointer transition-colors ${
- isSelected
- ? 'border-primary bg-primary/10'
- : 'border-border hover:bg-secondary'
- }`}
- >
-
-
-
{formattedTime}
-
-
- {annotationType?.display_name || annotation.label_type}
-
-
-
-
+ );
+ })
+ )}
- )}
-
-
- {/* Span Annotations List */}
-
- {})}
- onDeleteSpan={onDeleteSpan || (() => {})}
- />
-
-
- {/* Export button */}
-
-
-
-
- {/* Theme toggle */}
-
-
-
+
+ )}
);
}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..76a3d44
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,73 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ "./src/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ sidebar: {
+ DEFAULT: "hsl(var(--sidebar-background))",
+ foreground: "hsl(var(--sidebar-foreground))",
+ primary: "hsl(var(--sidebar-primary))",
+ "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+ accent: "hsl(var(--sidebar-accent))",
+ "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+ border: "hsl(var(--sidebar-border))",
+ ring: "hsl(var(--sidebar-ring))",
+ },
+ "candle-bull": "hsl(var(--candle-bull))",
+ "candle-bear": "hsl(var(--candle-bear))",
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "fade-in": {
+ from: { opacity: "0" },
+ to: { opacity: "1" },
+ },
+ },
+ animation: {
+ "fade-in": "fade-in 0.2s ease-in-out",
+ },
+ },
+ },
+ plugins: [],
+};