feat: Restructure information architecture for modern UX (#131)

* refactor(frontend): rename Series to Library across navigation and routes

Rename the primary content section from 'Series' to 'Library' to be
inclusive of both comics and manga. Updates all frontend routes from
/series to /library with redirect routes preserving old URLs.

* refactor(frontend): merge Upcoming + Weekly into unified Releases page

Combine the confusingly similar Upcoming and Weekly pages into a single
Releases page with 'My Releases' and 'All Releases' tab views. Old
/upcoming and /weekly URLs redirect to /releases with appropriate view
params. Removes two pages, adds one.

* refactor(frontend): promote Story Arcs to nav and restructure sidebar grouping

Add Story Arcs as a primary navigation item with BookMarked icon. Split
sidebar into Primary (Dashboard, Library, Releases, Wanted, Story Arcs)
and Management (Activity, Import) groups separated visually.

* feat(frontend): add Activity page for download queue and history

New Activity page surfaces existing backend download queue and history
APIs that previously had no frontend. Queue view polls for updates,
history view supports pagination. Accessible from sidebar under
Management group.

* feat: add Notifications settings tab for 11 notification services

New Notifications tab in Settings surfaces Telegram, Discord, Slack,
Mattermost, Gotify, Matrix, Pushover, Prowl, Pushbullet, Boxcar, and
Email notification configuration. Each service has an enable toggle
that reveals its config fields. Also expands the backend config
allowlists to make notification and import behavior keys readable
and writable via the config API.

* feat: add Media Management settings tab

New Media tab in Settings surfaces file naming patterns, import
behavior toggles, scheduling intervals, and quality/organization
preferences that were previously config-file-only.

* Address PR review feedback (#131)

- Preserve search/hash on legacy /series redirects using useLocation
- Fix dbupdate_interval default from 24 to 1440 (minutes, not hours)
- Add parseInt fallback for email encryption and preferred_quality fields
- Sanitize view query params in ActivityPage and ReleasesPage
- Fix SeriesDetailPage back link to point to /library not /
- Use refetch() instead of window.location.reload() in AllReleasesView
- Align email notification defaults (ongrab/onpost) with other providers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: frankieramirez

comicarr/app/system/service.py

@@ -216,6 +216,51 @@ def get_safe_config(ctx):
         "IMP_RENAME",
         "IMP_METADATA",
         "IMP_SERIESFOLDERS",
+        # Notification services
+        "PROWL_ENABLED",
+        "PROWL_KEYS",
+        "PROWL_PRIORITY",
+        "PROWL_ONSNATCH",
+        "PUSHOVER_ENABLED",
+        "PUSHOVER_DEVICE",
+        "PUSHOVER_PRIORITY",
+        "PUSHOVER_ONSNATCH",
+        "PUSHOVER_IMAGE",
+        "BOXCAR_ENABLED",
+        "BOXCAR_ONSNATCH",
+        "PUSHBULLET_ENABLED",
+        "PUSHBULLET_DEVICEID",
+        "PUSHBULLET_CHANNEL_TAG",
+        "PUSHBULLET_ONSNATCH",
+        "TELEGRAM_ENABLED",
+        "TELEGRAM_USERID",
+        "TELEGRAM_ONSNATCH",
+        "TELEGRAM_IMAGE",
+        "SLACK_ENABLED",
+        "SLACK_WEBHOOK_URL",
+        "SLACK_ONSNATCH",
+        "MATTERMOST_ENABLED",
+        "MATTERMOST_WEBHOOK_URL",
+        "MATTERMOST_ONSNATCH",
+        "DISCORD_ENABLED",
+        "DISCORD_WEBHOOK_URL",
+        "DISCORD_ONSNATCH",
+        "EMAIL_ENABLED",
+        "EMAIL_FROM",
+        "EMAIL_TO",
+        "EMAIL_SERVER",
+        "EMAIL_USER",
+        "EMAIL_PORT",
+        "EMAIL_ENC",
+        "EMAIL_ONGRAB",
+        "EMAIL_ONPOST",
+        "GOTIFY_ENABLED",
+        "GOTIFY_SERVER_URL",
+        "GOTIFY_ONSNATCH",
+        "MATRIX_ENABLED",
+        "MATRIX_HOMESERVER",
+        "MATRIX_ROOM_ID",
+        "MATRIX_ONSNATCH",
     ]
     result = {}
     for key in safe_keys:
@@ -329,6 +374,64 @@ def get_safe_config(ctx):
     "AI_DAILY_TOKEN_LIMIT",
     "AI_CIRCUIT_THRESHOLD",
     "AI_CIRCUIT_COOLDOWN",
+    # Notification services
+    "PROWL_ENABLED",
+    "PROWL_KEYS",
+    "PROWL_PRIORITY",
+    "PROWL_ONSNATCH",
+    "PUSHOVER_ENABLED",
+    "PUSHOVER_APIKEY",
+    "PUSHOVER_USERKEY",
+    "PUSHOVER_DEVICE",
+    "PUSHOVER_PRIORITY",
+    "PUSHOVER_ONSNATCH",
+    "PUSHOVER_IMAGE",
+    "BOXCAR_ENABLED",
+    "BOXCAR_TOKEN",
+    "BOXCAR_ONSNATCH",
+    "PUSHBULLET_ENABLED",
+    "PUSHBULLET_APIKEY",
+    "PUSHBULLET_DEVICEID",
+    "PUSHBULLET_CHANNEL_TAG",
+    "PUSHBULLET_ONSNATCH",
+    "TELEGRAM_ENABLED",
+    "TELEGRAM_TOKEN",
+    "TELEGRAM_USERID",
+    "TELEGRAM_ONSNATCH",
+    "TELEGRAM_IMAGE",
+    "SLACK_ENABLED",
+    "SLACK_WEBHOOK_URL",
+    "SLACK_ONSNATCH",
+    "MATTERMOST_ENABLED",
+    "MATTERMOST_WEBHOOK_URL",
+    "MATTERMOST_ONSNATCH",
+    "DISCORD_ENABLED",
+    "DISCORD_WEBHOOK_URL",
+    "DISCORD_ONSNATCH",
+    "EMAIL_ENABLED",
+    "EMAIL_FROM",
+    "EMAIL_TO",
+    "EMAIL_SERVER",
+    "EMAIL_USER",
+    "EMAIL_PASSWORD",
+    "EMAIL_PORT",
+    "EMAIL_ENC",
+    "EMAIL_ONGRAB",
+    "EMAIL_ONPOST",
+    "GOTIFY_ENABLED",
+    "GOTIFY_SERVER_URL",
+    "GOTIFY_TOKEN",
+    "GOTIFY_ONSNATCH",
+    "MATRIX_ENABLED",
+    "MATRIX_HOMESERVER",
+    "MATRIX_ACCESS_TOKEN",
+    "MATRIX_ROOM_ID",
+    "MATRIX_ONSNATCH",
+    # Import behavior
+    "IMP_MOVE",
+    "IMP_RENAME",
+    "IMP_METADATA",
+    "IMP_SERIESFOLDERS",
 }
 
 

frontend/src/App.tsx

@@ -1,5 +1,12 @@
 import { lazy, Suspense } from "react";
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  Navigate,
+  useParams,
+  useLocation,
+} from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
 import { AuthProvider, useAuth } from "@/contexts/AuthContext";
@@ -16,13 +23,13 @@ const DashboardPage = lazy(() => import("@/pages/DashboardPage"));
 const SeriesListPage = lazy(() => import("@/pages/SeriesListPage"));
 const SeriesDetailPage = lazy(() => import("@/pages/SeriesDetailPage"));
 const SearchPage = lazy(() => import("@/pages/SearchPage"));
-const UpcomingPage = lazy(() => import("@/pages/UpcomingPage"));
+const ReleasesPage = lazy(() => import("@/pages/ReleasesPage"));
 const WantedPage = lazy(() => import("@/pages/WantedPage"));
 const SettingsPage = lazy(() => import("@/pages/SettingsPage"));
 const StoryArcsPage = lazy(() => import("@/pages/StoryArcsPage"));
 const StoryArcDetailPage = lazy(() => import("@/pages/StoryArcDetailPage"));
 const ImportPage = lazy(() => import("@/pages/ImportPage"));
-const WeeklyPage = lazy(() => import("@/pages/WeeklyPage"));
+const ActivityPage = lazy(() => import("@/pages/ActivityPage"));
 
 // Create a client
 const queryClient = new QueryClient({
@@ -35,6 +42,37 @@ const queryClient = new QueryClient({
   },
 });
 
+/** Redirect old /series/:comicId URLs to /library/:comicId */
+function SeriesRedirect() {
+  const { comicId } = useParams();
+  const location = useLocation();
+  return (
+    <Navigate
+      to={{
+        pathname: `/library/${comicId}`,
+        search: location.search,
+        hash: location.hash,
+      }}
+      replace
+    />
+  );
+}
+
+/** Redirect old /series URLs to /library */
+function SeriesListRedirect() {
+  const location = useLocation();
+  return (
+    <Navigate
+      to={{
+        pathname: "/library",
+        search: location.search,
+        hash: location.hash,
+      }}
+      replace
+    />
+  );
+}
+
 /**
  * AppContent component - handles SSE connection and keyboard shortcuts
  * Must be inside AuthProvider to access auth context
@@ -62,20 +100,38 @@ function AppContent() {
                     <Suspense fallback={null}>
                       <Routes>
                         <Route path="/" element={<DashboardPage />} />
-                        <Route path="/series" element={<SeriesListPage />} />
+                        <Route path="/library" element={<SeriesListPage />} />
                         <Route
-                          path="/series/:comicId"
+                          path="/library/:comicId"
                           element={<SeriesDetailPage />}
                         />
+                        <Route
+                          path="/series/:comicId"
+                          element={<SeriesRedirect />}
+                        />
+                        <Route
+                          path="/series"
+                          element={<SeriesListRedirect />}
+                        />
                         <Route path="/search" element={<SearchPage />} />
-                        <Route path="/upcoming" element={<UpcomingPage />} />
+                        <Route path="/releases" element={<ReleasesPage />} />
+                        <Route
+                          path="/upcoming"
+                          element={
+                            <Navigate to="/releases?view=mine" replace />
+                          }
+                        />
+                        <Route
+                          path="/weekly"
+                          element={<Navigate to="/releases?view=all" replace />}
+                        />
                         <Route path="/wanted" element={<WantedPage />} />
                         <Route path="/story-arcs" element={<StoryArcsPage />} />
                         <Route
                           path="/story-arcs/:storyArcId"
                           element={<StoryArcDetailPage />}
                         />
-                        <Route path="/weekly" element={<WeeklyPage />} />
+                        <Route path="/activity" element={<ActivityPage />} />
                         <Route path="/import" element={<ImportPage />} />
                         <Route path="/settings" element={<SettingsPage />} />
                         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/components/ai/ChatResultCard.tsx

@@ -28,7 +28,7 @@ export function ChatResultCard({ result, onNavigate }: ChatResultCardProps) {
   const handleClick = () => {
     if (comicId) {
       if (onNavigate) onNavigate();
-      navigate(`/series/${comicId}`);
+      navigate(`/library/${comicId}`);
     }
   };
 

frontend/src/components/dashboard/RecentDownloads.tsx

@@ -51,7 +51,7 @@ function DownloadRow({ item }: { item: DownloadItem }) {
 
   return (
     <Link
-      to={`/series/${item.ComicID}`}
+      to={`/library/${item.ComicID}`}
       className="flex items-center gap-3 rounded-lg p-2 -mx-2 transition-colors hover:bg-muted/50"
     >
       {item.ComicID && !imageError ? (

frontend/src/components/dashboard/UpcomingReleases.tsx

@@ -80,7 +80,7 @@ export default function UpcomingReleases({
             {items.map((item, idx) => (
               <Link
                 key={`${item.ComicID}-${item.IssueNumber}-${idx}`}
-                to={`/series/${item.ComicID}`}
+                to={`/library/${item.ComicID}`}
                 className="flex items-center gap-3 rounded-lg p-2 -mx-2 transition-colors hover:bg-muted/50"
               >
                 <div className="flex-1 min-w-0">

frontend/src/components/layout/AppSidebar.tsx

@@ -27,7 +27,8 @@ import {
   Search,
   Calendar,
   ListTodo,
-  Newspaper,
+  BookMarked,
+  Activity,
   Settings,
   LogOut,
   Moon,
@@ -64,12 +65,16 @@ export default function AppSidebar() {
     icon: LucideIcon;
   }
 
-  const navItems: NavItem[] = [
+  const primaryNav: NavItem[] = [
     { path: "/", label: "Dashboard", icon: LayoutDashboard },
-    { path: "/series", label: "Series", icon: BookOpen },
-    { path: "/upcoming", label: "Upcoming", icon: Calendar },
+    { path: "/library", label: "Library", icon: BookOpen },
+    { path: "/releases", label: "Releases", icon: Calendar },
     { path: "/wanted", label: "Wanted", icon: ListTodo },
-    { path: "/weekly", label: "Weekly", icon: Newspaper },
+    { path: "/story-arcs", label: "Story Arcs", icon: BookMarked },
+  ];
+
+  const managementNav: NavItem[] = [
+    { path: "/activity", label: "Activity", icon: Activity },
     { path: "/import", label: "Import", icon: FolderInput },
   ];
 
@@ -137,7 +142,26 @@ export default function AppSidebar() {
       {/* Main Navigation */}
       <SidebarContent className="px-2 pt-2">
         <SidebarMenu>
-          {navItems.map(({ path, label, icon: Icon }) => (
+          {primaryNav.map(({ path, label, icon: Icon }) => (
+            <SidebarMenuItem key={path}>
+              <SidebarMenuButton
+                asChild
+                isActive={isActive(path)}
+                tooltip={label}
+              >
+                <Link to={path} onClick={handleNavClick}>
+                  <Icon className="w-4 h-4" />
+                  <span>{label}</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+
+        <SidebarSeparator className="my-2" />
+
+        <SidebarMenu>
+          {managementNav.map(({ path, label, icon: Icon }) => (
             <SidebarMenuItem key={path}>
               <SidebarMenuButton
                 asChild

frontend/src/components/queue/WantedTable.tsx

@@ -188,7 +188,7 @@ export default function WantedTable({
     <div>
       <DataTable
         table={table}
-        onRowClick={(row) => navigate(`/series/${row.ComicID}`)}
+        onRowClick={(row) => navigate(`/library/${row.ComicID}`)}
       />
       {pagination && onNextPage && onPrevPage && (
         <DataTableServerPagination

frontend/src/components/search/ComicCard.tsx

@@ -38,7 +38,7 @@ export default function ComicCard({ comic }: ComicCardProps) {
         if (data.comicid === comicIdRef.current) {
           if (data.status === "success") {
             // Navigate to series detail page
-            navigate(`/series/${comicIdRef.current}`);
+            navigate(`/library/${comicIdRef.current}`);
             setIsProcessing(false);
             comicIdRef.current = null;
           } else if (data.status === "failure") {

frontend/src/components/search/SearchResultsTable.tsx

@@ -221,7 +221,7 @@ function ActionCell({
 
         if (data.comicid === comicIdRef.current) {
           if (data.status === "success") {
-            navigate(`/series/${comicIdRef.current}`);
+            navigate(`/library/${comicIdRef.current}`);
             setIsProcessing(false);
             comicIdRef.current = null;
           } else if (data.status === "failure") {

frontend/src/components/series/SeriesTable.tsx

@@ -463,7 +463,7 @@ export default function SeriesTable({
 
       <DataTable
         table={table}
-        onRowClick={(row) => navigate(`/series/${row.ComicID}`)}
+        onRowClick={(row) => navigate(`/library/${row.ComicID}`)}
       />
 
       <div className="flex items-center justify-between">