.github/workflows/main.yml

@@ -0,0 +1,34 @@
+name: Wails build Windows
+
+on:
+  workflow_dispatch:
+
+env:
+  # Necessary for most environments as build failure can occur due to OOM issues
+  NODE_OPTIONS: "--max-old-space-size=4096"
+
+jobs:
+  build:
+    strategy:
+    # Failure in one platform build won't impact the others
+      fail-fast: false
+      matrix:
+        build:
+          - name: 'rum-goggles'
+            platform:  'windows/amd64'
+            os: 'windows-latest'
+
+    runs-on: ${{ matrix.build.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+
+      - name: Build wails
+        uses: tylertravisty/wails-build-action@v0.1.0
+        id: build
+        with:
+          build-name: ${{ matrix.build.name }}
+          build-platform: ${{ matrix.build.platform }}
+          go-version: '1.20'

.gitignore

@@ -1 +1,8 @@
+build/bin/
+node_modules
+frontend/dist
+frontend/wailsjs
+
 .prettierignore
+
+config.json

NOTES.md

@@ -1,93 +1,5 @@
-# Roadmap
-
-Rum Goggles App:
-
-v1-beta:
-- Chat polls
-- Stream statistics
-
-v1.N:
-- Download subscriber data, track re-subs, trigger rules on re-subs
-- Stream moderator bot
-- OBS integration
-
-Rum Goggles Service:
-- Chat polls
-- Monitor all live stream chats
-- Channel points
-- Spam/Troll tracking
-
-# Bugs
-
-Chat bot rule menu back button does not work in macOS
-
-If connection to chat stream breaks, gracefully handle error
-- try to reconnect
-- let the chat rules know, etc.
-- test with VPN
-
 # Doing
 
-Add bypass to commands for:
-- Host, admin, mod, etc.
-
-Monitor how many handlers are listening to a producer.
-- If producer.Stop is called, subtract from count.
-- If count == 0, stop producer
-
-Change API producer to monitor changes and only send new events, one at a time, to app, instead of the entire response; create datatype for single API event
-- update chatbot and page handlers to use single API events
-- page details should add to activity list one at a time
-    - store page list in Go, send entire list to frontend on updates
-    - list can be updated by any producer
-
-Add timeouts to event triggers to prevent rate limit?
-
-Don't stop rule if chat error is 429 Too Many Requests
-
-Check if sender is logged in before running rule. If not, return rule error.
-
-Add max rant amount for commands
-
-Button to export log file -> user selects folder
-
-Style scroll bars on Windows
-- WebView2 issue
-
-Indicator in chatbot that producer is running
-    - this can be in many different places as needed
-
-Custom stream moderator rules
-- block on keywords
-- block on regex/pattern
-- blocks can be: timed, stream, forever
-
-Next steps:
-- enable/disable rules from starting, including start all/stop all buttons
-- delete page needs to handle new architecture
-    - app.producers.Active(*name) instead of app.producers.ApiP.Active(*name)
-    - app.producers.Stop(*name)
-- activatePage: verify defer page.activeMu.Unlock does not conflict with display function
-- in chatbot list, show indicator if any rules in chatbot are running
-
-For Dashboard page,
-- Api or chat producer could error, need to be able to start/restart both handlers on error
-- Show user error if api or chat stop/error
-
-On API errors
-- include backoff multiple, if exceeded then stop API
-
-Add option to delete API key for accounts?
-
-Add better styles/icon to account details menu
-
-Start screen:
-- check for new updates and tell user
-
-Trigger on event from API vs. trigger on event from chat
-- Chat bot trigger on follow requires API key
-    - Give user warning when setting up trigger on follow that it will only work with accounts/channels for which user has saved an API key
-
 Reset session information in config on logout
 
 Show error when choosing file "chooseFile"
@@ -102,7 +14,7 @@ Update
 - github.com/rhysd/go-github-selfupdate
 - github.com/inconshreveable/go-update
 
-When API key is added, loading indicator freezes all user interactions. Need to give user a graceful way to stop/close add channel if it breaks.
+Create loading indicator before API is called
 
 If api query returns error:
 - stop interval
@@ -121,6 +33,3 @@ User settings:
 - API query timer (default: 2s)
 
 # To Do
-
-Currently relies on Rumble to manage account username case-sensitivity.
-- Change database table to use UNIQUE COLLATE NOCASE on account username

app.go

@@ -0,0 +1,563 @@
+package main
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"log"
+	"os"
+	"path/filepath"
+	"sync"
+	"time"
+
+	"github.com/tylertravisty/rum-goggles/internal/api"
+	"github.com/tylertravisty/rum-goggles/internal/chatbot"
+	"github.com/tylertravisty/rum-goggles/internal/config"
+	rumblelivestreamlib "github.com/tylertravisty/rumble-livestream-lib-go"
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+type chat struct {
+	username string
+	password string
+	url      string
+}
+
+// App struct
+type App struct {
+	ctx      context.Context
+	cfg      *config.App
+	cfgMu    sync.Mutex
+	api      *api.Api
+	apiMu    sync.Mutex
+	cb       *chatbot.ChatBot
+	cbMu     sync.Mutex
+	logError *log.Logger
+	logInfo  *log.Logger
+}
+
+// NewApp creates a new App application struct
+func NewApp() *App {
+	app := &App{}
+	err := app.initLog()
+	if err != nil {
+		log.Fatal("error initializing log:", err)
+	}
+
+	app.api = api.NewApi(app.logError, app.logInfo)
+
+	return app
+}
+
+// startup is called when the app starts. The context is saved
+// so we can call the runtime methods
+func (a *App) startup(ctx context.Context) {
+	a.ctx = ctx
+	a.api.Startup(ctx)
+
+	err := a.loadConfig()
+	if err != nil {
+		a.logError.Fatal("error loading config: ", err)
+	}
+}
+
+func (a *App) initLog() error {
+	f, err := config.LogFile()
+	if err != nil {
+		return fmt.Errorf("error opening log file: %v", err)
+	}
+
+	a.logInfo = log.New(f, "[info]", log.LstdFlags|log.Lshortfile)
+	a.logError = log.New(f, "[error]", log.LstdFlags|log.Lshortfile)
+	return nil
+}
+
+func (a *App) loadConfig() error {
+	cfg, err := config.Load()
+	if err != nil {
+		if !errors.Is(err, os.ErrNotExist) {
+			return fmt.Errorf("error loading config: %v", err)
+		}
+
+		return a.newConfig()
+	}
+
+	a.cfg = cfg
+	return nil
+}
+
+func (a *App) newConfig() error {
+	cfg := &config.App{Channels: map[string]config.Channel{}}
+	err := cfg.Save()
+	if err != nil {
+		return fmt.Errorf("error saving new config: %v", err)
+	}
+
+	a.cfg = cfg
+	return nil
+}
+
+func (a *App) Config() *config.App {
+	return a.cfg
+}
+
+func (a *App) AddChannel(url string) (*config.App, error) {
+	client := rumblelivestreamlib.Client{ApiKey: url}
+	resp, err := client.Request()
+	if err != nil {
+		a.logError.Println("error executing api request:", err)
+		return nil, fmt.Errorf("Error querying API. Verify key and try again.")
+	}
+
+	name := resp.Username
+	if resp.ChannelName != "" {
+		name = resp.ChannelName
+	}
+
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+	_, err = a.cfg.NewChannel(url, name)
+	if err != nil {
+		a.logError.Println("error creating new channel:", err)
+		return nil, fmt.Errorf("Error creating new channel. Try again.")
+	}
+
+	err = a.cfg.Save()
+	if err != nil {
+		a.logError.Println("error saving config:", err)
+		return nil, fmt.Errorf("Error saving channel information. Try again.")
+	}
+
+	return a.cfg, nil
+}
+
+func (a *App) ChatBotMessages(cid string) (map[string]config.ChatMessage, error) {
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+	channel, exists := a.cfg.Channels[cid]
+	if !exists {
+		a.logError.Println("channel does not exist:", cid)
+		return nil, fmt.Errorf("Cannot find channel. Try reloading.")
+	}
+
+	return channel.ChatBot.Messages, nil
+}
+
+func (a *App) AddChatMessage(cid string, cm config.ChatMessage) (map[string]config.ChatMessage, error) {
+	var err error
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+	_, err = a.cfg.NewChatMessage(cid, cm)
+	if err != nil {
+		a.logError.Println("error creating new chat:", err)
+		return nil, fmt.Errorf("Error creating new chat message. Try again.")
+	}
+
+	err = a.cfg.Save()
+	if err != nil {
+		a.logError.Println("error saving config:", err)
+		return nil, fmt.Errorf("Error saving chat message information. Try again.")
+	}
+
+	a.updateChatBotConfig(a.cfg.Channels[cid].ChatBot)
+
+	return a.cfg.Channels[cid].ChatBot.Messages, nil
+}
+
+func (a *App) DeleteChatMessage(cid string, cm config.ChatMessage) (map[string]config.ChatMessage, error) {
+	a.cbMu.Lock()
+	if a.cb != nil {
+		err := a.cb.StopMessage(cm.ID)
+		if err != nil {
+			a.logError.Println("error stopping chat bot message:", err)
+			return nil, fmt.Errorf("Error stopping message. Try Again.")
+		}
+	}
+	a.cbMu.Unlock()
+
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+	err := a.cfg.DeleteChatMessage(cid, cm)
+	if err != nil {
+		a.logError.Println("error deleting chat message:", err)
+		return nil, fmt.Errorf("Error deleting chat message. Try again.")
+	}
+
+	err = a.cfg.Save()
+	if err != nil {
+		a.logError.Println("error saving config:", err)
+		return nil, fmt.Errorf("Error saving chat message information. Try again.")
+	}
+
+	a.updateChatBotConfig(a.cfg.Channels[cid].ChatBot)
+
+	return a.cfg.Channels[cid].ChatBot.Messages, nil
+}
+
+func (a *App) UpdateChatMessage(cid string, cm config.ChatMessage) (map[string]config.ChatMessage, error) {
+	var err error
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+	_, err = a.cfg.UpdateChatMessage(cid, cm)
+	if err != nil {
+		a.logError.Println("error updating chat message:", err)
+		return nil, fmt.Errorf("Error updating chat message. Try again.")
+	}
+
+	err = a.cfg.Save()
+	if err != nil {
+		a.logError.Println("error saving config:", err)
+		return nil, fmt.Errorf("Error saving chat message information. Try again.")
+	}
+
+	a.updateChatBotConfig(a.cfg.Channels[cid].ChatBot)
+
+	return a.cfg.Channels[cid].ChatBot.Messages, nil
+}
+
+type NewChatBotResponse struct {
+	LoggedIn  bool   `json:"logged_in"`
+	StreamUrl string `json:"stream_url"`
+	Username  string `json:"username"`
+}
+
+func (a *App) GetChatBot(cid string) (NewChatBotResponse, error) {
+	if a.cb == nil {
+		return NewChatBotResponse{}, fmt.Errorf("Chat bot not initalized.")
+	}
+
+	loggedIn, err := a.cb.LoggedIn()
+	if err != nil {
+		a.logError.Println("error checking if chat bot is logged in:", err)
+		return NewChatBotResponse{}, fmt.Errorf("Error checking if chat bot is logged in. Try again.")
+	}
+
+	return NewChatBotResponse{loggedIn, a.cb.Cfg.Session.Client.LiveStreamUrl, a.cb.Cfg.Session.Username}, nil
+}
+
+func (a *App) NewChatBot(cid string) (NewChatBotResponse, error) {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+
+	if a.cb != nil {
+		err := a.resetChatBot()
+		if err != nil {
+			a.logError.Println("error resetting chat bot:", err)
+			return NewChatBotResponse{}, fmt.Errorf("Error creating chat bot. Try Again.")
+		}
+	}
+	channel, exists := a.cfg.Channels[cid]
+	if !exists {
+		a.logError.Println("channel does not exist:", cid)
+		return NewChatBotResponse{}, fmt.Errorf("Channel does not exist.")
+	}
+
+	if channel.ChatBot.Session.Client.LiveStreamUrl == "" {
+		return NewChatBotResponse{}, nil
+	}
+
+	var err error
+	a.cb, err = chatbot.NewChatBot(a.ctx, channel.ChatBot, a.logError)
+	if err != nil {
+		a.logError.Println("error creating new chat bot:", err)
+		return NewChatBotResponse{}, fmt.Errorf("Error creating new chat bot. Try again.")
+	}
+
+	loggedIn, err := a.cb.LoggedIn()
+	if err != nil {
+		a.logError.Println("error checking if chat bot is logged in:", err)
+		return NewChatBotResponse{}, fmt.Errorf("Error checking if chat bot is logged in. Try again.")
+	}
+
+	if loggedIn {
+		err = a.cb.StartChatStream()
+		if err != nil {
+			a.logError.Println("error starting chat stream:", err)
+			return NewChatBotResponse{}, fmt.Errorf("Error connecting to chat. Try again.")
+		}
+	}
+
+	return NewChatBotResponse{loggedIn, channel.ChatBot.Session.Client.LiveStreamUrl, channel.ChatBot.Session.Username}, nil
+}
+
+func (a *App) LoginChatBot(cid string, username string, password string, streamUrl string) error {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+
+	if a.cb != nil {
+		err := a.resetChatBot()
+		if err != nil {
+			a.logError.Println("error resetting chat bot:", err)
+			return fmt.Errorf("Error creating chat bot. Try Again.")
+		}
+	}
+	channel, exists := a.cfg.Channels[cid]
+	if !exists {
+		a.logError.Println("channel does not exist:", cid)
+		return fmt.Errorf("Channel does not exist.")
+	}
+	channel.ChatBot.Session.Client.LiveStreamUrl = streamUrl
+
+	var err error
+	a.cb, err = chatbot.NewChatBot(a.ctx, channel.ChatBot, a.logError)
+	if err != nil {
+		a.logError.Println("error creating new chat bot:", err)
+		return fmt.Errorf("Error creating new chat bot. Try again.")
+	}
+
+	cookies, err := a.cb.Login(username, password)
+	if err != nil {
+		a.logError.Println("error logging into chat bot:", err)
+		return fmt.Errorf("Error logging in. Try again.")
+	}
+
+	channel.ChatBot.Session = config.ChatBotSession{
+		Client: rumblelivestreamlib.NewClientOptions{
+			Cookies:       cookies,
+			LiveStreamUrl: streamUrl,
+		},
+		Username: username,
+	}
+	a.cfg.Channels[cid] = channel
+	err = a.cfg.Save()
+	if err != nil {
+		a.logError.Println("error saving config:", err)
+		return fmt.Errorf("Error saving session information. Try again.")
+	}
+
+	a.cb.Cfg.Session = channel.ChatBot.Session
+
+	err = a.cb.StartChatStream()
+	if err != nil {
+		a.logError.Println("error starting chat stream:", err)
+		return fmt.Errorf("Error connecting to chat. Try again.")
+	}
+
+	return nil
+}
+
+func (a *App) StopAllChatBot(cid string) error {
+	if a.cb == nil {
+		return fmt.Errorf("Chat bot not initialized.")
+	}
+
+	err := a.cb.StopAllMessages()
+	if err != nil {
+		a.logError.Println("error stopping all chat bot messages:", err)
+		return fmt.Errorf("Error stopping messages.")
+	}
+
+	return nil
+}
+
+func (a *App) StartAllChatBot(cid string) error {
+	if a.cb == nil {
+		return fmt.Errorf("Chat bot not initialized.")
+	}
+
+	err := a.cb.StartAllMessages()
+	if err != nil {
+		a.logError.Println("error starting all chat bot messages:", err)
+		return fmt.Errorf("Error starting messages.")
+	}
+
+	return nil
+}
+
+func (a *App) UpdateChatBotUrl(cid string, streamUrl string) error {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+
+	if a.cb == nil {
+		return fmt.Errorf("Chat bot not initialized.")
+	}
+
+	err := a.resetChatBot()
+	if err != nil {
+		a.logError.Println("error resetting chat bot:", err)
+		return fmt.Errorf("Error creating chat bot. Try Again.")
+	}
+
+	channel, exists := a.cfg.Channels[cid]
+	if !exists {
+		a.logError.Println("channel does not exist:", cid)
+		return fmt.Errorf("Channel does not exist.")
+	}
+	channel.ChatBot.Session.Client.LiveStreamUrl = streamUrl
+
+	a.cb, err = chatbot.NewChatBot(a.ctx, channel.ChatBot, a.logError)
+	if err != nil {
+		a.logError.Println("error creating new chat bot:", err)
+		return fmt.Errorf("Error creating new chat bot. Try again.")
+	}
+
+	a.cfg.Channels[cid] = channel
+	err = a.cfg.Save()
+	if err != nil {
+		a.logError.Println("error saving config:", err)
+		return fmt.Errorf("Error saving session information. Try again.")
+	}
+
+	a.cb.Cfg.Session.Client.LiveStreamUrl = streamUrl
+
+	err = a.cb.StartChatStream()
+	if err != nil {
+		a.logError.Println("error starting chat stream:", err)
+		return fmt.Errorf("Error connecting to chat. Try again.")
+	}
+
+	return nil
+}
+
+func (a *App) ResetChatBot(cid string, logout bool) error {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+	a.cfgMu.Lock()
+	defer a.cfgMu.Unlock()
+
+	if a.cb == nil {
+		return nil
+	}
+
+	err := a.cb.StopAllMessages()
+	if err != nil {
+		return fmt.Errorf("error stopping all chat bot messages: %v", err)
+	}
+
+	if logout {
+		err := a.cb.Logout()
+		if err != nil {
+			return fmt.Errorf("error logging out of chat bot: %v", err)
+		}
+
+		//TODO: reset session in config
+		channel, exists := a.cfg.Channels[cid]
+		if !exists {
+			a.logError.Println("channel does not exist:", cid)
+			return fmt.Errorf("Channel does not exist.")
+		}
+
+		channel.ChatBot.Session = config.ChatBotSession{}
+		a.cfg.Channels[cid] = channel
+		err = a.cfg.Save()
+		if err != nil {
+			a.logError.Println("error saving config:", err)
+			return fmt.Errorf("Error saving session information. Try again.")
+		}
+	}
+
+	err = a.resetChatBot()
+	if err != nil {
+		a.logError.Println("error resetting chat bot:", err)
+		return fmt.Errorf("Error resetting chat bot. Try Again.")
+	}
+
+	return nil
+}
+
+func (a *App) resetChatBot() error {
+	if a.cb == nil {
+		// return fmt.Errorf("chat bot is nil")
+		return nil
+	}
+
+	err := a.cb.StopAllMessages()
+	if err != nil {
+		return fmt.Errorf("error stopping all chat bot messages: %v", err)
+	}
+
+	err = a.cb.StopChatStream()
+	if err != nil {
+		return fmt.Errorf("error stopping chat stream: %v", err)
+	}
+
+	a.cb = nil
+
+	return nil
+}
+
+func (a *App) StartChatBotMessage(mid string) error {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+
+	if a.cb == nil {
+		return fmt.Errorf("Chat bot not initialized.")
+	}
+
+	err := a.cb.StartMessage(mid)
+	if err != nil {
+		a.logError.Println("error starting chat bot message:", err)
+		return fmt.Errorf("Error starting message. Try Again.")
+	}
+
+	return nil
+}
+
+func (a *App) StopChatBotMessage(mid string) error {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+
+	// If chat bot not initialized, then stop does nothing
+	if a.cb == nil {
+		return nil
+	}
+
+	err := a.cb.StopMessage(mid)
+	if err != nil {
+		a.logError.Println("error stopping chat bot message:", err)
+		return fmt.Errorf("Error stopping message. Try Again.")
+	}
+
+	return nil
+}
+
+func (a *App) StartApi(cid string) error {
+	channel, found := a.cfg.Channels[cid]
+	if !found {
+		a.logError.Println("could not find channel CID:", cid)
+		return fmt.Errorf("channel CID not found")
+	}
+
+	err := a.api.Start(channel.ApiUrl, channel.Interval*time.Second)
+	if err != nil {
+		a.logError.Println("error starting api:", err)
+		return fmt.Errorf("error starting API")
+	}
+
+	return nil
+}
+
+func (a *App) StopApi() {
+	a.api.Stop()
+}
+
+func (a *App) updateChatBotConfig(cfg config.ChatBot) {
+	a.cbMu.Lock()
+	defer a.cbMu.Unlock()
+	if a.cb != nil {
+		a.cb.Cfg = cfg
+	}
+}
+
+func (a *App) OpenFileDialog() (string, error) {
+	home, err := os.UserHomeDir()
+	if err != nil {
+		a.logError.Println("error getting home directory:", err)
+		return "", fmt.Errorf("Error opening file explorer. Try again.")
+	}
+	filepath, err := runtime.OpenFileDialog(a.ctx, runtime.OpenDialogOptions{DefaultDirectory: home})
+	if err != nil {
+		a.logError.Println("error opening file dialog:", err)
+		return "", fmt.Errorf("Error opening file explorer. Try again.")
+	}
+
+	return filepath, err
+}
+
+func (a *App) FilepathBase(path string) string {
+	return filepath.Base(path)
+}

frontend/package-lock.json

@@ -54,9 +54,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz",
+      "integrity": "sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -64,11 +64,11 @@
         "@babel/generator": "^7.23.6",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/helpers": "^7.23.6",
+        "@babel/parser": "^7.23.6",
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.6",
+        "@babel/types": "^7.23.6",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -252,14 +252,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
-      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.6.tgz",
+      "integrity": "sha512-wCfsbN4nBidDRhpDhvcKlzHWCTlgJYUUdSJfzXb2NuBssDSIjc3xcb+znA7l+zYsFljAcGM0aFkN40cR3lXiGA==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.6",
+        "@babel/types": "^7.23.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -280,9 +280,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
-      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -371,23 +371,23 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
-      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
-      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz",
+      "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
@@ -396,8 +396,8 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/parser": "^7.23.6",
+        "@babel/types": "^7.23.6",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -406,9 +406,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
+      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
@@ -466,9 +466,9 @@
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
@@ -490,9 +490,9 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.22",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
-      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -506,9 +506,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.58",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.58.tgz",
-      "integrity": "sha512-TaGvMNhxvG2Q0K0aYxiKfNDS5m5ZsoIBBbtfUorxdH4NGSXIlYvZxLJI+9Dd3KjeB3780bciLyAb7ylO8pLhPw==",
+      "version": "18.2.45",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.45.tgz",
+      "integrity": "sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -517,9 +517,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
+      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -565,9 +565,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.22.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
       "dev": true,
       "funding": [
         {
@@ -584,8 +584,8 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
+        "caniuse-lite": "^1.0.30001565",
+        "electron-to-chromium": "^1.4.601",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
@@ -597,9 +597,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001589",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001589.tgz",
-      "integrity": "sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==",
+      "version": "1.0.30001570",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz",
+      "integrity": "sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==",
       "dev": true,
       "funding": [
         {
@@ -675,9 +675,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.680",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.680.tgz",
-      "integrity": "sha512-4nToZ5jlPO14W82NkF32wyjhYqQByVaDmLy4J2/tYcAbJfgO2TKJC780Az1V13gzq4l73CJ0yuyalpXvxXXD9A==",
+      "version": "1.4.611",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.611.tgz",
+      "integrity": "sha512-ZtRpDxrjHapOwxtv+nuth5ByB8clyn8crVynmRNGO3wG3LOp8RTcyZDqwaI6Ng6y8FCK2hVZmJoqwCskKbNMaw==",
       "dev": true
     },
     "node_modules/esbuild": {
@@ -1038,9 +1038,9 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -1106,9 +1106,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -1233,9 +1233,9 @@
       "dev": true
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
       "funding": [
         {
@@ -1421,9 +1421,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.8.tgz",
-      "integrity": "sha512-EtQU16PLIJpAZol2cTLttNP1mX6L0SyI0pgQB1VOoWeQnMSvtiwovV3D6NcjN8CZQWWyESD2v5NGnpz5RvgOZA==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
+      "integrity": "sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.15.9",
@@ -1504,9 +1504,9 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz",
+      "integrity": "sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
@@ -1514,11 +1514,11 @@
         "@babel/generator": "^7.23.6",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/helpers": "^7.23.6",
+        "@babel/parser": "^7.23.6",
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.6",
+        "@babel/types": "^7.23.6",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -1650,14 +1650,14 @@
       "dev": true
     },
     "@babel/helpers": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
-      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.6.tgz",
+      "integrity": "sha512-wCfsbN4nBidDRhpDhvcKlzHWCTlgJYUUdSJfzXb2NuBssDSIjc3xcb+znA7l+zYsFljAcGM0aFkN40cR3lXiGA==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.6",
+        "@babel/types": "^7.23.6"
       }
     },
     "@babel/highlight": {
@@ -1672,9 +1672,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
-      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
       "dev": true
     },
     "@babel/plugin-syntax-jsx": {
@@ -1727,20 +1727,20 @@
       }
     },
     "@babel/template": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
-      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
       }
     },
     "@babel/traverse": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
-      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.6.tgz",
+      "integrity": "sha512-czastdK1e8YByZqezMPFiZ8ahwVMh/ESl9vPgvgdB9AmFMGP5jfpFax74AQgl5zj4XHzqeYAg2l8PuUeRS1MgQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.23.5",
@@ -1749,16 +1749,16 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/parser": "^7.23.6",
+        "@babel/types": "^7.23.6",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
+      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
       "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.23.4",
@@ -1792,9 +1792,9 @@
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
       "dev": true
     },
     "@jridgewell/set-array": {
@@ -1810,9 +1810,9 @@
       "dev": true
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.22",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
-      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
       "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1826,9 +1826,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "18.2.58",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.58.tgz",
-      "integrity": "sha512-TaGvMNhxvG2Q0K0aYxiKfNDS5m5ZsoIBBbtfUorxdH4NGSXIlYvZxLJI+9Dd3KjeB3780bciLyAb7ylO8pLhPw==",
+      "version": "18.2.45",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.45.tgz",
+      "integrity": "sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -1837,9 +1837,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
+      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
       "dev": true,
       "requires": {
         "@types/react": "*"
@@ -1876,21 +1876,21 @@
       }
     },
     "browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.22.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
+        "caniuse-lite": "^1.0.30001565",
+        "electron-to-chromium": "^1.4.601",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001589",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001589.tgz",
-      "integrity": "sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==",
+      "version": "1.0.30001570",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz",
+      "integrity": "sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==",
       "dev": true
     },
     "chalk": {
@@ -1941,9 +1941,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.680",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.680.tgz",
-      "integrity": "sha512-4nToZ5jlPO14W82NkF32wyjhYqQByVaDmLy4J2/tYcAbJfgO2TKJC780Az1V13gzq4l73CJ0yuyalpXvxXXD9A==",
+      "version": "1.4.611",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.611.tgz",
+      "integrity": "sha512-ZtRpDxrjHapOwxtv+nuth5ByB8clyn8crVynmRNGO3wG3LOp8RTcyZDqwaI6Ng6y8FCK2hVZmJoqwCskKbNMaw==",
       "dev": true
     },
     "esbuild": {
@@ -2117,9 +2117,9 @@
       "optional": true
     },
     "escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
       "dev": true
     },
     "escape-string-regexp": {
@@ -2160,9 +2160,9 @@
       "dev": true
     },
     "hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
       "dev": true,
       "requires": {
         "function-bind": "^1.1.2"
@@ -2251,9 +2251,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.7",
@@ -2362,9 +2362,9 @@
       }
     },
     "vite": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.8.tgz",
-      "integrity": "sha512-EtQU16PLIJpAZol2cTLttNP1mX6L0SyI0pgQB1VOoWeQnMSvtiwovV3D6NcjN8CZQWWyESD2v5NGnpz5RvgOZA==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
+      "integrity": "sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==",
       "dev": true,
       "requires": {
         "esbuild": "^0.15.9",

frontend/src/App.css

@@ -1,3 +1,3 @@
-#app {
+#App {
     height: 100vh;
 }

frontend/src/App.jsx

@@ -1,18 +1,18 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { MemoryRouter as Router, Route, Routes, Link } from 'react-router-dom';
+
 import './App.css';
-import { NavDashboard, NavSignIn, NavStartup } from './Navigation';
+
+import { NavSignIn, NavDashboard } from './screens/Navigation';
 import Dashboard from './screens/Dashboard';
 import SignIn from './screens/SignIn';
-import Startup from './screens/Startup';
 
 function App() {
     return (
         <Router>
             <Routes>
-                <Route path={NavStartup} element={<Startup />} />
-                <Route path={NavSignIn} element={<SignIn />} />
-                <Route path={NavDashboard} element={<Dashboard />} />
+                <Route path={NavSignIn} element={<SignIn />}></Route>
+                <Route path={NavDashboard} element={<Dashboard />}></Route>
             </Routes>
         </Router>
     );

frontend/src/assets/icons/index.jsx

@@ -0,0 +1,31 @@
+import eye from './eye.png';
+import eye_slash from './eye-slash.png';
+import gear from './gear.png';
+import gear_fill from './gear-fill.png';
+import heart from './heart-fill.png';
+import house from './house.png';
+import pause from './pause-fill.png';
+import play from './play-fill.png';
+import play_green from './play-fill-green.png';
+import plus_circle from './plus-circle-fill.png';
+import star from './star-fill.png';
+import stop from './stop-fill.png';
+import thumbs_down from './hand-thumbs-down.png';
+import thumbs_up from './hand-thumbs-up.png';
+import x_lg from './x-lg.png';
+
+export const Eye = eye;
+export const EyeSlash = eye_slash;
+export const Gear = gear;
+export const GearFill = gear_fill;
+export const Heart = heart;
+export const House = house;
+export const Pause = pause;
+export const Play = play;
+export const PlayGreen = play_green;
+export const PlusCircle = plus_circle;
+export const Star = star;
+export const Stop = stop;
+export const ThumbsDown = thumbs_down;
+export const ThumbsUp = thumbs_up;
+export const XLg = x_lg;

frontend/src/components/ChannelList.css

@@ -0,0 +1,66 @@
+.channel-list {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+}
+
+.channel-list-title {
+    color: #85c742;
+    font-family: sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    padding: 5px;
+}
+
+.channels {
+    background-color: white;
+    border: 1px solid #D6E0EA;
+    border-radius: 5px;
+    height: 100%;
+    overflow: auto;
+    width: 100%;
+}
+
+.channel {
+    align-items: center;
+    /* border-top: 1px solid #D6E0EA; */
+    display: flex;
+}
+
+.channel-add {
+    background-color: #f3f5f8;
+    border: none;
+    padding: 10px;
+}
+
+.channel-add:hover {
+    cursor: pointer;
+}
+
+.channel-add-icon {
+    height: 36px;
+    width: 36px;
+}
+
+.channel-button {
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    color: #061726;
+    font-family: sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    overflow: hidden;
+    padding: 10px 10px;
+    text-align: left;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.channel-button:hover {
+    background-color: #85c742;
+    cursor: pointer;
+}

frontend/src/components/ChannelList.jsx

@@ -0,0 +1,39 @@
+import { PlusCircle } from '../assets/icons';
+import './ChannelList.css';
+
+function ChannelList(props) {
+    const sortChannelsAlpha = () => {
+        let keys = Object.keys(props.channels);
+        // let sorted = [...props.channels].sort((a, b) =>
+        //     a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
+        // );
+
+        let sorted = [...keys].sort((a, b) =>
+            props.channels[a].name.toLowerCase() > props.channels[b].name.toLowerCase() ? 1 : -1
+        );
+        return sorted;
+    };
+
+    return (
+        <div className='channel-list'>
+            <span className='channel-list-title'>Channels</span>
+            <div className='channels'>
+                {sortChannelsAlpha().map((channel, index) => (
+                    <div className='channel' style={index === 0 ? { borderTop: 'none' } : {}}>
+                        <button
+                            className='channel-button'
+                            onClick={() => props.openStreamDashboard(props.channels[channel].id)}
+                        >
+                            {props.channels[channel].name}
+                        </button>
+                    </div>
+                ))}
+            </div>
+            {/* <button className='channel-add'>
+                <img className='channel-add-icon' src={PlusCircle} />
+            </button> */}
+        </div>
+    );
+}
+
+export default ChannelList;

frontend/src/components/ChatBot.css

@@ -0,0 +1,64 @@
+.chat-bot-error {
+  border: 1px solid red;
+  box-sizing: border-box;
+  color: red;
+  font-family: monospace;
+  font-size: 16px;
+  padding: 5px;
+  text-align: center;
+  width: 100%;
+}
+
+.chat-bot-modal {
+    align-items: left;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+}
+
+.chat-bot-setting {
+    align-items: start;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10px;
+    width: 100%;
+}
+
+.chat-bot-setting-label {
+    color: white;
+    font-family: sans-serif;
+    font-size: 20px;
+    padding-bottom: 5px;
+    width: 100%;
+}
+
+.chat-bot-setting-input {
+    border: none;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 16px;
+    outline: none;
+    padding: 10px;
+    resize: none;
+    width: 100%;
+}
+
+.chat-bot-description {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    padding-top: 10px;
+    width: 100%;
+}
+
+.chat-bot-description-label {
+    color: white;
+    font-family: sans-serif;
+    font-size: 20px;
+    padding-bottom: 5px;
+    padding-right: 5px;
+}

frontend/src/components/ChatBot.jsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import { Modal, SmallModal } from './Modal';
+import { LoginChatBot, UpdateChatBotUrl } from '../../wailsjs/go/main/App';
+
+import './ChatBot.css';
+
+export function ChatBotModal(props) {
+    const [error, setError] = useState('');
+    const [loggedIn, setLoggedIn] = useState(props.loggedIn);
+    const [password, setPassword] = useState('');
+    const [saving, setSaving] = useState(false);
+    const updatePassword = (event) => setPassword(event.target.value);
+    const [url, setUrl] = useState(props.streamUrl);
+    const updateUrl = (event) => setUrl(event.target.value);
+    const [username, setUsername] = useState(props.username);
+    const updateUsername = (event) => setUsername(event.target.value);
+
+    useEffect(() => {
+        if (saving) {
+            // let user = username;
+            // let p = password;
+            // let u = url;
+            // props.onSubmit(user, p, u);
+            // NewChatBot(props.cid, username, password, url)
+            if (loggedIn) {
+                UpdateChatBotUrl(props.cid, url)
+                    .then(() => {
+                        reset();
+                        props.onUpdate(url);
+                    })
+                    .catch((error) => {
+                        setSaving(false);
+                        setError(error);
+                        console.log('Error updating chat bot:', error);
+                    });
+            } else {
+                LoginChatBot(props.cid, username, password, url)
+                    .then(() => {
+                        reset();
+                        props.onLogin();
+                    })
+                    .catch((error) => {
+                        setSaving(false);
+                        setError(error);
+                        console.log('Error creating new chat bot:', error);
+                    });
+            }
+        }
+    }, [saving]);
+
+    const reset = () => {
+        setError('');
+        setLoggedIn(false);
+        setPassword('');
+        setSaving(false);
+        setUrl('');
+        setUsername('');
+    };
+
+    const close = () => {
+        reset();
+        props.onClose();
+    };
+
+    const logout = () => {
+        reset();
+        props.onLogout();
+    };
+
+    const submit = () => {
+        if (username === '') {
+            setError('Add username');
+            return;
+        }
+
+        if (password === '' && !loggedIn) {
+            setError('Add password');
+            return;
+        }
+
+        if (url === '') {
+            setError('Add stream URL');
+            return;
+        }
+
+        setSaving(true);
+        // let user = username;
+        // let p = password;
+        // let u = url;
+        // reset();
+        // props.onSubmit(user, p, u);
+    };
+
+    return (
+        <>
+            <Modal
+                onClose={close}
+                show={props.show}
+                style={{ minWidth: '300px', maxWidth: '400px' }}
+                cancelButton={loggedIn ? '' : 'Cancel'}
+                onCancel={close}
+                deleteButton={loggedIn ? 'Logout' : ''}
+                onDelete={logout}
+                submitButton={saving ? 'Saving' : 'Save'}
+                onSubmit={
+                    saving
+                        ? () => {
+                              console.log('Saving');
+                          }
+                        : submit
+                }
+                title={'Chat Bot'}
+            >
+                <div className='chat-bot-modal'>
+                    {loggedIn ? (
+                        <div className='chat-bot-description'>
+                            <span className='chat-bot-description-label'>Logged in:</span>
+                            <span
+                                className='chat-bot-description-label'
+                                style={{ fontWeight: 'bold' }}
+                            >
+                                {username}
+                            </span>
+                        </div>
+                    ) : (
+                        <div className='chat-bot-setting'>
+                            <span className='chat-bot-setting-label'>Username</span>
+                            <input
+                                className='chat-bot-setting-input'
+                                onChange={updateUsername}
+                                placeholder='Username'
+                                type='text'
+                                value={username}
+                            />
+                        </div>
+                    )}
+                    {!loggedIn && (
+                        <div className='chat-bot-setting'>
+                            <span className='chat-bot-setting-label'>Password</span>
+                            <input
+                                className='chat-bot-setting-input'
+                                onChange={updatePassword}
+                                placeholder='Password'
+                                type='password'
+                                value={password}
+                            />
+                        </div>
+                    )}
+                    <div className='chat-bot-setting'>
+                        <span className='chat-bot-setting-label'>Stream URL</span>
+                        <input
+                            className='chat-bot-setting-input'
+                            onChange={updateUrl}
+                            placeholder='https://'
+                            type='text'
+                            value={url}
+                        />
+                    </div>
+                </div>
+            </Modal>
+            <SmallModal
+                onClose={() => setError('')}
+                show={error !== ''}
+                style={{ minWidth: '300px', maxWidth: '300px', maxHeight: '100px' }}
+                title={'Error'}
+                message={error}
+                submitButton={'OK'}
+                onSubmit={() => setError('')}
+            />
+        </>
+    );
+}
+
+export function StreamChatMessageItem() {}

frontend/src/components/ChatMessage.css

@@ -0,0 +1,44 @@
+.chat-message {
+    align-items: start;
+    background-color: rgba(6,23,38,1);
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.chat-message-user-image {
+    border-radius: 50%;
+    height: 22px;
+    margin-right: 8px;
+    width: 22px;
+}
+
+.chat-message-user-initial {
+    align-items: center;
+    background-color: #37c;
+    border: 1px solid #eee;
+    border-radius: 50%;
+    color: #eee;
+    display: flex;
+    font-family: sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    height: 22px;
+    justify-content: center;
+    margin-right: 8px;
+    width: 22px;
+}
+
+.chat-message-username {
+    color: white;
+    font-family: sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 3px;
+}
+
+.chat-message-text {
+    color: white;
+    font-family: sans-serif;
+    font-size: 14px;
+}

frontend/src/components/ChatMessage.jsx

@@ -0,0 +1,28 @@
+import './ChatMessage.css';
+
+function ChatMessage(props) {
+    const upperInitial = () => {
+        return props.message.username[0].toUpperCase();
+    };
+
+    return (
+        <div className='chat-message'>
+            {props.message.image === '' || props.message.image === undefined ? (
+                <span className='chat-message-user-initial'>{upperInitial()}</span>
+            ) : (
+                <img className='chat-message-user-image' src={props.message.image} />
+            )}
+            <div>
+                <span
+                    className='chat-message-username'
+                    style={props.message.color && { color: props.message.color }}
+                >
+                    {props.message.username}
+                </span>
+                <span className='chat-message-text'>{props.message.text}</span>
+            </div>
+        </div>
+    );
+}
+
+export default ChatMessage;

frontend/src/components/Highlight.css

@@ -0,0 +1,24 @@
+.highlight {
+    align-items: start;
+    color: white;
+    display: flex;
+    background-color: #75a54b;
+    border-radius: 0.5rem;
+    flex-direction: column;
+    font-family: sans-serif;
+    font-weight: bold;
+    height: 40px;
+    justify-content: center;
+    min-width: 90px;
+    padding: 5px 10px;
+    width: 75px;
+}
+
+.highlight-value {
+    font-family: monospace;
+    font-size: 20px;
+}
+
+.highlight-description {
+    font-size: 12px;
+}

frontend/src/components/Highlight.jsx

@@ -0,0 +1,72 @@
+import './Highlight.css';
+
+function Highlight(props) {
+    const countString = () => {
+        switch (true) {
+            case props.value <= 0:
+                return '-';
+            case props.value < 1000:
+                return props.value;
+            case props.value < 1000000:
+                return (props.value / 1000).toFixed(3).slice(0, -2) + 'K';
+            case props.value < 1000000000:
+                return (props.value / 1000000).toFixed(6).slice(0, -5) + 'M';
+            default:
+                return 'Inf';
+        }
+    };
+
+    const stopwatchString = () => {
+        if (isNaN(Date.parse(props.value))) {
+            return '--:--';
+        }
+        let now = new Date();
+        let date = new Date(props.value);
+        let diff = now - date;
+
+        let msMinute = 1000 * 60;
+        let msHour = msMinute * 60;
+        let msDay = msHour * 24;
+
+        let days = Math.floor(diff / msDay);
+        let hours = Math.floor((diff - days * msDay) / msHour);
+        let minutes = Math.floor((diff - days * msDay - hours * msHour) / msMinute);
+
+        if (diff >= 100 * msDay) {
+            return days + 'd';
+        }
+        if (diff >= msDay) {
+            return days + 'd ' + hours + 'h';
+        }
+
+        if (hours < 10) {
+            hours = '0' + hours;
+        }
+
+        if (minutes < 10) {
+            minutes = '0' + minutes;
+        }
+
+        return hours + ':' + minutes;
+    };
+
+    const valueString = () => {
+        switch (props.type) {
+            case 'count':
+                return countString();
+            case 'stopwatch':
+                return stopwatchString();
+            default:
+                return props.value;
+        }
+    };
+
+    return (
+        <div className='highlight'>
+            <span className='highlight-value'>{valueString()}</span>
+            <span className='highlight-description'>{props.description}</span>
+        </div>
+    );
+}
+
+export default Highlight;

frontend/src/components/Modal.css

@@ -1,8 +1,7 @@
 
 .modal-background {
     align-items: center;
-    /* background-color: transparent; */
-    background-color: rgba(0,0,0,0.8);
+    background-color: transparent;
     display: flex;
     height: 100vh;
     justify-content: center;
@@ -30,51 +29,33 @@
     font-weight: bold;
     text-decoration: none;
     /* width: 20%; */
-    height: 40px;
-    min-width: 70px;
+    width: 70px;
 }
 
 .modal-button-cancel {
     background-color: transparent;
     border: 1px solid #495a6a;
     border-radius: 5px;
-    /* color: #495a6a; */
-    color: white;
+    color: #495a6a;
     cursor: pointer;
     font-size: 18px;
     font-weight: bold;
     text-decoration: none;
     /* width: 20%; */
-    height: 40px;
-    min-width: 70px;
+    width: 70px;
 }
 
 .modal-button-delete {
     background-color: transparent;
-    background-color: #f23160;
-    border: 1px solid #f23160;
+    border: 1px solid red;
     border-radius: 5px;
-    color: #eee;
+    color: red;
     cursor: pointer;
     font-size: 18px;
     font-weight: bold;
     text-decoration: none;
-    height: 40px;
-    min-width: 70px;
-}
-
-.modal-button-delete-inactive {
-    background-color: transparent;
-    background-color: #d6e0ea80;
-    border: 1px solid #d6e0ea80;
-    border-radius: 5px;
-    color: #eee;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: bold;
-    text-decoration: none;
-    height: 40px;
-    min-width: 70px;
+    /* width: 20%; */
+    width: 70px;
 }
 
 .modal-close {
@@ -98,8 +79,8 @@
 
 .modal-container {
     align-items: center;
-    background-color: #1f2e3c;
-    /* border: 1px solid #495a6a; */
+    background-color: rgba(6,23,38,1);
+    border: 1px solid #495a6a;
     border-radius: 15px;
     color: black;
     display: flex;
@@ -135,20 +116,6 @@
     font-size: 24px;
 }
 
-.small-modal-button-cancel {
-    background-color: transparent;
-    border: 1px solid #495a6a;
-    border-radius: 5px;
-    color: #495a6a;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: bold;
-    text-decoration: none;
-    /* width: 20%; */
-    height: 40px;
-    min-width: 70px;
-}
-
 .small-modal-button-delete {
     background-color: red;
     border: none;
@@ -159,14 +126,14 @@
     font-weight: bold;
     text-decoration: none;
     /* width: 20%; */
-    min-width: 70px;
+    width: 70px;
 }
 
 .small-modal-container {
     align-items: center;
     /* background-color: rgba(6,23,38,1); */
     background-color: white;
-    /* border: 1px solid #495a6a; */
+    border: 1px solid #495a6a;
     /* border: 1px solid black; */
     border-radius: 15px;
     color: black;
@@ -200,7 +167,6 @@
 .small-modal-message {
     font-family: sans-serif;
     font-size: 18px;
-    overflow-x: scroll;
 }
 
 .small-modal-title {

frontend/src/components/Modal.jsx

@@ -1,12 +1,12 @@
-import { XLg } from '../assets';
+import { XLg } from '../assets/icons';
 import './Modal.css';
 
 export function Modal(props) {
     return (
         <div
             className='modal-background'
-            onClick={props.backgroundClose && props.onClose}
-            style={{ zIndex: props.show ? 8 : -8 }}
+            onClick={props.onClose}
+            style={{ zIndex: props.show ? 10 : -10 }}
         >
             <div
                 className='modal-container'
@@ -27,25 +27,13 @@ export function Modal(props) {
                         </button>
                     )}
                     {props.deleteButton && (
-                        <button
-                            className={
-                                props.deleteActive
-                                    ? 'modal-button-delete'
-                                    : 'modal-button-delete-inactive'
-                            }
-                            onClick={props.onDelete}
-                        >
+                        <button className='modal-button-delete' onClick={props.onDelete}>
                             {props.deleteButton}
                         </button>
                     )}
                     {props.submitButton && (
                         <button className='modal-button' onClick={props.onSubmit}>
-                            {/* {props.submitButton} */}
-                            {props.submitLoading ? (
-                                <div className='loader'></div>
-                            ) : (
-                                props.submitButton
-                            )}
+                            {props.submitButton}
                         </button>
                     )}
                 </div>
@@ -77,7 +65,7 @@ export function SmallModal(props) {
                 </div>
                 <div className='small-modal-footer'>
                     {props.cancelButton && (
-                        <button className='small-modal-button-cancel' onClick={props.onCancel}>
+                        <button className='modal-button-cancel' onClick={props.onCancel}>
                             {props.cancelButton}
                         </button>
                     )}

frontend/src/components/StreamActivity.css

@@ -0,0 +1,24 @@
+.stream-activity {
+    width: 100%;
+    height: 100%;
+}
+
+.stream-activity-header {
+    text-align: left;
+    background-color: rgba(6,23,38,1);
+    border-bottom: 1px solid #495a6a;
+    height: 19px;
+    padding: 10px 20px;
+}
+
+.stream-activity-title {
+    color: white;
+    font-family: sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.stream-activity-list {
+    overflow-y: auto;
+    height: calc(100vh - 84px - 40px - 179px);
+}

frontend/src/components/StreamActivity.jsx

@@ -0,0 +1,20 @@
+import StreamEvent from './StreamEvent';
+
+import './StreamActivity.css';
+
+function StreamActivity(props) {
+    return (
+        <div className='stream-activity'>
+            <div className='stream-activity-header'>
+                <span className='stream-activity-title'>{props.title}</span>
+            </div>
+            <div className='stream-activity-list'>
+                {props.events.map((event, index) => (
+                    <StreamEvent event={event} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default StreamActivity;

frontend/src/components/StreamChat.css

@@ -0,0 +1,28 @@
+.stream-chat {
+    width: 100%;
+    height: 100%;
+}
+
+.stream-chat-header {
+    align-items: center;
+    background-color: rgba(6,23,38,1);
+    border-bottom: 1px solid #495a6a;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 19px;
+    padding: 10px 20px;
+    text-align: left;
+}
+
+.stream-chat-list {
+    overflow-y: auto;
+    height: calc(100vh - 84px - 40px - 179px);
+}
+
+.stream-chat-title {
+    color: white;
+    font-family: sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+}

frontend/src/components/StreamChat.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { EventsOn } from '../../wailsjs/runtime/runtime';
+import ChatMessage from './ChatMessage';
+import './StreamChat.css';
+
+function StreamChat(props) {
+    const [messages, setMessages] = useState([
+        {
+            color: '#ec131f',
+            image: 'https://ak2.rmbl.ws/z0/V/m/v/E/VmvEe.asF.4-18osof-s35kf7.jpeg',
+            username: 'tylertravisty',
+            text: 'Hello, world this is si s a a sdf asd f',
+        },
+        {
+            username: 'tylertravisty',
+            text: 'Another chat message',
+        },
+    ]);
+
+    EventsOn('ChatMessage', (msg) => {
+        setMessages(...messages, msg);
+    });
+
+    return (
+        <div className='stream-chat'>
+            <div className='stream-chat-header'>
+                <span className='stream-chat-title'>{props.title}</span>
+            </div>
+            <div className='stream-chat-list'>
+                {messages.map((message, index) => (
+                    <ChatMessage message={message} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default StreamChat;

frontend/src/components/StreamChatBot.css

@@ -0,0 +1,104 @@
+.stream-chatbot {
+    width: 100%;
+    height: 100%;
+}
+
+.stream-chatbot-button {
+    align-items: center;
+    border: none;
+    display: flex;
+    justify-content: center;
+    padding: 0px;
+}
+
+.stream-chatbot-button:hover {
+    cursor: pointer;
+}
+
+.stream-chatbot-button-title {
+    background-color: rgba(6,23,38,1);
+}
+
+.stream-chatbot-button-chat {
+    align-items: center;
+    background-color: #000312;
+    display: flex;
+    justify-content: center;
+    width: 10%;
+}
+
+.stream-chatbot-icon {
+    height: 24px;
+    width: 24px;
+}
+
+.stream-chatbot-controls {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 55px;
+}
+
+.stream-chatbot-header {
+    align-items: center;
+    background-color: rgba(6,23,38,1);
+    border-bottom: 1px solid #495a6a;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 19px;
+    padding: 10px 20px;
+    text-align: left;
+}
+
+.stream-chatbot-item {
+    border-bottom: 1px solid #82b1ff;
+    box-sizing: border-box;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    font-family: sans-serif;
+    justify-content: space-between;
+    padding: 10px 20px;
+    width: 100%;
+}
+
+.stream-chatbot-item-sender {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: left;
+    padding-left: 10px;
+    width: 20%;
+}
+
+.stream-chatbot-item-interval {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: left;
+    padding-left: 10px;
+    width: 20%;
+}
+
+.stream-chatbot-item-message {
+    align-items: center;
+    display: flex;
+    justify-content: left;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 50%;
+}
+
+.stream-chatbot-list {
+    overflow-y: auto;
+    height: calc(100vh - 84px - 40px - 179px);
+}
+
+.stream-chatbot-title {
+    color: white;
+    font-family: sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+}

frontend/src/components/StreamChatBot.jsx

@@ -0,0 +1,237 @@
+import { useEffect, useState } from 'react';
+import { FilepathBase, StartChatBotMessage, StopChatBotMessage } from '../../wailsjs/go/main/App';
+import { EventsOn } from '../../wailsjs/runtime/runtime';
+import { GearFill, Pause, Play, PlayGreen, PlusCircle, Stop } from '../assets/icons';
+import './StreamChatBot.css';
+import { SmallModal } from './Modal';
+
+function StreamChatBot(props) {
+    const sortChatsAlpha = () => {
+        let keys = Object.keys(props.chats);
+
+        let sorted = [...keys].sort((a, b) =>
+            props.chats[a].text.toLowerCase() > props.chats[b].text.toLowerCase() ? 1 : -1
+        );
+        return sorted;
+    };
+
+    return (
+        <div className='stream-chatbot'>
+            <div className='stream-chatbot-header'>
+                <span className='stream-chatbot-title'>{props.title}</span>
+                <div className='stream-chatbot-controls'>
+                    <button
+                        className='stream-chatbot-button stream-chatbot-button-title'
+                        onClick={props.onPlayAll}
+                    >
+                        <img className='stream-chatbot-icon' src={PlayGreen} />
+                    </button>
+                    <button
+                        className='stream-chatbot-button stream-chatbot-button-title'
+                        onClick={props.onStopAll}
+                    >
+                        <img className='stream-chatbot-icon' src={Stop} />
+                    </button>
+                </div>
+                <div className='stream-chatbot-controls'>
+                    <button
+                        className='stream-chatbot-button stream-chatbot-button-title'
+                        onClick={props.onAdd}
+                    >
+                        <img className='stream-chatbot-icon' src={PlusCircle} />
+                    </button>
+                    <button
+                        className='stream-chatbot-button stream-chatbot-button-title'
+                        onClick={props.onSettings}
+                    >
+                        <img className='stream-chatbot-icon' src={GearFill} />
+                    </button>
+                </div>
+            </div>
+            <div className='stream-chatbot-list'>
+                {sortChatsAlpha().map((chat, index) => (
+                    <StreamChatItem
+                        activateMessage={props.activateMessage}
+                        chat={props.chats[chat]}
+                        isMessageActive={props.isMessageActive}
+                        onItemClick={props.onEdit}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default StreamChatBot;
+
+function StreamChatItem(props) {
+    // const [active, setActive] = useState(props.isMessageActive(props.chat.id));
+    const [active, setActive] = useState(false);
+    const [error, setError] = useState('');
+    const [filename, setFilename] = useState(props.chat.text_file);
+
+    useEffect(() => {
+        if (props.chat.text_file !== '') {
+            FilepathBase(props.chat.text_file).then((name) => {
+                setFilename(name);
+            });
+        }
+        // setActive(props.isMessageActive(props.chat.id));
+    }, [props]);
+
+    const changeActive = (bool) => {
+        // console.log('ChangeActive:', bool);
+        // props.chat.active = bool;
+        // props.activateMessage(props.chat.id, bool);
+        setActive(bool);
+    };
+
+    useEffect(() => {
+        EventsOn('ChatBotCommandActive-' + props.chat.id, (mid) => {
+            console.log('ChatBotCommandActive', props.chat.id, mid);
+            if (mid === props.chat.id) {
+                changeActive(true);
+            }
+        });
+
+        EventsOn('ChatBotCommandError-' + props.chat.id, (mid) => {
+            console.log('ChatBotCommandError', props.chat.id, mid);
+            if (mid === props.chat.id) {
+                changeActive(false);
+            }
+        });
+
+        EventsOn('ChatBotMessageActive-' + props.chat.id, (mid) => {
+            console.log('ChatBotMessageActive', props.chat.id, mid);
+            if (mid === props.chat.id) {
+                changeActive(true);
+            }
+        });
+
+        EventsOn('ChatBotMessageError-' + props.chat.id, (mid) => {
+            console.log('ChatBotMessageError', props.chat.id, mid);
+            if (mid === props.chat.id) {
+                changeActive(false);
+            }
+        });
+    }, []);
+
+    const prependZero = (value) => {
+        if (value < 10) {
+            return '0' + value;
+        }
+
+        return '' + value;
+    };
+
+    const printInterval = (interval) => {
+        let hours = Math.floor(interval / 3600);
+        let minutes = Math.floor(interval / 60 - hours * 60);
+        let seconds = Math.floor(interval - hours * 3600 - minutes * 60);
+
+        // hours = prependZero(hours);
+        // minutes = prependZero(minutes);
+        // seconds = prependZero(seconds);
+        // return hours + ':' + minutes + ':' + seconds;
+
+        return hours + 'h ' + minutes + 'm ' + seconds + 's';
+    };
+
+    const intervalToTimer = (interval) => {
+        let hours = Math.floor(interval / 3600);
+        let minutes = Math.floor(interval / 60 - hours * 60);
+        let seconds = Math.floor(interval - hours * 3600 - minutes * 60);
+
+        if (minutes !== 0) {
+            seconds = prependZero(seconds);
+        }
+        if (hours !== 0) {
+            minutes = prependZero(minutes);
+        }
+        if (hours === 0) {
+            hours = '';
+            if (minutes === 0) {
+                minutes = '';
+                if (seconds === 0) {
+                    seconds = '';
+                }
+            }
+        }
+
+        return hours + minutes + seconds;
+    };
+
+    const openChat = () => {
+        props.onItemClick({
+            id: props.chat.id,
+            as_channel: props.chat.as_channel,
+            command: props.chat.command,
+            interval: intervalToTimer(props.chat.interval),
+            on_command: props.chat.on_command,
+            on_command_follower: props.chat.on_command_follower,
+            on_command_rant_amount: props.chat.on_command_rant_amount,
+            on_command_subscriber: props.chat.on_command_subscriber,
+            text: props.chat.text,
+            text_file: props.chat.text_file,
+        });
+    };
+
+    const startMessage = () => {
+        StartChatBotMessage(props.chat.id)
+            .then(() => {
+                changeActive(true);
+            })
+            .catch((error) => {
+                setError(error);
+            });
+    };
+
+    const stopMessage = () => {
+        StopChatBotMessage(props.chat.id).then(() => {
+            changeActive(false);
+        });
+    };
+
+    return (
+        <>
+            <SmallModal
+                onClose={() => setError('')}
+                show={error !== ''}
+                style={{ minWidth: '300px', maxWidth: '200px', maxHeight: '200px' }}
+                title={'Error'}
+                message={error}
+                submitButton={'OK'}
+                onSubmit={() => setError('')}
+            />
+            <div className='stream-chatbot-item' onClick={() => openChat()}>
+                <span className='stream-chatbot-item-message'>
+                    {props.chat.text_file !== '' ? filename : props.chat.text}
+                </span>
+                <span className='stream-chatbot-item-interval'>
+                    {props.chat.on_command
+                        ? props.chat.command
+                        : printInterval(props.chat.interval)}
+                </span>
+                <span className='stream-chatbot-item-sender'>
+                    {props.chat.as_channel ? 'Channel' : 'User'}
+                </span>
+                <button
+                    className='stream-chatbot-button stream-chatbot-button-chat'
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        console.log('message ID:', props.chat.id);
+                        if (active) {
+                            console.log('Stop message');
+                            stopMessage();
+                        } else {
+                            console.log('Start message');
+                            startMessage();
+                        }
+                    }}
+                >
+                    <img className='stream-chatbot-icon' src={active ? Pause : Play} />
+                </button>
+            </div>
+        </>
+    );
+}

frontend/src/components/StreamChatMessage.css

@@ -0,0 +1,358 @@
+/* .modal-chat {
+    align-items: center;
+    background-color: red;
+    color: black;
+    display: flex;
+    height: 50%;
+    justify-content: center;
+    opacity: 1;
+    width: 50%;
+}
+
+.modal-container {
+    align-items: center;
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100vw;
+} */
+
+.chat-toggle {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding-top: 10px;
+    width: 100%;
+}
+
+.chat-toggle-label {
+    color: white;
+    font-family: sans-serif;
+    padding-right: 10px;
+}
+
+.chat-command {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 10px;
+    width: 100%;
+}
+
+.chat-command-input {
+    border: none;
+    border-radius: 34px;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 16px;
+    outline: none;
+    padding: 5px 10px 5px 10px;
+    text-align: center;
+    width: 100%;
+}
+
+.chat-command-option {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.chat-command-options {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.chat-command-label {
+    color: white;
+    height: 29px;
+}
+
+.chat-command-rant-amount {
+    border: none;
+    /* border-radius: 34px; */
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 16px;
+    outline: none;
+    /* padding: 5px 10px 5px 10px; */
+    padding: 5px;
+    text-align: center;
+}
+
+.chat-command-rant-amount-label {
+    color: white;
+    font-family: sans-serif;
+    padding-right: 10px;
+}
+
+.chat-command-rant-amount-symbol {
+    color: white;
+    font-family: sans-serif;
+    font-size: 20px;
+    padding-right: 1px;
+}
+
+.chat-interval {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 10px;
+    width: 100%;
+}
+
+.chat-interval-input {
+    border: none;
+    border-radius: 34px;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 16px;
+    outline: none;
+    padding: 5px 10px 5px 10px;
+    text-align: right;
+}
+
+.chat-interval-input-zero::placeholder {
+    text-align: center;
+}
+
+.chat-interval-input-value::placeholder {
+    color: black;
+    opacity: 1;
+    text-align: center;
+}
+
+.chat-interval-label {
+    color: white;
+    font-family: sans-serif;
+    padding-right: 10px;
+}
+
+.chat-options {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.stream-chat-message {
+    align-items: center;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+    justify-content: start;
+    width: 100%;
+}
+
+.stream-chat-message-error {
+  border: 1px solid red;
+  box-sizing: border-box;
+  color: red;
+  font-family: monospace;
+  font-size: 16px;
+  padding: 5px;
+  text-align: center;
+  width: 100%;
+}
+
+.stream-chat-message-label {
+    padding: 5px 0px;
+    /* width: 50%; */
+}
+
+.stream-chat-message-modal {
+    align-items: left;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+}
+
+.stream-chat-message-textarea {
+    border: none;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 16px;
+    outline: none;
+    padding: 10px;
+    resize: none;
+    width: 100%;
+}
+
+.stream-chat-message-title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.stream-chat-message-title-right {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.chat-toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.chat-toggle-switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.chat-toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #495a6a;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.chat-toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .chat-toggle-slider {
+  background-color: #85c742;
+}
+
+input:checked + .chat-toggle-slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+/* Rounded sliders */
+.chat-toggle-slider.round {
+  border-radius: 34px;
+}
+
+.chat-toggle-slider.round:before {
+  border-radius: 50%;
+}
+
+.chat-toggle-check-container {
+  display: block;
+  position: relative;
+  padding-left: 16px;
+  margin-bottom: 15px;
+  cursor: pointer;
+  font-size: 15px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.chat-toggle-check-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.chat-toggle-check {
+  border-radius: 3px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 15px;
+  width: 15px;
+  background-color: #495a6a;
+}
+
+.chat-toggle-check-container:hover input ~ .chat-toggle-check {
+  background-color: #495a6a;
+}
+
+.chat-toggle-check-container input:checked ~ .chat-toggle-check {
+  background-color: #85c742;
+}
+
+.chat-toggle-check:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.chat-toggle-check-container input:checked ~ .chat-toggle-check:after {
+  display: block;
+}
+
+.chat-toggle-check-container .chat-toggle-check:after {
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.chat-toggle-check-label {
+  color: white;
+  font-family: sans-serif;
+  padding-right: 5px;
+}
+
+.choose-file {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.choose-file-button-box {
+  min-width: 100px;
+  width: 100px;
+}
+
+.choose-file-button {
+    background-color: #85c742;
+    border: none;
+    border-radius: 5px;
+    color: #061726;
+    cursor: pointer;
+    font-size: 16px;
+    text-decoration: none;
+    /* width: 200px; */
+    width: 100%;
+}
+
+.choose-file-path {
+    overflow: scroll;
+    margin-left: 5px;
+    white-space: nowrap;
+}
+

frontend/src/components/StreamChatMessage.jsx

@@ -0,0 +1,404 @@
+import { useEffect, useState } from 'react';
+
+import { Modal, SmallModal } from './Modal';
+
+import { OpenFileDialog } from '../../wailsjs/go/main/App';
+
+import './StreamChatMessage.css';
+
+export function StreamChatMessageModal(props) {
+    const [asChannel, setAsChannel] = useState(props.asChannel);
+    const [chatCommand, setChatCommand] = useState(props.chatCommand);
+    const [error, setError] = useState('');
+    const [onCommand, setOnCommand] = useState(props.onCommand);
+    const [onCommandFollower, setOnCommandFollower] = useState(props.onCommandFollower);
+    const [onCommandRantAmount, setOnCommandRantAmount] = useState(props.onCommandRantAmount);
+    const [onCommandSubscriber, setOnCommandSubscriber] = useState(props.onCommandSubscriber);
+    const [openDelete, setOpenDelete] = useState(false);
+    const [readFromFile, setReadFromFile] = useState(false);
+    const [text, setText] = useState(props.text);
+    const [textFile, setTextFile] = useState(props.textFile);
+    const updateText = (event) => setText(event.target.value);
+    const [timer, setTimer] = useState(props.interval);
+
+    useEffect(() => {
+        console.log('update chat');
+        setAsChannel(props.asChannel);
+        setOnCommand(props.onCommand);
+        setOnCommandFollower(props.onCommandFollower);
+        setOnCommandSubscriber(props.onCommandSubscriber);
+        setOnCommandRantAmount(props.onCommandRantAmount);
+        setError('');
+        setReadFromFile(props.textFile !== '');
+        setText(props.text);
+        setTextFile(props.textFile);
+        setTimer(props.interval);
+    }, []);
+
+    const reset = () => {
+        setAsChannel(false);
+        setChatCommand(false);
+        setError('');
+        setReadFromFile(false);
+        setText('');
+        setTextFile('');
+        setOnCommand(false);
+        setOnCommandFollower(false);
+        setOnCommandSubscriber(false);
+        setOnCommandRantAmount(0);
+        setTimer('');
+    };
+
+    const close = () => {
+        reset();
+        props.onClose();
+    };
+
+    const submit = () => {
+        if (!readFromFile && text === '') {
+            setError('Add message');
+            return;
+        }
+
+        if (readFromFile && textFile === '') {
+            setError('Select file containing messages');
+            return;
+        }
+
+        if (timer === '') {
+            setError('Set timer');
+            return;
+        }
+
+        if (onCommand && chatCommand === '') {
+            setError('Add command');
+            return;
+        }
+
+        let message = {
+            id: props.chatID,
+            as_channel: asChannel,
+            command: chatCommand,
+            interval: timerToInterval(),
+            on_command: onCommand,
+            on_command_follower: onCommandFollower,
+            on_command_rant_amount: onCommandRantAmount,
+            on_command_subscriber: onCommandSubscriber,
+            text: text,
+            text_file: textFile,
+        };
+
+        props.onSubmit(message);
+    };
+
+    const deleteMessage = () => {
+        if (props.chatID === '') {
+            close();
+            return;
+        }
+
+        setOpenDelete(true);
+    };
+
+    const confirmDelete = () => {
+        reset();
+        setOpenDelete(false);
+        props.onDelete(props.chatID);
+    };
+
+    const updateChatCommand = (e) => {
+        let command = e.target.value;
+
+        if (command.length === 1) {
+            if (command !== '!') {
+                command = '!' + command;
+            }
+        }
+        command = command.toLowerCase();
+        let postfix = command.replace('!', '');
+
+        if (postfix !== '' && !/^[a-z0-9]+$/gi.test(postfix)) {
+            return;
+        }
+
+        setChatCommand(command);
+    };
+
+    const updateTimerBackspace = (e) => {
+        if (timer.length === 0) {
+            return;
+        }
+
+        if (e.keyCode === 8) {
+            setTimer(timer.substring(0, timer.length - 1));
+        }
+    };
+
+    const updateTimer = (e) => {
+        let nums = '0123456789';
+        let digit = e.target.value;
+
+        if (!nums.includes(digit)) {
+            return;
+        }
+
+        if (timer.length === 6) {
+            return;
+        }
+
+        if (timer.length === 0 && digit === '0') {
+            return;
+        }
+
+        setTimer(timer + digit);
+    };
+
+    const timerToInterval = () => {
+        let prefix = '0'.repeat(6 - timer.length);
+        let t = prefix + timer;
+
+        let hours = parseInt(t.substring(0, 2));
+        let minutes = parseInt(t.substring(2, 4));
+        let seconds = parseInt(t.substring(4, 6));
+
+        return hours * 3600 + minutes * 60 + seconds;
+    };
+
+    const printTimer = () => {
+        if (timer === '') {
+            return '00:00:00';
+        }
+
+        let prefix = '0'.repeat(6 - timer.length);
+        let t = prefix + timer;
+
+        return t.substring(0, 2) + ':' + t.substring(2, 4) + ':' + t.substring(4, 6);
+    };
+
+    const checkChannelToggle = (e) => {
+        setAsChannel(e.target.checked);
+    };
+
+    const checkCommandToggle = (e) => {
+        setOnCommand(e.target.checked);
+    };
+
+    const checkCommandFollower = (e) => {
+        setOnCommandFollower(e.target.checked);
+    };
+
+    const checkCommandSubscriber = (e) => {
+        setOnCommandSubscriber(e.target.checked);
+    };
+
+    const updateRantAmount = (e) => {
+        let amount = parseInt(e.target.value);
+        if (isNaN(amount)) {
+            amount = 0;
+        }
+
+        setOnCommandRantAmount(amount);
+    };
+
+    const checkReadFromFile = (e) => {
+        setReadFromFile(e.target.checked);
+        if (!e.target.checked) {
+            setTextFile('');
+        }
+    };
+
+    const chooseFile = () => {
+        OpenFileDialog()
+            .then((filepath) => {
+                if (filepath !== '') {
+                    setTextFile(filepath);
+                }
+            })
+            .catch((error) => setError(error));
+    };
+
+    return (
+        <>
+            <Modal
+                onClose={close}
+                show={props.show}
+                style={{ minHeight: '500px', minWidth: '300px', maxWidth: '400px' }}
+                cancelButton={props.chatID === '' ? 'Cancel' : ''}
+                onCancel={deleteMessage}
+                deleteButton={props.chatID === '' ? '' : 'Delete'}
+                onDelete={deleteMessage}
+                submitButton={'Save'}
+                onSubmit={submit}
+                title={'Chat Message'}
+            >
+                <div className='stream-chat-message-modal'>
+                    <div className='stream-chat-message'>
+                        {/* {error && <span className='stream-chat-message-error'>{error}</span>} */}
+                        <div className='stream-chat-message-title'>
+                            <span className='stream-chat-message-label'>Message</span>
+                            <div className='stream-chat-message-title-right'>
+                                <span className='chat-toggle-check-label'>Read from file</span>
+                                <label className='chat-toggle-check-container'>
+                                    <input
+                                        checked={readFromFile}
+                                        onChange={checkReadFromFile}
+                                        type='checkbox'
+                                    />
+                                    <span className='chat-toggle-check'></span>
+                                </label>
+                            </div>
+                        </div>
+                        {readFromFile ? (
+                            <div className='choose-file'>
+                                <div className='choose-file-button-box'>
+                                    <button className='choose-file-button' onClick={chooseFile}>
+                                        Choose file
+                                    </button>
+                                </div>
+                                <span className='choose-file-path'>{textFile}</span>
+                            </div>
+                        ) : (
+                            <textarea
+                                className='stream-chat-message-textarea'
+                                cols='25'
+                                onChange={updateText}
+                                rows='4'
+                                value={text}
+                            />
+                        )}
+                    </div>
+                    <div className='chat-options'>
+                        <div className='chat-interval'>
+                            <span className='chat-interval-label'>
+                                {onCommand ? 'Command timeout' : 'Chat interval'}
+                            </span>
+                            <input
+                                className={
+                                    timer === ''
+                                        ? 'chat-interval-input chat-interval-input-zero'
+                                        : 'chat-interval-input chat-interval-input-value'
+                                }
+                                onKeyDown={updateTimerBackspace}
+                                onInput={updateTimer}
+                                placeholder={printTimer()}
+                                size='8'
+                                type='text'
+                                value={''}
+                            />
+                        </div>
+                        <div className='chat-toggle'>
+                            <span className='chat-toggle-label'>Chat as channel</span>
+                            <label className='chat-toggle-switch'>
+                                <input
+                                    onChange={checkChannelToggle}
+                                    type='checkbox'
+                                    checked={asChannel}
+                                />
+                                <span className='chat-toggle-slider round'></span>
+                            </label>
+                        </div>
+                        <div className='chat-toggle'>
+                            <span className='chat-toggle-label'>Chat on command</span>
+                            <label className='chat-toggle-switch'>
+                                <input
+                                    onChange={checkCommandToggle}
+                                    type='checkbox'
+                                    checked={onCommand}
+                                />
+                                <span className='chat-toggle-slider round'></span>
+                            </label>
+                        </div>
+                        {onCommand ? (
+                            <div>
+                                <div className='chat-command'>
+                                    <input
+                                        className='chat-command-input'
+                                        onInput={updateChatCommand}
+                                        placeholder={'!command'}
+                                        size='8'
+                                        type='text'
+                                        value={chatCommand}
+                                    />
+                                </div>
+                                <div className='chat-command-options'>
+                                    <div className='chat-toggle'>
+                                        <span className='chat-toggle-label'>Followers only</span>
+                                        <label className='chat-toggle-switch'>
+                                            <input
+                                                onChange={checkCommandFollower}
+                                                type='checkbox'
+                                                checked={onCommandFollower}
+                                            />
+                                            <span className='chat-toggle-slider round'></span>
+                                        </label>
+                                    </div>
+                                    <div className='chat-toggle'>
+                                        <span className='chat-toggle-label'>Subscribers only</span>
+                                        <label className='chat-toggle-switch'>
+                                            <input
+                                                onChange={checkCommandSubscriber}
+                                                type='checkbox'
+                                                checked={onCommandSubscriber}
+                                            />
+                                            <span className='chat-toggle-slider round'></span>
+                                        </label>
+                                    </div>
+                                    <div className='chat-interval'>
+                                        <span className='chat-command-rant-amount-label'>
+                                            Minimum rant amount
+                                        </span>
+                                        <div>
+                                            <span className='chat-command-rant-amount-symbol'>
+                                                $
+                                            </span>
+                                            <input
+                                                className='chat-command-rant-amount'
+                                                onChange={updateRantAmount}
+                                                placeholder='0'
+                                                size='4'
+                                                type='text'
+                                                value={
+                                                    onCommandRantAmount === 0
+                                                        ? ''
+                                                        : onCommandRantAmount
+                                                }
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className='chat-command'>
+                                <span className='chat-command-label'>{'\u00A0'}</span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </Modal>
+            <SmallModal
+                onClose={() => setOpenDelete(false)}
+                show={openDelete}
+                style={{ minWidth: '300px', maxWidth: '200px', maxHeight: '200px' }}
+                cancelButton={'Cancel'}
+                onCancel={() => setOpenDelete(false)}
+                deleteButton={'Delete'}
+                message={
+                    'Are you sure you want to delete this message? You cannot undo this action.'
+                }
+                onDelete={confirmDelete}
+                title={'Delete Message'}
+            />
+            <SmallModal
+                onClose={() => setError('')}
+                show={error !== ''}
+                style={{ minWidth: '300px', maxWidth: '300px', maxHeight: '100px' }}
+                title={'Error'}
+                message={error}
+                submitButton={'OK'}
+                onSubmit={() => setError('')}
+            />
+        </>
+    );
+}
+
+export function StreamChatMessageItem() {}

frontend/src/components/StreamEvent.css

@@ -0,0 +1,42 @@
+.stream-event {
+    border-bottom: 1px solid #82b1ff;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    font-family: sans-serif;
+    justify-content: space-between;
+    padding: 10px 20px;
+}
+
+.stream-event-left {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+}
+
+.stream-event-icon {
+    width: 20px;
+    height: 20px;
+    padding-right: 10px;
+}
+
+.stream-event-left-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.stream-event-username {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.stream-event-description {
+    color: #88a0b8;
+    font-size: 14px;
+}
+
+.stream-event-date {
+    align-items: center;
+    display: flex;
+    font-family: monospace;
+}

frontend/src/components/StreamEvent.jsx

@@ -0,0 +1,111 @@
+import { Heart, Star } from '../assets/icons';
+
+import './StreamEvent.css';
+
+function StreamEvent(props) {
+    const dateDate = (date) => {
+        const options = { month: 'short' };
+        let month = new Intl.DateTimeFormat('en-US', options).format(date);
+        let day = date.getDate();
+        return month + ' ' + day;
+    };
+
+    const dateDay = (date) => {
+        let now = new Date();
+        let today = now.getDay();
+        switch (date.getDay()) {
+            case 0:
+                return 'Sunday';
+            case 1:
+                return 'Monday';
+            case 2:
+                return 'Tuesday';
+            case 3:
+                return 'Wednesday';
+            case 4:
+                return 'Thursday';
+            case 5:
+                return 'Friday';
+            case 6:
+                return 'Saturday';
+        }
+    };
+
+    const dateTime = (date) => {
+        let now = new Date();
+        let today = now.getDay();
+        let day = date.getDay();
+
+        if (today !== day) {
+            return dateDay(date);
+        }
+
+        let hours24 = date.getHours();
+        let hours = hours24 % 12 || 12;
+
+        let minutes = date.getMinutes();
+        if (minutes < 10) {
+            minutes = '0' + minutes;
+        }
+
+        let mer = 'pm';
+        if (hours24 < 12) {
+            mer = 'am';
+        }
+
+        return hours + ':' + minutes + ' ' + mer;
+    };
+
+    const dateString = (d) => {
+        if (isNaN(Date.parse(d))) {
+            return 'Who knows?';
+        }
+
+        let now = new Date();
+        let date = new Date(d);
+        // Fix Rumble's timezone problem
+        date.setHours(date.getHours() - 4);
+        let diff = now - date;
+        switch (true) {
+            case diff < 0:
+                return 'In the future!?';
+            case diff < 60000:
+                return 'Now';
+            case diff < 3600000:
+                let minutes = Math.floor(diff / 1000 / 60);
+                let postfix = ' minutes ago';
+                if (minutes == 1) {
+                    postfix = ' minute ago';
+                }
+                return minutes + postfix;
+            case diff < 86400000:
+                return dateTime(date);
+            case diff < 604800000:
+                return dateDay(date);
+            default:
+                return dateDate(date);
+        }
+    };
+
+    return (
+        <div className='stream-event'>
+            <div className='stream-event-left'>
+                {props.event.followed_on && <img className='stream-event-icon' src={Heart}></img>}
+                {props.event.subscribed_on && <img className='stream-event-icon' src={Star}></img>}
+                <div className='stream-event-left-text'>
+                    <span className='stream-event-username'>{props.event.username}</span>
+                    <span className='stream-event-description'>
+                        {props.event.followed_on && 'Followed you'}
+                        {props.event.subscribed_on && 'Subscribed'}
+                    </span>
+                </div>
+            </div>
+            <span className='stream-event-date'>
+                {props.event.followed_on && dateString(props.event.followed_on)}
+                {props.event.subscribed_on && dateString(props.event.subscribed_on)}
+            </span>
+        </div>
+    );
+}
+
+export default StreamEvent;

frontend/src/components/StreamInfo.css

@@ -0,0 +1,120 @@
+.stream-info {
+    display: flex;
+    flex-direction: column;
+    /* padding: 20px 0px; */
+    width: 100%;
+}
+
+.stream-info-title {
+    color: white;
+    font-family: sans-serif;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.stream-info-categories {
+    padding: 5px 0px;
+    margin-right: 50px;
+}
+
+.stream-info-category {
+    background-color: rgba(6,23,38,1);
+    border: 1px solid white;
+    border-radius: 30px;
+    color: white;
+    font-family: sans-serif;
+    margin-right: 5px;
+    padding: 1px 7px;
+}
+
+.stream-info-channel {
+    color: white;
+    font-family: sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 5px 20px;
+}
+
+.stream-info-controls {
+    align-items: center;
+    border: 1px solid white;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    margin: 5px 0px 20px 0px;
+}
+
+.stream-info-control {
+    height: 32px;
+    padding: 5px;
+    width: 32px;
+}
+
+.stream-info-control-button {
+    background-color: #000312;
+    border-radius: 5px;
+    cursor: pointer;
+    border: none;
+    padding: 0px;
+}
+
+.stream-info-control-button:hover {
+    background-color: rgba(6,23,38,1);
+}
+
+.stream-info-footer {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.stream-info-likes {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 5px 0px;
+}
+
+.stream-info-likes-count {
+    color: white;
+    font-family: monospace;
+    font-size: 16px;
+    padding: 0px 5px;
+}
+
+.stream-info-likes-left {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    background-color: rgba(6,23,38,1);
+    border: 1px solid white;
+    border-radius: 10rem 0rem 0rem 10rem;
+    margin-right: 1px;
+}
+.stream-info-likes-right {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    background-color: rgba(6,23,38,1);
+    border: 1px solid white;
+    border-radius: 0rem 10rem 10rem 0rem;
+}
+
+.stream-info-likes-icon {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: 16px;
+    padding: 5px;
+    width: 16px;
+}
+
+.stream-info-live {
+    padding: 10px 20px 5px 20px;
+}
+
+.stream-info-subtitle {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+}

frontend/src/components/StreamInfo.jsx

@@ -0,0 +1,77 @@
+import { Gear, House, Pause, Play, ThumbsDown, ThumbsUp } from '../assets/icons';
+import './StreamInfo.css';
+
+function StreamInfo(props) {
+    const likesString = (likes) => {
+        switch (true) {
+            case likes <= 0:
+                return '0';
+            case likes < 1000:
+                return likes;
+            case likes < 1000000:
+                return (likes / 1000).toFixed(3).slice(0, -2) + 'K';
+            case likes < 1000000000:
+                return (likes / 1000000).toFixed(6).slice(0, -5) + 'M';
+            default:
+                return 'Inf';
+        }
+    };
+
+    return (
+        <div className='stream-info'>
+            <div className='stream-info-live'>
+                <div className='stream-info-title'>
+                    <span>{props.live ? props.title : '-'}</span>
+                </div>
+                <div className='stream-info-subtitle'>
+                    <div className='stream-info-categories'>
+                        <span className='stream-info-category'>
+                            {props.live ? props.categories.primary.title : 'primary'}
+                        </span>
+                        <span className='stream-info-category'>
+                            {props.live ? props.categories.secondary.title : 'secondary'}
+                        </span>
+                    </div>
+                    <div className='stream-info-likes'>
+                        <div className='stream-info-likes-left'>
+                            <img className='stream-info-likes-icon' src={ThumbsUp} />
+                            <span className='stream-info-likes-count'>
+                                {props.live ? likesString(props.likes) : '-'}
+                            </span>
+                        </div>
+                        <div className='stream-info-likes-right'>
+                            <img className='stream-info-likes-icon' src={ThumbsDown} />
+                            <span className='stream-info-likes-count'>
+                                {props.live ? likesString(props.dislikes) : '-'}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='stream-info-channel'>
+                <span>Channel: {props.channel}</span>
+            </div>
+            <div className='stream-info-footer'>
+                <div></div>
+                <div className='stream-info-controls'>
+                    <button className='stream-info-control-button' onClick={props.home}>
+                        <img className='stream-info-control' src={House} />
+                    </button>
+                    <button className='stream-info-control-button'>
+                        <img
+                            className='stream-info-control'
+                            onClick={props.active ? props.pause : props.play}
+                            src={props.active ? Pause : Play}
+                        />
+                    </button>
+                    <button className='stream-info-control-button' onClick={props.settings}>
+                        <img className='stream-info-control' src={Gear} />
+                    </button>
+                </div>
+                <div></div>
+            </div>
+        </div>
+    );
+}
+
+export default StreamInfo;

frontend/src/screens/Dashboard.css

@@ -0,0 +1,72 @@
+#Dashboard {
+    align-items: center;
+    background-color: #000312;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100%;
+}
+
+.header {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: 62px;
+    justify-content: center;
+    padding: 10px 0px;
+    width: 100%;
+}
+
+.header-left {
+    width: 20%;
+}
+
+.header-right {
+    width: 20%;
+}
+
+.main {
+    border-bottom: 1px solid #495a6a;
+    border-top: 1px solid #495a6a;
+    display: flex;
+    flex-direction: row;
+    height: calc(100vh - 83px - 179px);
+    justify-content: space-between;
+    width: 100%;
+}
+
+.main-left {
+    border-right: 1px solid #495a6a;
+    width: 33%;
+    height: 100%;
+}
+
+.main-middle {
+    border-right: 1px solid #495a6a;
+    width: 33%;
+    height: 100%;
+}
+
+.main-right {
+    width: 67%;
+    height: 100%;
+}
+
+.modal {
+    background-color: white;
+    color: red;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+}
+
+.highlights {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    height: 50px;
+    width: 60%;
+}

frontend/src/screens/Dashboard.jsx

@@ -0,0 +1,449 @@
+import { useEffect, useState } from 'react';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import {
+    AddChatMessage,
+    ChatBotMessages,
+    DeleteChatMessage,
+    GetChatBot,
+    NewChatBot,
+    ResetChatBot,
+    StartAllChatBot,
+    StartApi,
+    StopAllChatBot,
+    StopApi,
+    StopChatBotMessage,
+    UpdateChatBotUrl,
+    UpdateChatMessage,
+} from '../../wailsjs/go/main/App';
+
+import './Dashboard.css';
+import { EventsEmit, EventsOn } from '../../wailsjs/runtime/runtime';
+import { Heart, Star } from '../assets/icons';
+import { ChatBotModal } from '../components/ChatBot';
+import Highlight from '../components/Highlight';
+import { SmallModal } from '../components/Modal';
+import StreamEvent from '../components/StreamEvent';
+import StreamActivity from '../components/StreamActivity';
+import StreamChat from '../components/StreamChat';
+import StreamChatBot from '../components/StreamChatBot';
+import StreamInfo from '../components/StreamInfo';
+import { NavSignIn } from './Navigation';
+import { StreamChatMessageModal } from '../components/StreamChatMessage';
+
+function Dashboard() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [error, setError] = useState('');
+    const [refresh, setRefresh] = useState(false);
+    const [active, setActive] = useState(false);
+    const [openChatBot, setOpenChatBot] = useState(false);
+    const [chatBotMessages, setChatBotMessages] = useState({});
+    const [chatBotMessagesActive, setChatBotMessagesActive] = useState({});
+    const [chatBotSessionLoggedIn, setChatBotSessionLoggedIn] = useState(false);
+    const [chatBotSessionStreamUrl, setChatBotSessionStreamUrl] = useState('');
+    const [chatBotSessionUsername, setChatBotSessionUsername] = useState('');
+    const [chatAsChannel, setChatAsChannel] = useState(false);
+    const [chatCommand, setChatCommand] = useState('');
+    const [chatOnCommand, setChatOnCommand] = useState(false);
+    const [chatOnCommandFollower, setChatOnCommandFollower] = useState(false);
+    const [chatOnCommandRantAmount, setChatOnCommandRantAmount] = useState(0);
+    const [chatOnCommandSubscriber, setChatOnCommandSubscriber] = useState(false);
+    const [chatID, setChatID] = useState('');
+    const [chatInterval, setChatInterval] = useState('');
+    const [chatText, setChatText] = useState('');
+    const [chatTextFile, setChatTextFile] = useState('');
+    const [openChat, setOpenChat] = useState(false);
+    const [cid, setCID] = useState(location.state.cid);
+    const [username, setUsername] = useState('');
+    const [channelName, setChannelName] = useState('');
+    const [followers, setFollowers] = useState({});
+    const [totalFollowers, setTotalFollowers] = useState(0);
+    const [channelFollowers, setChannelFollowers] = useState(0);
+    const [recentFollowers, setRecentFollowers] = useState([]);
+    const [subscribers, setSubscribers] = useState({});
+    const [subscriberCount, setSubscriberCount] = useState(0);
+    const [recentSubscribers, setRecentSubscribers] = useState([]);
+    const [streamCategories, setStreamCategories] = useState({
+        primary: { title: '' },
+        secondary: { title: '' },
+    });
+    const [streamLikes, setStreamLikes] = useState(0);
+    const [streamLive, setStreamLive] = useState(false);
+    const [streamDislikes, setStreamDislikes] = useState(0);
+    const [streamTitle, setStreamTitle] = useState('');
+    const [watchingNow, setWatchingNow] = useState(0);
+    const [createdOn, setCreatedOn] = useState('');
+
+    useEffect(() => {
+        console.log('use effect start');
+        // TODO: catch error
+        StartApi(cid);
+        setActive(true);
+
+        ChatBotMessages(cid).then((messages) => {
+            console.log(messages);
+            setChatBotMessages(messages);
+        });
+
+        NewChatBot(cid).then((response) => {
+            setChatBotSessionLoggedIn(response.logged_in);
+            setChatBotSessionStreamUrl(response.stream_url);
+            setChatBotSessionUsername(response.username);
+        });
+
+        EventsOn('QueryResponse', (response) => {
+            // console.log('query response received');
+            setRefresh(!refresh);
+            setActive(true);
+            setUsername(response.username);
+            setChannelName(response.channel_name);
+            setFollowers(response.followers);
+            setChannelFollowers(response.followers.num_followers);
+            setTotalFollowers(response.followers.num_followers_total);
+            setRecentFollowers(response.followers.recent_followers);
+            setSubscribers(response.subscribers);
+            setSubscriberCount(response.subscribers.num_subscribers);
+            setRecentSubscribers(response.subscribers.recent_subscribers);
+            if (response.livestreams.length > 0) {
+                setStreamLive(true);
+                setStreamCategories(response.livestreams[0].categories);
+                setStreamLikes(response.livestreams[0].likes);
+                setStreamDislikes(response.livestreams[0].dislikes);
+                setStreamTitle(response.livestreams[0].title);
+                setCreatedOn(response.livestreams[0].created_on);
+                setWatchingNow(response.livestreams[0].watching_now);
+            } else {
+                setStreamLive(false);
+            }
+        });
+
+        EventsOn('QueryResponseError', (error) => {
+            setError(error);
+            // console.log('Query response error:', error);
+            setActive(false);
+        });
+
+        EventsOn('ChatBotChatStreamError', (error) => {
+            setError(error);
+        });
+    }, []);
+
+    const home = () => {
+        StopApi()
+            .then(() => setActive(false))
+            .then(() => {
+                ResetChatBot(cid, false);
+            })
+            .then(() => {
+                navigate(NavSignIn);
+            })
+            .catch((error) => {
+                setError(error);
+                console.log('Stop error:', error);
+            });
+    };
+
+    const startQuery = () => {
+        console.log('start');
+        StartApi(cid)
+            .then(() => {
+                setActive(true);
+            })
+            .catch((error) => {
+                setError(error);
+                console.log('Start error:', error);
+            });
+    };
+
+    const stopQuery = () => {
+        console.log('stop');
+        StopApi().then(() => {
+            setActive(false);
+        });
+    };
+
+    const activityDate = (activity) => {
+        if (activity.followed_on) {
+            return activity.followed_on;
+        }
+        if (activity.subscribed_on) {
+            return activity.subscribed_on;
+        }
+    };
+
+    const activityEvents = () => {
+        let sorted = [...recentFollowers, ...recentSubscribers].sort((a, b) =>
+            activityDate(a) < activityDate(b) ? 1 : -1
+        );
+        return sorted;
+    };
+
+    const newChat = () => {
+        setChatAsChannel(false);
+        setChatCommand('');
+        setChatID('');
+        setChatInterval('');
+        setChatText('');
+        setChatTextFile('');
+        setChatOnCommand(false);
+        setChatOnCommandFollower(false);
+        setChatOnCommandRantAmount(0);
+        setChatOnCommandSubscriber(false);
+        setOpenChat(true);
+    };
+
+    // const editChat = (id, asChannel, command, interval, onCommand, text, textFile) => {
+    const editChat = (message) => {
+        setChatAsChannel(message.as_channel);
+        setChatCommand(message.command);
+        setChatID(message.id);
+        setChatInterval(message.interval);
+        setChatOnCommand(message.on_command);
+        setChatOnCommandFollower(message.on_command_follower);
+        setChatOnCommandRantAmount(message.on_command_rant_amount);
+        setChatOnCommandSubscriber(message.on_command_subscriber);
+        setChatText(message.text);
+        setChatTextFile(message.text_file);
+        setOpenChat(true);
+    };
+
+    const deleteChat = (id) => {
+        setOpenChat(false);
+        if (id === '') {
+            return;
+        }
+
+        let message = { id: id };
+        StopChatBotMessage(id)
+            .then(() => {
+                // DeleteChatMessage(id, cid)
+                DeleteChatMessage(cid, message)
+                    .then((messages) => {
+                        setChatBotMessages(messages);
+                    })
+                    .catch((error) => {
+                        setError(error);
+                        // console.log('Error deleting message:', error);
+                    });
+            })
+            .catch((error) => {
+                setError(error);
+                // console.log('Error stopping message:', error);
+            });
+    };
+
+    // const saveChat = (id, asChannel, command, interval, onCommand, text, textFile) => {
+    const saveChat = (message) => {
+        setOpenChat(false);
+        if (message.id === '') {
+            // AddChatMessage(cid, asChannel, command, interval, onCommand, text, textFile)
+            AddChatMessage(cid, message)
+                .then((messages) => {
+                    setChatBotMessages(messages);
+                })
+                .catch((error) => {
+                    setError(error);
+                    console.log('Error saving chat:', error);
+                });
+
+            return;
+        }
+
+        // UpdateChatMessage(id, cid, asChannel, command, interval, onCommand, text, textFile)
+        UpdateChatMessage(cid, message)
+            .then((messages) => {
+                console.log(messages);
+                setChatBotMessages(messages);
+            })
+            .catch((error) => {
+                setError(error);
+                console.log('Error saving chat:', error);
+            });
+    };
+
+    // TODO: this never gets called - delete
+    const saveChatBot = (username, password, url) => {
+        NewChatBot(cid, username, password, url)
+            .then(() => {
+                setOpenChatBot(false);
+            })
+            .catch((error) => console.log('Error creating new chat bot:', error));
+    };
+
+    const updateChatBot = (url) => {
+        setChatBotSessionStreamUrl(url);
+        setOpenChatBot(false);
+    };
+
+    const loginChatBot = () => {
+        GetChatBot(cid)
+            .then((response) => {
+                setChatBotSessionLoggedIn(response.logged_in);
+                setChatBotSessionStreamUrl(response.stream_url);
+                setChatBotSessionUsername(response.username);
+            })
+            .catch((error) => {
+                setError(error);
+                console.log('Error getting chat bot:', error);
+            })
+            .finally(() => {
+                setOpenChatBot(false);
+            });
+    };
+
+    const logoutChatBot = () => {
+        ResetChatBot(cid, true)
+            .then(() => {
+                NewChatBot(cid).then((response) => {
+                    console.log('NewChatBot response:', response);
+                    setChatBotSessionLoggedIn(response.logged_in);
+                    setChatBotSessionStreamUrl(response.stream_url);
+                    setChatBotSessionUsername(response.username);
+                });
+            })
+            .catch((error) => {
+                setError(error);
+                console.log('Error resetting chat bot:', error);
+            })
+            .finally(() => {
+                setOpenChatBot(false);
+            });
+    };
+
+    const chatBotStartAll = () => {
+        StartAllChatBot(cid).catch((error) => {
+            setError(error);
+            console.log('Error starting all chat bot messages:', error);
+        });
+    };
+
+    const chatBotStopAll = () => {
+        StopAllChatBot(cid)
+            .then(() => {
+                setChatBotMessagesActive({});
+            })
+            .catch((error) => {
+                setError(error);
+                console.log('Error stopping all chat bot messages:', error);
+            });
+    };
+
+    const activateMessage = (id, active) => {
+        // console.log('Dashboard activateMessage:', id, active);
+        chatBotMessagesActive[id] = active;
+    };
+
+    const isMessageActive = (id) => {
+        // console.log('is Message active start', id, chatBotMessagesActive[id]);
+        if (chatBotMessagesActive[id] === undefined) {
+            chatBotMessagesActive[id] = false;
+        }
+
+        // console.log('is Message active after', id, chatBotMessagesActive[id]);
+        return chatBotMessagesActive[id];
+    };
+
+    return (
+        <>
+            {openChat && (
+                <StreamChatMessageModal
+                    chatID={chatID}
+                    asChannel={chatAsChannel}
+                    chatCommand={chatCommand}
+                    onCommand={chatOnCommand}
+                    onCommandFollower={chatOnCommandFollower}
+                    onCommandRantAmount={chatOnCommandRantAmount}
+                    onCommandSubscriber={chatOnCommandSubscriber}
+                    interval={chatInterval}
+                    onClose={() => setOpenChat(false)}
+                    onDelete={deleteChat}
+                    onSubmit={saveChat}
+                    show={openChat}
+                    text={chatText}
+                    textFile={chatTextFile}
+                />
+            )}
+            {openChatBot && (
+                <ChatBotModal
+                    cid={cid}
+                    loggedIn={chatBotSessionLoggedIn}
+                    onClose={() => setOpenChatBot(false)}
+                    onLogin={loginChatBot}
+                    onLogout={logoutChatBot}
+                    onSubmit={saveChatBot}
+                    onUpdate={updateChatBot}
+                    show={openChatBot}
+                    streamUrl={chatBotSessionStreamUrl}
+                    username={chatBotSessionUsername}
+                />
+            )}
+            <div id='Dashboard'>
+                <div className='header'>
+                    <div className='header-left'></div>
+                    <div className='highlights'>
+                        {/* <Highlight description={'Session'} type={'stopwatch'} value={createdOn} /> */}
+                        <Highlight description={'Viewers'} type={'count'} value={watchingNow} />
+                        <Highlight
+                            description={'Followers'}
+                            type={'count'}
+                            value={channelFollowers}
+                        />
+                        <Highlight
+                            description={'Subscribers'}
+                            type={'count'}
+                            value={subscriberCount}
+                        />
+                    </div>
+                    <div className='header-right'></div>
+                </div>
+                <div className='main'>
+                    <div className='main-left'>
+                        <StreamActivity title={'Stream Activity'} events={activityEvents()} />
+                    </div>
+                    {/* <div className='main-middle'>
+                        <StreamChat title={'Stream Chat'} />
+                    </div> */}
+                    <div className='main-right'>
+                        <StreamChatBot
+                            activateMessage={activateMessage}
+                            chats={chatBotMessages}
+                            onAdd={newChat}
+                            onEdit={editChat}
+                            onPlayAll={chatBotStartAll}
+                            onSettings={() => setOpenChatBot(true)}
+                            onStopAll={chatBotStopAll}
+                            title={'Chat Bot'}
+                            isMessageActive={isMessageActive}
+                        />
+                    </div>
+                </div>
+                <StreamInfo
+                    active={active}
+                    channel={channelName !== '' ? channelName : username}
+                    title={streamTitle}
+                    categories={streamCategories}
+                    likes={streamLikes}
+                    live={streamLive}
+                    dislikes={streamDislikes}
+                    home={home}
+                    play={startQuery}
+                    pause={stopQuery}
+                    // settings={openModal}
+                />
+            </div>
+            {error !== '' && (
+                <SmallModal
+                    onClose={() => setError('')}
+                    show={error !== ''}
+                    style={{ minWidth: '300px', maxWidth: '200px', maxHeight: '200px' }}
+                    title={'Error'}
+                    message={error}
+                    submitButton={'OK'}
+                    onSubmit={() => setError('')}
+                />
+            )}
+        </>
+    );
+}
+
+export default Dashboard;

frontend/src/screens/Navigation.jsx

@@ -0,0 +1,2 @@
+export const NavSignIn = '/';
+export const NavDashboard = '/dashboard';

frontend/src/screens/SignIn.css

@@ -0,0 +1,144 @@
+#SignIn {
+    align-items: center;
+    background-color: #f3f5f8;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100vh;
+}
+
+.add-channel-description {
+    font-family: sans-serif;
+    font-size: 12px;
+    padding-bottom: 5px;
+}
+
+.add-channel-error {
+    color: red;
+    font-family: sans-serif;
+    font-size: 12px;
+    padding-top: 5px;
+}
+
+.signin-input-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+    width: 50%;
+}
+
+.signin-input-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.signin-input {
+    border-bottom: 2px solid #D6E0EA;
+    border-left: 2px solid #D6E0EA;
+    border-right: none;
+    border-top: 2px solid #D6E0EA;
+    border-radius: 10rem 0rem 0rem 10rem;
+    background-color: white;
+    color: #061726;
+    outline: none;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 0;
+    padding-top: 0.5rem;
+    width: 70%;
+}
+
+.signin-button {
+    background-color: #85c742;
+    border: none;
+    border-radius: 0rem 10rem 10rem 0rem;
+    color: #061726;
+    cursor: pointer;
+    font-weight: bold;
+    text-decoration: none;
+    width: 20%;
+}
+
+.signin-button:hover {
+    background-color: #77b23b;
+}
+
+.signin-center {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 50%;
+    width: 50%;
+}
+
+.signin-show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    border-bottom: 2px solid #D6E0EA;
+    border-left: none;
+    border-right: 2px solid #D6E0EA;
+    border-top: 2px solid #D6E0EA;
+    color: #061726;
+    cursor: pointer;
+    font-weight: bold;
+    text-decoration: none;
+    width: 10%;
+}
+
+.signin-show-icon {
+    height: 16px;
+    width: 16px;
+}
+
+.signin-label {
+    color: #061726;
+    display: flex;
+    font-family: sans-serif;
+    font-weight: bold;
+    justify-content: center;
+    padding: 5px;
+    text-transform: uppercase;
+    width: 100%;
+}
+
+.signin-header {
+    align-items: center;
+    color: #061726;
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+    font-weight: bold;
+    height: 10%;
+    justify-content: center;
+    margin: 20px;
+    text-align: center;
+}
+
+.signin-footer {
+    align-items: center;
+    color: #061726;
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+    font-weight: bold;
+    height: 10%;
+    justify-content: center;
+    margin: 20px;
+    text-align: center;
+}
+
+.signin-title-text {
+    font-size: 20px;
+    margin: 0;
+}
+.signin-title-subtext {
+    font-size: 12px;
+    margin: 0;
+}

frontend/src/screens/SignIn.jsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { NavDashboard } from './Navigation';
+import { AddChannel, Config } from '../../wailsjs/go/main/App';
+import { Eye, EyeSlash } from '../assets/icons';
+import './SignIn.css';
+import ChannelList from '../components/ChannelList';
+import { SmallModal } from '../components/Modal';
+
+function SignIn() {
+    const [error, setError] = useState('');
+    const navigate = useNavigate();
+    const [config, setConfig] = useState({ channels: {} });
+    const [addChannelError, setAddChannelError] = useState('');
+    const [streamKey, setStreamKey] = useState('');
+    const updateStreamKey = (event) => setStreamKey(event.target.value);
+    const [showStreamKey, setShowStreamKey] = useState(false);
+    const updateShowStreamKey = () => setShowStreamKey(!showStreamKey);
+
+    useEffect(() => {
+        Config()
+            .then((response) => {
+                setConfig(response);
+            })
+            .catch((error) => {
+                // TODO: display error to user
+                setError('Error loading config: ' + error);
+                console.log('error getting config', error);
+            });
+    }, []);
+
+    const saveStreamKey = () => {
+        AddChannel(streamKey)
+            .then((response) => {
+                console.log(response);
+                setConfig(response);
+                setStreamKey('');
+            })
+            .catch((error) => {
+                console.log('error adding channel', error);
+                setAddChannelError(error);
+            });
+    };
+
+    const openStreamDashboard = (cid) => {
+        navigate(NavDashboard, { state: { cid: cid } });
+    };
+
+    return (
+        <>
+            {error !== '' && (
+                <SmallModal
+                    onClose={() => setError('')}
+                    show={error !== ''}
+                    style={{ minWidth: '300px', maxWidth: '300px', maxHeight: '200px' }}
+                    title={'Error'}
+                    message={error}
+                    submitButton={'OK'}
+                    onSubmit={() => setError('')}
+                />
+            )}
+            <div id='SignIn'>
+                <div className='signin-header'>
+                    <span className='signin-title-text'>Rum Goggles</span>
+                    <span className='signin-title-subtext'>Rumble Stream Dashboard</span>
+                </div>
+                <div className='signin-center'>
+                    <ChannelList
+                        channels={config.channels}
+                        openStreamDashboard={openStreamDashboard}
+                    />
+                </div>
+                <div className='signin-input-box'>
+                    <label className='signin-label'>Add Channel</label>
+                    <span className='add-channel-description'>
+                        Copy your API key from your Rumble account
+                    </span>
+                    <div className='signin-input-button'>
+                        <input
+                            id='StreamKey'
+                            className='signin-input'
+                            onChange={updateStreamKey}
+                            placeholder='Stream Key'
+                            type={showStreamKey ? 'text' : 'password'}
+                            value={streamKey}
+                        />
+                        <button className='signin-show' onClick={updateShowStreamKey}>
+                            <img
+                                className='signin-show-icon'
+                                src={showStreamKey ? EyeSlash : Eye}
+                            ></img>
+                        </button>
+                        <button className='signin-button' onClick={saveStreamKey}>
+                            Save
+                        </button>
+                    </div>
+                    <span className='add-channel-error'>
+                        {addChannelError ? addChannelError : '\u00A0'}
+                    </span>
+                </div>
+                <div className='signin-footer'></div>
+            </div>
+        </>
+    );
+}
+
+export default SignIn;

frontend/src/style.css

@@ -0,0 +1,10 @@
+html {
+}
+
+body {
+    margin: 0;
+}
+
+#app {
+    /* height: 100vh; */
+}

go.mod

@@ -1,13 +1,13 @@
-module travisty.io/tyler/rum-goggles/v1
+module github.com/tylertravisty/rum-goggles
 
 go 1.21
 
 toolchain go1.22.0
 
 require (
-	github.com/mattn/go-sqlite3 v1.14.22
-	github.com/wailsapp/wails/v2 v2.8.1
-	travisty.io/tyler/rumble-livestream-lib-go v0.0.0-20240614172924-f35ec00a1690
+	github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909
+	github.com/tylertravisty/rumble-livestream-lib-go v0.6.2
+	github.com/wailsapp/wails/v2 v2.7.1
 )
 
 require (
@@ -42,7 +42,4 @@ require (
 	golang.org/x/text v0.14.0 // indirect
 	gopkg.in/cenkalti/backoff.v1 v1.1.0 // indirect
 	gopkg.in/sourcemap.v1 v1.0.5 // indirect
-	travisty.io/tyler/go-utils v0.0.0-20240614172648-00b0b1a557b4 // indirect
 )
-
-// replace github.com/wailsapp/wails/v2 v2.8.0 => /home/tyler/dev/go/pkg/mod

go.sum

@@ -35,8 +35,6 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
-github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 h1:KoWmjvw+nsYOo29YJK9vDA65RGE3NrOnUtO7a+RF9HU=
 github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
@@ -54,10 +52,14 @@ github.com/samber/lo v1.38.1 h1:j2XEAqXKb09Am4ebOg31SpvzUTTs6EN3VfgeLUhPdXM=
 github.com/samber/lo v1.38.1/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
-github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/tkrajina/go-reflector v0.5.6 h1:hKQ0gyocG7vgMD2M3dRlYN6WBBOmdoOzJ6njQSepKdE=
 github.com/tkrajina/go-reflector v0.5.6/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
+github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909 h1:xrjIFqzGQXlCrCdMPpW6+SodGFSlrQ3ZNUCr3f5tF1g=
+github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909/go.mod h1:2W31Jhs9YSy7y500wsCOW0bcamGi9foQV1CKrfvfTxk=
+github.com/tylertravisty/rumble-livestream-lib-go v0.6.2 h1:SWz+1XnTF8KORr/tH2C7pSDmzh0qslRqzMzLCdDXdSk=
+github.com/tylertravisty/rumble-livestream-lib-go v0.6.2/go.mod h1:Odkqvsn+2eoWV3ePcj257Ga0bdOqV4JBTfOJcQ+Sqf8=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
@@ -67,8 +69,8 @@ github.com/wailsapp/go-webview2 v1.0.10 h1:PP5Hug6pnQEAhfRzLCoOh2jJaPdrqeRgJKZhy
 github.com/wailsapp/go-webview2 v1.0.10/go.mod h1:Uk2BePfCRzttBBjFrBmqKGJd41P6QIHeV9kTgIeOZNo=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/wails/v2 v2.8.1 h1:KAudNjlFaiXnDfFEfSNoLoibJ1ovoutSrJ8poerTPW0=
-github.com/wailsapp/wails/v2 v2.8.1/go.mod h1:EFUGWkUX3KofO4fmKR/GmsLy3HhPH7NbyOEaMt8lBF0=
+github.com/wailsapp/wails/v2 v2.7.1 h1:HAzp2c5ODOzsLC6ZMDVtNOB72ozM7/SJecJPB2Ur+UU=
+github.com/wailsapp/wails/v2 v2.7.1/go.mod h1:oIJVwwso5fdOgprBYWXBBqtx6PaSvxg8/KTQHNGkadc=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
 golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
@@ -106,7 +108,3 @@ gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-travisty.io/tyler/go-utils v0.0.0-20240614172648-00b0b1a557b4 h1:/InkkmR3O6lh63ckLJe14k1DRB6RuOZJv5TpfxGVRKQ=
-travisty.io/tyler/go-utils v0.0.0-20240614172648-00b0b1a557b4/go.mod h1:2inG89XtlVnppctG2WnKir4mWWN0zbF/PB9m1HXdTYI=
-travisty.io/tyler/rumble-livestream-lib-go v0.0.0-20240614172924-f35ec00a1690 h1:j6qZCouGr8+eDKnK4T5qGfwqbwfq8G06gTv25zbKfgY=
-travisty.io/tyler/rumble-livestream-lib-go v0.0.0-20240614172924-f35ec00a1690/go.mod h1:kawNZvHMCKVQ18Qt3jayiUGsHfH2tlovr65GXzVXVA0=

internal/api/api.go

@@ -0,0 +1,107 @@
+package api
+
+import (
+	"context"
+	"fmt"
+	"log"
+	"sync"
+	"time"
+
+	rumblelivestreamlib "github.com/tylertravisty/rumble-livestream-lib-go"
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+type Api struct {
+	ctx        context.Context
+	cancel     context.CancelFunc
+	cancelMu   sync.Mutex
+	logError   *log.Logger
+	logInfo    *log.Logger
+	querying   bool
+	queryingMu sync.Mutex
+}
+
+func NewApi(logError *log.Logger, logInfo *log.Logger) *Api {
+	return &Api{logError: logError, logInfo: logInfo}
+}
+
+func (a *Api) Startup(ctx context.Context) {
+	a.ctx = ctx
+}
+
+func (a *Api) Start(url string, interval time.Duration) error {
+	a.logInfo.Println("Api.Start")
+	if url == "" {
+		return fmt.Errorf("empty stream key")
+	}
+
+	a.queryingMu.Lock()
+	start := !a.querying
+	a.querying = true
+	a.queryingMu.Unlock()
+
+	if start {
+		a.logInfo.Println("Start querying")
+		ctx, cancel := context.WithCancel(context.Background())
+		a.cancelMu.Lock()
+		a.cancel = cancel
+		a.cancelMu.Unlock()
+		go a.start(ctx, url, interval)
+	} else {
+		a.logInfo.Println("Querying already started")
+	}
+
+	return nil
+}
+
+func (a *Api) Stop() {
+	a.logInfo.Println("Stop querying")
+	a.cancelMu.Lock()
+	if a.cancel != nil {
+		a.cancel()
+	}
+	a.cancelMu.Unlock()
+}
+
+func (a *Api) start(ctx context.Context, url string, interval time.Duration) {
+	for {
+		a.query(url)
+		timer := time.NewTimer(interval)
+		select {
+		case <-ctx.Done():
+			a.queryingMu.Lock()
+			a.querying = false
+			a.queryingMu.Unlock()
+			timer.Stop()
+			return
+		case <-timer.C:
+		}
+	}
+}
+
+func (a *Api) query(url string) {
+	// a.logInfo.Println("QueryAPI")
+	client := rumblelivestreamlib.Client{ApiKey: url}
+	resp, err := client.Request()
+	if err != nil {
+		a.logError.Println("api: error executing client request:", err)
+		a.Stop()
+		runtime.EventsEmit(a.ctx, "QueryResponseError", "Failed to query API")
+		return
+	}
+
+	// resp := &rumblelivestreamlib.LivestreamResponse{}
+
+	// resp.Followers.RecentFollowers = append(resp.Followers.RecentFollowers, rumblelivestreamlib.Follower{"tyler-follow", "2023-12-12T21:53:34-04:00"})
+	// resp.Subscribers.RecentSubscribers = append(resp.Subscribers.RecentSubscribers, rumblelivestreamlib.Subscriber{"tyler-sub", "tyler-sub", 500, 5, "2023-12-14T21:53:34-04:00"})
+	// resp.Subscribers.RecentSubscribers = append(resp.Subscribers.RecentSubscribers, rumblelivestreamlib.Subscriber{"tyler-sub", "tyler-sub", 500, 5, "2023-12-13T21:53:34-04:00"})
+	// resp.Subscribers.RecentSubscribers = append(resp.Subscribers.RecentSubscribers, rumblelivestreamlib.Subscriber{"tyler-sub", "tyler-sub", 500, 5, "2023-11-13T21:53:34-04:00"})
+	// resp.Livestreams = []rumblelivestreamlib.Livestream{
+	// 	{
+	// 		CreatedOn:   "2023-12-16T16:13:30+00:00",
+	// 		WatchingNow: 4},
+	// }
+	runtime.EventsEmit(a.ctx, "QueryResponse", &resp)
+}
+
+// TODO: if start errors, send event

internal/chatbot/chatbot.go

@@ -0,0 +1,506 @@
+package chatbot
+
+import (
+	"bufio"
+	"bytes"
+	"context"
+	"crypto/rand"
+	"fmt"
+	"html/template"
+	"log"
+	"math/big"
+	"net/http"
+	"os"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/tylertravisty/rum-goggles/internal/config"
+	rumblelivestreamlib "github.com/tylertravisty/rumble-livestream-lib-go"
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+type ChatBot struct {
+	ctx                context.Context
+	cancelChatStream   context.CancelFunc
+	cancelChatStreamMu sync.Mutex
+	channelID          int
+	client             *rumblelivestreamlib.Client
+	commands           map[string]chan rumblelivestreamlib.ChatView
+	commandsMu         sync.Mutex
+	Cfg                config.ChatBot
+	logError           *log.Logger
+	messages           map[string]*message
+	messagesMu         sync.Mutex
+}
+
+type message struct {
+	cancel              context.CancelFunc
+	cancelMu            sync.Mutex
+	asChannel           bool
+	command             string
+	id                  string
+	interval            time.Duration
+	onCommand           bool
+	onCommandFollower   bool
+	onCommandRantAmount int
+	OnCommandSubscriber bool
+	text                string
+	textFromFile        []string
+}
+
+func NewChatBot(ctx context.Context, cfg config.ChatBot, logError *log.Logger) (*ChatBot, error) {
+	// client, err := rumblelivestreamlib.NewClient("", validUrl(streamUrl))
+	client, err := rumblelivestreamlib.NewClient(cfg.Session.Client)
+
+	if err != nil {
+		return nil, fmt.Errorf("chatbot: error creating new client: %v", err)
+	}
+
+	return &ChatBot{ctx: ctx, client: client, Cfg: cfg, commands: map[string]chan rumblelivestreamlib.ChatView{}, logError: logError, messages: map[string]*message{}}, nil
+}
+
+func validUrl(url string) string {
+	valid := url
+	if !strings.HasPrefix(valid, "https://") {
+		valid = "https://" + valid
+	}
+
+	return valid
+}
+
+func (cb *ChatBot) StartMessage(id string) error {
+	msg, exists := cb.Cfg.Messages[id]
+	if !exists {
+		return fmt.Errorf("chatbot: message does not exist")
+	}
+
+	cb.messagesMu.Lock()
+	defer cb.messagesMu.Unlock()
+	m, exists := cb.messages[id]
+	if exists {
+		m.stop()
+		delete(cb.messages, id)
+	}
+
+	textFromFile := []string{}
+	if msg.TextFile != "" {
+		file, err := os.Open(msg.TextFile)
+		if err != nil {
+			return fmt.Errorf("chatbot: error opening file with responses: %v", err)
+		}
+		defer file.Close()
+
+		scanner := bufio.NewScanner(file)
+		for scanner.Scan() {
+			line := strings.TrimSpace(scanner.Text())
+			if line == "" {
+				continue
+			}
+			textFromFile = append(textFromFile, line)
+		}
+	}
+
+	m = &message{
+		asChannel:           msg.AsChannel,
+		command:             msg.Command,
+		id:                  msg.ID,
+		interval:            msg.Interval,
+		onCommand:           msg.OnCommand,
+		onCommandFollower:   msg.OnCommandFollower,
+		onCommandRantAmount: msg.OnCommandRantAmount,
+		OnCommandSubscriber: msg.OnCommandSubscriber,
+		text:                msg.Text,
+		textFromFile:        textFromFile,
+	}
+
+	ctx, cancel := context.WithCancel(context.Background())
+	m.cancelMu.Lock()
+	m.cancel = cancel
+	m.cancelMu.Unlock()
+	if msg.OnCommand {
+		go cb.startCommand(ctx, m)
+	} else {
+		go cb.startMessage(ctx, m)
+	}
+
+	cb.messages[id] = m
+
+	return nil
+}
+
+func (cb *ChatBot) startCommand(ctx context.Context, m *message) {
+	cb.commandsMu.Lock()
+	ch := make(chan rumblelivestreamlib.ChatView)
+	cb.commands[m.command] = ch
+	cb.commandsMu.Unlock()
+
+	var prev time.Time
+	for {
+		runtime.EventsEmit(cb.ctx, "ChatBotCommandActive-"+m.id, m.id)
+		// TODO: if error, emit error to user, stop loop?
+		select {
+		case <-ctx.Done():
+			runtime.EventsEmit(cb.ctx, "ChatBotMessageError-"+m.id, m.id)
+			return
+		case cv := <-ch:
+			if m.onCommandFollower && !cv.IsFollower {
+				break
+			}
+
+			subscriber := false
+			for _, badge := range cv.Badges {
+				if badge == "recurring_subscription" || badge == "locals_supporter" {
+					subscriber = true
+				}
+			}
+
+			if m.OnCommandSubscriber && !subscriber {
+				break
+			}
+
+			// if m.onCommandRantAmount > 0 && cv.Rant < m.onCommandRantAmount * 100 {
+			// 	break
+			// }
+
+			if cv.Rant < m.onCommandRantAmount*100 {
+				break
+			}
+
+			// TODO: parse !command
+			now := time.Now()
+			if now.Sub(prev) < m.interval*time.Second {
+				break
+			}
+
+			err := cb.chatCommand(m, cv)
+			if err != nil {
+				cb.logError.Println("error sending chat:", err)
+				cb.StopMessage(m.id)
+				runtime.EventsEmit(cb.ctx, "ChatBotCommandError-"+m.id, m.id)
+				return
+			} else {
+				prev = now
+				// runtime.EventsEmit(cb.ctx, "ChatBotCommandActive-"+m.id, m.id)
+			}
+		}
+	}
+}
+
+func (cb *ChatBot) startMessage(ctx context.Context, m *message) {
+	for {
+		// TODO: if error, emit error to user, stop loop?
+		err := cb.chat(m)
+		if err != nil {
+			cb.logError.Println("error sending chat:", err)
+			cb.StopMessage(m.id)
+			runtime.EventsEmit(cb.ctx, "ChatBotMessageError-"+m.id, m.id)
+			// TODO: stop this loop?
+		} else {
+			runtime.EventsEmit(cb.ctx, "ChatBotMessageActive-"+m.id, m.id)
+		}
+
+		timer := time.NewTimer(m.interval * time.Second)
+		select {
+		case <-ctx.Done():
+			timer.Stop()
+			runtime.EventsEmit(cb.ctx, "ChatBotMessageError-"+m.id, m.id)
+			return
+		case <-timer.C:
+		}
+	}
+}
+
+func (cb *ChatBot) chatCommand(m *message, cv rumblelivestreamlib.ChatView) error {
+	if cb.client == nil {
+		return fmt.Errorf("client is nil")
+	}
+
+	msgText := m.text
+	if len(m.textFromFile) > 0 {
+		n, err := rand.Int(rand.Reader, big.NewInt(int64(len(m.textFromFile))))
+		if err != nil {
+			return fmt.Errorf("error generating random number: %v", err)
+		}
+
+		msgText = m.textFromFile[n.Int64()]
+	}
+
+	tmpl, err := template.New("chat").Parse(msgText)
+	if err != nil {
+		return fmt.Errorf("error creating template: %v", err)
+	}
+
+	fields := struct {
+		ChannelName string
+		Username    string
+		Rant        int
+	}{
+		ChannelName: cv.ChannelName,
+		Username:    cv.Username,
+		Rant:        cv.Rant / 100,
+	}
+
+	var textB bytes.Buffer
+	err = tmpl.Execute(&textB, fields)
+	if err != nil {
+		return fmt.Errorf("error executing template: %v", err)
+	}
+	text := textB.String()
+
+	//err := cb.client.Chat(m.asChannel, text)
+	var channelID *int
+	if m.asChannel {
+		cid := cb.channelID
+		channelID = &cid
+	}
+
+	err = cb.client.Chat(text, channelID)
+	if err != nil {
+		return fmt.Errorf("error sending chat: %v", err)
+	}
+
+	return nil
+}
+
+func (cb *ChatBot) chat(m *message) error {
+	if cb.client == nil {
+		return fmt.Errorf("client is nil")
+	}
+
+	text := m.text
+	if len(m.textFromFile) > 0 {
+		n, err := rand.Int(rand.Reader, big.NewInt(int64(len(m.textFromFile))))
+		if err != nil {
+			return fmt.Errorf("error generating random number: %v", err)
+		}
+
+		text = m.textFromFile[n.Int64()]
+	}
+
+	//err := cb.client.Chat(m.asChannel, text)
+	var channelID *int
+	if m.asChannel {
+		cid := cb.channelID
+		channelID = &cid
+	}
+
+	err := cb.client.Chat(text, channelID)
+	if err != nil {
+		return fmt.Errorf("error sending chat: %v", err)
+	}
+
+	return nil
+}
+
+func (cb *ChatBot) StartAllMessages() error {
+	for _, msg := range cb.Cfg.Messages {
+		err := cb.StartMessage(msg.ID)
+		if err != nil {
+			return fmt.Errorf("error starting message: %v", err)
+		}
+	}
+
+	return nil
+}
+
+func (cb *ChatBot) StopAllMessages() error {
+	cb.messagesMu.Lock()
+	defer cb.messagesMu.Unlock()
+
+	for id, m := range cb.messages {
+		m.stop()
+		delete(cb.messages, id)
+
+		if m.command != "" && m.onCommand {
+			cb.commandsMu.Lock()
+			ch, exists := cb.commands[m.command]
+			if exists {
+				close(ch)
+				delete(cb.commands, m.command)
+			}
+			cb.commandsMu.Unlock()
+		}
+	}
+
+	return nil
+}
+
+func (cb *ChatBot) StopMessage(id string) error {
+	cb.messagesMu.Lock()
+	defer cb.messagesMu.Unlock()
+
+	m, exists := cb.messages[id]
+	if exists {
+		m.stop()
+		delete(cb.messages, id)
+
+		if m.command != "" && m.onCommand {
+			cb.commandsMu.Lock()
+			defer cb.commandsMu.Unlock()
+			ch, exists := cb.commands[m.command]
+			if exists {
+				close(ch)
+				delete(cb.commands, m.command)
+			}
+		}
+	}
+
+	return nil
+}
+
+func (m *message) stop() {
+	m.cancelMu.Lock()
+	if m.cancel != nil {
+		m.cancel()
+	}
+	m.cancelMu.Unlock()
+}
+
+func (cb *ChatBot) LoggedIn() (bool, error) {
+	if cb.client == nil {
+		return false, fmt.Errorf("chatbot: client is nil")
+	}
+
+	loggedIn, err := cb.client.LoggedIn()
+	if err != nil {
+		return false, fmt.Errorf("chatbot: error checking if chat bot is logged in: %v", err)
+	}
+
+	return loggedIn, nil
+}
+
+func (cb *ChatBot) Login(username string, password string) ([]*http.Cookie, error) {
+	if cb.client == nil {
+		return nil, fmt.Errorf("chatbot: client is nil")
+	}
+
+	cookies, err := cb.client.Login(username, password)
+	if err != nil {
+		return nil, fmt.Errorf("chatbot: error logging in: %v", err)
+	}
+
+	return cookies, nil
+}
+
+func (cb *ChatBot) Logout() error {
+	if cb.client == nil {
+		return fmt.Errorf("chatbot: client is nil")
+	}
+
+	err := cb.client.Logout()
+	if err != nil {
+		return fmt.Errorf("chatbot: error logging out: %v", err)
+	}
+
+	return nil
+}
+
+func (cb *ChatBot) StartChatStream() error {
+	if cb.client == nil {
+		return fmt.Errorf("chatbot: client is nil")
+	}
+
+	ci, err := cb.client.ChatInfo(true)
+	if err != nil {
+		return fmt.Errorf("chatbot: error getting chat info: %v", err)
+	}
+	cb.channelID = ci.ChannelID
+
+	ctx, cancel := context.WithCancel(context.Background())
+	cb.cancelChatStreamMu.Lock()
+	cb.cancelChatStream = cancel
+	cb.cancelChatStreamMu.Unlock()
+
+	go cb.startChatStream(ctx)
+
+	// err = cb.client.StartChatStream(cb.handleChat, cb.handleError)
+	// if err != nil {
+	// 	return fmt.Errorf("chatbot: error starting chat stream: %v", err)
+	// }
+
+	return nil
+}
+
+func (cb *ChatBot) startChatStream(ctx context.Context) {
+	for {
+		err := cb.client.StartChatStream(cb.handleChat, cb.handleError)
+		if err != nil {
+			cb.logError.Println("error starting chat stream:", err)
+			runtime.EventsEmit(cb.ctx, "ChatBotChatStreamError", "Error starting chat stream.")
+			return
+		}
+		select {
+		case <-time.After(90 * time.Minute):
+			cb.client.StopChatStream()
+			break
+		case <-ctx.Done():
+			cb.client.StopChatStream()
+			return
+		}
+	}
+}
+
+func (cb *ChatBot) StopChatStream() error {
+	if cb.client == nil {
+		return fmt.Errorf("chatbot: client is nil")
+	}
+
+	// TODO: should a panic be caught here?
+	cb.cancelChatStreamMu.Lock()
+	if cb.cancelChatStream != nil {
+		cb.cancelChatStream()
+	} else {
+		cb.client.StopChatStream()
+	}
+	cb.cancelChatStreamMu.Unlock()
+
+	return nil
+}
+
+func (cb *ChatBot) RestartChatStream() error {
+	if cb.client == nil {
+		return fmt.Errorf("chatbot: client is nil")
+	}
+
+	cb.client.StopChatStream()
+
+	err := cb.client.StartChatStream(cb.handleChat, cb.handleError)
+	if err != nil {
+		return fmt.Errorf("chatbot: error starting chat stream: %v", err)
+	}
+
+	return nil
+}
+
+func (cb *ChatBot) handleChat(cv rumblelivestreamlib.ChatView) {
+	// runtime.EventsEmit(cb.ctx, "ChatMessageReceived", cv)
+
+	if cv.Type != "init" {
+		cb.handleCommand(cv)
+	}
+}
+
+func (cb *ChatBot) handleCommand(cv rumblelivestreamlib.ChatView) {
+	cb.commandsMu.Lock()
+	defer cb.commandsMu.Unlock()
+
+	words := strings.Split(cv.Text, " ")
+	first := words[0]
+	cmd, exists := cb.commands[first]
+	if !exists {
+		return
+	}
+
+	select {
+	case cmd <- cv:
+		return
+	default:
+		return
+	}
+}
+
+func (cb *ChatBot) handleError(err error) {
+	cb.logError.Println("error handling chat message:", err)
+	// runtime.EventsEmit(cb.ctx, "ChatError", err)
+}

internal/config/config.go

@@ -0,0 +1,241 @@
+package config
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"path/filepath"
+	"runtime"
+	"time"
+
+	"github.com/tylertravisty/go-utils/random"
+	rumblelivestreamlib "github.com/tylertravisty/rumble-livestream-lib-go"
+)
+
+const (
+	CIDLen          = 8
+	DefaultInterval = 10
+
+	configDir    = ".rum-goggles"
+	configDirWin = "RumGoggles"
+	configFile   = "config.json"
+	logFile      = "logs.txt"
+)
+
+func LogFile() (*os.File, error) {
+	dir, err := buildConfigDir()
+	if err != nil {
+		return nil, fmt.Errorf("config: error getting config directory: %v", err)
+	}
+
+	err = os.MkdirAll(dir, 0750)
+	if err != nil {
+		return nil, fmt.Errorf("config: error making config directory: %v", err)
+	}
+
+	fp := filepath.Join(dir, logFile)
+
+	f, err := os.OpenFile(fp, os.O_WRONLY|os.O_APPEND|os.O_CREATE, 0644)
+	if err != nil {
+		return nil, fmt.Errorf("config: error opening log file: %v", err)
+	}
+
+	return f, nil
+}
+
+func buildConfigDir() (string, error) {
+	userDir, err := userDir()
+	if err != nil {
+		return "", fmt.Errorf("error getting user directory: %v", err)
+	}
+
+	var dir string
+	switch runtime.GOOS {
+	case "windows":
+		dir = filepath.Join(userDir, configDirWin)
+	default:
+		dir = filepath.Join(userDir, configDir)
+	}
+
+	return dir, nil
+}
+
+func userDir() (string, error) {
+	var dir string
+	var err error
+	switch runtime.GOOS {
+	case "windows":
+		dir, err = os.UserCacheDir()
+	default:
+		dir, err = os.UserHomeDir()
+	}
+
+	return dir, err
+}
+
+type ChatMessage struct {
+	ID                  string        `json:"id"`
+	AsChannel           bool          `json:"as_channel"`
+	Command             string        `json:"command"`
+	Interval            time.Duration `json:"interval"`
+	OnCommand           bool          `json:"on_command"`
+	OnCommandFollower   bool          `json:"on_command_follower"`
+	OnCommandRantAmount int           `json:"on_command_rant_amount"`
+	OnCommandSubscriber bool          `json:"on_command_subscriber"`
+	Text                string        `json:"text"`
+	TextFile            string        `json:"text_file"`
+}
+
+type ChatBotSession struct {
+	Client   rumblelivestreamlib.NewClientOptions `json:"client"`
+	Username string                               `json:"username"`
+}
+
+type ChatBot struct {
+	Messages map[string]ChatMessage `json:"messages"`
+	Session  ChatBotSession         `json:"session"`
+	// Commands []ChatCommand
+}
+
+type Channel struct {
+	ID       string        `json:"id"`
+	ApiUrl   string        `json:"api_url"`
+	Name     string        `json:"name"`
+	Interval time.Duration `json:"interval"`
+	ChatBot  ChatBot       `json:"chat_bot"`
+}
+
+func (a *App) NewChannel(url string, name string) (string, error) {
+	for {
+		id, err := random.String(CIDLen)
+		if err != nil {
+			return "", fmt.Errorf("config: error generating ID: %v", err)
+		}
+
+		if _, exists := a.Channels[id]; !exists {
+			a.Channels[id] = Channel{id, url, name, DefaultInterval, ChatBot{Messages: map[string]ChatMessage{}}}
+			return id, nil
+		}
+	}
+}
+
+func (a *App) DeleteChatMessage(cid string, cm ChatMessage) error {
+	channel, exists := a.Channels[cid]
+	if !exists {
+		return fmt.Errorf("config: channel does not exist")
+	}
+
+	_, exists = channel.ChatBot.Messages[cm.ID]
+	if !exists {
+		return fmt.Errorf("config: message does not exist")
+	}
+
+	delete(channel.ChatBot.Messages, cm.ID)
+
+	return nil
+}
+
+func (a *App) NewChatMessage(cid string, cm ChatMessage) (string, error) {
+	if _, exists := a.Channels[cid]; !exists {
+		return "", fmt.Errorf("config: channel does not exist")
+	}
+
+	for {
+		id, err := random.String(CIDLen)
+		if err != nil {
+			return "", fmt.Errorf("config: error generating ID: %v", err)
+		}
+
+		_, exists := a.Channels[cid].ChatBot.Messages[id]
+		if !exists {
+			cm.ID = id
+			a.Channels[cid].ChatBot.Messages[id] = cm
+			return id, nil
+		}
+	}
+}
+
+func (a *App) UpdateChatMessage(cid string, cm ChatMessage) (string, error) {
+	channel, exists := a.Channels[cid]
+	if !exists {
+		return "", fmt.Errorf("config: channel does not exist")
+	}
+
+	_, exists = channel.ChatBot.Messages[cm.ID]
+	if !exists {
+		return "", fmt.Errorf("config: message does not exist")
+	}
+
+	channel.ChatBot.Messages[cm.ID] = cm
+
+	return cm.ID, nil
+}
+
+type App struct {
+	Channels map[string]Channel `json:"channels"`
+}
+
+func Load() (*App, error) {
+	dir, err := buildConfigDir()
+	if err != nil {
+		return nil, fmt.Errorf("config: error getting config directory: %v", err)
+	}
+
+	fp := filepath.Join(dir, configFile)
+	app, err := load(fp)
+	if err != nil {
+		return nil, fmt.Errorf("config: error loading config: %w", err)
+	}
+
+	return app, nil
+}
+
+func load(filepath string) (*App, error) {
+	f, err := os.Open(filepath)
+	if err != nil {
+		return nil, fmt.Errorf("error opening file: %w", err)
+	}
+
+	var app App
+	decoder := json.NewDecoder(f)
+	err = decoder.Decode(&app)
+	if err != nil {
+		return nil, fmt.Errorf("error decoding file into json: %v", err)
+	}
+
+	return &app, nil
+}
+
+func (a *App) Save() error {
+	dir, err := buildConfigDir()
+	if err != nil {
+		return fmt.Errorf("config: error getting config directory: %v", err)
+	}
+
+	err = os.MkdirAll(dir, 0750)
+	if err != nil {
+		return fmt.Errorf("config: error making config directory: %v", err)
+	}
+
+	fp := filepath.Join(dir, configFile)
+	err = a.save(fp)
+	if err != nil {
+		return fmt.Errorf("config: error saving config: %v", err)
+	}
+
+	return nil
+}
+
+func (app *App) save(filepath string) error {
+	b, err := json.MarshalIndent(app, "", "\t")
+	if err != nil {
+		return fmt.Errorf("error encoding config into json: %v", err)
+	}
+
+	err = os.WriteFile(filepath, b, 0666)
+	if err != nil {
+		return fmt.Errorf("error writing config file: %v", err)
+	}
+
+	return nil
+}

licenses/github.com/FortAwesome/Font-Awesome/LICENSE.txt

@@ -1,165 +0,0 @@
-Fonticons, Inc. (https://fontawesome.com)
-
---------------------------------------------------------------------------------
-
-Font Awesome Free License
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
---------------------------------------------------------------------------------
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-
-The Font Awesome Free download is licensed under a Creative Commons
-Attribution 4.0 International License and applies to all icons packaged
-as SVG and JS file types.
-
---------------------------------------------------------------------------------
-
-# Fonts: SIL OFL 1.1 License
-
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.
-
-Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
-with Reserved Font Name: "Font Awesome".
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-SIL OPEN FONT LICENSE
-Version 1.1 - 26 February 2007
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting — in part or in whole — any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
-
---------------------------------------------------------------------------------
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-Copyright 2024 Fonticons, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
---------------------------------------------------------------------------------
-
-# Attribution
-
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
---------------------------------------------------------------------------------
-
-# Brand Icons
-
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**

main.go

@@ -2,13 +2,10 @@ package main
 
 import (
 	"embed"
-	"net/http"
-	"strings"
 
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
-	"travisty.io/tyler/rum-goggles/v1/internal/config"
 )
 
 //go:embed all:frontend/dist
@@ -25,10 +22,8 @@ func main() {
 		Height: 768,
 		AssetServer: &assetserver.Options{
 			Assets: assets,
-			Handler: http.HandlerFunc(GetImage),
 		},
 		BackgroundColour: &options.RGBA{R: 255, G: 255, B: 255, A: 255},
-		OnShutdown:       app.shutdown,
 		OnStartup:        app.startup,
 		Bind: []interface{}{
 			app,
@@ -39,12 +34,3 @@ func main() {
 		println("Error:", err.Error())
 	}
 }
-
-func GetImage(w http.ResponseWriter, r *http.Request) {
-	path := strings.Replace(r.RequestURI, "wails://wails", "", 1)
-	prefix, err := config.ImageDir()
-	if err != nil {
-		return
-	}
-	http.ServeFile(w, r, prefix+path)
-}

package-lock.json

@@ -1,17 +1,18 @@
 {
-  "name": "v1",
+  "name": "rum-goggles.v0.4.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "dependencies": {
-        "react-router-dom": "^6.22.1"
+      "devDependencies": {
+        "react-router-dom": "^6.20.1"
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
-      "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
+      "dev": true,
       "engines": {
         "node": ">=14.0.0"
       }
@@ -20,12 +21,14 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "peer": true
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -38,6 +41,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dev": true,
       "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -50,6 +54,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dev": true,
       "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
@@ -60,11 +65,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz",
-      "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
+      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
+      "dev": true,
       "dependencies": {
-        "@remix-run/router": "1.15.1"
+        "@remix-run/router": "1.13.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -74,12 +80,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz",
-      "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
+      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
+      "dev": true,
       "dependencies": {
-        "@remix-run/router": "1.15.1",
-        "react-router": "6.22.1"
+        "@remix-run/router": "1.13.1",
+        "react-router": "6.20.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -93,6 +100,7 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dev": true,
       "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -101,20 +109,23 @@
   },
   "dependencies": {
     "@remix-run/router": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
-      "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w=="
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
+      "dev": true
     },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "peer": true
     },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "peer": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -124,6 +135,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dev": true,
       "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
@@ -133,6 +145,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dev": true,
       "peer": true,
       "requires": {
         "loose-envify": "^1.1.0",
@@ -140,26 +153,29 @@
       }
     },
     "react-router": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz",
-      "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
+      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
+      "dev": true,
       "requires": {
-        "@remix-run/router": "1.15.1"
+        "@remix-run/router": "1.13.1"
       }
     },
     "react-router-dom": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz",
-      "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
+      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
+      "dev": true,
       "requires": {
-        "@remix-run/router": "1.15.1",
-        "react-router": "6.22.1"
+        "@remix-run/router": "1.13.1",
+        "react-router": "6.20.1"
       }
     },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dev": true,
       "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "react-router-dom": "^6.20.1"
+  }
+}

v1/.gitignore

@@ -1,6 +0,0 @@
-build/bin
-build/darwin
-build/windows
-node_modules
-frontend/dist
-frontend/wailsjs

v1/frontend/src/Navigation.jsx

@@ -1,3 +0,0 @@
-export const NavDashboard = '/dashboard';
-export const NavSignIn = '/signin';
-export const NavStartup = '/';

v1/frontend/src/assets/icons/Font-Awesome/LICENSE.txt

@@ -1,165 +0,0 @@
-Fonticons, Inc. (https://fontawesome.com)
-
---------------------------------------------------------------------------------
-
-Font Awesome Free License
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
---------------------------------------------------------------------------------
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-
-The Font Awesome Free download is licensed under a Creative Commons
-Attribution 4.0 International License and applies to all icons packaged
-as SVG and JS file types.
-
---------------------------------------------------------------------------------
-
-# Fonts: SIL OFL 1.1 License
-
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.
-
-Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
-with Reserved Font Name: "Font Awesome".
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-SIL OPEN FONT LICENSE
-Version 1.1 - 26 February 2007
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting — in part or in whole — any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
-
---------------------------------------------------------------------------------
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-Copyright 2024 Fonticons, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
---------------------------------------------------------------------------------
-
-# Attribution
-
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
---------------------------------------------------------------------------------
-
-# Brand Icons
-
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**

v1/frontend/src/assets/icons/twbs/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2019-2021 The Bootstrap Authors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

v1/frontend/src/assets/index.js

@@ -1,51 +0,0 @@
-import chess_rook from './icons/Font-Awesome/chess-rook.png';
-import chevron_down from './icons/twbs/chevron-down.png';
-import chevron_left from './icons/twbs/chevron-left.png';
-import chevron_right from './icons/twbs/chevron-right.png';
-import circle_green_background from './icons/twbs/circle-green-background.png';
-import circle_red_background from './icons/twbs/circle-red-background.png';
-import eye from './icons/twbs/eye.png';
-import eye_red from './icons/twbs/eye-red.png';
-import eye_slash from './icons/twbs/eye-slash.png';
-import gear_fill from './icons/twbs/gear-fill.png';
-import gear_fill_white from './icons/twbs/gear-fill-white.png';
-import heart from './icons/twbs/heart-fill.png';
-import pause from './icons/twbs/pause-circle-green.png';
-import pause_big from './icons/twbs/pause-fill.png';
-import play from './icons/twbs/play-circle-green.png';
-import play_big from './icons/twbs/play-fill.png';
-import play_big_green from './icons/twbs/play-fill-green.png';
-import plus_circle from './icons/twbs/plus-circle-fill.png';
-import robot from './icons/Font-Awesome/robot.png';
-import star from './icons/twbs/star-fill.png';
-import stop_big_red from './icons/twbs/stop-fill-red.png';
-import thumbs_down from './icons/twbs/hand-thumbs-down-fill.png';
-import thumbs_up from './icons/twbs/hand-thumbs-up-fill.png';
-import x_lg from './icons/twbs/x-lg.png';
-import logo from './logo/logo.png';
-
-export const ChessRook = chess_rook;
-export const ChevronLeft = chevron_left;
-export const ChevronDown = chevron_down;
-export const ChevronRight = chevron_right;
-export const CircleGreenBackground = circle_green_background;
-export const CircleRedBackground = circle_red_background;
-export const Eye = eye;
-export const EyeRed = eye_red;
-export const EyeSlash = eye_slash;
-export const Gear = gear_fill;
-export const GearWhite = gear_fill_white;
-export const Heart = heart;
-export const Logo = logo;
-export const Pause = pause;
-export const PauseBig = pause_big;
-export const Play = play;
-export const PlayBig = play_big;
-export const PlayBigGreen = play_big_green;
-export const PlusCircle = plus_circle;
-export const Robot = robot;
-export const Star = star;
-export const StopBigRed = stop_big_red;
-export const ThumbsDown = thumbs_down;
-export const ThumbsUp = thumbs_up;
-export const XLg = x_lg;

v1/frontend/src/components/ChatBot.css

@@ -1,588 +0,0 @@
-.chatbot {
-    background-color: #344453;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-width: 500px;
-    width: 100%;
-}
-
-.chatbot-header {
-    align-items: center;
-    border-bottom: 1px solid #061726;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    min-height: 55px;
-    justify-content: space-between;
-    padding: 10px 20px;
-    width: 100%;
-}
-
-.chatbot-header-button {
-    align-items: center;
-    background-color: #344453;
-    border: none;
-    display: flex;
-    justify-content: center;
-    padding-left: 10px;
-    padding-right: 0px;
-}
-
-.chatbot-header-button:hover {
-    cursor: pointer;
-}
-
-.chatbot-header-button-icon {
-    height: 24px;
-    width: 24px;
-}
-
-.chatbot-header-left {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.chatbot-header-icon {
-    height: 28px;
-    width: 28px;
-    padding-right: 10px;
-}
-
-.chatbot-header-icon-back {
-    height: 28px;
-    width: 28px;
-}
-
-.chatbot-header-icon-back:hover {
-    /* background-color: #415568; */
-    cursor: pointer;
-}
-
-.chatbot-header-right {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.chatbot-header-title {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 20px;
-    font-weight: bold;
-    max-width: 250px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.chatbot-list {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0px;
-}
-
-.chatbot-list-item-button {
-    align-items: center;
-    background-color: #344453;
-    border: none;
-    border-radius: 3px;
-    display: flex;
-    justify-content: start;
-    padding: 15px 10px;
-    width: 100%;
-}
-
-.chatbot-list-item-button:hover {
-    background-color: #415568;
-    cursor: pointer;
-}
-
-.chatbot-list-item {
-}
-
-.chatbot-list-item-name {
-    color: #eee;
-    display: inline-block;
-    font-family: sans-serif;
-    font-size: 18px;
-    font-weight: bold;
-    max-width: 300px;
-    overflow: hidden;
-    padding: 0px 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    /* width: 100%; */
-}
-
-.chatbot-modal-form {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-}
-
-.chatbot-modal-input {
-    background-color: #061726;
-    border: none;
-    border-radius: 5px;
-    box-sizing: border-box;
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 10px;
-    resize: none;
-    width: 100%;
-}
-
-.chatbot-modal-label {
-    color: white;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    width: 100%;
-}
-
-.chatbot-modal-label-warning {
-    color: #f23160;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    width: 100%;
-}
-
-.chatbot-modal-description {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    text-align: center;
-    width: 100%;
-}
-
-.chatbot-modal-description-warning {
-    color: #f23160;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    text-align: center;
-    width: 100%;
-}
-
-.chatbot-modal-event-body {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.chatbot-modal-event-body-bottom {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 50%;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.chatbot-modal-event-body-top {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 50%;
-    justify-content: space-evenly;
-    width: 100%;
-}
-
-.chatbot-modal-event-setting {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.chatbot-modal-event-options {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    height: 158.5px;
-    width: 100%;
-}
-
-.chatbot-modal-event-options-follow {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    height: 100%;
-    width: 100%;
-}
-
-.chatbot-modal-event-options-label {
-    align-items: center;
-    color: #eee;
-    display: flex;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.chatbot-modal-event-options-label-warning {
-    align-items: center;
-    color: #f23160;
-    display: flex;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.chatbot-modal-option-label {
-    align-items: center;
-    color: #eee;
-    display: flex;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-    height: 32px;
-}
-
-.chatbot-modal-option-label-warning {
-    align-items: center;
-    color: #f23160;
-    display: flex;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-style: italic;
-    font-weight: bold;
-    height: 32px;
-}
-
-.chatbot-modal-pages {
-    background-color: white;
-    /* border: 1px solid #D6E0EA; */
-    border-radius: 5px;
-    height: 100%;
-    overflow: auto;
-    width: 80%;
-}
-
-.chatbot-modal-page {
-    align-items: center;
-    display: flex;
-}
-
-.chatbot-modal-page-selected {
-    background-color: #85c742;
-}
-
-.chatbot-modal-page-button {
-    background-color: white;
-    border: none;
-    border-radius: 5px;
-    color: #061726;
-    font-family: sans-serif;
-    font-size: 18px;
-    font-weight: bold;
-    overflow: hidden;
-    padding: 10px 10px;
-    text-align: left;
-    white-space: nowrap;
-    width: 100%;
-}
-
-.chatbot-modal-page-button:hover {
-    background-color: #85c742;
-    cursor: pointer;
-}
-
-.chatbot-modal-review {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 16px;
-    height: 350px;
-    overflow-x: scroll;
-    overflow-y: scroll;
-    width: 100%;
-}
-
-.chatbot-modal-setting {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-top: 10px;
-    width: 100%;
-}
-
-.chatbot-modal-setting-description {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 16px;
-}
-
-.chatbot-modal-setting-description-warning {
-    color: #f23160;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-style: italic;
-}
-
-.chatbot-modal-textarea {
-    border: none;
-    border-radius: 5px;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 10px;
-    resize: none;
-    width: 100%;
-}
-
-.chatbot-modal-toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-}
-
-.chatbot-modal-toggle-switch input { 
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.chatbot-modal-toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #495a6a;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.chatbot-modal-toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.chatbot-rules {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0px;
-}
-.chatbot-rule {
-    border-bottom: 1px solid #1f2e3c;
-    box-sizing: border-box;
-    color: white;
-    display: flex;
-    flex-direction: row;
-    font-family: sans-serif;
-    justify-content: space-between;
-    padding: 10px 20px;
-}
-
-.chatbot-rule-header {
-    font-weight: bold;
-}
-
-.chatbot-rule-output {
-    align-items: center;
-    display: flex;
-    justify-content: left;
-    overflow: hidden;
-    overflow-x: scroll;
-    white-space: nowrap;
-    width: 50%;
-}
-
-.chatbot-rule-buttons {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: center;
-    justify-content: space-evenly;
-    padding-left: 10px;
-    width: 75px;
-}
-
-.chatbot-rule-button {
-    align-items: center;
-    background-color: #344453;
-    border: none;
-    display: flex;
-    justify-content: center;
-    padding: 0px;
-}
-
-.chatbot-rule-button:hover {
-    cursor: pointer;
-}
-
-.chatbot-rule-button-icon {
-    height: 16px;
-    width: 16px;
-}
-
-.chatbot-rule-sender {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: left;
-    overflow-x: scroll;
-    padding-left: 10px;
-    white-space: nowrap;
-    width: 25%;
-}
-
-.chatbot-rule-trigger {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: left;
-    overflow-x: scroll;
-    padding-left: 10px;
-    white-space: nowrap;
-    width: 25%;
-}
-
-.choose-file {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.choose-file-button-box {
-  min-width: 100px;
-  width: 100px;
-}
-
-.choose-file-button {
-    background-color: #85c742;
-    border: none;
-    border-radius: 5px;
-    color: #061726;
-    cursor: pointer;
-    font-size: 16px;
-    text-decoration: none;
-    /* width: 200px; */
-    width: 100%;
-}
-
-.choose-file-path {
-    color: #eee;
-    font-family: monospace;
-    font-size: 16px;
-    overflow: scroll;
-    margin-left: 5px;
-    white-space: nowrap;
-}
-
-input:checked + .chatbot-modal-toggle-slider {
-  background-color: #85c742;
-}
-
-input:checked + .chatbot-modal-toggle-slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
-/* Rounded sliders */
-.chatbot-modal-toggle-slider.round {
-  border-radius: 34px;
-}
-
-.chatbot-modal-toggle-slider.round:before {
-  border-radius: 50%;
-}
-
-.command-input {
-    border: none;
-    border-radius: 34px;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 5px 10px 5px 10px;
-    text-align: center;
-    width: 100%;
-}
-
-.command-rant-amount {
-    border: none;
-    border-radius: 5px;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 5px;
-    text-align: center;
-}
-
-.command-rant-amount-symbol {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 20px;
-    padding-right: 1px;
-}
-
-.dropdown-option-hide {
-    display: none;
-}
-
-.timer-input {
-    border: none;
-    border-radius: 34px;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 5px 10px 5px 10px;
-    text-align: right;
-}
-
-.timer-input-zero::placeholder {
-    text-align: center;
-}
-
-.timer-input-value::placeholder {
-    color: black;
-    opacity: 1;
-    text-align: center;
-}

v1/frontend/src/components/DropDown.css

@@ -1,80 +0,0 @@
-.dropdown {
-    width: 100%;
-}
-
-.dropdown-menu {
-    align-items: center;
-    background-color: white;
-    border: 1px solid #061726;
-    border-radius: 5px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 5px;
-    position: fixed;
-    z-index: 10;
-}
-
-.dropdown-menu-container {
-    width: 100%;
-}
-
-.dropdown-menu-background {
-    align-items: center;
-    display: flex;
-    height: 100vh;
-    justify-content: center;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100vw;
-    z-index: 8;
-}
-
-.dropdown-menu-option {
-    background-color: white;
-    border: none;
-    border-radius: 5px;
-    box-sizing: border-box;
-    color: #061726;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 5px;
-    width: 100%;
-}
-
-.dropdown-menu-option-selected {
-    background-color: #77b23b;
-}
-
-.dropdown-menu-option:hover {
-    background-color: #77b23b;
-    cursor: pointer;
-}
-
-.dropdown-toggle {
-    align-items: center;
-    background-color: white;
-    border: 1px solid #061726;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 5px;
-    width: 100%;
-}
-
-.dropdown-toggle-text {
-    color: #061726;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.dropdown-toggle-icon {
-    height: 20px;
-    width: 20px;
-}

v1/frontend/src/components/DropDown.jsx

@@ -1,97 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { ChevronDown } from '../assets';
-import './DropDown.css';
-
-export function DropDown(props) {
-    const [options, setOptions] = useState(props.options !== undefined ? props.options : []);
-    const [selected, setSelected] = useState(props.selected !== undefined ? props.selected : '');
-    const [toggled, setToggled] = useState(false);
-    const toggle = () => {
-        setToggled(!toggled);
-    };
-
-    useEffect(() => {
-        setSelected(props.selected !== undefined ? props.selected : '');
-    }, [props.selected]);
-
-    useEffect(() => {
-        setOptions(props.options !== undefined ? props.options : []);
-    }, [props.options]);
-
-    const select = (option) => {
-        props.select(option);
-        setSelected(option);
-        toggle();
-    };
-
-    return (
-        <div className='dropdown'>
-            <button className='dropdown-toggle' onClick={toggle}>
-                <div style={{ width: '20px' }}></div>
-                <span className='dropdown-toggle-text'>{selected}</span>
-                <img className='dropdown-toggle-icon' src={ChevronDown} />
-            </button>
-            {toggled && (
-                <DropDownMenu
-                    options={options}
-                    select={select}
-                    selected={selected}
-                    toggle={toggle}
-                />
-            )}
-        </div>
-    );
-}
-
-function DropDownMenu(props) {
-    const menuRef = useRef();
-    const { width } = menuWidth(menuRef);
-
-    return (
-        <div className='dropdown-menu-container' ref={menuRef}>
-            {width !== undefined && (
-                <div className='dropdown-menu' style={{ width: width + 'px' }}>
-                    {props.options.map((option, index) => (
-                        <button
-                            className={
-                                props.selected === option
-                                    ? 'dropdown-menu-option dropdown-menu-option-selected'
-                                    : 'dropdown-menu-option'
-                            }
-                            key={index}
-                            onClick={() => props.select(option)}
-                        >
-                            {option}
-                        </button>
-                    ))}
-                </div>
-            )}
-            <div className='dropdown-menu-background' onClick={props.toggle}></div>
-        </div>
-    );
-}
-
-export const menuWidth = (menuRef) => {
-    const [width, setWidth] = useState(0);
-
-    useEffect(() => {
-        const getWidth = () => ({ width: menuRef.current.offsetWidth });
-
-        const handleResize = () => {
-            setWidth(getWidth());
-        };
-
-        if (menuRef.current) {
-            setWidth(getWidth());
-        }
-
-        window.addEventListener('resize', handleResize);
-
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [menuRef]);
-
-    return width;
-};

v1/frontend/src/components/PageDetails.css

@@ -1,356 +0,0 @@
-.modal-delete-page {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: space-evenly;
-    width: 100%;
-}
-
-.modal-delete-page-header {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-}
-
-.modal-delete-page-input {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.modal-delete-page-input-text {
-    background-color: #061726;
-    border: none;
-    border-radius: 5px;
-    box-sizing: border-box;
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 10px;
-    resize: none;
-    width: 100%;
-}
-
-.modal-delete-page-subtitle {
-    color: white;
-    font-family: sans-serif;
-    font-size: 14px;
-    margin-top: 10px;
-    text-align: center;
-}
-
-.modal-delete-page-title {
-    color: white;
-    font-family: sans-serif;
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.modal-delete-page-body {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.page-activity {
-    height: 100%;
-    overflow-y: auto;
-    width: 100%;
-}
-
-.page-activity-header {
-    align-items: center;
-    border-bottom: 1px solid #061726;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    padding: 10px 20px;
-    width: 100%;
-}
-
-.page-activity-stat {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 175px;
-}
-.page-activity-stat-text {
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-}
-
-.page-activity-stat-title {
-    color: white;
-    font-family: sans-serif;
-    font-size: 16px;
-}
-
-.page-details {
-    align-items: center;
-    background-color: #1f2e3c;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    /* padding: 0px 10px; */
-    width: 300px;
-    min-width: 300px;
-}
-
-.page-details-footer {
-    align-items: start;
-    border-top: 1px solid #061726;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    /* height: 50px; */
-    justify-content: center;
-    padding: 10px 0px;
-    width: 100%;
-}
-
-.page-details-footer-title {
-    color: #eee;
-    font-family: sans-serif;
-    font-weight: bold;
-    padding: 0px 10px 10px 10px;
-}
-
-.page-details-footer-categories {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    padding: 0px 10px;
-    width: 100%;
-}
-
-.page-details-footer-category {
-    align-items: center;
-    box-sizing: border-box;
-    color: #eee;
-    display: flex;
-    flex-direction: row;
-    font-family: sans-serif;
-    font-weight: bold;
-    justify-content: center;
-    padding-bottom: 5px;
-    text-align: center;
-    width: 100%;
-}
-
-.page-details-footer-stats {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    padding-bottom: 10px;
-    width: 100%;
-}
-
-.page-details-footer-stat {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 100px;
-}
-
-.page-details-footer-stat-icon {
-    height: 20px;
-    width: 20px;
-}
-
-.page-details-footer-stat-text {
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-    padding-left: 5px;
-}
-
-.page-details-footer-stat-text-red {
-    color: #f23160;
-    font-family: monospace;
-    font-size: 16px;
-    padding-left: 5px;
-}
-
-.page-details-header {
-    align-items: center;
-    border-bottom: 1px solid #061726;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    min-height: 55px;
-    justify-content: space-between;
-    padding: 10px 20px;
-    width: 100%;
-}
-
-.page-details-header-left {
-    align-items: start;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.page-details-header-right {
-    align-items: end;
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-}
-
-.page-details-header-button {
-    align-items: center;
-    background-color: #1f2e3c;
-    border: none;
-    display: flex;
-    justify-content: center;
-    padding-left: 10px;
-    padding-right: 0px;
-}
-
-.page-details-header-button:hover {
-    cursor: pointer;
-}
-
-.page-details-header-icon {
-    height: 24px;
-    width: 24px;
-}
-
-.page-details-header-title {
-    color: #eee;
-    font-family: sans-serif;
-    font-weight: bold;
-}
-
-.page-details-header-type {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 12px;
-}
-
-.page-details-settings {
-    background-color: #000312;
-    border-radius: 3px;
-    padding: 5px;
-    position: fixed;
-    transform: translate(0px, 60px);
-    transition: all 1s;
-    width: 270px;
-    z-index: 10;
-}
-
-.page-details-settings-background {
-    align-items: center;
-    display: flex;
-    height: 100vh;
-    justify-content: center;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100vw;
-    z-index: 8;
-}
-
-.page-details-settings-button {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 16px;
-    background-color: #000312;
-    border: none;
-    border-radius: 3px;
-    box-sizing: border-box;
-    padding: 5px;
-    width: 100%;
-}
-.page-details-settings-button:hover {
-    background-color: #77b23b;
-    color: #000312;
-    cursor: pointer;
-}
-
-.page-details-settings-text {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 16px;
-}
-
-.page-event {
-    border-bottom: 1px solid #061726;
-    color: white;
-    display: flex;
-    flex-direction: row;
-    font-family: sans-serif;
-    justify-content: space-between;
-    overflow-x: wrap;
-    padding: 10px 20px;
-}
-
-.page-event-left {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-}
-
-.page-event-icon {
-    width: 20px;
-    height: 20px;
-    padding-right: 10px;
-}
-
-.page-event-left-text {
-    display: flex;
-    flex-direction: column;
-}
-
-.page-event-username {
-    font-size: 14px;
-    font-weight: bold;
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.page-event-description {
-    color: #88a0b8;
-    font-size: 14px;
-}
-
-.page-event-date {
-    align-items: center;
-    display: flex;
-    font-family: monospace;
-    text-align: end;
-}
-
-.page-inactive {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-}
-
-.page-inactive-text {
-    /* border: 1px solid #eee;
-    border-radius: 30px; */
-    color: #eee;
-    padding: 20px;
-}

v1/frontend/src/components/PageDetails.jsx

@@ -1,803 +0,0 @@
-import { useEffect, useState } from 'react';
-import { EventsOn } from '../../wailsjs/runtime/runtime';
-import {
-    Eye,
-    EyeRed,
-    EyeSlash,
-    Gear,
-    Heart,
-    Play,
-    Pause,
-    Star,
-    ThumbsDown,
-    ThumbsUp,
-    ChessRook,
-} from '../assets';
-import './PageDetails.css';
-import {
-    ActivateAccount,
-    ActivateChannel,
-    DeleteAccount,
-    DeleteChannel,
-    Login,
-    Logout,
-    UpdateAccountApi,
-    UpdateChannelApi,
-} from '../../wailsjs/go/main/App';
-import { Modal, SmallModal } from './Modal';
-
-function countString(value) {
-    switch (true) {
-        case value <= 0 || value == undefined:
-            return '0';
-        case value < 1000:
-            return value;
-        case value < 1000000:
-            return (value / 1000).toFixed(3).slice(0, -2) + 'K';
-        case value < 1000000000:
-            return (value / 1000000).toFixed(6).slice(0, -5) + 'M';
-        default:
-            return 'Inf';
-    }
-}
-
-function PageDetails(props) {
-    const [activate, setActivate] = useState(false);
-    const [active, setActive] = useState(false);
-    const [activity, setActivity] = useState(null);
-    const [openApi, setOpenApi] = useState(false);
-    const [apiValid, setApiValid] = useState(true);
-    const [editingApi, setEditingApi] = useState(false);
-    const [editApi, setEditApi] = useState('');
-    const updateEditApi = (event) => {
-        setEditApi(event.target.value);
-    };
-    const [openDelete, setOpenDelete] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const [deleteName, setDeleteName] = useState('');
-    const updateDeleteName = (event) => {
-        if (deleting) {
-            return;
-        }
-        setDeleteName(event.target.value);
-    };
-    const [details, setDetails] = useState(null);
-    const [error, setError] = useState('');
-    const [live, setLive] = useState(false);
-    const [liveTitle, setLiveTitle] = useState('');
-    const [openLogin, setOpenLogin] = useState(false);
-    const [loggingIn, setLoggingIn] = useState(false);
-    const [loginUsername, setLoginUsername] = useState('');
-    const updateLoginUsername = (event) => {
-        if (loggingIn) {
-            return;
-        }
-        setLoginUsername(event.target.value);
-    };
-    const [loginUsernameValid, setLoginUsernameValid] = useState(true);
-    const [loginPassword, setLoginPassword] = useState('');
-    const updateLoginPassword = (event) => {
-        if (loggingIn) {
-            return;
-        }
-        setLoginPassword(event.target.value);
-    };
-    const [loginPasswordValid, setLoginPasswordValid] = useState(true);
-    const [openLogout, setOpenLogout] = useState(false);
-    const [loggingOut, setLoggingOut] = useState(false);
-    const [settings, setSettings] = useState(false);
-    const triggerSettings = () => setSettings(!settings);
-
-    useEffect(() => {
-        EventsOn('PageDetails', (event) => {
-            setDetails(event);
-            // TODO: do I need to reset all editing/logging out/etc. values?
-        });
-
-        EventsOn('PageActivity', (event) => {
-            setActivity(event);
-            if (event !== null) {
-                setActive(true);
-                if (event.livestreams.length > 0) {
-                    setLive(true);
-                } else {
-                    setLive(false);
-                }
-            }
-        });
-
-        EventsOn('PageActive', (event) => {
-            if (event) {
-                setActive(true);
-            } else {
-                setActive(false);
-                setActivity(null);
-                setLive(false);
-            }
-        });
-    }, []);
-
-    useEffect(() => {
-        if (deleting) {
-            switch (true) {
-                case details.type === 'Channel':
-                    DeleteChannel(details.id)
-                        .then(() => resetDelete())
-                        .catch((error) => {
-                            setDeleting(false);
-                            setError(error);
-                        });
-                    return;
-                case details.type === 'Account':
-                    DeleteAccount(details.id)
-                        .then(() => resetDelete())
-                        .catch((error) => {
-                            setDeleting(false);
-                            setError(error);
-                        });
-                    return;
-            }
-        }
-    }, [deleting]);
-
-    useEffect(() => {
-        if (editingApi) {
-            switch (true) {
-                case details.type === 'Channel':
-                    UpdateChannelApi(details.id, editApi)
-                        .then(() => resetEditApi())
-                        .catch((error) => {
-                            setEditingApi(false);
-                            setError(error);
-                        });
-                    return;
-                case details.type === 'Account':
-                    UpdateAccountApi(details.id, editApi)
-                        .then(() => resetEditApi())
-                        .catch((error) => {
-                            setEditingApi(false);
-                            setError(error);
-                        });
-                    return;
-            }
-        }
-    }, [editingApi]);
-
-    useEffect(() => {
-        if (loggingIn && details.type === 'Account') {
-            Login(loginUsername, loginPassword)
-                .then(() => {
-                    resetLogin();
-                })
-                .catch((error) => {
-                    setLoggingIn(false);
-                    setError(error);
-                });
-        } else if (loggingIn && details.type === 'Channel') {
-            resetLogin();
-        }
-    }, [loggingIn]);
-
-    useEffect(() => {
-        if (loggingOut && details.type === 'Account') {
-            Logout(details.id)
-                .catch((error) => {
-                    setError(error);
-                })
-                .finally(() => resetLogout());
-        } else if (loggingOut && details.type === 'Channel') {
-            resetLogout();
-        }
-    }, [loggingOut]);
-
-    const activatePage = () => {
-        switch (true) {
-            case details.type === 'Channel':
-                ActivateChannel(details.id).catch((error) => {
-                    setError(error);
-                });
-                return;
-            case details.type === 'Account':
-                ActivateAccount(details.id).catch((error) => {
-                    setError(error);
-                });
-                return;
-        }
-    };
-
-    const deletePage = () => {
-        if (deleting || details.title !== deleteName) {
-            return;
-        }
-
-        setDeleting(true);
-    };
-
-    const resetDelete = () => {
-        setDeleteName('');
-        setDeleting(false);
-        setOpenDelete(false);
-    };
-
-    const submitEditApi = () => {
-        if (editingApi) {
-            return;
-        }
-
-        if (editApi === '') {
-            setApiValid(false);
-            return;
-        }
-
-        setEditingApi(true);
-    };
-
-    const closeEditApi = () => {
-        if (editingApi) {
-            return;
-        }
-
-        resetEditApi();
-    };
-
-    const resetEditApi = () => {
-        setOpenApi(false);
-        setApiValid(true);
-        setEditApi('');
-        setEditingApi(false);
-    };
-
-    const login = () => {
-        if (loginUsername === '') {
-            setLoginUsernameValid(false);
-            return;
-        }
-
-        if (loginPassword === '') {
-            setLoginPasswordValid(false);
-            return;
-        }
-
-        setLoggingIn(true);
-    };
-
-    const closeLogin = () => {
-        if (loggingIn) {
-            return;
-        }
-
-        setOpenLogin(false);
-    };
-
-    const resetLogin = () => {
-        setLoggingIn(false);
-        setOpenLogin(false);
-    };
-
-    const logout = () => {
-        setLoggingOut(true);
-    };
-
-    const closeLogout = () => {
-        if (loggingOut) {
-            return;
-        }
-
-        setOpenLogout(false);
-    };
-
-    const resetLogout = () => {
-        setLoggingOut(false);
-        setOpenLogout(false);
-    };
-
-    return (
-        <>
-            {openLogin && (
-                <Modal
-                    backgroundClose={true}
-                    cancelButton={'Cancel'}
-                    onCancel={closeLogin}
-                    onClose={closeLogin}
-                    show={openLogin}
-                    style={{
-                        height: '480px',
-                        minHeight: '480px',
-                        width: '360px',
-                        minWidth: '360px',
-                    }}
-                    submitButton={'Login'}
-                    submitLoading={loggingIn}
-                    onSubmit={login}
-                >
-                    <ModalLogin
-                        password={loginPassword}
-                        passwordValid={loginPasswordValid}
-                        updatePassword={updateLoginPassword}
-                        username={loginUsername}
-                        usernameValid={loginUsernameValid}
-                        updateUsername={updateLoginUsername}
-                    />
-                </Modal>
-            )}
-            {openLogout && (
-                <SmallModal
-                    cancelButton={'Cancel'}
-                    onCancel={closeLogout}
-                    onClose={closeLogout}
-                    show={openLogout}
-                    style={{ minWidth: '300px', maxWidth: '200px', maxHeight: '200px' }}
-                    title={'Logout'}
-                    message={'Are you sure you want to log out of ' + details.title + '?'}
-                    submitButton={loggingOut ? 'Logging out...' : 'Logout'}
-                    onSubmit={logout}
-                />
-            )}
-            {error !== '' && (
-                <SmallModal
-                    onClose={() => setError('')}
-                    show={error !== ''}
-                    style={{ minWidth: '300px', maxWidth: '200px', maxHeight: '200px' }}
-                    title={'Error'}
-                    message={error}
-                    submitButton={'OK'}
-                    onSubmit={() => setError('')}
-                />
-            )}
-            {openDelete && details !== null && (
-                <Modal
-                    backgroundClose={true}
-                    cancelButton={'Cancel'}
-                    onCancel={resetDelete}
-                    onClose={resetDelete}
-                    deleteButton={deleting ? 'Deleting' : 'Delete'}
-                    onDelete={deletePage}
-                    deleteActive={details.title === deleteName}
-                    pageName={details.title}
-                    show={openDelete}
-                    style={{
-                        height: '350px',
-                        minHeight: '350px',
-                        width: '350px',
-                        minWidth: '350px',
-                    }}
-                >
-                    <div className='modal-delete-page'>
-                        <div className='modal-delete-page-header'>
-                            <span className='modal-delete-page-title'>Delete page</span>
-                            <span className='modal-delete-page-subtitle'>
-                                Are you sure you want to delete <b>{details.title}</b>? This cannot
-                                be undone. You must type '{details.title}' into the box to delete.
-                            </span>
-                        </div>
-                        <div className='modal-delete-page-body'>
-                            <div className='modal-delete-page-input'>
-                                <input
-                                    className='modal-delete-page-input-text'
-                                    onChange={updateDeleteName}
-                                    placeholder={details.title}
-                                    type={'text'}
-                                    value={deleteName}
-                                ></input>
-                            </div>
-                        </div>
-                    </div>
-                </Modal>
-            )}
-            {openApi && (
-                <Modal
-                    backgroundClose={true}
-                    cancelButton={'Cancel'}
-                    onCancel={closeEditApi}
-                    onClose={closeEditApi}
-                    show={openApi}
-                    style={{
-                        height: '480px',
-                        minHeight: '480px',
-                        width: '360px',
-                        minWidth: '360px',
-                    }}
-                    submitButton={'Submit'}
-                    submitLoading={editingApi}
-                    onSubmit={submitEditApi}
-                >
-                    <ModalEditApi
-                        apiKey={editApi}
-                        updateApiKey={updateEditApi}
-                        apiValid={apiValid}
-                    />
-                </Modal>
-            )}
-            <div className='page-details'>
-                {details !== null && (
-                    <>
-                        <div className='page-details-header'>
-                            <div className='page-details-header-left'>
-                                <span className='page-details-header-title'>{details.title}</span>
-                                <span className='page-details-header-type'>{details.type}</span>
-                            </div>
-                            <div className='page-details-header-right'>
-                                {details.has_api && (
-                                    <button
-                                        className='page-details-header-button'
-                                        onClick={activatePage}
-                                    >
-                                        <img
-                                            className='page-details-header-icon'
-                                            src={active ? Pause : Play}
-                                        />
-                                    </button>
-                                )}
-                                <button
-                                    className='page-details-header-button'
-                                    onClick={triggerSettings}
-                                >
-                                    <img className='page-details-header-icon' src={Gear} />
-                                </button>
-                            </div>
-                        </div>
-                        {settings && (
-                            <>
-                                <div
-                                    className='page-details-settings-background'
-                                    onClick={triggerSettings}
-                                ></div>
-                                <div className='page-details-settings'>
-                                    {details.type === 'Account' && (
-                                        <button
-                                            className='page-details-settings-button'
-                                            onClick={() => {
-                                                triggerSettings();
-                                                if (details.logged_in) {
-                                                    setOpenLogout(true);
-                                                } else {
-                                                    setOpenLogin(true);
-                                                }
-                                            }}
-                                        >
-                                            {details.logged_in ? 'Logout' : 'Login'}
-                                        </button>
-                                    )}
-                                    <button
-                                        className='page-details-settings-button'
-                                        onClick={() => {
-                                            triggerSettings();
-                                            setOpenApi(true);
-                                        }}
-                                    >
-                                        Edit API key
-                                    </button>
-                                    <button
-                                        className='page-details-settings-button'
-                                        onClick={() => {
-                                            triggerSettings();
-                                            setOpenDelete(true);
-                                        }}
-                                    >
-                                        Delete
-                                    </button>
-                                </div>
-                            </>
-                        )}
-                        {active && activity !== null && (
-                            <>
-                                <PageActivity activity={activity} />
-                                {live && (
-                                    <DetailsFooter
-                                        categories={activity.livestreams[0].categories}
-                                        dislikes={activity.livestreams[0].dislikes}
-                                        likes={activity.livestreams[0].likes}
-                                        title={activity.livestreams[0].title}
-                                        viewers={activity.livestreams[0].watching_now}
-                                    />
-                                )}
-                            </>
-                        )}
-                        {!active && (
-                            <div className='page-inactive'>
-                                <span className='page-inactive-text'>
-                                    {details.has_api
-                                        ? 'Press play to start API'
-                                        : 'Open settings to add API key'}
-                                </span>
-                            </div>
-                        )}
-                    </>
-                )}
-            </div>
-        </>
-    );
-}
-
-export default PageDetails;
-
-function PageActivity(props) {
-    const eventDate = (event) => {
-        if (event.followed_on) {
-            return event.followed_on;
-        }
-        if (event.subscribed_on) {
-            return event.subscribed_on;
-        }
-    };
-    const sortEvents = () => {
-        let sorted = [
-            ...props.activity.followers.recent_followers,
-            ...props.activity.subscribers.recent_subscribers,
-        ].sort((a, b) => (eventDate(a) < eventDate(b) ? 1 : -1));
-
-        return sorted;
-    };
-    return (
-        <>
-            <div className='page-activity-header'>
-                <div className='page-activity-stat'>
-                    <span className='page-activity-stat-title'>Followers:</span>
-                    <span className='page-activity-stat-text'>
-                        {countString(props.activity.followers.num_followers)}
-                    </span>
-                </div>
-                <div className='page-activity-stat'>
-                    <span className='page-activity-stat-title'>Subscribers:</span>
-                    <span className='page-activity-stat-text'>
-                        {countString(props.activity.subscribers.num_subscribers)}
-                    </span>
-                </div>
-            </div>
-            <div className='page-activity'>
-                <div className='page-activity-list'>
-                    {sortEvents().map((event, index) => (
-                        <PageEvent event={event} key={index} />
-                    ))}
-                </div>
-            </div>
-        </>
-    );
-}
-
-function PageEvent(props) {
-    const dateDate = (date) => {
-        const options = { month: 'short' };
-        let month = new Intl.DateTimeFormat('en-US', options).format(date);
-        let day = date.getDate();
-        return month + ' ' + day;
-    };
-
-    const dateDay = (date) => {
-        let now = new Date();
-        let today = now.getDay();
-        switch (date.getDay()) {
-            case 0:
-                return 'Sunday';
-            case 1:
-                return 'Monday';
-            case 2:
-                return 'Tuesday';
-            case 3:
-                return 'Wednesday';
-            case 4:
-                return 'Thursday';
-            case 5:
-                return 'Friday';
-            case 6:
-                return 'Saturday';
-        }
-    };
-
-    const dateTime = (date) => {
-        let now = new Date();
-        let today = now.getDay();
-        let day = date.getDay();
-
-        if (today !== day) {
-            return dateDay(date);
-        }
-
-        let hours24 = date.getHours();
-        let hours = hours24 % 12 || 12;
-
-        let minutes = date.getMinutes();
-        if (minutes < 10) {
-            minutes = '0' + minutes;
-        }
-
-        let mer = 'pm';
-        if (hours24 < 12) {
-            mer = 'am';
-        }
-
-        return hours + ':' + minutes + ' ' + mer;
-    };
-
-    const dateString = (d) => {
-        if (isNaN(Date.parse(d))) {
-            return 'Who knows?';
-        }
-
-        let now = new Date();
-        let date = new Date(d);
-        // Fix Rumble's timezone problem
-        date.setHours(date.getHours() - 4);
-        let diff = now - date;
-        switch (true) {
-            case diff < 0:
-                return 'In the future!?';
-            case diff < 60000:
-                return 'Now';
-            case diff < 3600000:
-                let minutes = Math.floor(diff / 1000 / 60);
-                let postfix = ' mins ago';
-                if (minutes == 1) {
-                    postfix = ' min ago';
-                }
-                return minutes + postfix;
-            case diff < 86400000:
-                return dateTime(date);
-            case diff < 604800000:
-                return dateDay(date);
-            default:
-                return dateDate(date);
-        }
-    };
-
-    return (
-        <div className='page-event'>
-            <div className='page-event-left'>
-                {props.event.followed_on && <img className='page-event-icon' src={Heart}></img>}
-                {props.event.subscribed_on && (
-                    <img className='page-event-icon' src={ChessRook}></img>
-                )}
-                <div className='page-event-left-text'>
-                    <span className='page-event-username'>{props.event.username}</span>
-                    <span className='page-event-description'>
-                        {props.event.followed_on && 'Followed you'}
-                        {props.event.subscribed_on && 'Subscribed'}
-                    </span>
-                </div>
-            </div>
-            <span className='page-event-date'>
-                {props.event.followed_on && dateString(props.event.followed_on)}
-                {props.event.subscribed_on && dateString(props.event.subscribed_on)}
-            </span>
-        </div>
-    );
-}
-
-function DetailsFooter(props) {
-    return (
-        <div className='page-details-footer'>
-            <span className='page-details-footer-title'>{props.title}</span>
-            <div className='page-details-footer-stats'>
-                <div className='page-details-footer-stat'>
-                    <img className='page-details-footer-stat-icon' src={EyeRed} />
-                    <span className='page-details-footer-stat-text-red'>
-                        {countString(props.viewers)}
-                    </span>
-                </div>
-                <div className='page-details-footer-stat'>
-                    <img className='page-details-footer-stat-icon' src={ThumbsUp} />
-                    <span className='page-details-footer-stat-text'>
-                        {countString(props.likes)}
-                    </span>
-                </div>
-                <div className='page-details-footer-stat'>
-                    <img className='page-details-footer-stat-icon' src={ThumbsDown} />
-                    <span className='page-details-footer-stat-text'>
-                        {countString(props.dislikes)}
-                    </span>
-                </div>
-            </div>
-            <div className='page-details-footer-categories'>
-                <span className='page-details-footer-category'>
-                    {props.categories.primary.title}
-                </span>
-                <span className='page-details-footer-category'>
-                    {props.categories.secondary.title}
-                </span>
-            </div>
-        </div>
-    );
-}
-
-function ModalEditApi(props) {
-    const [showKey, setShowKey] = useState(false);
-    const updateShowKey = () => setShowKey(!showKey);
-
-    return (
-        <div className='modal-add-account-channel'>
-            <div className='modal-add-account-channel-header'>
-                <span className='modal-add-account-channel-title'>Edit API Key</span>
-                <span className='modal-add-account-channel-subtitle'>Enter new API key below</span>
-            </div>
-            <div className='modal-add-account-channel-body'>
-                {props.apiValid === false ? (
-                    <label className='modal-add-channel-label-warning'>
-                        API KEY - Please enter a valid API key
-                    </label>
-                ) : (
-                    <label className='modal-add-channel-label'>API KEY</label>
-                )}
-                <div className='modal-add-channel-key'>
-                    <input
-                        className='modal-add-channel-key-input'
-                        onChange={props.updateApiKey}
-                        placeholder={'Enter API key'}
-                        type={showKey ? 'text' : 'password'}
-                        value={props.apiKey}
-                    ></input>
-                    <button className='modal-add-channel-key-show' onClick={updateShowKey}>
-                        <img
-                            className='modal-add-channel-key-show-icon'
-                            src={showKey ? EyeSlash : Eye}
-                        />
-                    </button>
-                </div>
-                <span className='modal-add-channel-description'>API KEYS SHOULD LOOK LIKE</span>
-                <span className='modal-add-channel-description-subtext'>
-                    https://rumble.com/-livestream-api/get-data?key=really-long_string-of_random-characters
-                </span>
-            </div>
-            <div></div>
-        </div>
-    );
-}
-
-function ModalLogin(props) {
-    const [showPassword, setShowPassword] = useState(false);
-    const updateShowPassword = () => setShowPassword(!showPassword);
-
-    return (
-        <div className='modal-add-account-channel'>
-            <div className='modal-add-account-channel-header'>
-                <span className='modal-add-account-channel-title'>Login</span>
-                <span className='modal-add-account-channel-subtitle'>
-                    Log into your Rumble account
-                </span>
-            </div>
-            <div className='modal-add-account-channel-body'>
-                {props.usernameValid === false ? (
-                    <label className='modal-add-account-channel-label-warning'>
-                        USERNAME - Please enter a valid username
-                    </label>
-                ) : (
-                    <label className='modal-add-account-channel-label'>USERNAME</label>
-                )}
-                <div className='modal-add-account-channel-input'>
-                    <input
-                        className='modal-add-account-channel-input-text'
-                        onChange={!props.loading && props.updateUsername}
-                        placeholder={'Username'}
-                        type={'text'}
-                        value={props.username}
-                    ></input>
-                </div>
-                {props.passwordValid === false ? (
-                    <label className='modal-add-account-channel-label-warning'>
-                        PASSWORD - Please enter a valid password
-                    </label>
-                ) : (
-                    <label className='modal-add-account-channel-label'>PASSWORD</label>
-                )}
-                <div className='modal-add-account-channel-input'>
-                    <input
-                        className='modal-add-account-channel-input-password'
-                        onChange={!props.loading && props.updatePassword}
-                        placeholder={'Password'}
-                        type={showPassword ? 'text' : 'password'}
-                        value={props.password}
-                    ></input>
-                    <button
-                        className='modal-add-account-channel-input-show'
-                        onClick={updateShowPassword}
-                    >
-                        <img
-                            className='modal-add-account-channel-input-show-icon'
-                            src={showPassword ? EyeSlash : Eye}
-                        />
-                    </button>
-                </div>
-            </div>
-            <div></div>
-        </div>
-    );
-}

v1/frontend/src/components/PageSideBar.css

@@ -1,362 +0,0 @@
-.page-sidebar {
-    align-items: center;
-    background-color: #061726;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    padding: 0px 10px;
-    width: 60px;
-}
-
-.page-sidebar-account-list {
-    border-top: 2px solid #273848;
-    padding-bottom: 10px;
-}
-
-.page-sidebar-body {
-    overflow-y: auto;
-}
-
-.page-sidebar-button {
-    align-items: center;
-    background-color: #061726;
-    border: none;
-    display: flex;
-    justify-content: center;
-    padding: 0px;
-}
-
-.page-sidebar-button:hover {
-    cursor: pointer;
-}
-
-.page-sidebar-button-icon {
-    height: 60px;
-    width: 60px;
-}
-
-.page-sidebar-footer {
-    padding-bottom: 10px;
-}
-
-.page-sidebar-icon {
-    height: 60px;
-    margin-top: 10px;
-    position: relative;
-    width: 60px;
-}
-
-.page-sidebar-icon:hover {
-    cursor: pointer;
-}
-
-.page-sidebar-icon-account {
-    bottom: 0px;
-    height: 24px;
-    left: 36px;
-    position: absolute;
-    width: 24px;
-}
-
-.page-sidebar-icon-hover {
-    background-color: #061726;
-    border-radius: 5px;
-    color: black; 
-    padding: 10px;
-    position: fixed;
-    /* transform: translate(75px, -50px); */
-    z-index: 10;
-}
-.page-sidebar-icon-hover:before {
-   content:"";
-   position: absolute;
-   width: 0;
-   height: 0;
-   border-top: 3px solid transparent;
-   border-right: 3px solid #061726;
-   border-bottom: 3px solid transparent;
-   margin: 7px 0 0 -13px;
-}
-
-.page-sidebar-icon-hover-text {
-    color: white;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.page-sidebar-icon-image {
-    /* border: 3px solid #85c742; */
-    /* border: 3px solid #ec0; */
-    /* border: 3px solid #f23160; */
-    border-radius: 50%;
-    height: 54px;
-    transition: border-radius 0.25s;
-    width: 54px;
-}
-
-.page-sidebar-icon-image:hover {
-    border-radius: 30%;
-    transition: border-radius 0.25s;
-}
-
-.page-sidebar-icon-initial {
-    align-items: center;
-    background-color: #3377cc;
-    /* border: 3px solid #3377cc; */
-    /* border: 3px solid #85c742; */
-    /* border: 3px solid #ec0; */
-    /* border: 3px solid #f23160; */
-    border-radius: 50%;
-    color: #eee;
-    display: flex;
-    font-family: sans-serif;
-    font-size: 34px;
-    font-weight: bold;
-    height: 54px;
-    justify-content: center;
-    transition: border-radius 0.25s;
-    width: 54px;
-}
-
-.page-sidebar-icon-initial:hover {
-    border-radius: 30%;
-    transition: border-radius 0.25s;
-}
-
-.modal-add-account-channel {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.modal-add-account-channel-header {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-}
-
-.modal-add-account-channel-subtitle {
-    color: white;
-    font-family: sans-serif;
-    font-size: 14px;
-    margin-top: 10px;
-    text-align: center;
-}
-
-.modal-add-account-channel-title {
-    color: white;
-    font-family: sans-serif;
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.modal-add-account-channel-body {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.modal-add-account-channel-button {
-    align-items: center;
-    background-color: #1f2e3c;
-    border: 1px solid #d6e0ea;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 5px 0px;
-    padding: 20px;
-    width: 100%;
-}
-
-.modal-add-account-channel-button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-    cursor: pointer;
-}
-
-.modal-add-account-channel-button-left {
-    color: white;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.modal-add-account-channel-button-right-icon {
-    height: 20px;
-    width: 20px;
-}
-
-.modal-add-account-channel-input {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.modal-add-account-channel-input-password {
-    background-color: #061726;
-    border: none;
-    border-radius: 5px 0px 0px 5px;
-    box-sizing: border-box;
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 10px;
-    resize: none;
-    width: 90%;
-}
-
-.modal-add-account-channel-input-text {
-    background-color: #061726;
-    border: none;
-    border-radius: 5px;
-    box-sizing: border-box;
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 10px;
-    resize: none;
-    width: 100%;
-}
-
-.modal-add-account-channel-input-show {
-    align-items: center;
-    background-color: #061726;
-    border: none;
-    border-radius: 0px 5px 5px 0px;
-    display: flex;
-    justify-content: center;
-    width: 10%;
-}
-
-.modal-add-account-channel-input-show:hover {
-    cursor: pointer;
-}
-
-.modal-add-account-channel-input-show-icon {
-    height: 16px;
-    width: 16px;
-}
-
-.modal-add-account-channel-label {
-    color: white;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.modal-add-account-channel-label-warning {
-    color: #f23160;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.modal-add-channel-description {
-    color: white;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: bold;
-    margin-top: 20px;
-    text-align: left;
-    width: 100%;
-}
-
-.modal-add-channel-description-subtext {
-    color: white;
-    font-family: sans-serif;
-    font-size: 16px;
-    margin-top: 10px;
-    text-align: left;
-    width: 100%;
-}
-
-.modal-add-channel-key {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.modal-add-channel-key-input {
-    background-color: #061726;
-    border: none;
-    border-radius: 5px 0px 0px 5px;
-    box-sizing: border-box;
-    color: white;
-    font-family: monospace;
-    font-size: 16px;
-    outline: none;
-    padding: 10px;
-    resize: none;
-    width: 90%;
-}
-
-.modal-add-channel-key-show {
-    align-items: center;
-    background-color: #061726;
-    border: none;
-    border-radius: 0px 5px 5px 0px;
-    display: flex;
-    justify-content: center;
-    width: 10%;
-}
-
-.modal-add-channel-key-show:hover {
-    cursor: pointer;
-}
-
-.modal-add-channel-key-show-icon {
-    height: 16px;
-    width: 16px;
-}
-
-.modal-add-channel-label {
-    color: white;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.modal-add-channel-label-warning {
-    color: #f23160;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-/* HTML: <div class="loader"></div> */
-.loader {
-  width: 60px;
-  aspect-ratio: 6;
-  --_g: no-repeat radial-gradient(circle closest-side,#061726 90%,#0000);
-  background: 
-    var(--_g) 0%   50%,
-    var(--_g) 50%  50%,
-    var(--_g) 100% 50%;
-  background-size: calc(100%/3) 100%;
-  animation: l7 1s infinite linear;
-}
-@keyframes l7 {
-    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
-    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
-    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
-}