gfxr-notify

Modern notification, input dialog, and progress bar system for RedM with a Western-themed UI built in React.

Features

Toast-style notifications (success, error, warning, info)
Cancellable progress bars with optional animations
Input dialogs with multiple field types (text, number, password, select, textarea)
Full-screen announcements
Customizable Western-themed design via CSS variables
Multi-language support (English, Turkish)

Dependencies

Dependency	Description
`gfxr-bridge`	Framework abstraction layer

Installation

Add to server.cfg:
```
ensure gfxr-bridge
ensure gfxr-notify
```

Build the UI (if not pre-built):

cd resources/[gfx]/gfxr-notify/web
npm install
npm run build

Configure:
- config/client_config.lua - Notification settings, theme
- config/locale.lua - Language translations

Configuration

client_config.lua

Config.Locale = 'en'                    -- Language ('en' or 'tr')
Config.Debug = false                     -- Debug logging
Config.DefaultDuration = 5000            -- Default notification duration (ms)
Config.MaxVisibleNotifications = 5       -- Max stacked notifications
Config.Position = 'top-right'            -- Notification position
Config.AnimationDuration = 300           -- Animation timing (ms)
Config.ProgressBarPosition = 'bottom-center'
Config.InputOverlayOpacity = 0.7         -- Modal backdrop opacity
Config.PlaySound = true                  -- Play sound on notification
Config.SoundVolume = 0.3                 -- Sound volume

-- Theme (CSS variables)
Config.Theme = {
    ['--primary'] = '#DAA520',
    ['--success'] = '#2d5a1b',
    ['--error'] = '#8b1a1a',
    ['--warning'] = '#b8860b',
    ['--info'] = '#1a3d5c',
    ['--bg-primary'] = '#1a1410',
    ['--bg-secondary'] = '#2a2118',
    ['--text-primary'] = '#f4e4c1',
    ['--text-secondary'] = '#c4a882',
    ['--border'] = '#3a2e22',
    ['--font-family'] = "'Rye', serif"
}

Client Exports

ShowNotification

exports['gfxr-notify']:ShowNotification(message, type, duration)

Parameter	Type	Description
message	string	Notification text
type	string	`"success"`, `"error"`, `"warning"`, `"info"`
duration	number\|nil	Duration in ms (optional)

ShowProgressBar

local completed = exports['gfxr-notify']:ShowProgressBar(label, duration, options)

Parameter	Type	Description
label	string	Progress bar label
duration	number	Duration in ms
options	table\|nil	`{ canCancel = true, animation = { dict = "...", anim = "..." } }`

Returns: true if completed, false if cancelled.

ShowInputDialog

local result = exports['gfxr-notify']:ShowInputDialog(title, inputs)

Parameter	Type	Description
title	string	Dialog title
inputs	table	Array of input definitions

Input types:

{
    { type = 'text', label = 'Name', placeholder = 'Enter name' },
    { type = 'number', label = 'Amount', placeholder = '0' },
    { type = 'password', label = 'Password' },
    { type = 'select', label = 'Option', options = { {value = '1', label = 'One'} } },
    { type = 'textarea', label = 'Reason', placeholder = 'Enter reason' }
}

Returns: Table of submitted values, or nil if cancelled.

ShowAnnouncement

exports['gfxr-notify']:ShowAnnouncement(title, message, duration)

Server Exports

Notify

exports['gfxr-notify']:Notify(source, message, type, duration)

Send a notification to a specific player.

NotifyAll

exports['gfxr-notify']:NotifyAll(message, type, duration)

Send a notification to all players.

Announce

exports['gfxr-notify']:Announce(source, title, message, duration)

Send an announcement to a specific player.

AnnounceAll

exports['gfxr-notify']:AnnounceAll(title, message, duration)

Send an announcement to all players.

Test Commands

Command	Description
`/testnotify`	Display all 4 notification types
`/testprogress`	Show a 5-second cancellable progress bar
`/testinput`	Show an input dialog with sample fields