})
30 |
31 | Once configured, anytime content is added, modified, or removed via Sonarr or Radarr, your Plex libraries will automatically refresh to reflect these changes.
--------------------------------------------------------------------------------
/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/docs/sidebars.ts:
--------------------------------------------------------------------------------
1 | import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'
2 | import apiSidebar from './docs/api/sidebar'
3 |
4 | // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
5 |
6 | /**
7 | * Creating a sidebar enables you to:
8 | - create an ordered group of docs
9 | - render a sidebar for each doc of that group
10 | - provide next/previous navigation
11 |
12 | The sidebars can be generated from the filesystem, or explicitly defined here.
13 |
14 | Create as many sidebars as you want.
15 | */
16 | const sidebars: SidebarsConfig = {
17 | // By default, Docusaurus generates a sidebar from the docs folder structure
18 | tutorialSidebar: [
19 | 'intro',
20 | {
21 | type: 'category',
22 | label: 'Installation',
23 | items: ['installation/quick-start', 'installation/configuration'],
24 | },
25 | {
26 | type: 'category',
27 | label: 'Features',
28 | items: ['features/content-routing'],
29 | },
30 | {
31 | type: 'category',
32 | label: 'Notifications',
33 | items: [
34 | 'notifications/discord',
35 | 'notifications/apprise',
36 | 'notifications/tautulli',
37 | ],
38 | },
39 | {
40 | type: 'category',
41 | label: 'Utilities',
42 | items: [
43 | 'utilities/delete-sync',
44 | 'utilities/plex-notifications',
45 | 'utilities/user-tagging',
46 | ],
47 | },
48 | 'architecture',
49 | 'contributing',
50 | {
51 | type: 'category',
52 | label: 'API Reference',
53 | collapsed: false,
54 | items: apiSidebar,
55 | },
56 | ],
57 | }
58 |
59 | export default sidebars
60 |
--------------------------------------------------------------------------------
/docs/src/components/GitHubStatsButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { Github } from 'lucide-react'
3 |
4 | type GitHubStats = {
5 | stars: number
6 | }
7 |
8 | export default function GitHubStatsButton(): React.ReactElement {
9 | const [stats, setStats] = useState
36 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/ColorModeToggle/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from 'react'
2 | import { useThemeConfig } from '@docusaurus/theme-common'
3 | import type { Props } from '@theme/Navbar/ColorModeToggle'
4 | import { DocModeToggle } from '@site/src/components/DocModeToggle'
5 |
6 | export default function NavbarColorModeToggle({ className }: Props): ReactNode {
7 | const disabled = useThemeConfig().colorMode.disableSwitch
8 |
9 | if (disabled) {
10 | return null
11 | }
12 |
13 | return (
14 |
15 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/ColorModeToggle/styles.module.css:
--------------------------------------------------------------------------------
1 | .darkNavbarColorModeToggle:hover {
2 | background: var(--ifm-color-gray-800);
3 | }
4 |
5 | /* Ensure vertical alignment */
6 | div[class*="colorModeToggle"] {
7 | display: flex;
8 | align-items: center;
9 | height: 100%;
10 | margin: 0;
11 | padding: 0;
12 | }
13 |
14 | /* Remove any margins or padding */
15 | button[class*="buttonStyle"] {
16 | margin: 0 !important;
17 | align-self: center;
18 | vertical-align: middle;
19 | }
20 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/Content/styles.module.css:
--------------------------------------------------------------------------------
1 | /*
2 | Hide color mode toggle in small viewports
3 | */
4 | @media (max-width: 996px) {
5 | .colorModeToggle {
6 | display: none;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/Layout/styles.module.css:
--------------------------------------------------------------------------------
1 | .navbarHideable {
2 | transition: transform var(--ifm-transition-fast) ease;
3 | }
4 |
5 | .navbarHidden {
6 | transform: translate3d(0, calc(-100% - 2px), 0);
7 | }
8 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/Logo/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from 'react'
2 | import Logo from '@theme/Logo'
3 |
4 | export default function NavbarLogo(): ReactNode {
5 | return (
6 |
29 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/MobileSidebar/Layout/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from 'react'
2 | import clsx from 'clsx'
3 | import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
4 | import type { Props } from '@theme/Navbar/MobileSidebar/Layout'
5 |
6 | export default function NavbarMobileSidebarLayout({
7 | header,
8 | primaryMenu,
9 | secondaryMenu,
10 | }: Props): ReactNode {
11 | const { shown: secondaryMenuShown } = useNavbarSecondaryMenu()
12 | return (
13 |
14 | {header}
15 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from 'react'
2 | import { useThemeConfig } from '@docusaurus/theme-common'
3 | import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
4 | import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem'
5 |
6 | function useNavbarItems() {
7 | // TODO temporary casting until ThemeConfig type is improved
8 | return useThemeConfig().navbar.items as NavbarItemConfig[]
9 | }
10 |
11 | // The primary menu displays the navbar items
12 | export default function NavbarMobilePrimaryMenu(): ReactNode {
13 | const mobileSidebar = useNavbarMobileSidebar()
14 |
15 | // TODO how can the order be defined for mobile?
16 | // Should we allow providing a different list of items?
17 | const items = useNavbarItems()
18 |
19 | return (
20 |
20 |
23 | {primaryMenu}
21 | {secondaryMenu}
22 | -
21 | {items.map((item, i) => (
22 |
13 | {children}
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/Search/styles.module.css:
--------------------------------------------------------------------------------
1 | /*
2 | Workaround to avoid rendering empty search container
3 | See https://github.com/facebook/docusaurus/pull/9385
4 | */
5 | .navbarSearchContainer:empty {
6 | display: none;
7 | }
8 |
9 | @media (max-width: 996px) {
10 | .navbarSearchContainer {
11 | position: absolute;
12 | right: var(--ifm-navbar-padding-horizontal);
13 | }
14 | }
15 |
16 | @media (min-width: 997px) {
17 | .navbarSearchContainer {
18 | padding: var(--ifm-navbar-item-padding-vertical)
19 | var(--ifm-navbar-item-padding-horizontal);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/docs/src/theme/Navbar/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { type ReactNode } from 'react'
2 | import NavbarLayout from '@theme/Navbar/Layout'
3 | import NavbarContent from '@theme/Navbar/Content'
4 |
5 | export default function Navbar(): ReactNode {
6 | return (
7 |
22 |
26 | {status.charAt(0).toUpperCase() + status.slice(1)}
27 |
28 |
29 | )
30 | }
--------------------------------------------------------------------------------
/src/client/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
2 |
3 | const AspectRatio = AspectRatioPrimitive.Root
4 |
5 | export { AspectRatio }
6 |
--------------------------------------------------------------------------------
/src/client/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import { cva, type VariantProps } from "class-variance-authority"
2 |
3 | import type * as React from "react"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const badgeVariants = cva(
8 | "inline-flex items-center rounded-base border-2 border-border px-2.5 font-base py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-main text-mtext",
13 | neutral: "bg-bw text-text",
14 | warn: "bg-fun text-mtext",
15 | },
16 | },
17 | defaultVariants: {
18 | variant: "default",
19 | },
20 | },
21 | )
22 |
23 | export interface BadgeProps
24 | extends React.HTMLAttributes
26 |
30 | {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
31 |
32 |
33 | )
34 | }
--------------------------------------------------------------------------------
/src/client/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | import { useToast } from '@/hooks/use-toast'
2 | import {
3 | Toast,
4 | ToastClose,
5 | ToastDescription,
6 | ToastProvider,
7 | ToastTitle,
8 | ToastViewport,
9 | } from '@/components/ui/toast'
10 |
11 | export function Toaster() {
12 | const { toasts } = useToast()
13 |
14 | return (
15 |
19 | {title && {title} }
20 | {description && (
21 | {description}
22 | )}
23 |
24 | {action}
25 |
11 | v{__APP_VERSION__}
12 |
13 | )
14 | }
--------------------------------------------------------------------------------
/src/client/features/auth/components/login-error.tsx:
--------------------------------------------------------------------------------
1 | import { AlertCircle } from 'lucide-react'
2 | import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
3 |
4 | interface LoginErrorMessageProps {
5 | message: string
6 | }
7 |
8 | export function LoginErrorMessage({ message }: LoginErrorMessageProps) {
9 | return (
10 |
13 |
14 |
15 |
17 | Enter your credentials to login
18 |
19 |
20 |
21 |
26 |
27 |
28 | )
29 | }
30 |
31 | export default LoginPage
32 |
--------------------------------------------------------------------------------
/src/client/features/auth/schemas/login-schema.ts:
--------------------------------------------------------------------------------
1 | import * as z from 'zod'
2 |
3 | const PasswordSchema = z
4 | .string()
5 | .min(8, 'Password must be at least 8 characters long')
6 |
7 | export const loginFormSchema = z.object({
8 | email: z
9 | .string()
10 | .trim()
11 | .min(1, 'Email is required')
12 | .email('Please enter a valid email address')
13 | .refine((email) => email.includes('@'), {
14 | message: 'Please include an @ symbol in the email address',
15 | })
16 | .refine((email) => email.includes('.'), {
17 | message: 'Please include a domain in the email address',
18 | }),
19 | password: PasswordSchema,
20 | })
21 |
22 | export type LoginFormSchema = z.inferPulsarr
16 |
23 |
25 |
17 |
22 |
18 |
20 |
13 |
14 |
15 |
19 | Enter details to create a new admin user
20 |
21 |
22 |
23 |
28 |
29 |
30 | )
31 | }
32 |
33 | export default CreateUserPage
34 |
--------------------------------------------------------------------------------
/src/client/features/create-user/schemas/create-user-schema.ts:
--------------------------------------------------------------------------------
1 | import * as z from 'zod'
2 |
3 | export const PasswordSchema = z
4 | .string()
5 | .min(8, 'Password must be at least 8 characters')
6 |
7 | export const EmailSchema = z
8 | .string()
9 | .trim()
10 | .min(1, 'Email is required')
11 | .email('Please enter a valid email address')
12 | .refine((email) => email.includes('@'), {
13 | message: 'Please include an @ symbol in the email address',
14 | })
15 | .refine((email) => email.includes('.'), {
16 | message: 'Please include a domain in the email address',
17 | })
18 |
19 | export const createUserFormSchema = z
20 | .object({
21 | email: EmailSchema,
22 | username: z
23 | .string()
24 | .trim()
25 | .min(3, 'Username must be at least 3 characters')
26 | .max(255, 'Username must be less than 255 characters'),
27 | password: PasswordSchema,
28 | confirmPassword: z.string(),
29 | })
30 | .refine((data) => data.password === data.confirmPassword, {
31 | message: "Passwords don't match",
32 | path: ['confirmPassword'],
33 | })
34 |
35 | export type CreateUserFormSchema = z.infer16 | Create User 17 |
18 |
25 |
27 |
16 |
18 |
10 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/client/features/dashboard/components/stats-header.tsx:
--------------------------------------------------------------------------------
1 | import { Loader2, RefreshCw } from 'lucide-react'
2 | import { Button } from '@/components/ui/button'
3 | import { WatchlistStatusBadge } from '@/components/ui/workflow-status-badge'
4 | import { useDashboardStats } from '@/features/dashboard/hooks/useDashboardStats'
5 |
6 | interface StatsHeaderProps {
7 | onRefresh: () => PromisePopularity Rankings
11 | 12 |
13 |
27 |
17 |
22 |
23 | {/* Refresh and Last Updated Container */}
24 |
18 |
21 | Main Workflow
19 |
25 |
38 |
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/client/features/dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect } from 'react'
2 | import { StatsHeader } from '@/features/dashboard/components/stats-header'
3 | import { PopularityRankings } from '@/features/dashboard/components/popularity-rankings'
4 | import { AnalyticsDashboard } from '@/features/dashboard/components/analytics-dashboard'
5 | import { useDashboardStats } from '@/features/dashboard/hooks/useDashboardStats'
6 |
7 | export function DashboardPage() {
8 | const { refreshStats, isLoading } = useDashboardStats()
9 |
10 | useEffect(() => {
11 | refreshStats()
12 | }, [refreshStats])
13 |
14 | const handleRefresh = useCallback(async () => {
15 | if (!isLoading) {
16 | await refreshStats()
17 | }
18 | }, [refreshStats, isLoading])
19 |
20 | return (
21 | 39 | Last updated: {lastRefreshed.toLocaleTimeString()} 40 |
41 |
22 |
26 | )
27 | }
28 |
29 | export default DashboardPage
30 |
--------------------------------------------------------------------------------
/src/client/features/notifications/components/discord/discord-clear-alert.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Credenza,
3 | CredenzaContent,
4 | CredenzaHeader,
5 | CredenzaTitle,
6 | CredenzaDescription,
7 | CredenzaBody,
8 | CredenzaFooter,
9 | CredenzaClose,
10 | } from '@/components/ui/credenza'
11 | import { Button } from '@/components/ui/button'
12 |
13 | interface DiscordClearAlertProps {
14 | open: boolean
15 | onOpenChange: (open: boolean) => void
16 | onConfirm: () => Promise
4 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/src/client/features/notifications/hooks/useNotificationsConfig.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { useConfigStore } from '@/stores/configStore'
3 |
4 | export function useNotificationsConfig() {
5 | const [isInitialized, setIsInitialized] = useState(false)
6 | const config = useConfigStore((state) => state.config)
7 | const initialize = useConfigStore((state) => state.initialize)
8 |
9 | useEffect(() => {
10 | initialize()
11 | }, [initialize])
12 |
13 | useEffect(() => {
14 | if (config) {
15 | setIsInitialized(true)
16 | }
17 | }, [config])
18 |
19 | return {
20 | isInitialized,
21 | config,
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/client/features/notifications/index.tsx:
--------------------------------------------------------------------------------
1 | import { NotificationsSection } from '@/features/notifications/components/notifications-section'
2 | import { useNotificationsConfig } from '@/features/notifications/hooks/useNotificationsConfig'
3 |
4 | export default function NotificationsConfigPage() {
5 | const { isInitialized } = useNotificationsConfig()
6 |
7 | return (
8 | 5 | Email notification settings are not yet implemented in the backend. 6 | Check back later for this feature. 7 |
8 |
9 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/client/features/plex/hooks/usePlexSetup.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { useConfigStore } from '@/stores/configStore'
3 |
4 | export function usePlexSetup() {
5 | const [showSetupModal, setShowSetupModal] = useState(false)
6 | const updateConfig = useConfigStore((state) => state.updateConfig)
7 | const fetchUserData = useConfigStore((state) => state.fetchUserData)
8 | const refreshRssFeeds = useConfigStore((state) => state.refreshRssFeeds)
9 |
10 | // Function to handle setting up a new Plex token
11 | const setupPlexToken = async (token: string) => {
12 | // Update config with new token
13 | await updateConfig({
14 | plexTokens: [token],
15 | })
16 |
17 | // Sync watchlists
18 | await Promise.all([
19 | fetch('/v1/plex/self-watchlist-token', {
20 | method: 'GET',
21 | headers: { Accept: 'application/json' },
22 | }),
23 | fetch('/v1/plex/others-watchlist-token', {
24 | method: 'GET',
25 | headers: { Accept: 'application/json' },
26 | }),
27 | ])
28 |
29 | // Generate RSS feeds
30 | await refreshRssFeeds()
31 |
32 | // Refresh user data
33 | await fetchUserData()
34 | }
35 |
36 | return {
37 | showSetupModal,
38 | setShowSetupModal,
39 | setupPlexToken,
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/client/features/plex/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useConfigStore } from '@/stores/configStore'
3 | import PlexConnectionSection from '@/features/plex/components/connection/connection-section'
4 | import UserTableSection from '@/features/plex/components/user/user-table-section'
5 | import SetupModal from '@/features/plex/components/setup/setup-modal'
6 | import { usePlexSetup } from '@/features/plex/hooks/usePlexSetup'
7 |
8 | export default function PlexConfigPage() {
9 | const config = useConfigStore((state) => state.config)
10 | const initialize = useConfigStore((state) => state.initialize)
11 | const { showSetupModal, setShowSetupModal } = usePlexSetup()
12 |
13 | useEffect(() => {
14 | initialize()
15 | }, [initialize])
16 |
17 | // Check if Plex token is missing and show setup modal
18 | useEffect(() => {
19 | if (config && (!config.plexTokens || config.plexTokens.length === 0)) {
20 | setShowSetupModal(true)
21 | }
22 | }, [config, setShowSetupModal])
23 |
24 | return (
25 |
26 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/client/features/plex/store/constants.ts:
--------------------------------------------------------------------------------
1 | // Plex API Status Codes
2 | export const PLEX_STATUS = {
3 | SUCCESS: 200,
4 | UNAUTHORIZED: 401,
5 | NOT_FOUND: 404,
6 | }
7 |
8 | // Minimum loading delay for UI feedback (ms)
9 | export const MIN_LOADING_DELAY = 500
10 |
--------------------------------------------------------------------------------
/src/client/features/plex/store/types.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | UpdateUser,
3 | BulkUpdateRequest,
4 | } from '@root/schemas/users/users.schema'
5 | import type { SelfWatchlistSuccess } from '@root/schemas/plex/self-watchlist-token.schema'
6 | import type { OthersWatchlistSuccess } from '@root/schemas/plex/others-watchlist-token.schema'
7 | import type { PingSuccess } from '@root/schemas/plex/ping.schema'
8 | import type { RssFeedsSuccess } from '@root/schemas/plex/generate-rss-feeds.schema'
9 | import type { UserWatchlistInfo } from '@/stores/configStore'
10 | import type { Row } from '@tanstack/react-table'
11 |
12 | export interface PlexConnectionValues {
13 | plexToken: string
14 | }
15 |
16 | export type ConnectionStatus =
17 | | 'idle'
18 | | 'loading'
19 | | 'testing'
20 | | 'success'
21 | | 'error'
22 | export type SyncStatus = 'idle' | 'loading' | 'success' | 'error'
23 | export type PlexUserTableRow = Row
29 | {/* Plex Connection Section */}
30 |
35 |