changes_1

pytorrent/static/js/app.js

@@ -8,6 +8,7 @@ import { rssSource } from './rss.js';
 import { smartQueueSource } from './smartQueue.js';
 import { plannerSource } from './planner.js';
 import { pollerSource } from './poller.js';
+import { profilesSource } from './profiles.js';
 import { dashboardSource } from './dashboard.js';
 import { chartsSource } from './charts.js';
 import { bootstrapSource } from './bootstrap.js';
@@ -24,6 +25,7 @@ export const moduleSources = [
   plannerSource,
   dashboardSource,
   pollerSource,
+  profilesSource,
   chartsSource,
   bootstrapSource,
 ];

pytorrent/static/styles.css

@@ -640,7 +640,7 @@ body.resizing-details {
 }
 .profile-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) max-content;
   gap: 0.25rem 0.5rem;
   align-items: center;
   margin-bottom: 0.45rem;
@@ -648,10 +648,13 @@ body.resizing-details {
   border: 1px solid var(--bs-border-color);
   border-radius: 0.6rem;
   background: rgba(var(--bs-secondary-bg-rgb), 0.58);
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.profile-row.active {
+.profile-row.active,
+.profile-row[aria-current="true"] {
   border-color: var(--bs-primary);
   background: var(--bs-primary-bg-subtle);
+  box-shadow: 0 0 0 0.16rem rgba(var(--bs-primary-rgb), 0.18);
 }
 .profile-row span {
   grid-column: 1 / 2;
@@ -664,6 +667,26 @@ body.resizing-details {
   gap: 0.35rem;
   flex-wrap: wrap;
 }
+.profile-actions {
+  justify-content: flex-end;
+}
+.profile-status-badge.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: 0;
+  min-height: 1rem;
+  max-width: max-content;
+  padding: 0.1rem 0.32rem;
+  border-radius: 999px;
+  font-size: 0.58rem;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  vertical-align: middle;
+}
 .profile-form-grid {
   display: grid;
   grid-template-columns: minmax(150px, 1.1fr) minmax(260px, 2.1fr) minmax(
@@ -3321,13 +3344,11 @@ body.mobile-mode .mobile-filter-bar {
   display: none;
 }
 
-.profile-status-badge{font-size:.7rem;text-transform:uppercase;letter-spacing:.02em;}
 .profile-diagnostics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem;}
 .profile-diagnostics-card{border:1px solid var(--bs-border-color);border-radius:.5rem;padding:.5rem;background:var(--bs-body-bg);}
 .profile-diagnostics-card small{display:block;color:var(--bs-secondary-color);}
 
 .labels-manager { display: grid; gap: 0.5rem; }
-.profile-status-badge.badge { min-height: 1.25rem; line-height: 1; display: inline-flex; align-items: center; padding: .25em .5em; }
 
 /* UI hygiene: keep long status/footer content inside the app instead of widening the browser viewport. */
 html,
@@ -3352,32 +3373,6 @@ body,
   flex: 0 0 auto;
 }
 
-/* Compact rTorrent profile badges so online/slow/degraded match archive-style pills. */
-.profile-status-badge.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  min-width: 0;
-  min-height: 1.2rem;
-  max-width: max-content;
-  padding: 0.18rem 0.45rem;
-  font-size: 0.68rem;
-  line-height: 1;
-  letter-spacing: 0.015em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.profile-row {
-  grid-template-columns: minmax(0, 1fr) max-content;
-}
-
-.profile-actions {
-  justify-content: flex-end;
-}
-
 .preferences-browser-layout {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -3462,16 +3457,6 @@ body,
   }
 }
 
-/* Keep rTorrent diagnostics badges visually aligned with the smaller active/archive pills. */
-.profile-row .profile-status-badge.badge {
-  min-height: 1rem;
-  padding: 0.1rem 0.32rem;
-  font-size: 0.58rem;
-  line-height: 1;
-  letter-spacing: 0.01em;
-  border-radius: 999px;
-}
-
 /* Flat nested sections inside already framed preference panels. */
 .disk-monitor-shell-flat .disk-monitor-mode-card,
 .disk-monitor-shell-flat .disk-monitor-path-card {