Skip to content

feat: view Collections on profiles, notifications, and a new Collections page - #3685

Merged
ayo-run merged 8 commits into
mainfrom
shuuji3/feat/collection-api
Aug 6, 2026
Merged

feat: view Collections on profiles, notifications, and a new Collections page#3685
ayo-run merged 8 commits into
mainfrom
shuuji3/feat/collection-api

Conversation

@shuuji3

@shuuji3 shuuji3 commented Jul 20, 2026

Copy link
Copy Markdown
Member

resolve #3662

This is initial implementation of feature collections. This PR mainly covers basic collections view. The edit feature is out of scope.

  • Adding new "Collections" menu to the sidebar.
  • A new Collections page has two tabs:
    • "My collections" shows the collections created by the login account
    • "Featuring you" shows the collections you added to by other accounts. The tab name was copied from the official Mastodon web app.
  • Profile page now has a new "Collections" tab to show the collections created by the account.
  • Notification page supports new Collections types ("you are added to collection" and "collection you added was updated")

Screenshots

screenshot of profile page, new collections tab added listing two collections screenshot of collections page, my collection tab  and featuring you tab listing collections collections details page shows description title, owner, and list of acounts with profile description screenshot of nuxt dev tool showing new collection related routes. Screenshot of notifications, two types of collection notification are shown

@netlify

netlify Bot commented Jul 20, 2026

Copy link
Copy Markdown

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit 785461b
🔍 Latest deploy log https://app.netlify.com/projects/elk-docs/deploys/6a748b229772a00008b283bb

@netlify

netlify Bot commented Jul 20, 2026

Copy link
Copy Markdown

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 785461b
🔍 Latest deploy log https://app.netlify.com/projects/elk-zone/deploys/6a748b228ce6440009ded66b
😎 Deploy Preview https://deploy-preview-3685--elk-zone.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@shuuji3
shuuji3 marked this pull request as draft July 20, 2026 15:35
@socket-security

socket-security Bot commented Jul 20, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addedmasto@​7.12.09110010088100

View full report

@ayo-run

ayo-run commented Jul 21, 2026

Copy link
Copy Markdown
Member

Exciting! 🚀

@shuuji3

shuuji3 commented Jul 25, 2026

Copy link
Copy Markdown
Member Author

I've refined notification page styles and updated the Issue description. It's ready to review! 🙂

@shuuji3
shuuji3 marked this pull request as ready for review July 25, 2026 16:16
Comment thread app/components/notification/NotificationCard.vue Outdated
@ayo-run ayo-run changed the title feat: support collections feature feat: Collections views on profiles, notifications, and side nav Jul 27, 2026
@ayo-run ayo-run changed the title feat: Collections views on profiles, notifications, and side nav feat: Collections on profiles, notifications, and a new Collections page Jul 27, 2026

@ayo-run ayo-run left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @shuuji3! A few remarks

Comment thread app/components/notification/NotificationCard.vue Outdated
Comment thread app/pages/[[server]]/collections/index.vue Outdated
Comment thread app/pages/[[server]]/@[account]/index/collections.vue Outdated
Comment thread app/pages/[[server]]/collections/[id].vue
Comment thread app/pages/[[server]]/collections/[id].vue Outdated
Comment thread locales/en.json
},
"error": {
"account_not_found": "Account {0} not found",
"collection_not_found": "Collection not found",

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add a new key collections_not_supported for "This server doesn't support collections." -- when the collections endpoint gives us Error404, it means the server doesn't have the feature

</div>
</div>
</template>
<template v-else-if="notification.type === 'added_to_collection' && notification.collection">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can reduce the big block here by collapsing to one v-else-if like so:

<template
  v-else-if="(notification.type === 'added_to_collection'
    || notification.type === 'collection_update') && notification.collection"
>
  <NuxtLink :to="getCollectionRoute(notification.collection)">
    <div flex="~ col" p4 bg-shaded gap-3>
      <div flex>
        <div i-ri:shapes-line text-xl me-3 color-blue />
        <AccountHoverWrapper :account="notification.account">
          <!-- ...unchanged... -->
        </AccountHoverWrapper>

        <!-- the only line that differs -->
        <span>{{ notification.type === 'added_to_collection'
          ? $t('notification.added_you_to_collection')
          : $t('notification.collection_updated') }}</span>

      </div>

      <!-- ...collection name + description block, unchanged... -->
    </div>
  </NuxtLink>
</template>

@ayo-run

ayo-run commented Jul 27, 2026

Copy link
Copy Markdown
Member

I also found a few things that are better in a next PR. I was looking into the <CommonRouteTabs> component, but it seems a bigger change with routing restructure. Also found a dead code: CommonTabs is no longer used anywhere 😆 I remove the unused <CommonTabs> here: #3696

@ayo-run ayo-run changed the title feat: Collections on profiles, notifications, and a new Collections page feat: view Collections on profiles, notifications, and a new Collections page Jul 27, 2026
Co-authored-by: ayo <ayo@ayco.io>
Signed-off-by: TAKAHASHI Shuuji <id@shuuji3.xyz>

@ayo-run ayo-run left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @shuuji3! I think we can merge if you are also good. Then the editing & adding collections would be in a next PR

@ayo-run

ayo-run commented Aug 4, 2026

Copy link
Copy Markdown
Member

Oh I tested on my account at webtoo.ls, I created a collection with 4 accounts but when I view it only shows 3... I think it is not showing my own account

Screenshot from 2026-08-04 19-34-15

Signed-off-by: TAKAHASHI Shuuji <id@shuuji3.xyz>
@shuuji3

shuuji3 commented Aug 6, 2026

Copy link
Copy Markdown
Member Author

Sorry, it took while to implement "collection not supported" message fallback in the profile page but finally managed to show it.

Oh I tested on my account at webtoo.ls, I created a collection with 4 accounts but when I view it only shows 3... I think it is not showing my own account

Hmm, Mastodon Collections API might handle self-account differently? 🤔 Let me check what is actually returned.

Signed-off-by: TAKAHASHI Shuuji <id@shuuji3.xyz>
@shuuji3

shuuji3 commented Aug 6, 2026

Copy link
Copy Markdown
Member Author

OK, it's now fixed. It returns a list of accounts where the first item if the owner of the collection. The previous code didn't assume the case where the owner is appeared in an array twice and just filtered out all owner Account objects. 😅

@ayo-run

ayo-run commented Aug 6, 2026

Copy link
Copy Markdown
Member

Looks good! I tested on my server @ social.ayco.io which does not have the collections feature yet :)

Screenshot from 2026-08-06 12-34-53

@ayo-run

ayo-run commented Aug 6, 2026

Copy link
Copy Markdown
Member

On webtoo.ls it is correctly showing all accounts

Screenshot from 2026-08-06 12-37-20

@ayo-run

ayo-run commented Aug 6, 2026

Copy link
Copy Markdown
Member

Ah, one more thing @shuuji3 we need to hide "No collections yet." if there is a collection

Screenshot from 2026-08-06 12-38-08

Signed-off-by: TAKAHASHI Shuuji <id@shuuji3.xyz>
@shuuji3

shuuji3 commented Aug 6, 2026

Copy link
Copy Markdown
Member Author

Oops, I just fixed that too 🙏🏻

@shuuji3
shuuji3 force-pushed the shuuji3/feat/collection-api branch from c6d41d4 to 273d658 Compare August 6, 2026 13:22
@ayo-run
ayo-run added this pull request to the merge queue Aug 6, 2026
Merged via the queue into main with commit 0bf654e Aug 6, 2026
18 checks passed
@ayo-run
ayo-run deleted the shuuji3/feat/collection-api branch August 6, 2026 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support Collections

2 participants