When no status filter is set on a WatchedList, it will show all the statuses in separate sections

doc/docs/importing/movary.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 2
+---
+
+# Movary
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+We don't yet have this feature documentend, but at least it's there :)

doc/docs/importing/myanimelist.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 4
 ---
 
 # MyAnimeList

doc/docs/importing/tmdb.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# TMDb
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+We don't yet have this feature documentend, but at least it's there and it supports both `.txt` lists and `.csv` exports :)

doc/docs/importing/watcharr.md

@@ -0,0 +1,15 @@
+---
+sidebar_position: 3
+---
+
+# Watcharr
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+1. Export your list from another Watcharr instance by going to Profile -> Export.
+
+2. Save the export anywhere.
+
+3. Drag and drop your `.json` file into your new Watcharr instance.

doc/docs/usage/adding-to-watchlist.md

@@ -30,7 +30,7 @@ To get started, you can follow along with these steps to add your first movie/sh
 
 If you prefer, you can also do this by clicking/tapping on the active poster again.
 This will take you to the contents full page. Here you can see all the options, including
-adding `Thoughts` for the content.
+adding `Thoughts` for the content and pinning it to the top of your list.
 
 ![Content full page](./img/content-full-page.png)
 

src/lib/WatchedList.svelte

@@ -3,13 +3,8 @@
   import Icon from "@/lib/Icon.svelte";
   import Poster from "@/lib/poster/Poster.svelte";
   import PosterList from "@/lib/poster/PosterList.svelte";
-  import {
-    activeFilters,
-    activeSort,
-    clearActiveFilters,
-    serverFeatures,
-    userSettings
-  } from "@/store";
+  import { activeFilters, activeSort, serverFeatures, userSettings } from "@/store";
+  import { WatchedStatus } from "@/types";
   import type { Watched } from "@/types";
   import GamePoster from "./poster/GamePoster.svelte";
   import { get } from "svelte/store";
@@ -166,81 +161,81 @@
   }
 </script>
 
-<PosterList>
-  {#if watched?.length > 0}
-    {#each watched as w (w.id)}
-      {#if w.game}
-        <GamePoster
-          id={w.id}
-          rating={w.rating}
-          status={w.status}
-          media={{
-            id: w.game.igdbId,
-            coverId: w.game.coverId,
-            name: w.game.name,
-            summary: w.game.summary,
-            firstReleaseDate: w.game.releaseDate,
-            poster: w.game.poster
-          }}
-          disableInteraction={isPublicList}
-          extraDetails={{
-            dateAdded: w.createdAt,
-            dateModified: w.updatedAt
-          }}
-          fluidSize={true}
-          pinned={w.pinned}
-        />
-      {:else if w.content}
-        <Poster
-          id={w.id}
-          media={{
-            id: w.content.tmdbId,
-            poster_path: w.content.poster_path,
-            title: w.content.title,
-            overview: w.content.overview,
-            media_type: w.content.type,
-            release_date: w.content.release_date,
-            first_air_date: w.content.first_air_date
-          }}
-          rating={w.rating}
-          status={w.status}
-          disableInteraction={isPublicList}
-          extraDetails={{
-            dateAdded: w.createdAt,
-            dateModified: w.updatedAt,
-            lastWatched: getLatestWatchedInTv(w.watchedSeasons, w.watchedEpisodes)
-          }}
-          fluidSize={true}
-          pinned={w.pinned}
-        />
-      {/if}
-    {/each}
-  {:else}
-    <div class="empty-list">
-      {#if list?.length > 0}
-        <!-- `watched` (filtered list) is empty, but `list` (unfiltered) isn't,
-          so we should let the user know why there is nothing to show. -->
-        <Icon i="filter-circle" wh={80} />
-        <h2 class="norm">Filters are hiding all results!</h2>
-        <h4 class="norm">Try changing or removing your active filters.</h4>
-        <button on:click={() => clearActiveFilters()}>Clear Filters</button>
-      {:else}
-        <Icon i="reel" wh={80} />
-        {#if isPublicList}
-          <h2 class="norm">This watched list is empty!</h2>
-          <h4 class="norm">Come back later to see if they have added anything.</h4>
-        {:else}
-          <h2 class="norm">Your watched list is empty!</h2>
-          <h4 class="norm">Try searching for something you would like to add.</h4>
-          <button on:click={() => goto("/import")}>Import</button>
+{#if watched?.length === 0}
+  <div class="central-div">
+    <Icon i="reel" wh={80} />
+    {#if isPublicList}
+      <h2 class="norm">This watched list is empty!</h2>
+      <h4 class="norm">Come back later to see if they have added anything.</h4>
+    {:else}
+      <h2 class="norm">Your watched list is empty!</h2>
+      <h4 class="norm">Try searching for something you would like to add.</h4>
+      <button on:click={() => goto("/import")}>Import</button>
+    {/if}
+  </div>
+{:else}
+  {#each filters.status.length > 0 ? ["ALL"] : Object.values(WatchedStatus) as status}
+    {#if filters.status.length === 0}
+      <div class="central-div">
+        <h2 class="norm first-upper-case">{status}</h2>
+      </div>
+    {/if}
+    <PosterList>
+      {#each watched as w (w.id)}
+        {#if status.includes(w.status) || filters.status.length > 0}
+          {#if w.game}
+            <GamePoster
+              id={w.id}
+              rating={w.rating}
+              status={w.status}
+              media={{
+                id: w.game.igdbId,
+                coverId: w.game.coverId,
+                name: w.game.name,
+                summary: w.game.summary,
+                firstReleaseDate: w.game.releaseDate,
+                poster: w.game.poster
+              }}
+              disableInteraction={isPublicList}
+              extraDetails={{
+                dateAdded: w.createdAt,
+                dateModified: w.updatedAt
+              }}
+              fluidSize={true}
+              pinned={w.pinned}
+            />
+          {:else if w.content}
+            <Poster
+              id={w.id}
+              media={{
+                id: w.content.tmdbId,
+                poster_path: w.content.poster_path,
+                title: w.content.title,
+                overview: w.content.overview,
+                media_type: w.content.type,
+                release_date: w.content.release_date,
+                first_air_date: w.content.first_air_date
+              }}
+              rating={w.rating}
+              status={w.status}
+              disableInteraction={isPublicList}
+              extraDetails={{
+                dateAdded: w.createdAt,
+                dateModified: w.updatedAt,
+                lastWatched: getLatestWatchedInTv(w.watchedSeasons, w.watchedEpisodes)
+              }}
+              fluidSize={true}
+              pinned={w.pinned}
+            />
+          {/if}
         {/if}
-      {/if}
-    </div>
-  {/if}
-</PosterList>
+      {/each}
+    </PosterList>
+  {/each}
+{/if}
 
 <style lang="scss">
-  .empty-list {
+  .central-div {
     display: flex;
     flex-flow: column;
     gap: 5px;
@@ -261,4 +256,12 @@
       margin-top: 15px;
     }
   }
+
+  .first-upper-case {
+    text-transform: lowercase;
+  }
+
+  .first-upper-case::first-letter {
+    text-transform: uppercase;
+  }
 </style>

src/types.ts

@@ -1,4 +1,12 @@
-export type WatchedStatus = "PLANNED" | "WATCHING" | "FINISHED" | "HOLD" | "DROPPED";
+export const WatchedStatus = {
+  WATCHING: "WATCHING",
+  PLANNED: "PLANNED",
+  FINISHED: "FINISHED",
+  HOLD: "ON HOLD",
+  DROPPED: "DROPPED"
+} as const;
+
+export type WatchedStatus = (typeof WatchedStatus)[keyof typeof WatchedStatus];
 export type ContentType = "tv" | "movie";
 export type MediaType = ContentType | "person";