feat: rebase client onto lemmy v4 API, and add compatibility adapters

.github/README.md

@@ -22,6 +22,19 @@
 
 Photon is a web app for the fediverse with helpful features and a nice UX.
 
+> [!NOTE]
+> When cloning this repo, you must clone submodules as well:
+>
+> ```sh
+> git clone https://github.com/xyphyn/photon --recursive
+> ```
+>
+> If you've already cloned the repo, run:
+>
+> ```sh
+> git submodule update --init --recursive
+> ```
+
 Jump to:
 
 - [Self-hosting](#self-hosting)

.github/workflows/docker-image.yml

@@ -14,6 +14,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          submodules: true
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4

.gitignore

@@ -19,4 +19,5 @@ test-results
 *TS.md
 
 # Used for automated screenshot workflow
-.github/__pycache__/
+.github/__pycache__/
+.zed

.prettierrc

@@ -13,5 +13,6 @@
   "svelteIndentScriptAndStyle": true,
   "svelteSortOrder": "scripts-options-markup-styles",
   "svelteStrictMode": false,
-  "useTabs": false
+  "useTabs": false,
+  "printWidth": 100
 }

package.json

@@ -1,50 +1,51 @@
 {
   "name": "photon-lemmy",
   "version": "2.3.0",
-  "license": "AGPL-3.0-only",
   "devDependencies": {
-    "@dicebear/core": "^9.3.1",
-    "@dicebear/initials": "^9.3.1",
+    "@dicebear/core": "^9.4.3",
+    "@dicebear/initials": "^9.4.2",
     "@eslint/compat": "^1.4.1",
     "@eslint/js": "^9.39.2",
-    "@svelte-put/qr": "^2.1.1",
+    "@svelte-put/qr": "^2.1.3",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/adapter-cloudflare": "^7.2.6",
-    "@sveltejs/adapter-node": "^5.5.2",
+    "@sveltejs/adapter-cloudflare": "^7.2.9",
+    "@sveltejs/adapter-node": "^5.5.7",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.50.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/kit": "^2.69.2",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.3.2",
     "@types/node": "^25.2.2",
     "@types/nprogress": "^0.2.3",
     "@types/ua-parser-js": "^0.7.39",
     "@xylightdev/svelte-hero-icons": "^2.2.10",
     "eslint": "^9.39.2",
     "eslint-plugin-svelte": "^3.14.0",
     "jsdom": "^22.1.0",
-    "lemmy-js-client": "0.19.11-donation-dialog.1",
-    "linkify-it": "^5.0.0",
-    "marked": "^17.0.1",
-    "marked-linkify-it": "^3.1.14",
+    "lemmy-js-client": "^1.0.0-alpha.2",
+    "lemmy-js-client-v3": "npm:lemmy-js-client@0.19.11-donation-dialog.1",
+    "linkify-it": "^5.0.2",
+    "marked": "^17.0.6",
+    "marked-linkify-it": "^3.1.15",
     "nprogress": "^0.2.0",
     "openapi-fetch": "^0.14.1",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1",
-    "svelte": "^5.49.1",
+    "prettier": "^3.9.5",
+    "prettier-plugin-svelte": "^3.5.2",
+    "svelte": "^5.56.4",
     "svelte-adapter-bun-next": "^1.0.3",
-    "svelte-check": "^4.3.6",
+    "svelte-check": "^4.7.2",
     "svelte-floating-ui": "^1.6.2",
     "svelte-infinite-scroll": "^2.0.1",
     "sveltekit-i18n": "^2.4.2",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.3.2",
     "trap-focus-svelte": "^1.1.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "ua-parser-js": "^1.0.41",
-    "vite": "^7.3.3"
+    "vite": "^8.1.4"
   },
+  "license": "AGPL-3.0-only",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/app.css

@@ -85,6 +85,29 @@
 
 body {
   @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
+
+  --tag-color01: var(--color-slate-200);
+  --tag-color02: var(--color-blue-400);
+  --tag-color03: var(--color-orange-400);
+  --tag-color04: var(--color-green-400);
+  --tag-color05: var(--color-yellow-400);
+  --tag-color06: var(--color-red-400);
+  --tag-color07: var(--color-purple-300);
+  --tag-color08: var(--color-pink-300);
+  --tag-color09: var(--color-slate-200);
+  --tag-color10: var(--color-slate-200);
+  @variant dark {
+    --tag-color01: var(--color-zinc-800);
+    --tag-color02: var(--color-blue-300);
+    --tag-color03: var(--color-orange-300);
+    --tag-color04: var(--color-green-300);
+    --tag-color05: var(--color-yellow-300);
+    --tag-color06: var(--color-red-300);
+    --tag-color07: var(--color-purple-300);
+    --tag-color08: var(--color-pink-300);
+    --tag-color09: var(--color-slate-200);
+    --tag-color10: var(--color-slate-200);
+  }
 }
 
 .dark {

src/app.html

@@ -2,7 +2,7 @@
 <html class="dark font-sans" lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/img/logo-background.svg" />
+    <link rel="icon" href="%sveltekit.assets%/img/logo.svg" />
     <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
@@ -11,7 +11,7 @@
     <div
       style="z-index:-50;position:absolute;inset:0;display:grid;place-items:center; "
     >
-      <svg width="50" height="50"><use width="50" height="50" href="/img/logo-isolated.svg#logo"></use></svg>
+      <svg width="50" height="50"><use width="50" height="50" href="/img/logo.svg#logo"></use></svg>
     </div>
     <div style="display: contents;" data-sveltekit-preload-code>
       %sveltekit.body%