> ## Documentation Index
> Fetch the complete documentation index at: https://devperez08-platform-list-anime-54.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Watch Status Types

> Understanding the different watch statuses in EpiNeko and how to use them effectively

## Overview

EpiNeko uses a status system to categorize anime in your library based on your viewing progress and intentions. This helps organize your collection and provides meaningful statistics about your viewing habits.

<CardGroup cols={2}>
  <Card title="Watching" icon="tv" color="#ff00a8">
    Currently watching and actively following
  </Card>

  <Card title="Completed" icon="circle-check" color="#22c55e">
    Finished watching all available episodes
  </Card>

  <Card title="Plan to Watch" icon="clock" color="#eab308">
    Added to library but not started yet
  </Card>

  <Card title="Dropped" icon="circle-xmark" color="#ef4444">
    Started but decided not to continue
  </Card>
</CardGroup>

## Status Type Definition

The watch status is defined as a TypeScript union type and PostgreSQL enum:

```typescript theme={null}
export type LibraryStatus = 'watching' | 'completed' | 'dropped' | 'plan_to_watch';
```

**Database Enum** (supabase/migrations/20260218\_initial\_schema.sql:45):

```sql theme={null}
create type public.library_status as enum (
  'watching', 
  'completed', 
  'dropped', 
  'plan_to_watch'
);
```

<Note>
  The enum is defined at the database level, ensuring data integrity and preventing invalid status values.
</Note>

## Status Details

### Watching (watching)

Indicates you are currently watching this anime and actively following new episodes or continuing through the series.

<ParamField path="watching" type="LibraryStatus">
  **Label:** 📺 VIENDO

  **When to use:**

  * You're actively watching episodes
  * You're keeping up with currently airing episodes
  * You plan to watch the next episode soon

  **Typical behavior:**

  * Appears in "Currently Watching" sections
  * Updates episode count as you progress
  * Used for tracking active viewing
</ParamField>

**Example Usage:**

```typescript theme={null}
await addToLibrary({
  anime_id_jikan: 52991,
  title: "Sousou no Frieren",
  status: 'watching',
  episodes_watched: 12
});
```

### Completed (completed)

Marks an anime as finished - you've watched all available episodes.

<ParamField path="completed" type="LibraryStatus">
  **Label:** ✅ COMPLETADO

  **When to use:**

  * You've finished all episodes
  * Series has ended and you've seen it all
  * You've watched everything currently available for ongoing series

  **Automatic behavior:**

  * Automatically set when `episodes_watched` equals total episodes
  * Contributes to completion rate statistics
  * Enables scoring/rating
</ParamField>

**Auto-completion Logic** (src/components/anime/EpisodeList.tsx:49-50):

```typescript theme={null}
const isCompleted = totalEpisodes ? newCount >= totalEpisodes : false;
const newStatus: LibraryStatus = isCompleted ? 'completed' : 'watching';
```

**Example:**

```typescript theme={null}
// Manual completion
await updateLibraryItem(52991, { 
  status: 'completed',
  episodes_watched: 28,
  score: 9
});
```

### Plan to Watch (plan\_to\_watch)

Added to your library but not started watching yet.

<ParamField path="plan_to_watch" type="LibraryStatus">
  **Label:** ⏳ PENDIENTE

  **When to use:**

  * You want to watch it later
  * You're building a watchlist
  * You're interested but don't have time now

  **Default behavior:**

  * Default status when adding from AnimeDetailsModal
  * Often used with `episodes_watched: 0`
  * Acts as a bookmark or wishlist
</ParamField>

**Default Status** (src/components/anime/AnimeDetailsModal.tsx:54):

```typescript theme={null}
const item: LibraryItem = {
  anime_id_jikan: anime.mal_id,
  title: anime.title,
  image_url: anime.image,
  status: 'plan_to_watch',  // Default when adding
};
```

**Example:**

```typescript theme={null}
// Add to watchlist
await addToLibrary({
  anime_id_jikan: 54595,
  title: "Chainsaw Man",
  status: 'plan_to_watch',
  episodes_watched: 0
});
```

### Dropped (dropped)

You started watching but decided not to continue.

<ParamField path="dropped" type="LibraryStatus">
  **Label:** ❌ ABANDONADO

  **When to use:**

  * You started but lost interest
  * Not enjoying the series
  * Decided it's not for you

  **Purpose:**

  * Keeps record of what you've tried
  * Prevents re-adding by mistake
  * Provides honest viewing statistics
</ParamField>

**Example:**

```typescript theme={null}
await updateLibraryItem(12345, { 
  status: 'dropped',
  episodes_watched: 3  // Stopped after episode 3
});
```

## Status Labels

UI-friendly labels with emojis for each status:

```typescript theme={null}
const statusLabels: Record<LibraryStatus, string> = {
  watching: '📺 VIENDO',
  completed: '✅ COMPLETADO',
  plan_to_watch: '⏳ PENDIENTE',
  dropped: '❌ ABANDONADO'
};
```

**Implementation** (src/components/anime/LibraryButton.tsx:73-78):

* Used in dropdown menus
* Displayed on profile statistics
* Shown in library filters

## Changing Status

### Via LibraryButton

The LibraryButton component provides a dropdown to change status:

<Steps>
  <Step title="Click Main Button">
    Adds anime to library with default status or removes if already in library
  </Step>

  <Step title="Status Dropdown Appears">
    Only visible when anime is in library
  </Step>

  <Step title="Select New Status">
    Click any status from the dropdown menu
  </Step>

  <Step title="Update Applied">
    Library item is updated with new status
  </Step>
</Steps>

**Code Example** (src/components/anime/LibraryButton.tsx:96-113):

```tsx theme={null}
{isInLibrary && (
  <div className="dropdown">
    <button className="btn">{statusLabels[status]}</button>
    <ul className="dropdown-content menu">
      {(Object.keys(statusLabels) as LibraryStatus[]).map((s) => (
        <li key={s}>
          <button 
            onClick={() => handleLibraryAction(s)}
            className={status === s ? 'text-primary' : 'text-zinc-400'}
          >
            {statusLabels[s]}
          </button>
        </li>
      ))}
    </ul>
  </div>
)}
```

### Programmatic Updates

Update status directly via API:

```typescript theme={null}
import { updateLibraryItem } from '@/services/library';

// Change to watching
await updateLibraryItem(animeId, { status: 'watching' });

// Mark as completed with score
await updateLibraryItem(animeId, { 
  status: 'completed',
  score: 8
});

// Mark as dropped
await updateLibraryItem(animeId, { status: 'dropped' });
```

## Status-Based Filtering

Filter library by status for organization:

```typescript theme={null}
import { getLibrary } from '@/services/library';

const library = await getLibrary();

// Get all watching anime
const watching = library.filter(item => item.status === 'watching');

// Get completed anime
const completed = library.filter(item => item.status === 'completed');

// Get plan to watch
const planToWatch = library.filter(item => item.status === 'plan_to_watch');

// Get dropped
const dropped = library.filter(item => item.status === 'dropped');
```

**Profile Statistics** (src/app/profile/page.tsx:49-55):

```typescript theme={null}
const stats = {
  total: library.length,
  watching: library.filter(i => i.status === 'watching').length,
  completed: library.filter(i => i.status === 'completed').length,
  planToWatch: library.filter(i => i.status === 'plan_to_watch').length,
  dropped: library.filter(i => i.status === 'dropped').length,
};
```

## Automatic Status Changes

Some status changes happen automatically based on user actions:

<Tabs>
  <Tab title="Episode Progress">
    When marking episodes as watched:

    ```typescript theme={null}
    // If all episodes watched
    if (newCount >= totalEpisodes) {
      status = 'completed';
    } 
    // If some episodes watched
    else if (newCount > 0) {
      status = 'watching';
    }
    // If no episodes watched
    else {
      status = 'plan_to_watch';
    }
    ```

    Implementation: src/components/anime/EpisodeList.tsx:44-70
  </Tab>

  <Tab title="Default on Add">
    When adding via modal without specifying:

    ```typescript theme={null}
    // Defaults to plan_to_watch
    const item: LibraryItem = {
      anime_id_jikan: animeId,
      title: title,
      status: 'plan_to_watch'  // Default
    };
    ```
  </Tab>
</Tabs>

## Status Colors

Visual color coding for each status:

<CodeGroup>
  ```css Watching theme={null}
  .status-watching {
    color: #ff00a8;        /* Primary pink */
    background: #ff00a8/10;
    border: #ff00a8/30;
  }
  ```

  ```css Completed   theme={null}
  .status-completed {
    color: #22c55e;        /* Green */
    background: #22c55e/10;
    border: #22c55e/30;
  }
  ```

  ```css Plan to Watch theme={null}
  .status-plan {
    color: #eab308;        /* Yellow */
    background: #eab308/10;
    border: #eab308/30;
  }
  ```

  ```css Dropped theme={null}
  .status-dropped {
    color: #ef4444;        /* Red */
    background: #ef4444/10;
    border: #ef4444/30;
  }
  ```
</CodeGroup>

**Progress Bar Colors** (src/app/profile/page.tsx:151-154):

* Watching: `bg-primary` (pink)
* Completed: `bg-green-500`
* Plan to Watch: `bg-yellow-500`
* Dropped: `bg-red-500`

## Status Best Practices

<CardGroup cols={2}>
  <Card title="Be Honest" icon="heart">
    Use "dropped" instead of keeping unwatched anime as "watching"

    Provides accurate viewing statistics
  </Card>

  <Card title="Update Regularly" icon="arrows-rotate">
    Change status as your viewing situation changes

    Keeps library organized and current
  </Card>

  <Card title="Use Plan to Watch" icon="bookmark">
    Add interesting anime to "plan to watch" as bookmarks

    Build your watchlist for later
  </Card>

  <Card title="Complete Properly" icon="check-double">
    Mark as completed only when fully finished

    Makes completion statistics meaningful
  </Card>
</CardGroup>

## Database Constraints

The status field has constraints at the database level:

```sql theme={null}
create table public.user_library (
  -- ...
  status public.library_status default 'watching' not null,
  -- ...
);
```

**Key Points:**

* Status is required (NOT NULL)
* Must be one of the four enum values
* Defaults to 'watching' if not specified
* Database rejects invalid values

<Warning>
  Attempting to set an invalid status will result in a database error. Always use the predefined LibraryStatus type values.
</Warning>

## Status Statistics

View your status distribution on the profile page:

```typescript theme={null}
// Calculate percentages
const watchingPercent = (stats.watching / stats.total) * 100;
const completedPercent = (stats.completed / stats.total) * 100;
const planPercent = (stats.planToWatch / stats.total) * 100;
const droppedPercent = (stats.dropped / stats.total) * 100;

// Completion rate
const completionRate = (stats.completed / stats.total) * 100;
```

**Visualization:**

* Progress bars showing distribution
* Numeric counts for each status
* Completion percentage calculation
* Visual color coding

## Related Features

* [Library Management](/features/library-management) - Managing your collection
* [Progress Tracking](/features/progress-tracking) - Episode tracking
* [Profile & Settings](/features/profile-settings) - Viewing statistics
* [Scoring System](/features/scoring) - Rating completed anime