implement memorial photo viewer

[alixdotsh]

talked abt in disc primarily for the most of it. the css seems fine for mobile but i could always be wrong i lowkey have not done regular css in a hot minute LOL

open to feedback and suggestions :3

好的，这是翻译成中文的 pull request 总结：

Sourcery 总结

为 Mai 游戏实现纪念照片查看器，允许用户查看他们上传的照片。

新功能：

• 增加了一个新页面，用于查看从 Mai 游戏上传的纪念照片。
• 引入了一个新的 API 接口来检索当前用户的照片。
• 在导航栏中添加了指向新页面的链接。

Original summary in English

Summary by Sourcery

Implements a memorial photo viewer for the Mai game, allowing users to view their uploaded photos.

New Features:

• Adds a new page to view memorial photos uploaded from the Mai game.
• Introduces a new API endpoint to retrieve the photos for the current user.
• Adds a link to the new page in the navigation bar.

[sourcery-ai]

## Sourcery 评审员指南

此拉取请求实现了一个新页面，用于显示从 MaiMai 上传的纪念照片。它添加了一个新的路由 '/pictures'，一个新的 `MaiPhoto` 组件来获取和显示照片，以及一个 API 端点来检索照片。它还在导航栏中添加了一个指向纪念照片页面的链接。

#### 获取纪念照片的顺序图

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server

    User->>Browser: 点击 "pictures" 链接
    Browser->>Server: GET /api/v2/game/mai2/my-photo
    Server-->>Browser: 返回照片 URL 列表
    Browser->>Browser: 从 URL 渲染图像
    Browser-->>User: 显示纪念照片

文件级别变更

变更	详情	文件
引入一个新页面来显示从 MaiMai 上传的纪念照片。	添加了一个新的路由 '/pictures'，用于渲染 MaiPhoto 组件。 创建了一个新的 MaiPhoto 组件来获取和显示照片。 实现了在没有照片可用时显示消息的逻辑。	AquaNet/src/App.svelte AquaNet/src/pages/MaiPhoto.svelte AquaNet/src/libs/sdk.ts
添加一个 API 端点来检索纪念照片。	在 sdk.ts 的 GAME 对象中添加了一个 photos 函数，用于调用 /api/v2/game/mai2/my-photo 端点。 photos 函数返回一个 Promise，该 Promise 解析为一个字符串数组，表示照片 URL。	AquaNet/src/libs/sdk.ts
在导航栏中添加一个指向纪念照片页面的链接。	在 App.svelte 的导航栏中添加了一个新的 a 标签，其 href="/pictures"。	AquaNet/src/App.svelte

---

提示和命令

与 Sourcery 互动

• 触发新的审查： 在拉取请求上评论 @sourcery-ai review。
• 继续讨论： 直接回复 Sourcery 的审查评论。
• 从审查评论生成 GitHub issue： 通过回复审查评论，要求 Sourcery 从审查评论创建一个 issue。您也可以回复审查评论并使用 @sourcery-ai issue 从中创建一个 issue。
• 生成拉取请求标题： 在拉取请求标题中的任何位置写入 @sourcery-ai 以随时生成标题。您也可以在拉取请求上评论 @sourcery-ai title 以随时（重新）生成标题。
• 生成拉取请求摘要： 在拉取请求正文中的任何位置写入 @sourcery-ai summary 以随时在您想要的位置生成 PR 摘要。您也可以在拉取请求上评论 @sourcery-ai summary 以随时（重新）生成摘要。
• 生成评审员指南： 在拉取请求上评论 @sourcery-ai guide 以随时（重新）生成评审员指南。
• 解决所有 Sourcery 评论： 在拉取请求上评论 @sourcery-ai resolve 以解决所有 Sourcery 评论。如果您已经解决了所有评论并且不想再看到它们，这将非常有用。
• 驳回所有 Sourcery 审查： 在拉取请求上评论 @sourcery-ai dismiss 以驳回所有现有的 Sourcery 审查。如果您想从新的审查开始，这将特别有用 - 不要忘记评论 @sourcery-ai review 以触发新的审查！
• 为 issue 生成行动计划： 在 issue 上评论 @sourcery-ai plan 以为其生成行动计划。

自定义您的体验

访问您的 仪表板 以：

• 启用或禁用审查功能，例如 Sourcery 生成的拉取请求摘要、评审员指南等。
• 更改审查语言。
• 添加、删除或编辑自定义审查说明。
• 调整其他审查设置。

获得帮助

• 联系我们的支持团队 提出问题或反馈。
• 访问我们的 文档 获取详细指南和信息。
• 通过在 X/Twitter、LinkedIn 或 GitHub 上关注我们，与 Sourcery 团队保持联系。

```

Original review guide in English

Reviewer's Guide by Sourcery

This pull request implements a new page to display memorial photos uploaded from MaiMai. It adds a new route '/pictures', a new MaiPhoto component to fetch and display photos, and an API endpoint to retrieve the photos. It also adds a link to the memorial photos page in the navigation bar.

Sequence diagram for fetching memorial photos

sequenceDiagram
    participant User
    participant Browser
    participant Server

    User->>Browser: Clicks on "pictures" link
    Browser->>Server: GET /api/v2/game/mai2/my-photo
    Server-->>Browser: Returns list of photo URLs
    Browser->>Browser: Renders images from URLs
    Browser-->>User: Displays memorial photos

Loading

File-Level Changes

Change	Details	Files
Introduces a new page to display memorial photos uploaded from MaiMai.	Added a new route '/pictures' that renders the MaiPhoto component. Created a new MaiPhoto component to fetch and display photos. Implemented logic to display a message when no photos are available.	AquaNet/src/App.svelte AquaNet/src/pages/MaiPhoto.svelte AquaNet/src/libs/sdk.ts
Adds an API endpoint to retrieve memorial photos.	Added a photos function to the GAME object in sdk.ts to call the /api/v2/game/mai2/my-photo endpoint. The photos function returns a promise that resolves to an array of strings, representing the photo URLs.	AquaNet/src/libs/sdk.ts
Adds a link to the memorial photos page in the navigation bar.	Added a new a tag with href="/pictures" to the navigation bar in App.svelte.	AquaNet/src/App.svelte

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @alixdotsh - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider adding a loading state or skeleton UI while fetching photos to improve user experience.
• The token is being passed as a query parameter, which might be logged by some servers; consider using a header instead.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

<sub>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.</sub>

[sourcery-ai]

suggestion: Consider using onMount for asynchronous operations.

Moving the GAME.photos() call into an onMount block is the recommended pattern in Svelte to ensure the fetching happens after the component has been mounted.

Suggested implementation:

  import { onMount } from 'svelte';
  import {GAME} from "../libs/sdk";
  import {AQUA_HOST} from "../libs/config";

  let photos: string[] = [];
  onMount(() => {
    GAME.photos()
      .then(result => {
        console.log(result);
        photos = result;
      })
      .catch(e => {
        console.error(e);
      });
  });

[thewiilover]

Looks good. Although I don’t get final say on this lol

[raymonable]

Looks good, maybe consider using Svelte's await feature?