New design + Jira integration (#37)

* Start UI only if needed

* Custom pause

* UI - new design

* Create Jira ticket

---------

Co-authored-by: Max Soloviov <max.soloviov@keenethics.com>

Author: soloviovmax

package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "@cyborgtests/test",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Powerfull extension for Playwright, that allows you to include manual verification steps in your automated test flow",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     }
   },
   "repository": {
@@ -37,14 +37,14 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "@playwright/test": "^1.53.0"
+    "@playwright/test": "^1.54.2"
   },
   "devDependencies": {
     "@heroui/react": "^2.8.1",
     "@heroui/system": "^2.4.19",
     "@heroui/theme": "^2.4.19",
     "@medv/finder": "^4.0.2",
-    "@playwright/test": "^1.53.0",
+    "@playwright/test": "^1.54.2",
     "@tailwindcss/vite": "^4.1.11",
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.4",
@@ -69,5 +69,7 @@
     "package-lock.json",
     "src"
   ],
-  "dependencies": {}
+  "dependencies": {
+    "react-hot-toast": "^2.6.0"
+  }
 }

package.json

@@ -1,19 +1,38 @@
 import React from 'react';
 import Footer from './Footer';
-import Header from './Header';
 import TestControlPanel from './TestControlPanel';
-import { TestStoreProvider } from '../store/TestStore';
+import JiraTicket from './JiraTicket';
+import { TestStoreProvider, useTestStore } from '../store/TestStore';
 import { HeroUIProvider } from "@heroui/system";
+import { Toaster } from 'react-hot-toast';
+
+function AppContent() {
+  const { state } = useTestStore();
+
+  return (
+    <div className="relative flex flex-col h-screen bg-background">
+      {
+        state.createJiraTicket ? <JiraTicket /> : <TestControlPanel />
+      }
+      <Footer />
+      <Toaster 
+        position="bottom-center"
+        toastOptions={{
+          style: {
+            background: '#000000',
+            color: '#fff',
+          },
+        }}
+      />
+    </div>
+  );
+}
 
 export default function App() {
   return (
     <TestStoreProvider>
       <HeroUIProvider>
-        <div className="relative flex flex-col h-screen bg-background">
-          <Header />
-          <TestControlPanel />
-          <Footer />
-        </div>
+        <AppContent />
       </HeroUIProvider>
     </TestStoreProvider>
   );