Code Monkey home page Code Monkey logo

phanpy's Introduction

Phanpy

Minimalistic opinionated Mastodon web client.

Fancy screenshot

🗣️ Pronunciation: /fænpi/ (FAN-pee) 🔊 Listen

This is an alternative web client for Mastodon.

  • 🏢 Production: https://phanpy.social
    • production branch
    • break less often
    • slower fixes unless critical
  • 🏗️ Development: https://dev.phanpy.social
    • main branch
    • may see new cool stuff sooner
    • may break more often
    • may be fixed much faster too

🐘 Follow @phanpy on Mastodon for updates ✨

Everything is designed and engineered following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.

Features

  • 👪 Multiple accounts
  • 🪟 Compose window pop-out/in
  • 🌗 Light/dark/auto theme
  • 🔔 Grouped notifications
  • 🪺 Nested comments thread
  • 📬 Unsent draft recovery
  • 🎠 Boosts Carousel™️
  • ⚡ Shortcuts™️ with view modes like multi-column or tab bar
  • #️⃣ Multi-hashtag timeline

Design decisions

  • Status actions (reply, boost, favourite, bookmark, etc) are hidden by default.
    They only appear in individual status page. This is to reduce clutter and distraction. It may result in lower engagement, but we're not chasing numbers here.
  • Boost is represented with the rocket icon.
    The green double arrow icon (retweet for Twitter) doesn't look right for the term "boost". Green rocket looks weird, so I use purple.
  • Short usernames (@username) are displayed in timelines, instead of the full account username (@username@instance).
    Despite the guideline mentioned that "Decentralization must be transparent to the user", I don't think we should shove it to the face every single time. There are also some screen-reader-related accessibility concerns with the full username, though this web app is unfortunately not accessible yet.
  • No autoplay for video/GIF/whatever in timeline.
    The timeline is already a huge mess with lots of people, brands, news and media trying to grab your attention. Let's not make it worse. (Current exception now would be animated emojis.)
  • Hash-based URLs.
    This web app is not meant to be a full-fledged replacement to Mastodon's existing front-end. There's no SEO, database, serverless or any long-running servers. I could be wrong one day.

Subtle UI implementations

User name display

User name display

  • On the timeline, the user name is displayed as [NAME] @[username].
  • For the @[username], always exclude the instance domain name.
  • If the [NAME] looks the same as the @[username], then the @[username] is excluded as well.

Boosts Carousel

Boosts Carousel

  • From the fetched posts (e.g. 20 posts per fetch), if number of boosts are more than quarter of total posts or more than 3 consecutive boosts, boosts carousel UI will be triggered.
  • If number of boosts are more than 3 quarters of total posts, boosts carousel UI will be slotted at the end of total posts fetched (per "page").
  • Else, boosts carousel UI will be slotted in between the posts.

Thread number badge (e.g. Thread 1/X)

Thread number badge

  • Check every post for inReplyToId from cache or additional API requests, until the root post is found.
  • If root post is found, badge will show the index number of the post in the thread.
  • Limit up to 3 API requests as the root post may be very old or the thread is super long.
  • If index number couldn't be found, badge will fallback to showing Thread without the number.

Hashtag stuffing collapsing

Hashtag stuffing collapsing

  • First paragraph of post content with more than 3 hashtags will be collapsed to max 3 lines.
  • Subsequent paragraphs after first paragraph with more than 3 hashtags will be collapsed to 1 line.
  • Adjacent paragraphs with more than 1 hashtag after collapsed paragraphs will be collapsed to 1 line.
  • If there are text around or between the hashtags, they will not be collapsed.
  • Collapsed hashtags will be appended with ... at the end.
  • They are also slightly faded out to reduce visual noise.
  • Opening the post view will reveal the hashtags uncollapsed.

Filtered posts

  • "Hide completely"-filtered posts will be hidden, with no UI to reveal it.
  • "Hide with a warning"-filtered posts will be partially hidden, showing the filter name and author name.
    • Content can be partially revealed by hovering over the post, with tooltip showing the post text.
    • Clicking it will open the Post page.
    • Long-pressing or right-clicking it will "peek" the post with a bottom sheet UI.
    • On boosts carousel, they are sorted to the end of the carousel.

Development

Prerequisites: Node.js 18+

  • npm install - Install dependencies
  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview the production build
  • npm run fetch-instances - Fetch instances list from joinmastodon.org/servers, save it to src/data/instances.json
  • npm run sourcemap - Run source-map-explorer on the production build

Tech stack

Some of these may change in the future. The front-end world is ever-changing.

Self-hosting

This is a pure static web app. You can host it anywhere you want.

Two ways (choose one):

Easy way

Go to Releases and download the latest phanpy-dist.zip or phanpy-dist.tar.gz. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.

Custom-build way

Requires Node.js.

Download or git clone this repository. Use production branch for stable releases, main for latest. Build it by running npm run build (after npm install). Serve the dist folder.

Customization can be done by passing environment variables to the build command. Examples:

PHANPY_CLIENT_NAME="Phanpy Dev" \
    PHANPY_WEBSITE="https://dev.phanpy.social" \
    npm run build
PHANPY_DEFAULT_INSTANCE=hachyderm.io \
    PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up \
    PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy \
    npm run build

It's also possible to set them in the .env file.

Available variables:

  • PHANPY_CLIENT_NAME (optional, default: Phanpy) affects:
    • Web page title, shown in the browser window or tab title
    • App title, when installed as PWA, shown in the Home screen, macOS dock, Windows taskbar, etc
    • OpenGraph card title, when shared on social networks
    • Client name, when registering the app for authentication and shown as client used on posts in some apps/clients
  • PHANPY_WEBSITE (optional but recommended, default: https://phanpy.social) affects:
    • Canonical URL of the website
    • OpenGraph card URL, when shared on social networks
    • Root path for the OpenGraph card image
    • Client URL, when registering the app for authentication and shown as client used on posts in some apps/clients
  • PHANPY_DEFAULT_INSTANCE (optional, no defaults):
    • e.g. 'mastodon.social', without https://
    • Default instance for log-in
    • When logging in, the user will be redirected instantly to the instance's authentication page instead of having to manually type the instance URL and submit
  • PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL (optional, no defaults):
    • URL of the instance registration page
    • E.g. https://mastodon.social/auth/sign_up
  • PHANPY_PRIVACY_POLICY_URL (optional, default to official instance's privacy policy):
    • URL of the privacy policy page
    • May specify the instance's own privacy policy
  • PHANPY_LINGVA_INSTANCES (optional, space-separated list, default: lingva.phanpy.social [...hard-coded list of fallback instances]):
    • Specify a space-separated list of instances. First will be used as default before falling back to the subsequent instances. If there's only 1 instance, means no fallback.
    • May specify a self-hosted Lingva instance, powered by either lingva-translate or lingva-api
    • List of fallback instances hard-coded in /.env
    • ↗️ List of lingva-translate instances
  • PHANPY_IMG_ALT_API_URL (optional, no defaults):
    • API endpoint for self-hosted instance of img-alt-api.
    • If provided, a setting will appear for users to enable the image description generator in the composer. Disabled by default.
  • PHANPY_GIPHY_API_KEY (optional, no defaults):
    • API key for GIPHY. See API docs.
    • If provided, a setting will appear for users to enable the GIF picker in the composer. Disabled by default.
    • This is not self-hosted.

Static site hosting

Try online search for "how to self-host static sites" as there are many ways to do it.

Lingva-translate or lingva-api hosting

See documentation for lingva-translate or lingva-api.

Community deployments

These are self-hosted by other wonderful folks.

Note: Add yours by creating a pull request.

Costs

Costs involved in running and developing this web app:

  • Domain name (.social): USD$23.18/year (USD$6.87 1st year)
  • Hosting: Free
  • Development, design, maintenance: "Free" (My precious time)

Mascot

Phanpy is a Ground-type Pokémon.

Maintainers + contributors

Contributors

Backstory

I am one of the earliest users of Twitter. Twitter was launched on 15 July 2006. I joined on December 2006 and my first tweet was posted on 18 December 2006.

I know how early Twitter looks like. It was fun.

Back then, I made a Twitter clone called "Twig" written in Python and Google App Engine. I almost made my own Twitter desktop client written in Appcelerator Titanium. I gave one of my best talks about the Twitter client in a mini-conference. I built this thing called "Twitter Columns", a web app that shows your list of followings, your followings' followings, your followers, your followers' followers and so on. In 2009, I wrote a blog post titled "How I got started with Twitter". I created two themes for DestroyTwitter (a desktop client made with Adobe Air by Jonnie Hallman) and one of them is called "Vimeo". In 2013, I wrote my own tweets backup site with a front-end to view my tweets and a CouchDB backend to store them.

It's been more than 15 years.

And here I am. Building a Mastodon web client.

Alternative web clients

💁‍♂️ Notice to all other social media client developers

Please, please copy the UI ideas and experiments from this app. I think some of them are pretty good and it would be great if more apps have them.

If you're not a developer, please tell your favourite social media client developers about this app and ask them to copy the UI ideas and experiments.

License

MIT.

phanpy's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

phanpy's Issues

[FR] Swipe to view next photo

Hi, love the app! Would be amazing if there was a swipe feature implemented to view the next photo in a post with multiple photos.

Put known languages into separate zone

I write messages in 2 languages. It's hard to select them, because languages list is too big.

It would be great if known languages (languages with disabled translate functionality) will at the top of selector for easier access

Context menu for replying, boosting, etc. is not a mobile-friendly UX

All of the actions you can take on a post you are viewing appear to be in a context menu. On mobile, there is no mouse so you must long press to show the context menu. However, the browser uses the same action to show its context menu. This results in the browser context menu blocking the app context menu. You need to close that every time you want to interact with a toot.

Would be nice if there was an icon you could click to open the context menu instead. Or configurable options to expose icons for context menu items that you use frequently so you can do the actions in one click.

Thanks for the great client!

Click `ESC` to cancel draft toot with image/text is stuck with a flashing dialog

  1. Click to start composing
  2. Type "x" or drag an image file in
  3. Click ESC and the dialog with "You have unsaved changes. Are you sure you want to discard this post?" appears and disappears quickly

On dev:

The dialog in this screenshot flashes (appears and quickly disappears) if we use ESC instead of clicking the X button. This screenshot was taken by clicking the X button:

Screenshot 2023-02-14 at 9 46 27 AM

Small interface alignment

Will it be possible to align the thread line to the bubble? This is how it shows now:

Screenshot 2022-12-26 at 10 58 36

Proposing something like this:

Screenshot 2022-12-26 at 10 58 36 copy

Pressing `k` (not `j`) to navigate after <enter> on a post in the timeline focus on the timeline instead of the newly opened thread

Reproducible in https://dev.phanpy.social but not https://phanpy.social

  1. Navigate with j/k on timeline to a post that is threaded (or not threaded)
  2. Hit <enter> to open thread
  3. Immediately press j/k

Expected

  1. Focus is on the posts in the thead/side panel

Observed

  1. Focus is on the timeline, it might switch to be on the posts in the thead/side panel after it finishes loading

[FR] Keyboard support

Up and down arrow already scrolls the page, would be great if they move and highlights the current toot and selects it (like clicking on it)

<esc> should dismiss user/author bottom panel too

Otherwise this is a bit odd:

  1. Click a Mastodon link
  2. Right panel that shows that post and thread appears
  3. Click on a post author
  4. Bottom panel that shows user appears
  5. Hit <esc>
  6. Right panel disappears, but user bottom panel still remains open

This state in (4):

Screenshot 2023-02-22 at 9 57 58 AM

[FR] Support list management

Having lists' timelines availabe is great, I'd love to have CRUD operations for lists and their members as well.

Scroll position in boosts carousel doesn't persist in Safari

Describe the bug
The scroll position inside a boosts carousel resets on click

  • Which site: both dev.phanpy.social and phanpy.social

To Reproduce
Steps to reproduce the behavior:

  1. In Phanpy, navigate to a boosts carousel
  2. Scroll right inside the carousel
  3. Click on one of the posts in the carousel
  4. The carousel's scroll position resets to its initial left position. The post I clicked on doesn't open.

Expected behavior
The scroll position persists and the selected post is opened

Desktop (please complete the following information):

  • OS: macOS 13.3
  • Browser: Safari 16.4

Additional context
This bug has been around for at least a few versions of Phanpy. It only happens in Safari on macOS. Neither Chrome on macOS nor Safari on iOS exhibit this behaviour.

Dismiss settings modal when viewing own posts

Describe the bug
When navigating to my own posts through Settings > Account > Posts, the account modal gets dismissed but the settings modal remains on screen

To Reproduce
Steps to reproduce the behavior:

  1. Tap the Settings gear in the top left corner
  2. Tap own account name
  3. Tap on "Posts"

Expected behavior
Both the account modal, as well as the settings modal get automatically dismissed so I can view my posts

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Safari
  • Version: 16.3

Settings dialog not showing correctly (all black)

Hi,
I just noticed the settings popup is not showing correctly. It starts appearing, then switches to being all black.
If I'm very fast I managed to change the theme, but without changing the settings window behaviour.
Tried on Opera and Chrome on Android 13.
PD: the design is lovely!

SmartSelect_20221226_193628_Opera

Opening the last post in a thread scrolls back to the first

Describe the bug

Using phanpy.social, when I visit this (long) thread I use to dump images, I get automatically teleported to the first post of the thread. This, weirdly, only seems to happen with that thread in particular (although I haven't found a comparably long thread to test it out).

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://phanpy.social/#/mastodon.social/s/110210993720490742
  2. The last post of the thread will load (this might change if I add more posts
  3. Wait a few seconds.
  4. The page will load the whole thread and scroll back to previous posts.

Expected behavior

The page should not scroll back.

Screenshots

Screen.record.from.2023-04-17.11.26.42.webm

Desktop (please complete the following information):

  • OS: elementary OS 6.1 Jólnir uilt on Ubuntu 20.04.6 LTS
  • Browser: Tested on Firefox and Chrome
  • Version: Firefox 112 and Chrome 112.0.5615.121 (same version!)

Crash when clicking compose button

Describe the bug
I logged in my GoToSocial server with Phanpy. When I click the compose button at the right botton corner, the browser popped out the alert message "Failed to load instance configuration. Please try again.". After clicking "OK", the browser reload the web app. Therefore, I cannot create new post.

To Reproduce
Steps to reproduce the behavior:

  1. Login an account on a GoToSocial server.
  2. Click the compose button at the right-bottom corner.
  3. An alert with the message "Failed to load instance configuration. Please try again." popped out.
  4. After clicking "OK", the browser reload the web app.

Expected behavior
Display the compose dialog to create a new post.

Investigation
The alert comes from the following code in src/components/compose.jsx:

  const currentAccount = getCurrentAccount();
  const currentAccountInfo = currentAccount.info;

  const configuration = useMemo(() => {
    try {
      const instances = store.local.getJSON('instances');
      const currentInstance = currentAccount.instanceURL.toLowerCase();
      const config = instances[currentInstance].configuration;
      console.log(config);
      return config;
    } catch (e) {
      console.error(e);
      alert('Failed to load instance configuration. Please try again.');
      // Temporary fix for corrupted data
      store.local.del('instances');
      location.reload();
      return {};
    }
  }, []);

According to the function initMasto(params) in src/app.jsx, since GoToSocial uses v1 Mastodon api, the uri "https://mydomain.com", rather than the domain "mydomain.com", is used as the index of a member of instances. So, the index of the member in instances at line 6 above contains the protocol part.

I found that in the function onSubmit in src/pages/login.jsx, the the protocol part is always removed from instanceURL. This value then becomes the value of currentAccount.instanceURL. So, the value of currentInstance at line 7 above doesn't contain the protocal part.

Hence, at line 8 above, the configuration cannot be retrieved, and then an error is catched.

Solution
I tried to change a line in initMasto(params) function in app.jsx from

      instances[(domain || uri).toLowerCase()] = info;

to

      instances[(domain || uri.replace(/(^\w+:|^)\/\//, '')).toLowerCase()] = info;

to make sure no protocol part is including the index of the member of instances. It works with my GoToSocial server.

However, I am not sure whether the whole uri was used intentionally for other purposes. So, I simply create an issue, instead of a PR.

Desktop (please complete the following information):

  • OS: Arch Linux 6.1.8-arch1-1
  • Browser: Firefox
  • Version: 109.0 (64 bit)

Smartphone (please complete the following information):

  • Device: iPhone 13 Pro
  • OS: iOS16.3
  • Browser: Safari
  • Version: 16.3

GoToSocial Version
GoToSocial 0.6.0 git-f9e5ec9

Phanpy version
Phanpy git-305bb92

Incorrect fav count on own post

Describe the bug
Some of my posts show a lower fav count in Phanpy than on the Mastodon web interface. Though the individual "favourited your status" notifications do all appear in Phanpy as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Post something
  2. Wait for people to favourite it
  3. In Phanpy, open the post either from the timeline or from your own profile

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Safari
  • Version 16.3

Can't select users to mention from the context menu

Describe the bug

Selecting users from context menu doesn't work.

  • Which site: dev.phanpy.social

To Reproduce
Steps to reproduce the behavior:

  1. Go to dev.phanpy.social
  2. Start writing a new post
  3. Type any mastodon user handle
  4. Context menu appears with users matching
  5. Can't select a user from the list neither by clicking nor pressing enter.
  6. Can't navigate through the list of suggested users using the up and down arrows

Expected behavior
Clicking or pressing enter on the selected user should complete their handle and close the context menu.

Desktop (please complete the following information):

  • OS: Linux
  • Browser: Firefox
  • Version: 111

Smartphone (please complete the following information):

  • Device: Motorola Moto g7
  • OS: LineageOS 20
  • Browser: Chrome
  • Version: 111

Zrzut ekranu z 2023-03-22 08-28-47

Don't offer translations for known languages

User can set several "known languages" and then UI stop showing translate button for those messages. Also when translating message – transcription comes first which is not what i was looking for. I guess transcription should be hidden or at least less visible. It can take all screen space in case of big messages.

Describe the bug

  • Which site: dev.phanpy.social

Expected behavior
I don't want to see translate functionality for languages i know. After pressing "translate" button, I want to see translation, not transcription

Screenshots

View

Transcription goes first and takes a lot of space. And I don't want translate for Russian language at all, as I'm a native speaker

Screenshot 2023-03-18 at 02 08 13

Additional context
Here is related discussion in Elk UI

MastoHttpNotFoundError: Record not found

Describe the bug
When I click the link, it shows pop up: MastoHttpNotFoundError: Record not found

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://phanpy.social/#/s/109713159990382360
  2. Click on link (https://utcc.utoronto.ca/~cks/space/blog/web/AggressiveStealthyWebSpide)
  3. See error

Expected behavior
phanpy direct to link

Screenshots
image

Desktop (please complete the following information):

  • OS: macOS Ventura 13.1
  • Browser Firefox
  • Version 109.0

Additional context
Looks like it occurs randomly. For some links it directs, for some it shows popup error.

Add option to automatically expand content warnings

I personally don't need content warnings so in the official (not really official I guess) client I check the option to automatically expand all content warnings. It would be great to have this option in phanpy.

16:9 cropping for media

I get that this is mostly opinionated, but I do think it's probably best for media to be displayed in 16:9 as that's what the most common ratio is

[FR] Improving viewing image experience

I hope the video would be easier to understand than text: https://youtu.be/dwVnCEe2gVg

In the video I'm using this thread: https://phanpy.social/#/pkm.social/s/110169741586783061
And this is the comment I want to view comfortably (without having to click into it): https://phanpy.social/#/pkm.social/s/110182364639376007

In short I want the text panel that takes up the right half of the screen to stay intact when you open an image (less transitioning is better). The image will take up the left half of the screen. There's just so much space around an image in the current layout while the text is squished to the right. If users want to view the full original image they still have the option to view original media:

image

A few minor points to improve:

  • When having the image takes up the left half of the screen, resize the image to make it fit the entire viewing panel (I'm assuming that when the viewer click into an image they want to see it clearly and you may not agree with this)
  • I'm thinking of people post high-resolution images and maybe that's why you want the image panel to take up that much space? So maybe having the width of the image pane adjustable by dragging it?

If any of the above is hard to implement, just doing this #99 is already a good improvement.

Thanks so much!

Can't post with GoToSocial

Describe the bug
Can't post with GoToSocial

  • Which site: phanpy.social

To Reproduce
Steps to reproduce the behavior:

  1. Login with a GoToSocial Account
  2. Write a post and click post
  3. See error (CORS Missing allow header)

Expected behavior
a post to be sent

Response header data

HTTP/2 204 No Content
access-control-allow-headers: Origin,Content-Length,Content-Type,Authorization,Upgrade,Sec-Websocket-Extensions,Sec-Websocket-Key,Sec-Websocket-Protocol,Sec-Websocket-Version,Connection
access-control-allow-methods: POST,PUT,DELETE,GET,PATCH,OPTIONS
access-control-allow-origin: *
access-control-max-age: 120
content-security-policy: frame-ancestors 'self'
date: Fri, 31 Mar 2023 12:04:34 GMT
permission-policy: interest-cohort=()
strict-transport-security: max-age=31536000; includeSubDomains
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-request-id: yggrwdw704001hhvymg0
x-xss-protection: 1; mode=block
X-Firefox-Spdy: h2

Desktop (please complete the following information):

  • OS: linux
  • Browser: firefox
  • Version: 111.0.1

Additional context
Posting works with Pinafore.

The GoToSocial server has the following traefik (reverse proxy) configuration.

traefik.docker.network=traefik

traefik.http.middlewares.mash-gpa-gotosocial-add-response-headers.headers.customresponseheaders.X-XSS-Protection=1; mode=block
traefik.http.middlewares.mash-gpa-gotosocial-add-response-headers.headers.customresponseheaders.X-Frame-Options=SAMEORIGIN
traefik.http.middlewares.mash-gpa-gotosocial-add-response-headers.headers.customresponseheaders.X-Content-Type-Options=nosniff
traefik.http.middlewares.mash-gpa-gotosocial-add-response-headers.headers.customresponseheaders.Content-Security-Policy=frame-ancestors 'self'
traefik.http.middlewares.mash-gpa-gotosocial-add-response-headers.headers.customresponseheaders.Permission-Policy=interest-cohort=()
traefik.http.middlewares.mash-gpa-gotosocial-add-response-headers.headers.customresponseheaders.Strict-Transport-Security=max-age=31536000; includeSubDomains

traefik.enable=true
traefik.http.routers.mash-gpa-gotosocial.rule=Host("gay-pirate-assassins.de")
traefik.http.routers.mash-gpa-gotosocial.middlewares=mash-gpa-gotosocial-add-response-headers
traefik.http.routers.mash-gpa-gotosocial.service=mash-gpa-gotosocial
traefik.http.routers.mash-gpa-gotosocial.entrypoints=web-secure
traefik.http.routers.mash-gpa-gotosocial.tls=true
traefik.http.routers.mash-gpa-gotosocial.tls.certResolver=default
traefik.http.services.mash-gpa-gotosocial.loadbalancer.server.port=8080

Filters are not taken into account

Describe the bug
Toots matching some filters are not filtered out of the timeline.

  • Which site: phanpy.social

To Reproduce
Steps to reproduce the behavior:

  1. Go to your instance's preferences screen
  2. Click on 'Filters' in the menu
  3. Add a new filter
  4. Go to Phanpy's timeline
  5. See toots that should have been filtered out.

Expected behavior
Toots matching one or more of the filters should be hidden from the timeline.

Desktop (please complete the following information):

  • OS: Ubuntu 22.10
  • Browser Firefox
  • Version 111.0.1 (64-bit)

Smartphone (please complete the following information):

  • Device: Pixel 6Pro
  • OS: Android 13
  • Browser Firefox
  • Version 111.1.1

"Trending" column in Multi-Column layout in Shortcut Settings doesn't show up

Describe the bug
As in the title. Happens with both dev.phanpy.social and phanpy.social.

To Reproduce
Steps to reproduce the behavior:

  1. Go to "Shortcuts Settings"
  2. Choose "multi-column"
  3. Add a "Trending" column of any instance
  4. See that the "Trending" column doesn't appear

Expected behavior
The Trending column will show up

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser Edge
  • Version 112.0.1722.34 (Official build) (64-bit)

Additional context
'Trending' works fine in "Floating button" or "tab/menu bar" layout.

Btw, thanks so much for making Phanpy. Phanpy makes Mastodon usable for me and I'm using Mastodon much more frequently because of that.

[FR] Adjustable column width

I have 6 shortcuts in the form of multi-column and because Phanpy tries to fit them all on the screen, each column becomes very narrow.

It'd be great if you could allow users to set column width. I like having everything laid out instead of having to click through these buttons and use "shift+scroll" to scroll between columns.

Thanks a lot for this great app!

Transparency problem in thumbnails of PNG files

Describe the bug
A clear and concise description of what the bug is.

  • Which site: both

To Reproduce
Steps to reproduce the behavior:

  1. Open a post with a PNG file with transparency
  2. The areas that should be transparent are grey

Expected behavior
Transparency handling in the thumbnail should be the same as in full size after you click on the thumbnail.

Screenshots
Attached screenshots from Phanpy dev version and the default Mastodon web client.

Desktop (please complete the following information):

  • OS: Linux
  • Browsers: Firefox 111 and Web (Epiphany) 44.

Smartphone (please complete the following information):

  • Device: Moto G7
  • OS: Android
  • Browser: Firefox
  • Version 111

screenshot-phanpy
screenshot-mastodon

Bigger post textarea

Would it be possible adding a handful of rows to the post textarea? I have noticed it is rather too small now (only two rows).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.