Compare commits
9 Commits
release-20
...
release-20
| Author | SHA1 | Date | |
|---|---|---|---|
|
40c9f66e5c | ||
|
|
93e853977a | ||
|
|
e3bc956256 | ||
|
|
5b016aca58 | ||
|
|
5bd3d31dd6 | ||
|
|
87ddd3bb93 | ||
|
|
463249982c | ||
|
|
9447a66cc1 | ||
|
|
45247a020e |
16
Cargo.lock
generated
16
Cargo.lock
generated
@@ -1274,6 +1274,7 @@ dependencies = [
|
|||||||
"leptos-shadcn-scroll-area",
|
"leptos-shadcn-scroll-area",
|
||||||
"leptos-shadcn-separator",
|
"leptos-shadcn-separator",
|
||||||
"leptos-shadcn-sheet",
|
"leptos-shadcn-sheet",
|
||||||
|
"leptos-shadcn-skeleton",
|
||||||
"leptos-shadcn-tabs",
|
"leptos-shadcn-tabs",
|
||||||
"leptos-shadcn-toast",
|
"leptos-shadcn-toast",
|
||||||
"leptos-shadcn-tooltip",
|
"leptos-shadcn-tooltip",
|
||||||
@@ -2390,6 +2391,21 @@ dependencies = [
|
|||||||
"thiserror 1.0.69",
|
"thiserror 1.0.69",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "leptos-shadcn-skeleton"
|
||||||
|
version = "0.8.1"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "6c14b6bd0f2fe191e3e114a34cee889fc983546ad488e76e76511e3d75ea3f86"
|
||||||
|
dependencies = [
|
||||||
|
"leptos",
|
||||||
|
"leptos-node-ref",
|
||||||
|
"leptos-shadcn-signal-management",
|
||||||
|
"leptos-struct-component",
|
||||||
|
"leptos-style",
|
||||||
|
"tailwind_fuse",
|
||||||
|
"web-sys",
|
||||||
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "leptos-shadcn-tabs"
|
name = "leptos-shadcn-tabs"
|
||||||
version = "0.8.1"
|
version = "0.8.1"
|
||||||
|
|||||||
1
frontend/.gitignore
vendored
Normal file
1
frontend/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
node_modules/
|
||||||
@@ -52,3 +52,4 @@ leptos-shadcn-alert = "0.8"
|
|||||||
leptos-shadcn-toast = "0.8"
|
leptos-shadcn-toast = "0.8"
|
||||||
leptos-shadcn-dropdown-menu = "0.8"
|
leptos-shadcn-dropdown-menu = "0.8"
|
||||||
leptos-shadcn-tooltip = "0.8"
|
leptos-shadcn-tooltip = "0.8"
|
||||||
|
leptos-shadcn-skeleton = "0.8"
|
||||||
@@ -1,101 +1,102 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
|
||||||
/>
|
|
||||||
<title>VibeTorrent</title>
|
|
||||||
|
|
||||||
<!-- PWA & Mobile Capable -->
|
<head>
|
||||||
<meta name="mobile-web-app-capable" content="yes" />
|
<meta charset="utf-8" />
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="viewport"
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||||
<meta name="apple-mobile-web-app-title" content="VibeTorrent" />
|
<title>VibeTorrent</title>
|
||||||
<meta name="theme-color" content="#111827" />
|
|
||||||
<link rel="manifest" href="manifest.json" />
|
|
||||||
<link rel="icon" type="image/png" href="icon-192.png" />
|
|
||||||
<link rel="apple-touch-icon" href="icon-192.png" />
|
|
||||||
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
|
|
||||||
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
|
||||||
|
|
||||||
<!-- Trunk Assets -->
|
<!-- PWA & Mobile Capable -->
|
||||||
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
<link data-trunk rel="css" href="public/tailwind.css" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<link data-trunk rel="copy-file" href="manifest.json" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<link data-trunk rel="copy-file" href="icon-192.png" />
|
<meta name="apple-mobile-web-app-title" content="VibeTorrent" />
|
||||||
<link data-trunk rel="copy-file" href="icon-512.png" />
|
<meta name="theme-color" content="#111827" />
|
||||||
<link data-trunk rel="copy-file" href="sw.js" />
|
<link rel="manifest" href="manifest.json" />
|
||||||
<script>
|
<link rel="icon" type="image/png" href="icon-192.png" />
|
||||||
(function () {
|
<link rel="apple-touch-icon" href="icon-192.png" />
|
||||||
var localTheme = localStorage.getItem("vibetorrent_theme");
|
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
|
||||||
var t = localTheme || "dark";
|
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
||||||
if (t === "Amoled") t = "black";
|
|
||||||
if (t === "Light") t = "light";
|
|
||||||
if (t === "Dark" || t === "Midnight") t = "dark";
|
|
||||||
|
|
||||||
var theme = t.toLowerCase();
|
<!-- Trunk Assets -->
|
||||||
document.documentElement.setAttribute("data-theme", theme);
|
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
|
||||||
if (!localTheme) {
|
<link data-trunk rel="css" href="public/tailwind.css" />
|
||||||
localStorage.setItem("vibetorrent_theme", "dark");
|
<link data-trunk rel="copy-file" href="manifest.json" />
|
||||||
}
|
<link data-trunk rel="copy-file" href="icon-192.png" />
|
||||||
|
<link data-trunk rel="copy-file" href="icon-512.png" />
|
||||||
|
<link data-trunk rel="copy-file" href="sw.js" />
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var localTheme = localStorage.getItem("vibetorrent_theme");
|
||||||
|
var t = localTheme || "dark";
|
||||||
|
if (t === "Amoled") t = "black";
|
||||||
|
if (t === "Light") t = "light";
|
||||||
|
if (t === "Dark" || t === "Midnight") t = "dark";
|
||||||
|
|
||||||
var meta = document.querySelector('meta[name="theme-color"]');
|
var theme = t.toLowerCase();
|
||||||
if (meta) {
|
document.documentElement.setAttribute("data-theme", theme);
|
||||||
var colorMap = {
|
// Shadcn dark mode CSS değişkenleri .dark class ile çalışıyor
|
||||||
light: "#ffffff",
|
var darkThemes = ["dark", "black", "night", "coffee", "luxury", "business", "dracula", "halloween", "forest", "synthwave", "dim", "nord", "sunset", "cyberpunk", "abyss"];
|
||||||
cupcake: "#faf7f5",
|
if (darkThemes.indexOf(theme) !== -1) {
|
||||||
bumblebee: "#ffffff",
|
document.documentElement.classList.add("dark");
|
||||||
emerald: "#ffffff",
|
} else {
|
||||||
corporate: "#ffffff",
|
document.documentElement.classList.remove("dark");
|
||||||
synthwave: "#2d1b69",
|
}
|
||||||
retro: "#ece3ca",
|
if (!localTheme) {
|
||||||
cyberpunk: "#ffee00",
|
localStorage.setItem("vibetorrent_theme", "dark");
|
||||||
valentine: "#f0d6e8",
|
}
|
||||||
halloween: "#212121",
|
|
||||||
garden: "#e9e7e7",
|
|
||||||
forest: "#171212",
|
|
||||||
aqua: "#345da7",
|
|
||||||
lofi: "#ffffff",
|
|
||||||
pastel: "#ffffff",
|
|
||||||
fantasy: "#ffffff",
|
|
||||||
wireframe: "#ffffff",
|
|
||||||
black: "#000000",
|
|
||||||
luxury: "#09090b",
|
|
||||||
dracula: "#282a36",
|
|
||||||
cmyk: "#ffffff",
|
|
||||||
autumn: "#8C0327",
|
|
||||||
business: "#202020",
|
|
||||||
acid: "#fafafa",
|
|
||||||
lemonade: "#F1F8E8",
|
|
||||||
night: "#0f1729",
|
|
||||||
coffee: "#20161f",
|
|
||||||
winter: "#ffffff",
|
|
||||||
dark: "#1d232a",
|
|
||||||
};
|
|
||||||
var color = colorMap[theme] || "#1d232a";
|
|
||||||
meta.setAttribute("content", color);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body style="cursor: pointer;">
|
var meta = document.querySelector('meta[name="theme-color"]');
|
||||||
<div
|
if (meta) {
|
||||||
id="app-loading"
|
var colorMap = {
|
||||||
style="
|
light: "#ffffff",
|
||||||
|
cupcake: "#faf7f5",
|
||||||
|
bumblebee: "#ffffff",
|
||||||
|
emerald: "#ffffff",
|
||||||
|
corporate: "#ffffff",
|
||||||
|
synthwave: "#2d1b69",
|
||||||
|
retro: "#ece3ca",
|
||||||
|
cyberpunk: "#ffee00",
|
||||||
|
valentine: "#f0d6e8",
|
||||||
|
halloween: "#212121",
|
||||||
|
garden: "#e9e7e7",
|
||||||
|
forest: "#171212",
|
||||||
|
aqua: "#345da7",
|
||||||
|
lofi: "#ffffff",
|
||||||
|
pastel: "#ffffff",
|
||||||
|
fantasy: "#ffffff",
|
||||||
|
wireframe: "#ffffff",
|
||||||
|
black: "#000000",
|
||||||
|
luxury: "#09090b",
|
||||||
|
dracula: "#282a36",
|
||||||
|
cmyk: "#ffffff",
|
||||||
|
autumn: "#8C0327",
|
||||||
|
business: "#202020",
|
||||||
|
acid: "#fafafa",
|
||||||
|
lemonade: "#F1F8E8",
|
||||||
|
night: "#0f1729",
|
||||||
|
coffee: "#20161f",
|
||||||
|
winter: "#ffffff",
|
||||||
|
dark: "#1d232a",
|
||||||
|
};
|
||||||
|
var color = colorMap[theme] || "#1d232a";
|
||||||
|
meta.setAttribute("content", color);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="cursor: pointer;">
|
||||||
|
<div id="app-loading" style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
"
|
">
|
||||||
>
|
<div id="app-loading-spinner" style="
|
||||||
<div
|
|
||||||
id="app-loading-spinner"
|
|
||||||
style="
|
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 3px solid currentColor;
|
border: 3px solid currentColor;
|
||||||
@@ -103,21 +104,15 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 0.8s linear infinite;
|
animation: spin 0.8s linear infinite;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
"
|
"></div>
|
||||||
></div>
|
<div id="app-loading-error" style="display: none; text-align: center; margin-top: 20px; padding: 0 20px">
|
||||||
<div
|
<p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
|
||||||
id="app-loading-error"
|
Uygulama yüklenemedi
|
||||||
style="display: none; text-align: center; margin-top: 20px; padding: 0 20px"
|
</p>
|
||||||
>
|
<p style="font-size: 14px; opacity: 0.7">
|
||||||
<p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
|
Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
|
||||||
Uygulama yüklenemedi
|
</p>
|
||||||
</p>
|
<button onclick="location.reload()" style="
|
||||||
<p style="font-size: 14px; opacity: 0.7">
|
|
||||||
Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onclick="location.reload()"
|
|
||||||
style="
|
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
background: #3b82f6;
|
background: #3b82f6;
|
||||||
@@ -126,104 +121,105 @@
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
"
|
">
|
||||||
>
|
Sayfayı Yenile
|
||||||
Sayfayı Yenile
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<style>
|
</div>
|
||||||
@keyframes spin {
|
<style>
|
||||||
to {
|
@keyframes spin {
|
||||||
transform: rotate(360deg);
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.app-loaded #app-loading {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iOS Safari Click Fixes */
|
||||||
|
body {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// App loading timeout handler
|
||||||
|
(function () {
|
||||||
|
var timeout = setTimeout(function () {
|
||||||
|
if (!document.body.classList.contains("app-loaded")) {
|
||||||
|
var spinner = document.getElementById("app-loading-spinner");
|
||||||
|
var error = document.getElementById("app-loading-error");
|
||||||
|
if (spinner) spinner.style.display = "none";
|
||||||
|
if (error) error.style.display = "block";
|
||||||
}
|
}
|
||||||
}
|
}, 15000); // 15 seconds timeout
|
||||||
|
|
||||||
body.app-loaded #app-loading {
|
// Clean up timeout if app loads
|
||||||
display: none !important;
|
var observer = new MutationObserver(function (mutations) {
|
||||||
}
|
mutations.forEach(function (mutation) {
|
||||||
|
if (
|
||||||
/* iOS Safari Click Fixes */
|
mutation.attributeName === "class" &&
|
||||||
body {
|
document.body.classList.contains("app-loaded")
|
||||||
cursor: pointer;
|
) {
|
||||||
-webkit-tap-highlight-color: transparent;
|
clearTimeout(timeout);
|
||||||
}
|
observer.disconnect();
|
||||||
|
|
||||||
summary {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
summary::-webkit-details-marker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// App loading timeout handler
|
|
||||||
(function () {
|
|
||||||
var timeout = setTimeout(function () {
|
|
||||||
if (!document.body.classList.contains("app-loaded")) {
|
|
||||||
var spinner = document.getElementById("app-loading-spinner");
|
|
||||||
var error = document.getElementById("app-loading-error");
|
|
||||||
if (spinner) spinner.style.display = "none";
|
|
||||||
if (error) error.style.display = "block";
|
|
||||||
}
|
|
||||||
}, 15000); // 15 seconds timeout
|
|
||||||
|
|
||||||
// Clean up timeout if app loads
|
|
||||||
var observer = new MutationObserver(function (mutations) {
|
|
||||||
mutations.forEach(function (mutation) {
|
|
||||||
if (
|
|
||||||
mutation.attributeName === "class" &&
|
|
||||||
document.body.classList.contains("app-loaded")
|
|
||||||
) {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
observer.disconnect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
observer.observe(document.body, { attributes: true });
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Service Worker Registration & PWA Setup -->
|
|
||||||
<script>
|
|
||||||
// Global Dropdown Closer for iOS/Mobile
|
|
||||||
document.addEventListener('click', function(event) {
|
|
||||||
const details = document.querySelectorAll('details[open]');
|
|
||||||
details.forEach(detail => {
|
|
||||||
// Eğer tıklanan yer bu details'in içinde değilse kapat
|
|
||||||
if (!detail.contains(event.target)) {
|
|
||||||
detail.removeAttribute('open');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, true); // Use capture phase for better mobile support
|
});
|
||||||
|
observer.observe(document.body, { attributes: true });
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
if ("serviceWorker" in navigator) {
|
<!-- Service Worker Registration & PWA Setup -->
|
||||||
window.addEventListener("load", () => {
|
<script>
|
||||||
navigator.serviceWorker
|
// Global Dropdown Closer for iOS/Mobile
|
||||||
.register("/sw.js")
|
document.addEventListener('click', function (event) {
|
||||||
.then((registration) => {
|
const details = document.querySelectorAll('details[open]');
|
||||||
console.log("✅ Service Worker registered:", registration);
|
details.forEach(detail => {
|
||||||
|
// Eğer tıklanan yer bu details'in içinde değilse kapat
|
||||||
|
if (!detail.contains(event.target)) {
|
||||||
|
detail.removeAttribute('open');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, true); // Use capture phase for better mobile support
|
||||||
|
|
||||||
// Request notification permission after a delay (better UX)
|
if ("serviceWorker" in navigator) {
|
||||||
setTimeout(() => {
|
window.addEventListener("load", () => {
|
||||||
if ("Notification" in window && Notification.permission === "default") {
|
navigator.serviceWorker
|
||||||
// Only request if user hasn't decided yet
|
.register("/sw.js")
|
||||||
const shouldRequest = localStorage.getItem("vibetorrent_notification_prompt_shown");
|
.then((registration) => {
|
||||||
if (!shouldRequest) {
|
console.log("✅ Service Worker registered:", registration);
|
||||||
Notification.requestPermission().then((permission) => {
|
|
||||||
console.log("Notification permission:", permission);
|
// Request notification permission after a delay (better UX)
|
||||||
localStorage.setItem("vibetorrent_notification_prompt_shown", "true");
|
setTimeout(() => {
|
||||||
});
|
if ("Notification" in window && Notification.permission === "default") {
|
||||||
}
|
// Only request if user hasn't decided yet
|
||||||
|
const shouldRequest = localStorage.getItem("vibetorrent_notification_prompt_shown");
|
||||||
|
if (!shouldRequest) {
|
||||||
|
Notification.requestPermission().then((permission) => {
|
||||||
|
console.log("Notification permission:", permission);
|
||||||
|
localStorage.setItem("vibetorrent_notification_prompt_shown", "true");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, 3000); // Wait 3 seconds before asking
|
}
|
||||||
})
|
}, 3000); // Wait 3 seconds before asking
|
||||||
.catch((error) => {
|
})
|
||||||
console.warn("⚠️ Service Worker registration failed:", error);
|
.catch((error) => {
|
||||||
});
|
console.warn("⚠️ Service Worker registration failed:", error);
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
</script>
|
}
|
||||||
</body>
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
2853
frontend/package-lock.json
generated
2853
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,8 +10,11 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.18",
|
||||||
"autoprefixer": "^10.4.23",
|
"autoprefixer": "^10.4.23",
|
||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.6",
|
||||||
|
"postcss-cli": "^11.0.1",
|
||||||
|
"postcss-preset-env": "^11.1.3",
|
||||||
"tailwindcss": "^4.1.18"
|
"tailwindcss": "^4.1.18"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
15
frontend/postcss.config.cjs
Normal file
15
frontend/postcss.config.cjs
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
"postcss-preset-env": {
|
||||||
|
features: {
|
||||||
|
"nesting-rules": true,
|
||||||
|
},
|
||||||
|
browsers: [
|
||||||
|
"last 2 versions",
|
||||||
|
"iOS >= 15",
|
||||||
|
"Safari >= 15",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,4 @@
|
|||||||
use crate::components::layout::protected::Protected;
|
use crate::components::layout::protected::Protected;
|
||||||
use crate::components::toast::ToastContainer;
|
|
||||||
use crate::components::torrent::table::TorrentTable;
|
use crate::components::torrent::table::TorrentTable;
|
||||||
use crate::components::torrent::detail::TorrentDetail;
|
use crate::components::torrent::detail::TorrentDetail;
|
||||||
use crate::components::auth::login::Login;
|
use crate::components::auth::login::Login;
|
||||||
@@ -8,9 +7,20 @@ use leptos::prelude::*;
|
|||||||
use leptos::task::spawn_local;
|
use leptos::task::spawn_local;
|
||||||
use leptos_router::components::{Router, Routes, Route};
|
use leptos_router::components::{Router, Routes, Route};
|
||||||
use leptos_router::hooks::use_navigate;
|
use leptos_router::hooks::use_navigate;
|
||||||
|
use leptos_shadcn_skeleton::Skeleton;
|
||||||
|
use leptos_shadcn_toast::SonnerProvider;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn App() -> impl IntoView {
|
pub fn App() -> impl IntoView {
|
||||||
|
view! {
|
||||||
|
<SonnerProvider>
|
||||||
|
<InnerApp />
|
||||||
|
</SonnerProvider>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn InnerApp() -> impl IntoView {
|
||||||
crate::store::provide_torrent_store();
|
crate::store::provide_torrent_store();
|
||||||
let store = use_context::<crate::store::TorrentStore>();
|
let store = use_context::<crate::store::TorrentStore>();
|
||||||
|
|
||||||
@@ -116,10 +126,40 @@ pub fn App() -> impl IntoView {
|
|||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Show when=move || !is_loading.0.get() fallback=|| view! {
|
<Show when=move || !is_loading.0.get() fallback=|| view! {
|
||||||
<div class="flex items-center justify-center h-screen bg-background">
|
<div class="flex h-screen bg-background">
|
||||||
<div class="flex flex-col items-center gap-4">
|
// Sidebar skeleton
|
||||||
<div class="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
|
<div class="w-56 border-r border-border p-4 space-y-4">
|
||||||
<p class="text-sm text-muted-foreground">"Yükleniyor..."</p>
|
<Skeleton class="h-8 w-3/4" />
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Skeleton class="h-6 w-full" />
|
||||||
|
<Skeleton class="h-6 w-full" />
|
||||||
|
<Skeleton class="h-6 w-4/5" />
|
||||||
|
<Skeleton class="h-6 w-full" />
|
||||||
|
<Skeleton class="h-6 w-3/5" />
|
||||||
|
<Skeleton class="h-6 w-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
// Main content skeleton
|
||||||
|
<div class="flex-1 flex flex-col">
|
||||||
|
// Header skeleton
|
||||||
|
<div class="border-b border-border p-4 flex items-center gap-4">
|
||||||
|
<Skeleton class="h-8 w-48" />
|
||||||
|
<Skeleton class="h-8 w-64" />
|
||||||
|
<div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
|
||||||
|
</div>
|
||||||
|
// Table skeleton rows
|
||||||
|
<div class="flex-1 p-4 space-y-3">
|
||||||
|
<Skeleton class="h-10 w-full" />
|
||||||
|
<Skeleton class="h-10 w-full" />
|
||||||
|
<Skeleton class="h-10 w-full" />
|
||||||
|
<Skeleton class="h-10 w-full" />
|
||||||
|
<Skeleton class="h-10 w-full" />
|
||||||
|
<Skeleton class="h-10 w-3/4" />
|
||||||
|
</div>
|
||||||
|
// Status bar skeleton
|
||||||
|
<div class="border-t border-border p-3">
|
||||||
|
<Skeleton class="h-5 w-96" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}.into_any()>
|
}.into_any()>
|
||||||
@@ -157,8 +197,6 @@ pub fn App() -> impl IntoView {
|
|||||||
}/>
|
}/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
|
|
||||||
<ToastContainer />
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,9 @@ use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
|
|||||||
use leptos_shadcn_avatar::{Avatar, AvatarFallback};
|
use leptos_shadcn_avatar::{Avatar, AvatarFallback};
|
||||||
use leptos_shadcn_separator::Separator;
|
use leptos_shadcn_separator::Separator;
|
||||||
|
|
||||||
|
use leptos_use::storage::use_local_storage;
|
||||||
|
use ::codee::string::FromToStringCodec;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Sidebar() -> impl IntoView {
|
pub fn Sidebar() -> impl IntoView {
|
||||||
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
||||||
@@ -67,6 +70,37 @@ pub fn Sidebar() -> impl IntoView {
|
|||||||
username().chars().next().unwrap_or('?').to_uppercase().to_string()
|
username().chars().next().unwrap_or('?').to_uppercase().to_string()
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// --- THEME LOGIC START ---
|
||||||
|
let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");
|
||||||
|
|
||||||
|
// Initialize with default if empty
|
||||||
|
let current_theme_val = current_theme.get();
|
||||||
|
if current_theme_val.is_empty() {
|
||||||
|
set_current_theme.set("dark".to_string());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Automatically sync theme to document attribute
|
||||||
|
Effect::new(move |_| {
|
||||||
|
let theme = current_theme.get().to_lowercase();
|
||||||
|
if let Some(doc) = document().document_element() {
|
||||||
|
let _ = doc.set_attribute("data-theme", &theme);
|
||||||
|
// Also set class for Shadcn dark mode support
|
||||||
|
if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
|
||||||
|
let _ = doc.class_list().add_1("dark");
|
||||||
|
} else {
|
||||||
|
let _ = doc.class_list().remove_1("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let toggle_theme = move |_| {
|
||||||
|
let new_theme = if current_theme.get() == "dark" { "light" } else { "dark" };
|
||||||
|
set_current_theme.set(new_theme.to_string());
|
||||||
|
};
|
||||||
|
// --- THEME LOGIC END ---
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<div class="w-full h-full flex flex-col bg-card" style="padding-top: env(safe-area-inset-top);">
|
<div class="w-full h-full flex flex-col bg-card" style="padding-top: env(safe-area-inset-top);">
|
||||||
<div class="p-4 flex-1 overflow-y-auto">
|
<div class="p-4 flex-1 overflow-y-auto">
|
||||||
@@ -158,7 +192,7 @@ pub fn Sidebar() -> impl IntoView {
|
|||||||
|
|
||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<div class="p-4 bg-card">
|
<div class="p-4 bg-card" style="padding-bottom: calc(1rem + env(safe-area-inset-bottom));">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<Avatar class="h-8 w-8">
|
<Avatar class="h-8 w-8">
|
||||||
<AvatarFallback class="bg-primary text-primary-foreground text-xs font-medium">
|
<AvatarFallback class="bg-primary text-primary-foreground text-xs font-medium">
|
||||||
@@ -169,6 +203,27 @@ pub fn Sidebar() -> impl IntoView {
|
|||||||
<div class="font-medium text-sm truncate text-foreground">{username}</div>
|
<div class="font-medium text-sm truncate text-foreground">{username}</div>
|
||||||
<div class="text-[10px] text-muted-foreground truncate">"Online"</div>
|
<div class="text-[10px] text-muted-foreground truncate">"Online"</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
// --- THEME BUTTON ---
|
||||||
|
<Button
|
||||||
|
variant=ButtonVariant::Ghost
|
||||||
|
size=ButtonSize::Icon
|
||||||
|
class="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||||
|
on_click=Callback::new(toggle_theme)
|
||||||
|
>
|
||||||
|
// Sun icon for dark mode (to switch to light), Moon for light (to switch to dark)
|
||||||
|
// Actually show current state or action? Usually action.
|
||||||
|
// If dark, show Sun. If light, show Moon.
|
||||||
|
<Show when=move || current_theme.get() == "dark" fallback=|| view! {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||||
|
</svg>
|
||||||
|
}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||||
|
</svg>
|
||||||
|
</Show>
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant=ButtonVariant::Ghost
|
variant=ButtonVariant::Ghost
|
||||||
size=ButtonSize::Icon
|
size=ButtonSize::Icon
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos::html;
|
use leptos::html;
|
||||||
use leptos_use::storage::use_local_storage;
|
|
||||||
use ::codee::string::FromToStringCodec;
|
|
||||||
use shared::GlobalLimitRequest;
|
use shared::GlobalLimitRequest;
|
||||||
use crate::api;
|
use crate::api;
|
||||||
|
|
||||||
@@ -30,27 +28,7 @@ pub fn StatusBar() -> impl IntoView {
|
|||||||
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
||||||
let stats = store.global_stats;
|
let stats = store.global_stats;
|
||||||
|
|
||||||
let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");
|
|
||||||
|
|
||||||
// Initialize with default if empty
|
|
||||||
let current_theme_val = current_theme.get();
|
|
||||||
if current_theme_val.is_empty() {
|
|
||||||
set_current_theme.set("dark".to_string());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Automatically sync theme to document attribute
|
|
||||||
Effect::new(move |_| {
|
|
||||||
let theme = current_theme.get().to_lowercase();
|
|
||||||
if let Some(doc) = document().document_element() {
|
|
||||||
let _ = doc.set_attribute("data-theme", &theme);
|
|
||||||
// Also set class for Shadcn dark mode support
|
|
||||||
if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" {
|
|
||||||
let _ = doc.class_list().add_1("dark");
|
|
||||||
} else {
|
|
||||||
let _ = doc.class_list().remove_1("dark");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Preset limits in bytes/s
|
// Preset limits in bytes/s
|
||||||
let limits: Vec<(i64, &str)> = vec!(
|
let limits: Vec<(i64, &str)> = vec!(
|
||||||
@@ -91,7 +69,6 @@ pub fn StatusBar() -> impl IntoView {
|
|||||||
|
|
||||||
let down_details_ref = NodeRef::<html::Details>::new();
|
let down_details_ref = NodeRef::<html::Details>::new();
|
||||||
let up_details_ref = NodeRef::<html::Details>::new();
|
let up_details_ref = NodeRef::<html::Details>::new();
|
||||||
let theme_details_ref = NodeRef::<html::Details>::new();
|
|
||||||
|
|
||||||
let close_details = move |node_ref: NodeRef<html::Details>| {
|
let close_details = move |node_ref: NodeRef<html::Details>| {
|
||||||
if let Some(el) = node_ref.get_untracked() {
|
if let Some(el) = node_ref.get_untracked() {
|
||||||
@@ -201,49 +178,6 @@ pub fn StatusBar() -> impl IntoView {
|
|||||||
</details>
|
</details>
|
||||||
|
|
||||||
<div class="ml-auto flex items-center gap-4">
|
<div class="ml-auto flex items-center gap-4">
|
||||||
<details class="group relative" node_ref=theme_details_ref>
|
|
||||||
<summary class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7 cursor-pointer outline-none list-none [&::-webkit-details-marker]:hidden">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
|
|
||||||
</svg>
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
<div class="absolute bottom-full right-0 mb-2 z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md hidden group-open:block animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2 max-h-96 overflow-y-auto">
|
|
||||||
<ul class="w-full">
|
|
||||||
{
|
|
||||||
let themes = vec![
|
|
||||||
"light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss"
|
|
||||||
];
|
|
||||||
themes.into_iter().map(|theme| {
|
|
||||||
let theme_name = theme.to_string();
|
|
||||||
let theme_name_for_class = theme_name.clone();
|
|
||||||
let theme_name_for_onclick = theme_name.clone();
|
|
||||||
let is_active = move || current_theme.get() == theme_name_for_class;
|
|
||||||
view! {
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
class=move || {
|
|
||||||
let base = "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground capitalize";
|
|
||||||
if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
|
|
||||||
}
|
|
||||||
on:click=move |_| {
|
|
||||||
set_current_theme.set(theme_name_for_onclick.clone());
|
|
||||||
close_details(theme_details_ref);
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
||||||
<Show when=is_active.clone() fallback=|| ()>
|
|
||||||
<span>"✓"</span>
|
|
||||||
</Show>
|
|
||||||
</span>
|
|
||||||
{theme_name}
|
|
||||||
</button> </li>
|
|
||||||
}
|
|
||||||
}).collect::<Vec<_>>()
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
<button
|
<button
|
||||||
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7"
|
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7"
|
||||||
title="Settings & Notification Permissions"
|
title="Settings & Notification Permissions"
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
pub mod context_menu;
|
pub mod context_menu;
|
||||||
pub mod layout;
|
pub mod layout;
|
||||||
pub mod toast;
|
|
||||||
pub mod torrent;
|
pub mod torrent;
|
||||||
pub mod auth;
|
pub mod auth;
|
||||||
|
|||||||
@@ -1,86 +0,0 @@
|
|||||||
use leptos::prelude::*;
|
|
||||||
use shared::NotificationLevel;
|
|
||||||
use leptos_shadcn_alert::{Alert, AlertVariant};
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// Toast Components - Using ShadCN Alert
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
fn level_to_variant(level: &NotificationLevel) -> AlertVariant {
|
|
||||||
match level {
|
|
||||||
NotificationLevel::Info => AlertVariant::Default,
|
|
||||||
NotificationLevel::Success => AlertVariant::Success,
|
|
||||||
NotificationLevel::Warning => AlertVariant::Warning,
|
|
||||||
NotificationLevel::Error => AlertVariant::Destructive,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fn level_icon(level: &NotificationLevel) -> impl IntoView {
|
|
||||||
match level {
|
|
||||||
NotificationLevel::Info => view! {
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
|
||||||
</svg>
|
|
||||||
}.into_any(),
|
|
||||||
NotificationLevel::Success => view! {
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
}.into_any(),
|
|
||||||
NotificationLevel::Warning => view! {
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
||||||
</svg>
|
|
||||||
}.into_any(),
|
|
||||||
NotificationLevel::Error => view! {
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
||||||
</svg>
|
|
||||||
}.into_any(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Individual toast item component
|
|
||||||
#[component]
|
|
||||||
fn ToastItem(
|
|
||||||
level: NotificationLevel,
|
|
||||||
message: String,
|
|
||||||
) -> impl IntoView {
|
|
||||||
let variant = level_to_variant(&level);
|
|
||||||
let icon = level_icon(&level);
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<Alert variant=variant class="pointer-events-auto shadow-lg">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
{icon}
|
|
||||||
<div class="text-sm font-medium">{message}</div>
|
|
||||||
</div>
|
|
||||||
</Alert>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Main toast container - renders all active notifications
|
|
||||||
#[component]
|
|
||||||
pub fn ToastContainer() -> impl IntoView {
|
|
||||||
let store = use_context::<crate::store::TorrentStore>().expect("TorrentStore not provided");
|
|
||||||
let notifications = store.notifications;
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<div
|
|
||||||
class="fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-2"
|
|
||||||
>
|
|
||||||
<For
|
|
||||||
each=move || notifications.get()
|
|
||||||
key=|item| item.id
|
|
||||||
children=move |item| {
|
|
||||||
view! {
|
|
||||||
<ToastItem
|
|
||||||
level=item.notification.level
|
|
||||||
message=item.notification.message
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos::task::spawn_local;
|
use leptos::task::spawn_local;
|
||||||
use leptos_shadcn_dialog::{Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter};
|
|
||||||
use leptos_shadcn_input::Input;
|
use leptos_shadcn_input::Input;
|
||||||
use leptos_shadcn_button::{Button, ButtonVariant};
|
use leptos_shadcn_button::{Button, ButtonVariant};
|
||||||
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
||||||
@@ -12,12 +11,10 @@ pub fn AddTorrentDialog(
|
|||||||
on_close: Callback<()>,
|
on_close: Callback<()>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
let store = use_context::<TorrentStore>().expect("TorrentStore not provided");
|
let store = use_context::<TorrentStore>().expect("TorrentStore not provided");
|
||||||
let notifications = store.notifications;
|
|
||||||
|
|
||||||
let uri = signal(String::new());
|
let uri = signal(String::new());
|
||||||
let is_loading = signal(false);
|
let is_loading = signal(false);
|
||||||
let error_msg = signal(Option::<String>::None);
|
let error_msg = signal(Option::<String>::None);
|
||||||
let is_open = signal(true);
|
|
||||||
|
|
||||||
let handle_submit = move |ev: web_sys::SubmitEvent| {
|
let handle_submit = move |ev: web_sys::SubmitEvent| {
|
||||||
ev.prevent_default();
|
ev.prevent_default();
|
||||||
@@ -36,12 +33,7 @@ pub fn AddTorrentDialog(
|
|||||||
match api::torrent::add(&uri_val).await {
|
match api::torrent::add(&uri_val).await {
|
||||||
Ok(_) => {
|
Ok(_) => {
|
||||||
log::info!("Torrent added successfully");
|
log::info!("Torrent added successfully");
|
||||||
crate::store::show_toast_with_signal(
|
crate::store::toast_success("Torrent başarıyla eklendi");
|
||||||
notifications,
|
|
||||||
shared::NotificationLevel::Success,
|
|
||||||
"Torrent başarıyla eklendi"
|
|
||||||
);
|
|
||||||
is_open.1.set(false);
|
|
||||||
on_close.run(());
|
on_close.run(());
|
||||||
}
|
}
|
||||||
Err(e) => {
|
Err(e) => {
|
||||||
@@ -53,58 +45,76 @@ pub fn AddTorrentDialog(
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let handle_backdrop = {
|
||||||
|
let on_close = on_close.clone();
|
||||||
|
move |e: web_sys::MouseEvent| {
|
||||||
|
e.stop_propagation();
|
||||||
|
on_close.run(());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Dialog
|
// Backdrop overlay
|
||||||
open=Signal::derive(move || is_open.0.get())
|
<div
|
||||||
on_open_change=Callback::new(move |open: bool| {
|
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
|
||||||
is_open.1.set(open);
|
on:click=handle_backdrop
|
||||||
if !open {
|
/>
|
||||||
on_close.run(());
|
// Dialog panel
|
||||||
}
|
<div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-card p-6 shadow-lg rounded-lg sm:max-w-[425px]">
|
||||||
})
|
// Header
|
||||||
>
|
<div class="flex flex-col space-y-1.5 text-center sm:text-left">
|
||||||
<DialogContent class="sm:max-w-[425px]">
|
<h2 class="text-lg font-semibold leading-none tracking-tight">"Add Torrent"</h2>
|
||||||
<DialogHeader>
|
<p class="text-sm text-muted-foreground">"Enter a Magnet link or a .torrent file URL."</p>
|
||||||
<DialogTitle>"Add Torrent"</DialogTitle>
|
</div>
|
||||||
<DialogDescription>"Enter a Magnet link or a .torrent file URL."</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<form on:submit=handle_submit class="space-y-4">
|
<form on:submit=handle_submit class="space-y-4">
|
||||||
<Input
|
<Input
|
||||||
input_type="text"
|
input_type="text"
|
||||||
placeholder="magnet:?xt=urn:btih:..."
|
placeholder="magnet:?xt=urn:btih:..."
|
||||||
value=MaybeProp::derive(move || Some(uri.0.get()))
|
value=MaybeProp::derive(move || Some(uri.0.get()))
|
||||||
on_change=Callback::new(move |val: String| uri.1.set(val))
|
on_change=Callback::new(move |val: String| uri.1.set(val))
|
||||||
disabled=Signal::derive(move || is_loading.0.get())
|
disabled=Signal::derive(move || is_loading.0.get())
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{move || error_msg.0.get().map(|msg| view! {
|
{move || error_msg.0.get().map(|msg| view! {
|
||||||
<Alert variant=AlertVariant::Destructive>
|
<Alert variant=AlertVariant::Destructive>
|
||||||
<AlertDescription>{msg}</AlertDescription>
|
<AlertDescription>{msg}</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<DialogFooter>
|
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
|
||||||
<Button
|
<Button
|
||||||
variant=ButtonVariant::Ghost
|
variant=ButtonVariant::Ghost
|
||||||
on_click=Callback::new(move |()| {
|
on_click=Callback::new(move |()| {
|
||||||
is_open.1.set(false);
|
on_close.run(());
|
||||||
on_close.run(());
|
})
|
||||||
|
>
|
||||||
|
"Cancel"
|
||||||
|
</Button>
|
||||||
|
<Button disabled=Signal::derive(move || is_loading.0.get())>
|
||||||
|
{move || if is_loading.0.get() {
|
||||||
|
leptos::either::Either::Left(view! {
|
||||||
|
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||||
|
"Adding..."
|
||||||
})
|
})
|
||||||
>
|
} else {
|
||||||
"Cancel"
|
leptos::either::Either::Right(view! { "Add" })
|
||||||
</Button>
|
}}
|
||||||
<Button disabled=Signal::derive(move || is_loading.0.get())>
|
</Button>
|
||||||
{move || if is_loading.0.get() {
|
</div>
|
||||||
leptos::either::Either::Left(view! { <span class="loading loading-spinner"></span> "Adding..." })
|
</form>
|
||||||
} else {
|
|
||||||
leptos::either::Either::Right(view! { "Add" })
|
// Close button (X)
|
||||||
}}
|
<button
|
||||||
</Button>
|
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
|
||||||
</DialogFooter>
|
on:click=move |_| on_close.run(())
|
||||||
</form>
|
>
|
||||||
</DialogContent>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
|
||||||
</Dialog>
|
<path d="M18 6 6 18"></path>
|
||||||
|
<path d="m6 6 12 12"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">"Close"</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos::task::spawn_local;
|
use leptos::task::spawn_local;
|
||||||
use crate::store::{get_action_messages, show_toast_with_signal};
|
use crate::store::{get_action_messages, show_toast};
|
||||||
use crate::api;
|
use crate::api;
|
||||||
use shared::NotificationLevel;
|
use shared::NotificationLevel;
|
||||||
use crate::components::context_menu::TorrentContextMenu;
|
use crate::components::context_menu::TorrentContextMenu;
|
||||||
@@ -116,7 +116,6 @@ pub fn TorrentTable() -> impl IntoView {
|
|||||||
let (success_msg_str, error_msg_str): (&'static str, &'static str) = get_action_messages(&action);
|
let (success_msg_str, error_msg_str): (&'static str, &'static str) = get_action_messages(&action);
|
||||||
let success_msg = success_msg_str.to_string();
|
let success_msg = success_msg_str.to_string();
|
||||||
let error_msg = error_msg_str.to_string();
|
let error_msg = error_msg_str.to_string();
|
||||||
let notifications = store.notifications;
|
|
||||||
spawn_local(async move {
|
spawn_local(async move {
|
||||||
let result = match action.as_str() {
|
let result = match action.as_str() {
|
||||||
"delete" => api::torrent::delete(&hash).await,
|
"delete" => api::torrent::delete(&hash).await,
|
||||||
@@ -126,8 +125,8 @@ pub fn TorrentTable() -> impl IntoView {
|
|||||||
_ => api::torrent::action(&hash, &action).await,
|
_ => api::torrent::action(&hash, &action).await,
|
||||||
};
|
};
|
||||||
match result {
|
match result {
|
||||||
Ok(_) => show_toast_with_signal(notifications, NotificationLevel::Success, success_msg),
|
Ok(_) => show_toast(NotificationLevel::Success, success_msg),
|
||||||
Err(e) => show_toast_with_signal(notifications, NotificationLevel::Error, format!("{}: {:?}", error_msg, e)),
|
Err(e) => show_toast(NotificationLevel::Error, format!("{}: {:?}", error_msg, e)),
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,40 +7,18 @@ use std::collections::HashMap;
|
|||||||
use struct_patch::traits::Patch;
|
use struct_patch::traits::Patch;
|
||||||
use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
|
use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
|
||||||
|
|
||||||
#[derive(Clone, Debug, PartialEq)]
|
|
||||||
pub struct NotificationItem {
|
|
||||||
pub id: u64,
|
|
||||||
pub notification: SystemNotification,
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn show_toast_with_signal(
|
|
||||||
notifications: RwSignal<Vec<NotificationItem>>,
|
|
||||||
level: NotificationLevel,
|
|
||||||
message: impl Into<String>,
|
|
||||||
) {
|
|
||||||
let id = js_sys::Date::now() as u64;
|
|
||||||
let notification = SystemNotification {
|
|
||||||
level,
|
|
||||||
message: message.into(),
|
|
||||||
};
|
|
||||||
let item = NotificationItem { id, notification };
|
|
||||||
|
|
||||||
notifications.update(|list| list.push(item));
|
|
||||||
|
|
||||||
leptos::prelude::set_timeout(
|
|
||||||
move || {
|
|
||||||
notifications.update(|list| list.retain(|i| i.id != id));
|
|
||||||
},
|
|
||||||
std::time::Duration::from_secs(5),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
|
pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
|
||||||
if let Some(store) = use_context::<TorrentStore>() {
|
let msg = message.into();
|
||||||
show_toast_with_signal(store.notifications, level, message);
|
match level {
|
||||||
|
NotificationLevel::Info => { leptos_shadcn_toast::toast::info(&msg).show(); },
|
||||||
|
NotificationLevel::Success => { leptos_shadcn_toast::toast::success(&msg).show(); },
|
||||||
|
NotificationLevel::Warning => { leptos_shadcn_toast::toast::warning(&msg).show(); },
|
||||||
|
NotificationLevel::Error => { leptos_shadcn_toast::toast::error(&msg).show(); },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
pub fn toast_success(message: impl Into<String>) { show_toast(NotificationLevel::Success, message); }
|
pub fn toast_success(message: impl Into<String>) { show_toast(NotificationLevel::Success, message); }
|
||||||
pub fn toast_error(message: impl Into<String>) { show_toast(NotificationLevel::Error, message); }
|
pub fn toast_error(message: impl Into<String>) { show_toast(NotificationLevel::Error, message); }
|
||||||
|
|
||||||
@@ -67,7 +45,6 @@ pub struct TorrentStore {
|
|||||||
pub filter: RwSignal<FilterStatus>,
|
pub filter: RwSignal<FilterStatus>,
|
||||||
pub search_query: RwSignal<String>,
|
pub search_query: RwSignal<String>,
|
||||||
pub global_stats: RwSignal<GlobalStats>,
|
pub global_stats: RwSignal<GlobalStats>,
|
||||||
pub notifications: RwSignal<Vec<NotificationItem>>,
|
|
||||||
pub user: RwSignal<Option<String>>,
|
pub user: RwSignal<Option<String>>,
|
||||||
pub selected_torrent: RwSignal<Option<String>>,
|
pub selected_torrent: RwSignal<Option<String>>,
|
||||||
}
|
}
|
||||||
@@ -77,16 +54,14 @@ pub fn provide_torrent_store() {
|
|||||||
let filter = RwSignal::new(FilterStatus::All);
|
let filter = RwSignal::new(FilterStatus::All);
|
||||||
let search_query = RwSignal::new(String::new());
|
let search_query = RwSignal::new(String::new());
|
||||||
let global_stats = RwSignal::new(GlobalStats::default());
|
let global_stats = RwSignal::new(GlobalStats::default());
|
||||||
let notifications = RwSignal::new(Vec::<NotificationItem>::new());
|
|
||||||
let user = RwSignal::new(Option::<String>::None);
|
let user = RwSignal::new(Option::<String>::None);
|
||||||
let selected_torrent = RwSignal::new(Option::<String>::None);
|
let selected_torrent = RwSignal::new(Option::<String>::None);
|
||||||
|
|
||||||
let show_browser_notification = crate::utils::notification::use_app_notification();
|
let show_browser_notification = crate::utils::notification::use_app_notification();
|
||||||
|
|
||||||
let store = TorrentStore { torrents, filter, search_query, global_stats, notifications, user, selected_torrent };
|
let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent };
|
||||||
provide_context(store);
|
provide_context(store);
|
||||||
|
|
||||||
let notifications_for_sse = notifications;
|
|
||||||
let global_stats_for_sse = global_stats;
|
let global_stats_for_sse = global_stats;
|
||||||
let torrents_for_sse = torrents;
|
let torrents_for_sse = torrents;
|
||||||
let show_browser_notification = show_browser_notification.clone();
|
let show_browser_notification = show_browser_notification.clone();
|
||||||
@@ -112,7 +87,7 @@ pub fn provide_torrent_store() {
|
|||||||
got_first_message = true;
|
got_first_message = true;
|
||||||
backoff_ms = 1000;
|
backoff_ms = 1000;
|
||||||
if was_connected && disconnect_notified {
|
if was_connected && disconnect_notified {
|
||||||
show_toast_with_signal(notifications_for_sse, NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
|
show_toast(NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
|
||||||
disconnect_notified = false;
|
disconnect_notified = false;
|
||||||
}
|
}
|
||||||
was_connected = true;
|
was_connected = true;
|
||||||
@@ -149,7 +124,7 @@ pub fn provide_torrent_store() {
|
|||||||
}
|
}
|
||||||
AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
|
AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
|
||||||
AppEvent::Notification(n) => {
|
AppEvent::Notification(n) => {
|
||||||
show_toast_with_signal(notifications_for_sse, n.level.clone(), n.message.clone());
|
show_toast(n.level.clone(), n.message.clone());
|
||||||
if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
|
if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
|
||||||
show_browser_notification("VibeTorrent", &n.message);
|
show_browser_notification("VibeTorrent", &n.message);
|
||||||
}
|
}
|
||||||
@@ -164,14 +139,14 @@ pub fn provide_torrent_store() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if was_connected && !disconnect_notified {
|
if was_connected && !disconnect_notified {
|
||||||
show_toast_with_signal(notifications_for_sse, NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
|
show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
|
||||||
disconnect_notified = true;
|
disconnect_notified = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Err(_) => {
|
Err(_) => {
|
||||||
if was_connected && !disconnect_notified {
|
if was_connected && !disconnect_notified {
|
||||||
show_toast_with_signal(notifications_for_sse, NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
|
show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
|
||||||
disconnect_notified = true;
|
disconnect_notified = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
use wasm_bindgen::prelude::*;
|
use wasm_bindgen::prelude::*;
|
||||||
use web_sys::{Notification, NotificationOptions};
|
use web_sys::{Notification, NotificationOptions};
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos_use::{use_web_notification, UseWebNotificationReturn, NotificationPermission};
|
|
||||||
|
|
||||||
/// Request browser notification permission from user
|
/// Request browser notification permission from user
|
||||||
pub async fn request_notification_permission() -> bool {
|
pub async fn request_notification_permission() -> bool {
|
||||||
|
if !is_notification_supported() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
if let Ok(promise) = Notification::request_permission() {
|
if let Ok(promise) = Notification::request_permission() {
|
||||||
if let Ok(result) = wasm_bindgen_futures::JsFuture::from(promise).await {
|
if let Ok(result) = wasm_bindgen_futures::JsFuture::from(promise).await {
|
||||||
return result.as_string().unwrap_or_default() == "granted";
|
return result.as_string().unwrap_or_default() == "granted";
|
||||||
@@ -21,6 +23,9 @@ pub fn is_notification_supported() -> bool {
|
|||||||
|
|
||||||
/// Get current notification permission status
|
/// Get current notification permission status
|
||||||
pub fn get_notification_permission() -> String {
|
pub fn get_notification_permission() -> String {
|
||||||
|
if !is_notification_supported() {
|
||||||
|
return "denied".to_string();
|
||||||
|
}
|
||||||
match Notification::permission() {
|
match Notification::permission() {
|
||||||
web_sys::NotificationPermission::Granted => "granted".to_string(),
|
web_sys::NotificationPermission::Granted => "granted".to_string(),
|
||||||
web_sys::NotificationPermission::Denied => "denied".to_string(),
|
web_sys::NotificationPermission::Denied => "denied".to_string(),
|
||||||
@@ -32,8 +37,6 @@ pub fn get_notification_permission() -> String {
|
|||||||
/// Hook for using browser notifications within Leptos components or effects.
|
/// Hook for using browser notifications within Leptos components or effects.
|
||||||
/// This uses leptos-use for reactive permission tracking.
|
/// This uses leptos-use for reactive permission tracking.
|
||||||
pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
|
pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
|
||||||
let UseWebNotificationReturn { permission, .. } = use_web_notification();
|
|
||||||
|
|
||||||
move |title: &str, body: &str| {
|
move |title: &str, body: &str| {
|
||||||
// Check user preference from localStorage
|
// Check user preference from localStorage
|
||||||
let window = web_sys::window().expect("no global window");
|
let window = web_sys::window().expect("no global window");
|
||||||
@@ -42,8 +45,8 @@ pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
|
|||||||
.and_then(|s| s.get_item("vibetorrent_browser_notifications").ok().flatten())
|
.and_then(|s| s.get_item("vibetorrent_browser_notifications").ok().flatten())
|
||||||
.unwrap_or_else(|| "true".to_string());
|
.unwrap_or_else(|| "true".to_string());
|
||||||
|
|
||||||
// Use the reactive permission signal from leptos-use
|
// Check platform support and permission
|
||||||
if enabled == "true" && permission.get() == NotificationPermission::Granted {
|
if enabled == "true" && is_notification_supported() && get_notification_permission() == "granted" {
|
||||||
show_browser_notification(title, body);
|
show_browser_notification(title, body);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ const cargoRegistry = path.join(
|
|||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
darkMode: "class",
|
||||||
content: [
|
content: [
|
||||||
"./index.html",
|
"./index.html",
|
||||||
"./src/**/*.{rs,html}",
|
"./src/**/*.{rs,html}",
|
||||||
|
|||||||
Reference in New Issue
Block a user