refactor: improve read-only logic and title handling in PastePanel

fix: font problem
refactor: remove unused components and styles; consolidate password handling in new components
2026-03-17 18:22:59 +01:00 · 2026-03-17 18:05:01 +01:00 · 2026-03-17 03:57:47 +01:00 · 2026-03-17 03:08:38 +01:00 · 2026-03-17 02:25:59 +01:00 · 2026-03-16 01:20:01 +01:00
49 changed files with 695 additions and 1290 deletions
--- a/index.html
+++ b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title style="font-family: Fira Code;">mpaste</title>
-  </head>
-  <body>
-    <div id="root" class="p-0 m-0"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title style="font-family: Fira Code;">mpaste</title>
+</head>
+
+<body>
+  <div id="root" class="p-0 m-0"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "@fortawesome/free-solid-svg-icons": "^7.0.0",
        "@fortawesome/react-fontawesome": "^0.2.3",
        "@monaco-editor/react": "^4.7.0",
+        "@stomp/stompjs": "^7.3.0",
        "axios": "^1.11.0",
        "bootstrap": "^5.3.7",
        "date-fns": "^4.1.0",
@@ -25,7 +26,8 @@
        "react-dom": "^19.1.0",
        "react-router-dom": "^7.7.1",
        "react-slick": "^0.30.3",
-        "slick-carousel": "^1.8.1"
+        "slick-carousel": "^1.8.1",
+        "sockjs-client": "^1.6.1"
      },
      "devDependencies": {
        "@eslint/js": "^9.30.1",
@@ -1606,6 +1608,12 @@
        "url": "https://github.com/sindresorhus/is?sponsor=1"
      }
    },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.3.0.tgz",
+      "integrity": "sha512-nKMLoFfJhrQAqkvvKd1vLq/cVBGCMwPRCD0LqW7UT1fecRx9C3GoKEIR2CYwVuErGeZu8w0kFkl2rlhPlqHVgQ==",
+      "license": "Apache-2.0"
+    },
    "node_modules/@swc/helpers": {
      "version": "0.5.19",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
@@ -2696,6 +2704,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/extract-zip": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -2738,6 +2755,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
    "node_modules/fd-slicer": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -3174,6 +3203,12 @@
      "dev": true,
      "license": "BSD-2-Clause"
    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "license": "MIT"
+    },
    "node_modules/http2-wrapper": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
@@ -3225,6 +3260,12 @@
        "node": ">=0.8.19"
      }
    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
    "node_modules/invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -3544,7 +3585,6 @@
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/nanoid": {
@@ -3843,6 +3883,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
    "node_modules/quick-lru": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
@@ -4001,6 +4047,12 @@
        "react-dom": ">=16.6.0"
      }
    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
    "node_modules/resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -4101,6 +4153,26 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/scheduler": {
      "version": "0.27.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -4180,6 +4252,34 @@
        "jquery": ">=1.8.0"
      }
    },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4372,6 +4472,16 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
    "node_modules/vite": {
      "version": "7.3.1",
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -4456,6 +4566,29 @@
        "loose-envify": "^1.0.0"
      }
    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "@fortawesome/free-solid-svg-icons": "^7.0.0",
    "@fortawesome/react-fontawesome": "^0.2.3",
    "@monaco-editor/react": "^4.7.0",
+    "@stomp/stompjs": "^7.3.0",
    "axios": "^1.11.0",
    "bootstrap": "^5.3.7",
    "date-fns": "^4.1.0",
@@ -26,7 +27,8 @@
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.7.1",
    "react-slick": "^0.30.3",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "sockjs-client": "^1.6.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.30.1",
--- a/public/config/settings.dev.json
+++ b/public/config/settings.dev.json
@@ -4,8 +4,8 @@
    "endpoints": {
      "pastes": {
        "all": "/pastes",
-        "byId": "/:pasteId",
-        "byKey": "/:pasteKey"
+        "byId": "/by-id/:pasteId",
+        "byKey": "/s/:pasteKey"
      }
    }
  }
--- a/public/config/settings.prod.json
+++ b/public/config/settings.prod.json
@@ -4,8 +4,8 @@
    "endpoints": {
      "pastes": {
        "all": "/pastes",
-        "byId": "/:pasteId",
-        "byKey": "/:pasteKey"
+        "byId": "/by-id/:pasteId",
+        "byKey": "/s/:pasteKey"
      }
    }
  }
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,54 @@
 import NavBar from '@/components/NavBar.jsx';
 import { Route, Routes, useLocation } from 'react-router-dom'
 import Home from '@/pages/Home.jsx'
+import { useState, useEffect } from 'react';
+import NotificationModal from './components/NotificationModal';

 function App() {
+  const [connected, setConnected] = useState(false);
+  const [showExperimentalModal, setShowExperimentalModal] = useState(false);
+
+  useEffect(() => {
+    const hasSeenWarning = localStorage.getItem('experimental_rt_warned');
+
+    if (!hasSeenWarning) {
+      setShowExperimentalModal(true);
+    }
+  }, []);
+
+  const handleCloseWarning = () => {
+    localStorage.setItem('experimental_rt_warned', 'true');
+    setShowExperimentalModal(false);
+  };
+
  return (
    <>
-      <NavBar />
+      <NavBar connected={connected} />
      <div className="fill d-flex flex-column">
        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/:pasteKey" element={<Home />} />
+          <Route path="/" element={<Home mode="create" onConnectChange={setConnected} />} />
+          <Route path="/s/:pasteKey" element={<Home mode="static" onConnectChange={setConnected} />} />
+          <Route path="/:rtKey" element={<Home mode="rt" onConnectChange={setConnected} />} />
        </Routes>
      </div>
+      <NotificationModal
+        show={showExperimentalModal}
+        onClose={handleCloseWarning}
+        title="Modo Experimental"
+        message={
+          <span>
+            He añadido un modo tiempo real pero de momento es <strong>EXPERIMENTAL</strong>. Cualquier fallo por favor mandadlo a jose [arroba] miarma.net.
+          </span>
+        }
+        variant="warning"
+        buttons={[
+          {
+            label: "Vale",
+            variant: "warning",
+            onClick: handleCloseWarning
+          }
+        ]}
+      />
    </>
  )
 }
--- a/src/components/AnimatedDropdown.jsx
+++ b/src/components/AnimatedDropdown.jsx
@@ -1,92 +0,0 @@
-import { useState, useRef, useEffect, cloneElement } from 'react';
-import { Button } from 'react-bootstrap';
-import { AnimatePresence, motion as _motion } from 'framer-motion';
-import '../css/AnimatedDropdown.css';
-
-const AnimatedDropdown = ({
-  trigger,
-  icon,
-  variant = "secondary",
-  className = "",
-  buttonStyle = "",
-  show,
-  onToggle,
-  onMouseEnter,
-  onMouseLeave,
-  children
-}) => {
-  const isControlled = show !== undefined;
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const dropdownRef = useRef(null);
-
-  const actualOpen = isControlled ? show : open;
-
-  const toggle = () => {
-    const newState = !actualOpen;
-    if (!isControlled) setOpen(newState);
-    onToggle?.(newState);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target) &&
-        !triggerRef.current?.contains(e.target)
-      ) {
-        if (!isControlled) setOpen(false);
-        onToggle?.(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isControlled, onToggle]);
-
-  const triggerElement = trigger
-    ? (typeof trigger === "function"
-      ? trigger({ onClick: toggle, ref: triggerRef })
-      : cloneElement(trigger, { onClick: toggle, ref: triggerRef }))
-    : (
-      <Button
-        ref={triggerRef}
-        variant={variant}
-        className={`circle-btn ${buttonStyle}`}
-        onClick={toggle}
-      >
-        {icon}
-      </Button>
-    );
-
-  const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
-
-  return (
-    <div
-      className={`position-relative d-inline-block`}
-      onClick={toggle}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      ref={triggerRef}
-    >
-      {triggerElement}
-
-      <AnimatePresence>
-        {actualOpen && (
-          <_motion.div
-            ref={dropdownRef}
-            initial={{ opacity: 0, scale: 0.98 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.98 }}
-            transition={{ duration: 0.15 }}
-            className={dropdownClasses}
-          >
-            {typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
-          </_motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-export default AnimatedDropdown;
--- a/src/components/AnimatedDropend.jsx
+++ b/src/components/AnimatedDropend.jsx
@@ -1,122 +0,0 @@
-import { useState, useRef, useEffect, cloneElement } from 'react';
-import { Button } from 'react-bootstrap';
-import { AnimatePresence, motion as _motion } from 'framer-motion';
-import '@/css/AnimatedDropdown.css';
-
-const AnimatedDropend = ({
-  trigger,
-  icon,
-  variant = "secondary",
-  className = "",
-  buttonStyle = "",
-  show,
-  onToggle,
-  onMouseEnter,
-  onMouseLeave,
-  children
-}) => {
-  const isControlled = show !== undefined;
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const dropdownRef = useRef(null);
-
-  const actualOpen = isControlled ? show : open;
-
-  const toggle = (forceValue) => {
-    const newState = typeof forceValue === "boolean" ? forceValue : !actualOpen;
-    if (!isControlled) setOpen(newState);
-    onToggle?.(newState);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target) &&
-        !triggerRef.current?.contains(e.target)
-      ) {
-        if (!isControlled) setOpen(false);
-        onToggle?.(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isControlled, onToggle]);
-
-  const handleMouseEnter = () => {
-    if (!isControlled) setOpen(true);
-    onToggle?.(true);
-    onMouseEnter?.();
-  };
-
-  const handleMouseLeave = () => {
-    if (!isControlled) setOpen(false);
-    onToggle?.(false);
-    onMouseLeave?.();
-  };
-
-  const triggerElement = trigger
-    ? (typeof trigger === "function"
-      ? trigger({ 
-        onClick: e => {
-          e.stopPropagation();
-          toggle();
-        }, 
-        ref: triggerRef 
-      })
-      : cloneElement(trigger, { 
-        onClick: e => {
-          e.stopPropagation();
-          toggle();
-        }, 
-        ref: triggerRef 
-      }))
-    : (
-      <Button
-        ref={triggerRef}
-        variant={variant}
-        className={`circle-btn ${buttonStyle}`}
-        onClick={toggle}
-      >
-        {icon}
-      </Button>
-    );
-
-  const dropdownClasses = `dropdown-menu show shadow rounded-4 px-2 py-2 ${className}`;
-
-  return (
-    <div
-      className="position-relative d-inline-block dropend"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      ref={triggerRef}
-    >
-      {triggerElement}
-
-      <AnimatePresence>
-        {actualOpen && (
-          <_motion.div
-            ref={dropdownRef}
-            initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -10 }}
-            transition={{ duration: 0.15 }}
-            className={dropdownClasses}
-            style={{
-              position: 'absolute',
-              top: '0',
-              left: '100%',
-              zIndex: 1000,
-              whiteSpace: 'nowrap'
-            }}
-          >
-            {typeof children === "function" ? children({ closeDropdown: () => toggle(false) }) : children}
-          </_motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-export default AnimatedDropend;
--- a/src/components/Auth/IfAuthenticated.jsx
+++ b/src/components/Auth/IfAuthenticated.jsx
@@ -1,8 +0,0 @@
-import { useAuth } from "@/hooks/useAuth.js";
-
-const IfAuthenticated = ({ children }) => {
-  const { authStatus } = useAuth();
-  return authStatus === "authenticated" ? children : null;
-};
-
-export default IfAuthenticated;
--- a/src/components/Auth/IfNotAuthenticated.jsx
+++ b/src/components/Auth/IfNotAuthenticated.jsx
@@ -1,8 +0,0 @@
-import { useAuth } from "@/hooks/useAuth.js";
-
-const IfNotAuthenticated = ({ children }) => {
-  const { authStatus } = useAuth();
-  return authStatus === "unauthenticated" ? children : null;
-};
-
-export default IfNotAuthenticated;
--- a/src/components/Auth/IfRole.jsx
+++ b/src/components/Auth/IfRole.jsx
@@ -1,13 +0,0 @@
-import { useAuth } from "@/hooks/useAuth.js";
-
-const IfRole = ({ roles, children }) => {
-  const { user, authStatus } = useAuth();
-
-  if (authStatus !== "authenticated") return null;
-
-  const userRole = user?.role;
-  
-  return roles.includes(userRole) ? children : null;
-};
-
-export default IfRole;
--- a/src/components/Auth/LoginForm.jsx
+++ b/src/components/Auth/LoginForm.jsx
@@ -1,120 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { Form, Button, Alert, FloatingLabel, Row, Col } from 'react-bootstrap';
-import PasswordInput from '@/components/Auth/PasswordInput.jsx';
-
-import { useContext, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { AuthContext } from "@/context/AuthContext.jsx";
-
-import CustomContainer from '@/components/CustomContainer.jsx';
-import ContentWrapper from '@/components/ContentWrapper.jsx';
-
-import '@/css/LoginForm.css';
-
-const LoginForm = () => {
-    const { login, error } = useContext(AuthContext);
-    const navigate = useNavigate();
-
-    const [formState, setFormState] = useState({
-        emailOrUserName: "",
-        password: "",
-        keepLoggedIn: false
-    });
-
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setFormState((prev) => ({ ...prev, [name]: value }));
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-    
-        const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.emailOrUserName);
-
-        const loginBody = {
-            password: formState.password,
-            keepLoggedIn: Boolean(formState.keepLoggedIn),
-        };
-    
-        if (isEmail) {
-            loginBody.email = formState.emailOrUserName;
-        } else {
-            loginBody.userName = formState.emailOrUserName;
-        }
-    
-        try {
-            await login(loginBody);
-            navigate("/");
-        } catch (err) {
-            console.error("Error de login:", err.message);
-        }
-    };
-
-    return (
-        <CustomContainer>
-            <ContentWrapper>
-                <div className="login-card card shadow p-5 rounded-5 mx-auto col-12 col-md-8 col-lg-6 col-xl-5 d-flex flex-column gap-4">
-                    <h1 className="text-center">Inicio de sesión</h1>
-                    <Form className="d-flex flex-column gap-5" onSubmit={handleSubmit}>
-                        <div className="d-flex flex-column gap-3">
-                            <FloatingLabel
-                                controlId="floatingUsuario"
-                                label={
-                                    <>
-                                        <FontAwesomeIcon icon={faUser} className="me-2" />
-                                        Usuario o Email
-                                    </>
-                                }
-                            >
-                                <Form.Control
-                                    type="text"
-                                    placeholder=""
-                                    name="emailOrUserName"
-                                    value={formState.emailOrUserName}
-                                    onChange={handleChange}
-                                    className="rounded-4"
-                                />
-                            </FloatingLabel>
-
-                            <PasswordInput
-                                value={formState.password}
-                                onChange={handleChange}
-                                name="password"
-                            />
-
-                            <div className="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
-                                <Form.Check
-                                    type="checkbox"
-                                    name="keepLoggedIn"
-                                    label="Mantener sesión iniciada"
-                                    className="text-secondary"
-                                    value={formState.keepLoggedIn}
-                                    onChange={(e) => { formState.keepLoggedIn = e.target.checked; setFormState({ ...formState }) }}
-                                />
-                                {/*<Link disabled to="#" className="muted">
-                                    Olvidé mi contraseña
-                                </Link>*/}
-                            </div>
-                        </div>
-
-                        {error && (
-                            <Alert variant="danger" className="text-center py-2 mb-0">
-                                {error}
-                            </Alert>
-                        )}
-
-                        <div className="text-center">
-                            <Button type="submit" className="w-75 padding-4 rounded-4 border-0 shadow-sm login-button">
-                                Iniciar sesión
-                            </Button>
-                        </div>
-                    </Form>
-                </div>
-            </ContentWrapper>
-        </CustomContainer>
-    );
-};
-
-
-export default LoginForm;
--- a/src/components/Auth/ProtectedRoute.jsx
+++ b/src/components/Auth/ProtectedRoute.jsx
@@ -1,18 +0,0 @@
-import { Navigate } from "react-router-dom";
-import { useAuth } from "@/hooks/useAuth.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-
-const ProtectedRoute = ({ minimumRoles, children }) => {
-  const { authStatus } = useAuth();
-
-  if (authStatus === "checking") return <FontAwesomeIcon icon={faSpinner} />; // o un loader si quieres
-  if (authStatus === "unauthenticated") return <Navigate to="/login" replace />;
-  if (authStatus === "authenticated" && minimumRoles) {
-    const userRole = JSON.parse(localStorage.getItem("user"))?.role;
-    if (!minimumRoles.includes(userRole)) return <Navigate to="/" replace />;
-  }
-  return children;
-};
-
-export default ProtectedRoute;
--- a/src/components/ContentWrapper.jsx
+++ b/src/components/ContentWrapper.jsx
@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ContentWrapper = ({ children }) => {
-    return (
-        <div className="container-xl">
-            {children}
-        </div>
-    );
-}
-
-ContentWrapper.propTypes = {
-    children: PropTypes.node.isRequired,
-}
-
-export default ContentWrapper;
--- a/src/components/CustomCarousel.jsx
+++ b/src/components/CustomCarousel.jsx
@@ -1,47 +0,0 @@
-import Slider from 'react-slick';
-import '@/css/CustomCarousel.css';
-
-const CustomCarousel = ({ images }) => {
-    const settings = {
-        dots: false,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 2,
-        slidesToScroll: 1,
-        arrows: false,
-        autoplay: true,
-        autoplaySpeed: 3000,
-        responsive: [
-            {
-                breakpoint: 768, // móviles
-                settings: {
-                    slidesToShow: 1,
-                    arrows: false,
-                    autoplay: true,
-                    autoplaySpeed: 3000,
-                    dots: false,
-                    infinite: true,
-                    speed: 500
-                }
-            }
-        ]
-    };
-
-    return (
-        <div className="my-4">
-            <Slider {...settings}>
-                {images.map((src, index) => (
-                    <div key={index} className='carousel-img-wrapper'>
-                        <img
-                            src={src}
-                            alt={`slide-${index}`}
-                            className="carousel-img"
-                        />
-                    </div>
-                ))}
-            </Slider>
-        </div>
-    );
-};
-
-export default CustomCarousel;
--- a/src/components/CustomContainer.jsx
+++ b/src/components/CustomContainer.jsx
@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const CustomContainer = ({ children }) => {
-    return (
-        <main className="px-4 py-5">
-            {children}
-        </main>
-    );
-}
-
-CustomContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-}
-
-export default CustomContainer;
--- a/src/components/CustomModal.jsx
+++ b/src/components/CustomModal.jsx
@@ -1,26 +0,0 @@
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Modal, Button } from "react-bootstrap";
-
-const CustomModal = ({ show, onClose, title, children }) => {
-    return (
-        <Modal show={show} onHide={onClose} size="xl" centered>
-            <Modal.Header className='justify-content-between rounded-top-4'>
-                <Modal.Title>{title}</Modal.Title>
-                <Button variant='transparent' onClick={onClose}>
-                    <FontAwesomeIcon icon={faXmark} className='close-button fa-xl' />
-                </Button>
-            </Modal.Header>
-            <Modal.Body className="rounded-bottom-4 p-0"
-                style={{
-                    maxHeight: '80vh',
-                    overflowY: 'auto',
-                    padding: '1rem',
-                }}>
-                {children}
-            </Modal.Body>
-        </Modal>
-    );
-}
-
-export default CustomModal;
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import '@/css/Footer.css';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-
-const Footer = () => {
-  const [heart, setHeart] = useState('💜');
-
-  useEffect(() => {
-    const hearts = ["❤️", "💛", "🧡", "💚", "💙", "💜"];
-    const randomHeart = () => hearts[Math.floor(Math.random() * hearts.length)];
-
-    const interval = setInterval(() => {
-      setHeart(randomHeart());
-    }, 3000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <footer className="footer d-flex flex-column align-items-center gap-5 pt-5 px-4">
-      <div className="footer-columns w-100" style={{ maxWidth: '900px' }}>
-        <div className="footer-column">
-          <h4 className="footer-title">Contacto</h4>
-          <div className="contact-info p-4">
-            <a
-              href="https://github.com/Gallardo7761"
-              target="_blank"
-              className='text-break d-block'
-              rel="noopener noreferrer"
-            >
-              <FontAwesomeIcon icon={faGithub} className="fa-icon me-2 " />
-              Gallardo7761
-            </a>
-            <a href="mailto:jose@miarma.net" className="text-break d-block">
-              <FontAwesomeIcon icon={faEnvelope} className="fa-icon me-2" />
-              jose@miarma.net
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div className="footer-bottom w-100 py-5 text-center">
-        <h6 id="devd" className='m-0'>
-          Hecho con <span className="heart-anim">{heart}</span> por{' '}
-          <a href="https://gallardo.dev" target="_blank" rel="noopener noreferrer">
-            Gallardo7761
-          </a>
-        </h6>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,19 +0,0 @@
-import '@/css/Header.css';
-import { Link } from 'react-router-dom';
-
-const Header = () => {
-
-    return (
-        <header className={`text-center bg-img`}>
-            <div className="m-0 p-5 mask">
-                <div className="d-flex flex-column justify-content-center align-items-center h-100">
-                    <Link to='/' className='text-decoration-none'>
-                        <h1 className='header-title m-0 text-white shadowed'>Tu página web</h1>
-                    </Link>
-                </div>
-            </div>
-        </header>
-    );
-}
-
-export default Header;
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -6,8 +6,10 @@ import { Navbar, Nav, Container } from 'react-bootstrap';
 import SearchToolbar from './SearchToolbar';
 import { useSearch } from "@/context/SearchContext";
 import NotificationModal from './NotificationModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';

-const NavBar = () => {
+const NavBar = ({ connected }) => {
  const [expanded, setExpanded] = useState(false);
  const [isLg, setIsLg] = useState(window.innerWidth >= 992);
  const [isXs, setIsXs] = useState(window.innerWidth < 576);
@@ -47,7 +49,6 @@ const NavBar = () => {
        className='shadow-none custom-border-bottom'
      >
        <Container fluid>
-          {/* brand */}
          <Nav.Item
            title="mpaste"
            className={`navbar-brand`}
@@ -58,12 +59,10 @@ const NavBar = () => {
            </div>
          </Nav.Item>

-          {/* ThemeButton SIEMPRE fijo */}
          <div className="order-lg-2 ms-auto me-2">
            <ThemeButton onlyIcon={isXs} />
          </div>

-          {/* burger */}
          <Navbar.Toggle
            aria-controls="main-navbar"
            className="custom-toggler border-0 order-lg-3"
@@ -79,7 +78,6 @@ const NavBar = () => {
            </svg>
          </Navbar.Toggle>

-          {/* links y search que colapsan */}
          <Navbar.Collapse id="main-navbar" className="order-lg-1">
            <Nav
              className={`me-auto gap-3 w-100 ${expanded ? "flex-column align-items-start mt-3 mb-2" : "d-flex align-items-center"}`}
@@ -92,11 +90,24 @@ const NavBar = () => {
                  onSearchChange={setSearchTerm}
                />
              </div>
+              <div className="d-flex align-items-center gap-2 ms-2 px-2 py-1 " style={{ fontSize: '0.85rem' }}>
+                <FontAwesomeIcon
+                  icon={faCircle}
+                  className={connected ? "pulse-animation" : ""}
+                  style={{
+                    color: connected ? '#28a745' : '#dc3545',
+                    fontSize: '10px',
+                    filter: connected ? 'drop-shadow(0 0 4px #28a745)' : 'none'
+                  }}
+                />
+                <span className="text-secondary fw-medium">
+                  {connected ? 'conectado' : 'desconectado'}
+                </span>
+              </div>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
-      {/* Contact Modal */}
      <NotificationModal
        show={showContactModal}
        onClose={() => setShowContactModal(false)}
--- a/src/components/Pastes/CodeEditor.jsx
+++ b/src/components/Pastes/CodeEditor.jsx
@@ -34,13 +34,13 @@ const CodeEditor = ({ className = "", syntax, readOnly, onChange, value, editorE
                onChange={onChange}
                onMount={onMount}
                options={{
-                    minimap: { enabled: false },
+                    minimap: { enabled: true },
                    automaticLayout: true,
                    fontFamily: 'Fira Code',
                    fontLigatures: true,
                    fontSize: 18,
                    lineHeight: 1.5,
-                    scrollbar: { verticalScrollbarSize: 0 },
+                    scrollbar: { verticalScrollbarSize: 10 },
                    wordWrap: "on",
                    formatOnPaste: true,
                    readOnly: readOnly || false,
--- a/src/components/Pastes/PasswordInput.jsx
+++ b/src/components/Pastes/PasswordInput.jsx
@@ -5,7 +5,7 @@ import '@/css/PasswordInput.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash, faKey } from '@fortawesome/free-solid-svg-icons';

-const PasswordInput = ({ value, onChange, name = "password" }) => {
+const PasswordInput = ({ disabled, value, onChange, name = "password" }) => {
  const [show, setShow] = useState(false);

  const toggleShow = () => setShow(prev => !prev);
@@ -28,6 +28,7 @@ const PasswordInput = ({ value, onChange, name = "password" }) => {
          placeholder=""
          onChange={onChange}
          className="rounded-4 pe-5"
+          disabled={disabled}
        />
      </FloatingLabel>

--- a/src/components/Pastes/PasswordModal.jsx
+++ b/src/components/Pastes/PasswordModal.jsx
@@ -3,8 +3,7 @@ import { Modal, Button, Form } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
-import PasswordInput from '@/components/Auth/PasswordInput';
-import { renderErrorAlert } from '@/util/alertHelpers';
+import PasswordInput from '@/components/Pastes/PasswordInput';
 import '@/css/PasswordModal.css';

 const PasswordModal = ({
@@ -37,8 +36,6 @@ const PasswordModal = ({
          Esta paste está protegida con contraseña. Introduce la clave para continuar.
        </p>

-        {renderErrorAlert(error)}
-
        <PasswordInput
          value={password}
          onChange={(e) => setPassword(e.target.value)}
--- a/src/components/Pastes/PastePanel.jsx
+++ b/src/components/Pastes/PastePanel.jsx
@@ -1,41 +1,185 @@
-import { useState, useEffect } from "react";
-import { Form, Button, Row, Col, FloatingLabel, Alert } from "react-bootstrap";
+import { useState, useEffect, useRef } from "react";
+import { Form, Button, Row, Col, FloatingLabel } from "react-bootstrap";
 import '@/css/PastePanel.css';
-import PasswordInput from "@/components/Auth/PasswordInput";
+import PasswordInput from "@/components/Pastes/PasswordInput";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCode, faHeader } from "@fortawesome/free-solid-svg-icons";
+import { faCircle, faCode, faHeader } from "@fortawesome/free-solid-svg-icons";
 import CodeEditor from "./CodeEditor";
 import PublicPasteItem from "./PublicPasteItem";
 import { useParams, useNavigate } from "react-router-dom";
 import { useDataContext } from "@/hooks/useDataContext";
-import PasswordModal from "@/components/Auth/PasswordModal.jsx";
+import { useError } from '@/context/ErrorContext';
+import PasswordModal from "@/components/Pastes/PasswordModal.jsx";
+import { Client } from "@stomp/stompjs";
+import SockJS from 'sockjs-client';

-const PastePanel = ({ onSubmit, publicPastes }) => {
-	const { pasteKey } = useParams();
+const INITIAL_FORM_DATA = {
+	title: "",
+	content: "",
+	syntax: "",
+	burnAfter: false,
+	isPrivate: false,
+	isRt: false,
+	password: ""
+};
+
+const PastePanel = ({ onSubmit, publicPastes, mode, pasteKey: propKey, onConnectChange }) => {
+	const { pasteKey: urlPasteKey, rtKey } = useParams();
 	const navigate = useNavigate();
 	const { getData } = useDataContext();
+	const { showError } = useError();

-	const [formData, setFormData] = useState({
-		title: "",
-		content: "",
-		syntax: "",
-		burnAfter: false,
-		isPrivate: false,
-		password: ""
-	});
+	const activeKey = propKey || urlPasteKey || rtKey;

 	const [selectedPaste, setSelectedPaste] = useState(null);
 	const [editorErrors, setEditorErrors] = useState([]);
 	const [fieldErrors, setFieldErrors] = useState({});
 	const [showPasswordModal, setShowPasswordModal] = useState(false);
+	const [stompClient, setStompClient] = useState(null);
+	const [connected, setConnected] = useState(null);
+	const [isSaving, setIsSaving] = useState(false);
+	const [formData, setFormData] = useState({ ...INITIAL_FORM_DATA });
+
+	const lastSavedContent = useRef(formData.content);
+
+	const isStaticView = mode === 'static' && !!activeKey;
+	const isReadOnly = isStaticView || mode === 'rt';
+	const isEditorReadOnly = isStaticView;
+	const titleValue = mode === 'rt'
+		? `Sesión: ${activeKey}`
+		: (selectedPaste?.title ?? formData.title ?? "");
+	const isRemoteChange = useRef(false);
+
+	// Sincroniza el panel cuando cambia el modo o la clave activa:
+	// - modo static: intenta cargar la paste seleccionada
+	// - modo create: reinicia todo el formulario y errores
+	useEffect(() => {
+		if (mode === 'static' && activeKey) {
+			fetchPaste(activeKey);
+		} else if (mode === 'create') {
+			setSelectedPaste(null);
+			setFormData({ ...INITIAL_FORM_DATA });
+			setFieldErrors({});
+			setEditorErrors([]);
+		}
+	}, [activeKey, mode]);
+
+	// Gestiona el ciclo de vida del WebSocket en tiempo real:
+	// conecta al entrar en modo rt y limpia la conexión al salir.
+	// Los cambios remotos marcan `isRemoteChange` para no disparar autosave en bucle.
+	useEffect(() => {
+		if (mode === 'rt' && activeKey) {
+			const socketUrl = import.meta.env.MODE === 'production'
+				? `https://api.miarma.net/v2/mpaste/ws`
+				: `http://localhost:8081/v2/mpaste/ws`;
+
+			const socket = new SockJS(socketUrl);
+			const client = new Client({
+				webSocketFactory: () => socket,
+				onConnect: () => {
+					setConnected(true);
+					onConnectChange(true);
+					client.subscribe(`/topic/session/${activeKey}`, (message) => {
+						try {
+							const remoteState = JSON.parse(message.body);
+
+							setFormData(prev => {
+								if (prev.content === remoteState.content && prev.syntax === remoteState.syntax) {
+									return prev;
+								}
+								isRemoteChange.current = true;
+								return {
+									...prev,
+									...remoteState
+								};
+							});
+						} catch (e) {
+							console.error("Error parseando el mensaje del socket", e);
+						}
+					});
+					client.publish({ destination: `/app/join/${activeKey}` });
+				},
+				onDisconnect: () => {
+					setConnected(false);
+					onConnectChange(false);
+				}
+			});
+
+			client.activate();
+			setStompClient(client);
+			return () => client.deactivate();
+		} else {
+			setConnected(false);
+		}
+	}, [mode, activeKey]);
+
+	// Autosave con debounce en sesiones RT:
+	// solo guarda cuando el contenido local cambia y evita guardar cambios que vienen del socket.
+	useEffect(() => {
+		if (mode === 'rt' && connected && formData.content) {
+
+			if (isRemoteChange.current) {
+				lastSavedContent.current = formData.content;
+				isRemoteChange.current = false;
+				return;
+			}
+
+			if (formData.content !== lastSavedContent.current) {
+				const timer = setTimeout(async () => {
+					setIsSaving(true);
+					try {
+						const dataToSave = {
+							...formData,
+							pasteKey: activeKey,
+							isRt: true,
+							title: mode === 'rt' ? `Sesión: ${activeKey}` : formData.title
+						};
+						await onSubmit(dataToSave, true);
+						lastSavedContent.current = formData.content;
+						console.log("Autosave");
+					} catch (err) {
+						console.error("Error autosaving:", err);
+					} finally {
+						setIsSaving(false);
+					}
+				}, 5000);
+
+				return () => clearTimeout(timer);
+			}
+		}
+	}, [formData.content, mode, connected, activeKey]);
+
+	// Actualiza estado local y, si hay sesión RT activa, propaga el cambio al resto de clientes.
+	const handleChange = (key, value) => {
+		if (isReadOnly && mode !== 'rt') return;
+
+		const updatedData = { ...formData, [key]: value, isRt: mode === 'rt' };
+
+		setFormData(updatedData);
+
+		if (connected && stompClient && activeKey) {
+			stompClient.publish({
+				destination: `/app/edit/${activeKey}`,
+				body: JSON.stringify(updatedData)
+			});
+		}
+	};

 	const handleSubmit = async (e) => {
 		e.preventDefault();
 		setFieldErrors({});
 		setEditorErrors([]);

+		const normalizedTitle = (formData.title ?? "").trim();
+		const payload = {
+			...formData,
+			title: formData.isPrivate
+				? (normalizedTitle || "Sin título")
+				: formData.title
+		};
+
 		try {
-			if (onSubmit) await onSubmit(formData);
+			if (onSubmit) await onSubmit(payload);
 		} catch (error) {
 			if (error.status === 422 && error.errors) {
 				const newFieldErrors = {};
@@ -53,32 +197,51 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 		}
 	};

-	const handleSelectPaste = async (key) => navigate(`/${key}`);
+	const handleSelectPaste = (key) => navigate(`/s/${key}`);

+	// Lookup de paste estática:
+	// - 403: pide contraseña
+	// - 404: redirige al inicio
+	// Se hace en modo silencioso para que no abra el modal global en errores esperados.
 	const fetchPaste = async (key, pwd = "") => {
 		const url = import.meta.env.MODE === 'production'
-			? `https://api.miarma.net/v2/mpaste/pastes/${key}`
-			: `http://localhost:8081/v2/mpaste/pastes/${key}`;
+			? `https://api.miarma.net/v2/mpaste/pastes/s/${key}`
+			: `http://localhost:8081/v2/mpaste/pastes/s/${key}`;

-		const data = await getData(url, { password: pwd }, false);
+		const headers = pwd ? { "X-Paste-Password": pwd } : {};

-		if (!data) return;
+		try {
+			const response = await getData(url, {
+				params: null,
+				refresh: false,
+				headers,
+				silent: true,
+			});

-		setSelectedPaste(data);
-		setFormData({
-			title: data.title ?? "",
-			content: data.content ?? "",
-			syntax: data.syntax || "plaintext",
-			burnAfter: data.burnAfter || false,
-			isPrivate: data.isPrivate || false,
-			password: ""
-		});
-	};
+			if (response) {
+				setSelectedPaste(response);
+				setShowPasswordModal(false);
+				setFormData({
+					...INITIAL_FORM_DATA,
+					title: (response.title ?? "").trim() || "Sin título",
+					content: response.content ?? "",
+					syntax: response.syntax || "plaintext",
+					burnAfter: response.burnAfter || false,
+					isPrivate: response.isPrivate || false
+				});
+			}
+		} catch (error) {
+			const status = error?.status ?? error?.response?.status;
+			if (status === 403) {
+				setShowPasswordModal(true);
+				return;
+			}

-	useEffect(() => { if (pasteKey) fetchPaste(pasteKey); }, [pasteKey]);
-
-	const handleChange = (key, value) => {
-		setFormData(prev => ({ ...prev, [key]: value }));
+			if (status === 404) {
+				setShowPasswordModal(false);
+				navigate("/", { replace: true });
+			}
+		}
 	};

 	return (
@@ -110,7 +273,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 							<CodeEditor
 								className="flex-fill custom-border rounded-4 overflow-hidden pt-4 pe-4"
 								syntax={formData.syntax}
-								readOnly={!!selectedPaste}
+								readOnly={isEditorReadOnly}
 								onChange={(val) => handleChange("content", val)}
 								value={formData.content ?? ""}
 								editorErrors={editorErrors}
@@ -118,20 +281,20 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 						</Col>

 						<Col xs={12} lg={3} className="d-flex flex-column flex-fill min-h-0 overflow-hidden">
-							<div className="d-flex flex-column flex-fill gap-3 overflow-auto">
+							<div className="d-flex flex-column flex-fill gap-3 overflow-auto p-1">
 								<FloatingLabel
 									controlId="titleInput"
 									label={
-										<span className={selectedPaste ? "text-white" : ""}>
+										<span className={isReadOnly ? "text-white" : ""}>
 											<FontAwesomeIcon icon={faHeader} className="me-2" />
 											Título
 										</span>
 									}
 								>
 									<Form.Control
-										disabled={!!selectedPaste}
+										disabled={isReadOnly}
 										type="text"
-										value={formData.title}
+										value={titleValue}
 										onChange={(e) => handleChange("title", e.target.value)}
 										isInvalid={!!fieldErrors.title}
 									/>
@@ -148,7 +311,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 									}
 								>
 									<Form.Select
-										disabled={!!selectedPaste}
+										disabled={isReadOnly}
 										value={formData.syntax}
 										onChange={(e) => handleChange("syntax", e.target.value)}
 									>
@@ -184,35 +347,48 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 									</Form.Select>
 								</FloatingLabel>

+								<div className="d-flex align-items-center ms-1">
+									{connected && (isSaving ? (
+										<span className="text-muted" style={{ fontSize: '0.8rem' }}>
+											<FontAwesomeIcon icon={faCircle} className="pulse-animation me-2" style={{ color: '#ffc107', fontSize: '8px' }} />
+											Guardando cambios...
+										</span>
+									) : (
+										<span className="text-success" style={{ fontSize: '0.8rem' }}>
+											Cambios guardados
+										</span>
+									))}
+								</div>
+
 								<Form.Check
 									type="switch"
-									disabled={!!selectedPaste}
+									disabled={isReadOnly}
 									id="burnAfter"
 									label="volátil"
-									checked={formData.burnAfter}
+									checked={formData.burnAfter && !isReadOnly}
 									onChange={(e) => handleChange("burnAfter", e.target.checked)}
 									className="ms-1 d-flex gap-2 align-items-center"
 								/>

 								<Form.Check
 									type="switch"
-									disabled={!!selectedPaste}
+									disabled={isReadOnly}
 									id="isPrivate"
 									label="privado"
-									checked={formData.isPrivate}
+									checked={formData.isPrivate && !isReadOnly}
 									onChange={(e) => handleChange("isPrivate", e.target.checked)}
 									className="ms-1 d-flex gap-2 align-items-center"
 								/>

-								{formData.isPrivate && (
-									<PasswordInput onChange={(e) => handleChange("password", e.target.value)} />
+								{formData.isPrivate && !isReadOnly && (
+									<PasswordInput disabled={isReadOnly} onChange={(e) => handleChange("password", e.target.value)} />
 								)}

 								<div className="d-flex justify-content-end">
 									<Button
 										variant="primary"
 										type="submit"
-										disabled={!!selectedPaste}
+										disabled={isReadOnly}
 									>
 										Crear paste
 									</Button>
@@ -227,7 +403,7 @@ const PastePanel = ({ onSubmit, publicPastes }) => {
 				onClose={() => setShowPasswordModal(false)}
 				onSubmit={(pwd) => {
 					setShowPasswordModal(false);
-					fetchPaste(pasteKey, pwd);
+					fetchPaste(activeKey, pwd);
 				}}
 			/>
 		</>
--- a/src/components/Pastes/PublicPasteItem.jsx
+++ b/src/components/Pastes/PublicPasteItem.jsx
@@ -9,7 +9,7 @@ const trimContent = (text, maxLength = 80) => {
 const PublicPasteItem = ({ paste, onSelect }) => {
  return (
    <div className="public-paste-item p-2 mb-2 rounded custom-border" style={{ cursor: "pointer" }} onClick={() => onSelect(paste.pasteKey)}>
-      <h5 className="m-0">{paste.title}</h5>
+      <h5 className="m-0">{(paste.title ?? "").trim() || "Sin título"}</h5>
      <p className="m-0 text-truncate">{trimContent(paste.content, 100)}</p>
      <small className="custom-text-muted">
        {new Date(paste.createdAt).toLocaleString()}
--- a/src/context/ConfigContext.jsx
+++ b/src/context/ConfigContext.jsx
@@ -9,22 +9,36 @@ export const ConfigProvider = ({ children }) => {
  const [configError, setError] = useState(null);

  useEffect(() => {
+    let isMounted = true;
+
    const fetchConfig = async () => {
      try {
-        const response = import.meta.env.MODE === 'production'
-          ? await fetch("/config/settings.prod.json")
-          : await fetch("/config/settings.dev.json");
+        const settingsPath = import.meta.env.MODE === 'production'
+          ? "/config/settings.prod.json"
+          : "/config/settings.dev.json";
+
+        const response = await fetch(settingsPath);
        if (!response.ok) throw new Error("Error al cargar settings.*.json");
        const json = await response.json();
-        setConfig(json);
+        if (isMounted) {
+          setConfig(json);
+        }
      } catch (err) {
-        setError(err.message);
+        if (isMounted) {
+          setError(err.message || "Error al cargar configuración");
+        }
      } finally {
-        setLoading(false);
+        if (isMounted) {
+          setLoading(false);
+        }
      }
    };

    fetchConfig();
+
+    return () => {
+      isMounted = false;
+    };
  }, []);

  return (
--- a/src/context/DataContext.jsx
+++ b/src/context/DataContext.jsx
@@ -1,14 +1,18 @@
 import { createContext } from "react";
 import PropTypes from "prop-types";
 import { useData } from "../hooks/useData";
+import { useError } from "./ErrorContext";

 export const DataContext = createContext();

-export const DataProvider = ({ config, onError, children }) => {
-  const data = useData(config, onError);
+export const DataProvider = ({ config, children }) => {
+  const { showError } = useError();
+  // Centraliza errores HTTP para que cualquier consumidor de DataContext
+  // tenga comportamiento homogéneo sin repetir wiring en cada página.
+  const dataApi = useData(config, showError);
  
  return (
-    <DataContext.Provider value={data}>
+    <DataContext.Provider value={dataApi}>
      {children}
    </DataContext.Provider>
  );
--- a/src/context/ErrorContext.jsx
+++ b/src/context/ErrorContext.jsx
@@ -1,4 +1,4 @@
-import { createContext, useState, useContext } from 'react';
+import { createContext, useState, useContext, useCallback } from 'react';
 import NotificationModal from '../components/NotificationModal';

 const ErrorContext = createContext();
@@ -6,29 +6,28 @@ const ErrorContext = createContext();
 export const ErrorProvider = ({ children }) => {
  const [error, setError] = useState(null);

-  const showError = (err) => {
+  const showError = useCallback((err) => {
+    if (err.status === 422) return;
+
    setError({
-      title: err.status ? `Error ${err.status}` : "Error",
-      message: err.message,
-      variant: 'danger'
+      title: err.status ? `Error ${err.status}` : "Ups!",
+      message: err.message || "Algo ha salido mal miarma",
    });
-  };
+  }, []);

  const closeError = () => setError(null);

  return (
    <ErrorContext.Provider value={{ showError }}>
      {children}
-      {error && (
-        <NotificationModal
-          show={true}
-          onClose={closeError}
-          title={error.title}
-          message={error.message}
-          variant='danger'
-          buttons={[{ label: "Aceptar", variant: "danger", onClick: closeError }]}
-        />
-      )}
+      <NotificationModal
+        show={error !== null}
+        onClose={closeError}
+        title={error?.title || "Error"}
+        message={error?.message || ""}
+        variant='danger'
+        buttons={[{ label: "Entendido", variant: "danger", onClick: closeError }]}
+      />
    </ErrorContext.Provider>
  );
 };
--- a/src/css/AnimatedDropdown.css
+++ b/src/css/AnimatedDropdown.css
@@ -1,28 +0,0 @@
-.dropdown-menu .dropdown-divider {
-  border-top: 1px solid var(--divider-color);
-}
-
-.dropdown-menu {
-  background-color: var(--bg-color) !important;
-  color: var(--text-color) !important;
-}
-
-.dropdown-menu.show {
-  background-color: var(--navbar-bg) !important;
-  box-shadow: 0 5px 10px var(--shadow-color);
-}
-
-.dropdown-item {
-  background-color: var(--navbar-bg) !important;
-  color: var(--navbar-dropdown-item-color);
-  cursor: pointer;
-}
-
-.dropdown-item:hover {
-  background-color: var(--navbar-bg) !important;
-  color: var(--secondary-color) !important;
-}
-
-.disabled.text-muted {
-  color: var(--muted-color) !important;
-}
--- a/src/css/CustomCarousel.css
+++ b/src/css/CustomCarousel.css
@@ -1,11 +0,0 @@
-.carousel-img-wrapper {
-    padding: 0.5rem;
-}
-
-.carousel-img {
-    width: 100%;
-    height: auto;
-    border-radius: 1rem;
-    max-height: 60vh;
-    object-fit: cover;
-}
--- a/src/css/Footer.css
+++ b/src/css/Footer.css
@@ -1,136 +0,0 @@
-.footer {
-  background-color: var(--navbar-bg);
-  color: var(--fg-color);
-  border-top: 2px solid var(--border-color);
-  font-size: 1rem;
-  box-shadow: 0 -2px 8px var(--shadow-color);
-  position: relative;
-  z-index: 1;
-}
-
-.footer-title,
-.footer h6#devd {
-  font-family: "Product Sans";
-  font-size: 1.8rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  color: var(--primary-color);
-}
-
-.footer-columns {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  margin-bottom: 2rem;
-  background-color: var(--bg-hover-color);
-  padding: 1.5rem;
-  border-radius: 1rem;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
-}
-
-@media (min-width: 768px) {
-  .footer-columns {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-  }
-}
-
-.footer-column {
-  flex: 1;
-  min-width: 200px;
-}
-
-.footer-column h5 {
-  font-size: 1.1rem;
-  margin-bottom: 0.75rem;
-  font-weight: 600;
-  color: var(--fg-color);
-}
-
-.footer-column ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-column ul li {
-  margin-bottom: 0.5rem;
-}
-
-.footer-column ul li a {
-  color: var(--fg-color);
-  text-decoration: none;
-  
-}
-
-.footer-column ul li a:hover {
-  color: var(--primary-color);
-  text-shadow: 0 0 4px currentColor;
-}
-
-.footer-bottom {
-  font-size: 0.9rem;
-  opacity: 0.85;
-  text-align: center;
-  border-top: 1px solid var(--divider-color);
-}
-
-.footer-bottom a {
-  font-weight: 600;
-  text-decoration: none;
-  color: var(--fg-color);
-  
-}
-
-.footer-bottom a:hover {
-  text-shadow: 0 0 5px currentColor;
-  color: var(--primary-color);
-}
-
-.contact-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
-  border-radius: 1rem;
-  font-size: 0.95rem;
-  background-color: var(--contact-info-bg);
-  color: var(--primary-color);
-  box-shadow: 0 4px 10px var(--shadow-color);
-  
-}
-
-.contact-info a {
-  font-weight: 600;
-  text-decoration: none;
-  color: var(--primary-color);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  
-}
-
-.contact-info a:hover {
-  transform: translateX(8px);
-  color: var(--secondary-color);
-}
-
-.contact-info .fa-icon {
-  font-size: 1.2rem;
-  color: var(--primary-color);
-}
-
-.heart-anim {
-  display: inline-block;
-  animation: heartbeat 1.5s infinite ease-in-out;
-}
-
-@keyframes heartbeat {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.15);
-  }
-}
--- a/src/css/Header.css
+++ b/src/css/Header.css
@@ -1,43 +0,0 @@
-/* ================================
-   HEADER - ESTILO BASE
-================================== */
-
-.bg-img {
-  background-image: url('/images/bg.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-/*.mask {
-  background-color: var(--header-mask-color);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  
-}
-*/
-
-.header-title {
-  font-family: 'Product Sans';
-  font-size: 3em;
-  font-weight: bolder;
-  color: var(--text-color);
-  
-}
-
-.shadowed {
-  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-}
-
-
-/* ================================
-     RESPONSIVE HEADER TITLE
-================================== */
-
-@media (max-width: 768px) {
-  .header-title {
-    font-size: 2em;
-    padding: 0 1rem;
-    text-align: center;
-  }
-}
--- a/src/css/LoginForm.css
+++ b/src/css/LoginForm.css
@@ -1,53 +0,0 @@
-/* ================================
-   LOGIN - CARD CONTAINER (VISUAL)
-================================== */
-
-.login-card {
-  background-color: var(--login-bg) !important;
-  color: var(--text-color);
-  box-shadow: 0 0 10px var(--shadow-color);
-  
-}
-
-/* ================================
-     INPUTS VISUALES
-  ================================== */
-
-input.form-control {
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  border: 1px solid var(--input-border);
-  
-}
-
-/* ================================
-     LABELS PERSONALIZADAS
-  ================================== */
-
-.form-floating>label {
-  font-family: 'Product Sans';
-  font-size: 1.1em;
-  color: var(--label-color);
-}
-
-.form-floating>label::after {
-  background-color: transparent !important;
-}
-
-/* ================================
-     BOTÓN VISUAL
-  ================================== */
-
-.login-button {
-  font-family: 'Product Sans' !important;
-  font-size: 1.3em !important;
-  font-weight: bold !important;
-  background-color: var(--login-btn-bg) !important;
-  color: var(--login-btn-text) !important;
-  
-}
-
-.login-button:hover {
-  background-color: var(--login-btn-hover) !important;
-  color: var(--login-btn-text-hover) !important;
-}
--- a/src/css/NavBar.css
+++ b/src/css/NavBar.css
@@ -63,3 +63,21 @@ hr {
  }
 }

+@keyframes pulse-green {
+  0% {
+    transform: scale(0.95);
+    filter: drop-shadow(0 0 0px rgba(40, 167, 69, 0.7));
+  }
+  70% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 6px rgba(40, 167, 69, 0.4));
+  }
+  100% {
+    transform: scale(0.95);
+    filter: drop-shadow(0 0 0px rgba(40, 167, 69, 0));
+  }
+}
+
+.pulse-animation {
+  animation: pulse-green 2s infinite;
+}
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -221,11 +221,11 @@ html, body, #root {
 }

 /* Tipografía global */
-div,
+div:not(.monaco-editor *),
+span:not(.monaco-editor *),
 label,
 input,
 p,
-span,
 a,
 button {
  font-family: "Open Sans", sans-serif;
--- a/src/hooks/useAuth.js
+++ b/src/hooks/useAuth.js
@@ -1,4 +1,12 @@
 import { useContext } from "react";
 import { AuthContext } from "@/context/AuthContext";

-export const useAuth = () => useContext(AuthContext);
+export const useAuth = () => {
+	const authContext = useContext(AuthContext);
+
+	if (!authContext) {
+		throw new Error("useAuth debe usarse dentro de AuthProvider");
+	}
+
+	return authContext;
+};
--- a/src/hooks/useConfig.js
+++ b/src/hooks/useConfig.js
@@ -1,4 +1,12 @@
 import { useContext } from "react";
 import { ConfigContext } from "@/context/ConfigContext.jsx";

-export const useConfig = () => useContext(ConfigContext);
+export const useConfig = () => {
+	const configContext = useContext(ConfigContext);
+
+	if (!configContext) {
+		throw new Error("useConfig debe usarse dentro de ConfigProvider");
+	}
+
+	return configContext;
+};
--- a/src/hooks/useData.js
+++ b/src/hooks/useData.js
@@ -1,140 +1,150 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback } from "react";
 import axios from "axios";

 export const useData = (config, onError) => {
  const [data, setData] = useState(null);
  const [dataLoading, setLoading] = useState(true);
  const [dataError, setError] = useState(null);
-  const configRef = useRef();
-
-  useEffect(() => {
-    if (config?.baseUrl) {
-      configRef.current = config;
-    }
-  }, [config]);

  const getAuthHeaders = (isFormData = false) => {
    const token = localStorage.getItem("token");
-
    const headers = {};
    if (token) headers.Authorization = `Bearer ${token}`;
-
-    if (!isFormData) {
-      headers["Content-Type"] = "application/json";
-    }
-
+    if (!isFormData) headers["Content-Type"] = "application/json";
    return headers;
  };

  const handleAxiosError = (err) => {
-    if (err.response && err.response.data) {
-      const data = err.response.data;
-
-      if (data.status === 422 && data.errors) {
-        return {
-          status: 422,
-          errors: data.errors,
-          path: data.path ?? null,
-          timestamp: data.timestamp ?? null,
-        };
-      }
-
-      return {
-        status: data.status ?? err.response.status,
-        error: data.error ?? null,
-        message: data.message ?? err.response.statusText ?? "Error desconocido",
-        path: data.path ?? null,
-        timestamp: data.timestamp ?? null,
-      };
-    }
-
-    if (err.request) {
-      return {
-        status: null,
-        error: "Network Error",
-        message: "No se pudo conectar al servidor",
-        path: null,
-        timestamp: new Date().toISOString(),
-      };
-    }
-
    return {
-      status: null,
-      error: "Client Error",
-      message: err.message || "Error desconocido",
-      path: null,
-      timestamp: new Date().toISOString(),
+      status: err.response?.status || (err.request ? "Network Error" : "Client Error"),
+      message: err.response?.data?.message || err.message || "Error desconocido",
+      errors: err.response?.data?.errors || null
    };
  };

+  const isExpectedPasteLookupError = (baseUrl, status) => {
+    const isPasteLookup = baseUrl?.includes("/pastes/");
+    return isPasteLookup && [403, 404, 500].includes(status);
+  };
+
+  // Carga inicial ligada al `config` del contexto.
+  // En lookup de pastes, algunos estados son esperados y no deben disparar error global.
  const fetchData = useCallback(async () => {
-    const current = configRef.current;
-    if (!current?.baseUrl) return;
+    if (!config?.baseUrl) return;

    setLoading(true);
    setError(null);

    try {
-      const response = await axios.get(current.baseUrl, {
+      const response = await axios.get(config.baseUrl, {
        headers: getAuthHeaders(),
-        params: current.params,
+        params: config.params,
      });
      setData(response.data);
    } catch (err) {
      const error = handleAxiosError(err);
+      if (!isExpectedPasteLookupError(config.baseUrl, error.status) && onError) onError(error);
      setError(error);
    } finally {
      setLoading(false);
    }
-  }, []);
+  }, [config?.baseUrl, config?.params, onError]);

  useEffect(() => {
-    if (config?.baseUrl) fetchData();
-  }, [config, fetchData]);
+    fetchData();
+  }, [fetchData]);

-  const requestWrapper = async (method, endpoint, payload = null, refresh = false) => {
+  // Wrapper único para peticiones CRUD.
+  // Usa objeto de opciones para mantener llamadas claras y evitar errores por orden de argumentos.
+  const requestWrapper = async (method, endpoint, {
+    payload = null,
+    refresh = false,
+    extraHeaders = {},
+    silent = false,
+  } = {}) => {
    try {
      const isFormData = payload instanceof FormData;
-      const headers = getAuthHeaders(isFormData);
-      const cfg = { headers };
-      let response;

+      const combinedHeaders = {
+        ...getAuthHeaders(isFormData),
+        ...extraHeaders
+      };
+
+      const axiosConfig = {
+        headers: combinedHeaders
+      };
+
+      let response;
      if (method === "get") {
-        if (payload) cfg.params = payload;
-        response = await axios.get(endpoint, cfg);
+        response = await axios.get(endpoint, {
+          ...axiosConfig,
+          params: payload
+        });
      } else if (method === "delete") {
-        if (payload) cfg.data = payload;
-        response = await axios.delete(endpoint, cfg);
+        response = await axios.delete(endpoint, {
+          ...axiosConfig,
+          data: payload
+        });
      } else {
-        response = await axios[method](endpoint, payload, cfg);
+        response = await axios[method](endpoint, payload, axiosConfig);
      }

      if (refresh) await fetchData();
      return response.data;
-
    } catch (err) {
      const error = handleAxiosError(err);
-
-      if (error.status !== 422 && onError) {
+      if (!silent && error.status !== 422 && onError) {
        onError(error);
      }
-
-      setError(error);
      throw error;
    }
  };

-  const clearError = () => setError(null);
-
  return {
-    data,
-    dataLoading,
-    dataError,
-    clearError,
-    getData: (url, params, refresh = true) => requestWrapper("get", url, params, refresh),
-    postData: (url, body, refresh = true) => requestWrapper("post", url, body, refresh),
-    putData: (url, body, refresh = true) => requestWrapper("put", url, body, refresh),
-    deleteData: (url, refresh = true) => requestWrapper("delete", url, null, refresh),
-    deleteDataWithBody: (url, body, refresh = true) => requestWrapper("delete", url, body, refresh)
+    data, dataLoading, dataError,
+    getData: (url, paramsOrOptions, refresh = true, h = {}, silent = false) => {
+      const isOptionsObject =
+        paramsOrOptions &&
+        typeof paramsOrOptions === "object" &&
+        !Array.isArray(paramsOrOptions) &&
+        ("params" in paramsOrOptions || "refresh" in paramsOrOptions || "headers" in paramsOrOptions || "silent" in paramsOrOptions);
+
+      if (isOptionsObject) {
+        const {
+          params = null,
+          refresh: optionsRefresh = true,
+          headers = {},
+          silent: optionsSilent = false,
+        } = paramsOrOptions;
+
+        return requestWrapper("get", url, {
+          payload: params,
+          refresh: optionsRefresh,
+          extraHeaders: headers,
+          silent: optionsSilent,
+        });
+      }
+
+      return requestWrapper("get", url, {
+        payload: paramsOrOptions,
+        refresh,
+        extraHeaders: h,
+        silent,
+      });
+    },
+    postData: (url, body, refresh = true, silent = false) => requestWrapper("post", url, {
+      payload: body,
+      refresh,
+      silent,
+    }),
+    putData: (url, body, refresh = true, silent = false) => requestWrapper("put", url, {
+      payload: body,
+      refresh,
+      silent,
+    }),
+    deleteData: (url, refresh = true, silent = false) => requestWrapper("delete", url, {
+      refresh,
+      silent,
+    }),
  };
 };
--- a/src/hooks/useSessionRenewal.jsx
+++ b/src/hooks/useSessionRenewal.jsx
@@ -1,103 +0,0 @@
-import { useEffect, useState } from "react";
-import { parseJwt } from "../util/tokenUtils.js";
-import NotificationModal from "../components/NotificationModal.jsx";
-import axios from "axios";
-import { useAuth } from "./useAuth.js";
-import { useConfig } from "./useConfig.js";
-
-const useSessionRenewal = () => {
-  const { logout } = useAuth();
-  const { config } = useConfig();
-
-  const [showModal, setShowModal] = useState(false);
-  const [alreadyWarned, setAlreadyWarned] = useState(false);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const token = localStorage.getItem("token");
-      const decoded = parseJwt(token);
-
-      if (!token || !decoded?.exp) return;
-
-      const now = Date.now();
-      const expTime = decoded.exp * 1000;
-      const timeLeft = expTime - now;
-
-      if (timeLeft <= 60000 && timeLeft > 0 && !alreadyWarned) {
-        setShowModal(true);
-        setAlreadyWarned(true);
-      }
-
-      if (timeLeft <= 0) {
-        clearInterval(interval);
-        logout();
-      }
-    }, 10000); // revisa cada 10 segundos
-
-    return () => clearInterval(interval);
-  }, [alreadyWarned, logout]);
-
-  const handleRenew = async () => {
-    const token = localStorage.getItem("token");
-    const decoded = parseJwt(token);
-    const now = Date.now();
-    const expTime = decoded?.exp * 1000;
-
-    if (!token || !decoded || now > expTime) {
-      logout();
-      return;
-    }
-
-    try {
-      const response = await axios.get(
-        `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.auth.refreshToken}`,
-        null,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
-
-      const newToken = response.data.data.token;
-      localStorage.setItem("token", newToken);
-      setShowModal(false);
-      setAlreadyWarned(false);
-    } catch (err) {
-      console.error("Error renovando sesión:", err);
-      logout();
-    }
-  };
-
-  const modal = showModal && (
-    <NotificationModal
-      show={true}
-      onClose={() => {
-        setShowModal(false);
-        logout();
-      }}
-      title="¿Quieres seguir conectado?"
-      message="Tu sesión está a punto de expirar. ¿Quieres renovarla 1 hora más?"
-      variant="info"
-      buttons={[
-        {
-          label: "Renovar sesión",
-          variant: "success",
-          onClick: handleRenew,
-        },
-        {
-          label: "Cerrar sesión",
-          variant: "danger",
-          onClick: () => {
-            logout();
-            setShowModal(false);
-          },
-        },
-      ]}
-    />
-  );
-
-  return { modal };
-};
-
-export default useSessionRenewal;
--- a/src/pages/Building.jsx
+++ b/src/pages/Building.jsx
@@ -1,17 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import '@/css/Building.css';
-
-export default function Building() {
-  const location = useLocation();
-
-  if (location.pathname === '/') return null;
-
-  return (
-    <div className="building-container d-flex flex-column align-items-center justify-content-center text-center py-5 px-3">
-      <div className="building-icon">🚧</div>
-      <div className="building-title">Esta página está en construcción</div>
-      <div className="building-subtitle">Estamos trabajando para traértela pronto</div>
-    </div>
-
-  );
-}
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -3,74 +3,98 @@ import PastePanel from '@/components/Pastes/PastePanel';
 import { useConfig } from '@/hooks/useConfig';
 import LoadingIcon from '@/components/LoadingIcon';
 import { useDataContext } from '@/hooks/useDataContext';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { DataProvider } from '@/context/DataContext';
 import NotificationModal from '@/components/NotificationModal';
 import { useSearch } from "@/context/SearchContext";
-import { useError } from '@/context/ErrorContext';
+import { useLocation, useParams } from 'react-router-dom';

-const Home = () => {
+const Home = ({ mode, onConnectChange }) => {
+  const { pasteKey, rtKey } = useParams();
  const { config, configLoading } = useConfig();
-  const { showError } = useError();
+  const location = useLocation();
+  const isStaticMode = mode === 'static';

-  if (configLoading) return <p><LoadingIcon /></p>;
+  const currentKey = isStaticMode ? pasteKey : rtKey;

-  const reqConfig = {
-    baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.pastes.all}`,
-    params: {}
-  };
+  const requestConfig = useMemo(() => {
+    if (!config?.apiConfig?.baseUrl) return null;
+
+    const baseApi = `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.pastes.all}`;
+
+    return {
+      baseUrl: baseApi,
+      params: {}
+    };
+  }, [config]);
+
+  if (configLoading) return <p className="text-center mt-5"><LoadingIcon /></p>;

  return (
-    <DataProvider config={reqConfig} onError={showError}>
-      <HomeContent reqConfig={reqConfig} />
+    <DataProvider key={location.key} config={requestConfig}>
+      <HomeContent requestConfig={requestConfig} mode={mode} pasteKey={currentKey} onConnectChange={onConnectChange} />
    </DataProvider>
  );
 };

-const HomeContent = ({ reqConfig }) => {
-  const { data, dataLoading, dataError, postData } = useDataContext();
-  const [error, setError] = useState(null);
-  const [key, setKey] = useState(null);
+const HomeContent = ({ requestConfig, mode, pasteKey, onConnectChange }) => {
+  const { data, dataLoading, postData } = useDataContext();
+  const [createdKey, setCreatedKey] = useState(null);
  const { searchTerm } = useSearch();
+  const isStaticMode = mode === 'static';

-  if (dataLoading) return <p><LoadingIcon /></p>;
-  if (dataError) return <p>Error loading data</p>;
+  const filteredPublicPastes = useMemo(() => {
+    if (!Array.isArray(data)) return [];
+    const normalizedSearchTerm = (searchTerm ?? "").toLowerCase();
+    return data.filter((paste) => (paste.title ?? "").toLowerCase().includes(normalizedSearchTerm));
+  }, [data, searchTerm]);

-  const filtered = data.filter(paste =>
-    paste.title.toLowerCase().includes((searchTerm ?? "").toLowerCase()) ||
-    paste.content.toLowerCase().includes((searchTerm ?? "").toLowerCase())
-  );
+  if (isStaticMode && dataLoading) return <p className="text-center mt-5"><LoadingIcon /></p>;

-  const handleSubmit = async (paste) => {
+  const handleSubmit = async (paste, isAutosave = false) => {
    try {
-      const createdPaste = await postData(reqConfig.baseUrl, paste);
-      if (createdPaste && createdPaste.isPrivate) {
-        setKey(createdPaste.pasteKey);
+      const createdPaste = await postData(requestConfig.baseUrl, paste);
+      if (!isAutosave && createdPaste && !paste.pasteKey) {
+        setCreatedKey(createdPaste.pasteKey);
      }
    } catch (error) {
-      setError(error);
+      console.error("Error:", error);
    }
  };

  return (
    <>
-      <PastePanel onSubmit={handleSubmit} publicPastes={filtered} />
+      <PastePanel
+        onSubmit={handleSubmit}
+        publicPastes={filteredPublicPastes}
+        mode={mode}
+        pasteKey={pasteKey}
+        onConnectChange={onConnectChange}
+      />
+
      <NotificationModal
-        show={key !== null}
-        onClose={() => setKey(null)}
-        title="Link a tu paste privado"
+        show={createdKey !== null}
+        onClose={() => setCreatedKey(null)}
+        title="¡Bomba! Paste creado"
        message={
          <span>
-            Tu paste privado ha sido creado. Puedes acceder a él mediante el siguiente enlace:
+            Tu paste se ha guardado correctamente. Puedes compartirlo con este enlace:
            <br /><br />
-            <a href={`https://paste.miarma.net/${key}`}>https://paste.miarma.net/${key}</a>
+            <a
+              href={`https://paste.miarma.net/s/${createdKey}`}
+              target="_blank"
+              rel="noreferrer"
+              className="text-primary font-weight-bold"
+            >
+              https://paste.miarma.net/s/{createdKey}
+            </a>
            <br /><br />
-            Recuerda que este enlace es único y no se puede recuperar si se pierde.
+            {mode === 'rt' && "Nota: Al guardarlo, se ha creado una copia estática permanente."}
          </span>
        }
-        variant=""
+        variant="success"
        buttons={[
-          { label: "Cerrar", variant: "secondary", onClick: () => setKey(null) }
+          { label: "Cerrar", variant: "secondary", onClick: () => setCreatedKey(null) }
        ]}
      />
    </>
--- a/src/util/alertHelpers.jsx
+++ b/src/util/alertHelpers.jsx
@@ -1,15 +0,0 @@
-export const renderErrorAlert = (error, options = {}) => {
-    const { className = 'alert alert-danger alert-dismissible py-1 px-2 small', role = 'alert' } = options;
-
-    if (!error) return null;
-
-    return (
-        <div className={className} role={role}>
-            {typeof error === 'string' ? error : 'An unexpected error occurred.'}
-        </div>
-    );
-};
-
-export const resetErrorIfEditEnds = (editMode, setError) => {
-    if (!editMode) setError(null);
-};
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -1,7 +0,0 @@
-'use strict';
-
-const CONSTANTS = {
-  
-};
-
-export { CONSTANTS };
--- a/src/util/date.js
+++ b/src/util/date.js
@@ -1,10 +0,0 @@
-'use strict';
-
-const getNowAsLocalDatetime = () => {
-    const now = new Date();
-    const offset = now.getTimezoneOffset(); // en minutos
-    const local = new Date(now.getTime() - offset * 60000);
-    return local.toISOString().slice(0, 16);
-};
-
-export { getNowAsLocalDatetime }
--- a/src/util/parsers/dateParser.js
+++ b/src/util/parsers/dateParser.js
@@ -1,30 +0,0 @@
-export const DateParser = {
-    sqlToString: (sqlDate) => {
-        const [datePart] = sqlDate.split('T');
-        const [year, month, day] = datePart.split('-');
-        return `${day}/${month}/${year}`;
-    },
-
-    timestampToString: (timestamp) => {
-        const [datePart] = timestamp.split('T');
-        const [year, month, day] = datePart.split('-');
-        return `${day}/${month}/${year}`;
-    },
-
-    isoToStringWithTime: (isoString) => {
-      if (!isoString) return '—';
-      
-      const date = new Date(isoString);
-      if (isNaN(date)) return '—'; // Para proteger aún más por si llega basura
-    
-      return new Intl.DateTimeFormat('es-ES', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false,
-        timeZone: 'Europe/Madrid'
-      }).format(date);
-    }    
-};
--- a/src/util/parsers/errorParser.js
+++ b/src/util/parsers/errorParser.js
@@ -1,10 +0,0 @@
-export const errorParser = (err) => {
-  const message = err.response?.data?.message;
-  try {
-    const parsed = JSON.parse(message);
-    return Object.values(parsed)[0];
-  // eslint-disable-next-line no-unused-vars
-  } catch (e) {
-    return message || err.message || "Unknown error";
-  }
-};
--- a/src/util/passwordGenerator.js
+++ b/src/util/passwordGenerator.js
@@ -1,29 +0,0 @@
-export const generateSecurePassword = (length = 12) => {
-    const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    const lower = 'abcdefghijklmnopqrstuvwxyz';
-    const digits = '0123456789';
-    const symbols = '!@#$%^&*'; // <- compatibles con bcrypt
-    const all = upper + lower + digits + symbols;
-
-    if (length < 8) length = 8;
-
-    const getRand = (chars) => chars[Math.floor(Math.random() * chars.length)];
-
-    let password = [
-        getRand(upper),
-        getRand(lower),
-        getRand(digits),
-        getRand(symbols),
-    ];
-
-    for (let i = password.length; i < length; i++) {
-        password.push(getRand(all));
-    }
-
-    for (let i = password.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [password[i], password[j]] = [password[j], password[i]];
-    }
-
-    return password.join('');
-};
--- a/src/util/tokenUtils.js
+++ b/src/util/tokenUtils.js
@@ -1,7 +0,0 @@
-export const parseJwt = (token) => {
-    try {
-        return JSON.parse(atob(token.split('.')[1]));
-    } catch (e) {
-        return null;
-    }
-};
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,4 +14,22 @@ export default defineConfig({
      '@': path.resolve(__dirname, './src'),
    },
  },
+  define: {
+    global: 'window'
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('monaco-editor')) {
+              return 'monaco';
+            }
+            return 'vendor';
+          }
+        }
+      }
+    },
+    chunkSizeWarningLimit: 1500,
+  }
 })
Author	SHA1	Message	Date
Jose	3a848b3f56	refactor: improve read-only logic and title handling in PastePanel	2026-03-17 18:22:59 +01:00
Jose	d9eb92300a	fix: font problem	2026-03-17 18:05:01 +01:00
Jose	bf40b235f0	refactor: remove unused components and styles; consolidate password handling in new components - Deleted ProtectedRoute, ContentWrapper, CustomCarousel, CustomContainer, CustomModal, Footer, Header, and Building components as they were no longer needed. - Removed associated CSS files for the deleted components. - Introduced PasswordInput and PasswordModal components to handle password input and modal display for protected pastes. - Updated PastePanel to utilize new PasswordInput and PasswordModal components for better password management. - Refactored Home component to streamline data fetching and improve readability. - Enhanced error handling in useData hook and improved session management logic.	2026-03-17 03:57:47 +01:00
Jose	fcd477e876	Improve: enhance real-time paste handling and add saving status feedback	2026-03-17 03:08:38 +01:00
Jose	924f9626a6	feat: add real-time collaboration features with STOMP and SockJS - Added @stomp/stompjs and sockjs-client dependencies for WebSocket communication. - Updated routing for pastes to include new endpoint structure. - Implemented real-time editing in PastePanel using STOMP for collaborative editing. - Introduced NotificationModal for experimental mode warnings. - Enhanced NavBar to display connection status. - Refactored Home and PastePanel components to support new features and improve user experience. - Updated error handling in DataContext to utilize ErrorContext for better error management. - Added CSS animations for connection status indication.	2026-03-17 02:25:59 +01:00
Jose	f29d82f311	Improve: error handling and data fetching in PastePanel and useData hooks	2026-03-16 01:20:01 +01:00