chore: update documentation to use mise commands

docs/docs/developer/database-migrations.md

@@ -5,7 +5,7 @@ After making any changes in the `server/src/schema`, a database migration need t
 1. Run the command
 
 ```bash
-pnpm run migrations:generate <migration-name>
+mise //server:migrations generate <migration-name>
 ```
 
 2. Check if the migration file makes sense.
@@ -18,7 +18,7 @@ The server will automatically detect `*.ts` file changes and restart. Part of th
 If you need to undo the most recently applied migration—for example, when developing or testing on schema changes—run:
 
 ```bash
-pnpm run migrations:revert
+mise //server:migrations revert
 ```
 
 This command rolls back the latest migration and brings the database schema back to its previous state.

docs/docs/developer/devcontainers.md

@@ -252,44 +252,33 @@ To connect the mobile app to your Dev Container:
 
 The Dev Container supports multiple ways to run tests:
 
-#### Using Mise Commands (Recommended)
-
 ```bash
-# Run tests for specific components
-mise run checklist      # in `server/`, `web/`, `packages/cli`
+# Server
+mise //server:test          # unit tests
+mise //server:test-medium   # medium / integration tests
+
+# Web
+mise //web:test             # unit tests
+
+# E2E
+mise //e2e:test             # API tests
+mise //e2e:test-web         # web UI tests (Playwright)
+
+# Run all checks for a component
+mise //server:checklist
+mise //web:checklist
 ```
 
-#### Using PNPM Directly
-
-```bash
-# Server tests
-cd /workspaces/immich/server
-pnpm test               # Run all tests
-pnpm run test:medium    # Medium tests (integration tests)
-pnpm run test:watch     # Watch mode
-pnpm run test:cov       # Coverage report
-
-# Web tests
-cd /workspaces/immich/web
-pnpm test               # Run all tests
-pnpm run test:watch     # Watch mode
-
-# E2E tests
-cd /workspaces/immich/e2e
-pnpm run test           # Run API tests
-pnpm run test:web       # Run web UI tests
-```
-
-### Additional Make Commands
+### Additional Commands
 
 ```bash
 # API generation
-make open-api           # Generate OpenAPI specs
-make open-api-typescript # Generate TypeScript SDK
-make open-api-dart      # Generate Dart SDK
+mise //:open-api             # Generate OpenAPI specs
+mise //:open-api-typescript  # Generate TypeScript SDK
+mise //:open-api-dart        # Generate Dart SDK
 
 # Database
-mise sql                # Sync database schema
+mise //server:sql            # Sync database schema
 ```
 
 ### Debugging

docs/docs/developer/pr-checklist.md

@@ -8,34 +8,42 @@ When contributing code through a pull request, please check the following:
 
 ## Web Checks
 
-- [ ] `pnpm run lint` (linting via ESLint)
-- [ ] `pnpm run format` (formatting via Prettier)
-- [ ] `pnpm run check:svelte` (Type checking via SvelteKit)
-- [ ] `pnpm run check:typescript` (check typescript)
-- [ ] `pnpm test` (unit tests)
+- [ ] `mise //web:lint` (linting via ESLint)
+- [ ] `mise //web:format` (formatting via Prettier)
+- [ ] `mise //web:check-svelte` (type checking via SvelteKit)
+- [ ] `mise //web:check-typescript` (type checking via `tsc`)
+- [ ] `mise //web:test` (unit tests)
 
 :::tip AIO
-Run all web checks with `pnpm run check:all`
+Run all web checks with `mise //web:checklist`
+:::
+
+:::tip Auto Fix
+Use `mise //web:lint-fix` and `mise //web:format-fix` to automatically correct some issues.
 :::
 
 ## Documentation
 
-- [ ] `pnpm run format` (formatting via Prettier)
+- [ ] `mise //docs:format` (formatting via Prettier)
 - [ ] Update the `_redirects` file if you have renamed a page or removed it from the documentation.
 
+:::tip Auto Fix
+Use `mise //docs:format-fix` to automatically fix formatting.
+:::
+
 ## Server Checks
 
-- [ ] `pnpm run lint` (linting via ESLint)
-- [ ] `pnpm run format` (formatting via Prettier)
-- [ ] `pnpm run check` (Type checking via `tsc`)
-- [ ] `pnpm test` (unit tests)
+- [ ] `mise //server:lint` (linting via ESLint)
+- [ ] `mise //server:format` (formatting via Prettier)
+- [ ] `mise //server:check` (type checking via `tsc`)
+- [ ] `mise //server:test` (unit tests)
 
 :::tip AIO
-Run all server checks with `pnpm run check:all`
+Run all server checks with `mise //server:checklist`
 :::
 
 :::tip Auto Fix
-You can use `pnpm run __:fix` to potentially correct some issues automatically for `pnpm run format` and `lint`.
+Use `mise //server:lint-fix` and `mise //server:format-fix` to automatically correct some issues.
 :::
 
 ## Mobile Checklist
@@ -53,6 +61,17 @@ Run all these commands at once with `mise //mobile:checklist`
 You can use `mise //mobile:lint-fix` to potentially correct some issues automatically for `mise //mobile:lint`.
 :::
 
+## Machine Learning Checklist
+
+- [ ] `mise //machine-learning:lint` (linting via ruff)
+- [ ] `mise //machine-learning:format` (formatting via ruff)
+- [ ] `mise //machine-learning:check` (type checking via mypy)
+- [ ] `mise //machine-learning:test` (unit tests via pytest)
+
+:::tip AIO
+Run all machine learning checks with `mise //machine-learning:checklist`
+:::
+
 ## OpenAPI
 
 The OpenAPI client libraries need to be regenerated whenever there are changes to the `immich-openapi-specs.json` file. Note that you should not modify this file directly as it is auto-generated. See [OpenAPI](/api.md) for more details.

docs/docs/developer/setup.md

@@ -32,6 +32,10 @@ This environment includes the services below. Additional details are available i
 
 All the services are packaged to run as with single Docker Compose command.
 
+:::tip mise
+[mise](https://mise.jdx.dev) is used throughout the project to manage tool versions and run tasks. [Install mise](https://mise.jdx.dev/installing-mise.html), then from the repo root run `mise trust` and `mise install` to get all required tools. Tasks for each service can be run from the repo root using `mise //namespace:task` (e.g. `mise //server:lint`). To list all available tasks, run `mise tasks ls --all`.
+:::
+
 ### Server and web apps
 
 1. Clone the project repo.
@@ -56,22 +60,23 @@ You can access the web from `http://your-machine-ip:3000` or `http://localhost:3
 
 #### Connect web to a remote backend
 
-If you only want to do web development connected to an existing, remote backend, follow these steps:
-
-1. Build the Immich SDK - `pnpm --filter @immich/sdk install && pnpm --filter @immich/sdk build`
-2. Enter the web directory - `cd web/`
-3. Install web dependencies - `pnpm i`
-4. Start the web development server
+If you only want to do web development connected to an existing, remote backend, run from the repo root:
 
 ```bash
-IMMICH_SERVER_URL=https://demo.immich.app/ pnpm run dev
+IMMICH_SERVER_URL=https://demo.immich.app/ mise //web:start
+```
+
+This will install all dependencies (including the SDK) and start the dev server in one step. To connect to the hosted demo server specifically, use the shorthand:
+
+```bash
+mise //web:start-demo
 ```
 
 If you're using PowerShell on Windows you may need to set the env var separately like so:
 
 ```powershell
 $env:IMMICH_SERVER_URL = "https://demo.immich.app/"
-pnpm run dev
+mise //web:start
 ```
 
 #### `@immich/ui`
@@ -90,20 +95,16 @@ To see local changes to `@immich/ui` in Immich, do the following:
 
 #### Setup
 
-1. [Install mise](https://mise.jdx.dev/installing-mise.html).
-2. Change to the immich (root) directory and trust the mise config with `mise trust`.
-3. Install tools with mise: `mise install`.
-4. Change to the `mobile/` directory.
-5. Run `flutter pub get` to install the dependencies.
-6. Run `make translation` to generate the translation file.
-7. Run `flutter run` to start the app.
+1. Run `mise //mobile:install` to install Flutter dependencies.
+2. Run `mise //mobile:translation` to generate the translation file.
+3. Change to the `mobile/` directory and run `flutter run` to start the app.
 
 #### Translation
 
-To add a new translation text, enter the key-value pair in the `i18n/en.json` in the root of the immich project. Then, from the `mobile/` directory, run
+To add a new translation text, enter the key-value pair in the `i18n/en.json` in the root of the immich project. Then run:
 
 ```bash
-make translation
+mise //mobile:translation
 ```
 
 The mobile app asks you what backend to connect to. You can utilize the demo backend (https://demo.immich.app/) if you don't need to change server code or upload photos. Alternatively, you can run the server yourself per the instructions above.

docs/docs/developer/testing.md

@@ -4,8 +4,8 @@
 
 ### Unit tests
 
-Unit are run by calling `pnpm run test` from the `server/` directory.
-You need to run `pnpm install` (in `server/`) before _once_.
+Unit tests are run with `mise //server:test`.
+You need to run `mise //server:install` before _once_.
 
 ### End to end tests
 
@@ -17,8 +17,7 @@ make e2e
 
 Before you can run the tests, you need to run the following commands _once_:
 
-- `pnpm install`
-- `pnpm --filter @immich/sdk --filter @immich/cli build`
+- `mise //e2e:ci-setup` (installs e2e, SDK, and CLI dependencies)
 - `mise //:open-api`
 
 Once the test environment is running, the e2e tests can be run via:

docs/mise.toml

@@ -3,7 +3,7 @@ run = "pnpm install --filter documentation --frozen-lockfile"
 
 [tasks.start]
 env._.path = "./node_modules/.bin"
-run = "docusaurus --port 3005"
+run = "docusaurus start --port 3005"
 
 [tasks.build]
 env._.path = "./node_modules/.bin"

mobile/mise.toml

@@ -78,6 +78,15 @@ alias = "migration"
 description = "Generate database migrations"
 run = "dart run drift_dev make-migrations"
 
+[tasks.install]
+alias = "install"
+description = "Install flutter dependencies"
+run = "flutter pub get"
+
+[tasks.start]
+alias = "start"
+description = "Start flutter app"
+run = "flutter run"
 
 # Internal tasks
 [tasks."i18n:loader"]

web/src/lib/components/timeline/AssetLayout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
   import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
@@ -30,14 +31,11 @@
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  const firstInOrNearViewport = $derived(viewerAssets.findIndex((a) => a.isInOrNearViewport));
-  const lastInOrNearViewport = $derived(viewerAssets.findLastIndex((a) => a.isInOrNearViewport));
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each viewerAssets.slice(firstInOrNearViewport, lastInOrNearViewport + 1) as viewerAsset (viewerAsset.id)}
+  {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

web/src/lib/managers/timeline-manager/timeline-day.svelte.ts

@@ -17,13 +17,13 @@ export class TimelineDay {
 
   height = $state(0);
   width = $state(0);
+  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
 
   #top: number = $state(0);
   #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
-  #lastInOrNearViewport = -1;
 
   constructor(timelineMonth: TimelineMonth, index: number, day: number, groupTitle: string, orderBy: AssetOrderBy) {
     this.index = index;
@@ -154,13 +154,4 @@ export class TimelineDay {
   get absoluteTimelineDayTop() {
     return this.timelineMonth.top + this.#top;
   }
-
-  get isInOrNearViewport() {
-    if (this.#lastInOrNearViewport !== -1 && this.viewerAssets[this.#lastInOrNearViewport].isInOrNearViewport) {
-      return true;
-    }
-
-    this.#lastInOrNearViewport = this.viewerAssets.findIndex((viewAsset) => viewAsset.isInOrNearViewport);
-    return this.#lastInOrNearViewport !== -1;
-  }
 }