Select Server Directory
-
- setServerPath(e.target.value)}
- placeholder="Enter server directory path..."
- />
-
-
-
+
+
- {isScanning && scanProgress && (
-
-
Scanning: {scanProgress.current_file}
- - {scanProgress.processed} / {scanProgress.total} + {/* Scan progress - only shown when scanning is in progress */} + {/* Removed duplicate ScanProgress component since it's already in ServerSelector */} + + {/* Plugins section - only shown when scan is complete */} + {serverPath && scanComplete && plugins.length > 0 && ( +
+ = ({
+ label,
+ variant = 'default',
+ size = 'medium',
+ icon,
+ outlined = false,
+ className = '',
+ tooltip,
+ dataAttribute,
+ onClick
+}) => {
+ const badgeClasses = [
+ 'app-badge',
+ `app-badge-${variant}`,
+ `app-badge-${size}`,
+ outlined && 'app-badge-outlined',
+ onClick && 'app-badge-clickable',
+ className
+ ].filter(Boolean).join(' ');
+
+ // Construct the data attributes object
+ const dataAttrs: { [key: string]: string } = {};
+ if (dataAttribute) {
+ dataAttrs[`data-${dataAttribute.name}`] = dataAttribute.value;
+ }
+
+ const handleKeyDown = useCallback((event: KeyboardEvent) => {
+ if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+ event.preventDefault(); // Prevent default space bar scroll
+ onClick();
+ }
+ }, [onClick]);
+
+ return (
+
+ {icon && {icon}}
+ {label}
+
+ );
+};
+
+export default memo(BadgeComponent);
\ No newline at end of file
diff --git a/src/components/common/Button/Button.css b/src/components/common/Button/Button.css
new file mode 100644
index 0000000..24c50e0
--- /dev/null
+++ b/src/components/common/Button/Button.css
@@ -0,0 +1,151 @@
+.app-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ font-family: inherit;
+ font-weight: 500;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+ outline: none;
+ border: none;
+ gap: 8px;
+ text-align: center;
+ white-space: nowrap;
+}
+
+/* Size variants */
+.app-button-small {
+ padding: 6px 12px;
+ font-size: 0.75rem;
+ min-height: 28px;
+}
+
+.app-button-medium {
+ padding: 8px 16px;
+ font-size: 0.875rem;
+ min-height: 36px;
+}
+
+.app-button-large {
+ padding: 10px 20px;
+ font-size: 1rem;
+ min-height: 44px;
+}
+
+/* Style variants */
+.app-button-primary {
+ background-color: var(--primary-color, #007bff);
+ color: white;
+}
+
+.app-button-primary:hover:not(:disabled) {
+ background-color: var(--primary-hover, #0069d9);
+}
+
+.app-button-secondary {
+ background-color: var(--secondary-color, #6c757d);
+ color: white;
+}
+
+.app-button-secondary:hover:not(:disabled) {
+ background-color: var(--secondary-hover, #5a6268);
+}
+
+.app-button-outline {
+ background-color: transparent;
+ border: 1px solid var(--border-color, #d1d1d1);
+ color: var(--text-color, #333);
+}
+
+.app-button-outline:hover:not(:disabled) {
+ background-color: var(--hover-bg);
+}
+
+.app-button-danger {
+ background-color: var(--danger-color, #dc3545);
+ color: white;
+}
+
+.app-button-danger:hover:not(:disabled) {
+ background-color: var(--danger-hover, #c82333);
+}
+
+.app-button-success {
+ background-color: var(--success-color, #28a745);
+ color: #202124;
+}
+
+.app-button-success:hover:not(:disabled) {
+ background-color: var(--success-hover, #218838);
+ color: #202124;
+}
+
+.app-button-warning {
+ background-color: var(--warning-color, #ff9800);
+ color: #202124;
+}
+
+.app-button-warning:hover:not(:disabled) {
+ background-color: var(--warning-hover);
+ color: #202124;
+}
+
+.app-button-text {
+ background-color: transparent;
+ color: var(--text-color, #007bff);
+ padding-left: 4px;
+ padding-right: 4px;
+}
+
+.app-button-text:hover:not(:disabled) {
+ background-color: var(--text-hover-bg);
+}
+
+/* Disabled state */
+.app-button:disabled {
+ opacity: 0.65;
+ cursor: not-allowed;
+}
+
+/* Full width */
+.app-button-full-width {
+ width: 100%;
+}
+
+/* Loading spinner */
+.app-button-loading {
+ cursor: wait;
+}
+
+.app-button-spinner {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ border-top-color: #fff;
+ animation: spin 0.8s linear infinite;
+ margin-right: 4px;
+}
+
+.app-button-outline .app-button-spinner,
+.app-button-text .app-button-spinner {
+ border: 2px solid rgba(0, 0, 0, 0.1);
+ border-top-color: var(--primary-color, #007bff);
+}
+
+/* Icon positioning */
+.app-button-start-icon,
+.app-button-end-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
new file mode 100644
index 0000000..cf28ae4
--- /dev/null
+++ b/src/components/common/Button/Button.tsx
@@ -0,0 +1,91 @@
+import React, { memo } from 'react';
+import './Button.css';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes {
+ /**
+ * Button visual variant
+ * @default 'primary'
+ */
+ variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'success' | 'text' | 'warning';
+
+ /**
+ * Button size
+ * @default 'medium'
+ */
+ size?: 'small' | 'medium' | 'large';
+
+ /**
+ * Whether the button is in a loading state
+ * @default false
+ */
+ isLoading?: boolean;
+
+ /**
+ * Icon to display before the button text
+ */
+ startIcon?: React.ReactNode;
+
+ /**
+ * Icon to display after the button text
+ */
+ endIcon?: React.ReactNode;
+
+ /**
+ * Full width button
+ * @default false
+ */
+ fullWidth?: boolean;
+
+ /**
+ * Button content
+ */
+ children: React.ReactNode;
+
+ /**
+ * Optional tooltip text displayed on hover
+ */
+ tooltip?: string;
+}
+
+/**
+ * A reusable button component with various styling options
+ */
+const ButtonComponent: React.FC = ({
+ variant = 'primary',
+ size = 'medium',
+ isLoading = false,
+ disabled = false,
+ startIcon,
+ endIcon,
+ fullWidth = false,
+ className = '',
+ tooltip,
+ children,
+ ...restProps
+}) => {
+ const buttonClasses = [
+ 'app-button',
+ `app-button-${variant}`,
+ `app-button-${size}`,
+ isLoading && 'app-button-loading',
+ fullWidth && 'app-button-full-width',
+ className
+ ].filter(Boolean).join(' ');
+
+ return (
+
+ );
+};
+
+export default memo(ButtonComponent);
\ No newline at end of file
diff --git a/src/components/common/Modal/Modal.css b/src/components/common/Modal/Modal.css
new file mode 100644
index 0000000..e31034c
--- /dev/null
+++ b/src/components/common/Modal/Modal.css
@@ -0,0 +1,102 @@
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ backdrop-filter: blur(2px);
+}
+
+.modal-container {
+ background-color: var(--surface-color, #292a2d);
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+ width: 90%;
+ max-width: 600px;
+ max-height: 90vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ animation: modal-fade-in 0.2s ease-out;
+ border: 1px solid var(--border-color, #3c4043);
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px;
+ border-bottom: 1px solid var(--border-color, #3c4043);
+ background-color: var(--surface-color, #292a2d);
+}
+
+.modal-title {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-color, #e8eaed);
+}
+
+.modal-close-button {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: var(--text-secondary-color, #9aa0a6);
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ padding: 0;
+ line-height: 1;
+}
+
+.modal-close-button:hover {
+ color: var(--text-color, #e8eaed);
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.modal-content {
+ padding: 16px;
+ overflow-y: auto;
+ background-color: var(--surface-color, #292a2d);
+ color: var(--text-color, #e8eaed);
+}
+
+@keyframes modal-fade-in {
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@media (max-width: 768px) {
+ .modal-container {
+ width: 95%;
+ max-height: 95vh;
+ }
+
+ .modal-header {
+ padding: 12px;
+ }
+
+ .modal-content {
+ padding: 12px;
+ }
+
+ .modal-title {
+ font-size: 1.1rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..e9f7c9e
--- /dev/null
+++ b/src/components/common/Modal/Modal.tsx
@@ -0,0 +1,114 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import './Modal.css';
+
+export interface ModalProps {
+ /**
+ * Title displayed at the top of the modal
+ */
+ title?: string;
+
+ /**
+ * Content of the modal
+ */
+ children: ReactNode;
+
+ /**
+ * Whether the modal is visible or not
+ */
+ isOpen: boolean;
+
+ /**
+ * Function to call when the modal close button is clicked
+ */
+ onClose: () => void;
+
+ /**
+ * Optional CSS class name to add to the modal for custom styling
+ */
+ className?: string;
+
+ /**
+ * Whether to show the close button in the header
+ * @default true
+ */
+ showCloseButton?: boolean;
+
+ /**
+ * Whether to close the modal when clicking outside of it
+ * @default true
+ */
+ closeOnOutsideClick?: boolean;
+}
+
+/**
+ * A reusable modal component that can be used for various purposes
+ */
+const Modal: React.FC = ({
+ title,
+ children,
+ isOpen,
+ onClose,
+ className = '',
+ showCloseButton = true,
+ closeOnOutsideClick = true
+}) => {
+ const modalRef = useRef(null);
+
+ // Close modal when escape key is pressed
+ useEffect(() => {
+ const handleEscKey = (event: KeyboardEvent) => {
+ if (isOpen && event.key === 'Escape') {
+ onClose();
+ }
+ };
+
+ document.addEventListener('keydown', handleEscKey);
+ return () => {
+ document.removeEventListener('keydown', handleEscKey);
+ };
+ }, [isOpen, onClose]);
+
+ // Handle outside click
+ const handleBackdropClick = (event: React.MouseEvent) => {
+ if (closeOnOutsideClick && modalRef.current && !modalRef.current.contains(event.target as Node)) {
+ onClose();
+ }
+ };
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+ = ({
+ value,
+ max = 100,
+ min = 0,
+ label,
+ showPercentage = true,
+ className = '',
+ color = 'primary',
+ showValues = false,
+ valueFormat = "{value}/{max}"
+}) => {
+ // Calculate percentage
+ const range = max - min;
+ const valueInRange = Math.max(min, Math.min(max, value)) - min;
+ const percentage = range > 0 ? Math.round((valueInRange / range) * 100) : 0;
+
+ // Format value display
+ const formattedValue = valueFormat
+ .replace('{value}', value.toString())
+ .replace('{max}', max.toString())
+ .replace('{min}', min.toString())
+ .replace('{percentage}', `${percentage}%`);
+
+ return (
+ = ({ appVersion = '1.0.0' }) => {
+ const { plugins } = usePluginContext();
+ const { serverInfo } = useServerContext();
+
+ const getServerTypeText = () => {
+ if (!serverInfo) return 'No server selected';
+
+ let text = `${serverInfo.server_type}`;
+ if (serverInfo.minecraft_version) {
+ text += ` (${serverInfo.minecraft_version})`;
+ }
+ return text;
+ };
+
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/layout/Header/Header.css b/src/components/layout/Header/Header.css
new file mode 100644
index 0000000..2e30697
--- /dev/null
+++ b/src/components/layout/Header/Header.css
@@ -0,0 +1,112 @@
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1.5rem;
+ background-color: var(--color-background-dark);
+ color: var(--color-text-light);
+ border-bottom: 1px solid var(--color-border);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ height: 60px;
+}
+
+.header-left, .header-center, .header-right {
+ display: flex;
+ align-items: center;
+}
+
+.header-left {
+ flex: 1;
+}
+
+.header-center {
+ flex: 2;
+ justify-content: center;
+}
+
+.header-right {
+ flex: 1;
+ justify-content: flex-end;
+}
+
+.app-title {
+ font-size: 1.5rem;
+ font-weight: bold;
+ margin: 0;
+ margin-right: 0.5rem;
+ color: var(--color-primary);
+}
+
+.app-version {
+ font-size: 0.8rem;
+ color: var(--color-text-muted);
+ margin-right: 0.75rem;
+}
+
+.update-badge {
+ background-color: var(--color-accent);
+ color: white;
+ font-size: 0.7rem;
+ padding: 0.2rem 0.5rem;
+ border-radius: 4px;
+ font-weight: bold;
+ animation: pulse 2s infinite;
+}
+
+.server-path-display {
+ display: flex;
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 0.4rem 0.75rem;
+ border-radius: 4px;
+ max-width: 100%;
+ overflow: hidden;
+}
+
+.server-label {
+ font-weight: bold;
+ margin-right: 0.5rem;
+ white-space: nowrap;
+ color: var(--color-text-muted);
+}
+
+.server-path {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 300px;
+ color: var(--color-text-light);
+}
+
+.update-check-button {
+ background-color: var(--color-primary);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.update-check-button:hover:not(:disabled) {
+ background-color: var(--color-primary-dark);
+}
+
+.update-check-button:disabled {
+ background-color: var(--color-disabled);
+ cursor: not-allowed;
+ opacity: 0.7;
+}
+
+@keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.6;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx
new file mode 100644
index 0000000..3006f3f
--- /dev/null
+++ b/src/components/layout/Header/Header.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useAppUpdates } from '../../../hooks/useAppUpdates';
+import { useServerContext } from '../../../context/ServerContext/useServerContext';
+import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
+import './Header.css';
+
+interface HeaderProps {
+ appVersion?: string;
+}
+
+export const Header: React.FC = ({ appVersion = '1.0.0' }) => {
+ const { isCheckingAppUpdate, appUpdateAvailable, checkForAppUpdate } = useAppUpdates();
+ const { serverPath } = useServerContext();
+ const { isCheckingUpdates } = usePluginContext();
+
+ const handleCheckForUpdates = async () => {
+ if (!isCheckingAppUpdate) {
+ await checkForAppUpdate();
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/layout/MainContent/MainContent.css b/src/components/layout/MainContent/MainContent.css
new file mode 100644
index 0000000..dfd837b
--- /dev/null
+++ b/src/components/layout/MainContent/MainContent.css
@@ -0,0 +1,78 @@
+.main-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ padding: 0;
+ position: relative;
+ background-color: var(--background-color);
+}
+
+.content-container {
+ flex: 1;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.warning-message {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1.5rem;
+ font-size: 0.9rem;
+ width: 100%;
+ animation: slide-down 0.3s ease-out;
+}
+
+.warning-text {
+ flex: 1;
+}
+
+.warning-info {
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.warning-success {
+ background-color: var(--success-color);
+ color: white;
+}
+
+.warning-warning {
+ background-color: var(--warning-color);
+ color: white;
+}
+
+.warning-error {
+ background-color: var(--error-color);
+ color: white;
+}
+
+.close-warning {
+ background: none;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+ font-size: 1.2rem;
+ margin-left: 1rem;
+ opacity: 0.7;
+ transition: opacity 0.2s;
+}
+
+.close-warning:hover {
+ opacity: 1;
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(-100%);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/MainContent/MainContent.tsx b/src/components/layout/MainContent/MainContent.tsx
new file mode 100644
index 0000000..e9b4d7b
--- /dev/null
+++ b/src/components/layout/MainContent/MainContent.tsx
@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { useUIContext } from '../../../context/UIContext/useUIContext';
+import './MainContent.css';
+
+interface MainContentProps {
+ children: ReactNode;
+}
+
+export const MainContent: React.FC = ({ children }) => {
+ const { warningMessage, clearWarningMessage } = useUIContext();
+
+ return (
+
+ {warningMessage && (
+
+ );
+};
+
+export default MainContent;
\ No newline at end of file
diff --git a/src/components/plugins/NoPluginsMessage/NoPluginsMessage.css b/src/components/plugins/NoPluginsMessage/NoPluginsMessage.css
new file mode 100644
index 0000000..88579ae
--- /dev/null
+++ b/src/components/plugins/NoPluginsMessage/NoPluginsMessage.css
@@ -0,0 +1,74 @@
+.no-plugins-message {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 3rem 2rem;
+ text-align: center;
+ background-color: var(--color-background);
+ border-radius: 8px;
+ border: 1px dashed var(--color-border);
+ margin: 2rem auto;
+ max-width: 500px;
+}
+
+.no-plugins-message h3 {
+ margin: 1rem 0 0.5rem;
+ font-size: 1.5rem;
+ color: var(--color-text);
+}
+
+.no-plugins-message p {
+ margin: 0.25rem 0;
+ color: var(--color-text-muted);
+ font-size: 1rem;
+ max-width: 400px;
+}
+
+.no-plugins-message .suggestion {
+ font-size: 0.9rem;
+ margin-top: 1rem;
+ padding: 0.75rem;
+ background-color: rgba(var(--color-info-rgb), 0.1);
+ border-radius: 4px;
+ color: var(--color-info);
+}
+
+.no-plugins-message .icon {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+}
+
+.no-plugins-message.scanning {
+ background-color: rgba(var(--color-primary-rgb), 0.05);
+ border-color: var(--color-primary);
+}
+
+.no-plugins-message.no-server {
+ background-color: rgba(var(--color-info-rgb), 0.05);
+ border-color: var(--color-info);
+}
+
+.no-plugins-message.empty {
+ background-color: rgba(var(--color-warning-rgb), 0.05);
+ border-color: var(--color-warning);
+}
+
+.spinner {
+ border: 4px solid rgba(var(--color-primary-rgb), 0.2);
+ border-left: 4px solid var(--color-primary);
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ margin-bottom: 1rem;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/src/components/plugins/NoPluginsMessage/NoPluginsMessage.tsx b/src/components/plugins/NoPluginsMessage/NoPluginsMessage.tsx
new file mode 100644
index 0000000..b4f9b9b
--- /dev/null
+++ b/src/components/plugins/NoPluginsMessage/NoPluginsMessage.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useServerActions } from '../../../hooks/useServerActions';
+import './NoPluginsMessage.css';
+
+export const NoPluginsMessage: React.FC = () => {
+ const { serverPath, scanComplete, isScanning } = useServerActions();
+
+ if (isScanning) {
+ return (
+ = ({ plugin, onClose }) => {
+ const { updatePlugin, checkSinglePlugin, pluginLoadingStates } = usePluginActions();
+
+ // Check if this specific plugin is being checked or updated
+ const isLoading = !!pluginLoadingStates[plugin.file_path];
+
+ // Handle escape key to close modal
+ const handleEscapeKey = useCallback((event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ onClose();
+ }
+ }, [onClose]);
+
+ // Handle clicking outside the modal to close
+ const handleOverlayClick = useCallback((event: React.MouseEvent) => {
+ if (event.target === event.currentTarget) {
+ onClose();
+ }
+ }, [onClose]);
+
+ // Add event listener for escape key
+ useEffect(() => {
+ document.addEventListener('keydown', handleEscapeKey);
+ return () => {
+ document.removeEventListener('keydown', handleEscapeKey);
+ };
+ }, [handleEscapeKey]);
+
+ const handleCheckUpdate = async () => {
+ if (isLoading) return; // Prevent multiple clicks
+
+ try {
+ console.log(`Checking for updates for plugin: ${plugin.name}`);
+ await checkSinglePlugin(plugin);
+ } catch (error) {
+ console.error(`Error checking updates for plugin ${plugin.name}:`, error);
+ }
+ };
+
+ const handleUpdate = async () => {
+ if (isLoading) return; // Prevent multiple clicks
+
+ try {
+ console.log(`Updating plugin: ${plugin.name}`);
+ await updatePlugin(plugin);
+ // Note: Any success/error notifications will be handled by the usePluginActions hook
+ } catch (error) {
+ console.error(`Error updating plugin ${plugin.name}:`, error);
+ }
+ };
+
+ const formatDate = (timestamp: number | null): string => {
+ if (!timestamp) return 'Unknown';
+ return new Date(timestamp).toLocaleDateString();
+ };
+
+ const renderDependencies = () => {
+ const dependencies = [
+ ...(plugin.depend || []),
+ ...(plugin.soft_depend || [])
+ ].filter(Boolean);
+
+ if (dependencies.length === 0) {
+ return = ({ plugin, onSelect }) => {
+ const { updatePlugin, checkSinglePlugin, pluginLoadingStates } = usePluginActions();
+
+ // Check if this specific plugin is being checked or updated
+ const isLoading = !!pluginLoadingStates[plugin.file_path];
+
+ const handlePluginClick = useCallback(() => {
+ if (onSelect) {
+ onSelect(plugin);
+ }
+ }, [onSelect, plugin]);
+
+ const handleUpdateClick = useCallback(async (e: React.MouseEvent) => {
+ e.stopPropagation(); // Prevent triggering the parent click
+ if (isLoading) return; // Prevent multiple clicks while loading
+
+ try {
+ console.log(`Updating plugin: ${plugin.name}`);
+ await updatePlugin(plugin);
+ } catch (error) {
+ console.error(`Error updating plugin ${plugin.name}:`, error);
+ }
+ }, [updatePlugin, plugin, isLoading]);
+
+ const handleCheckUpdateClick = useCallback(async (e: React.MouseEvent) => {
+ e.stopPropagation(); // Prevent triggering the parent click
+ if (isLoading) return; // Prevent multiple clicks while loading
+
+ try {
+ console.log(`Checking for updates for plugin: ${plugin.name}`);
+ await checkSinglePlugin(plugin);
+ } catch (error) {
+ console.error(`Error checking updates for plugin ${plugin.name}:`, error);
+ }
+ }, [checkSinglePlugin, plugin, isLoading]);
+
+ const handleInfoClick = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation(); // Prevent triggering the parent click
+ if (onSelect) {
+ console.log(`Viewing details for plugin: ${plugin.name}`);
+ onSelect(plugin);
+ }
+ }, [onSelect, plugin]);
+
+ // Get the plugin compatibility information for display, if available
+ const compatibility = plugin.platform_compatibility ? Object.keys(plugin.platform_compatibility).length > 0 : false;
+
+ return (
+ ('');
+ const [sortBy, setSortBy] = useState<'name' | 'version' | 'update'>('name');
+ const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+
+ // Filter plugins based on search term
+ const filteredPlugins = plugins.filter(plugin =>
+ plugin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ plugin.version.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ (plugin.description && plugin.description.toLowerCase().includes(searchTerm.toLowerCase()))
+ );
+
+ // Sort plugins based on sort criteria
+ const sortedPlugins = [...filteredPlugins].sort((a, b) => {
+ let comparison = 0;
+
+ switch (sortBy) {
+ case 'name':
+ comparison = a.name.localeCompare(b.name);
+ break;
+ case 'version':
+ comparison = a.version.localeCompare(b.version);
+ break;
+ case 'update':
+ // Sort by update status (plugins with updates first)
+ comparison = (b.has_update ? 1 : 0) - (a.has_update ? 1 : 0);
+ break;
+ }
+
+ return sortOrder === 'asc' ? comparison : -comparison;
+ });
+
+ const handleSort = (criteria: 'name' | 'version' | 'update') => {
+ if (criteria === sortBy) {
+ // Toggle sort order if clicking the same criteria
+ setSortOrder(prevOrder => prevOrder === 'asc' ? 'desc' : 'asc');
+ } else {
+ // Set new criteria and default to ascending
+ setSortBy(criteria);
+ setSortOrder('asc');
+ }
+ };
+
+ const getSortIndicator = (criteria: 'name' | 'version' | 'update'): string => {
+ if (sortBy !== criteria) return '';
+ return sortOrder === 'asc' ? ' ↑' : ' ↓';
+ };
+
+ return (
+ = ({ progress }) => {
+ // Add console logging for debugging
+ React.useEffect(() => {
+ console.log("ScanProgress component received progress:", progress);
+ }, [progress]);
+
+ const calculatePercentage = (): number => {
+ if (!progress) return 0;
+ if (progress.total <= 0) return 0; // Handle case where total is 0 or negative
+
+ // Make sure current is at least 0 to prevent NaN
+ const current = Math.max(0, progress.current);
+ return Math.min(Math.round((current / progress.total) * 100), 100);
+ };
+
+ const percentage = calculatePercentage();
+
+ return (
+ = ({ serverInfo }) => {
+ const { serverPath } = useServerContext();
+
+ const getServerTypeIcon = () => {
+ switch (serverInfo.server_type.toLowerCase()) {
+ case 'paper':
+ return '📄';
+ case 'spigot':
+ return '🔌';
+ case 'bukkit':
+ return '🪣';
+ case 'purpur':
+ return '🟣';
+ case 'fabric':
+ return '🧵';
+ case 'forge':
+ return '⚒️';
+ default:
+ return '🖥️';
+ }
+ };
+
+ const formatServerType = (type: string): string => {
+ return type.charAt(0).toUpperCase() + type.slice(1);
+ };
+
+ const getStatusColor = (): 'success' | 'warning' | 'error' => {
+ const version = serverInfo.minecraft_version;
+ if (!version) return 'warning';
+
+ // Parse version numbers like 1.19.2
+ const parts = version.split('.');
+ const major = parseInt(parts[0] || '0');
+ const minor = parseInt(parts[1] || '0');
+
+ // Check if using recent version (arbitrary definition)
+ if (major >= 1 && minor >= 18) {
+ return 'success';
+ } else if (major >= 1 && minor >= 16) {
+ return 'warning';
+ } else {
+ return 'error';
+ }
+ };
+
+ // Function to open the server directory in file explorer
+ const handleOpenDirectory = async () => {
+ try {
+ console.log('Attempting to open directory using shell.open:', serverPath);
+ // Use shell.open directly - it's generally more robust, especially for UNC
+ await open(serverPath);
+ console.log('Successfully opened directory via shell.open');
+ } catch (error) {
+ console.error('Failed to open directory:', error);
+ // Optionally add user feedback here (e.g., toast notification)
+ }
+ };
+
+ return (
+ = ({
+ isOpen,
+ onClose,
+ plugin,
+ onConfirmUpdate
+}) => {
+ const { serverInfo } = useServerContext();
+ const [acknowledgedRisk, setAcknowledgedRisk] = useState(false);
+
+ // Determine if the plugin explicitly supports this server version
+ const serverVersion = serverInfo?.minecraft_version || '';
+ const supportsVersion = plugin.platform_compatibility?.includes(serverVersion) || false;
+
+ const handleConfirm = () => {
+ onConfirmUpdate();
+ onClose();
+ };
+
+ return (
+
+
+ );
+};
+
+export default CompatibilityCheckDialog;
\ No newline at end of file
diff --git a/src/components/updates/DownloadProgressIndicator/DownloadProgressIndicator.css b/src/components/updates/DownloadProgressIndicator/DownloadProgressIndicator.css
new file mode 100644
index 0000000..f676df0
--- /dev/null
+++ b/src/components/updates/DownloadProgressIndicator/DownloadProgressIndicator.css
@@ -0,0 +1,106 @@
+.download-progress-indicator {
+ border-radius: 8px;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ background-color: var(--color-background);
+ border: 1px solid var(--color-border);
+ transition: all 0.3s ease;
+}
+
+.download-progress-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.75rem;
+}
+
+.download-progress-plugin-info {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.status-icon {
+ font-size: 1rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.plugin-name {
+ font-weight: 600;
+ color: var(--color-text);
+}
+
+.plugin-version {
+ font-size: 0.85rem;
+ color: var(--color-text-muted);
+}
+
+.download-status {
+ font-size: 0.85rem;
+ font-weight: 500;
+ padding: 0.25rem 0.5rem;
+ border-radius: 12px;
+ background-color: var(--color-background-light);
+}
+
+.download-message {
+ margin-top: 0.75rem;
+ font-size: 0.85rem;
+ color: var(--color-text-muted);
+ padding: 0.5rem;
+ background-color: var(--color-background-light);
+ border-radius: 4px;
+ word-break: break-word;
+}
+
+/* Status-specific styles */
+.download-status-downloading .status-icon {
+ color: var(--color-primary);
+ animation: pulse 1.5s infinite;
+}
+
+.download-status-extracting .status-icon,
+.download-status-installing .status-icon {
+ color: var(--color-primary);
+ animation: spin 2s linear infinite;
+}
+
+.download-status-completed {
+ border-color: var(--color-success);
+}
+
+.download-status-completed .status-icon {
+ color: var(--color-success);
+}
+
+.download-status-error {
+ border-color: var(--color-error);
+}
+
+.download-status-error .status-icon,
+.download-status-error .download-message {
+ color: var(--color-error);
+}
+
+@keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.6;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/src/components/updates/DownloadProgressIndicator/DownloadProgressIndicator.tsx b/src/components/updates/DownloadProgressIndicator/DownloadProgressIndicator.tsx
new file mode 100644
index 0000000..5766b1b
--- /dev/null
+++ b/src/components/updates/DownloadProgressIndicator/DownloadProgressIndicator.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import ProgressBar from '../../common/ProgressBar/ProgressBar';
+import { DownloadProgress } from '../../../types/events.types';
+import './DownloadProgressIndicator.css';
+
+interface DownloadProgressIndicatorProps {
+ downloadProgress: DownloadProgress;
+}
+
+/**
+ * Component that displays the progress of a plugin download
+ */
+export const DownloadProgressIndicator: React.FC = ({
+ downloadProgress
+}) => {
+ const { pluginName, version, percentage, status, message } = downloadProgress;
+
+ const getStatusText = () => {
+ switch (status) {
+ case 'downloading':
+ return 'Downloading';
+ case 'extracting':
+ return 'Extracting';
+ case 'installing':
+ return 'Installing';
+ case 'completed':
+ return 'Completed';
+ case 'error':
+ return 'Error';
+ default:
+ return 'Processing';
+ }
+ };
+
+ const getStatusIcon = () => {
+ switch (status) {
+ case 'downloading':
+ return '↓';
+ case 'extracting':
+ return '📦';
+ case 'installing':
+ return '⚙️';
+ case 'completed':
+ return '✓';
+ case 'error':
+ return '⚠️';
+ default:
+ return '•';
+ }
+ };
+
+ const getStatusColor = () => {
+ switch (status) {
+ case 'completed':
+ return 'success';
+ case 'error':
+ return 'error';
+ default:
+ return 'primary';
+ }
+ };
+
+ return (
+ = ({
+ isOpen,
+ onClose,
+ pluginName,
+ potentialMatches,
+ onSelectMatch
+}) => {
+ const [selectedMatchIndex, setSelectedMatchIndex] = useState(null);
+
+ const handleSelectMatch = () => {
+ if (selectedMatchIndex !== null) {
+ onSelectMatch(potentialMatches[selectedMatchIndex]);
+ onClose();
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default PluginMatchSelector;
\ No newline at end of file
diff --git a/src/components/updates/PremiumPluginModal/PremiumPluginModal.css b/src/components/updates/PremiumPluginModal/PremiumPluginModal.css
new file mode 100644
index 0000000..7296140
--- /dev/null
+++ b/src/components/updates/PremiumPluginModal/PremiumPluginModal.css
@@ -0,0 +1,53 @@
+.premium-plugin-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1.5rem 0.5rem;
+ text-align: center;
+}
+
+.premium-plugin-icon {
+ color: #ffc107;
+ margin-bottom: 1.25rem;
+ animation: float 3s ease-in-out infinite;
+}
+
+.premium-plugin-message {
+ margin-bottom: 1.5rem;
+}
+
+.premium-plugin-message h3 {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ font-size: 1.25rem;
+ color: var(--color-text);
+}
+
+.premium-plugin-message p {
+ margin: 0.5rem 0;
+ line-height: 1.5;
+ color: var(--color-text-muted);
+}
+
+.premium-plugin-message strong {
+ color: var(--color-text);
+}
+
+.premium-plugin-actions {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: center;
+ margin-top: 1rem;
+}
+
+@keyframes float {
+ 0% {
+ transform: translateY(0px);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+ 100% {
+ transform: translateY(0px);
+ }
+}
\ No newline at end of file
diff --git a/src/components/updates/PremiumPluginModal/PremiumPluginModal.tsx b/src/components/updates/PremiumPluginModal/PremiumPluginModal.tsx
new file mode 100644
index 0000000..2748653
--- /dev/null
+++ b/src/components/updates/PremiumPluginModal/PremiumPluginModal.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import Modal from '../../common/Modal/Modal';
+import Button from '../../common/Button/Button';
+import './PremiumPluginModal.css';
+import { PremiumPluginInfo } from '../../../types/events.types';
+import { invoke } from '@tauri-apps/api/core';
+
+interface PremiumPluginModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ pluginInfo: PremiumPluginInfo;
+}
+
+/**
+ * Modal that displays information about a premium plugin that requires manual download
+ */
+export const PremiumPluginModal: React.FC = ({
+ isOpen,
+ onClose,
+ pluginInfo
+}) => {
+ const handleOpenUrl = async () => {
+ try {
+ // Use Tauri invoke to call Rust command to open the URL
+ await invoke('plugin:shell|open', { url: pluginInfo.url });
+ } catch (error) {
+ console.error('Failed to open URL:', error);
+ // Fallback to standard window.open if invoke fails
+ window.open(pluginInfo.url, '_blank');
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default PremiumPluginModal;
\ No newline at end of file
diff --git a/src/components/updates/UpdateControls/UpdateControls.css b/src/components/updates/UpdateControls/UpdateControls.css
new file mode 100644
index 0000000..00803ad
--- /dev/null
+++ b/src/components/updates/UpdateControls/UpdateControls.css
@@ -0,0 +1,114 @@
+.update-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: var(--surface-color);
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ padding: 1rem 1.5rem;
+ margin-bottom: 1.5rem;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.update-status {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ min-width: 200px;
+}
+
+.checking-status {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ color: var(--text-secondary-color);
+ font-size: 0.9rem;
+}
+
+.spinner.small {
+ width: 18px;
+ height: 18px;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-top-color: var(--primary-color);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+.updates-available {
+ color: var(--warning-color);
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.update-count {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--warning-color);
+ color: white;
+ font-weight: bold;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ font-size: 0.8rem;
+}
+
+.no-updates {
+ color: var(--success-color);
+ font-weight: 500;
+}
+
+.no-updates-checked {
+ color: var(--text-secondary-color);
+ font-style: italic;
+ font-size: 0.9rem;
+}
+
+.app-update-available {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ font-size: 0.9rem;
+ padding: 0.5rem 0.75rem;
+ background-color: rgba(76, 175, 80, 0.1);
+ border-radius: 4px;
+ color: var(--success-color);
+}
+
+.update-actions {
+ display: flex;
+ gap: 0.75rem;
+ flex-shrink: 0;
+}
+
+.check-icon, .update-icon {
+ font-size: 1rem;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@media (max-width: 768px) {
+ .update-controls {
+ flex-direction: column;
+ gap: 1rem;
+ align-items: flex-start;
+ }
+
+ .update-actions {
+ width: 100%;
+ }
+
+ .update-actions button {
+ flex: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/updates/UpdateControls/UpdateControls.tsx b/src/components/updates/UpdateControls/UpdateControls.tsx
new file mode 100644
index 0000000..dbff324
--- /dev/null
+++ b/src/components/updates/UpdateControls/UpdateControls.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { useUpdateActions } from '../../../hooks/useUpdateActions';
+import { usePluginActions } from '../../../hooks/usePluginActions';
+import Button from '../../common/Button/Button';
+import './UpdateControls.css';
+
+export const UpdateControls: React.FC = () => {
+ const {
+ updateAllPlugins,
+ checkForAllUpdates,
+ bulkUpdateProgress
+ } = useUpdateActions();
+
+ const {
+ isCheckingUpdates,
+ getOutdatedPluginsCount,
+ plugins
+ } = usePluginActions();
+
+ // Local loading state for the "Update All" button
+ const [isUpdatingAll, setIsUpdatingAll] = useState(false);
+
+ // Calculate how many plugins need updates
+ const outdatedCount = getOutdatedPluginsCount();
+ const hasUpdates = outdatedCount > 0;
+
+ // Track if updates have been checked (any plugin has has_update property set)
+ const updatesHaveBeenChecked = plugins.some(plugin => plugin.has_update !== undefined);
+
+ // Determine overall loading state
+ const isLoading = isCheckingUpdates || isUpdatingAll;
+
+ const handleCheckForUpdates = async () => {
+ if (isLoading) return;
+
+ try {
+ console.log("Starting plugin update check");
+ await checkForAllUpdates();
+ } catch (error) {
+ console.error("Error checking for updates:", error);
+ }
+ };
+
+ const handleUpdateAll = async () => {
+ if (isLoading || !hasUpdates) return;
+
+ try {
+ setIsUpdatingAll(true);
+ await updateAllPlugins();
+ } catch (error) {
+ console.error("Error updating all plugins:", error);
+ } finally {
+ setIsUpdatingAll(false);
+ }
+ };
+
+ return (
+ = ({
+ isOpen,
+ onClose,
+ title,
+ message,
+ confirmLabel = 'Confirm',
+ cancelLabel = 'Cancel',
+ onConfirm,
+ variant = 'warning'
+}) => {
+ const handleConfirm = () => {
+ if (onConfirm) {
+ onConfirm();
+ }
+ onClose();
+ };
+
+ // Choose icon based on variant
+ const renderIcon = () => {
+ switch (variant) {
+ case 'error':
+ return (
+
+ );
+ case 'info':
+ return (
+
+ );
+ case 'warning':
+ default:
+ return (
+
+ );
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default WarningModal;
\ No newline at end of file
diff --git a/src/context/PluginContext/PluginContext.tsx b/src/context/PluginContext/PluginContext.tsx
new file mode 100644
index 0000000..485508a
--- /dev/null
+++ b/src/context/PluginContext/PluginContext.tsx
@@ -0,0 +1,504 @@
+import React, { createContext, useState, useCallback, ReactNode, useEffect } from 'react';
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { Plugin, PotentialPluginMatch } from '../../types/plugin.types';
+import { BulkUpdateProgressPayload, SingleUpdateResultPayload } from '../../types/events.types';
+import { ScanResult } from '../../types/server.types';
+import { canUpdatePlugin } from '../../utils/validators';
+import { createUpdateMessage } from '../../utils/formatters';
+import { ServerType } from '../../types/server.types';
+import { useServerContext } from '../ServerContext/useServerContext';
+
+interface PluginContextProps {
+ /**
+ * List of plugins installed on the server
+ */
+ plugins: Plugin[];
+
+ /**
+ * Currently selected plugin (for details view)
+ */
+ selectedPlugin: Plugin | null;
+
+ /**
+ * Whether plugin updates are being checked
+ */
+ isCheckingUpdates: boolean;
+
+ /**
+ * Error message specific to plugin operations
+ */
+ updateError: string | null;
+
+ /**
+ * Loading states for individual plugins (keyed by file_path)
+ */
+ pluginLoadingStates: Record;
+
+ /**
+ * Progress information for bulk update checks
+ */
+ bulkUpdateProgress: BulkUpdateProgressPayload | null;
+
+ /**
+ * Whether a single plugin update check is in progress
+ */
+ isCheckingSinglePlugin: boolean;
+
+ /**
+ * Function to check for updates for all plugins
+ */
+ checkForUpdates: (serverType?: ServerType) => Promise;
+
+ /**
+ * Function to check for updates for a single plugin
+ */
+ checkSinglePlugin: (plugin: Plugin) => Promise;
+
+ /**
+ * Function to update a plugin to the latest version
+ */
+ updatePlugin: (plugin: Plugin) => Promise;
+
+ /**
+ * Function to select a plugin for viewing details
+ */
+ showPluginDetails: (plugin: Plugin) => void;
+
+ /**
+ * Function to close the plugin details view
+ */
+ closePluginDetails: () => void;
+
+ /**
+ * Function to set the plugins array directly
+ */
+ setPlugins: (plugins: Plugin[]) => void;
+
+ /**
+ * Function to clear update errors
+ */
+ clearUpdateError: () => void;
+}
+
+// Create the context with default values
+export const PluginContext = createContext({} as PluginContextProps);
+
+interface PluginProviderProps {
+ children: ReactNode;
+}
+
+/**
+ * Provider component for managing plugin-related state
+ */
+export const PluginProvider: React.FC = ({
+ children
+}) => {
+ // Get server context directly
+ const { serverPath, serverInfo } = useServerContext();
+ const serverType = serverInfo?.server_type;
+
+ const [plugins, setPluginsState] = useState([]);
+ const [selectedPlugin, setSelectedPlugin] = useState(null);
+ const [isCheckingUpdates, setIsCheckingUpdates] = useState(false);
+ const [updateError, setUpdateError] = useState(null);
+ const [pluginLoadingStates, setPluginLoadingStates] = useState>({});
+ const [bulkUpdateProgress, setBulkUpdateProgress] = useState(null);
+ const [isCheckingSinglePlugin, setIsCheckingSinglePlugin] = useState(false);
+
+ // Setup event listeners
+ useEffect(() => {
+ const unlisteners: (() => void)[] = [];
+
+ // Listen for scan-completed events to update plugins
+ listen('scan_completed', (event) => {
+ console.log("Received scan_completed event in PluginContext:", event.payload);
+ const result = event.payload as ScanResult;
+
+ // Update the plugins state with the scanned plugins
+ setPluginsState(result.plugins);
+ console.log(`Updated plugins state with ${result.plugins.length} plugins`);
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Listen for update check progress
+ listen("update_check_progress", (event) => {
+ console.log("Update check progress event received:", event.payload);
+ setBulkUpdateProgress(event.payload);
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Listen for single update check completed
+ listen("single_update_check_completed", (eventData) => {
+ const { original_file_path, plugin: updatedPlugin, error } = eventData.payload;
+ console.log("Single update check completed event received:", original_file_path);
+
+ if (error) {
+ console.error("Error checking plugin for updates:", error);
+ setUpdateError(error);
+ }
+
+ if (updatedPlugin) {
+ console.log("Plugin update check result:", updatedPlugin);
+
+ // Update the plugin in the list
+ setPluginsState(currentPlugins => {
+ return currentPlugins.map(p => {
+ if (p.file_path === original_file_path) {
+ return updatedPlugin;
+ }
+ return p;
+ });
+ });
+ }
+
+ // Clear loading state for this plugin - IMPORTANT: always clear the loading state
+ console.log(`Clearing loading state for plugin path: ${original_file_path}`);
+ setPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[original_file_path];
+ return newState;
+ });
+
+ // Also notify the UI that the check is complete
+ const customEvent = new CustomEvent('single_plugin_check_completed', {
+ detail: {
+ plugin_path: original_file_path,
+ success: !error,
+ error: error
+ }
+ });
+ window.dispatchEvent(customEvent);
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Listen for update check complete
+ listen("update_check_complete", (event) => {
+ console.log("Update check complete event received:", event);
+
+ // Optionally handle any additional logic needed when bulk update is complete
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Cleanup function
+ return () => {
+ unlisteners.forEach(unlisten => unlisten());
+ };
+ }, []);
+
+ // Set plugins directly
+ const setPlugins = useCallback((newPlugins: Plugin[]) => {
+ setPluginsState(newPlugins);
+ }, []);
+
+ // Clear update error
+ const clearUpdateError = useCallback(() => {
+ setUpdateError(null);
+ }, []);
+
+ // Log when serverPath changes
+ useEffect(() => {
+ console.log(`PluginContext: serverPath changed to ${serverPath}`);
+ }, [serverPath]);
+
+ // Check for updates for all plugins
+ const checkForUpdates = useCallback(async (currentServerType?: ServerType) => {
+ const currentServerPath = serverPath;
+ console.log(`checkForUpdates called with serverPath: ${currentServerPath}`);
+
+ if (!plugins.length) {
+ console.error('No plugins to check for updates');
+ setUpdateError('No plugins to check for updates');
+ return;
+ }
+
+ if (isCheckingUpdates) {
+ console.warn('Update check already in progress');
+ return;
+ }
+
+ if (!currentServerPath) {
+ console.error('No server path available in PluginContext');
+ setUpdateError('No server path available');
+ return;
+ }
+
+ console.log(`Starting update check with serverPath: ${currentServerPath}`);
+ console.log(`Total plugins to check: ${plugins.length}`);
+ console.log(`Server type: ${currentServerType || serverType || 'Unknown'}`);
+
+ setIsCheckingUpdates(true);
+ setUpdateError(null);
+ setBulkUpdateProgress(null);
+ console.log("Invoking bulk check_plugin_updates...");
+
+ try {
+ // Include all repositories to check
+ const repositoriesToCheck = ['hangarmc', 'spigotmc', 'modrinth', 'github'];
+
+ // Prepare plugins data with correct structure
+ const pluginsToSend = plugins.map(p => ({
+ name: p.name,
+ version: p.version,
+ authors: p.authors || [],
+ file_path: p.file_path,
+ file_hash: p.file_hash,
+ website: p.website,
+ description: p.description,
+ api_version: p.api_version,
+ main_class: p.main_class,
+ depend: p.depend,
+ soft_depend: p.soft_depend,
+ load_before: p.load_before,
+ commands: p.commands,
+ permissions: p.permissions,
+ has_update: p.has_update || false,
+ repository_source: p.repository_source,
+ repository_id: p.repository_id,
+ repository_url: p.repository_url,
+ }));
+
+ console.log("Sending plugin data to backend, count:", pluginsToSend.length);
+ console.log("Using repositories:", repositoriesToCheck);
+ console.log("Sample plugin data:", pluginsToSend[0]);
+
+ const updatedPlugins = await invoke("check_plugin_updates", {
+ plugins: pluginsToSend,
+ repositories: repositoriesToCheck,
+ });
+
+ console.log("Bulk update check completed successfully, updating state.");
+ console.log(`Received ${updatedPlugins.length} updated plugins from backend`);
+
+ // Ensure up-to-date plugins have a latest_version
+ const processedPlugins = updatedPlugins.map(plugin => {
+ if (!plugin.latest_version && !plugin.has_update) {
+ return {
+ ...plugin,
+ latest_version: plugin.version
+ };
+ }
+ return plugin;
+ });
+
+ setPlugins(processedPlugins);
+
+ // Emit an update check complete event if not emitted by backend
+ let updatedCount = processedPlugins.filter(p => p.has_update).length;
+ console.log(`Update check complete: ${updatedCount} plugins need updates`);
+
+ // Send a custom update_check_complete event to ensure the UI is updated
+ const event = new CustomEvent('update_check_complete', {
+ detail: {
+ outdated_count: updatedCount,
+ total_checked: processedPlugins.length,
+ success: true
+ }
+ });
+ window.dispatchEvent(event);
+
+ if (currentServerPath) {
+ try {
+ console.log("[checkForUpdates] Saving plugin data...");
+ await invoke("save_plugin_data", { plugins: processedPlugins, serverPath: currentServerPath });
+ console.log("[checkForUpdates] Plugin data saved successfully.");
+ } catch (saveError) {
+ console.error("Error saving plugin data after bulk update:", saveError);
+ setUpdateError(`Update check complete, but failed to save plugin data: ${saveError}`);
+ }
+ }
+ } catch (error) {
+ console.error("Error checking for updates:", error);
+ setUpdateError(`Failed to check for updates: ${error}`);
+ } finally {
+ setIsCheckingUpdates(false);
+ setBulkUpdateProgress(null);
+ }
+ }, [plugins, isCheckingUpdates, serverPath, setPlugins, serverType]);
+
+ // Check for updates for a single plugin
+ const checkSinglePlugin = useCallback(async (plugin: Plugin) => {
+ const currentServerPath = serverPath;
+ console.log(`checkSinglePlugin called with serverPath: ${currentServerPath}`);
+
+ if (!currentServerPath) {
+ console.error('No server path available for checking single plugin');
+ setUpdateError('No server path available');
+ return;
+ }
+
+ setIsCheckingSinglePlugin(true);
+ setUpdateError(null);
+ setPluginLoadingStates(prev => ({
+ ...prev,
+ [plugin.file_path]: true
+ }));
+
+ try {
+ console.log(`Checking for updates for plugin: ${plugin.name}`);
+
+ // Use all lowercase repository names to match backend expectations
+ const repositories = ["hangarmc", "spigotmc", "modrinth", "github"];
+
+ console.log(`Repositories to check: ${repositories.join(', ')}`);
+
+ await invoke("check_single_plugin_update_command", {
+ plugin: plugin,
+ repositories: repositories
+ });
+
+ console.log(`Single plugin update check initiated for ${plugin.name}`);
+ } catch (err) {
+ console.error(`Error checking plugin ${plugin.name} for updates:`, err);
+ setUpdateError(`Failed to check ${plugin.name} for updates: ${err}`);
+
+ // Clear loading state for this plugin
+ setPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[plugin.file_path];
+ return newState;
+ });
+ } finally {
+ setIsCheckingSinglePlugin(false);
+ }
+ }, [serverPath]);
+
+ // Update a plugin to the latest version
+ const updatePlugin = useCallback(async (plugin: Plugin) => {
+ const currentServerPath = serverPath;
+ const currentServerType = serverType;
+
+ console.log(`updatePlugin called with serverPath: ${currentServerPath}`);
+
+ if (!canUpdatePlugin(plugin)) {
+ setUpdateError(`Cannot update ${plugin.name}: Missing required update information`);
+ return;
+ }
+
+ if (!currentServerPath) {
+ console.error('No server path available for updating plugin');
+ setUpdateError('No server path available');
+ return;
+ }
+
+ // Set loading state for this plugin
+ setPluginLoadingStates(prev => ({ ...prev, [plugin.file_path]: true }));
+ setUpdateError(null);
+
+ try {
+ console.log(`Updating plugin: ${plugin.name} to version ${plugin.latest_version}`);
+
+ // Create update message
+ const updateMessage = createUpdateMessage(
+ plugin.name,
+ plugin.latest_version,
+ plugin.platform_compatibility
+ );
+
+ // This is simplified as the actual UI feedback would be handled by the UIContext
+ console.log(updateMessage);
+
+ const newFilePath = await invoke("update_plugin", {
+ pluginId: plugin.repository_id,
+ version: plugin.latest_version,
+ repository: plugin.repository_source,
+ currentFilePath: plugin.file_path,
+ serverTypeStr: currentServerType
+ });
+
+ console.log(`Update successful for ${plugin.name}, new file path: ${newFilePath}`);
+
+ // Update the plugins array with the updated plugin
+ const updatedPlugins = plugins.map(p => {
+ if (p.file_path === plugin.file_path) {
+ return {
+ ...p,
+ version: p.latest_version || p.version,
+ has_update: false,
+ latest_version: p.latest_version,
+ file_path: newFilePath
+ };
+ }
+ return p;
+ });
+
+ setPluginsState(updatedPlugins);
+
+ // Save updated plugins data
+ if (currentServerPath) {
+ try {
+ await invoke("save_plugin_data", {
+ plugins: updatedPlugins,
+ serverPath: currentServerPath
+ });
+ console.log(`Plugin data saved successfully after updating ${plugin.name}`);
+ } catch (saveError) {
+ console.error(`Error saving plugin data after update: ${saveError}`);
+ setUpdateError(`Plugin updated, but failed to save plugin data: ${saveError}`);
+ }
+ }
+
+ // Dispatch custom event for plugin update completed
+ const event = new CustomEvent('single_plugin_updated', {
+ detail: {
+ plugin_name: plugin.name,
+ old_path: plugin.file_path,
+ new_path: newFilePath,
+ success: true
+ }
+ });
+ window.dispatchEvent(event);
+ } catch (error) {
+ console.error(`Error updating plugin: ${error}`);
+ setUpdateError(`Failed to update ${plugin.name}: ${error}`);
+
+ // Dispatch custom event for plugin update failed
+ const event = new CustomEvent('single_plugin_update_failed', {
+ detail: {
+ plugin_name: plugin.name,
+ error: String(error)
+ }
+ });
+ window.dispatchEvent(event);
+ } finally {
+ // Clear loading state for this plugin
+ setPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[plugin.file_path];
+ return newState;
+ });
+ }
+ }, [plugins, serverPath, serverType]);
+
+ // Show plugin details
+ const showPluginDetails = useCallback((plugin: Plugin) => {
+ setSelectedPlugin(plugin);
+ }, []);
+
+ // Close plugin details
+ const closePluginDetails = useCallback(() => {
+ setSelectedPlugin(null);
+ }, []);
+
+ // Define the context value
+ const contextValue: PluginContextProps = {
+ plugins,
+ selectedPlugin,
+ isCheckingUpdates,
+ updateError,
+ pluginLoadingStates,
+ bulkUpdateProgress,
+ isCheckingSinglePlugin,
+ checkForUpdates,
+ checkSinglePlugin,
+ updatePlugin,
+ showPluginDetails,
+ closePluginDetails,
+ setPlugins,
+ clearUpdateError
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default PluginProvider;
\ No newline at end of file
diff --git a/src/context/PluginContext/usePluginContext.ts b/src/context/PluginContext/usePluginContext.ts
new file mode 100644
index 0000000..f8d73cc
--- /dev/null
+++ b/src/context/PluginContext/usePluginContext.ts
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { PluginContext } from './PluginContext';
+
+/**
+ * Custom hook for accessing the PluginContext
+ *
+ * @returns The PluginContext values and methods
+ * @throws Error if used outside of a PluginProvider
+ */
+export const usePluginContext = () => {
+ const context = useContext(PluginContext);
+
+ if (!context || Object.keys(context).length === 0) {
+ throw new Error('usePluginContext must be used within a PluginProvider');
+ }
+
+ return context;
+};
+
+export default usePluginContext;
\ No newline at end of file
diff --git a/src/context/ServerContext/ServerContext.tsx b/src/context/ServerContext/ServerContext.tsx
new file mode 100644
index 0000000..3787cac
--- /dev/null
+++ b/src/context/ServerContext/ServerContext.tsx
@@ -0,0 +1,246 @@
+import React, { createContext, useState, useCallback, ReactNode, useEffect } from 'react';
+import { open } from "@tauri-apps/plugin-dialog";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { ServerInfo, ScanProgress, ScanResult } from '../../types/server.types';
+import { Plugin } from '../../types/plugin.types';
+import { isValidPath } from '../../utils/validators';
+
+interface ServerContextProps {
+ /**
+ * Current server directory path
+ */
+ serverPath: string;
+
+ /**
+ * Server information (type, version, etc.)
+ */
+ serverInfo: ServerInfo | null;
+
+ /**
+ * Whether a server scan is in progress
+ */
+ isScanning: boolean;
+
+ /**
+ * Whether a scan has been completed
+ */
+ scanComplete: boolean;
+
+ /**
+ * Error message if any operation fails
+ */
+ error: string | null;
+
+ /**
+ * Progress information during scanning
+ */
+ scanProgress: ScanProgress | null;
+
+ /**
+ * Function to select a server directory
+ */
+ selectDirectory: () => Promise;
+
+ /**
+ * Function to scan for plugins in the selected directory
+ */
+ scanForPlugins: () => Promise;
+
+ /**
+ * Function to set the server path directly
+ */
+ setServerPath: (path: string) => void;
+
+ /**
+ * Function to clear any errors
+ */
+ clearError: () => void;
+
+ /**
+ * Function to get the path to the plugins directory
+ */
+ getPluginsPath: () => string | null;
+}
+
+// Create the context with default values
+export const ServerContext = createContext({} as ServerContextProps);
+
+interface ServerProviderProps {
+ children: ReactNode;
+ onScanComplete?: (result: ScanResult) => void;
+}
+
+/**
+ * Provider component for managing server-related state
+ */
+export const ServerProvider: React.FC = ({
+ children,
+ onScanComplete
+}) => {
+ const [serverPath, setServerPathState] = useState("");
+ const [serverInfo, setServerInfo] = useState(null);
+ const [isScanning, setIsScanning] = useState(false);
+ const [scanComplete, setScanComplete] = useState(false);
+ const [error, setError] = useState(null);
+ const [scanProgress, setScanProgress] = useState(null);
+
+ // Setup event listeners for scan events
+ useEffect(() => {
+ const unlisteners: (() => void)[] = [];
+
+ // Handle scan-started event
+ listen('scan_started', () => {
+ console.log("Received scan_started event in ServerContext");
+ setIsScanning(true);
+ setScanComplete(false);
+ setScanProgress(null);
+ setError(null);
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Handle scan-progress event
+ listen('scan_progress', (event) => {
+ console.log("Received scan_progress event in ServerContext:", event.payload);
+ // Map backend field names to frontend field names
+ const progressData = event.payload as { processed: number; total: number; current_file: string };
+ setScanProgress({
+ current: progressData.processed,
+ total: progressData.total,
+ current_file: progressData.current_file
+ });
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Handle scan-completed event
+ listen('scan_completed', (event) => {
+ console.log("Received scan_completed event in ServerContext:", event.payload);
+ const result = event.payload as ScanResult;
+
+ setServerInfo(result.server_info);
+ setIsScanning(false);
+ setScanComplete(true);
+
+ // Call the callback if provided
+ if (onScanComplete) {
+ onScanComplete(result);
+ }
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Handle scan-error event
+ listen('scan_error', (event) => {
+ console.log("Received scan_error event in ServerContext:", event.payload);
+ setError(event.payload as string);
+ setIsScanning(false);
+ }).then(unlisten => unlisteners.push(unlisten));
+
+ // Cleanup function to remove event listeners
+ return () => {
+ unlisteners.forEach(unlisten => unlisten());
+ };
+ }, [onScanComplete]);
+
+ // Set server path
+ const setServerPath = useCallback((path: string) => {
+ setServerPathState(path);
+ setServerInfo(null);
+ setScanComplete(false);
+ setError(null);
+ setScanProgress(null);
+ }, []);
+
+ // Clear error state
+ const clearError = useCallback(() => {
+ setError(null);
+ }, []);
+
+ // Function to select a server directory using Tauri dialog
+ const selectDirectory = useCallback(async () => {
+ try {
+ const selected = await open({
+ directory: true,
+ multiple: false,
+ title: "Select Minecraft Server Folder",
+ });
+
+ if (selected && typeof selected === "string") {
+ console.log(`Directory selected: ${selected}`);
+ setServerPath(selected);
+
+ try {
+ // Load persisted plugin data if available
+ console.log(`Attempting to load persisted data for: ${selected}`);
+ const loadedPlugins: Plugin[] = await invoke("load_plugin_data", { serverPath: selected });
+
+ if (loadedPlugins && loadedPlugins.length > 0) {
+ console.log(`Loaded ${loadedPlugins.length} plugins from persistence.`);
+ // We don't set plugins here as that's handled by the PluginContext
+ setScanComplete(true);
+ } else {
+ console.log("No persisted plugin data found for this server.");
+ }
+ } catch (loadError) {
+ console.error("Error loading persisted plugin data:", loadError);
+ setError(`Failed to load previous plugin data: ${loadError}`);
+ }
+ } else {
+ console.log("Directory selection cancelled.");
+ }
+ } catch (err) {
+ console.error("Error selecting directory:", err);
+ setError(`Error selecting directory: ${err}`);
+ }
+ }, [setServerPath]);
+
+ // Function to scan for plugins in the selected directory
+ const scanForPlugins = useCallback(async () => {
+ if (!isValidPath(serverPath) || isScanning) return;
+
+ try {
+ console.log("Starting scan for plugins in:", serverPath);
+ setIsScanning(true);
+ setScanComplete(false);
+ setScanProgress(null);
+ setError(null);
+
+ await invoke("scan_server_dir", { path: serverPath });
+ console.log("Scan server dir command invoked successfully");
+
+ // Note: The actual scan results will be received via event listeners
+ // which are now set up in the useEffect hook above
+
+ } catch (err) {
+ console.error("Error invoking scan command:", err);
+ setError(`Failed to start scan: ${err as string}`);
+ setIsScanning(false);
+ }
+ }, [serverPath, isScanning]);
+
+ // Function to get the plugins directory path
+ const getPluginsPath = useCallback((): string | null => {
+ if (!serverInfo || !serverPath) return null;
+
+ return `${serverPath}/${serverInfo.plugins_directory}`;
+ }, [serverPath, serverInfo]);
+
+ // Define the context value
+ const contextValue: ServerContextProps = {
+ serverPath,
+ serverInfo,
+ isScanning,
+ scanComplete,
+ error,
+ scanProgress,
+ selectDirectory,
+ scanForPlugins,
+ setServerPath: setServerPathState,
+ clearError,
+ getPluginsPath
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default ServerProvider;
\ No newline at end of file
diff --git a/src/context/ServerContext/useServerContext.ts b/src/context/ServerContext/useServerContext.ts
new file mode 100644
index 0000000..451ff4d
--- /dev/null
+++ b/src/context/ServerContext/useServerContext.ts
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { ServerContext } from './ServerContext';
+
+/**
+ * Custom hook for accessing the ServerContext
+ *
+ * @returns The ServerContext values and methods
+ * @throws Error if used outside of a ServerProvider
+ */
+export const useServerContext = () => {
+ const context = useContext(ServerContext);
+
+ if (!context || Object.keys(context).length === 0) {
+ throw new Error('useServerContext must be used within a ServerProvider');
+ }
+
+ return context;
+};
+
+export default useServerContext;
\ No newline at end of file
diff --git a/src/context/UIContext/UIContext.tsx b/src/context/UIContext/UIContext.tsx
new file mode 100644
index 0000000..3818c1c
--- /dev/null
+++ b/src/context/UIContext/UIContext.tsx
@@ -0,0 +1,150 @@
+import React, { createContext, useState, useCallback, ReactNode } from 'react';
+import { Plugin } from '../../types/plugin.types';
+
+export type MessageType = 'info' | 'warning' | 'error' | 'success';
+
+export interface WarningMessage {
+ text: string;
+ type: MessageType;
+ id: number;
+}
+
+export interface PremiumPluginInfo {
+ name: string;
+ errorMessage: string;
+}
+
+export interface UIContextProps {
+ warningMessage: WarningMessage | null;
+ premiumPluginInfo: PremiumPluginInfo | null;
+ downloadProgress: number;
+ isCompatibilityDialogOpen: boolean;
+ currentPluginForCompatibility: Plugin | null;
+ isUpdateAvailable: boolean;
+ updateVersion: string | null;
+ showWarningMessage: (text: string, type: MessageType) => void;
+ clearWarningMessage: () => void;
+ handlePremiumPlugin: (errorMessage: string, pluginName: string) => void;
+ clearPremiumPluginInfo: () => void;
+ setDownloadProgress: (progress: number) => void;
+ showCompatibilityDialog: (plugin: Plugin) => void;
+ closeCompatibilityDialog: () => void;
+ showUpdateAvailableMessage: (version: string) => void;
+ clearUpdateAvailableMessage: () => void;
+}
+
+export const UIContext = createContext(null);
+
+interface UIProviderProps {
+ children: ReactNode;
+}
+
+let messageIdCounter = 0;
+
+export const UIProvider: React.FC = ({ children }) => {
+ // State for warning messages
+ const [warningMessage, setWarningMessage] = useState(null);
+
+ // State for premium plugin info
+ const [premiumPluginInfo, setPremiumPluginInfo] = useState(null);
+
+ // State for download progress
+ const [downloadProgress, setDownloadProgress] = useState(0);
+
+ // State for compatibility dialog
+ const [isCompatibilityDialogOpen, setIsCompatibilityDialogOpen] = useState(false);
+ const [currentPluginForCompatibility, setCurrentPluginForCompatibility] = useState(null);
+
+ // State for update available notification
+ const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
+ const [updateVersion, setUpdateVersion] = useState(null);
+
+ // Function to show a warning message
+ const showWarningMessage = useCallback((text: string, type: MessageType = 'warning') => {
+ setWarningMessage({
+ text,
+ type,
+ id: messageIdCounter++
+ });
+
+ // Auto-clear messages after 5 seconds except for errors
+ if (type !== 'error') {
+ setTimeout(() => {
+ setWarningMessage(prevMessage =>
+ prevMessage && prevMessage.id === messageIdCounter - 1 ? null : prevMessage
+ );
+ }, 5000);
+ }
+ }, []);
+
+ // Function to clear the warning message
+ const clearWarningMessage = useCallback(() => {
+ setWarningMessage(null);
+ }, []);
+
+ // Function to handle premium plugin errors
+ const handlePremiumPlugin = useCallback((errorMessage: string, pluginName: string) => {
+ setPremiumPluginInfo({
+ name: pluginName,
+ errorMessage
+ });
+ }, []);
+
+ // Function to clear premium plugin info
+ const clearPremiumPluginInfo = useCallback(() => {
+ setPremiumPluginInfo(null);
+ }, []);
+
+ // Function to show compatibility dialog
+ const showCompatibilityDialog = useCallback((plugin: Plugin) => {
+ setCurrentPluginForCompatibility(plugin);
+ setIsCompatibilityDialogOpen(true);
+ }, []);
+
+ // Function to close compatibility dialog
+ const closeCompatibilityDialog = useCallback(() => {
+ setIsCompatibilityDialogOpen(false);
+ setCurrentPluginForCompatibility(null);
+ }, []);
+
+ // Function to show update available message
+ const showUpdateAvailableMessage = useCallback((version: string) => {
+ setUpdateVersion(version);
+ setIsUpdateAvailable(true);
+ showWarningMessage(`Update available: version ${version}`, 'info');
+ }, [showWarningMessage]);
+
+ // Function to clear update available message
+ const clearUpdateAvailableMessage = useCallback(() => {
+ setIsUpdateAvailable(false);
+ setUpdateVersion(null);
+ }, []);
+
+ // Context value
+ const value: UIContextProps = {
+ warningMessage,
+ premiumPluginInfo,
+ downloadProgress,
+ isCompatibilityDialogOpen,
+ currentPluginForCompatibility,
+ isUpdateAvailable,
+ updateVersion,
+ showWarningMessage,
+ clearWarningMessage,
+ handlePremiumPlugin,
+ clearPremiumPluginInfo,
+ setDownloadProgress,
+ showCompatibilityDialog,
+ closeCompatibilityDialog,
+ showUpdateAvailableMessage,
+ clearUpdateAvailableMessage
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default UIProvider;
\ No newline at end of file
diff --git a/src/context/UIContext/useUIContext.ts b/src/context/UIContext/useUIContext.ts
new file mode 100644
index 0000000..70022a3
--- /dev/null
+++ b/src/context/UIContext/useUIContext.ts
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { UIContext } from './UIContext';
+
+/**
+ * Custom hook for accessing the UIContext
+ *
+ * @returns The UIContext values and methods
+ * @throws Error if used outside of a UIProvider
+ */
+export const useUIContext = () => {
+ const context = useContext(UIContext);
+
+ if (!context || Object.keys(context).length === 0) {
+ throw new Error('useUIContext must be used within a UIProvider');
+ }
+
+ return context;
+};
+
+export default useUIContext;
\ No newline at end of file
diff --git a/src/hooks/useAppUpdates.ts b/src/hooks/useAppUpdates.ts
new file mode 100644
index 0000000..8427c17
--- /dev/null
+++ b/src/hooks/useAppUpdates.ts
@@ -0,0 +1,59 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useUIContext } from '../context/UIContext/useUIContext';
+import { checkForAppUpdate as checkForAppUpdateAPI, UpdateInfo } from '../utils/appUpdates';
+
+/**
+ * Custom hook for managing application updates
+ */
+export const useAppUpdates = () => {
+ const [isCheckingAppUpdate, setIsCheckingAppUpdate] = useState(false);
+ const [appUpdateAvailable, setAppUpdateAvailable] = useState(false);
+ const [appUpdateVersion, setAppUpdateVersion] = useState(null);
+
+ const { showUpdateAvailableMessage } = useUIContext();
+
+ // Check for application updates
+ const checkForAppUpdate = useCallback(async () => {
+ if (isCheckingAppUpdate) return;
+
+ setIsCheckingAppUpdate(true);
+
+ try {
+ console.log('Checking for application updates...');
+ const updateInfo: UpdateInfo = await checkForAppUpdateAPI();
+
+ setAppUpdateAvailable(updateInfo.available);
+ setAppUpdateVersion(updateInfo.version || null);
+
+ if (updateInfo.available && updateInfo.version) {
+ console.log(`Application update available: ${updateInfo.version}`);
+ showUpdateAvailableMessage(updateInfo.version);
+ } else {
+ console.log('No application updates available');
+ }
+ } catch (error) {
+ console.error('Error checking for app updates:', error);
+ } finally {
+ setIsCheckingAppUpdate(false);
+ }
+ }, [isCheckingAppUpdate, showUpdateAvailableMessage]);
+
+ // Auto-check for updates on initial load
+ useEffect(() => {
+ // Wait a moment after initial load before checking
+ const timer = setTimeout(() => {
+ checkForAppUpdate();
+ }, 2000);
+
+ return () => clearTimeout(timer);
+ }, [checkForAppUpdate]);
+
+ return {
+ isCheckingAppUpdate,
+ appUpdateAvailable,
+ appUpdateVersion,
+ checkForAppUpdate
+ };
+};
+
+export default useAppUpdates;
\ No newline at end of file
diff --git a/src/hooks/useEventListeners.ts b/src/hooks/useEventListeners.ts
new file mode 100644
index 0000000..7675302
--- /dev/null
+++ b/src/hooks/useEventListeners.ts
@@ -0,0 +1,215 @@
+import { useEffect, useRef } from 'react';
+import { listen, UnlistenFn } from "@tauri-apps/api/event";
+
+// Import types
+import { ScanProgress, ScanResult } from '../types/server.types';
+import { BulkUpdateProgressPayload, SingleUpdateResultPayload, DownloadProgress, PremiumPluginInfo } from '../types/events.types';
+import { Plugin } from '../types/plugin.types';
+
+// Event handler types
+export type ScanStartedHandler = (serverPath: string) => void;
+export type ScanProgressHandler = (progress: { current: number; total: number }) => void;
+export type ScanCompletedHandler = (result: {
+ plugins: any[];
+ server_info: any;
+}) => void;
+export type ScanErrorHandler = (error: string) => void;
+
+export type BulkUpdateStartHandler = (totalPlugins: number) => void;
+export type UpdateCheckProgressHandler = (progress: {
+ current: number;
+ total: number;
+ plugin_name?: string;
+}) => void;
+export type SingleUpdateStartedHandler = (pluginName: string) => void;
+export type SingleUpdateCompletedHandler = (result: {
+ success: boolean;
+ error?: string;
+ plugin_name?: string;
+ original_file_path?: string;
+}) => void;
+
+export type DownloadProgressHandler = (progress: {
+ percentage: number;
+ pluginName?: string;
+ status: 'downloading' | 'completed' | 'error';
+ error?: string;
+}) => void;
+
+export type UpdateCheckCompleteHandler = (result: {
+ outdated_count: number;
+ total_checked: number;
+ success: boolean;
+}) => void;
+
+export type AppUpdateAvailableHandler = (info: {
+ version: string;
+ body?: string;
+ date?: string;
+}) => void;
+
+export interface EventListenerProps {
+ // Scan events
+ onScanStarted?: ScanStartedHandler;
+ onScanProgress?: ScanProgressHandler;
+ onScanCompleted?: ScanCompletedHandler;
+ onScanError?: ScanErrorHandler;
+
+ // Update check events
+ onBulkUpdateStart?: BulkUpdateStartHandler;
+ onUpdateCheckProgress?: UpdateCheckProgressHandler;
+ onSingleUpdateStarted?: SingleUpdateStartedHandler;
+ onSingleUpdateCompleted?: SingleUpdateCompletedHandler;
+ onDownloadProgress?: DownloadProgressHandler;
+ onUpdateCheckComplete?: UpdateCheckCompleteHandler;
+
+ // App update events
+ onAppUpdateAvailable?: AppUpdateAvailableHandler;
+}
+
+/**
+ * Custom hook for setting up all the Tauri event listeners
+ *
+ * @param handlers Object containing event handler functions
+ */
+export const useEventListeners = ({
+ onScanStarted,
+ onScanProgress,
+ onScanCompleted,
+ onScanError,
+ onBulkUpdateStart,
+ onUpdateCheckProgress,
+ onSingleUpdateStarted,
+ onSingleUpdateCompleted,
+ onDownloadProgress,
+ onUpdateCheckComplete,
+ onAppUpdateAvailable
+}: EventListenerProps) => {
+ useEffect(() => {
+ const unlistenFunctions: UnlistenFn[] = [];
+
+ // Set up scan event listeners
+ if (onScanStarted) {
+ listen('scan_started', (event) => {
+ onScanStarted(event.payload as string);
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onScanProgress) {
+ listen('scan_progress', (event) => {
+ onScanProgress(event.payload as { current: number; total: number });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onScanCompleted) {
+ listen('scan_completed', (event) => {
+ onScanCompleted(event.payload as { plugins: any[]; server_info: any });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onScanError) {
+ listen('scan_error', (event) => {
+ onScanError(event.payload as string);
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ // Set up update check event listeners
+ if (onBulkUpdateStart) {
+ listen('bulk_update_start', (event) => {
+ onBulkUpdateStart(event.payload as number);
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onUpdateCheckProgress) {
+ listen('update_check_progress', (event) => {
+ onUpdateCheckProgress(event.payload as {
+ current: number;
+ total: number;
+ plugin_name?: string;
+ });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onSingleUpdateStarted) {
+ listen('single_update_started', (event) => {
+ onSingleUpdateStarted(event.payload as string);
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onSingleUpdateCompleted) {
+ listen('single_update_completed', (event) => {
+ onSingleUpdateCompleted(event.payload as {
+ success: boolean;
+ error?: string;
+ plugin_name?: string;
+ original_file_path?: string;
+ });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onDownloadProgress) {
+ listen('download_progress', (event) => {
+ onDownloadProgress(event.payload as {
+ percentage: number;
+ pluginName?: string;
+ status: 'downloading' | 'completed' | 'error';
+ error?: string;
+ });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ if (onUpdateCheckComplete) {
+ // Listen for Tauri event
+ listen('update_check_complete', (event) => {
+ console.log("Received Tauri update_check_complete event:", event.payload);
+ onUpdateCheckComplete(event.payload as {
+ outdated_count: number;
+ total_checked: number;
+ success: boolean;
+ });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+
+ // Also listen for custom browser event (fallback)
+ const handleCustomEvent = (event: any) => {
+ console.log("Received custom update_check_complete event:", event.detail);
+ onUpdateCheckComplete(event.detail);
+ };
+
+ window.addEventListener('update_check_complete', handleCustomEvent);
+
+ // Add cleanup function for browser event
+ unlistenFunctions.push(() => {
+ window.removeEventListener('update_check_complete', handleCustomEvent);
+ });
+ }
+
+ if (onAppUpdateAvailable) {
+ listen('update_available', (event) => {
+ onAppUpdateAvailable(event.payload as {
+ version: string;
+ body?: string;
+ date?: string;
+ });
+ }).then(unlisten => unlistenFunctions.push(unlisten));
+ }
+
+ // Clean up function to remove all listeners
+ return () => {
+ unlistenFunctions.forEach(unlisten => unlisten());
+ };
+ }, [
+ onScanStarted,
+ onScanProgress,
+ onScanCompleted,
+ onScanError,
+ onBulkUpdateStart,
+ onUpdateCheckProgress,
+ onSingleUpdateStarted,
+ onSingleUpdateCompleted,
+ onDownloadProgress,
+ onUpdateCheckComplete,
+ onAppUpdateAvailable
+ ]);
+};
+
+export default useEventListeners;
\ No newline at end of file
diff --git a/src/hooks/usePluginActions.ts b/src/hooks/usePluginActions.ts
new file mode 100644
index 0000000..6badd5c
--- /dev/null
+++ b/src/hooks/usePluginActions.ts
@@ -0,0 +1,418 @@
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import { usePluginContext } from '../context/PluginContext/usePluginContext';
+import { useUIContext } from '../context/UIContext/useUIContext';
+import { useEventListeners } from './useEventListeners';
+import { Plugin, PotentialPluginMatch } from '../types/plugin.types';
+import { ServerType } from '../types/server.types';
+import { isPremiumPluginError } from '../utils/validators';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+
+// Define the potential matches payload type
+interface PotentialMatchesPayload {
+ plugin: {
+ file_path: string;
+ };
+ matches: PotentialPluginMatch[];
+}
+
+/**
+ * Custom hook that extends PluginContext with enhanced plugin actions
+ * and automatic event handling
+ */
+export const usePluginActions = (serverType?: ServerType) => {
+ const {
+ plugins,
+ selectedPlugin,
+ isCheckingUpdates,
+ updateError,
+ pluginLoadingStates,
+ bulkUpdateProgress,
+ isCheckingSinglePlugin,
+ checkForUpdates: contextCheckForUpdates,
+ checkSinglePlugin: contextCheckSinglePlugin,
+ updatePlugin: contextUpdatePlugin,
+ showPluginDetails,
+ closePluginDetails,
+ setPlugins,
+ clearUpdateError
+ } = usePluginContext();
+
+ const {
+ showCompatibilityDialog,
+ handlePremiumPlugin,
+ showWarningMessage
+ } = useUIContext();
+
+ // Local state to track updates in progress
+ const [updatingPlugin, setUpdatingPlugin] = useState(null);
+ const [currentUpdateProgress, setCurrentUpdateProgress] = useState(0);
+
+ // Add state for potential matches
+ const [potentialMatches, setPotentialMatches] = useState([]);
+ const [currentPluginForMatch, setCurrentPluginForMatch] = useState(null);
+ const [isMatchSelectorOpen, setIsMatchSelectorOpen] = useState(false);
+
+ // Create a state object for plugin loading states that we manage locally
+ const [localPluginLoadingStates, setLocalPluginLoadingStates] = useState>({});
+
+ // Enhanced check for updates function
+ const checkForUpdates = useCallback(async () => {
+ await contextCheckForUpdates(serverType);
+ }, [contextCheckForUpdates, serverType]);
+
+ // Enhanced function for managing loading states
+ const checkSinglePlugin = useCallback(async (plugin: Plugin) => {
+ // First, check if the plugin is already being checked
+ if (pluginLoadingStates[plugin.file_path] || localPluginLoadingStates[plugin.file_path]) {
+ console.log(`Plugin ${plugin.name} is already being checked for updates, skipping.`);
+ return;
+ }
+
+ // Set loading state before checking update
+ setLocalPluginLoadingStates(prev => ({
+ ...prev,
+ [plugin.file_path]: true
+ }));
+
+ try {
+ console.log(`Checking plugin ${plugin.name} for updates`);
+ await contextCheckSinglePlugin(plugin);
+ // The loading state will be cleared by the event listener when update check completes
+ } catch (error) {
+ console.error(`Error checking plugin ${plugin.name} for updates:`, error);
+ showWarningMessage(`Failed to check ${plugin.name} for updates: ${error}`, 'error');
+
+ // Clear loading state on error
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[plugin.file_path];
+ return newState;
+ });
+ }
+ }, [contextCheckSinglePlugin, showWarningMessage, pluginLoadingStates, localPluginLoadingStates]);
+
+ // Enhanced update plugin function with compatibility check
+ const updatePlugin = useCallback((plugin: Plugin) => {
+ // Set loading state
+ setLocalPluginLoadingStates(prev => ({
+ ...prev,
+ [plugin.file_path]: true
+ }));
+
+ // Instead of updating directly, show compatibility dialog first
+ showCompatibilityDialog(plugin);
+
+ // Note: The actual update will happen when the user confirms in the dialog
+ // and the UIContext will call the updatePlugin function from PluginContext
+ // Loading state will be cleared by event listeners
+ }, [showCompatibilityDialog]);
+
+ // Function to proceed with update after compatibility check
+ const proceedWithUpdate = useCallback(async (plugin: Plugin) => {
+ try {
+ await contextUpdatePlugin(plugin);
+ } catch (error: any) {
+ console.error('Error in proceedWithUpdate:', error);
+
+ // Handle premium plugin error
+ if (isPremiumPluginError(error.toString())) {
+ handlePremiumPlugin(error.toString(), plugin.name);
+ }
+ }
+ }, [contextUpdatePlugin, handlePremiumPlugin]);
+
+ // Listen for events
+ useEventListeners({
+ onBulkUpdateStart: (totalPlugins) => {
+ console.log('Bulk update start handled in usePluginActions:', totalPlugins);
+ // Context already handles this, no additional action needed
+ },
+ onUpdateCheckProgress: (progress) => {
+ console.log('Update check progress handled in usePluginActions:', progress);
+ // Context already handles this, no additional action needed
+ },
+ onSingleUpdateStarted: (pluginName) => {
+ console.log('Single update started handled in usePluginActions:', pluginName);
+ // Context already handles this, no additional action needed
+ },
+ onSingleUpdateCompleted: (result) => {
+ console.log('Single update completed handled in usePluginActions:', result);
+ const plugin = plugins.find(p => p.file_path === result.original_file_path);
+ const pluginName = plugin ? plugin.name : 'Plugin';
+
+ if (result.error) {
+ // If it's a premium plugin error, handle it specially
+ if (isPremiumPluginError(result.error)) {
+ if (plugin) {
+ handlePremiumPlugin(result.error, plugin.name);
+ // Optionally show a general warning too
+ showWarningMessage(`Could not update premium plugin: ${pluginName}. Requires manual download.`, 'warning');
+ }
+ } else {
+ // Show general error notification
+ showWarningMessage(`Failed to update ${pluginName}: ${result.error}`, 'error');
+ }
+ } else {
+ // Show success notification
+ showWarningMessage(`${pluginName} updated successfully!`, 'success');
+ }
+ },
+ onDownloadProgress: (progress) => {
+ console.log('Download progress handled in usePluginActions:', progress);
+
+ if (progress.pluginName) {
+ setUpdatingPlugin(progress.pluginName);
+ setCurrentUpdateProgress(progress.percentage);
+
+ if (progress.status === 'completed') {
+ // Reset after completion
+ setTimeout(() => {
+ setUpdatingPlugin(null);
+ setCurrentUpdateProgress(0);
+ }, 1000);
+ }
+ }
+ }
+ });
+
+ // Listen for potential matches in a useEffect
+ useEffect(() => {
+ const unlistenPotentialMatches = listen('potential_matches_found', (event: { payload: PotentialMatchesPayload }) => {
+ const payload = event.payload;
+ console.log('Potential matches found:', payload);
+
+ if (payload.matches && payload.matches.length > 0) {
+ // Find the plugin this is for
+ const targetPlugin = plugins.find(p => p.file_path === payload.plugin.file_path);
+ if (targetPlugin) {
+ setPotentialMatches(payload.matches);
+ setCurrentPluginForMatch(targetPlugin);
+ setIsMatchSelectorOpen(true);
+
+ // Clear loading state for this plugin
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[payload.plugin.file_path];
+ return newState;
+ });
+ }
+ }
+ });
+
+ return () => {
+ unlistenPotentialMatches.then((unlisten: () => void) => unlisten());
+ };
+ }, [plugins]);
+
+ // Function to handle selecting a match
+ const handleMatchSelection = useCallback(async (match: PotentialPluginMatch) => {
+ if (currentPluginForMatch) {
+ try {
+ // Set loading state for this plugin
+ setLocalPluginLoadingStates(prev => ({
+ ...prev,
+ [currentPluginForMatch.file_path]: true
+ }));
+
+ // Invoke backend to update with selected match
+ await invoke('set_plugin_match', {
+ pluginPath: currentPluginForMatch.file_path,
+ match: {
+ name: match.name,
+ repository: match.repository,
+ repositoryId: match.repository_id,
+ version: match.version,
+ pageUrl: match.page_url
+ }
+ });
+
+ // Show success message
+ showWarningMessage(`Successfully matched ${currentPluginForMatch.name} with ${match.name} from ${match.repository}`, 'success');
+
+ // Refresh plugin data
+ checkSinglePlugin(currentPluginForMatch);
+ } catch (error) {
+ console.error('Error setting plugin match:', error);
+ showWarningMessage(`Failed to set plugin match: ${error}`, 'error');
+
+ // Clear loading state
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[currentPluginForMatch.file_path];
+ return newState;
+ });
+ }
+ }
+
+ // Close the selector
+ setIsMatchSelectorOpen(false);
+ setPotentialMatches([]);
+ setCurrentPluginForMatch(null);
+ }, [currentPluginForMatch, showWarningMessage, checkSinglePlugin]);
+
+ // Function to close match selector without selecting
+ const closeMatchSelector = useCallback(() => {
+ setIsMatchSelectorOpen(false);
+ setPotentialMatches([]);
+ setCurrentPluginForMatch(null);
+
+ // Clear loading state if there's a current plugin
+ if (currentPluginForMatch) {
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[currentPluginForMatch.file_path];
+ return newState;
+ });
+ }
+ }, [currentPluginForMatch]);
+
+ // Get outdated plugins count
+ const getOutdatedPluginsCount = useCallback((): number => {
+ return plugins.filter(plugin => plugin.has_update).length;
+ }, [plugins]);
+
+ // Get plugin by name
+ const getPluginByName = useCallback((name: string): Plugin | undefined => {
+ return plugins.find(plugin => plugin.name.toLowerCase() === name.toLowerCase());
+ }, [plugins]);
+
+ // Get plugins filtered by criteria
+ const getFilteredPlugins = useCallback((criteria: Partial): Plugin[] => {
+ return plugins.filter(plugin => {
+ return Object.entries(criteria).every(([key, value]) => {
+ return plugin[key as keyof Plugin] === value;
+ });
+ });
+ }, [plugins]);
+
+ // Combined loading states from context and local state
+ const combinedLoadingStates = useMemo(() => {
+ return {
+ ...localPluginLoadingStates,
+ ...pluginLoadingStates
+ };
+ }, [localPluginLoadingStates, pluginLoadingStates]);
+
+ // Set up event listeners for plugin-related events
+ useEffect(() => {
+ const unlisteners: (() => void)[] = [];
+
+ // Listen for bulk updates complete
+ window.addEventListener('update_check_complete', (event: any) => {
+ console.log('Custom update_check_complete event received:', event.detail);
+
+ if (event.detail?.success && event.detail?.outdated_count) {
+ const message = `Found ${event.detail.outdated_count} plugins with updates available.`;
+ showWarningMessage(message, 'info');
+ }
+ });
+
+ // Listen for single plugin update completed
+ window.addEventListener('single_plugin_updated', (event: any) => {
+ console.log('Custom single_plugin_updated event received:', event.detail);
+
+ if (event.detail?.success) {
+ const message = `Successfully updated ${event.detail.plugin_name}.`;
+ showWarningMessage(message, 'success');
+
+ // Clear loading state for this plugin
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ if (event.detail.old_path) {
+ delete newState[event.detail.old_path];
+ }
+ return newState;
+ });
+ }
+ });
+
+ // Listen for single plugin update failed
+ window.addEventListener('single_plugin_update_failed', (event: any) => {
+ console.log('Custom single_plugin_update_failed event received:', event.detail);
+
+ if (event.detail?.plugin_name) {
+ const message = `Failed to update ${event.detail.plugin_name}: ${event.detail.error || 'Unknown error'}`;
+ showWarningMessage(message, 'error');
+
+ // Clear loading state for this plugin
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ if (event.detail.plugin_name) {
+ // Find the plugin by name and clear its loading state
+ const plugin = plugins.find(p => p.name === event.detail.plugin_name);
+ if (plugin?.file_path) {
+ delete newState[plugin.file_path];
+ }
+ }
+ return newState;
+ });
+ }
+ });
+
+ // Listen for single plugin check completed
+ window.addEventListener('single_plugin_check_completed', (event: any) => {
+ console.log('Custom single_plugin_check_completed event received:', event.detail);
+
+ if (event.detail?.plugin_path) {
+ // Clear loading state for this plugin
+ setLocalPluginLoadingStates(prev => {
+ const newState = { ...prev };
+ delete newState[event.detail.plugin_path];
+ return newState;
+ });
+
+ // Show result notification
+ if (event.detail.error) {
+ showWarningMessage(
+ `Failed to check for updates: ${event.detail.error}`,
+ 'error'
+ );
+ }
+ }
+ });
+
+ return () => {
+ // Remove event listeners
+ window.removeEventListener('update_check_complete', () => {});
+ window.removeEventListener('single_plugin_updated', () => {});
+ window.removeEventListener('single_plugin_update_failed', () => {});
+ window.removeEventListener('single_plugin_check_completed', () => {});
+ };
+ }, [plugins, showWarningMessage]);
+
+ return {
+ // Original context values
+ plugins,
+ selectedPlugin,
+ isCheckingUpdates,
+ updateError,
+ pluginLoadingStates: combinedLoadingStates,
+ bulkUpdateProgress,
+ isCheckingSinglePlugin,
+ showPluginDetails,
+ closePluginDetails,
+ setPlugins,
+ clearUpdateError,
+
+ // Enhanced functionality
+ updatingPlugin,
+ currentUpdateProgress,
+ checkForUpdates,
+ checkSinglePlugin,
+ updatePlugin,
+ proceedWithUpdate,
+ getOutdatedPluginsCount,
+ getPluginByName,
+ getFilteredPlugins,
+
+ // Add match selector state and handlers
+ potentialMatches,
+ currentPluginForMatch,
+ isMatchSelectorOpen,
+ handleMatchSelection,
+ closeMatchSelector
+ };
+};
+
+export default usePluginActions;
\ No newline at end of file
diff --git a/src/hooks/useServerActions.ts b/src/hooks/useServerActions.ts
new file mode 100644
index 0000000..dc86d6d
--- /dev/null
+++ b/src/hooks/useServerActions.ts
@@ -0,0 +1,109 @@
+import { useState, useCallback } from 'react';
+import { useServerContext } from '../context/ServerContext/useServerContext';
+import { useEventListeners } from './useEventListeners';
+import { ScanResult, ServerInfo } from '../types/server.types';
+import { Plugin } from '../types/plugin.types';
+
+/**
+ * Custom hook that extends ServerContext with enhanced scan functionality
+ * with automatic event handling
+ */
+export const useServerActions = (onPluginsLoaded?: (plugins: Plugin[]) => void) => {
+ const {
+ serverPath,
+ serverInfo,
+ isScanning,
+ scanComplete,
+ error,
+ scanProgress,
+ scanForPlugins: contextScanForPlugins,
+ selectDirectory: contextSelectDirectory,
+ setServerPath,
+ clearError,
+ getPluginsPath
+ } = useServerContext();
+
+ // Local state for enhanced functionality
+ const [lastScanResult, setLastScanResult] = useState(null);
+
+ // Handle scan events
+ useEventListeners({
+ onScanStarted: () => {
+ console.log('Scan started handled in useServerActions');
+ // This is already handled by the context, no additional action needed
+ },
+ onScanProgress: (progress) => {
+ console.log('Scan progress handled in useServerActions:', progress);
+ // This is already handled by the context, no additional action needed
+ },
+ onScanCompleted: (result) => {
+ console.log('Scan completed handled in useServerActions:', result);
+ setLastScanResult(result);
+
+ // If a callback was provided, call it with the plugins
+ if (onPluginsLoaded) {
+ onPluginsLoaded(result.plugins);
+ }
+ },
+ onScanError: (errorMessage) => {
+ console.log('Scan error handled in useServerActions:', errorMessage);
+ // This is already handled by the context, no additional action needed
+ }
+ });
+
+ // Enhanced select directory with post-selection actions
+ const selectDirectory = useCallback(async () => {
+ await contextSelectDirectory();
+ // The rest is handled by the context and event listeners
+ }, [contextSelectDirectory]);
+
+ // Enhanced scan for plugins with additional options
+ const scanForPlugins = useCallback(async () => {
+ // Reset the last scan result if we're starting a new scan
+ setLastScanResult(null);
+
+ // Call the context's scan function
+ await contextScanForPlugins();
+ // The rest is handled by the context and event listeners
+ }, [contextScanForPlugins]);
+
+ // Get server name based on server info
+ const getServerName = useCallback((): string => {
+ if (!serverInfo) return 'Unknown Server';
+
+ let name = serverInfo.server_type;
+ if (serverInfo.minecraft_version) {
+ name += ` (${serverInfo.minecraft_version})`;
+ }
+
+ return name;
+ }, [serverInfo]);
+
+ // Check if server is compatible with a specific server type
+ const isCompatibleWith = useCallback((serverTypes: string[]): boolean => {
+ if (!serverInfo) return false;
+ return serverTypes.includes(serverInfo.server_type);
+ }, [serverInfo]);
+
+ return {
+ // Original context values
+ serverPath,
+ serverInfo,
+ isScanning,
+ scanComplete,
+ error,
+ scanProgress,
+ setServerPath,
+ clearError,
+ getPluginsPath,
+
+ // Enhanced functionality
+ lastScanResult,
+ selectDirectory,
+ scanForPlugins,
+ getServerName,
+ isCompatibleWith
+ };
+};
+
+export default useServerActions;
\ No newline at end of file
diff --git a/src/hooks/useUpdateActions.ts b/src/hooks/useUpdateActions.ts
new file mode 100644
index 0000000..9c2ad86
--- /dev/null
+++ b/src/hooks/useUpdateActions.ts
@@ -0,0 +1,113 @@
+import { useCallback } from 'react';
+import { usePluginContext } from '../context/PluginContext/usePluginContext';
+import { useUIContext } from '../context/UIContext/useUIContext';
+import { useEventListeners } from './useEventListeners';
+import { useServerContext } from '../context/ServerContext/useServerContext';
+import { Plugin } from '../types/plugin.types';
+
+/**
+ * Custom hook for managing plugin updates
+ */
+export const useUpdateActions = () => {
+ const {
+ plugins,
+ checkForUpdates: checkForPluginUpdates,
+ updatePlugin,
+ bulkUpdateProgress,
+ isCheckingUpdates
+ } = usePluginContext();
+
+ const {
+ showWarningMessage
+ } = useUIContext();
+
+ const { serverPath } = useServerContext();
+
+ // Listen for update-related events
+ useEventListeners({
+ onUpdateCheckComplete: (result) => {
+ console.log('Update check complete handled in useUpdateActions:', result);
+
+ if (result.outdated_count > 0) {
+ showWarningMessage(
+ `Found ${result.outdated_count} plugin(s) with updates available.`,
+ 'info'
+ );
+ } else {
+ showWarningMessage('All plugins are up to date!', 'success');
+ }
+ }
+ });
+
+ // Update all plugins with available updates
+ const updateAllPlugins = useCallback(async () => {
+ const pluginsToUpdate = plugins.filter(plugin => plugin.has_update);
+
+ if (pluginsToUpdate.length === 0) {
+ showWarningMessage('No plugins with updates available.', 'info');
+ return;
+ }
+
+ // The actual update process is handled by the PluginContext
+ // This is just a convenience function to find and trigger updates
+ for (const plugin of pluginsToUpdate) {
+ try {
+ await updatePlugin(plugin);
+ } catch (error: any) {
+ console.error(`Error updating plugin ${plugin.name}:`, error);
+ // Continue with other plugins if one fails
+ }
+ }
+ }, [plugins, updatePlugin, showWarningMessage]);
+
+ // Check for plugin updates with improved debugging
+ const checkForAllUpdates = useCallback(async () => {
+ console.log('Starting plugin update check in useUpdateActions');
+
+ // Get the latest server path directly from context
+ const currentServerPath = serverPath;
+
+ console.log('Current state:', {
+ serverPath: currentServerPath,
+ pluginsCount: plugins.length,
+ isCheckingUpdates
+ });
+
+ if (!currentServerPath) {
+ console.error('No server path available. Please select a server first.');
+ showWarningMessage('No server path available. Please select a server first.', 'error');
+ return;
+ }
+
+ if (!plugins.length) {
+ console.error('No plugins available to check for updates.');
+ showWarningMessage('No plugins available to check for updates.', 'warning');
+ return;
+ }
+
+ if (isCheckingUpdates) {
+ console.log('Update check already in progress, ignoring request');
+ return;
+ }
+
+ try {
+ console.log('Calling checkForPluginUpdates with serverPath:', currentServerPath);
+ await checkForPluginUpdates();
+ console.log('Plugin update check completed successfully');
+ } catch (error) {
+ console.error('Error checking for plugin updates:', error);
+ showWarningMessage(`Failed to check for updates: ${String(error)}`, 'error');
+ }
+ }, [checkForPluginUpdates, plugins.length, serverPath, isCheckingUpdates, showWarningMessage]);
+
+ return {
+ // Plugin update state from context
+ bulkUpdateProgress,
+
+ // Functions
+ updateAllPlugins,
+ checkForAllUpdates
+ };
+};
+
+export default useUpdateActions;
\ No newline at end of file
diff --git a/src/types/events.types.ts b/src/types/events.types.ts
new file mode 100644
index 0000000..73b5c0d
--- /dev/null
+++ b/src/types/events.types.ts
@@ -0,0 +1,27 @@
+import { Plugin } from './plugin.types';
+
+export interface BulkUpdateProgressPayload {
+ processed: number;
+ total: number;
+ current_plugin_name: string;
+}
+
+export interface SingleUpdateResultPayload {
+ original_file_path: string;
+ plugin: Plugin | null;
+ error: string | null;
+}
+
+export interface DownloadProgress {
+ pluginName: string;
+ version: string;
+ percentage: number;
+ status: 'downloading' | 'extracting' | 'installing' | 'completed' | 'error';
+ message?: string;
+}
+
+export interface PremiumPluginInfo {
+ name: string;
+ version: string;
+ url: string;
+}
\ No newline at end of file
diff --git a/src/types/plugin.types.ts b/src/types/plugin.types.ts
new file mode 100644
index 0000000..404e732
--- /dev/null
+++ b/src/types/plugin.types.ts
@@ -0,0 +1,41 @@
+
+export interface Plugin {
+ name: string;
+ version: string;
+ latest_version?: string;
+ description?: string;
+ authors: string[];
+ has_update: boolean;
+ api_version?: string;
+ main_class?: string;
+ depend?: string[] | null;
+ soft_depend?: string[] | null;
+ load_before?: string[] | null;
+ commands?: any;
+ permissions?: any;
+ file_path: string;
+ file_hash: string;
+ website?: string;
+ changelog?: string;
+ repository_source?: string;
+ repository_id?: string;
+ repository_url?: string;
+ platform_compatibility?: string[];
+ found_by_flexible_search?: boolean;
+}
+
+export interface PluginDetailsProps {
+ plugin: Plugin;
+ onClose: () => void;
+}
+
+export interface PotentialPluginMatch {
+ name: string;
+ version: string;
+ repository: string;
+ repository_id: string;
+ page_url: string;
+ description?: string;
+ minecraft_versions: string[];
+ download_count?: number;
+}
\ No newline at end of file
diff --git a/src/types/server.types.ts b/src/types/server.types.ts
new file mode 100644
index 0000000..e80ef38
--- /dev/null
+++ b/src/types/server.types.ts
@@ -0,0 +1,30 @@
+export type ServerType =
+ | 'Paper'
+ | 'Spigot'
+ | 'Bukkit'
+ | 'Vanilla'
+ | 'Forge'
+ | 'Fabric'
+ | 'Velocity'
+ | 'BungeeCord'
+ | 'Waterfall'
+ | 'Unknown';
+
+export interface ServerInfo {
+ server_type: ServerType;
+ minecraft_version?: string;
+ plugins_directory: string;
+ plugins_count: number;
+}
+
+export interface ScanResult {
+ server_info: ServerInfo;
+ plugins: import('./plugin.types').Plugin[];
+}
+
+export interface ScanProgress {
+ current: number;
+ processed?: number;
+ total: number;
+ current_file: string;
+}
\ No newline at end of file
diff --git a/src/types/tauri.d.ts b/src/types/tauri.d.ts
new file mode 100644
index 0000000..915a267
--- /dev/null
+++ b/src/types/tauri.d.ts
@@ -0,0 +1,114 @@
+declare module '@tauri-apps/api/shell' {
+ /**
+ * Opens a path or URL with the default application.
+ * @param path The path or URL to open.
+ * @returns A promise that resolves when the command finishes.
+ */
+ export function open(path: string): Promise;
+}
+
+declare module '@tauri-apps/api/core' {
+ /**
+ * Invokes a Tauri command.
+ * @param cmd The command name.
+ * @param args Command arguments.
+ * @returns A promise resolving to the command result.
+ */
+ export function invoke(cmd: string, args?: Record): Promise;
+}
+
+declare module '@tauri-apps/api/core/updater' {
+ export interface UpdateResult {
+ available: boolean;
+ manifest?: {
+ version: string;
+ date: string;
+ body: string;
+ };
+ shouldUpdate: boolean;
+ }
+
+ /**
+ * Checks if an update is available.
+ * @returns A promise resolving to the update check result.
+ */
+ export function checkUpdate(): Promise;
+
+ /**
+ * Installs the available update.
+ * @returns A promise that resolves when the update is installed.
+ */
+ export function installUpdate(): Promise;
+}
+
+declare module '@tauri-apps/api/core/path' {
+ /**
+ * Returns the path to the application data directory.
+ * @returns A promise resolving to the app data directory path.
+ */
+ export function appDataDir(): Promise;
+
+ /**
+ * Returns the path to the application configuration directory.
+ * @returns A promise resolving to the app config directory path.
+ */
+ export function appConfigDir(): Promise;
+
+ /**
+ * Returns the path to the application local data directory.
+ * @returns A promise resolving to the app local data directory path.
+ */
+ export function appLocalDataDir(): Promise;
+
+ /**
+ * Returns the path to the application cache directory.
+ * @returns A promise resolving to the app cache directory path.
+ */
+ export function appCacheDir(): Promise;
+
+ /**
+ * Returns the path to the application log directory.
+ * @returns A promise resolving to the app log directory path.
+ */
+ export function appLogDir(): Promise;
+}
+
+declare module '@tauri-apps/api/core/event' {
+ export interface Event {
+ payload: T;
+ windowLabel?: string;
+ event: string;
+ }
+
+ export type EventCallback = (event: Event) => void;
+ export type UnlistenFn = () => void;
+
+ /**
+ * Listen to an event from the backend.
+ * @param event The event name.
+ * @param handler The event handler.
+ * @returns A promise resolving to a function to unlisten to the event.
+ */
+ export function listen(event: string, handler: EventCallback): Promise;
+
+ /**
+ * Listen to an event from the backend once.
+ * @param event The event name.
+ * @param handler The event handler.
+ * @returns A promise resolving to a function to unlisten to the event.
+ */
+ export function once(event: string, handler: EventCallback): Promise;
+}
+
+// Keep the old path declarations for backward compatibility
+declare module '@tauri-apps/api/event' {
+ export * from '@tauri-apps/api/core/event';
+}
+
+declare module '@tauri-apps/api/updater' {
+ export * from '@tauri-apps/api/core/updater';
+}
+
+declare module '@tauri-apps/api/path' {
+ export * from '@tauri-apps/api/core/path';
+}
\ No newline at end of file
diff --git a/src/utils/appUpdates.ts b/src/utils/appUpdates.ts
new file mode 100644
index 0000000..3fa4764
--- /dev/null
+++ b/src/utils/appUpdates.ts
@@ -0,0 +1,61 @@
+export interface UpdateInfo {
+ available: boolean;
+ version?: string;
+ body?: string;
+ date?: string;
+}
+
+// Environment detection - check if running in a Tauri environment
+const isTauriApp = window && typeof window !== 'undefined' && 'window.__TAURI__' in window;
+
+/**
+ * Checks if there's an app update available
+ * @returns Promise with update information
+ */
+export async function checkForAppUpdate(): Promise {
+ if (!isTauriApp) {
+ console.log('Update check skipped - not running in Tauri environment');
+ return { available: false };
+ }
+
+ try {
+ // Dynamically import the module only when in Tauri context
+ // We need to use a variable for the import path to prevent Vite from trying to resolve it at build time
+ const updaterModule = '@tauri-apps/api/updater';
+ const { checkUpdate } = await import(/* @vite-ignore */ updaterModule);
+ const response = await checkUpdate();
+
+ return {
+ available: response.available,
+ version: response.manifest?.version,
+ body: response.manifest?.body,
+ date: response.manifest?.date
+ };
+ } catch (error) {
+ console.error('Error checking for update:', error);
+ return { available: false };
+ }
+}
+
+/**
+ * Installs the available app update
+ * Note: This will restart the app if successful
+ * @returns Promise that resolves when update is complete or fails
+ */
+export async function installAppUpdate(): Promise {
+ if (!isTauriApp) {
+ console.log('Update installation skipped - not running in Tauri environment');
+ return;
+ }
+
+ try {
+ // Dynamically import the module only when in Tauri context
+ const updaterModule = '@tauri-apps/api/updater';
+ const { installUpdate } = await import(/* @vite-ignore */ updaterModule);
+ await installUpdate();
+ // The app will be restarted by Tauri if successful
+ } catch (error) {
+ console.error('Error installing update:', error);
+ throw error;
+ }
+}
\ No newline at end of file
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
new file mode 100644
index 0000000..8abcb26
--- /dev/null
+++ b/src/utils/formatters.ts
@@ -0,0 +1,61 @@
+import { ServerType } from '../types/server.types';
+import { Plugin } from '../types/plugin.types';
+
+/**
+ * Formats a list of authors into a comma-separated string
+ * @param authors Array of author names
+ * @returns Formatted authors string
+ */
+export function formatAuthors(authors: string[]): string {
+ if (!authors || authors.length === 0) {
+ return 'Unknown';
+ }
+
+ return authors.join(', ');
+}
+
+/**
+ * Formats platform compatibility information into a user-friendly label
+ * @param plugin The plugin object
+ * @param currentServerType The current server type
+ * @returns A formatted compatibility string
+ */
+export function getPlatformCompatibilityLabel(plugin: Plugin, currentServerType?: ServerType): string {
+ const platformCompatibility = plugin.platform_compatibility || [];
+ if (platformCompatibility.length === 0) {
+ return '';
+ }
+
+ // Check if current server type is in the compatibility list
+ const isCompatible = currentServerType &&
+ platformCompatibility.includes(currentServerType);
+
+ if (isCompatible) {
+ return `Compatible with your ${currentServerType} server`;
+ } else if (currentServerType) {
+ return `Compatible with ${platformCompatibility.join(', ')} (You're using ${currentServerType})`;
+ } else {
+ return `Compatible with ${platformCompatibility.join(', ')}`;
+ }
+}
+
+/**
+ * Creates a status message for plugin updates
+ * @param pluginName Name of the plugin
+ * @param version Version being updated to
+ * @param platformCompatibility Array of compatible platforms
+ * @returns Formatted update message
+ */
+export function createUpdateMessage(pluginName: string, version?: string, platformCompatibility?: string[]): string {
+ if (!version) {
+ return `Updating ${pluginName}`;
+ }
+
+ let updateMessage = `Updating ${pluginName} to version ${version}`;
+
+ if (platformCompatibility && platformCompatibility.length > 0) {
+ updateMessage += ` (${platformCompatibility.join(', ')} compatible)`;
+ }
+
+ return updateMessage;
+}
\ No newline at end of file
diff --git a/src/utils/serverUtils.ts b/src/utils/serverUtils.ts
new file mode 100644
index 0000000..8c06161
--- /dev/null
+++ b/src/utils/serverUtils.ts
@@ -0,0 +1,54 @@
+import { ServerType } from '../types/server.types';
+
+/**
+ * Returns an emoji icon representing the server type
+ * @param serverType The type of Minecraft server
+ * @returns A string emoji representing the server type
+ */
+export function getServerTypeIcon(serverType: ServerType): string {
+ switch (serverType) {
+ case 'Paper':
+ return '📄';
+ case 'Spigot':
+ return '🔌';
+ case 'Bukkit':
+ return '🪣';
+ case 'Vanilla':
+ return '🧊';
+ case 'Forge':
+ return '🔨';
+ case 'Fabric':
+ return '🧵';
+ case 'Velocity':
+ return '⚡';
+ case 'BungeeCord':
+ return '🔗';
+ case 'Waterfall':
+ return '🌊';
+ default:
+ return '❓';
+ }
+}
+
+/**
+ * Returns a formatted display name for the server type
+ * @param serverType The type of Minecraft server
+ * @returns A formatted string for display
+ */
+export function getServerTypeName(serverType: ServerType): string {
+ return serverType === 'Unknown' ? 'Unknown Server' : serverType;
+}
+
+/**
+ * Checks if a plugin is compatible with the current server type
+ * @param compatibility Array of compatible server types
+ * @param currentServerType The current server type
+ * @returns True if compatible, false otherwise
+ */
+export function isCompatibleWithServer(compatibility: string[] | undefined, currentServerType: ServerType | undefined): boolean {
+ if (!compatibility || compatibility.length === 0 || !currentServerType) {
+ return false;
+ }
+
+ return compatibility.includes(currentServerType);
+}
\ No newline at end of file
diff --git a/src/utils/validators.ts b/src/utils/validators.ts
new file mode 100644
index 0000000..4508f4c
--- /dev/null
+++ b/src/utils/validators.ts
@@ -0,0 +1,63 @@
+import { Plugin } from '../types/plugin.types';
+
+/**
+ * Check if a plugin can be updated
+ * @param plugin The plugin to check
+ * @returns True if the plugin can be updated, false otherwise
+ */
+export function canUpdatePlugin(plugin: Plugin): boolean {
+ return !!(
+ plugin.has_update &&
+ plugin.latest_version &&
+ (plugin.repository_source || plugin.repository_id)
+ );
+}
+
+/**
+ * Check if a plugin is from a premium source that requires manual download
+ * @param errorMessage The error message to check
+ * @returns True if the plugin is premium, false otherwise
+ */
+export function isPremiumPluginError(errorMessage: string): boolean {
+ return errorMessage.startsWith("PREMIUM_RESOURCE:");
+}
+
+/**
+ * Extract premium plugin information from an error message
+ * @param errorMessage The error message to parse
+ * @returns An object with plugin id, version, and resource URL or null if parsing fails
+ */
+export function extractPremiumPluginInfo(errorMessage: string): { pluginId?: string, version?: string, resourceUrl: string } | null {
+ if (!isPremiumPluginError(errorMessage)) {
+ return null;
+ }
+
+ let resourceUrl = "";
+ let pluginId = "";
+ let version = "";
+
+ // Handle the format with all parts (PREMIUM_RESOURCE:id:version:url)
+ const parts = errorMessage.split(":");
+ if (parts.length >= 4) {
+ pluginId = parts[1];
+ version = parts[2];
+ resourceUrl = parts.slice(3).join(":"); // Rejoin in case URL contains colons
+ return { pluginId, version, resourceUrl };
+ }
+ // Handle the simpler format (PREMIUM_RESOURCE:url)
+ else if (parts.length >= 2) {
+ resourceUrl = parts.slice(1).join(":"); // Get everything after PREMIUM_RESOURCE:
+ return { resourceUrl };
+ }
+
+ return null;
+}
+
+/**
+ * Check if a path string is empty or invalid
+ * @param path The path to validate
+ * @returns True if the path is valid, false otherwise
+ */
+export function isValidPath(path: string | undefined): boolean {
+ return !!path && path.trim().length > 0;
+}
\ No newline at end of file
+
- )}
- {error && (
- Plugins ({plugins.length})
+
- {error}
+
-
- )}
-
- {scanComplete && plugins.length === 0 && (
-
-
+ {/* No plugins message - only shown when scan complete but no plugins found */}
+ {serverPath && scanComplete && plugins.length === 0 && (
+ setWarningMessage(null)}
+ isOpen={!!warningMessage}
+ onClose={clearWarningMessage}
+ title="Warning"
+ message={warningMessage.text}
+ variant={warningMessage.type === 'error' ? 'error' :
+ warningMessage.type === 'success' ? 'info' : 'warning'}
/>
)}
- {showMatchSelector && pluginToDisambiguate && (
- 0 && (
+ setPremiumPluginInfo(null)}
+ isOpen={!!premiumPluginInfo}
+ onClose={clearPremiumPluginInfo}
+ pluginInfo={{
+ name: premiumPluginInfo.name,
+ version: "Unknown",
+ url: "#"
+ }}
/>
)}
-
+{isMatchSelectorOpen && currentPluginForMatch && (
+
);
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/common/Badge/Badge.css b/src/components/common/Badge/Badge.css
new file mode 100644
index 0000000..c9a4851
--- /dev/null
+++ b/src/components/common/Badge/Badge.css
@@ -0,0 +1,143 @@
+.app-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 16px;
+ font-weight: 500;
+ transition: all 0.2s;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+}
+
+/* Size variants */
+.app-badge-small {
+ padding: 0 8px;
+ font-size: 0.65rem;
+ height: 18px;
+ min-width: 18px;
+}
+
+.app-badge-medium {
+ padding: 0 10px;
+ font-size: 0.75rem;
+ height: 22px;
+ min-width: 22px;
+}
+
+.app-badge-large {
+ padding: 0 12px;
+ font-size: 0.85rem;
+ height: 26px;
+ min-width: 26px;
+}
+
+/* Color variants - solid backgrounds */
+.app-badge-default {
+ background-color: var(--badge-default-bg, #e0e0e0);
+ color: var(--badge-default-text, #333333);
+}
+
+.app-badge-primary {
+ background-color: var(--primary-color, #007bff);
+ color: white;
+}
+
+.app-badge-success {
+ background-color: var(--success-color, #28a745);
+ color: white;
+}
+
+.app-badge-warning {
+ background-color: var(--warning-color, #ffc107);
+ color: var(--warning-text, #212529);
+}
+
+.app-badge-error {
+ background-color: var(--error-color, #dc3545);
+ color: white;
+}
+
+.app-badge-info {
+ background-color: var(--info-color, #17a2b8);
+ color: white;
+}
+
+/* Outlined variants */
+.app-badge-outlined {
+ background-color: transparent;
+ border: 1px solid;
+}
+
+.app-badge-outlined.app-badge-default {
+ border-color: var(--badge-default-bg, #e0e0e0);
+ color: var(--badge-default-text, #555555);
+}
+
+.app-badge-outlined.app-badge-primary {
+ border-color: var(--primary-color, #007bff);
+ color: var(--primary-color, #007bff);
+}
+
+.app-badge-outlined.app-badge-success {
+ border-color: var(--success-color, #28a745);
+ color: var(--success-color, #28a745);
+}
+
+.app-badge-outlined.app-badge-warning {
+ border-color: var(--warning-color, #ffc107);
+ color: var(--warning-color, #ffc107);
+}
+
+.app-badge-outlined.app-badge-error {
+ border-color: var(--error-color, #dc3545);
+ color: var(--error-color, #dc3545);
+}
+
+.app-badge-outlined.app-badge-info {
+ border-color: var(--info-color, #17a2b8);
+ color: var(--info-color, #17a2b8);
+}
+
+/* Clickable badges */
+.app-badge-clickable {
+ cursor: pointer;
+}
+
+.app-badge-clickable:hover {
+ opacity: 0.8;
+}
+
+/* Badge with icon */
+.app-badge-icon {
+ display: flex;
+ align-items: center;
+ margin-right: 4px;
+}
+
+/* Support for server type badges */
+.app-badge[data-server-type="Paper"] {
+ background-color: var(--paper-color, #4caf50);
+ color: white;
+}
+
+.app-badge[data-server-type="Spigot"] {
+ background-color: var(--spigot-color, #ff9800);
+ color: white;
+}
+
+.app-badge[data-server-type="Bukkit"] {
+ background-color: var(--bukkit-color, #9c27b0);
+ color: white;
+}
+
+.app-badge[data-server-type="Forge"] {
+ background-color: var(--forge-color, #f44336);
+ color: white;
+}
+
+.app-badge[data-server-type="Fabric"] {
+ background-color: var(--fabric-color, #2196f3);
+ color: white;
+}
\ No newline at end of file
diff --git a/src/components/common/Badge/Badge.tsx b/src/components/common/Badge/Badge.tsx
new file mode 100644
index 0000000..5a5f8ed
--- /dev/null
+++ b/src/components/common/Badge/Badge.tsx
@@ -0,0 +1,109 @@
+import React, { memo, useCallback, KeyboardEvent } from 'react';
+import './Badge.css';
+
+export interface BadgeProps {
+ /**
+ * Badge text content
+ */
+ label: string;
+
+ /**
+ * Badge visual variant/color scheme
+ * @default 'default'
+ */
+ variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+ /**
+ * Badge size
+ * @default 'medium'
+ */
+ size?: 'small' | 'medium' | 'large';
+
+ /**
+ * Optional icon to display before the label
+ */
+ icon?: React.ReactNode;
+
+ /**
+ * Whether to display badge with an outline style
+ * @default false
+ */
+ outlined?: boolean;
+
+ /**
+ * Additional CSS class
+ */
+ className?: string;
+
+ /**
+ * Optional tooltip text displayed on hover
+ */
+ tooltip?: string;
+
+ /**
+ * Optional badge data attribute used for custom styling
+ */
+ dataAttribute?: {
+ name: string;
+ value: string;
+ };
+
+ /**
+ * Click handler for the badge
+ */
+ onClick?: () => void;
+}
+
+/**
+ * A reusable badge component for displaying labels, statuses, and categories
+ */
+const BadgeComponent: React.FC
+
- )}
-
- {serverInfo && (
- Name
+ Version
+ Compatibility
+ Actions
-
- {isCheckingUpdates && bulkUpdateProgress && (
-
)}
- {plugins.length > 0 && (
-
- Checking {bulkUpdateProgress.processed}/{bulkUpdateProgress.total}: {bulkUpdateProgress.current_plugin_name}
-
-
- )}
- {updateError && (
- {updateError}
- )}
+ Installed Plugins ({plugins.length})
-
- Name
- Current Version
- Latest Version
- Actions
-
- {plugins.map((plugin) => (
-
-
- ))}
- {plugin.name}
- {plugin.version}
-
- {plugin.repository_url && plugin.latest_version ? (
-
- {plugin.latest_version} {!plugin.has_update && (Up to Date)}
-
- ) : (
- plugin.latest_version
- ? <>{plugin.latest_version} {!plugin.has_update && (Up to Date)}
- : 'N/A'
- )}
-
-
-
- {plugin.has_update && (
-
- )}
-
-
- Installed Plugins (0)
-No plugins found in this directory.
-
+
+ );
+};
+
+export default Modal;
\ No newline at end of file
diff --git a/src/components/common/NotificationDisplay/NotificationDisplay.css b/src/components/common/NotificationDisplay/NotificationDisplay.css
new file mode 100644
index 0000000..67653db
--- /dev/null
+++ b/src/components/common/NotificationDisplay/NotificationDisplay.css
@@ -0,0 +1,51 @@
+.notification-display {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ padding: 1rem 1.5rem;
+ border-radius: 6px;
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+ z-index: 1500; /* Above most content, below critical modals? */
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-width: 250px;
+ max-width: 400px;
+}
+
+.notification-text {
+ flex-grow: 1;
+ margin-right: 1rem;
+}
+
+.notification-close-button {
+ background: none;
+ border: none;
+ font-size: 1.2rem;
+ font-weight: bold;
+ color: inherit; /* Inherit color from parent */
+ cursor: pointer;
+ padding: 0;
+ line-height: 1;
+}
+
+/* Type-specific styles */
+.notification-success {
+ background-color: var(--success-color);
+ color: #202124; /* Dark text for contrast */
+}
+
+.notification-error {
+ background-color: var(--error-color);
+ color: white;
+}
+
+.notification-warning {
+ background-color: var(--warning-color);
+ color: #202124; /* Dark text for contrast */
+}
+
+.notification-info {
+ background-color: var(--primary-color);
+ color: white;
+}
\ No newline at end of file
diff --git a/src/components/common/NotificationDisplay/NotificationDisplay.tsx b/src/components/common/NotificationDisplay/NotificationDisplay.tsx
new file mode 100644
index 0000000..6c0e778
--- /dev/null
+++ b/src/components/common/NotificationDisplay/NotificationDisplay.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useUIContext } from '../../../context/UIContext/useUIContext';
+import './NotificationDisplay.css';
+
+/**
+ * Displays the current notification message from UIContext.
+ */
+export const NotificationDisplay: React.FC = () => {
+ const { warningMessage, clearWarningMessage } = useUIContext();
+
+ if (!warningMessage) {
+ return null;
+ }
+
+ const { text, type, id } = warningMessage;
+
+ return (
+
+ {(title || showCloseButton) && (
+
+
+ {title &&
+ )}
+ {title}
} + {showCloseButton && ( + + )} +
+ {children}
+
+
+ {text}
+ {/* Add a close button only for persistent errors? */}
+ {type === 'error' && (
+
+ )}
+
+ );
+};
+
+export default NotificationDisplay;
\ No newline at end of file
diff --git a/src/components/common/ProgressBar/ProgressBar.css b/src/components/common/ProgressBar/ProgressBar.css
new file mode 100644
index 0000000..fe8aae4
--- /dev/null
+++ b/src/components/common/ProgressBar/ProgressBar.css
@@ -0,0 +1,69 @@
+.progress-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin: 12px 0;
+}
+
+.progress-label {
+ font-size: 0.875rem;
+ margin-bottom: 4px;
+ color: var(--text-secondary, #666);
+}
+
+.progress-bar-wrapper {
+ width: 100%;
+ height: 10px;
+ background-color: var(--progress-bg, #f0f0f0);
+ border-radius: 6px;
+ overflow: hidden;
+ position: relative;
+}
+
+.progress-bar {
+ height: 100%;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: width 0.3s ease;
+ position: relative;
+ min-width: 20px;
+}
+
+.progress-percentage {
+ position: absolute;
+ font-size: 0.7rem;
+ color: var(--progress-text, #fff);
+ font-weight: 500;
+ text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+ right: 6px;
+}
+
+.progress-values {
+ font-size: 0.75rem;
+ margin-top: 4px;
+ text-align: right;
+ color: var(--text-secondary, #666);
+}
+
+/* Color variants */
+.progress-bar-primary {
+ background-color: var(--primary-color, #007bff);
+}
+
+.progress-bar-success {
+ background-color: var(--success-color, #28a745);
+}
+
+.progress-bar-warning {
+ background-color: var(--warning-color, #ffc107);
+}
+
+.progress-bar-error {
+ background-color: var(--error-color, #dc3545);
+}
+
+.progress-bar-info {
+ background-color: var(--info-color, #17a2b8);
+}
\ No newline at end of file
diff --git a/src/components/common/ProgressBar/ProgressBar.tsx b/src/components/common/ProgressBar/ProgressBar.tsx
new file mode 100644
index 0000000..07de988
--- /dev/null
+++ b/src/components/common/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import './ProgressBar.css';
+
+export interface ProgressBarProps {
+ /**
+ * Current value of the progress (should be between min and max)
+ */
+ value: number;
+
+ /**
+ * Maximum value for the progress bar
+ * @default 100
+ */
+ max?: number;
+
+ /**
+ * Minimum value for the progress bar
+ * @default 0
+ */
+ min?: number;
+
+ /**
+ * Label to display with the progress
+ */
+ label?: string;
+
+ /**
+ * Whether to show percentage text inside the progress bar
+ * @default true
+ */
+ showPercentage?: boolean;
+
+ /**
+ * Additional CSS class for custom styling
+ */
+ className?: string;
+
+ /**
+ * Progress bar color
+ */
+ color?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+ /**
+ * Whether to display the current value and max next to the bar
+ * @default false
+ */
+ showValues?: boolean;
+
+ /**
+ * Format for displaying values (when showValues is true)
+ * @default "{value}/{max}"
+ */
+ valueFormat?: string;
+}
+
+/**
+ * A reusable progress bar component that shows the progress of an operation
+ */
+const ProgressBar: React.FC
+ {label &&
+ );
+};
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/src/components/layout/Footer/Footer.css b/src/components/layout/Footer/Footer.css
new file mode 100644
index 0000000..c8afef2
--- /dev/null
+++ b/src/components/layout/Footer/Footer.css
@@ -0,0 +1,62 @@
+.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem 1.5rem;
+ background-color: var(--color-background-dark);
+ color: var(--color-text-muted);
+ border-top: 1px solid var(--color-border);
+ height: 40px;
+ font-size: 0.8rem;
+}
+
+.footer-left, .footer-center, .footer-right {
+ display: flex;
+ align-items: center;
+}
+
+.footer-left {
+ flex: 1;
+}
+
+.footer-center {
+ flex: 2;
+ justify-content: center;
+}
+
+.footer-right {
+ flex: 1;
+ justify-content: flex-end;
+}
+
+.footer-version {
+ opacity: 0.7;
+}
+
+.server-info {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.server-type {
+ font-weight: 500;
+ color: var(--color-text-light);
+}
+
+.plugin-count {
+ background-color: rgba(0, 0, 0, 0.2);
+ padding: 0.2rem 0.5rem;
+ border-radius: 4px;
+}
+
+.github-link {
+ color: var(--color-primary);
+ text-decoration: none;
+ transition: color 0.2s;
+}
+
+.github-link:hover {
+ color: var(--color-primary-light);
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
new file mode 100644
index 0000000..290b3aa
--- /dev/null
+++ b/src/components/layout/Footer/Footer.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
+import { useServerContext } from '../../../context/ServerContext/useServerContext';
+import './Footer.css';
+
+interface FooterProps {
+ appVersion?: string;
+}
+
+export const Footer: React.FC{label}
}
+
+
+ {showValues && (
+
+ )}
+
+ {showPercentage && (
+ {percentage}%
+ )}
+
+
+
+
+ PlugSnatcher
+ v{appVersion} + {appUpdateAvailable && ( + Update Available + )} +
+ {serverPath && (
+
+
+
+ Selected Server:
+
+ {serverPath.length > 40 ? `...${serverPath.slice(-40)}` : serverPath}
+
+
+ )}
+
+
+
+
+ {warningMessage.text}
+
+
+ )}
+
+
+ {children}
+
+
+
+
+ );
+ }
+
+ if (!serverPath) {
+ return (
+ Scanning for plugins...
+This might take a moment, please wait.
+
+
+ );
+ }
+
+ if (scanComplete && !isScanning) {
+ return (
+ 📁
+ No Server Selected
+Please select a Minecraft server directory to get started.
+
+
+ );
+ }
+
+ // Default message if we're in an intermediate state
+ return (
+ 🔍
+ No Plugins Found
+We couldn't find any plugins in the selected server directory.
+Make sure you've selected a valid Minecraft server with plugins installed.
+
+
+ );
+};
+
+export default NoPluginsMessage;
\ No newline at end of file
diff --git a/src/components/plugins/PluginDetails/PluginDetails.css b/src/components/plugins/PluginDetails/PluginDetails.css
new file mode 100644
index 0000000..2ca0d2f
--- /dev/null
+++ b/src/components/plugins/PluginDetails/PluginDetails.css
@@ -0,0 +1,228 @@
+.plugin-details-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ padding: 20px;
+ animation: fadeIn 0.2s ease-out;
+}
+
+.plugin-details-container {
+ background-color: var(--background-color);
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ width: 100%;
+ max-width: 1200px;
+ max-height: 90vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
+ animation: slideIn 0.2s ease-out;
+ display: flex;
+ flex-direction: column;
+}
+
+.plugin-details-header {
+ position: sticky;
+ top: 0;
+ background-color: var(--background-color);
+ padding: 20px;
+ border-bottom: 1px solid var(--border-color);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ z-index: 1;
+ width: auto;
+ box-sizing: border-box;
+}
+
+.plugin-details-content {
+ padding: 20px;
+ align-self: center;
+ box-sizing: border-box;
+ max-width: 100%;
+ width: 100%;
+}
+
+.close-button {
+ background: none;
+ border: none;
+ font-size: 24px;
+ color: var(--text-color);
+ cursor: pointer;
+ padding: 8px;
+ border-radius: 4px;
+ transition: background-color 0.2s;
+ line-height: 1;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.close-button:hover {
+ background-color: var(--hover-color);
+}
+
+.plugin-details-columns {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ margin-top: 20px;
+ width: 100%;
+}
+
+.plugin-details-column {
+ width: 100%;
+}
+
+@media (max-width: 768px) {
+ .plugin-details-columns {
+ grid-template-columns: 1fr;
+ }
+}
+
+.plugin-details-section {
+ margin-bottom: 24px;
+}
+
+.plugin-details-section h3 {
+ margin-bottom: 12px;
+ color: var(--heading-color);
+ font-size: 1.1em;
+}
+
+.plugin-name {
+ margin: 0;
+ font-size: 1.5em;
+ color: var(--heading-color);
+}
+
+.plugin-version-info {
+ margin-top: 8px;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.update-info {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.version-link {
+ color: var(--link-color);
+ text-decoration: none;
+}
+
+.version-link:hover {
+ text-decoration: underline;
+}
+
+.plugin-description {
+ line-height: 1.5;
+ color: var(--text-color);
+}
+
+.plugin-authors {
+ margin: 0;
+ color: var(--text-color);
+}
+
+.plugin-website {
+ display: inline-block;
+ margin-top: 8px;
+ color: var(--link-color);
+ text-decoration: none;
+}
+
+.plugin-website:hover {
+ text-decoration: underline;
+}
+
+.dependency-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.dependency-list li {
+ margin-bottom: 4px;
+}
+
+.file-info-item {
+ margin-bottom: 8px;
+ display: flex;
+ gap: 8px;
+ width: 100%;
+}
+
+.file-info-label {
+ color: var(--text-muted);
+ min-width: 100px;
+ flex-shrink: 0;
+}
+
+.file-path {
+ word-break: break-all;
+}
+
+.file-info-value {
+ word-break: break-all;
+ flex: 1;
+}
+
+.platform-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.platform-badge {
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 0.9em;
+ background-color: var(--badge-background);
+ color: var(--badge-text);
+}
+
+.plugin-actions-section {
+ padding: 20px;
+ border-top: 1px solid var(--border-color);
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ position: sticky;
+ bottom: 0;
+ background-color: var(--background-color);
+ width: auto;
+ box-sizing: border-box;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateY(20px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/plugins/PluginDetails/PluginDetails.tsx b/src/components/plugins/PluginDetails/PluginDetails.tsx
new file mode 100644
index 0000000..66e4e17
--- /dev/null
+++ b/src/components/plugins/PluginDetails/PluginDetails.tsx
@@ -0,0 +1,291 @@
+import React, { useEffect, useCallback } from 'react';
+import { Plugin } from '../../../types/plugin.types';
+import { usePluginActions } from '../../../hooks/usePluginActions';
+import Badge from '../../common/Badge/Badge';
+import Button from '../../common/Button/Button';
+import './PluginDetails.css';
+
+interface PluginDetailsProps {
+ plugin: Plugin;
+ onClose: () => void;
+}
+
+// Add a function to create repository URL
+const getRepositoryUrl = (plugin: Plugin): string | null => {
+ // Return existing repository URL if available
+ if (plugin.repository_url) {
+ return plugin.repository_url;
+ }
+
+ // Try to construct URL based on repository source and ID
+ if (plugin.repository_source && plugin.repository_id) {
+ switch (plugin.repository_source) {
+ case 'SpigotMC':
+ return `https://www.spigotmc.org/resources/${plugin.repository_id}`;
+ case 'Modrinth':
+ return `https://modrinth.com/plugin/${plugin.repository_id}`;
+ case 'GitHub':
+ return `https://github.com/${plugin.repository_id}/releases`;
+ case 'HangarMC':
+ return `https://hangar.papermc.io/plugins/${plugin.repository_id}`;
+ default:
+ return null;
+ }
+ }
+
+ return null;
+};
+
+export const PluginDetails: React.FC🧩
+ Ready to Scan
+Click "Scan for Plugins" to discover plugins in your server.
+No dependencies
; + } + + return ( +-
+ {dependencies.map((dep, index) => (
+
- + {dep} + + ))} +
+
+ );
+};
+
+export default PluginDetails;
\ No newline at end of file
diff --git a/src/components/plugins/PluginItem/PluginItem.css b/src/components/plugins/PluginItem/PluginItem.css
new file mode 100644
index 0000000..e7f8400
--- /dev/null
+++ b/src/components/plugins/PluginItem/PluginItem.css
@@ -0,0 +1,172 @@
+.plugin-item {
+ display: grid;
+ grid-template-columns: 3fr 1fr 1.5fr 1.5fr;
+ align-items: center;
+ background-color: var(--surface-color);
+ border-bottom: 1px solid var(--border-color);
+ padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+ transition: background-color 0.2s;
+}
+
+.plugin-item:last-child {
+ border-bottom: none;
+}
+
+.plugin-item:hover {
+ background-color: rgba(255, 255, 255, 0.03);
+}
+
+.plugin-item.has-update {
+ background-color: rgba(255, 152, 0, 0.08);
+}
+
+.plugin-item.has-update:hover {
+ background-color: rgba(255, 152, 0, 0.12);
+}
+
+.plugin-name-column {
+ padding-right: calc(var(--spacing-unit) * 2);
+ min-width: 0;
+}
+
+.plugin-version-column {
+ padding: 0 calc(var(--spacing-unit));
+}
+
+.plugin-compatibility-column {
+ padding: 0 calc(var(--spacing-unit));
+}
+
+.plugin-actions-column {
+ justify-self: end;
+ text-align: right;
+}
+
+.plugin-name {
+ margin: 0;
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--text-color);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.plugin-version {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-unit);
+ font-size: 0.95rem;
+}
+
+.current-version {
+ color: var(--text-secondary-color);
+}
+
+.version-arrow {
+ color: var(--text-secondary-color);
+ font-size: 0.8rem;
+}
+
+.latest-version {
+ color: var(--success-color);
+ font-weight: 500;
+}
+
+.plugin-description {
+ margin: calc(var(--spacing-unit) * 0.75) 0;
+ font-size: 0.9rem;
+ color: var(--text-secondary-color);
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.plugin-authors {
+ font-size: 0.85rem;
+ color: var(--text-secondary-color);
+ margin-top: calc(var(--spacing-unit) * 0.5);
+}
+
+.plugin-actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: calc(var(--spacing-unit));
+}
+
+.compatibility-unknown {
+ color: var(--text-secondary-color);
+ font-size: 0.9rem;
+ font-style: italic;
+}
+
+.platform-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: calc(var(--spacing-unit) * 0.5);
+}
+
+.platform-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ padding: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 0.75);
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+ text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+}
+
+.platform-badge[data-server-type="Paper"] {
+ background-color: #3498db;
+}
+
+.platform-badge[data-server-type="Spigot"] {
+ background-color: #e67e22;
+}
+
+.platform-badge[data-server-type="Bukkit"] {
+ background-color: #2ecc71;
+}
+
+/* Custom styles for plugin action buttons */
+.info-button {
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.update-button {
+ background-color: var(--warning-color);
+ color: white;
+}
+
+/* Responsive styles */
+@media (max-width: 900px) {
+ .plugin-item {
+ grid-template-columns: 1fr;
+ gap: calc(var(--spacing-unit) * 1.5);
+ padding: calc(var(--spacing-unit) * 2);
+ }
+
+ .plugin-name-column,
+ .plugin-version-column,
+ .plugin-compatibility-column,
+ .plugin-actions-column {
+ padding: 0;
+ }
+
+ .plugin-actions-column {
+ justify-self: start;
+ text-align: left;
+ }
+
+ .plugin-actions {
+ padding-top: var(--spacing-unit);
+ }
+}
\ No newline at end of file
diff --git a/src/components/plugins/PluginItem/PluginItem.tsx b/src/components/plugins/PluginItem/PluginItem.tsx
new file mode 100644
index 0000000..8bbe5f0
--- /dev/null
+++ b/src/components/plugins/PluginItem/PluginItem.tsx
@@ -0,0 +1,159 @@
+import React, { useCallback, memo } from 'react';
+import { Plugin } from '../../../types/plugin.types';
+import { usePluginActions } from '../../../hooks/usePluginActions';
+import Badge from '../../common/Badge/Badge';
+import Button from '../../common/Button/Button';
+import './PluginItem.css';
+
+interface PluginItemProps {
+ plugin: Plugin;
+ onSelect?: (plugin: Plugin) => void;
+}
+
+const PluginItemComponent: React.FC
+
+
+
+
+
+
+
+
+ {plugin.name}
+
+
+ Version: {
+ plugin.repository_url || (plugin.repository_source && plugin.repository_id) ? (
+
+ {plugin.version}
+
+ ) : plugin.version
+ }
+
+ {plugin.has_update && plugin.latest_version && (
+
+
+
+ )}
+
+
+
+
+
+
+ Description
++ {plugin.description || 'No description available.'} +
+
+
+
+
+
+
+
+
+ Author Information
++ {plugin.authors && plugin.authors.length > 0 + ? plugin.authors.join(', ') + : 'Unknown author'} +
+ {plugin.website && ( + + Visit Website + + )} +
+
+ Dependencies
+ {renderDependencies()} +
+
+
+
+ File Information
+
+ Path:
+ {plugin.file_path}
+
+
+ Hash:
+ {plugin.file_hash.substring(0, 10)}...
+
+ {plugin.repository_source && (
+
+ Source:
+
+ {plugin.repository_url || getRepositoryUrl(plugin) ? (
+
+ {plugin.repository_source}
+
+ ) : plugin.repository_source}
+
+
+ )}
+ {plugin.platform_compatibility && Object.keys(plugin.platform_compatibility).length > 0 && (
+
+ Compatible with:
+
+ )}
+
+ {Object.entries(plugin.platform_compatibility).map(([platform, isCompatible]) => (
+
+ {platform}
+
+ ))}
+
+
+ {plugin.has_update ? (
+
+ ) : (
+
+ )}
+
+
+ {/* Plugin Name Column */}
+
+ );
+};
+
+export const PluginItem = memo(PluginItemComponent);
\ No newline at end of file
diff --git a/src/components/plugins/PluginList/PluginList.css b/src/components/plugins/PluginList/PluginList.css
new file mode 100644
index 0000000..cbb293e
--- /dev/null
+++ b/src/components/plugins/PluginList/PluginList.css
@@ -0,0 +1,164 @@
+.plugin-list-container {
+ width: 100%;
+}
+
+.plugin-list-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid var(--border-color);
+ background-color: var(--surface-color);
+}
+
+.plugin-list-title {
+ margin: 0;
+ font-size: 1.5rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--text-color);
+}
+
+.plugin-count {
+ font-size: 1rem;
+ color: var(--text-secondary-color);
+ font-weight: normal;
+}
+
+.outdated-badge {
+ background-color: var(--warning-color);
+ color: white;
+ font-size: 0.75rem;
+ padding: 0.2rem 0.6rem;
+ border-radius: 12px;
+ font-weight: bold;
+ margin-left: 0.5rem;
+}
+
+.plugin-list-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.search-container {
+ position: relative;
+ width: 100%;
+ padding: 1rem 1.5rem;
+ background-color: transparent;
+}
+
+.search-input {
+ width: 100%;
+ padding: 0.6rem 2rem 0.6rem 0.75rem;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ font-size: 0.9rem;
+ transition: all 0.2s;
+}
+
+.search-input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+}
+
+.clear-search {
+ position: absolute;
+ right: 2rem;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: var(--text-secondary-color);
+ font-size: 1.2rem;
+ cursor: pointer;
+ padding: 0;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+}
+
+.clear-search:hover {
+ color: var(--text-color);
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.plugin-list-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem 1.5rem;
+ background-color: rgba(255, 255, 255, 0.02);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.sort-controls {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+.sort-label {
+ font-size: 0.85rem;
+ color: var(--text-secondary-color);
+ font-weight: 500;
+}
+
+.sort-button {
+ background: none;
+ border: none;
+ padding: 0.3rem 0.6rem;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ cursor: pointer;
+ color: var(--text-color);
+ transition: all 0.2s;
+}
+
+.sort-button:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+.sort-button.active {
+ background-color: rgba(26, 115, 232, 0.2);
+ color: var(--primary-color);
+ font-weight: 500;
+}
+
+.filter-info {
+ font-size: 0.85rem;
+ color: var(--text-secondary-color);
+}
+
+.plugin-list {
+ overflow-y: auto;
+}
+
+.no-results {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ text-align: center;
+ color: var(--text-secondary-color);
+ background-color: var(--surface-color);
+ min-height: 200px;
+}
+
+.no-results p {
+ margin-bottom: 1rem;
+ font-size: 1.1rem;
+}
+
+.no-results button {
+ /* Button component will style this */
+}
\ No newline at end of file
diff --git a/src/components/plugins/PluginList/PluginList.tsx b/src/components/plugins/PluginList/PluginList.tsx
new file mode 100644
index 0000000..c3f1917
--- /dev/null
+++ b/src/components/plugins/PluginList/PluginList.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { usePluginActions } from '../../../hooks/usePluginActions';
+import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
+import { Plugin } from '../../../types/plugin.types';
+import { PluginItem } from '../PluginItem/PluginItem';
+import Button from '../../common/Button/Button';
+import './PluginList.css';
+
+export const PluginList: React.FC = () => {
+ const { plugins, isCheckingUpdates } = usePluginActions();
+ const { showPluginDetails } = usePluginContext();
+ const [searchTerm, setSearchTerm] = useState
+
+
+ {/* Version Column */}
+ {plugin.name}
+ {plugin.authors && plugin.authors.length > 0 && ( +
+ By {plugin.authors.join(', ')}
+
+ )}
+ {plugin.description && (
+ + {plugin.description.length > 100 + ? `${plugin.description.substring(0, 100)}...` + : plugin.description} +
+ )} +
+
+
+ {/* Compatibility Column */}
+
+ v{plugin.version}
+ {plugin.has_update && plugin.latest_version && (
+ <>
+ →
+ v{plugin.latest_version}
+
+ )}
+
+
+ {compatibility ? (
+
+
+ {/* Actions Column */}
+
+ {Object.entries(plugin.platform_compatibility || {}).map(([platform, isCompatible]) => (
+
+ {platform}
+
+ ))}
+
+ ) : (
+ Unknown
+ )}
+
+
+
+
+
+ {plugin.has_update ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+export default PluginList;
\ No newline at end of file
diff --git a/src/components/server/ScanProgress/ScanProgress.css b/src/components/server/ScanProgress/ScanProgress.css
new file mode 100644
index 0000000..2e0c71e
--- /dev/null
+++ b/src/components/server/ScanProgress/ScanProgress.css
@@ -0,0 +1,78 @@
+.scan-progress {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ padding: 1.25rem;
+ background-color: var(--color-background);
+ border-radius: 6px;
+ border: 1px solid var(--color-border);
+ animation: fade-in 0.3s ease-out;
+}
+
+.scan-progress-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.25rem;
+}
+
+.scan-progress-title {
+ font-weight: 500;
+ color: var(--color-text);
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.scan-progress-title::before {
+ content: '';
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: var(--color-primary);
+ animation: pulse 1.5s infinite;
+}
+
+.scan-progress-percentage {
+ font-weight: bold;
+ color: var(--color-primary);
+}
+
+.scan-progress-details {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.85rem;
+ color: var(--color-text-muted);
+ margin-top: 0.25rem;
+}
+
+.scan-progress-count {
+ white-space: nowrap;
+}
+
+@keyframes pulse {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.6;
+ transform: scale(1.1);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
\ No newline at end of file
diff --git a/src/components/server/ScanProgress/ScanProgress.tsx b/src/components/server/ScanProgress/ScanProgress.tsx
new file mode 100644
index 0000000..14a3b29
--- /dev/null
+++ b/src/components/server/ScanProgress/ScanProgress.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import ProgressBar from '../../common/ProgressBar/ProgressBar';
+import './ScanProgress.css';
+
+interface ScanProgressProps {
+ progress: { current: number; total: number } | null;
+}
+
+export const ScanProgress: React.FC
+ setSearchTerm(e.target.value)}
+ className="search-input"
+ />
+ {searchTerm && (
+
+ )}
+
+
+
+
+
+
+ Sort by:
+
+
+
+
+
+
+ Showing {filteredPlugins.length} of {plugins.length} plugins
+
+
+ {sortedPlugins.length > 0 ? (
+ sortedPlugins.map(plugin => (
+
+
+
+ )}
+ No plugins match your search.
+ +
+
+ );
+};
+
+export default ScanProgress;
\ No newline at end of file
diff --git a/src/components/server/ServerInfo/ServerInfo.css b/src/components/server/ServerInfo/ServerInfo.css
new file mode 100644
index 0000000..663b18e
--- /dev/null
+++ b/src/components/server/ServerInfo/ServerInfo.css
@@ -0,0 +1,109 @@
+.server-info-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+ background-color: var(--surface-color);
+ border-radius: 6px;
+ border: 1px solid var(--border-color);
+ margin-top: 1.5rem;
+}
+
+.server-info-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.server-icon {
+ font-size: 2rem;
+ background-color: var(--background-color);
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ border: 1px solid var(--border-color);
+ flex-shrink: 0;
+}
+
+.server-details {
+ flex: 1;
+}
+
+.server-type-name {
+ font-size: 1.2rem;
+ margin: 0 0 0.5rem 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--text-color);
+}
+
+.server-path {
+ margin: 0;
+ font-size: 0.9rem;
+ color: var(--text-secondary-color);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.server-path.clickable {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ transition: color 0.2s;
+ width: fit-content;
+}
+
+.server-path.clickable:hover {
+ color: var(--primary-color);
+ text-decoration: underline;
+}
+
+.folder-icon {
+ font-size: 1rem;
+}
+
+.server-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 1rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.stat-item {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.stat-label {
+ font-size: 0.8rem;
+ color: var(--text-secondary-color);
+ text-transform: uppercase;
+}
+
+.stat-value {
+ font-size: 0.95rem;
+ font-weight: 500;
+ color: var(--text-color);
+}
+
+.server-warning {
+ margin-top: 0.5rem;
+ padding: 0.75rem;
+ background-color: rgba(255, 152, 0, 0.1);
+ border-radius: 4px;
+ border-left: 4px solid var(--warning-color);
+}
+
+.server-warning p {
+ margin: 0;
+ font-size: 0.9rem;
+ color: var(--warning-color);
+}
\ No newline at end of file
diff --git a/src/components/server/ServerInfo/ServerInfo.tsx b/src/components/server/ServerInfo/ServerInfo.tsx
new file mode 100644
index 0000000..fc4c663
--- /dev/null
+++ b/src/components/server/ServerInfo/ServerInfo.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { ServerInfo as ServerInfoType } from '../../../types/server.types';
+import Badge from '../../common/Badge/Badge';
+import './ServerInfo.css';
+// Import only shell open as it's the primary method
+import { open } from '@tauri-apps/plugin-shell';
+import { useServerContext } from '../../../context/ServerContext/useServerContext';
+
+interface ServerInfoProps {
+ serverInfo: ServerInfoType;
+}
+
+export const ServerInfo: React.FC
+ Scanning for plugins...
+ {percentage}%
+
+
+
+
+ {progress.current} of {progress.total} files processed
+
+
+ )}
+
+
+ );
+};
+
+export default ServerInfo;
\ No newline at end of file
diff --git a/src/components/server/ServerSelector/ServerSelector.css b/src/components/server/ServerSelector/ServerSelector.css
new file mode 100644
index 0000000..42b1500
--- /dev/null
+++ b/src/components/server/ServerSelector/ServerSelector.css
@@ -0,0 +1,32 @@
+.server-selector {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 1.5rem;
+ background-color: var(--surface-color);
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ border: 1px solid var(--border-color);
+}
+
+.server-actions {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+}
+
+.server-selector-error {
+ padding: 0.75rem 1rem;
+ background-color: rgba(244, 67, 54, 0.1);
+ border-radius: 4px;
+ border-left: 4px solid var(--error-color);
+}
+
+.error-message {
+ color: var(--error-color);
+ margin: 0;
+ font-size: 0.9rem;
+}
\ No newline at end of file
diff --git a/src/components/server/ServerSelector/ServerSelector.tsx b/src/components/server/ServerSelector/ServerSelector.tsx
new file mode 100644
index 0000000..a7cf141
--- /dev/null
+++ b/src/components/server/ServerSelector/ServerSelector.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { useServerActions } from '../../../hooks/useServerActions';
+import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
+import Button from '../../common/Button/Button';
+import ScanProgress from '../ScanProgress/ScanProgress';
+import './ServerSelector.css';
+
+export const ServerSelector: React.FC = () => {
+ const {
+ serverPath,
+ isScanning,
+ scanComplete,
+ scanProgress,
+ error,
+ selectDirectory,
+ scanForPlugins,
+ lastScanResult
+ } = useServerActions();
+
+ const { setPlugins } = usePluginContext();
+
+ // Effect to handle scan results
+ useEffect(() => {
+ if (lastScanResult && lastScanResult.plugins) {
+ console.log("Setting plugins from lastScanResult in ServerSelector");
+ setPlugins(lastScanResult.plugins);
+ }
+ }, [lastScanResult, setPlugins]);
+
+ const handleSelectDirectory = async () => {
+ await selectDirectory();
+ };
+
+ const handleScanForPlugins = async () => {
+ await scanForPlugins();
+ };
+
+ const handleResetSelection = () => {
+ // Clear server path and plugins
+ setPlugins([]);
+ };
+
+ return (
+
+
+
+ {getServerTypeIcon()}
+
+
+ {formatServerType(serverInfo.server_type)}
+
+
+
+ {formatServerType(serverInfo.server_type)}
+
+ + Server directory 📂 +
+
+
+
+ Plugins Directory
+ {serverInfo.plugins_directory}
+
+
+
+ Plugins Found
+ {serverInfo.plugins_count}
+
+
+
+ );
+};
+
+export default ServerSelector;
\ No newline at end of file
diff --git a/src/components/updates/BulkUpdateProgress/BulkUpdateProgress.css b/src/components/updates/BulkUpdateProgress/BulkUpdateProgress.css
new file mode 100644
index 0000000..a62f175
--- /dev/null
+++ b/src/components/updates/BulkUpdateProgress/BulkUpdateProgress.css
@@ -0,0 +1,87 @@
+.bulk-update-progress {
+ background-color: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ padding: 0.75rem 1rem;
+ margin-top: 0.5rem;
+ width: 100%;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+ animation: slide-in 0.3s ease-out;
+}
+
+.bulk-update-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.5rem;
+}
+
+.bulk-update-title {
+ margin: 0;
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--color-text);
+ display: flex;
+ align-items: center;
+}
+
+.bulk-update-title::before {
+ content: '';
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: var(--color-primary);
+ margin-right: 0.5rem;
+ animation: pulse 1.5s infinite;
+}
+
+.bulk-update-count {
+ font-size: 0.9rem;
+ color: var(--color-text-muted);
+ font-weight: 500;
+}
+
+.bulk-update-details {
+ margin-top: 0.75rem;
+ font-size: 0.9rem;
+ color: var(--color-text-muted);
+}
+
+.current-plugin {
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+}
+
+.current-plugin strong {
+ color: var(--color-text);
+}
+
+@keyframes pulse {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.6;
+ transform: scale(1.1);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes slide-in {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
\ No newline at end of file
diff --git a/src/components/updates/BulkUpdateProgress/BulkUpdateProgress.tsx b/src/components/updates/BulkUpdateProgress/BulkUpdateProgress.tsx
new file mode 100644
index 0000000..fb8f8d9
--- /dev/null
+++ b/src/components/updates/BulkUpdateProgress/BulkUpdateProgress.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
+import ProgressBar from '../../common/ProgressBar/ProgressBar';
+import './BulkUpdateProgress.css';
+
+/**
+ * Component that displays the progress of bulk plugin updates
+ */
+export const BulkUpdateProgress: React.FC = () => {
+ const { bulkUpdateProgress } = usePluginContext();
+
+ // If no bulk update is in progress, don't render anything
+ if (!bulkUpdateProgress) {
+ return null;
+ }
+
+ const progressPercentage = bulkUpdateProgress.total > 0
+ ? Math.round((bulkUpdateProgress.processed / bulkUpdateProgress.total) * 100)
+ : 0;
+
+ return (
+
+
+
+ {serverPath && !isScanning && (
+
+ )}
+
+ {serverPath && scanComplete && (
+
+ )}
+
+
+ {isScanning && (
+ <>
+ {/* Add debug info */}
+
+
+ Debug - scanProgress: {JSON.stringify(scanProgress, null, 2)}
+
+
+ )}
+ Error: {error}
+
+
+ );
+};
+
+export default BulkUpdateProgress;
\ No newline at end of file
diff --git a/src/components/updates/CompatibilityCheckDialog/CompatibilityCheckDialog.css b/src/components/updates/CompatibilityCheckDialog/CompatibilityCheckDialog.css
new file mode 100644
index 0000000..fcde578
--- /dev/null
+++ b/src/components/updates/CompatibilityCheckDialog/CompatibilityCheckDialog.css
@@ -0,0 +1,81 @@
+.compatibility-check-content {
+ padding: 1rem 0;
+}
+
+.compatibility-status {
+ margin-bottom: 1.5rem;
+}
+
+.compatibility-supported,
+.compatibility-warning {
+ display: flex;
+ align-items: flex-start;
+ padding: 1rem;
+ border-radius: 6px;
+ margin-bottom: 1rem;
+}
+
+.compatibility-supported {
+ background-color: rgba(76, 175, 80, 0.1);
+ border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.compatibility-warning {
+ background-color: rgba(255, 152, 0, 0.1);
+ border: 1px solid rgba(255, 152, 0, 0.3);
+}
+
+.status-icon {
+ font-size: 1.25rem;
+ margin-right: 0.75rem;
+ line-height: 1;
+}
+
+.compatibility-status p {
+ margin: 0;
+ line-height: 1.5;
+}
+
+.plugin-details {
+ margin-bottom: 1.5rem;
+}
+
+.plugin-details h4 {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ font-size: 1rem;
+}
+
+.plugin-details ul {
+ margin: 0;
+ padding-left: 1.5rem;
+}
+
+.plugin-details li {
+ margin-bottom: 0.5rem;
+}
+
+.risk-acknowledgment {
+ margin-bottom: 1.5rem;
+}
+
+.checkbox-container {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.checkbox-container input[type="checkbox"] {
+ margin-right: 0.5rem;
+}
+
+.checkbox-label {
+ font-weight: 500;
+}
+
+.dialog-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 0.75rem;
+ margin-top: 1.5rem;
+}
\ No newline at end of file
diff --git a/src/components/updates/CompatibilityCheckDialog/CompatibilityCheckDialog.tsx b/src/components/updates/CompatibilityCheckDialog/CompatibilityCheckDialog.tsx
new file mode 100644
index 0000000..e140adc
--- /dev/null
+++ b/src/components/updates/CompatibilityCheckDialog/CompatibilityCheckDialog.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import Modal from '../../common/Modal/Modal';
+import Button from '../../common/Button/Button';
+import './CompatibilityCheckDialog.css';
+import { useServerContext } from '../../../context/ServerContext/useServerContext';
+import { Plugin } from '../../../types/plugin.types';
+
+interface CompatibilityCheckDialogProps {
+ isOpen: boolean;
+ onClose: () => void;
+ plugin: Plugin;
+ onConfirmUpdate: () => void;
+}
+
+/**
+ * A dialog that shows compatibility warnings before updating a plugin
+ */
+export const CompatibilityCheckDialog: React.FC
+
+
+ + Checking for Updates +
+ + {bulkUpdateProgress.processed} of {bulkUpdateProgress.total} + +
+
+ Processing: {bulkUpdateProgress.current_plugin_name}
+
+
+
+
+
+ {supportsVersion ? (
+
+
+
+ ✓
+
+ ) : (
+ + This plugin update is marked as compatible with your server version ({serverVersion}). + It should work correctly after updating. +
+
+ ⚠️
+
+ )}
+ + This plugin update is not explicitly marked as compatible with your server version ({serverVersion}). + Updating may cause compatibility issues or server errors. +
+
+
+
+ {!supportsVersion && (
+ Plugin Details
+-
+
- Name: {plugin.name} +
- Current Version: {plugin.version} +
- Latest Version: {plugin.latest_version} + {plugin.platform_compatibility && ( +
- + Supported Versions: {plugin.platform_compatibility.join(', ')} + + )} +
+
+
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+export default DownloadProgressIndicator;
\ No newline at end of file
diff --git a/src/components/updates/PluginMatchSelector/PluginMatchSelector.css b/src/components/updates/PluginMatchSelector/PluginMatchSelector.css
new file mode 100644
index 0000000..99a95bc
--- /dev/null
+++ b/src/components/updates/PluginMatchSelector/PluginMatchSelector.css
@@ -0,0 +1,132 @@
+.plugin-match-selector {
+ padding: 0.5rem 0;
+}
+
+.plugin-match-header {
+ margin-bottom: 1.25rem;
+}
+
+.plugin-match-header p {
+ margin: 0;
+ line-height: 1.5;
+ font-size: 0.95rem;
+}
+
+.plugin-matches-list {
+ max-height: 400px;
+ overflow-y: auto;
+ margin-bottom: 1.5rem;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+}
+
+.plugin-match-item {
+ display: flex;
+ padding: 1rem;
+ border-bottom: 1px solid var(--color-border);
+ cursor: pointer;
+ transition: background-color 0.2s;
+ position: relative;
+}
+
+.plugin-match-item:last-child {
+ border-bottom: none;
+}
+
+.plugin-match-item:hover {
+ background-color: var(--color-background-hover);
+}
+
+.plugin-match-item.selected {
+ background-color: var(--color-background-active);
+ border-left: 3px solid var(--color-primary);
+}
+
+.plugin-match-info {
+ flex: 0 0 25%;
+ padding-right: 1rem;
+}
+
+.plugin-match-name {
+ margin: 0 0 0.25rem 0;
+ font-size: 1rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.plugin-match-version,
+.plugin-match-source {
+ display: block;
+ font-size: 0.85rem;
+ color: var(--color-text-muted);
+}
+
+.plugin-match-details {
+ flex: 1;
+ min-width: 0;
+}
+
+.plugin-match-description {
+ margin: 0 0 0.5rem 0;
+ font-size: 0.9rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.plugin-match-metadata {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ font-size: 0.8rem;
+}
+
+.plugin-match-mc-versions,
+.plugin-match-downloads {
+ color: var(--color-text-muted);
+}
+
+.plugin-match-selection {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 40px;
+}
+
+.plugin-match-radio {
+ height: 20px;
+ width: 20px;
+}
+
+.plugin-match-radio input {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.plugin-match-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+ .plugin-match-item {
+ flex-direction: column;
+ }
+
+ .plugin-match-info {
+ flex: 1 1 auto;
+ padding-right: 0;
+ margin-bottom: 0.5rem;
+ }
+
+ .plugin-match-selection {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/updates/PluginMatchSelector/PluginMatchSelector.tsx b/src/components/updates/PluginMatchSelector/PluginMatchSelector.tsx
new file mode 100644
index 0000000..924e882
--- /dev/null
+++ b/src/components/updates/PluginMatchSelector/PluginMatchSelector.tsx
@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import Modal from '../../common/Modal/Modal';
+import Button from '../../common/Button/Button';
+import { PotentialPluginMatch } from '../../../types/plugin.types';
+import './PluginMatchSelector.css';
+
+interface PluginMatchSelectorProps {
+ isOpen: boolean;
+ onClose: () => void;
+ pluginName: string;
+ potentialMatches: PotentialPluginMatch[];
+ onSelectMatch: (match: PotentialPluginMatch) => void;
+}
+
+/**
+ * Component that allows users to select from potential plugin matches when the exact match isn't found
+ */
+export const PluginMatchSelector: React.FC
+
+
+
+ {getStatusIcon()}
+ {pluginName}
+ v{version}
+
+
+ {getStatusText()}
+
+
+ {message}
+
+ )}
+
+
+
+
+
+ + We found multiple potential matches for {pluginName}. + Please select the correct plugin from the list below: +
+
+ {potentialMatches.map((match, index) => (
+
+
+ setSelectedMatchIndex(index)}
+ >
+
+ ))}
+
+
+
+ {match.name}
+ v{match.version} + {match.repository} +
+ {match.description && (
+
+
+ {match.description}
+ )} +
+
+ MC: {match.minecraft_versions.join(', ')}
+
+ {match.download_count !== undefined && (
+
+ {new Intl.NumberFormat().format(match.download_count)} downloads
+
+ )}
+
+
+
+
+ setSelectedMatchIndex(index)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Premium Plugin Detected
++ {pluginInfo.name} (version {pluginInfo.version}) is a premium plugin + that requires manual download from the official source. +
++ Click the button below to visit the plugin's website where you can purchase or + download the update if you already own it. +
+
+
+
+
+
+
+ );
+};
+
+export default UpdateControls;
\ No newline at end of file
diff --git a/src/components/updates/WarningModal/WarningModal.css b/src/components/updates/WarningModal/WarningModal.css
new file mode 100644
index 0000000..a6155c1
--- /dev/null
+++ b/src/components/updates/WarningModal/WarningModal.css
@@ -0,0 +1,62 @@
+.warning-modal {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1.5rem;
+ text-align: center;
+}
+
+.warning-modal-icon {
+ margin-bottom: 1.5rem;
+}
+
+.warning-modal-warning .warning-modal-icon {
+ color: #ff9800; /* warning color */
+}
+
+.warning-modal-error .warning-modal-icon {
+ color: #f44336; /* error color */
+}
+
+.warning-modal-info .warning-modal-icon {
+ color: #2196f3; /* info color */
+}
+
+.warning-modal-content {
+ margin-bottom: 1.5rem;
+ width: 100%;
+}
+
+.warning-modal-message {
+ margin: 0;
+ line-height: 1.6;
+ font-size: 1rem;
+ white-space: pre-line; /* Respects line breaks in the message */
+}
+
+.warning-modal-actions {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: center;
+ margin-top: 0.5rem;
+}
+
+/* Add a subtle shake animation for error warnings */
+.warning-modal-error {
+ animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes shake {
+ 10%, 90% {
+ transform: translateX(-1px);
+ }
+ 20%, 80% {
+ transform: translateX(2px);
+ }
+ 30%, 50%, 70% {
+ transform: translateX(-4px);
+ }
+ 40%, 60% {
+ transform: translateX(4px);
+ }
+}
\ No newline at end of file
diff --git a/src/components/updates/WarningModal/WarningModal.tsx b/src/components/updates/WarningModal/WarningModal.tsx
new file mode 100644
index 0000000..31901f7
--- /dev/null
+++ b/src/components/updates/WarningModal/WarningModal.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import Modal from '../../common/Modal/Modal';
+import Button from '../../common/Button/Button';
+import './WarningModal.css';
+
+interface WarningModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title: string;
+ message: string;
+ confirmLabel?: string;
+ cancelLabel?: string;
+ onConfirm?: () => void;
+ variant?: 'warning' | 'error' | 'info';
+}
+
+/**
+ * A modal component for displaying important warnings to users
+ */
+export const WarningModal: React.FC
+ {isCheckingUpdates ? (
+
+
+
+
+ Checking for plugin updates{bulkUpdateProgress ? ` (${bulkUpdateProgress.processed}/${bulkUpdateProgress.total})` : '...'}
+
+ ) : hasUpdates ? (
+
+ {outdatedCount} plugin update{outdatedCount !== 1 ? 's' : ''} available
+
+ ) : updatesHaveBeenChecked ? (
+ All plugins are up to date
+ ) : (
+ Click "Check for Updates" to check plugin versions
+ )}
+
+
+
+ {hasUpdates && (
+
+ )}
+
+
+
+
+ {renderIcon()}
+
+
+
+
+
+ {message}
+
+ {onConfirm ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+