a236d2c065
- line-deletion: keyboard shortcuts and bulk delete with confirmation - label-management: full CRUD UI in sidebar with search/filter - docker-deployment: multi-stage build, compose, health checks - hacker-theme: matrix-style colors, neon glows, monospace fonts
274 lines
12 KiB
Markdown
274 lines
12 KiB
Markdown
## ADDED Requirements
|
||
|
||
### Requirement: Monospace typography
|
||
The application SHALL use monospace fonts throughout the entire interface.
|
||
|
||
#### Scenario: Primary font family
|
||
- **WHEN** CSS font-family is applied
|
||
- **THEN** system uses font stack: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace
|
||
|
||
#### Scenario: Font loading
|
||
- **WHEN** application loads
|
||
- **THEN** system loads JetBrains Mono font from Google Fonts or local files with weights: 400, 500, 700
|
||
|
||
#### Scenario: All text elements
|
||
- **WHEN** rendering any text (buttons, labels, inputs, tooltips, headings)
|
||
- **THEN** all text uses monospace font family without exception
|
||
|
||
#### Scenario: Number formatting
|
||
- **WHEN** displaying numbers (prices, timestamps, counts)
|
||
- **THEN** uses tabular-nums CSS property for aligned columns
|
||
|
||
### Requirement: Matrix-style color scheme
|
||
The application SHALL use a dark background with neon green (#00ff41) accent color scheme.
|
||
|
||
#### Scenario: Background colors
|
||
- **WHEN** rendering main layout
|
||
- **THEN** page background is #0a0e0a (near black), sidebar background is #0d110d, and chart background is #000000
|
||
|
||
#### Scenario: Primary accent color
|
||
- **WHEN** highlighting interactive elements, active states, or success messages
|
||
- **THEN** uses #00ff41 (matrix green) as the primary accent color
|
||
|
||
#### Scenario: Secondary accent colors
|
||
- **WHEN** rendering labels or status indicators
|
||
- **THEN** uses #ff0040 (neon red) for break_down/destructive, #00ff41 (neon green) for break_up/success, #00d4ff (neon cyan) for informational, #ffff00 (neon yellow) for warnings
|
||
|
||
#### Scenario: Text colors
|
||
- **WHEN** rendering text
|
||
- **THEN** primary text is #00ff41, secondary text is #00cc33 (dimmer green), and disabled text is #003311 (very dim green)
|
||
|
||
#### Scenario: Border colors
|
||
- **WHEN** rendering borders
|
||
- **THEN** uses #00ff41 with 1px solid for active elements, #003311 for inactive borders
|
||
|
||
### Requirement: Neon glow effects
|
||
The application SHALL apply glow effects to active and interactive elements.
|
||
|
||
#### Scenario: Button hover glow
|
||
- **WHEN** user hovers over any button
|
||
- **THEN** button shows box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff4180
|
||
|
||
#### Scenario: Active tool glow
|
||
- **WHEN** a tool is active (selected)
|
||
- **THEN** button shows pulsing glow animation with box-shadow: 0 0 15px #00ff41, 0 0 30px #00ff4180
|
||
|
||
#### Scenario: Selected element glow
|
||
- **WHEN** a line or label is selected
|
||
- **THEN** element shows glow effect with filter: drop-shadow(0 0 8px #00ff41)
|
||
|
||
#### Scenario: Input focus glow
|
||
- **WHEN** user focuses on text input or search field
|
||
- **THEN** input shows border glow: box-shadow: 0 0 8px #00ff41
|
||
|
||
#### Scenario: Cursor circle glow
|
||
- **WHEN** drawing line with cursor circle visible
|
||
- **THEN** cursor circle has stroke glow with filter: drop-shadow(0 0 4px currentColor)
|
||
|
||
### Requirement: ASCII-style borders
|
||
The application SHALL use terminal-inspired border styling with corner characters.
|
||
|
||
#### Scenario: Container borders
|
||
- **WHEN** rendering bordered containers (Toolbox, label list sections)
|
||
- **THEN** uses 1px solid borders with #00ff41 color
|
||
|
||
#### Scenario: Border corners with pseudo-elements
|
||
- **WHEN** rendering section headers or important containers
|
||
- **THEN** uses CSS ::before and ::after pseudo-elements to display ASCII corner characters: ┌ ┐ └ ┘
|
||
|
||
#### Scenario: Separator lines
|
||
- **WHEN** rendering section separators
|
||
- **THEN** uses border-top: 1px solid #003311 with optional ASCII characters (─) via pseudo-elements
|
||
|
||
#### Scenario: Card-style containers
|
||
- **WHEN** rendering label list entries or modal dialogs
|
||
- **THEN** containers have 1px solid border with subtle inset shadow for depth
|
||
|
||
### Requirement: Terminal-like feedback messages
|
||
The application SHALL display command-style feedback for user actions.
|
||
|
||
#### Scenario: Success message format
|
||
- **WHEN** user completes an action successfully (delete, create, export)
|
||
- **THEN** displays message in format: `> SUCCESS: <action> completed [<count> items]` in green text
|
||
|
||
#### Scenario: Error message format
|
||
- **WHEN** an error occurs
|
||
- **THEN** displays message in format: `> ERROR: <description> [code: <error_code>]` in red text
|
||
|
||
#### Scenario: Info message format
|
||
- **WHEN** displaying informational message
|
||
- **THEN** displays message in format: `> INFO: <message>` in cyan text
|
||
|
||
#### Scenario: Message container styling
|
||
- **WHEN** displaying any feedback message
|
||
- **THEN** container has monospace font, left-aligned text, subtle border, and auto-dismiss after 4 seconds
|
||
|
||
#### Scenario: Message animation
|
||
- **WHEN** feedback message appears
|
||
- **THEN** slides in from top with fade-in animation (0.3s ease-out)
|
||
|
||
### Requirement: Minimalist icon treatment
|
||
The application SHALL use simplified, outline-style icons or ASCII alternatives.
|
||
|
||
#### Scenario: Lucide icon styling
|
||
- **WHEN** rendering Lucide React icons
|
||
- **THEN** icons use stroke-width: 1.5, size: 20px, and color matches text color (#00ff41)
|
||
|
||
#### Scenario: Icon hover effect
|
||
- **WHEN** user hovers over icon button
|
||
- **THEN** icon glows with filter: drop-shadow(0 0 4px currentColor)
|
||
|
||
#### Scenario: ASCII alternative icons (optional)
|
||
- **WHEN** rendering simple actions (delete, expand, collapse)
|
||
- **THEN** optionally uses ASCII characters: [×] for delete, [▼] for expand, [▲] for collapse, [>] for actions
|
||
|
||
#### Scenario: Icon color consistency
|
||
- **WHEN** icon is in active/selected state
|
||
- **THEN** icon color is #00ff41
|
||
- **WHEN** icon is in disabled state
|
||
- **THEN** icon color is #003311
|
||
|
||
### Requirement: High contrast for readability
|
||
The application SHALL maintain WCAG AA contrast ratios for all text.
|
||
|
||
#### Scenario: Primary text contrast
|
||
- **WHEN** displaying primary text (#00ff41) on dark background (#0a0e0a)
|
||
- **THEN** contrast ratio is at least 4.5:1 (WCAG AA standard)
|
||
|
||
#### Scenario: Secondary text contrast
|
||
- **WHEN** displaying secondary text (#00cc33) on dark background
|
||
- **THEN** contrast ratio is at least 4.5:1
|
||
|
||
#### Scenario: Button text contrast
|
||
- **WHEN** button is in any state (default, hover, active, disabled)
|
||
- **THEN** text maintains minimum 4.5:1 contrast with background
|
||
|
||
#### Scenario: Chart element visibility
|
||
- **WHEN** rendering lines and markers on chart
|
||
- **THEN** all annotations have sufficient contrast against black background and candles
|
||
|
||
### Requirement: Simplified button styling
|
||
The application SHALL use minimal, flat button design with terminal aesthetic.
|
||
|
||
#### Scenario: Default button appearance
|
||
- **WHEN** rendering buttons in default state
|
||
- **THEN** buttons have transparent background, 1px solid #00ff41 border, #00ff41 text, 4px padding, and no rounded corners (border-radius: 0)
|
||
|
||
#### Scenario: Hover button appearance
|
||
- **WHEN** user hovers over button
|
||
- **THEN** background changes to #00ff4110 (10% opacity), border glows, and text remains #00ff41
|
||
|
||
#### Scenario: Active button appearance
|
||
- **WHEN** button is active/pressed
|
||
- **THEN** background is #00ff4120 (20% opacity), border is 2px solid, and includes pulsing glow animation
|
||
|
||
#### Scenario: Disabled button appearance
|
||
- **WHEN** button is disabled
|
||
- **THEN** background is transparent, border is #003311, text is #003311, and no hover effects
|
||
|
||
#### Scenario: Destructive button styling
|
||
- **WHEN** button represents destructive action (delete)
|
||
- **THEN** uses #ff0040 (neon red) for border and text instead of green, with matching red glow on hover
|
||
|
||
### Requirement: Cyber-retro aesthetic elements
|
||
The application SHALL include subtle design elements that enhance the hacker theme.
|
||
|
||
#### Scenario: Scanline effect (optional)
|
||
- **WHEN** rendering main container
|
||
- **THEN** applies subtle CSS repeating-linear-gradient overlay simulating CRT scanlines with 2px spacing at 5% opacity
|
||
|
||
#### Scenario: Noise texture (optional)
|
||
- **WHEN** rendering background
|
||
- **THEN** applies subtle noise texture using CSS filter or background-image at 3% opacity for grain effect
|
||
|
||
#### Scenario: Typewriter animation for messages
|
||
- **WHEN** displaying new feedback message
|
||
- **THEN** text appears with brief letter-by-letter typing animation (0.02s per character, max 0.5s total)
|
||
|
||
#### Scenario: Flicker animation on focus
|
||
- **WHEN** user focuses on input field
|
||
- **THEN** border shows brief flicker animation (0.1s) simulating electrical surge
|
||
|
||
#### Scenario: ASCII art branding (optional)
|
||
- **WHEN** application loads or in header
|
||
- **THEN** displays application name in ASCII art style using monospace font
|
||
|
||
### Requirement: Responsive dark theme
|
||
The application SHALL maintain theme consistency across all components and states.
|
||
|
||
#### Scenario: Modal dialogs
|
||
- **WHEN** displaying confirmation dialogs
|
||
- **THEN** modal has dark background (#0d110d), neon green border, monospace font, and terminal-style title (e.g., "> CONFIRM ACTION")
|
||
|
||
#### Scenario: Input fields
|
||
- **WHEN** rendering text inputs or search fields
|
||
- **THEN** inputs have transparent background, #00ff41 border, #00ff41 text, #00ff4120 placeholder, and cursor color #00ff41
|
||
|
||
#### Scenario: Dropdown menus
|
||
- **WHEN** displaying filter or select dropdowns
|
||
- **THEN** dropdown has dark background (#0d110d), neon green border, #00ff41 option text, hover state with #00ff4120 background
|
||
|
||
#### Scenario: Scrollbars
|
||
- **WHEN** content requires scrolling
|
||
- **THEN** custom scrollbar with #003311 track, #00ff41 thumb, and 8px width
|
||
|
||
#### Scenario: Tooltips
|
||
- **WHEN** displaying tooltips on hover
|
||
- **THEN** tooltip has dark background (#0d110d), 1px #00ff41 border, monospace font, and terminal-style text
|
||
|
||
### Requirement: Animation performance
|
||
The application SHALL use performant CSS animations that don't impact chart rendering.
|
||
|
||
#### Scenario: GPU acceleration
|
||
- **WHEN** applying animations (glow, pulse, fade)
|
||
- **THEN** uses CSS transform and opacity properties with will-change hints for GPU acceleration
|
||
|
||
#### Scenario: Animation duration
|
||
- **WHEN** defining animations
|
||
- **THEN** all animations complete within 0.5s, with most hover effects at 0.2s
|
||
|
||
#### Scenario: Reduced motion support
|
||
- **WHEN** user has prefers-reduced-motion enabled
|
||
- **THEN** system disables glow animations, typewriter effects, and pulsing, keeping only instant transitions
|
||
|
||
#### Scenario: Chart performance
|
||
- **WHEN** theme is active and chart is rendering
|
||
- **THEN** SVG overlay and chart rendering maintains 60fps without jank from theme effects
|
||
|
||
### Requirement: Tailwind CSS configuration
|
||
The Tailwind config SHALL be updated to support hacker theme tokens.
|
||
|
||
#### Scenario: Custom colors in tailwind.config
|
||
- **WHEN** tailwind.config.js is parsed
|
||
- **THEN** defines custom colors: matrix: '#00ff41', matrixDim: '#00cc33', matrixDark: '#003311', neonRed: '#ff0040', neonCyan: '#00d4ff', neonYellow: '#ffff00', terminal: '#0a0e0a', terminalLight: '#0d110d'
|
||
|
||
#### Scenario: Custom font families
|
||
- **WHEN** tailwind.config.js is parsed
|
||
- **THEN** defines fontFamily: { mono: ['JetBrains Mono', 'Fira Code', 'Courier New', 'monospace'] }
|
||
|
||
#### Scenario: Custom animations
|
||
- **WHEN** tailwind.config.js is parsed
|
||
- **THEN** defines keyframes for 'glow-pulse', 'flicker', 'scanline-move' and corresponding animation utilities
|
||
|
||
#### Scenario: Custom shadows
|
||
- **WHEN** tailwind.config.js is parsed
|
||
- **THEN** defines boxShadow: { 'glow-sm': '0 0 8px #00ff41', 'glow': '0 0 15px #00ff41, 0 0 30px #00ff4180', 'glow-lg': '0 0 20px #00ff41, 0 0 40px #00ff4180' }
|
||
|
||
### Requirement: globals.css updates
|
||
The globals.css file SHALL define base styles and CSS variables for the hacker theme.
|
||
|
||
#### Scenario: CSS custom properties
|
||
- **WHEN** globals.css is loaded
|
||
- **THEN** defines CSS variables: --color-matrix, --color-matrix-dim, --color-matrix-dark, --color-neon-red, --color-neon-cyan, --color-terminal, --font-mono
|
||
|
||
#### Scenario: Base body styles
|
||
- **WHEN** page loads
|
||
- **THEN** body element has background: --color-terminal, color: --color-matrix, font-family: --font-mono, and -webkit-font-smoothing: antialiased
|
||
|
||
#### Scenario: Selection styling
|
||
- **WHEN** user selects text
|
||
- **THEN** selection background is #00ff4140 (40% opacity) and text is #00ff41
|
||
|
||
#### Scenario: Scrollbar styling
|
||
- **WHEN** globals.css is loaded
|
||
- **THEN** defines custom scrollbar styles using ::-webkit-scrollbar pseudo-elements with theme colors
|