42ef37b244
Implements text truncation for long subdomain names in the instance list view to improve the UI layout and prevent text overlap with the toggle button. Changes: - Added text truncation logic for subdomains longer than 15 characters - Appends ellipsis (...) to indicate truncated text - Improves readability and prevents UI layout issues Before this change, long subdomain names could overlap with the power toggle button, causing poor user experience. Now, any subdomain longer than 15 characters will be truncated with an ellipsis, maintaining a clean and consistent layout while still indicating there's more text available.
PocketHost UI
Built with SvelteKit and Typescript
Description about PocketHost goes here!
Developing Locally
To run this project, navigate to the /packages/dashboard folder and run pnpm dev.
It will start up the server here: http://127.0.0.1:5173/ and now you're ready to code!
Routing
There is a file called public-routes.json that controls which URLs are accessible to non-authenticated users. Any public facing page needs to have its URL added to this list. Otherwise, the authentication system will kick in and send them to the homepage.
User Management
This app uses Svelte Stores to track the user's information. At the top is the globalUserData store. This contains everything about the user that comes from Pocketbase, including their JWT Token.
Derived User Values
There are additional derived values that are useful for showing and hiding components across the site. The first one is isUserLoggedIn. This one will return a true or false depending on the state of the logged-in user. It is dependent on the email property in the Pocketbase response.
The second derived value is isUserVerified. This will return a true or false boolean depending on if their Pocketbase account has been verified via the email they got when they initially registered.
An example of showing or hiding components can be found with the <VerifyAccountBar> component, that prompts the user to make sure to verify their account before continuing. The code looks roughly like this:
<script>
import { isUserLoggedIn, isUserVerified } from '$util/stores'
</script>
{#if $isUserLoggedIn && !$isUserVerified}
<YourComponentHere />
{/if}
This particular example will only render the component if the user is logged in, and their account has not been verified. Notice the $ symbol as well, this is required for Svelte Stores when using Store values in the UI.
If you need to use these values in a normal javascript/typescript file instead, you can utilize Svelte's get() method instead.