Add support for default colors and color restrictions based on particle type in particle management.

WIP

.gitignore

@@ -91,3 +91,5 @@ generated
 
 liquibase*.properties
 node
+
+.env

backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java

@@ -51,9 +51,14 @@ public class SecurityConfig {
                                 .requestMatchers("/api/form/**").authenticated()
                                 .requestMatchers("/api/login/getUsername").authenticated()
                                 .requestMatchers("/api/mail/**").authenticated()
+                                .requestMatchers("/api/site/vote").authenticated()
+                                .requestMatchers("/api/appeal").authenticated()
+                                .requestMatchers("/api/site/get-staff-playtime/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                 .requestMatchers("/api/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                 .requestMatchers("/api/particles/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                 .requestMatchers("/api/files/save/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
+                                //TODO allow users access to their own folder
+                                .requestMatchers("/api/files/download/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                 .requestMatchers("/api/history/admin/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                 .requestMatchers("/api/login/userLogin/**").permitAll()
                                 .anyRequest().permitAll()

backend/src/main/java/com/alttd/altitudeweb/controllers/data_from_auth/AuthenticatedUuid.java

@@ -1,5 +1,7 @@
 package com.alttd.altitudeweb.controllers.data_from_auth;
 
+import com.nimbusds.jwt.JWT;
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpStatus;
 import org.springframework.security.core.Authentication;
@@ -8,8 +10,10 @@ import org.springframework.security.oauth2.jwt.Jwt;
 import org.springframework.stereotype.Service;
 import org.springframework.web.server.ResponseStatusException;
 
+import java.util.Optional;
 import java.util.UUID;
 
+@Slf4j
 @Service
 public class AuthenticatedUuid {
     @Value("${UNSECURED:#{false}}")
@@ -25,6 +29,9 @@ public class AuthenticatedUuid {
         Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
 
         if (authentication == null || !(authentication.getPrincipal() instanceof Jwt jwt)) {
+            log.error("Authentication principal is null {} or not a JWT {}",
+                      authentication == null, authentication == null ?
+                                              "null" : authentication.getPrincipal() instanceof JWT);
             if (unsecured) {
                 return UUID.fromString("55e46bc3-2a29-4c53-850f-dbd944dc5c5f");
             }
@@ -39,4 +46,28 @@ public class AuthenticatedUuid {
             throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Invalid UUID format");
         }
     }
+
+    /**
+     * Extracts the authenticated user's UUID from the JWT token.
+     *
+     * @return The UUID of the authenticated user
+     */
+    public Optional<UUID> tryGetAuthenticatedUserUuid() {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication == null || !(authentication.getPrincipal() instanceof Jwt jwt)) {
+            if (unsecured) {
+                return Optional.of(UUID.fromString("55e46bc3-2a29-4c53-850f-dbd944dc5c5f"));
+            }
+            return Optional.empty();
+        }
+
+        String stringUuid = jwt.getSubject();
+
+        try {
+            return Optional.of(UUID.fromString(stringUuid));
+        } catch (IllegalArgumentException e) {
+            return Optional.empty();
+        }
+    }
 }

backend/src/main/java/com/alttd/altitudeweb/controllers/forms/AppealController.java

@@ -10,15 +10,14 @@ import com.alttd.altitudeweb.database.web_db.forms.AppealMapper;
 import com.alttd.altitudeweb.database.web_db.mail.EmailVerification;
 import com.alttd.altitudeweb.database.web_db.mail.EmailVerificationMapper;
 import com.alttd.altitudeweb.mappers.AppealDataMapper;
-import com.alttd.altitudeweb.model.DiscordAppealDto;
+import com.alttd.altitudeweb.model.*;
-import com.alttd.altitudeweb.model.FormResponseDto;
+import com.alttd.altitudeweb.services.forms.DiscordAppeal;
-import com.alttd.altitudeweb.model.MinecraftAppealDto;
-import com.alttd.altitudeweb.model.UpdateMailDto;
 import com.alttd.altitudeweb.services.limits.RateLimit;
 import com.alttd.altitudeweb.services.mail.AppealMail;
 import com.alttd.altitudeweb.setup.Connection;
 import lombok.AllArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.HttpStatusCode;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.RestController;
@@ -36,12 +35,19 @@ public class AppealController implements AppealsApi {
 
     private final AppealDataMapper mapper;
     private final AppealMail appealMail;
+    private final DiscordAppeal discordAppeal;
     private final com.alttd.altitudeweb.services.discord.AppealDiscord appealDiscord;
 
+    @Override
+    public ResponseEntity<BannedUserResponseDto> getBannedUser(String discordId) throws Exception {
+        long discordIdAsLong = Long.parseLong(discordId);
+        return new ResponseEntity<>(discordAppeal.getBannedUser(discordIdAsLong), HttpStatus.OK);
+    }
+
     @RateLimit(limit = 3, timeValue = 1, timeUnit = TimeUnit.HOURS, key = "discordAppeal")
     @Override
     public ResponseEntity<FormResponseDto> submitDiscordAppeal(DiscordAppealDto discordAppealDto) {
-        throw new ResponseStatusException(HttpStatusCode.valueOf(501), "Discord appeals are not yet supported");
+        return new ResponseEntity<>(discordAppeal.submitAppeal(discordAppealDto), HttpStatus.OK);
     }
 
     @RateLimit(limit = 3, timeValue = 1, timeUnit = TimeUnit.HOURS, key = "minecraftAppeal")

backend/src/main/java/com/alttd/altitudeweb/controllers/history/HistoryApiController.java

@@ -242,6 +242,8 @@ public class HistoryApiController implements HistoryApi {
         HistoryType historyTypeEnum = HistoryType.getHistoryType(type);
         CompletableFuture<PunishmentHistoryDto> result = new CompletableFuture<>();
 
+        final UUID actor = authenticatedUuid.getAuthenticatedUserUuid();
+
         Connection.getConnection(Databases.LITE_BANS).runQuery(sqlSession -> {
             try {
                 IdHistoryMapper idMapper = sqlSession.getMapper(IdHistoryMapper.class);
@@ -253,7 +255,6 @@ public class HistoryApiController implements HistoryApi {
                 }
                 int changed = editMapper.setReason(historyTypeEnum, id, reason);
                 HistoryRecord after = idMapper.getRecentHistory(historyTypeEnum, id);
-                UUID actor = authenticatedUuid.getAuthenticatedUserUuid();
                 log.info("[Punishment Edit] Actor={} Type={} Id={} Reason: '{}' -> '{}' (rows={})",
                          actor, historyTypeEnum, id, before.getReason(), after != null ? after.getReason() : null, changed);
                 result.complete(after != null ? mapPunishmentHistory(after) : null);
@@ -275,6 +276,8 @@ public class HistoryApiController implements HistoryApi {
         HistoryType historyTypeEnum = HistoryType.getHistoryType(type);
         CompletableFuture<PunishmentHistoryDto> result = new CompletableFuture<>();
 
+        final UUID actor = authenticatedUuid.getAuthenticatedUserUuid();
+
         Connection.getConnection(Databases.LITE_BANS).runQuery(sqlSession -> {
             try {
                 IdHistoryMapper idMapper = sqlSession.getMapper(IdHistoryMapper.class);
@@ -286,7 +289,6 @@ public class HistoryApiController implements HistoryApi {
                 }
                 int changed = editMapper.setUntil(historyTypeEnum, id, until);
                 HistoryRecord after = idMapper.getRecentHistory(historyTypeEnum, id);
-                UUID actor = authenticatedUuid.getAuthenticatedUserUuid();
                 log.info("[Punishment Edit] Actor={} Type={} Id={} Until: '{}' -> '{}' (rows={})",
                          actor, historyTypeEnum, id, before.getUntil(), after != null ? after.getUntil() : null, changed);
                 result.complete(after != null ? mapPunishmentHistory(after) : null);
@@ -311,6 +313,8 @@ public class HistoryApiController implements HistoryApi {
         HistoryType historyTypeEnum = HistoryType.getHistoryType(type);
         CompletableFuture<Boolean> result = new CompletableFuture<>();
 
+        final UUID actorUuid = authenticatedUuid.getAuthenticatedUserUuid();
+
         Connection.getConnection(Databases.LITE_BANS).runQuery(sqlSession -> {
             try {
                 IdHistoryMapper idMapper = sqlSession.getMapper(IdHistoryMapper.class);
@@ -320,7 +324,6 @@ public class HistoryApiController implements HistoryApi {
                     result.complete(false);
                     return;
                 }
-                UUID actorUuid = authenticatedUuid.getAuthenticatedUserUuid();
                 String actorName = sqlSession.getMapper(RecentNamesMapper.class).getUsername(actorUuid.toString());
                 int changed = editMapper.remove(historyTypeEnum, id);
                 log.info("[Punishment Remove] Actor={} ({}) Type={} Id={} Before(active={} removedBy={} reason='{}') (rows={})",

backend/src/main/java/com/alttd/altitudeweb/controllers/login/LoginController.java

@@ -210,15 +210,16 @@ public class LoginController implements LoginApi {
                       try {
                           log.debug("Loading user by uuid {}", uuid.toString());
                           PrivilegedUserMapper mapper = sqlSession.getMapper(PrivilegedUserMapper.class);
-                          Optional<PrivilegedUser> privilegedUser = mapper
+                          Optional<PrivilegedUser> optionalPrivilegedUser = mapper
                                   .getUserByUuid(uuid);
 
-                          if (privilegedUser.isEmpty()) {
+                          if (optionalPrivilegedUser.isEmpty()) {
-                              int privilegedUserId = mapper.createPrivilegedUser(uuid);
+                              PrivilegedUser privilegedUser = new PrivilegedUser(null, uuid, List.of());
+                              mapper.createPrivilegedUser(privilegedUser);
                               privilegedUserCompletableFuture.complete(
-                                      Optional.of(new PrivilegedUser(privilegedUserId, uuid, List.of())));
+                                      Optional.of(privilegedUser));
                           } else {
-                              privilegedUserCompletableFuture.complete(privilegedUser);
+                              privilegedUserCompletableFuture.complete(optionalPrivilegedUser);
                           }
                       } catch (Exception e) {
                           log.error("Failed to load user by uuid", e);

backend/src/main/java/com/alttd/altitudeweb/controllers/particles/ParticleController.java

@@ -24,34 +24,27 @@ import java.nio.file.Path;
 @RestController
 public class ParticleController implements ParticlesApi {
 
-    @Value("${login.secret:#{null}}")
+//    @Value("${login.secret:#{null}}")
-    private String loginSecret;
+//    private String loginSecret;
 
     @Value("${particles.file_path}")
     private String particlesFilePath;
 
-    @Value("${notification.server.url:http://localhost:8080}")
+//    @Value("${notification.server.url:http://localhost:8080}")
-    private String notificationServerUrl;
+//    private String notificationServerUrl;
 
     @Override
-    public ResponseEntity<Resource> downloadFile(String authorization, String filename) throws Exception {
+    public ResponseEntity<Resource> downloadFile(String filename) {
-        if (authorization == null || !authorization.equals(loginSecret)) {
-            return ResponseEntity.status(401).build();
-        }
         File file = new File(particlesFilePath);
         if (!file.exists() || !file.isDirectory()) {
             log.error("Particles file path {} is not a directory, not downloading particles file", particlesFilePath);
             return ResponseEntity.status(404).build();
         }
-        File targetFile = new File(file, filename);
+        return getFileForDownload(file, filename);
-        return getFileForDownload(targetFile, filename);
     }
 
     @Override
-    public ResponseEntity<Resource> downloadFileForUser(String authorization, String uuid, String filename) throws Exception {
+    public ResponseEntity<Resource> downloadFileForUser(String uuid, String filename) {
-        if (authorization == null || !authorization.equals(loginSecret)) {
-            return ResponseEntity.status(401).build();
-        }
         File file = new File(particlesFilePath);
         if (!file.exists() || !file.isDirectory()) {
             log.error("Particles file path {} is not a directory, not downloading particles user file", particlesFilePath);
@@ -67,6 +60,7 @@ public class ParticleController implements ParticlesApi {
     }
 
     private ResponseEntity<Resource> getFileForDownload(File file, String filename) {
+        filename += ".json";
         File targetFile = new File(file, filename);
         if (!targetFile.exists()) {
             log.warn("Particles file {} does not exist", targetFile.getAbsolutePath());
@@ -95,19 +89,17 @@ public class ParticleController implements ParticlesApi {
     }
 
     @Override
-    public ResponseEntity<Void> saveFile(String filename, MultipartFile content) throws Exception {
+    public ResponseEntity<Void> saveFile(String filename, MultipartFile content) {
         File file = new File(particlesFilePath);
         if (!file.exists() || !file.isDirectory()) {
             log.error("Particles file path {} is not a directory, not saving particles file", particlesFilePath);
             return ResponseEntity.status(404).build();
         }
-        ResponseEntity<Void> voidResponseEntity = writeContentToFile(file, filename, content);
+        return writeContentToFile(file, filename, content);
-        notifyServerOfFileUpload(filename);
-        return voidResponseEntity;
     }
 
     @Override
-    public ResponseEntity<Void> saveFileForUser(String uuid, String filename, MultipartFile content) throws Exception {
+    public ResponseEntity<Void> saveFileForUser(String uuid, String filename, MultipartFile content) {
         File file = new File(particlesFilePath);
         if (!file.exists() || !file.isDirectory()) {
             log.error("Particles file path {} is not a directory, not saving particles user file", particlesFilePath);
@@ -121,39 +113,12 @@ public class ParticleController implements ParticlesApi {
             }
         }
 
-        ResponseEntity<Void> voidResponseEntity = writeContentToFile(file, filename, content);
+        return writeContentToFile(file, filename, content);
-        notifyServerOfFileUpload(uuid, filename);
-        return voidResponseEntity;
-    }
-
-    private void notifyServerOfFileUpload(String filename) {
-        String notificationUrl = String.format("%s/notify/%s.json", notificationServerUrl, filename);
-        sendNotification(notificationUrl, String.format("file upload: %s", filename));
-    }
-
-    private void notifyServerOfFileUpload(String uuid, String filename) {
-        String notificationUrl = String.format("%s/notify/%s/%s.json", notificationServerUrl, uuid, filename);
-        sendNotification(notificationUrl, String.format("file upload for user %s: %s", uuid, filename));
-    }
-
-    private void sendNotification(String notificationUrl, String logDescription) {
-        try {
-            RestTemplate restTemplate = new RestTemplate();
-            ResponseEntity<String> response = restTemplate.getForEntity(notificationUrl, String.class);
-
-            if (response.getStatusCode().is2xxSuccessful()) {
-                log.info("Successfully notified server of {}", logDescription);
-            } else {
-                log.warn("Failed to notify server of {}, status: {}",
-                         logDescription, response.getStatusCode());
-            }
-        } catch (Exception e) {
-            log.error("Error notifying server of {}", logDescription, e);
-        }
     }
 
 
     private ResponseEntity<Void> writeContentToFile(File dir, String filename, MultipartFile content) {
+        filename += ".json";
         File targetFile = new File(dir, filename);
         if (!Files.isWritable(targetFile.toPath())) {
             log.error("Particles file {} is not writable", targetFile.getAbsolutePath());

backend/src/main/java/com/alttd/altitudeweb/controllers/site/SiteController.java

@@ -2,15 +2,21 @@ package com.alttd.altitudeweb.controllers.site;
 
 import com.alttd.altitudeweb.api.SiteApi;
 import com.alttd.altitudeweb.controllers.data_from_auth.AuthenticatedUuid;
+import com.alttd.altitudeweb.model.StaffPlaytimeDto;
+import com.alttd.altitudeweb.model.StaffPlaytimeListDto;
 import com.alttd.altitudeweb.model.VoteDataDto;
 import com.alttd.altitudeweb.model.VoteStatsDto;
 import com.alttd.altitudeweb.services.limits.RateLimit;
+import com.alttd.altitudeweb.services.site.StaffPtService;
 import com.alttd.altitudeweb.services.site.VoteService;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.time.Instant;
+import java.time.OffsetDateTime;
+import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
 import java.util.concurrent.TimeUnit;
@@ -23,8 +29,22 @@ public class SiteController implements SiteApi {
 
     private final VoteService voteService;
     private final AuthenticatedUuid authenticatedUuid;
+    private final StaffPtService staffPtService;
 
     @Override
+    @RateLimit(limit = 1, timeValue = 1, timeUnit = TimeUnit.SECONDS, key = "getStaffPlaytime")
+    public ResponseEntity<StaffPlaytimeListDto> getStaffPlaytime(OffsetDateTime from, OffsetDateTime to) {
+        Optional<List<StaffPlaytimeDto>> staffPlaytimeDto = staffPtService.getStaffPlaytime(from.toInstant(), to.toInstant());
+        if (staffPlaytimeDto.isEmpty()) {
+             return ResponseEntity.noContent().build();
+        }
+        StaffPlaytimeListDto staffPlaytimeListDto = new StaffPlaytimeListDto();
+        staffPlaytimeListDto.addAll(staffPlaytimeDto.get());
+        return ResponseEntity.ok(staffPlaytimeListDto);
+    }
+
+    @Override
+    @RateLimit(limit = 5, timeValue = 1, timeUnit = TimeUnit.MINUTES, key = "getVoteStats")
     public ResponseEntity<VoteDataDto> getVoteStats() {
         UUID uuid = authenticatedUuid.getAuthenticatedUserUuid();
         Optional<VoteDataDto> optionalVoteDataDto = voteService.getVoteStats(uuid);

backend/src/main/java/com/alttd/altitudeweb/mappers/BannedUserToBannedUserDtoMapper.java

@@ -0,0 +1,14 @@
+package com.alttd.altitudeweb.mappers;
+
+import com.alttd.altitudeweb.model.BannedUserDto;
+import com.alttd.webinterface.appeals.BannedUser;
+import org.springframework.stereotype.Service;
+
+@Service
+public class BannedUserToBannedUserDtoMapper {
+
+    public BannedUserDto map(BannedUser bannedUser) {
+        return new BannedUserDto(String.valueOf(bannedUser.userId()), bannedUser.reason(), bannedUser.name(), bannedUser.avatarUrl());
+    }
+
+}

backend/src/main/java/com/alttd/altitudeweb/mappers/DiscordAppealDtoToDiscordAppealMapper.java

@@ -0,0 +1,26 @@
+package com.alttd.altitudeweb.mappers;
+
+import com.alttd.altitudeweb.database.web_db.forms.DiscordAppeal;
+import com.alttd.altitudeweb.model.DiscordAppealDto;
+import org.springframework.stereotype.Service;
+
+import java.time.Instant;
+import java.util.UUID;
+
+@Service
+public class DiscordAppealDtoToDiscordAppealMapper {
+
+    public DiscordAppeal map(DiscordAppealDto discordAppealDto, UUID loggedInUserUuid, String discordUsername) {
+        return new DiscordAppeal(
+                UUID.randomUUID(),
+                loggedInUserUuid,
+                Long.parseLong(discordAppealDto.getDiscordId()),
+                discordUsername,
+                discordAppealDto.getAppeal(),
+                Instant.now(),
+                null,
+                discordAppealDto.getEmail(),
+                null);
+    }
+
+}

backend/src/main/java/com/alttd/altitudeweb/mappers/StaffPtToStaffPlaytimeMapper.java

@@ -0,0 +1,70 @@
+package com.alttd.altitudeweb.mappers;
+
+import com.alttd.altitudeweb.database.luckperms.PlayerWithGroup;
+import com.alttd.altitudeweb.database.proxyplaytime.StaffPt;
+import com.alttd.altitudeweb.model.StaffPlaytimeDto;
+import org.springframework.stereotype.Service;
+
+import java.time.Instant;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.*;
+import java.util.concurrent.TimeUnit;
+
+@Service
+public final class StaffPtToStaffPlaytimeMapper {
+    private record PlaytimeInfo(long totalPlaytime, long lastPlayed) {}
+
+    public List<StaffPlaytimeDto> map(List<StaffPt> sessions, List<PlayerWithGroup> staffMembers, long from, long to, HashMap<String, String> staffGroupsMap) {
+        Map<UUID, PlaytimeInfo> playtimeData = getUuidPlaytimeInfoMap(sessions, from, to);
+
+        for (PlayerWithGroup staffMember : staffMembers) {
+            if (!playtimeData.containsKey(staffMember.uuid())) {
+                playtimeData.put(staffMember.uuid(), new PlaytimeInfo(0L, Long.MIN_VALUE));
+            }
+        }
+
+        List<StaffPlaytimeDto> results = new ArrayList<>(playtimeData.size());
+        for (Map.Entry<UUID, PlaytimeInfo> entry : playtimeData.entrySet()) {
+            long lastPlayedMillis = entry.getValue().lastPlayed() == Long.MIN_VALUE ? 0L : entry.getValue().lastPlayed();
+            StaffPlaytimeDto dto = new StaffPlaytimeDto();
+            Optional<PlayerWithGroup> first = staffMembers.stream()
+                    .filter(player -> player.uuid().equals(entry.getKey())).findFirst();
+            dto.setStaffMember(first.isPresent() ? first.get().username() : entry.getKey().toString());
+            dto.setStaffMember(staffMembers.stream()
+                                       .filter(player -> player.uuid().equals(entry.getKey()))
+                                       .map(PlayerWithGroup::username)
+                                       .findFirst()
+                                       .orElse(entry.getKey().toString())
+                              );
+            dto.setLastPlayed(OffsetDateTime.ofInstant(Instant.ofEpochMilli(lastPlayedMillis), ZoneOffset.UTC));
+            dto.setPlaytime((int) TimeUnit.MILLISECONDS.toMinutes(entry.getValue().totalPlaytime()));
+            if (first.isPresent()) {
+                dto.setRole(staffGroupsMap.getOrDefault(first.get().group(), "Unknown"));
+            } else {
+                dto.setRole("Unknown");
+            }
+            results.add(dto);
+        }
+        return results;
+    }
+
+    private Map<UUID, PlaytimeInfo> getUuidPlaytimeInfoMap(List<StaffPt> sessions, long from, long to) {
+        Map<UUID, PlaytimeInfo> playtimeData = new HashMap<>();
+        for (StaffPt session : sessions) {
+            long overlapStart = Math.max(session.sessionStart(), from);
+            long overlapEnd = Math.min(session.sessionEnd(), to);
+            if (overlapEnd <= overlapStart) {
+                continue;
+            }
+
+            PlaytimeInfo info = playtimeData.getOrDefault(session.uuid(), new PlaytimeInfo(0L, Long.MIN_VALUE));
+            long totalPlaytime = info.totalPlaytime() + (overlapEnd - overlapStart);
+            long lastPlayed = Math.max(info.lastPlayed(), overlapEnd);
+            playtimeData.put(session.uuid(), new PlaytimeInfo(totalPlaytime, lastPlayed));
+        }
+        return playtimeData;
+    }
+}
+
+

backend/src/main/java/com/alttd/altitudeweb/services/discord/AppealDiscord.java

@@ -1,6 +1,8 @@
 package com.alttd.altitudeweb.services.discord;
 
 import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.discord.AppealList;
+import com.alttd.altitudeweb.database.discord.AppealListMapper;
 import com.alttd.altitudeweb.database.discord.OutputChannel;
 import com.alttd.altitudeweb.database.discord.OutputChannelMapper;
 import com.alttd.altitudeweb.database.litebans.HistoryCountMapper;
@@ -8,7 +10,12 @@ import com.alttd.altitudeweb.database.litebans.HistoryRecord;
 import com.alttd.altitudeweb.database.litebans.HistoryType;
 import com.alttd.altitudeweb.database.litebans.UserType;
 import com.alttd.altitudeweb.database.web_db.forms.Appeal;
+import com.alttd.altitudeweb.database.web_db.forms.AppealMapper;
+import com.alttd.altitudeweb.database.web_db.forms.DiscordAppeal;
+import com.alttd.altitudeweb.database.web_db.forms.DiscordAppealMapper;
 import com.alttd.altitudeweb.setup.Connection;
+import com.alttd.webinterface.appeals.AppealSender;
+import com.alttd.webinterface.objects.MessageForEmbed;
 import com.alttd.webinterface.send_message.DiscordSender;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
@@ -16,8 +23,7 @@ import org.springframework.stereotype.Service;
 import java.time.Instant;
 import java.time.ZoneId;
 import java.time.format.DateTimeFormatter;
-import java.util.ArrayList;
+import java.util.*;
-import java.util.List;
 import java.util.concurrent.CompletableFuture;
 
 @Slf4j
@@ -26,19 +32,67 @@ public class AppealDiscord {
 
     private static final String OUTPUT_TYPE = "APPEAL";
 
+    public void sendAppealToDiscord(DiscordAppeal discordAppeal) {
+        CompletableFuture<List<OutputChannel>> channelsFuture = getChannelListFuture();
+        List<OutputChannel> channels = channelsFuture.join();
+        if (channels.isEmpty()) {
+            log.warn("Discord appeal: No Discord output channels found for type {}. Skipping Discord send.", OUTPUT_TYPE);
+            return;
+        }
+
+        String createdAt = formatInstant(discordAppeal.createdAt());
+        List<DiscordSender.EmbedField> fields = new ArrayList<>();
+
+        // Group: User
+        fields.add(new DiscordSender.EmbedField(
+                "User",
+                """
+                Discord Username: `%s`
+                Discord id: %s
+                MC UUID: %s
+                Submitted: %s
+                """.formatted(
+                        safe(discordAppeal.discordUsername()),
+                        discordAppeal.discordId(),
+                        safe(String.valueOf(discordAppeal.uuid())),
+                        createdAt
+                             ),
+                false
+        ));
+
+        Optional<Long> optionalAssignedTo = assignAppeal();
+        if (optionalAssignedTo.isPresent()) {
+            Long assignedTo = optionalAssignedTo.get();
+            fields.add(new DiscordSender.EmbedField(
+                    "Assigned to",
+                    "Assigned to: <@" + assignedTo + ">",
+                    true
+            ));
+            assignDiscordAppealTo(discordAppeal.id(), assignedTo);
+        } else {
+            fields.add(new DiscordSender.EmbedField(
+                    "Assigned to",
+                    "Assigned to: None (failed to assign)",
+                    true
+            ));
+        }
+
+        String description = safe(discordAppeal.reason());
+
+        List<Long> channelIds = channels.stream()
+                .map(OutputChannel::channel)
+                .toList();
+
+        // colorRgb = null (use default), timestamp = appeal.createdAt if available
+        Instant timestamp = discordAppeal.createdAt() != null ? discordAppeal.createdAt() : Instant.now();
+        MessageForEmbed newAppealSubmitted = new MessageForEmbed(
+                "New Discord Appeal Submitted", description, fields, null, timestamp, null);
+        AppealSender.getInstance().sendAppeal(channelIds, newAppealSubmitted, optionalAssignedTo.orElse(0L));
+    }
+    
     public void sendAppealToDiscord(Appeal appeal, HistoryRecord history) {
         // Fetch channels
-        CompletableFuture<List<OutputChannel>> channelsFuture = new CompletableFuture<>();
+        CompletableFuture<List<OutputChannel>> channelsFuture = getChannelListFuture();
-        Connection.getConnection(Databases.DISCORD).runQuery(sql -> {
-            try {
-                List<OutputChannel> channels = sql.getMapper(OutputChannelMapper.class)
-                        .getChannelsWithOutputType(OUTPUT_TYPE);
-                channelsFuture.complete(channels);
-            } catch (Exception e) {
-                log.error("Failed to load output channels for {}", OUTPUT_TYPE, e);
-                channelsFuture.complete(new ArrayList<>());
-            }
-        });
 
         CompletableFuture<Integer> bansF = getCountAsync(HistoryType.BAN, appeal.uuid());
         CompletableFuture<Integer> mutesF = getCountAsync(HistoryType.MUTE, appeal.uuid());
@@ -64,9 +118,8 @@ public class AppealDiscord {
         // Group: User
         fields.add(new DiscordSender.EmbedField(
                 "User",
-                "Username: " + safe(appeal.username()) + "\n" +
+                "Username: `" + safe(appeal.username()) + "`\n" +
                         "UUID: " + safe(String.valueOf(appeal.uuid())) + "\n" +
-                        "Email: " + safe(appeal.email()) + "\n" +
                         "Submitted: " + createdAt,
                 false
         ));
@@ -88,6 +141,22 @@ public class AppealDiscord {
                         "Kicks: " + kicks,
                 true
         ));
+        Optional<Long> optionalAssignedTo = assignAppeal();
+        if (optionalAssignedTo.isPresent()) {
+            Long assignedTo = optionalAssignedTo.get();
+            fields.add(new DiscordSender.EmbedField(
+                    "Assigned to",
+                    "Assigned to: <@" + assignedTo + ">",
+                    true
+            ));
+            assignMinecraftAppealTo(appeal.id(), assignedTo);
+        } else {
+            fields.add(new DiscordSender.EmbedField(
+                    "Assigned to",
+                    "Assigned to: None (failed to assign)",
+                    true
+            ));
+        }
 
         String description = safe(appeal.reason());
 
@@ -97,15 +166,44 @@ public class AppealDiscord {
 
         // colorRgb = null (use default), timestamp = appeal.createdAt if available
         Instant timestamp = appeal.createdAt() != null ? appeal.createdAt() : Instant.now();
-        DiscordSender.getInstance().sendEmbedToChannels(
+        MessageForEmbed newAppealSubmitted = new MessageForEmbed(
-                channelIds,
+                "New Appeal Submitted", description, fields, null, timestamp, null);
-                "New Appeal Submitted",
+        AppealSender.getInstance().sendAppeal(channelIds, newAppealSubmitted, optionalAssignedTo.orElse(0L));
-                description,
+    }
-                fields,
+
-                null,
+    private static CompletableFuture<List<OutputChannel>> getChannelListFuture() {
-                timestamp,
+        CompletableFuture<List<OutputChannel>> channelsFuture = new CompletableFuture<>();
-                null
+        Connection.getConnection(Databases.DISCORD).runQuery(sql -> {
-        );
+            try {
+                List<OutputChannel> channels = sql.getMapper(OutputChannelMapper.class)
+                        .getChannelsWithOutputType(OUTPUT_TYPE);
+                channelsFuture.complete(channels);
+            } catch (Exception e) {
+                log.error("Failed to load output channels for {}", OUTPUT_TYPE, e);
+                channelsFuture.complete(new ArrayList<>());
+            }
+        });
+        return channelsFuture;
+    }
+
+    private void assignMinecraftAppealTo(UUID appealId, Long assignedTo) {
+        Connection.getConnection(Databases.DEFAULT).runQuery(sql -> {
+            try {
+                sql.getMapper(AppealMapper.class).assignAppeal(appealId, assignedTo);
+            } catch (Exception e) {
+                log.error("Failed to assign appeal to {}", assignedTo, e);
+            }
+        });
+    }
+
+    private void assignDiscordAppealTo(UUID appealId, Long assignedTo) {
+        Connection.getConnection(Databases.DEFAULT).runQuery(sql -> {
+            try {
+                sql.getMapper(DiscordAppealMapper.class).assignDiscordAppeal(appealId, assignedTo);
+            } catch (Exception e) {
+                log.error("Failed to assign appeal to {}", assignedTo, e);
+            }
+        });
     }
 
     private CompletableFuture<Integer> getCountAsync(HistoryType type, java.util.UUID uuid) {
@@ -132,4 +230,50 @@ public class AppealDiscord {
         return instant.atZone(ZoneId.of("UTC"))
                 .format(DateTimeFormatter.ofPattern("yyyy MMMM dd hh:mm a '(UTC)'"));
     }
+
+    private Optional<Long> assignAppeal() {
+        CompletableFuture<Long> assignToCompletableFuture = new CompletableFuture<>();
+        Connection.getConnection(Databases.DISCORD).runQuery(sql -> {
+            try {
+                AppealListMapper mapper = sql.getMapper(AppealListMapper.class);
+                List<AppealList> appealList = mapper
+                        .getAppealList();
+
+
+                if (appealList.isEmpty()) {
+                    log.warn("No appeal lists found. Skipping assignment.");
+                    assignToCompletableFuture.complete(0L);
+                    return;
+                }
+                Optional<AppealList> optionalAssignTo = appealList
+                        .stream()
+                        .filter(AppealList::next).findFirst();
+                AppealList assignTo = optionalAssignTo.orElseGet(appealList::getFirst);
+                assignToCompletableFuture.complete(assignTo.userId());
+
+                try {
+                    Optional<AppealList> optionalNextAppealList = appealList
+                            .stream()
+                            .filter(entry -> entry.userId() > assignTo.userId())
+                            .min(Comparator.comparing(AppealList::userId));
+                    AppealList nextAppealList = optionalNextAppealList.orElse(appealList.stream()
+                                                                                      .min(Comparator.comparing(AppealList::userId))
+                                                                                      .orElse(assignTo));
+                    mapper.updateNext(assignTo.userId(), false);
+                    mapper.updateNext(nextAppealList.userId(), true);
+                } catch (Exception e) {
+                    log.error("Failed to assign next appeal", e);
+                }
+
+            } catch (Exception e) {
+                log.error("Failed to load appeal list", e);
+                assignToCompletableFuture.complete(0L);
+            }
+        });
+        Long assignTo = assignToCompletableFuture.join();
+        if (assignTo.equals(0L)) {
+            return Optional.empty();
+        }
+        return Optional.of(assignTo);
+    }
 }

backend/src/main/java/com/alttd/altitudeweb/services/discord/StaffApplicationDiscord.java

@@ -5,6 +5,7 @@ import com.alttd.altitudeweb.database.discord.OutputChannel;
 import com.alttd.altitudeweb.database.discord.OutputChannelMapper;
 import com.alttd.altitudeweb.database.web_db.forms.StaffApplication;
 import com.alttd.altitudeweb.setup.Connection;
+import com.alttd.webinterface.objects.MessageForEmbed;
 import com.alttd.webinterface.send_message.DiscordSender;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
@@ -46,8 +47,8 @@ public class StaffApplicationDiscord {
         List<DiscordSender.EmbedField> fields = new ArrayList<>();
         fields.add(new DiscordSender.EmbedField(
                 "Applicant",
-                "Username: " + safe(username) + "\n" +
+                "Username: `" + safe(username) + "`\n" +
-                        "Discord: " + safe(application.discordUsername()) + "\n" +
+                        "Discord: `" + safe(application.discordUsername()) + "`\n" +
                         "Email: " + safe(application.email()) + "\n" +
                         "Age: " + safe(String.valueOf(application.age())) + "\n" +
                         "Meets reqs: " + (application.meetsRequirements() != null && application.meetsRequirements()),
@@ -79,16 +80,15 @@ public class StaffApplicationDiscord {
                 .toList();
 
         Instant timestamp = application.createdAt() != null ? application.createdAt() : Instant.now();
-        DiscordSender.getInstance().sendEmbedToChannels(
+        MessageForEmbed messageForEmbed = new MessageForEmbed(
-                channelIds,
                 "New Staff Application Submitted",
                 "Join date: " + (application.joinDate() != null ? application.joinDate().toString() : "unknown") +
                 "\nSubmitted: " + formatInstant(timestamp),
                 fields,
                 null,
                 timestamp,
-                null
+                null);
-        );
+        DiscordSender.getInstance().sendEmbedWithThreadToChannels(channelIds, messageForEmbed, "Staff Application");
     }
 
     private String safe(String s) {

backend/src/main/java/com/alttd/altitudeweb/services/forms/DiscordAppeal.java

@@ -0,0 +1,138 @@
+package com.alttd.altitudeweb.services.forms;
+
+import com.alttd.altitudeweb.controllers.data_from_auth.AuthenticatedUuid;
+import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.luckperms.UUIDUsernameMapper;
+import com.alttd.altitudeweb.database.web_db.forms.DiscordAppealMapper;
+import com.alttd.altitudeweb.database.web_db.mail.EmailVerification;
+import com.alttd.altitudeweb.database.web_db.mail.EmailVerificationMapper;
+import com.alttd.altitudeweb.mappers.BannedUserToBannedUserDtoMapper;
+import com.alttd.altitudeweb.mappers.DiscordAppealDtoToDiscordAppealMapper;
+import com.alttd.altitudeweb.model.BannedUserResponseDto;
+import com.alttd.altitudeweb.model.DiscordAppealDto;
+import com.alttd.altitudeweb.model.FormResponseDto;
+import com.alttd.altitudeweb.services.discord.AppealDiscord;
+import com.alttd.altitudeweb.services.mail.AppealMail;
+import com.alttd.altitudeweb.setup.Connection;
+import com.alttd.webinterface.appeals.BannedUser;
+import com.alttd.webinterface.appeals.DiscordAppealDiscord;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.util.Optional;
+import java.util.UUID;
+import java.util.concurrent.CompletableFuture;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class DiscordAppeal {
+
+    private final BannedUserToBannedUserDtoMapper bannedUserToBannedUserDtoMapper;
+    private final DiscordAppealDtoToDiscordAppealMapper discordAppealDtoToDiscordAppealMapper;
+    private final AuthenticatedUuid authenticatedUuid;
+    private final AppealDiscord appealDiscord;
+    private final AppealMail appealMail;
+
+    public BannedUserResponseDto getBannedUser(Long discordId) {
+        DiscordAppealDiscord discordAppeal = DiscordAppealDiscord.getInstance();
+        Optional<BannedUser> join = discordAppeal.getBannedUser(discordId).join();
+        if (join.isEmpty()) {
+            return new BannedUserResponseDto(false);
+        }
+        BannedUserResponseDto bannedUserResponseDto = new BannedUserResponseDto(true);
+        bannedUserResponseDto.setBannedUser(bannedUserToBannedUserDtoMapper.map(join.get()));
+        return bannedUserResponseDto;
+    }
+
+    public FormResponseDto submitAppeal(DiscordAppealDto discordAppealDto) {
+        DiscordAppealDiscord discordAppealDiscord = DiscordAppealDiscord.getInstance();
+        long discordId = Long.parseLong(discordAppealDto.getDiscordId());
+        Optional<BannedUser> join = discordAppealDiscord.getBannedUser(discordId).join();
+        if (join.isEmpty()) {
+            throw new ResponseStatusException(HttpStatus.NOT_FOUND, "User not found");
+        }
+        BannedUser bannedUser = join.get();
+
+        Optional<UUID> optionalUUID = authenticatedUuid.tryGetAuthenticatedUserUuid();
+        if (optionalUUID.isEmpty()) {
+            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, "User not authenticated");
+        }
+        UUID uuid = optionalUUID.get();
+        CompletableFuture<com.alttd.altitudeweb.database.web_db.forms.DiscordAppeal> appealCompletableFuture = new CompletableFuture<>();
+
+        Connection.getConnection(Databases.DEFAULT)
+                .runQuery(sqlSession -> {
+                    log.debug("Loading history by id");
+                    try {
+                        com.alttd.altitudeweb.database.web_db.forms.DiscordAppeal discordAppealRecord = discordAppealDtoToDiscordAppealMapper
+                                .map(discordAppealDto, uuid, bannedUser.name());
+                        sqlSession.getMapper(DiscordAppealMapper.class).createDiscordAppeal(discordAppealRecord);
+                        appealCompletableFuture.complete(discordAppealRecord);
+                    } catch (Exception e) {
+                        log.error("Failed to load history count", e);
+                        appealCompletableFuture.completeExceptionally(e);
+                    }
+                });
+        com.alttd.altitudeweb.database.web_db.forms.DiscordAppeal discordAppeal = appealCompletableFuture.join();
+
+        CompletableFuture<Optional<EmailVerification>> emailVerificationCompletableFuture = new CompletableFuture<>();
+        Connection.getConnection(Databases.DEFAULT)
+                .runQuery(sqlSession -> {
+                    log.debug("Retrieving mail by uuid and address");
+
+                    EmailVerification verifiedMail = sqlSession.getMapper(EmailVerificationMapper.class)
+                            .findByUserAndEmail(discordAppeal.uuid(), discordAppeal.email().toLowerCase());
+                    emailVerificationCompletableFuture.complete(Optional.ofNullable(verifiedMail));
+                });
+        Optional<EmailVerification> optionalEmailVerification = emailVerificationCompletableFuture.join();
+
+        if (optionalEmailVerification.isEmpty()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Invalid mail");
+        }
+        EmailVerification emailVerification = optionalEmailVerification.get();
+        if (!emailVerification.verified()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Mail not verified");
+        }
+
+        try {
+            appealDiscord.sendAppealToDiscord(discordAppeal);
+        } catch (Exception e) {
+            log.error("Failed to send appeal {} to Discord", discordAppeal.id(), e);
+            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "Failed to send appeal to Discord");
+        }
+        //TODO verify mail
+        String username = getUsername(uuid);
+        appealMail.sendAppealNotification(discordAppeal, username);
+
+        Connection.getConnection(Databases.DEFAULT)
+                .runQuery(sqlSession -> {
+                    log.debug("Marking appeal {} as sent", discordAppeal.id());
+                    sqlSession.getMapper(DiscordAppealMapper.class)
+                            .markDiscordAppealAsSent(discordAppeal.id());
+                });
+        return new FormResponseDto(
+                discordAppeal.id().toString(),
+                "Your appeal has been submitted. You will be notified when it has been reviewed.",
+                true);
+    }
+
+    private String getUsername(UUID uuid) {
+        CompletableFuture<String> usernameFuture = new CompletableFuture<>();
+        Connection.getConnection(Databases.LUCK_PERMS)
+                .runQuery(sqlSession -> {
+                    log.debug("Loading username for uuid {}", uuid);
+                    try {
+                        String username = sqlSession.getMapper(UUIDUsernameMapper.class).getUsernameFromUUID(uuid.toString());
+                        usernameFuture.complete(username);
+                    } catch (Exception e) {
+                        log.error("Failed to load username for uuid {}", uuid, e);
+                        usernameFuture.completeExceptionally(e);
+                    }
+                });
+        return usernameFuture.join();
+    }
+}

backend/src/main/java/com/alttd/altitudeweb/services/limits/RateLimitAspect.java

@@ -1,5 +1,6 @@
 package com.alttd.altitudeweb.services.limits;
 
+import com.alttd.altitudeweb.controllers.data_from_auth.AuthenticatedUuid;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 import lombok.RequiredArgsConstructor;
@@ -16,6 +17,8 @@ import org.springframework.web.context.request.ServletRequestAttributes;
 
 import java.lang.reflect.Method;
 import java.time.Duration;
+import java.util.Optional;
+import java.util.UUID;
 
 @Aspect
 @Component
@@ -24,6 +27,7 @@ import java.time.Duration;
 public class RateLimitAspect {
     
     private final InMemoryRateLimiterService rateLimiterService;
+    private final AuthenticatedUuid authenticatedUuid;
     
     @Around("""
             @annotation(com.alttd.altitudeweb.services.limits.RateLimit)
@@ -37,7 +41,6 @@ public class RateLimitAspect {
         HttpServletRequest request = requestAttributes.getRequest();
         HttpServletResponse response = requestAttributes.getResponse();
 
-        String clientIp = request.getRemoteAddr();
         MethodSignature signature = (MethodSignature) joinPoint.getSignature();
         Method method = signature.getMethod();
         
@@ -54,7 +57,12 @@ public class RateLimitAspect {
         Duration duration = Duration.ofSeconds(rateLimit.timeUnit().toSeconds(rateLimit.timeValue()));
         String customKey = rateLimit.key();
 
-        String key = clientIp + "-" + (customKey.isEmpty() ? method.getName() : customKey);
+        Optional<UUID> optionalUUID = authenticatedUuid.tryGetAuthenticatedUserUuid();
+        if (optionalUUID.isEmpty()) {
+            return joinPoint.proceed();
+        }
+        UUID uuid = optionalUUID.get();
+        String key = uuid + "-" + (customKey.isEmpty() ? method.getName() : customKey);
 
         boolean allowed = rateLimiterService.tryAcquire(key, limit, duration);
         
@@ -67,7 +75,7 @@ public class RateLimitAspect {
             
             return joinPoint.proceed();
         } else {
-            log.warn("Rate limit exceeded for IP: {}, endpoint: {}", clientIp, request.getRequestURI());
+            log.warn("Rate limit exceeded for uuid: {}, endpoint: {}", uuid, request.getRequestURI());
 
             Duration nextResetTime = rateLimiterService.getNextResetTime(key, duration);
 

backend/src/main/java/com/alttd/altitudeweb/services/mail/AppealMail.java

@@ -2,6 +2,7 @@ package com.alttd.altitudeweb.services.mail;
 
 import com.alttd.altitudeweb.database.litebans.HistoryRecord;
 import com.alttd.altitudeweb.database.web_db.forms.Appeal;
+import com.alttd.altitudeweb.database.web_db.forms.DiscordAppeal;
 import jakarta.mail.MessagingException;
 import jakarta.mail.internet.MimeMessage;
 import lombok.RequiredArgsConstructor;
@@ -29,6 +30,20 @@ public class AppealMail {
 
     private static final String APPEAL_EMAIL = "[email protected]";
 
+    /**
+     * Sends an email notification about the appeal to both the user and the appeals team.
+     *
+     * @param appeal The appeal object containing all necessary information
+     */
+    public void sendAppealNotification(DiscordAppeal appeal, String username) {
+        try {
+            sendEmailToAppealsTeam(appeal, username);
+
+            log.info("Discord Appeal notification emails sent successfully for appeal ID: {}", appeal.id());
+        } catch (Exception e) {
+            log.error("Failed to send discord appeal notification emails for appeal ID: {}", appeal.id(), e);
+        }
+    }
     /**
      * Sends an email notification about the appeal to both the user and the appeals team.
      *
@@ -66,4 +81,31 @@ public class AppealMail {
         mailSender.send(message);
     }
 
+    private void sendEmailToAppealsTeam(DiscordAppeal appeal, String username) throws MessagingException {
+        MimeMessage message = mailSender.createMimeMessage();
+        MimeMessageHelper helper = getAppealMimeMessageHelper(appeal, message);
+
+        Context context = new Context();
+        context.setVariable("appeal", appeal);
+        context.setVariable("createdAt", appeal.createdAt()
+                                               .atZone(ZoneId.of("UTC"))
+                                               .format(DateTimeFormatter.ofPattern("yyyy MMMM dd hh:mm a '(UTC)'")));
+
+        context.setVariable("minecraftName", username);
+        String content = templateEngine.process("discord-appeal-email", context);
+
+        helper.setText(content, true);
+        mailSender.send(message);
+    }
+
+    private MimeMessageHelper getAppealMimeMessageHelper(DiscordAppeal appeal, MimeMessage message) throws MessagingException {
+        MimeMessageHelper helper = new MimeMessageHelper(message, true);
+
+        helper.setFrom(fromEmail);
+        helper.setTo(APPEAL_EMAIL);
+        helper.setReplyTo(appeal.email());
+        helper.setSubject("New Appeal Submitted - " + appeal.discordUsername());
+        return helper;
+    }
+
 }

backend/src/main/java/com/alttd/altitudeweb/services/site/StaffPtService.java

@@ -0,0 +1,83 @@
+package com.alttd.altitudeweb.services.site;
+
+import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.luckperms.Player;
+import com.alttd.altitudeweb.database.luckperms.PlayerWithGroup;
+import com.alttd.altitudeweb.database.luckperms.TeamMemberMapper;
+import com.alttd.altitudeweb.database.proxyplaytime.StaffPlaytimeMapper;
+import com.alttd.altitudeweb.database.proxyplaytime.StaffPt;
+import com.alttd.altitudeweb.mappers.StaffPtToStaffPlaytimeMapper;
+import com.alttd.altitudeweb.model.StaffPlaytimeDto;
+import com.alttd.altitudeweb.setup.Connection;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+
+import java.time.Instant;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Optional;
+import java.util.concurrent.CompletableFuture;
+import java.util.stream.Collectors;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class StaffPtService {
+    private final static HashMap<String, String> STAFF_GROUPS_MAP = new HashMap<>();
+    private final static String STAFF_GROUPS;
+    static {
+        STAFF_GROUPS_MAP.put("group.owner", "Owner");
+        STAFF_GROUPS_MAP.put("group.manager", "Manager");
+        STAFF_GROUPS_MAP.put("group.admin", "Admin");
+        STAFF_GROUPS_MAP.put("group.headmod", "Head Mod");
+        STAFF_GROUPS_MAP.put("group.moderator", "Moderator");
+        STAFF_GROUPS_MAP.put("group.trainee", "Trainee");
+        STAFF_GROUPS_MAP.put("group.developer", "Developer");
+        STAFF_GROUPS = STAFF_GROUPS_MAP.keySet().stream()
+                .map(group -> "'" + group + "'")
+                .collect(Collectors.joining(", "));
+    }
+    private final StaffPtToStaffPlaytimeMapper staffPtToStaffPlaytimeMapper;
+
+    public Optional<List<StaffPlaytimeDto>> getStaffPlaytime(Instant from, Instant to) {
+        CompletableFuture<List<PlayerWithGroup>> staffMembersFuture = new CompletableFuture<>();
+        CompletableFuture<List<StaffPt>> staffPlaytimeFuture = new CompletableFuture<>();
+        Connection.getConnection(Databases.LUCK_PERMS)
+                .runQuery(sqlSession -> {
+                    log.debug("Loading staff members");
+                    try {
+                        List<PlayerWithGroup> staffMemberList = sqlSession.getMapper(TeamMemberMapper.class)
+                                .getTeamMembersOfGroupList(STAFF_GROUPS);
+                        staffMembersFuture.complete(staffMemberList);
+                    } catch (Exception e) {
+                        log.error("Failed to load staff members", e);
+                        staffMembersFuture.completeExceptionally(e);
+                    }
+                });
+        List<PlayerWithGroup> staffMembers = staffMembersFuture.join().stream()
+                .collect(Collectors.collectingAndThen(
+                        Collectors.toMap(PlayerWithGroup::uuid, player -> player, (player1, player2) -> player1),
+                        m -> new ArrayList<>(m.values())));
+        Connection.getConnection(Databases.PROXY_PLAYTIME)
+                .runQuery(sqlSession -> {
+                    String staffUUIDs = staffMembers.stream()
+                            .map(PlayerWithGroup::uuid)
+                            .map(uuid -> "'" + uuid + "'")
+                            .collect(Collectors.joining(","));
+                    log.debug("Loading staff playtime for group");
+                    try {
+                        List<StaffPt> sessionsDuring = sqlSession.getMapper(StaffPlaytimeMapper.class)
+                                .getSessionsDuring(from.toEpochMilli(), to.toEpochMilli(), staffUUIDs);
+                        staffPlaytimeFuture.complete(sessionsDuring);
+                    } catch (Exception e) {
+                        log.error("Failed to load staff playtime", e);
+                        staffPlaytimeFuture.completeExceptionally(e);
+                    }
+                });
+        List<StaffPt> join = staffPlaytimeFuture.join();
+        HashMap<String, String> staffGroupsMap = new HashMap<>(STAFF_GROUPS_MAP);
+        return Optional.of(staffPtToStaffPlaytimeMapper.map(join, staffMembers, from.toEpochMilli(), to.toEpochMilli(), staffGroupsMap));
+    }
+}

backend/src/main/resources/application.properties

@@ -6,7 +6,7 @@ database.user=${DB_USER:root}
 database.password=${DB_PASSWORD:root}
 cors.allowed-origins=${CORS:https://alttd.com}
 login.secret=${LOGIN_SECRET:SET_TOKEN}
-particles.file_path=${user.home}/.altitudeweb/particles
+particles.file_path=${PARTICLE_FILE_PATH:${user.home}/.altitudeweb/particles}
 notification.server.url=${SERVER_IP:10.0.0.107}:${SERVER_PORT:8080}
 my-server.address=${SERVER_ADDRESS:https://alttd.com}
 logging.level.com.alttd.altitudeweb=INFO

backend/src/main/resources/templates/appeal-email.html

@@ -114,8 +114,7 @@
             <div class="columnContainer">
                 <div>
                     <h2>Appeal:</h2>
-                    <p th:text="${appeal.reason}">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+                    <p th:text="${appeal.reason}">appeal</p>
-                        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
                 </div>
             </div>
         </section>

backend/src/main/resources/templates/discord-appeal-email.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Discord Appeal Notification</title>
+    <style>
+        @font-face {
+            font-family: 'minecraft-title';
+            src: url('https://beta.alttd.com/public/fonts/minecraft-title.ttf') format('truetype'),
+            url('https://beta.alttd.com/public/fonts/minecraft-title.eot') format('embedded-opentype'),
+            url('https://beta.alttd.com/public/fonts/minecraft-title.svg') format('svg'),
+            url('https://beta.alttd.com/public/fonts/minecraft-title.woff') format('woff');
+        }
+
+        @font-face {
+            font-family: 'minecraft-text';
+            src: url('https://beta.alttd.com/public/fonts/minecraft-text.ttf') format('truetype'),
+            url('https://beta.alttd.com/public/fonts/minecraft-text.eot') format('embedded-opentype'),
+            url('https://beta.alttd.com/public/fonts/minecraft-text.svg') format('svg'),
+            url('https://beta.alttd.com/public/fonts/minecraft-text.woff') format('woff');
+        }
+        
+        @font-face {
+            font-family: 'opensans';
+            src: url('https://beta.alttd.com/public/fonts/opensans.ttf') format('truetype'),
+            url('https://beta.alttd.com/public/fonts/opensans.eot') format('embedded-opentype'),
+            url('https://beta.alttd.com/public/fonts/opensans.svg') format('svg'),
+            url('https://beta.alttd.com/public/fonts/opensans.woff') format('woff');
+        }
+
+        @font-face {
+            font-family: 'opensans-bold';
+            src: url('https://beta.alttd.com/public/fonts/opensans-bold.ttf') format('truetype'),
+            url('https://beta.alttd.com/public/fonts/opensans-bold.eot') format('embedded-opentype'),
+            url('https://beta.alttd.com/public/fonts/opensans-bold.svg') format('svg'),
+            url('https://beta.alttd.com/public/fonts/opensans-bold.woff') format('woff');
+        }
+
+        body {
+            font-family: 'minecraft-title', sans-serif;
+        }
+
+        .columnSection {
+            width: 80%;
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+        }
+
+        .columnContainer {
+            flex: 1 1 200px;
+            min-width: 200px;
+            box-sizing: border-box;
+            padding: 0 15px;
+        }
+
+        img {
+            display: block;
+            margin: auto;
+            padding-top: 10px;
+        }
+
+        ul {
+            list-style-type: none;
+            padding-left: 0;
+        }
+
+        li {
+            padding-bottom: 7px;
+        }
+
+        li, p {
+            font-family: 'opensans', sans-serif;
+            font-size: 1rem;
+        }
+
+        h2 {
+            font-size: 1.5rem;
+        }
+
+        @media (max-width: 1150px) {
+            .columnContainer, .columnSection {
+                width: 90%;
+            }
+        }
+
+        @media (max-width: 690px) {
+            .columnContainer {
+                width: 100%;
+                text-align: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <img id="header-img" src="https://beta.alttd.com/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="159"
+             width="275">
+        <h1 style="text-align: center;" th:text="'Appeal by ' + ${appeal.discordUsername}">Appeal by Username</h1>
+        <section class="columnSection">
+            <div class="columnContainer">
+                <div>
+                    <h2>User information</h2>
+                    <ul>
+                        <li><strong>Discord Username:</strong> <span th:text="${appeal.discordUsername}">dc username</span></li>
+                        <li><strong>UUID:</strong> <span th:text="${appeal.uuid}">uuid</span></li>
+                        <li><strong>Minecraft Username:</strong> <span th:text="${minecraftName}">mc username</span></li>
+                        <li><strong>Email:</strong> <span th:text="${appeal.email}">email</span></li>
+                        <li><strong>Submitted at:</strong> <span th:text="${createdAt}">date</span></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="columnContainer">
+                <div>
+                    <h2>Appeal:</h2>
+                    <p th:text="${appeal.reason}">appeal</p>
+                </div>
+            </div>
+        </section>
+    </main>
+</body>
+</html>

database/src/main/java/com/alttd/altitudeweb/database/Databases.java

@@ -8,6 +8,7 @@ public enum Databases {
     LUCK_PERMS("luckperms"),
     LITE_BANS("litebans"),
     DISCORD("discordLink"),
+    PROXY_PLAYTIME("proxyplaytime"),
     VOTING_PLUGIN("votingplugin");
 
     private final String internalName;

database/src/main/java/com/alttd/altitudeweb/database/discord/AppealList.java

@@ -0,0 +1,4 @@
+package com.alttd.altitudeweb.database.discord;
+
+public record AppealList(Long userId, boolean next) {
+}

database/src/main/java/com/alttd/altitudeweb/database/discord/AppealListMapper.java

@@ -0,0 +1,25 @@
+package com.alttd.altitudeweb.database.discord;
+
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Select;
+import org.apache.ibatis.annotations.Update;
+
+import java.util.List;
+
+public interface AppealListMapper {
+
+    @Select("""
+            SELECT userId, next
+            FROM appeal_list
+            ORDER BY userId;
+            """)
+    List<AppealList> getAppealList();
+
+    @Update("""
+            UPDATE appeal_list
+            SET next = #{next}
+            WHERE userId = #{userId}
+            """)
+    void updateNext(@Param("userId") long userId, @Param("next") boolean next);
+
+}

database/src/main/java/com/alttd/altitudeweb/database/litebans/EditHistoryMapper.java

@@ -48,7 +48,7 @@ public interface EditHistoryMapper {
             case BAN -> updateUntil("litebans_bans", id, until);
             case MUTE -> updateUntil("litebans_mutes", id, until);
             case KICK -> throw new IllegalArgumentException("KICK has no until");
-            case WARN -> throw new IllegalArgumentException("WARN has no until");
+            case WARN -> updateUntil("litebans_warnings", id, until);
         };
     }
 

database/src/main/java/com/alttd/altitudeweb/database/luckperms/PlayerWithGroup.java

@@ -0,0 +1,6 @@
+package com.alttd.altitudeweb.database.luckperms;
+
+import java.util.UUID;
+
+public record PlayerWithGroup(String username, UUID uuid, String group) {
+}

database/src/main/java/com/alttd/altitudeweb/database/luckperms/TeamMemberMapper.java

@@ -15,8 +15,24 @@ public interface TeamMemberMapper {
             SELECT players.username, players.uuid
             FROM luckperms_user_permissions AS permissions
             INNER JOIN luckperms_players AS players ON players.uuid = permissions.uuid
-            WHERE permission = #{groupPermission}
+            WHERE permission = #{groupPermission} AND server = 'global'
             AND world = 'global'
             """)
     List<Player> getTeamMembers(@Param("groupPermission") String groupPermission);
+
+    @ConstructorArgs({
+            @Arg(column = "username", javaType = String.class),
+            @Arg(column = "uuid", javaType = UUID.class, typeHandler = UUIDTypeHandler.class),
+            @Arg(column = "group", javaType = String.class)
+    })
+    @Select("""
+        SELECT players.username, players.uuid, permissions.permission AS 'group'
+        FROM luckperms_user_permissions AS permissions
+        INNER JOIN luckperms_players AS players ON players.uuid = permissions.uuid
+        WHERE permission IN (${groupPermissions})
+          AND server = 'global'
+          AND world = 'global'
+        """)
+    List<PlayerWithGroup> getTeamMembersOfGroupList(@Param("groupPermissions") String groupPermissions);
+
 }

database/src/main/java/com/alttd/altitudeweb/database/proxyplaytime/StaffPlaytimeMapper.java

@@ -0,0 +1,33 @@
+package com.alttd.altitudeweb.database.proxyplaytime;
+
+import com.alttd.altitudeweb.type_handler.UUIDTypeHandler;
+import org.apache.ibatis.annotations.Arg;
+import org.apache.ibatis.annotations.ConstructorArgs;
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Select;
+
+import java.util.List;
+import java.util.UUID;
+
+public interface StaffPlaytimeMapper {
+    @ConstructorArgs({
+            @Arg(column = "uuid", javaType = UUID.class, typeHandler = UUIDTypeHandler.class),
+            @Arg(column = "serverName", javaType = String.class),
+            @Arg(column = "sessionStart", javaType = long.class),
+            @Arg(column = "sessionEnd", javaType = long.class)
+    })
+    @Select("""
+        SELECT uuid,
+               server_name AS serverName,
+               session_start AS sessionStart,
+               session_end   AS sessionEnd
+        FROM sessions
+        WHERE session_end > #{from}
+          AND session_start < #{to}
+          AND uuid IN (${staffUUIDs})
+        ORDER BY uuid, session_start
+        """)
+    List<StaffPt> getSessionsDuring(@Param("from") long from,
+                                    @Param("to") long to,
+                                    @Param("staffUUIDs") String staffUUIDs);
+}

database/src/main/java/com/alttd/altitudeweb/database/proxyplaytime/StaffPt.java

@@ -0,0 +1,6 @@
+package com.alttd.altitudeweb.database.proxyplaytime;
+
+import java.util.UUID;
+
+public record StaffPt(UUID uuid, String serverName, long sessionStart, long sessionEnd) {
+}

database/src/main/java/com/alttd/altitudeweb/database/votingplugin/VotingPluginUsersMapper.java

@@ -21,7 +21,7 @@ public interface VotingPluginUsersMapper {
                  WeeklyTotal as totalVotesThisWeek,
                  MonthTotal as totalVotesThisMonth,
                  AllTimeTotal as totalVotesAllTime
-             FROM votingplugin.votingplugin_users
+             FROM votingplugin.VotingPlugin_Users
              WHERE uuid = #{uuid}
             """)
     Optional<VotingStatsRow> getStatsByUuid(@Param("uuid") UUID uuid);

database/src/main/java/com/alttd/altitudeweb/database/web_db/PrivilegedUserMapper.java

@@ -1,7 +1,6 @@
 package com.alttd.altitudeweb.database.web_db;
 
 import org.apache.ibatis.annotations.*;
-import org.jetbrains.annotations.Nullable;
 
 import java.util.List;
 import java.util.Optional;
@@ -104,8 +103,8 @@ public interface PrivilegedUserMapper {
 
     @Insert("""
         INSERT INTO privileged_users (uuid)
-            VALUES (#{uuid})
+        VALUES (#{user.uuid})
         """)
-    @Options(useGeneratedKeys = true, keyProperty = "id", keyColumn = "id")
+    @SelectKey(statement = "SELECT LAST_INSERT_ID()", keyProperty = "user.id", before = false, resultType = int.class)
-    int createPrivilegedUser(UUID uuid);
+    void createPrivilegedUser(@Param("user") PrivilegedUser user);
 }

database/src/main/java/com/alttd/altitudeweb/database/web_db/forms/AppealMapper.java

@@ -1,6 +1,7 @@
 package com.alttd.altitudeweb.database.web_db.forms;
 
 import org.apache.ibatis.annotations.Insert;
+import org.apache.ibatis.annotations.Param;
 import org.apache.ibatis.annotations.Select;
 import org.apache.ibatis.annotations.Update;
 
@@ -33,5 +34,11 @@ public interface AppealMapper {
             UPDATE appeals SET send_at = NOW()
             WHERE id = #{id}
             """)
-    void markAppealAsSent(UUID id);
+    void markAppealAsSent(@Param("id") UUID id);
+
+    @Update("""
+            UPDATE appeals SET assigned_to = #{assignedTo}
+            WHERE id = #{id}
+            """)
+    void assignAppeal(@Param("id") UUID id, @Param("assignedTo") Long assignedTo);
 }

database/src/main/java/com/alttd/altitudeweb/database/web_db/forms/DiscordAppeal.java

@@ -0,0 +1,17 @@
+package com.alttd.altitudeweb.database.web_db.forms;
+
+import java.time.Instant;
+import java.util.UUID;
+
+public record DiscordAppeal(
+        UUID id,
+        UUID uuid,
+        Long discordId,
+        String discordUsername,
+        String reason,
+        Instant createdAt,
+        Instant sendAt,
+        String email,
+        Long assignedTo
+) {
+}

database/src/main/java/com/alttd/altitudeweb/database/web_db/forms/DiscordAppealMapper.java

@@ -0,0 +1,28 @@
+package com.alttd.altitudeweb.database.web_db.forms;
+
+import org.apache.ibatis.annotations.Insert;
+import org.apache.ibatis.annotations.Update;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.UUID;
+
+public interface DiscordAppealMapper {
+
+    @Insert("""
+            INSERT INTO discord_appeals (uuid, discord_id, discord_username, reason, created_at, send_at, e_mail, assigned_to)
+            VALUES (#{uuid}, #{discordId}, #{discordUsername}, #{reason}, #{createdAt}, #{sendAt}, #{email}, #{assignedTo})
+            """)
+    void createDiscordAppeal(DiscordAppeal discordAppeal);
+
+    @Update("""
+            UPDATE discord_appeals SET send_at = NOW()
+            WHERE id = #{id}
+            """)
+    void markDiscordAppealAsSent(@Param("id") UUID id);
+
+    @Update("""
+            UPDATE discord_appeals SET assigned_to = #{assignedTo}
+            WHERE id = #{id}
+            """)
+    void assignDiscordAppeal(@Param("id") UUID id, @Param("assignedTo") Long assignedTo);
+}

database/src/main/java/com/alttd/altitudeweb/setup/Connection.java

@@ -37,6 +37,7 @@ public class Connection {
         InitializeWebDb.init();
         InitializeLiteBans.init();
         InitializeLuckPerms.init();
+        InitializeProxyPlaytime.init();
         InitializeDiscord.init();
         InitializeVotingPlugin.init();
     }

database/src/main/java/com/alttd/altitudeweb/setup/InitializeDiscord.java

@@ -1,6 +1,7 @@
 package com.alttd.altitudeweb.setup;
 
 import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.discord.AppealListMapper;
 import com.alttd.altitudeweb.database.discord.OutputChannelMapper;
 import com.alttd.altitudeweb.database.luckperms.TeamMemberMapper;
 import lombok.extern.slf4j.Slf4j;
@@ -12,6 +13,7 @@ public class InitializeDiscord {
         log.info("Initializing Discord");
         Connection.getConnection(Databases.DISCORD, (configuration) -> {
             configuration.addMapper(OutputChannelMapper.class);
+            configuration.addMapper(AppealListMapper.class);
         }).join();
         log.debug("Initialized Discord");
     }

database/src/main/java/com/alttd/altitudeweb/setup/InitializeProxyPlaytime.java

@@ -0,0 +1,18 @@
+package com.alttd.altitudeweb.setup;
+
+import com.alttd.altitudeweb.database.Databases;
+import com.alttd.altitudeweb.database.proxyplaytime.StaffPlaytimeMapper;
+import lombok.extern.slf4j.Slf4j;
+
+@Slf4j
+public class InitializeProxyPlaytime {
+
+    protected static void init() {
+        log.info("Initializing ProxyPlaytime");
+        Connection.getConnection(Databases.PROXY_PLAYTIME, (configuration) -> {
+            configuration.addMapper(StaffPlaytimeMapper.class);
+        }).join();
+        log.debug("Initialized ProxyPlaytime");
+    }
+
+}

database/src/main/java/com/alttd/altitudeweb/setup/InitializeWebDb.java

@@ -5,6 +5,7 @@ import com.alttd.altitudeweb.database.web_db.KeyPairMapper;
 import com.alttd.altitudeweb.database.web_db.PrivilegedUserMapper;
 import com.alttd.altitudeweb.database.web_db.SettingsMapper;
 import com.alttd.altitudeweb.database.web_db.forms.AppealMapper;
+import com.alttd.altitudeweb.database.web_db.forms.DiscordAppealMapper;
 import com.alttd.altitudeweb.database.web_db.forms.StaffApplicationMapper;
 import com.alttd.altitudeweb.database.web_db.mail.EmailVerificationMapper;
 import lombok.extern.slf4j.Slf4j;
@@ -24,6 +25,7 @@ public class InitializeWebDb {
                       configuration.addMapper(KeyPairMapper.class);
                       configuration.addMapper(PrivilegedUserMapper.class);
                       configuration.addMapper(AppealMapper.class);
+                      configuration.addMapper(DiscordAppealMapper.class);
                       configuration.addMapper(StaffApplicationMapper.class);
                       configuration.addMapper(EmailVerificationMapper.class);
                   }).join()
@@ -33,6 +35,7 @@ public class InitializeWebDb {
                       createPrivilegedUsersTable(sqlSession);
                       createPrivilegesTable(sqlSession);
                       createAppealTable(sqlSession);
+                      createdDiscordAppealTable(sqlSession);
                       createStaffApplicationsTable(sqlSession);
                       createUserEmailsTable(sqlSession);
                   });
@@ -183,4 +186,26 @@ public class InitializeWebDb {
         }
     }
 
+    private static void createdDiscordAppealTable(@NotNull SqlSession sqlSession) {
+        String query = """
+                CREATE TABLE IF NOT EXISTS discord_appeals (
+                    id UUID NOT NULL DEFAULT (UUID()) PRIMARY KEY,
+                    uuid UUID NOT NULL,
+                    discord_id BIGINT UNSIGNED NOT NULL,
+                    discord_username VARCHAR(32) NOT NULL,
+                    reason TEXT NOT NULL,
+                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,
+                    send_at TIMESTAMP NULL,
+                    e_mail TEXT NOT NULL,
+                    assigned_to BIGINT UNSIGNED NULL,
+                    FOREIGN KEY (uuid) REFERENCES privileged_users(uuid) ON DELETE CASCADE ON UPDATE CASCADE
+                );
+                """;
+        try (Statement statement = sqlSession.getConnection().createStatement()) {
+            statement.execute(query);
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
 }

discord/src/main/java/com/alttd/webinterface/DiscordBot.java

@@ -7,12 +7,7 @@ import lombok.extern.slf4j.Slf4j;
 public class DiscordBot {
 
     public static void main(String[] args) {
-        String discordToken = System.getProperty("DISCORD_TOKEN");
+        DiscordBotInstance discordBotInstance = DiscordBotInstance.getInstance();
-        if (discordToken == null) {
+        discordBotInstance.getJda();
-            log.error("Discord token not found, put it in the DISCORD_TOKEN environment variable");
-            System.exit(1);
-        }
-        DiscordBotInstance discordBotInstance = new DiscordBotInstance();
-        discordBotInstance.start(discordToken);
     }
 }

discord/src/main/java/com/alttd/webinterface/appeals/AppealSender.java

@@ -0,0 +1,60 @@
+package com.alttd.webinterface.appeals;
+
+import com.alttd.webinterface.objects.MessageForEmbed;
+import com.alttd.webinterface.send_message.DiscordSender;
+import lombok.extern.slf4j.Slf4j;
+import net.dv8tion.jda.api.components.actionrow.ActionRow;
+import net.dv8tion.jda.api.components.buttons.Button;
+import net.dv8tion.jda.api.entities.Message;
+
+import java.util.List;
+import java.util.Optional;
+
+@Slf4j
+public class AppealSender {
+
+    private static final AppealSender INSTANCE = new AppealSender();
+
+    public static AppealSender getInstance() {
+        return INSTANCE;
+    }
+
+    public void sendAppeal(List<Long> channelIds, MessageForEmbed messageForEmbed, long assignedTo) {
+        DiscordSender.getInstance()
+                .sendEmbedToChannels(channelIds, messageForEmbed)
+                .whenCompleteAsync((result, error) -> {
+                    if (error != null) {
+                        log.error("Failed sending embed to channels", error);
+                        return;
+                    }
+                    List<Message> list = result.stream()
+                            .filter(Optional::isPresent)
+                            .map(Optional::get)
+                            .toList();
+
+
+                    list.forEach(message -> {
+                        message.createThreadChannel("Appeal")
+                                .queue(channel -> {
+                                    if (assignedTo == 0L) {
+                                        return;
+                                    }
+                                    String assignedUserMessage = "<@" + assignedTo + "> you have a new appeal!";
+                                    channel.sendMessage(assignedUserMessage).queue();
+                                });
+                    });
+
+                    addButtons(list);
+                });
+    }
+
+    public void addButtons(List<Message> messages) {
+        Button reminderAccepted = Button.primary("reminder_accepted", "Accepted");
+        Button reminderInProgress = Button.secondary("reminder_in_progress", "In Progress");
+        Button reminderDenied = Button.danger("reminder_denied", "Denied");
+        messages.forEach(message -> {
+            message.editMessageComponents(ActionRow.of(reminderAccepted, reminderInProgress, reminderDenied)).queue();
+        });
+    }
+
+}

discord/src/main/java/com/alttd/webinterface/appeals/BanToBannedUser.java

@@ -0,0 +1,14 @@
+package com.alttd.webinterface.appeals;
+
+import net.dv8tion.jda.api.entities.Guild;
+
+public class BanToBannedUser {
+
+    public static BannedUser map(Guild.Ban ban) {
+        return new BannedUser(ban.getUser().getIdLong(),
+                              ban.getReason(),
+                              ban.getUser().getEffectiveName(),
+                              ban.getUser().getEffectiveAvatarUrl());
+    }
+
+}

discord/src/main/java/com/alttd/webinterface/appeals/BannedUser.java

@@ -0,0 +1,4 @@
+package com.alttd.webinterface.appeals;
+
+public record BannedUser(long userId, String reason, String name, String avatarUrl) {
+}

discord/src/main/java/com/alttd/webinterface/appeals/DiscordAppealDiscord.java

@@ -0,0 +1,43 @@
+package com.alttd.webinterface.appeals;
+
+import com.alttd.webinterface.bot.DiscordBotInstance;
+import lombok.extern.slf4j.Slf4j;
+import net.dv8tion.jda.api.entities.Guild;
+
+import java.util.Optional;
+import java.util.concurrent.CompletableFuture;
+
+@Slf4j
+public class DiscordAppealDiscord {
+    private static final DiscordAppealDiscord INSTANCE = new DiscordAppealDiscord();
+
+    public static DiscordAppealDiscord getInstance() {
+        return INSTANCE;
+    }
+
+    public CompletableFuture<Optional<BannedUser>> getBannedUser(long discordId) {
+        Guild guildById = DiscordBotInstance.getInstance()
+                .getJda()
+                .getGuildById(141644560005595136L);
+        if (guildById == null) {
+            throw new IllegalStateException("Guild not found");
+        }
+        CompletableFuture<Optional<BannedUser>> completableFuture = new CompletableFuture<>();
+        log.info("Retrieving ban for user {}", discordId);
+        DiscordBotInstance.getInstance().getJda().retrieveUserById(discordId)
+                .queue(user -> {
+                    log.info("Found user {}", user.getEffectiveName());
+                    guildById.retrieveBan(user).queue(ban -> {
+                        if (ban == null) {
+                            completableFuture.complete(Optional.empty());
+                            log.info("User {} is not banned", user.getEffectiveName());
+                            return;
+                        }
+                        log.info("User {} is banned", user.getEffectiveName());
+                        completableFuture.complete(Optional.of(BanToBannedUser.map(ban)));
+                    });
+
+                });
+        return completableFuture;
+    }
+}

discord/src/main/java/com/alttd/webinterface/bot/DiscordBotInstance.java

@@ -6,14 +6,41 @@ import net.dv8tion.jda.api.JDA;
 import net.dv8tion.jda.api.JDABuilder;
 import net.dv8tion.jda.api.requests.GatewayIntent;
 
+import java.util.Optional;
+
 @Slf4j
 public class DiscordBotInstance {
 
-    @Getter
+    private static final DiscordBotInstance INSTANCE = new DiscordBotInstance();
+
+    public static DiscordBotInstance getInstance() {
+        return INSTANCE;
+    }
+
+    private DiscordBotInstance() {}
+
     private JDA jda;
     private volatile boolean ready = false;
 
-    public synchronized void start(String token) {
+    public JDA getJda() {
+        if (jda == null) {
+            String discordToken = Optional.ofNullable(System.getenv("DISCORD_TOKEN"))
+                    .orElse(System.getProperty("DISCORD_TOKEN"));
+            if (discordToken == null) {
+                log.error("Discord token not found, put it in the DISCORD_TOKEN environment variable");
+                System.exit(1);
+            }
+            start(discordToken);
+            try {
+                jda.awaitReady();
+            } catch (InterruptedException e) {
+                throw new RuntimeException(e);
+            }
+        }
+        return jda;
+    }
+
+    private synchronized void start(String token) {
         if (jda != null) {
             return;
         }

discord/src/main/java/com/alttd/webinterface/objects/MessageForEmbed.java

@@ -0,0 +1,49 @@
+package com.alttd.webinterface.objects;
+
+import com.alttd.webinterface.send_message.DiscordSender;
+import net.dv8tion.jda.api.EmbedBuilder;
+import net.dv8tion.jda.api.entities.MessageEmbed;
+
+import java.awt.*;
+import java.time.Instant;
+import java.util.List;
+
+public record MessageForEmbed(String title, String description, List<DiscordSender.EmbedField> fields, Integer colorRgb,
+                              Instant timestamp, String footer) {
+
+    public MessageEmbed toEmbed() {
+        EmbedBuilder eb = new EmbedBuilder();
+        if (title != null && !title.isBlank()) {
+            eb.setTitle(title);
+        }
+        if (description != null && !description.isBlank()) {
+            eb.setDescription(description);
+        }
+        if (colorRgb != null) {
+            eb.setColor(new Color(colorRgb));
+        } else {
+            eb.setColor(new Color(0xFF8C00)); // default orange
+        }
+        eb.setTimestamp(timestamp != null ? timestamp : Instant.now());
+        if (footer != null && !footer.isBlank()) {
+            eb.setFooter(footer);
+        }
+
+        if (fields != null) {
+            for (DiscordSender.EmbedField f : fields) {
+                if (f == null) {
+                    continue;
+                }
+                String name = f.getName() == null ? "" : f.getName();
+                String value = f.getValue() == null ? "" : f.getValue();
+                // JDA field value max is 1024; truncate to be safe
+                if (value.length() > 1024) {
+                    value = value.substring(0, 1021) + "...";
+                }
+                eb.addField(new MessageEmbed.Field(name, value, f.isInline()));
+            }
+        }
+
+        return eb.build();
+    }
+}

discord/src/main/java/com/alttd/webinterface/send_message/DiscordSender.java

@@ -1,26 +1,28 @@
 package com.alttd.webinterface.send_message;
 
 import com.alttd.webinterface.bot.DiscordBotInstance;
+import com.alttd.webinterface.objects.MessageForEmbed;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
-import net.dv8tion.jda.api.EmbedBuilder;
+import net.dv8tion.jda.api.entities.Message;
 import net.dv8tion.jda.api.entities.MessageEmbed;
 import net.dv8tion.jda.api.entities.channel.concrete.TextChannel;
 
-import java.awt.*;
+import java.util.ArrayList;
-import java.time.Instant;
 import java.util.List;
 import java.util.Objects;
 import java.util.Optional;
+import java.util.concurrent.CompletableFuture;
+import java.util.stream.Collectors;
 
 @Slf4j
 public class DiscordSender {
 
     private static final DiscordSender INSTANCE = new DiscordSender();
 
-    private final DiscordBotInstance botInstance = new DiscordBotInstance();
+    private final DiscordBotInstance botInstance = DiscordBotInstance.getInstance();
 
     private DiscordSender() {}
 
@@ -28,19 +30,7 @@ public class DiscordSender {
         return INSTANCE;
     }
 
-    private void ensureStarted() {
-        if (botInstance.getJda() != null) return;
-        String token = Optional.ofNullable(System.getenv("DISCORD_TOKEN"))
-                .orElse(System.getProperty("DISCORD_TOKEN"));
-        if (token == null || token.isBlank()) {
-            log.error("Discord token not found. Set DISCORD_TOKEN as an environment variable or system property.");
-            return;
-        }
-        botInstance.start(token);
-    }
-
     public void sendMessageToChannels(List<Long> channelIds, String message) {
-        ensureStarted();
         if (botInstance.getJda() == null) {
             log.error("JDA not initialized; cannot send Discord message.");
             return;
@@ -70,12 +60,36 @@ public class DiscordSender {
                 });
     }
 
-    public void sendEmbedToChannels(List<Long> channelIds, String title, String description, List<EmbedField> fields,
+    public void sendEmbedWithThreadToChannels(List<Long> channelIds, MessageForEmbed messageForEmbed, String threadName) {
-                                    Integer colorRgb, Instant timestamp, String footer) {
+        sendEmbedToChannels(channelIds, messageForEmbed).whenCompleteAsync((result, error) -> {
-        ensureStarted();
+            if (error != null) {
+                log.error("Failed sending embed to channels", error);
+                return;
+            }
+            result.stream()
+                    .filter(Optional::isPresent)
+                    .map(Optional::get)
+                    .forEach(message ->
+                                     message.createThreadChannel(threadName).queue());
+        });
+    }
+
+    public CompletableFuture<List<Optional<Message>>> sendEmbedToChannels(List<Long> channelIds, MessageForEmbed messageForEmbed) {
+        List<CompletableFuture<Optional<Message>>> futures = new ArrayList<>();
+        for (Long channelId : channelIds) {
+            futures.add(sendEmbedToChannel(channelId, messageForEmbed));
+        }
+        return CompletableFuture.allOf(futures.toArray(new CompletableFuture[0]))
+                .thenApply(v ->
+                                   futures.stream()
+                                           .map(CompletableFuture::join)
+                                           .collect(Collectors.toList()));
+    }
+
+    public CompletableFuture<Optional<Message>> sendEmbedToChannel(Long channelId, MessageForEmbed messageForEmbed) {
         if (botInstance.getJda() == null) {
             log.error("JDA not initialized; cannot send Discord embed.");
-            return;
+            return CompletableFuture.completedFuture(Optional.empty());
         }
         try {
             if (!botInstance.isReady()) {
@@ -83,43 +97,31 @@ public class DiscordSender {
             }
         } catch (InterruptedException e) {
             Thread.currentThread().interrupt();
+            return CompletableFuture.completedFuture(Optional.empty());
         } catch (Exception e) {
             log.warn("Error while waiting for JDA ready state", e);
+            return CompletableFuture.completedFuture(Optional.empty());
         }
 
-        EmbedBuilder eb = new EmbedBuilder();
+        MessageEmbed embed = messageForEmbed.toEmbed();
-        if (title != null && !title.isBlank()) eb.setTitle(title);
-        if (description != null && !description.isBlank()) eb.setDescription(description);
-        if (colorRgb != null) eb.setColor(new Color(colorRgb)); else eb.setColor(new Color(0xFF8C00)); // default orange
-        eb.setTimestamp(timestamp != null ? timestamp : Instant.now());
-        if (footer != null && !footer.isBlank()) eb.setFooter(footer);
 
-        if (fields != null) {
+        TextChannel channel = botInstance.getJda().getChannelById(TextChannel.class, channelId);
-            for (EmbedField f : fields) {
-                if (f == null) continue;
-                String name = f.getName() == null ? "" : f.getName();
-                String value = f.getValue() == null ? "" : f.getValue();
-                // JDA field value max is 1024; truncate to be safe
-                if (value.length() > 1024) value = value.substring(0, 1021) + "...";
-                eb.addField(new MessageEmbed.Field(name, value, f.isInline()));
-            }
-        }
-
-        MessageEmbed embed = eb.build();
-
-        channelIds.stream()
-                .filter(Objects::nonNull)
-                .forEach(id -> {
-                    TextChannel channel = botInstance.getJda().getChannelById(TextChannel.class, id);
         if (channel == null) {
-                        log.warn("TextChannel with id {} not found", id);
+            log.warn("TextChannel with id {} not found when sending embed message", channelId);
-                        return;
+            return CompletableFuture.completedFuture(Optional.empty());
         }
+        CompletableFuture<Optional<Message>> completableFuture = new CompletableFuture<>();
         channel.sendMessageEmbeds(embed).queue(
-                            success -> log.debug("Sent embed to channel {}", id),
+                message -> {
-                            error -> log.error("Failed sending embed to channel {}", id, error)
+                    completableFuture.complete(Optional.of(message));
+                    log.debug("Sent embed to channel {}", channelId);
+                },
+                error -> {
+                    completableFuture.complete(Optional.empty());
+                    log.error("Failed sending embed to channel {}", channelId, error);
+                }
         );
-                });
+        return completableFuture;
     }
 
     @Data

frontend/angular.json

@@ -30,6 +30,11 @@
                 "glob": "**/*",
                 "input": "public",
                 "output": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "public",
+                "output": "assets"
               }
             ],
             "styles": [

frontend/package.json

@@ -13,15 +13,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^20.1.3",
+    "@angular/cdk": "20.2.2",
-    "@angular/common": "^20.1.0",
+    "@angular/common": "20.2.2",
-    "@angular/compiler": "^20.1.0",
+    "@angular/compiler": "20.2.2",
-    "@angular/core": "^20.1.0",
+    "@angular/core": "20.2.2",
-    "@angular/forms": "^20.1.0",
+    "@angular/forms": "20.2.2",
-    "@angular/material": "^20.1.3",
+    "@angular/material": "20.2.2",
-    "@angular/platform-browser": "^20.1.0",
+    "@angular/platform-browser": "20.2.2",
-    "@angular/platform-browser-dynamic": "^20.1.0",
+    "@angular/platform-browser-dynamic": "20.2.2",
-    "@angular/router": "^20.1.0",
+    "@angular/router": "20.2.2",
     "@auth0/angular-jwt": "^5.2.0",
     "@types/three": "^0.177.0",
     "ngx-cookie-service": "^20.0.1",
@@ -31,9 +31,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.0",
+    "@angular/build": "20.2.2",
-    "@angular/cli": "^20.1.0",
+    "@angular/cli": "20.2.2",
-    "@angular/compiler-cli": "^20.1.0",
+    "@angular/compiler-cli": "20.2.2",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
@@ -41,6 +41,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   }
 }

frontend/src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import {TestBed} from '@angular/core/testing';
-import {AppComponent} from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'frontend' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
-  });
-});

frontend/src/app/app.component.ts

@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
 import {ALTITUDE_VERSION} from '@custom-types/constant';
-import {Router, RouterOutlet} from '@angular/router';
+import {RouterOutlet} from '@angular/router';
 import {FooterComponent} from '@pages/footer/footer/footer.component';
 
 @Component({
@@ -27,9 +27,8 @@ export class AppComponent implements OnInit {
     ALTITUDE_VERSION + ',altitude,alttd,play,join,find,friends,friendly,simple,private,whitelist,whitelisted,creative,' +
     'worldedit'
 
-  constructor(private titleService: Title, private metaService: Meta, private router: Router) {
+  private readonly titleService = inject(Title);
-
+  private readonly metaService = inject(Meta);
-  }
 
   ngOnInit(): void {
     this.titleService.setTitle(this.title)

frontend/src/app/app.routes.ts

@@ -2,6 +2,28 @@ import {Routes} from '@angular/router';
 import {AuthGuard} from './guards/auth.guard';
 
 export const routes: Routes = [
+  {
+    path: 'worlddl',
+    redirectTo: 'redirect/worlddl',
+    pathMatch: 'full'
+  },
+  {
+    path: 'grove-dl',
+    redirectTo: 'redirect/grove-dl',
+    pathMatch: 'full'
+  },
+  {
+    path: 'redirect/:type',
+    loadComponent: () => import('./shared-components/redirect/redirect.component').then(m => m.RedirectComponent),
+  },
+  {
+    path: 'login/:code',
+    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_user']
+    }
+  },
   {
     path: '',
     loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)
@@ -14,6 +36,14 @@ export const routes: Routes = [
       requiredAuthorizations: ['SCOPE_head_mod']
     }
   },
+  {
+    path: 'staff-pt',
+    loadComponent: () => import('./pages/head-mod/staff-pt/staff-pt.component').then(m => m.StaffPtComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_head_mod']
+    }
+  },
   {
     path: 'map',
     loadComponent: () => import('./pages/features/map/map.component').then(m => m.MapComponent)
@@ -110,18 +140,38 @@ export const routes: Routes = [
     path: 'forms',
     loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
   },
+  {
+    path: 'appeal/:code',
+    redirectTo: 'forms/appeal/:code',
+    pathMatch: 'full'
+  },
   {
     path: 'appeal',
     redirectTo: 'forms/appeal',
     pathMatch: 'full'
   },
+  {
+    path: 'discord-appeal',
+    redirectTo: 'forms/discord-appeal',
+    pathMatch: 'full'
+  },
+  {
+    path: 'forms/appeal/:code',
+    loadComponent: () => import('./pages/forms/appeal/appeal.component').then(m => m.AppealComponent),
+    canActivate: [AuthGuard],
+    data: {requiredAuthorizations: ['SCOPE_user']}
+  },
   {
     path: 'forms/appeal',
     loadComponent: () => import('./pages/forms/appeal/appeal.component').then(m => m.AppealComponent),
     canActivate: [AuthGuard],
-    data: {
+    data: {requiredAuthorizations: ['SCOPE_user']}
-      requiredAuthorizations: ['SCOPE_user']
+  },
-    }
+  {
+    path: 'forms/discord-appeal',
+    loadComponent: () => import('./pages/forms/discord-appeal/discord-appeal.component').then(m => m.DiscordAppealComponent),
+    canActivate: [AuthGuard],
+    data: {requiredAuthorizations: ['SCOPE_user']}
   },
   {
     path: 'forms/sent',
@@ -154,6 +204,6 @@ export const routes: Routes = [
   },
   {
     path: 'nickgenerator',
-    loadComponent: () => import('./pages/reference/nickgenerator/nickgenerator.component').then(m => m.NickgeneratorComponent)
+    loadComponent: () => import('@pages/reference/nickgenerator/nick-generator.component').then(m => m.NickGeneratorComponent)
   },
 ];

frontend/src/app/guards/auth.guard.ts

@@ -1,9 +1,10 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
-import {map, Observable} from 'rxjs';
+import {from, isObservable, map, Observable, of, switchMap} from 'rxjs';
 import {AuthService} from '@services/auth.service';
 import {MatDialog} from '@angular/material/dialog';
 import {LoginDialogComponent} from '@shared-components/login/login.component';
+import {catchError} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -21,6 +22,23 @@ export class AuthGuard implements CanActivate {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    const code = route.paramMap.get('code');
+    if (code) {
+      return this.authService.login(code).pipe(
+        switchMap(() => {
+          const result = this.canActivateInternal(route, state);
+          if (route.routeConfig?.path === 'login/:code') {
+            this.router.navigateByUrl('/', {replaceUrl: true}).then();
+          }
+          return isObservable(result) ? result : result instanceof Promise ? from(result) : of(result);
+        }),
+        catchError(() => of(this.router.createUrlTree(['/'])))
+      );
+    }
+    return this.canActivateInternal(route, state);
+  }
+
+  private canActivateInternal(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (!this.authService.isAuthenticated$()) {
       this.router.createUrlTree(['/']);
       const dialogRef = this.dialog.open(LoginDialogComponent, {

frontend/src/app/pages/altitude/community/community.component.html

@@ -9,34 +9,90 @@
 
   <main>
     <section class="darkmodeSection">
-      <div class="customContainer">
+      <div class="container teamContainer">
-        <h2>Current Nitro Boosters</h2>
+        <h2 class="sectionTitle">Current Nitro Boosters</h2>
+        @for (member of getTeamMembers('discord') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Nitro booster</p>
+          </div>
+        }
       </div>
     </section>
-    <section id="social" class="darkmodeSectionThree">
+    <section class="darkmodeSectionThree">
-      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+      <div class="container teamContainer">
         <h2 class="sectionTitle">Social Media</h2>
+        @for (member of getTeamMembers('socialmedia') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Social media</p>
+          </div>
+        }
       </div>
       <div style="display: flex; justify-content: center; padding-bottom: 30px;">
         <p style="text-align: center;">We're currently not looking for more people to help manage our socials.</p>
       </div>
     </section>
-    <section id="crateTeam" class="darkmodeSection">
+    <section class="darkmodeSection">
-      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+      <div class="container teamContainer">
-        <h2 class="sectionTitle">Crate Team</h2>
+        <h2 class="sectionTitle">Developers</h2>
+        @for (member of getTeamMembers('developer') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Developer</p>
+          </div>
+        }
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">If you want to be a developer please reach out to .teri on Discord.</p>
       </div>
     </section>
     <section class="darkmodeSectionThree">
-      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Crate Team</h2>
+        @for (member of getTeamMembers('crate') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Crate team</p>
+          </div>
+        }
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container teamContainer">
         <h2 class="sectionTitle">Event Leaders</h2>
+        @for (member of getTeamMembers('eventleader') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Event leaders</p>
+          </div>
+        }
       </div>
       <div style="display: flex; justify-content: center; padding-bottom: 30px;">
         <p style="text-align: center;">We're currently not looking for more Event Leaders.</p>
       </div>
     </section>
-    <section class="darkmodeSection">
+    <section class="darkmodeSectionThree">
-      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+      <div class="container teamContainer">
         <h2 class="sectionTitle">Event Team</h2>
+        @for (member of getTeamMembers('eventteam') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Event team</p>
+          </div>
+        }
       </div>
       <div style="display: flex; justify-content: center; padding-bottom: 30px;">
         <div style="flex-direction: column;">
@@ -46,16 +102,33 @@
         </div>
       </div>
     </section>
-    <section class="darkmodeSectionThree">
+    <section class="darkmodeSection">
-      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+      <div class="container teamContainer">
         <h2 class="sectionTitle">YouTubers & Streamers</h2>
+        @for (member of getTeamMembers('youtube') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Youtuber</p>
+          </div>
+        }
+        @for (member of getTeamMembers('twitch') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                 height="160" width="160" style="width: 160px;">
+            <h2>{{ member.name }}</h2>
+            <p>Streamer</p>
+          </div>
+        }
       </div>
       <div style="display: flex; justify-content: center; padding-bottom: 30px;">
         <div style="flex-direction: column;">
-          <p style="text-align: center;"><a style="cursor: pointer;" id="reqButton">Show Requirements...</a></p>
+          <p style="text-align: center;"><a style="cursor: pointer;" (click)="toggleSection('yt-stream-req')"
+                                            id="reqButton">{{ getTextForSection('yt-stream-req') }}</a></p>
         </div>
       </div>
-      <div id="req" class="hide" style="display: flex; justify-content: center; padding-bottom: 30px;">
+      <div [hidden]="!isToggled('yt-stream-req')" [class.requirementSection]="isToggled('yt-stream-req')">
         <div style="flex-direction: column; justify-content: center; max-width: 800px;">
           <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Requirements:</span>
           </p>

frontend/src/app/pages/altitude/community/community.component.scss

@@ -1,12 +1,32 @@
-.customContainer {
+.sectionTitle {
-  width: 80%;
+  flex: 0 0 100%;
-  max-width: 1020px;
+  text-align: center;
-  margin: auto;
+  padding-bottom: 20px;
-  padding: 80px 0;
+  font-size: 2em;
+}
+
+.member {
+  width: 33%;
+  min-width: 250px;
+  padding-bottom: 50px;
   text-align: center;
 }
 
-.hide {
+.member img {
-  display: none !important;
+  padding-bottom: 15px;
 }
 
+.member p {
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.teamContainer {
+  padding: 50px 0 0 0;
+  justify-content: center;
+}
+
+.requirementSection {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 30px;
+}

frontend/src/app/pages/altitude/community/community.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CommunityComponent } from './community.component';
-
-describe('CommunityComponent', () => {
-  let component: CommunityComponent;
-  let fixture: ComponentFixture<CommunityComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CommunityComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CommunityComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/altitude/community/community.component.ts

@@ -1,14 +1,66 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {HeaderComponent} from "@header/header.component";
+import {map, Observable, shareReplay} from 'rxjs';
+import {Player, TeamService} from '@api';
+import {ScrollService} from '@services/scroll.service';
+import {AsyncPipe, NgOptimizedImage} from '@angular/common';
 
 @Component({
   selector: 'app-community',
   imports: [
-    HeaderComponent
+    HeaderComponent,
+    AsyncPipe,
+    NgOptimizedImage
   ],
   templateUrl: './community.component.html',
   styleUrl: './community.component.scss'
 })
 export class CommunityComponent {
+  private teamMembersCache: { [key: string]: Observable<Player[]> } = {};
 
+  protected scrollService: ScrollService = inject(ScrollService)
+  protected teamService: TeamService = inject(TeamService)
+
+  public getTeamMembers(team: string): Observable<Player[]> {
+    if (!this.teamMembersCache[team]) {
+      this.teamMembersCache[team] = this.teamService.getTeamMembers(team).pipe(
+        map(res => this.removeDuplicates(res)),
+        shareReplay(1)
+      );
+    }
+    return this.teamMembersCache[team];
+  }
+
+  private removeDuplicates(array: Player[]): Player[] {
+    return array.filter((player, index, self) =>
+      index === self.findIndex((p) => p.uuid === player.uuid)
+    );
+  }
+
+  public getAvatarUrl(entry: Player): string {
+    let uuid = entry.uuid.replace('-', '');
+    return `https://crafatar.com/avatars/${uuid}?overlay`;
+  }
+
+  public toggledSections: string[] = [];
+
+  public isToggled(section: string) {
+    return this.toggledSections.includes(section);
+  }
+
+  public toggleSection(section: string) {
+    if (this.isToggled(section)) {
+      this.toggledSections = this.toggledSections.filter(s => s !== section);
+    } else {
+      this.toggledSections.push(section);
+    }
+  }
+
+  public getTextForSection(section: string) {
+    if (this.isToggled(section)) {
+      return 'Hide Requirements...';
+    } else {
+      return 'Show Requirements...';
+    }
+  }
 }

frontend/src/app/pages/altitude/team/team.component.html

@@ -83,4 +83,4 @@
       </section>
     }
   </main>
-            </ng-container>
+</ng-container>

frontend/src/app/pages/features/customfeatures/customfeatures.component.html

@@ -166,7 +166,6 @@
             <p>/iwanttobreakthisblock, required to break some natural generated blocks</p>
             <p>/sneakclickmending, allows you to mend your items by right clicking while sneaking</p>
             <p>Swift Sneak enchantment can be found in villager trades</p>
-            <p>Nether portals can be as small as 1x2 (1x2 portal, 3x4 base)</p>
             <p>Lootchests refill once for every player</p>
             <p>Empty maps can be duplicated using paper in a cartography table</p>
             <p>Eating glow berries gives you a glowing effect</p>

frontend/src/app/pages/footer/footer/footer.component.html

@@ -1,9 +1,13 @@
-<footer>
+@if (hideFooter()) {
+
+} @else {
+  <footer>
     <div class="footer">
       <div class="footerInner">
         <div class="footerText">
           <h2>ABOUT US</h2>
-        <p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
+          <p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you
+            come
             to call "home". We are your place to get together with friends and play survival, with a few extra features
             suggested by our community!</p>
           <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
@@ -41,4 +45,5 @@
       <p class="copyright">Copyright © 2015-{{ getCurrentYear() }} Altitude. All rights Reserved. Not affiliated with
         Mojang AB or Microsoft.</p>
     </div>
-</footer>
+  </footer>
+}

frontend/src/app/pages/footer/footer/footer.component.ts

@@ -1,19 +1,21 @@
-import {Component} from '@angular/core';
+import {Component, computed, inject} from '@angular/core';
 import {ALTITUDE_VERSION} from '@custom-types/constant';
-import { NgOptimizedImage } from '@angular/common';
+import {FooterService} from '@services/footer.service';
 import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
   imports: [
-    RouterLink,
+    RouterLink
-    NgOptimizedImage
+  ],
-],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
+  private readonly footerService: FooterService = inject(FooterService);
+  hideFooter = computed(() => (this.footerService.hideFooter()));
+
   public getCurrentYear() {
     return new Date().getFullYear();
   }

frontend/src/app/pages/forms/appeal/appeal.component.html

@@ -6,6 +6,7 @@
     </div>
   </app-header>
   <main>
+    <app-full-size>
       <section class="darkmodeSection appeal-container">
         <div class="form-container">
           <div class="pages">
@@ -35,7 +36,8 @@
             @if (currentPageIndex === 1) {
               <section class="formPage">
                 <div class="description">
-                <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct account
+                  <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct
+                    account
                     please continue</p>
                   <br>
                   <p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
@@ -101,7 +103,8 @@
                       </div>
                     }
                   </div>
-                <button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
+                  <button mat-raised-button (click)="validateMailOrNextPage()"
+                          [disabled]="form.controls.email.invalid">
                     Next
                   </button>
                 </section>
@@ -127,7 +130,7 @@
                       }
                     </mat-form-field>
                   </div>
-                <button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid">
+                  <button mat-raised-button (click)="onSubmit()" [disabled]="formSubmitting || form.invalid">
                     Submit Appeal
                   </button>
                 </section>
@@ -157,5 +160,7 @@
           }
         </div>
       </section>
+
+    </app-full-size>
   </main>
 </div>

frontend/src/app/pages/forms/appeal/appeal.component.scss

@@ -5,7 +5,7 @@
 .appeal-container {
   display: flex;
   flex-direction: column;
-  min-height: 80vh;
+  height: 100%;
 }
 
 main {

frontend/src/app/pages/forms/appeal/appeal.component.ts

@@ -1,14 +1,4 @@
-import {
+import {Component, computed, inject, OnDestroy, OnInit, signal} from '@angular/core';
-  AfterViewInit,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  signal
-} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {AppealsService, EmailEntry, HistoryService, MailService, MinecraftAppeal, PunishmentHistory} from '@api';
 import {HeaderComponent} from '@header/header.component';
@@ -24,6 +14,8 @@ import {HistoryFormatService} from '@pages/reference/bans/history-format.service
 import {MatDialog} from '@angular/material/dialog';
 import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
 import {Router} from '@angular/router';
+import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
+import {finalize} from 'rxjs';
 
 @Component({
   selector: 'app-appeal',
@@ -37,11 +29,12 @@ import {Router} from '@angular/router';
     MatSelectModule,
     MatInputModule,
     ReactiveFormsModule,
+    FullSizeComponent,
   ],
   templateUrl: './appeal.component.html',
   styleUrl: './appeal.component.scss'
 })
-export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
+export class AppealComponent implements OnInit, OnDestroy {
 
   private mailService = inject(MailService);
   private historyFormatService = inject(HistoryFormatService);
@@ -61,10 +54,7 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
   protected emailIsValid = signal<boolean>(false);
   protected dialog = inject(MatDialog);
 
-  constructor(
+  constructor() {
-    private elementRef: ElementRef,
-    private renderer: Renderer2
-  ) {
     this.form = new FormGroup({
       email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
       appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
@@ -97,16 +87,6 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
     })
   }
 
-  ngAfterViewInit() {
-    this.setupResizeObserver();
-    this.updateContainerHeight();
-
-    this.boundHandleResize = this.handleResize.bind(this);
-    window.addEventListener('resize', this.boundHandleResize);
-
-    setTimeout(() => this.updateContainerHeight(), 0);
-  }
-
   ngOnDestroy() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
@@ -118,41 +98,6 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  private handleResize() {
-    this.updateContainerHeight();
-  }
-
-  private setupResizeObserver() {
-    this.resizeObserver = new ResizeObserver(() => {
-      this.updateContainerHeight();
-    });
-
-    const headerElement = document.querySelector('app-header');
-    if (headerElement) {
-      this.resizeObserver.observe(headerElement);
-    }
-
-    const footerElement = document.querySelector('footer');
-    if (footerElement) {
-      this.resizeObserver.observe(footerElement);
-    }
-  }
-
-  private updateContainerHeight() {
-    const headerElement = document.querySelector('app-header');
-    const footerElement = document.querySelector('footer');
-
-    const container = this.elementRef.nativeElement.querySelector('.appeal-container');
-
-    if (headerElement && footerElement && container) {
-      const headerHeight = headerElement.getBoundingClientRect().height;
-      const footerHeight = footerElement.getBoundingClientRect().height;
-
-      const calculatedHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
-      this.renderer.setStyle(container, 'min-height', calculatedHeight);
-    }
-  }
-
   public onSubmit() {
     if (this.form === undefined) {
       console.error('Form is undefined');
@@ -174,7 +119,13 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private router = inject(Router)
 
+  protected formSubmitting: boolean = false;
+
   private sendForm() {
+    if (this.formSubmitting) {
+      return;
+    }
+    this.formSubmitting = true;
     const rawValue = this.form.getRawValue();
     const uuid = this.authService.getUuid();
     if (uuid === null) {
@@ -188,7 +139,11 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
       username: this.authService.username()!,
       uuid: uuid
     }
-    this.appealsService.submitMinecraftAppeal(appeal).subscribe((result) => {
+    this.appealsService.submitMinecraftAppeal(appeal)
+      .pipe(
+        finalize(() => this.formSubmitting = false)
+      )
+      .subscribe((result) => {
         if (!result.verified_mail) {
           throw new Error('Mail not verified');
         }

frontend/src/app/pages/forms/discord-appeal/discord-appeal.component.html

@@ -0,0 +1,185 @@
+<div>
+  <app-header [current_page]="'appeal'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Discord Appeal</h1>
+    </div>
+  </app-header>
+  <main>
+    <app-full-size>
+      <section class="darkmodeSection appeal-container">
+        <div class="form-container">
+          <div class="pages">
+            @if (currentPageIndex === 0) {
+              <section class="formPage">
+                <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
+                <h1>Discord Appeal</h1>
+                <p>We aim to respond within 48 hours.</p>
+                <button mat-raised-button (click)="nextPage()">
+                  Next
+                </button>
+              </section>
+            }
+
+            @if (currentPageIndex === 1) {
+              <section class="formPage">
+                <div class="description">
+                  <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct
+                    account please continue</p>
+                  <br>
+                  <p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
+                    We will investigate the punishment you are appealing and respond within 48 hours.</p>
+                  <p style="font-style: italic;">Appeals that seem to have been made with
+                    little to no effort will be automatically denied.</p>
+                </div>
+                <button mat-raised-button (click)="nextPage()" [disabled]="authService.username() == null">
+                  I, {{ authService.username() }}, understand and agree
+                </button>
+              </section>
+            }
+
+            @if (currentPageIndex === 2) {
+              <section class="formPage">
+                <div class="description">
+                  <p>Please enter your Discord ID below.</p>
+                  <p>You can find your Discord ID by going to User settings -> Advanced -> Developer Mode and turning it
+                    on</p>
+                  <p>With Developer Mode on in Discord click your profile in the bottom left and click Copy User ID</p>
+                  <p>We use this to find your punishment on our Discord server.</p>
+                </div>
+                <mat-form-field appearance="fill">
+                  <mat-label>Discord Id</mat-label>
+                  <input matInput placeholder="Discord ID" [(ngModel)]="discordId"
+                         minlength="17" maxlength="18" pattern="^[0-9]+$">
+                </mat-form-field>
+                <button mat-raised-button (click)="checkPunishment()"
+                        [disabled]="punishmentLoading || authService.username() == null">
+                  Check punishments
+                </button>
+              </section>
+            }
+
+            @if (currentPageIndex === 3) {
+              @if (bannedUser == null) {
+                <section class="formPage">
+                  <div class="description">
+                    <p>We were unable to find your punishment on our Discord server.</p>
+                  </div>
+                </section>
+              } @else if (!bannedUser.isBanned || bannedUser.bannedUser == null) {
+                <section class="formPage">
+                  <div class="description">
+                    <p>Your discord account is not banned on our Discord server.</p>
+                  </div>
+                </section>
+              } @else {
+                <section class="formPage">
+                  <div class="description">
+                    <img ngSrc="{{ bannedUser.bannedUser.avatarUrl }}" title="{{ bannedUser.bannedUser.name }}"
+                         width="128" height="128" class="discord-avatar"
+                         alt="Avatar for Discord user {{ bannedUser.bannedUser.name }}">
+                    <p style="text-align: center">{{ bannedUser.bannedUser.name }}</p>
+                    <p style="margin-top: 30px;">Your punishment is: <strong>{{ bannedUser.bannedUser.reason }}</strong>
+                    </p>
+                    <button style="display: block; margin-top: 30px;" class="centered" mat-raised-button
+                            (click)="nextPage()"
+                            [disabled]="authService.username() == null">
+                      This is my punishment, continue to appeal
+                    </button>
+                  </div>
+                </section>)
+              }
+            }
+            @if (currentPageIndex >= 4) {
+              <form [formGroup]="form">
+                @if (currentPageIndex === 4) {
+                  <section class="formPage">
+                    <div class="description">
+                      <h2>Please enter your email.</h2>
+                      <p style="font-style: italic">It does not have to be your minecraft email. You will have to verify
+                        it</p>
+                      <mat-form-field appearance="fill" style="width: 100%;">
+                        <mat-label>Email</mat-label>
+                        <input matInput
+                               formControlName="email"
+                               placeholder="Email"
+                               type="email">
+                        @if (form.controls.email.invalid && form.controls.email.touched) {
+                          <mat-error>
+                            @if (form.controls.email.errors?.['required']) {
+                              Email is required
+                            } @else if (form.controls.email.errors?.['email']) {
+                              Please enter a valid email address
+                            }
+                          </mat-error>
+                        }
+                      </mat-form-field>
+                      @if (emailIsValid()) {
+                        <div class="valid-email">
+                          <ng-container matSuffix>
+                            <mat-icon>check</mat-icon>
+                            <span>You have validated your email previously, and can continue to the next page!</span>
+                          </ng-container>
+                        </div>
+                      }
+                    </div>
+                    <button mat-raised-button (click)="validateMailOrNextPage()"
+                            [disabled]="form.controls.email.invalid">
+                      Next
+                    </button>
+                  </section>
+                }
+                @if (currentPageIndex === 5) {
+                  <section class="formPage">
+                    <div class="description">
+                      <h2>Why should your ban be reduced or removed?</h2>
+                      <p style="font-style: italic">Please take your time writing this, we're more likely to accept an
+                        appeal if effort was put into it.</p>
+                      <mat-form-field appearance="fill" style="width: 100%;">
+                        <mat-label>Reason</mat-label>
+                        <textarea matInput formControlName="appeal" placeholder="Reason" rows="6"></textarea>
+                        @if (form.controls.appeal.invalid && form.controls.appeal.touched) {
+                          <mat-error>
+                            @if (form.controls.appeal.errors?.['required']) {
+                              Reason is required
+                            } @else if (form.controls.appeal.errors?.['minlength']) {
+                              Reason must be at least 10 characters
+                            }
+                          </mat-error>
+                        }
+                      </mat-form-field>
+                    </div>
+                    <button mat-raised-button (click)="onSubmit()" [disabled]="formSubmitting || form.invalid">
+                      Submit Appeal
+                    </button>
+                  </section>
+                }
+              </form>
+            }
+          </div>
+
+          <!-- Navigation dots -->
+          @if (totalPages.length > 1) {
+            <div class="form-navigation">
+              <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
+                <mat-icon>navigate_before</mat-icon>
+              </button>
+
+              @for (i of totalPages; track i) {
+                <div
+                  class="nav-dot"
+                  [class.active]="i === currentPageIndex"
+                  (click)="goToPage(i)">
+                </div>
+              }
+
+              <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
+                <mat-icon>navigate_next</mat-icon>
+              </button>
+            </div>
+          }
+        </div>
+      </section>
+    </app-full-size>
+  </main>
+</div>

frontend/src/app/pages/forms/discord-appeal/discord-appeal.component.scss

@@ -0,0 +1,121 @@
+:host {
+  display: block;
+}
+
+.appeal-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.formPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.navigation-buttons {
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.form-navigation {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+.nav-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-top: auto;
+  margin-bottom: auto;
+
+  &.active {
+    background-color: #fff;
+  }
+}
+
+.nav-button {
+  color: #1f9bde;
+}
+
+.pages {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.description {
+  max-width: 75ch;
+  text-align: left;
+}
+
+.valid-email {
+  display: flex;
+  align-items: center;
+  color: #4CAF50;
+  margin: 10px 0;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: rgba(76, 175, 80, 0.1);
+}
+
+.valid-email mat-icon {
+  color: #4CAF50;
+  margin-right: 10px;
+}
+
+.valid-email span {
+  color: #4CAF50;
+  font-weight: 500;
+}
+
+.discord-avatar {
+  width: 128px;
+  height: 128px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

frontend/src/app/pages/forms/discord-appeal/discord-appeal.component.ts

@@ -0,0 +1,218 @@
+import {Component, computed, effect, inject, OnInit, signal} from '@angular/core';
+import {AppealsService, BannedUserResponse, DiscordAppeal, EmailEntry, MailService} from '@api';
+import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
+import {HeaderComponent} from '@header/header.component';
+import {MatButton, MatIconButton} from '@angular/material/button';
+import {NgOptimizedImage} from '@angular/common';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {AuthService} from '@services/auth.service';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
+import {MatDialog} from '@angular/material/dialog';
+import {Router} from '@angular/router';
+import {finalize} from 'rxjs';
+
+@Component({
+  selector: 'app-discord-appeal',
+  imports: [
+    FullSizeComponent,
+    HeaderComponent,
+    MatButton,
+    MatProgressSpinnerModule,
+    NgOptimizedImage,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatIconButton,
+  ],
+  templateUrl: './discord-appeal.component.html',
+  styleUrl: './discord-appeal.component.scss'
+})
+export class DiscordAppealComponent implements OnInit {
+  private readonly appealService: AppealsService = inject(AppealsService)
+  private readonly mailService = inject(MailService);
+  private readonly dialog = inject(MatDialog);
+  private readonly router = inject(Router)
+
+  private emails = signal<EmailEntry[]>([]);
+
+  protected readonly authService = inject(AuthService);
+
+  protected bannedUser: BannedUserResponse | null = null;
+  protected discordId: string = window.location.hostname === 'localhost' ? '212303885988134914' : '';
+  protected verifiedEmails = computed(() => this.emails()
+    .filter(email => {
+      console.log(email.verified)
+      return email.verified
+    })
+    .map(email => {
+      console.log(email.email.toLowerCase())
+      return email.email.toLowerCase()
+    }));
+  protected emailIsValid = signal<boolean>(false);
+  protected currentPageIndex: number = 0;
+  protected totalPages: number[] = [0];
+  protected form: FormGroup<WebDiscordAppeal>;
+
+  constructor() {
+    this.form = new FormGroup({
+      email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
+      appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
+    });
+    effect(() => {
+      if (this.verifiedEmails().length > 0) {
+        console.log('verified emails')
+        console.log(this.verifiedEmails()[0])
+        this.form.get('email')?.setValue(this.verifiedEmails()[0]);
+        this.emailIsValid.set(true);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    if (window.location.hostname === 'localhost') {
+      this.emails.set([{email: '[email protected]', verified: true}])
+    } else {
+      this.mailService.getUserEmails().subscribe(emails => {
+        this.emails.set(emails);
+      });
+    }
+    this.form.valueChanges.subscribe(() => {
+      if (this.verifiedEmails().includes(this.form.getRawValue().email.toLowerCase())) {
+        this.emailIsValid.set(true);
+      } else {
+        this.emailIsValid.set(false);
+      }
+    });
+
+  }
+
+  protected validateMailOrNextPage() {
+    if (this.emailIsValid()) {
+      this.nextPage();
+      return;
+    }
+    const dialogRef = this.dialog.open(VerifyMailDialogComponent, {
+      data: {email: this.form.getRawValue().email},
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === true) {
+        this.emailIsValid.set(true);
+      }
+    });
+  }
+
+  public goToPage(pageIndex: number): void {
+    if (pageIndex >= 0 && pageIndex < this.totalPages.length) {
+      this.currentPageIndex = pageIndex;
+    }
+  }
+
+  public previousPage() {
+    this.goToPage(this.currentPageIndex - 1);
+  }
+
+  public nextPage() {
+    if (this.currentPageIndex === this.totalPages.length - 1) {
+      this.totalPages.push(this.currentPageIndex + 1);
+    }
+    this.goToPage(this.currentPageIndex + 1);
+  }
+
+  public isFirstPage(): boolean {
+    return this.currentPageIndex === 0;
+  }
+
+  public isLastPage(): boolean {
+    return this.currentPageIndex === this.totalPages.length - 1;
+  }
+
+  protected punishmentLoading: boolean = false;
+
+  protected checkPunishment() {
+    if (this.punishmentLoading) {
+      return;
+    }
+    if (window.location.hostname === 'localhost') {
+      this.bannedUser = {
+        isBanned: false,
+        bannedUser: {
+          userId: '212303885988134914',
+          reason: "This is a test punishment",
+          name: "stijn",
+          avatarUrl: "https://cdn.discordapp.com/avatars/212303885988134914/3a264be54ca7208d638a22143fc8fdb8.webp?size=160"
+        }
+      }
+      this.nextPage();
+      return
+    }
+    this.appealService.getBannedUser(this.discordId)
+      .pipe(
+        finalize(() => this.punishmentLoading = false)
+      )
+      .subscribe(user => {
+        this.bannedUser = user
+        this.nextPage();
+      });
+  }
+
+  protected onSubmit() {
+    if (this.form === undefined) {
+      console.error('Form is undefined');
+      return
+    }
+    if (this.form.valid) {
+      this.sendForm()
+    } else {
+      Object.keys(this.form.controls).forEach(field => {
+        const control = this.form!.get(field);
+        if (!(control instanceof FormGroup)) {
+          console.error('Control [' + control + '] is not a FormGroup');
+          return;
+        }
+        control.markAsTouched({onlySelf: true});
+      });
+    }
+  }
+
+  protected formSubmitting: boolean = false;
+
+  private sendForm() {
+    if (this.formSubmitting) {
+      return;
+    }
+    this.formSubmitting = true;
+    const rawValue = this.form.getRawValue();
+    const uuid = this.authService.getUuid();
+    if (uuid === null) {
+      throw new Error('JWT subject is null, are you logged in?');
+    }
+    const appeal: DiscordAppeal = {
+      discordId: this.discordId,
+      appeal: rawValue.appeal,
+      email: rawValue.email,
+    }
+    this.appealService.submitDiscordAppeal(appeal)
+      .pipe(
+        finalize(() => this.formSubmitting = false)
+      )
+      .subscribe((result) => {
+        if (!result.verified_mail) {
+          throw new Error('Mail not verified');
+        }
+        this.router.navigate(['/forms/sent'], {
+          state: {message: result.message}
+        }).then();
+      })
+  }
+}
+
+interface WebDiscordAppeal {
+  email: FormControl<string>;
+  appeal: FormControl<string>;
+}

frontend/src/app/pages/forms/sent/sent.component.html

@@ -6,8 +6,13 @@
     </div>
   </app-header>
   <main>
-    <section class="darkmodeSection">
+    <app-full-size>
+      <section class="darkmodeSection full-height flex">
+        <div class="margin-auto">
           <p>{{ message }}</p>
+        </div>
       </section>
+    </app-full-size>
   </main>
 </div>
+

frontend/src/app/pages/forms/sent/sent.component.ts

@@ -1,11 +1,13 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
 import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-sent',
   imports: [
-    HeaderComponent
+    HeaderComponent,
+    FullSizeComponent
   ],
   templateUrl: './sent.component.html',
   styleUrl: './sent.component.scss',

frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html

@@ -0,0 +1,52 @@
+<div>
+  <app-header [current_page]="'staff-pt'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">
+
+  </app-header>
+  <section class="darkmodeSection full-height">
+    <div class="staff-pt-container centered">
+      <div class="week-header">
+        <button mat-icon-button (click)="prevWeek()" matTooltip="Previous week" aria-label="Previous week">
+          <mat-icon style="color: var(--font-color)">chevron_left</mat-icon>
+        </button>
+
+        <div class="week-title"><span style="color: var(--font-color)">{{ weekLabel() }}</span></div>
+
+        <button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
+                matTooltip="Next week" aria-label="Next week">
+          <mat-icon style="color: var(--font-color)">chevron_right</mat-icon>
+        </button>
+      </div>
+
+      <table mat-table [dataSource]="sortedStaffPt()" class="mat-elevation-z2 full-width" matSort
+             (matSortChange)="sort.set($event)"
+             [matSortActive]="sort().active" [matSortDirection]="sort().direction" [matSortDisableClear]="true">
+        <ng-container matColumnDef="staff_member">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="staff_member">Staff Member</th>
+          <td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="playtime">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="playtime">Playtime</th>
+          <td mat-cell *matCellDef="let row"
+              [style.color]="row.playtime < 420 ? 'red' : ''"> {{ minutesToHm(row.playtime) }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="role">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="role">Rank</th>
+          <td mat-cell *matCellDef="let row"> {{ row.role }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        @if (!staffPt().length) {
+          <tr class="no-data">
+            <td colspan="3">No data for this week.</td>
+          </tr>
+        }
+      </table>
+    </div>
+  </section>
+</div>

frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.scss

@@ -0,0 +1,28 @@
+.staff-pt-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 60%;
+}
+
+.week-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.week-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.full-width {
+  width: 100%;
+}
+
+
+.no-data td {
+  text-align: center;
+  padding: 16px;
+}

frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.ts

@@ -0,0 +1,138 @@
+import {Component, computed, inject, OnInit, signal} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatTableModule} from '@angular/material/table';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSortModule, Sort} from '@angular/material/sort';
+import {SiteService, StaffPlaytime} from '@api';
+import {HeaderComponent} from '@header/header.component';
+
+@Component({
+  selector: 'app-staff-pt',
+  standalone: true,
+  imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, MatSortModule, HeaderComponent],
+  templateUrl: './staff-pt.component.html',
+  styleUrl: './staff-pt.component.scss'
+})
+export class StaffPtComponent implements OnInit {
+  siteService = inject(SiteService);
+
+  staffPt = signal<StaffPlaytime[]>([]);
+  sort = signal<Sort>({active: 'playtime', direction: 'desc'} as Sort);
+  sortedStaffPt = computed<StaffPlaytime[]>(() => {
+    const data = [...this.staffPt()];
+    const {active, direction} = this.sort();
+    if (!direction || !active) return data;
+    const dir = direction === 'asc' ? 1 : -1;
+    return data.sort((a, b) => {
+      switch (active) {
+        case 'staff_member':
+          return a.staff_member.localeCompare(b.staff_member) * dir;
+        case 'role':
+          return a.role.localeCompare(b.role) * dir;
+        case 'playtime':
+        default:
+          return ((a.playtime ?? 0) - (b.playtime ?? 0)) * dir;
+      }
+    });
+  });
+
+  weekStart = signal<Date>(this.getStartOfWeek(new Date()));
+  weekEnd = computed(() => this.getEndOfWeek(this.weekStart()));
+
+  todayStart = signal<Date>(this.startOfDay(new Date()));
+
+  displayedColumns = ['staff_member', 'playtime', 'role'];
+
+  ngOnInit(): void {
+    this.loadCurrentWeek();
+  }
+
+  private loadCurrentWeek() {
+    this.loadStaffData(this.weekStart(), this.weekEnd());
+  }
+
+  prevWeek() {
+    const prev = new Date(this.weekStart());
+    prev.setDate(prev.getDate() - 7);
+    prev.setHours(0, 0, 0, 0);
+    this.weekStart.set(prev);
+    this.loadCurrentWeek();
+  }
+
+  nextWeek() {
+    if (!this.canGoNextWeek()) return;
+    const next = new Date(this.weekStart());
+    next.setDate(next.getDate() + 7);
+    next.setHours(0, 0, 0, 0);
+    this.weekStart.set(next);
+    this.loadCurrentWeek();
+  }
+
+  canGoNextWeek(): boolean {
+    const nextWeekStart = new Date(this.weekStart());
+    nextWeekStart.setDate(nextWeekStart.getDate() + 7);
+    nextWeekStart.setHours(0, 0, 0, 0);
+    return nextWeekStart.getTime() <= this.todayStart().getTime();
+  }
+
+  weekLabel(): string {
+    const start = this.weekStart();
+    const end = this.weekEnd();
+
+    const startFmt = start.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});
+    const endFmt = end.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});
+    const year = end.getFullYear();
+    return `Week ${startFmt} – ${endFmt}, ${year}`;
+  }
+
+  minutesToHm(mins?: number): string {
+    if (mins == null) return '';
+    const d = Math.floor(mins / 1440);
+    const h = Math.floor((mins % 1440) / 60);
+    const m = mins % 60;
+    const parts = [];
+    if (d > 0) {
+      parts.push(`${d}d`);
+    }
+    if (h > 0 || d > 0) {
+      parts.push(`${h}h`);
+    }
+    if (m > 0 || (h === 0 && d === 0)) {
+      parts.push(`${m}m`);
+    }
+    return parts.join(' ');
+  }
+
+  private loadStaffData(from: Date, to: Date) {
+    const fromUtc = new Date(from.getTime() - from.getTimezoneOffset() * 60000);
+    const toUtc = new Date(to.getTime() - to.getTimezoneOffset() * 60000);
+
+    this.siteService.getStaffPlaytime(fromUtc.toISOString(), toUtc.toISOString())
+      .subscribe({
+        next: data => this.staffPt.set(data ?? []),
+        error: err => console.error('Error getting staff playtime:', err)
+      });
+  }
+
+  private getStartOfWeek(date: Date): Date {
+    const d = new Date(date);
+    d.setDate(d.getDate() - d.getDay()); // Sunday start
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }
+
+  private getEndOfWeek(start: Date): Date {
+    const d = new Date(start);
+    d.setDate(start.getDate() + 6);
+    d.setHours(23, 59, 59, 999);
+    return d;
+  }
+
+  private startOfDay(date: Date): Date {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }
+}

frontend/src/app/pages/header/header/header.component.html

@@ -132,8 +132,8 @@
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
               <li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" [routerLink]="['/contact']">Contact
                 Us</a></li>
-              <li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
+              <li class="nav_li"><a class="nav_link2" [routerLink]="['/appeal']">Ban Appeal</a></li>
-                Appeal</a></li>
+              <li class="nav_li"><a class="nav_link2" [routerLink]="['/discord-appeal']">Discord Ban Appeal</a></li>
               <li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
             </ul>
           </li>
@@ -144,6 +144,7 @@
               <ul class="dropdown">
                 @if (hasAccess([PermissionClaim.HEAD_MOD])) {
                   <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
+                  <li class="nav_li"><a class="nav_link2" [routerLink]="['/staff-pt']">StaffPlaytime</a></li>
                 }
               </ul>
             </li>

frontend/src/app/pages/particles/components/frames/frames.component.html

@@ -1,7 +1,22 @@
 <div class="card-div">
   <mat-card>
-    <mat-card-header>
+    <mat-card-header class="frame-header-fullwidth">
-      <mat-card-title>Frames</mat-card-title>
+      <div class="frame-header-row" mat-card-title>
+        <span class="frame-title-text">Frames</span>
+        <div>
+          <ng-content></ng-content>
+          <button mat-icon-button color="warn" (click)="removeFrame(currentFrame)"
+                  matTooltip="Delete {{currentFrame}}"
+                  [disabled]="frames.length <= 1">
+            <mat-icon [class.can-delete]="frames.length > 1" [class.can-not-delete]="frames.length <= 1">
+              delete
+            </mat-icon>
+          </button>
+          <button mat-icon-button (click)="addFrame()" matTooltip="Add Frame">
+            <mat-icon class="add-button">add</mat-icon>
+          </button>
+        </div>
+      </div>
     </mat-card-header>
     <mat-card-content>
       <div class="frames-container">
@@ -33,21 +48,10 @@
                     </div>
                   }
                 </div>
-                <div class="frame-actions">
-                  <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
-                    [disabled]="frames.length <= 1">
-                    Remove Frame
-                  </button>
-                </div>
               </div>
             </mat-tab>
           }
         </mat-tab-group>
-        <div class="add-frame">
-          <button mat-raised-button color="primary" (click)="addFrame()">
-            Add New Frame
-          </button>
-        </div>
       </div>
     </mat-card-content>
   </mat-card>

frontend/src/app/pages/particles/components/frames/frames.component.scss

@@ -6,6 +6,36 @@
   padding: 15px;
 }
 
+:host ::ng-deep .mat-mdc-card-header-text {
+  width: 90%;
+  text-align: center;
+}
+
+.frame-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.frame-title-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.add-button {
+  color: green
+}
+
+.can-delete {
+  color: red;
+}
+
+.can-not-delete {
+  color: gray;
+}
+
 .particles-list {
   height: 550px;
   overflow-y: auto;

frontend/src/app/pages/particles/components/frames/frames.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FramesComponent } from './frames.component';
-
-describe('FramesComponent', () => {
-  let component: FramesComponent;
-  let fixture: ComponentFixture<FramesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FramesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(FramesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/components/frames/frames.component.ts

@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
-import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatIconButton} from "@angular/material/button";
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {MatTab, MatTabGroup} from "@angular/material/tabs";
 
@@ -7,11 +7,11 @@ import {ParticleData} from '../../models/particle.model';
 import {MatIcon} from '@angular/material/icon';
 import {ParticleManagerService} from '../../services/particle-manager.service';
 import {FrameManagerService} from '../../services/frame-manager.service';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-frames',
   imports: [
-    MatButton,
     MatCard,
     MatCardContent,
     MatCardHeader,
@@ -19,17 +19,15 @@ import {FrameManagerService} from '../../services/frame-manager.service';
     MatIcon,
     MatIconButton,
     MatTab,
-    MatTabGroup
+    MatTabGroup,
-],
+    MatTooltipModule,
+  ],
   templateUrl: './frames.component.html',
   styleUrl: './frames.component.scss'
 })
 export class FramesComponent {
-
+  private particleManagerService = inject(ParticleManagerService);
-  constructor(
+  private frameManagerService = inject(FrameManagerService);
-    private particleManagerService: ParticleManagerService,
-    private frameManagerService: FrameManagerService) {
-  }
 
   /**
    * Get the particle data

frontend/src/app/pages/particles/components/particle-manager/particle-manager.component.html

@@ -0,0 +1,39 @@
+<div class="card-div">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>
+        <span>Particle Manager</span>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <br>
+      <div class="row">
+        <div class="column">
+          <mat-form-field appearance="outline" class="type-field">
+            <mat-label>Particle to download</mat-label>
+            <input type="text"
+                   [(ngModel)]="selectedParticle"
+                   placeholder="Name of particle to download"
+                   matInput>
+          </mat-form-field>
+          <button mat-icon-button (click)="downloadParticle()">
+            <mat-icon>download</mat-icon>
+          </button>
+        </div>
+        <div class="row">
+          <mat-form-field appearance="outline" class="type-field">
+            <mat-label>Particle to upload</mat-label>
+            <input type="text"
+                   disabled
+                   [ngModel]="createdParticleName"
+                   placeholder="Name of particle to upload"
+                   matInput>
+          </mat-form-field>
+          <button mat-icon-button (click)="uploadParticle()">
+            <mat-icon>upload</mat-icon>
+          </button>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

frontend/src/app/pages/particles/components/particle-manager/particle-manager.component.scss

@@ -0,0 +1,6 @@
+.card-div {
+  mat-card {
+    background-color: var(--color-primary);
+    color: var(--font-color);
+  }
+}

frontend/src/app/pages/particles/components/particle-manager/particle-manager.component.ts

@@ -0,0 +1,86 @@
+import {Component, inject} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatInput, MatLabel} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {ParticlesService} from '@api';
+import {ParticleManagerService} from '@pages/particles/services/particle-manager.service';
+import {FrameManagerService} from '@pages/particles/services/frame-manager.service';
+
+@Component({
+  selector: 'app-particle-manager',
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatInput,
+    MatLabel,
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatIconModule,
+    MatButtonModule,
+  ],
+  templateUrl: './particle-manager.component.html',
+  styleUrl: './particle-manager.component.scss'
+})
+export class ParticleManagerComponent {
+
+  private readonly particlesService = inject(ParticlesService)
+  private readonly particleManagerService = inject(ParticleManagerService)
+  private readonly frameManagerService = inject(FrameManagerService)
+
+  private selectedParticleName: string = '';
+
+  set selectedParticle(particle: string) {
+    this.selectedParticleName = particle;
+  }
+
+  get selectedParticle(): string {
+    return this.selectedParticleName;
+  }
+
+  get createdParticleName(): string {
+    return this.particleManagerService.getParticleData().particle_name;
+  }
+
+  protected downloadParticle() {
+    if (this.selectedParticleName === '') {
+      return;
+    }
+    this.particlesService
+      .downloadFile(this.selectedParticleName)
+      .subscribe({
+          next: data => {
+            data.text().then(text => {
+              if (text.startsWith('<')) {
+                console.error("Failed to download particle: Invalid file format")
+                return;
+              }
+              this.particleManagerService.loadParticleData(text)
+              this.frameManagerService.switchFrame(this.particleManagerService.getCurrentFrame())
+            })
+          },
+          error: () => {
+            console.error("Failed to download particle: Invalid file name")
+          },
+        }
+      )
+  }
+
+  protected uploadParticle() {
+    this.particlesService
+      .saveFile(this.createdParticleName, new Blob([this.particleManagerService.generateJson()], {type: 'application/json'}))
+      .subscribe({
+        next: () => {
+          console.log("Successfully uploaded particle")
+        },
+        error: () => {
+          console.error("Failed to upload particle")
+        }
+      })
+  }
+
+}

frontend/src/app/pages/particles/components/particle/particle.component.html

@@ -1,16 +1,16 @@
 <div class="card-div">
   <mat-card class="particle-card">
     <mat-card-header>
-      <mat-card-title>Particle Properties</mat-card-title>
+      <mat-card-title>Particle input style</mat-card-title>
     </mat-card-header>
     <mat-card-content>
       <div class="particle-properties">
         <div class="property-row">
-          <div class="color-picker">
+          <mat-form-field appearance="outline">
-            <input type="color" [(ngModel)]="selectedColor">
+            <mat-label>Current color: {{ selectedColor }}</mat-label>
-            <span>Current color: {{ selectedColor }}</span>
+            <input type="color" class="color-input" matInput [(ngModel)]="selectedColor" [disabled]="supportsColor">
-          </div>
+          </mat-form-field>
-          <mat-form-field appearance="fill" class="type-field">
+          <mat-form-field appearance="outline" class="type-field">
             <mat-label>Select Particle Type</mat-label>
             <input type="text"
                    placeholder="Search for a particle type"
@@ -28,7 +28,7 @@
         </div>
 
         <div class="size-slider">
-            <mat-slider min="0.1" max="4" step="0.1" class="full-width">
+          <mat-slider min="0.5" max="4" step="0.1" class="full-width">
             <input matSliderThumb [(ngModel)]="selectedSize">
           </mat-slider>
           <span>Size: {{ selectedSize }}</span>
@@ -36,4 +36,4 @@
       </div>
     </mat-card-content>
   </mat-card>
-  </div>
+</div>

frontend/src/app/pages/particles/components/particle/particle.component.scss

@@ -6,10 +6,10 @@
 .particle-properties {
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
 .property-row {
+  margin-top: 20px;
   display: flex;
   align-items: center;
   gap: 15px;
@@ -22,11 +22,8 @@
   max-width: 40ch;
 }
 
-.color-picker {
+.color-input {
-  display: flex;
+  height: 1em;
-  flex: 1;
-  align-items: center;
-  gap: 10px;
 }
 
 .color-picker input[type="color"] {

frontend/src/app/pages/particles/components/particle/particle.component.spec.ts

@@ -1,23 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ParticleComponent} from './particle.component';
-
-describe('ParticleComponent', () => {
-  let component: ParticleComponent;
-  let fixture: ComponentFixture<ParticleComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ParticleComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(ParticleComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/components/particle/particle.component.ts

@@ -10,7 +10,7 @@ import {MatInputModule} from '@angular/material/input';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import { AsyncPipe } from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-particle',
@@ -27,7 +27,7 @@ import { AsyncPipe } from '@angular/common';
     MatInputModule,
     MatAutocompleteModule,
     AsyncPipe
-],
+  ],
   templateUrl: './particle.component.html',
   styleUrl: './particle.component.scss'
 })
@@ -70,6 +70,10 @@ export class ParticleComponent implements OnInit {
     return particle ? particle : '';
   }
 
+  public get supportsColor(): boolean {
+    return this.particleManagerService.supportsColor;
+  }
+
   /**
    * Get the selected color
    */

frontend/src/app/pages/particles/components/properties/properties.component.html

@@ -7,14 +7,22 @@
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Particle Name</mat-label>
-          <input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
+          <input required matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Display Name</mat-label>
+          <input required matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
         </mat-form-field>
       </div>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
-          <mat-label>Display Name</mat-label>
+          <mat-label>Permission name</mat-label>
-          <input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
+          <input required matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Package name</mat-label>
+          <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
         </mat-form-field>
       </div>
 
@@ -27,37 +35,25 @@
             }
           </mat-select>
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
-        <mat-form-field appearance="outline">
-          <mat-label>Lore</mat-label>
-          <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
-        </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Display Item</mat-label>
-          <input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
+          <input required matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
+        </mat-form-field>
+      </div>
+
+      <div class="form-row">
+        <mat-form-field appearance="outline" class="lore-double">
+          <mat-label>Lore</mat-label>
+          <textarea required matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
         </mat-form-field>
       </div>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
-          <mat-label>Permission</mat-label>
+          <mat-label>Random Offset</mat-label>
-          <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+          <input matInput type="number" [(ngModel)]="particleData.random_offset"
+                 placeholder="Enter random offset">
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
-        <mat-form-field appearance="outline">
-          <mat-label>Package Permission</mat-label>
-          <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
-        </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Frame Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
@@ -69,9 +65,6 @@
           <mat-label>Repeat</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Repeat Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
@@ -79,17 +72,9 @@
         </mat-form-field>
       </div>
 
-        <div class="form-row">
-          <mat-form-field appearance="outline">
-            <mat-label>Random Offset</mat-label>
-            <input matInput type="number" [(ngModel)]="particleData.random_offset"
-              placeholder="Enter random offset">
-            </mat-form-field>
-          </div>
-
       <div class="form-row">
         <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
       </div>
     </mat-card-content>
   </mat-card>
-    </div>
+</div>

frontend/src/app/pages/particles/components/properties/properties.component.scss

@@ -1,5 +1,12 @@
 .form-row {
-  margin-bottom: 15px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.lore-double {
+  grid-column: span 2;
 }
 
 .card-div {

frontend/src/app/pages/particles/components/properties/properties.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PropertiesComponent } from './properties.component';
-
-describe('PropertiesComponent', () => {
-  let component: PropertiesComponent;
-  let fixture: ComponentFixture<PropertiesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PropertiesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PropertiesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/components/properties/properties.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {MatCheckbox} from "@angular/material/checkbox";
 import {MatFormField, MatInput, MatLabel} from "@angular/material/input";
@@ -24,17 +24,14 @@ import {ParticleManagerService} from '../../services/particle-manager.service';
     MatSelect,
     ReactiveFormsModule,
     FormsModule
-],
+  ],
   templateUrl: './properties.component.html',
   styleUrl: './properties.component.scss'
 })
 export class PropertiesComponent {
   public particleTypes = Object.values(ParticleType);
 
-  constructor(
+  private readonly particleManagerService = inject(ParticleManagerService);
-    private particleManagerService: ParticleManagerService,
-  ) {
-  }
 
   public get particleData(): ParticleData {
     return this.particleManagerService.getParticleData();

frontend/src/app/pages/particles/components/render-container/render-container.component.html

@@ -5,6 +5,10 @@
         <mat-label>Opacity</mat-label>
         <input matInput type="number" [(ngModel)]="opacity" min="0" max="1" step="0.01" placeholder="">
       </mat-form-field>
+      <mat-form-field appearance="outline" style="width: 12ch; margin-left: 8px;">
+        <mat-label>Grid density</mat-label>
+        <input matInput type="number" [(ngModel)]="gridDensity" min="2" max="64" step="2" placeholder="">
+      </mat-form-field>
     </div>
     <div class="button-row">
       <button mat-mini-fab color="primary" (click)="resetCamera()"
@@ -12,10 +16,30 @@
         <mat-icon>location_searching</mat-icon>
       </button>
 
+      <button mat-mini-fab color="primary" (click)="toggleShowParticlesWhenIntersectingPlane()"
+              [matTooltip]="onlyIntersecting ? 'Show all particles' : 'Show only intersecting particles'">
+        <mat-icon>{{ onlyIntersecting ? 'visibility_off' : 'visibility' }}</mat-icon>
+      </button>
+
+      <button mat-mini-fab color="primary" (click)="toggleShowCharacter()"
+              [matTooltip]="showCharacter ? 'Hide character' : 'Show character'">
+        <mat-icon>{{ showCharacter ? 'person' : 'person_off' }}</mat-icon>
+      </button>
+
       <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
-        [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
+              [matTooltip]="isPlaneLocked ? 'Unlock plane' : 'Lock plane'">
         <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
       </button>
+
+      <button mat-mini-fab color="primary" (click)="gridVisible = !gridVisible"
+              [matTooltip]="gridVisible ? 'Hide grid' : 'Show grid'">
+        <mat-icon>{{ gridVisible ? 'grid_off' : 'grid_on' }}</mat-icon>
+      </button>
+
+      <button mat-mini-fab color="primary" (click)="gridSnapEnabled = !gridSnapEnabled"
+              [matTooltip]="gridSnapEnabled ? 'Disable grid snap' : 'Enable grid snap'">
+        <mat-icon>{{ gridSnapEnabled ? 'push_pin' : 'pinch' }}</mat-icon>
+      </button>
     </div>
 
     @if (isPlaneLocked) {

frontend/src/app/pages/particles/components/render-container/render-container.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RenderContainerComponent } from './render-container.component';
-
-describe('RenderContainerComponent', () => {
-  let component: RenderContainerComponent;
-  let fixture: ComponentFixture<RenderContainerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [RenderContainerComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(RenderContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/components/render-container/render-container.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, inject, OnDestroy, ViewChild} from '@angular/core';
 import {MatMiniFabButton} from '@angular/material/button';
 
 import {IntersectionPlaneService, PlaneOrientation} from '../../services/intersection-plane.service';
@@ -9,6 +9,7 @@ import {PlayerModelService} from '../../services/player-model.service';
 import {InputHandlerService} from '../../services/input-handler.service';
 import {FormsModule} from '@angular/forms';
 import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
+import {ParticleManagerService} from '../../services/particle-manager.service';
 
 @Component({
   selector: 'app-render-container',
@@ -20,20 +21,18 @@ import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
     MatInput,
     MatFormField,
     MatLabel
-],
+  ],
   templateUrl: './render-container.component.html',
   styleUrl: './render-container.component.scss'
 })
 export class RenderContainerComponent implements AfterViewInit, OnDestroy {
   @ViewChild('rendererContainer') rendererContainer!: ElementRef;
 
-  constructor(
+  private readonly intersectionPlaneService = inject(IntersectionPlaneService);
-    private intersectionPlaneService: IntersectionPlaneService,
+  private readonly playerModelService = inject(PlayerModelService);
-    private playerModelService: PlayerModelService,
+  private readonly inputHandlerService = inject(InputHandlerService);
-    private inputHandlerService: InputHandlerService,
+  private readonly rendererService = inject(RendererService);
-    private rendererService: RendererService,
+  private readonly particleManagerService = inject(ParticleManagerService);
-  ) {
-  }
 
   ngAfterViewInit(): void {
     this.initializeScene();
@@ -87,6 +86,32 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     return this.intersectionPlaneService.currentOpacity;
   }
 
+  // Grid proxies
+  public get gridVisible(): boolean {
+    return this.intersectionPlaneService.getGridVisible();
+  }
+
+  public set gridVisible(v: boolean) {
+    this.intersectionPlaneService.setGridVisible(v);
+  }
+
+  public get gridDensity(): number {
+    return this.intersectionPlaneService.getGridDensity();
+  }
+
+  public set gridDensity(d: number) {
+    this.intersectionPlaneService.setGridDensity(d);
+  }
+
+  // Grid snap proxies
+  public get gridSnapEnabled(): boolean {
+    return this.intersectionPlaneService.getGridSnapEnabled();
+  }
+
+  public set gridSnapEnabled(v: boolean) {
+    this.intersectionPlaneService.setGridSnapEnabled(v);
+  }
+
   /**
    * Toggle the plane locked state
    */
@@ -99,6 +124,14 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     this.rendererService.resetCamera();
   }
 
+  public toggleShowParticlesWhenIntersectingPlane(): void {
+    this.particleManagerService.onlyIntersectingParticles = !this.particleManagerService.onlyIntersectingParticles;
+  }
+
+  public toggleShowCharacter(): void {
+    this.playerModelService.showCharacter = !this.playerModelService.showCharacter;
+  }
+
   /**
    * Get the current plane orientation
    */
@@ -106,6 +139,20 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     return this.intersectionPlaneService.getCurrentOrientation();
   }
 
+  /**
+   * Retrieves the value indicating whether only intersecting particles are being considered.
+   */
+  public get onlyIntersecting(): boolean {
+    return this.particleManagerService.onlyIntersectingParticles;
+  }
+
+  /**
+   * Retrieves the value indicating whether the character is being rendered.
+   */
+  public get showCharacter(): boolean {
+    return this.playerModelService.showCharacter;
+  }
+
   /**
    * Set the plane orientation
    */

frontend/src/app/pages/particles/models/particle.model.ts

@@ -1,11 +1,12 @@
-/**
+export function supportsColors(particle: Particle): boolean {
- * Defines the types of particles available in the system
+  switch (particle) {
- */
+    case Particle.DUST:
-export enum Particle {
+    case Particle.DUST_COLOR_TRANSITION:
-  DUST = 'DUST',
+    case Particle.TINTED_LEAVES:
-  DUST_COLOR_TRANSITION = 'DUST_COLOR_TRANSITION',
+      return true;
-  TINTED_LEAVES = 'TINTED_LEAVES'
+    default:
-  // Other particle types can be added later
+      return false
+  }
 }
 
 export enum ParticleType {
@@ -52,3 +53,214 @@ export interface ParticleData {
     [frameId: string]: ParticleInfo[];
   };
 }
+
+/**
+ * Defines the types of particles available in the system
+ */
+export enum Particle {
+  DUST = 'DUST',
+  DUST_COLOR_TRANSITION = 'DUST_COLOR_TRANSITION',
+  TINTED_LEAVES = 'TINTED_LEAVES',
+  POOF = 'POOF',
+  EXPLOSION = 'EXPLOSION',
+  EXPLOSION_EMITTER = 'EXPLOSION_EMITTER',
+  FIREWORK = 'FIREWORK',
+  BUBBLE = 'BUBBLE',
+  SPLASH = 'SPLASH',
+  FISHING = 'FISHING',
+  UNDERWATER = 'UNDERWATER',
+  CRIT = 'CRIT',
+  ENCHANTED_HIT = 'ENCHANTED_HIT',
+  SMOKE = 'SMOKE',
+  LARGE_SMOKE = 'LARGE_SMOKE',
+  WITCH = 'WITCH',
+  DRIPPING_WATER = 'DRIPPING_WATER',
+  DRIPPING_LAVA = 'DRIPPING_LAVA',
+  ANGRY_VILLAGER = 'ANGRY_VILLAGER',
+  HAPPY_VILLAGER = 'HAPPY_VILLAGER',
+  MYCELIUM = 'MYCELIUM',
+  NOTE = 'NOTE',
+  PORTAL = 'PORTAL',
+  ENCHANT = 'ENCHANT',
+  FLAME = 'FLAME',
+  LAVA = 'LAVA',
+  CLOUD = 'CLOUD',
+  ITEM_SNOWBALL = 'ITEM_SNOWBALL',
+  ITEM_SLIME = 'ITEM_SLIME',
+  HEART = 'HEART',
+  RAIN = 'RAIN',
+  ELDER_GUARDIAN = 'ELDER_GUARDIAN',
+  END_ROD = 'END_ROD',
+  DAMAGE_INDICATOR = 'DAMAGE_INDICATOR',
+  SWEEP_ATTACK = 'SWEEP_ATTACK',
+  TOTEM_OF_UNDYING = 'TOTEM_OF_UNDYING',
+  SPIT = 'SPIT',
+  SQUID_INK = 'SQUID_INK',
+  BUBBLE_POP = 'BUBBLE_POP',
+  CURRENT_DOWN = 'CURRENT_DOWN',
+  BUBBLE_COLUMN_UP = 'BUBBLE_COLUMN_UP',
+  NAUTILUS = 'NAUTILUS',
+  DOLPHIN = 'DOLPHIN',
+  SNEEZE = 'SNEEZE',
+  CAMPFIRE_COSY_SMOKE = 'CAMPFIRE_COSY_SMOKE',
+  CAMPFIRE_SIGNAL_SMOKE = 'CAMPFIRE_SIGNAL_SMOKE',
+  COMPOSTER = 'COMPOSTER',
+  FALLING_LAVA = 'FALLING_LAVA',
+  LANDING_LAVA = 'LANDING_LAVA',
+  FALLING_WATER = 'FALLING_WATER',
+  DRIPPING_HONEY = 'DRIPPING_HONEY',
+  FALLING_HONEY = 'FALLING_HONEY',
+  LANDING_HONEY = 'LANDING_HONEY',
+  FALLING_NECTAR = 'FALLING_NECTAR',
+  SOUL_FIRE_FLAME = 'SOUL_FIRE_FLAME',
+  ASH = 'ASH',
+  CRIMSON_SPORE = 'CRIMSON_SPORE',
+  WARPED_SPORE = 'WARPED_SPORE',
+  SOUL = 'SOUL',
+  DRIPPING_OBSIDIAN_TEAR = 'DRIPPING_OBSIDIAN_TEAR',
+  FALLING_OBSIDIAN_TEAR = 'FALLING_OBSIDIAN_TEAR',
+  LANDING_OBSIDIAN_TEAR = 'LANDING_OBSIDIAN_TEAR',
+  REVERSE_PORTAL = 'REVERSE_PORTAL',
+  WHITE_ASH = 'WHITE_ASH',
+  FALLING_SPORE_BLOSSOM = 'FALLING_SPORE_BLOSSOM',
+  SPORE_BLOSSOM_AIR = 'SPORE_BLOSSOM_AIR',
+  SMALL_FLAME = 'SMALL_FLAME',
+  SNOWFLAKE = 'SNOWFLAKE',
+  DRIPPING_DRIPSTONE_LAVA = 'DRIPPING_DRIPSTONE_LAVA',
+  FALLING_DRIPSTONE_LAVA = 'FALLING_DRIPSTONE_LAVA',
+  DRIPPING_DRIPSTONE_WATER = 'DRIPPING_DRIPSTONE_WATER',
+  FALLING_DRIPSTONE_WATER = 'FALLING_DRIPSTONE_WATER',
+  GLOW_SQUID_INK = 'GLOW_SQUID_INK',
+  GLOW = 'GLOW',
+  WAX_ON = 'WAX_ON',
+  WAX_OFF = 'WAX_OFF',
+  ELECTRIC_SPARK = 'ELECTRIC_SPARK',
+  SCRAPE = 'SCRAPE',
+  SONIC_BOOM = 'SONIC_BOOM',
+  SCULK_SOUL = 'SCULK_SOUL',
+  SCULK_CHARGE_POP = 'SCULK_CHARGE_POP',
+  CHERRY_LEAVES = 'CHERRY_LEAVES',
+  PALE_OAK_LEAVES = 'PALE_OAK_LEAVES',
+  EGG_CRACK = 'EGG_CRACK',
+  DUST_PLUME = 'DUST_PLUME',
+  WHITE_SMOKE = 'WHITE_SMOKE',
+  GUST = 'GUST',
+  SMALL_GUST = 'SMALL_GUST',
+  GUST_EMITTER_LARGE = 'GUST_EMITTER_LARGE',
+  GUST_EMITTER_SMALL = 'GUST_EMITTER_SMALL',
+  TRIAL_SPAWNER_DETECTION = 'TRIAL_SPAWNER_DETECTION',
+  TRIAL_SPAWNER_DETECTION_OMINOUS = 'TRIAL_SPAWNER_DETECTION_OMINOUS',
+  VAULT_CONNECTION = 'VAULT_CONNECTION',
+  INFESTED = 'INFESTED',
+  ITEM_COBWEB = 'ITEM_COBWEB',
+  FIREFLY = 'FIREFLY',
+  OMINOUS_SPAWNING = 'OMINOUS_SPAWNING',
+  RAID_OMEN = 'RAID_OMEN',
+  TRIAL_OMEN = 'TRIAL_OMEN',
+  COPPER_FIRE_FLAME = 'COPPER_FIRE_FLAME'
+}
+
+export function getDefaultParticleColor(particle: Particle): string | undefined {
+  return ParticleColorDefaults[particle];
+}
+
+export const ParticleColorDefaults: Partial<Record<Particle, string>> = {
+  [Particle.POOF]: '#E0E0E0',
+  [Particle.EXPLOSION]: '#FFB300',
+  [Particle.EXPLOSION_EMITTER]: '#FF9800',
+  [Particle.FIREWORK]: '#FF4081',
+  [Particle.BUBBLE]: '#80DEEA',
+  [Particle.SPLASH]: '#4FC3F7',
+  [Particle.FISHING]: '#81D4FA',
+  [Particle.UNDERWATER]: '#0288D1',
+  [Particle.CRIT]: '#B0BEC5',
+  [Particle.ENCHANTED_HIT]: '#7E57C2',
+  [Particle.SMOKE]: '#9E9E9E',
+  [Particle.LARGE_SMOKE]: '#757575',
+  [Particle.WITCH]: '#9C27B0',
+  [Particle.DRIPPING_WATER]: '#4FC3F7',
+  [Particle.DRIPPING_LAVA]: '#FF5722',
+  [Particle.ANGRY_VILLAGER]: '#FF1744',
+  [Particle.HAPPY_VILLAGER]: '#8BC34A',
+  [Particle.MYCELIUM]: '#6D4C41',
+  [Particle.NOTE]: '#FFEB3B',
+  [Particle.PORTAL]: '#7B1FA2',
+  [Particle.ENCHANT]: '#64B5F6',
+  [Particle.FLAME]: '#FF6F00',
+  [Particle.LAVA]: '#FF3D00',
+  [Particle.CLOUD]: '#ECEFF1',
+  [Particle.ITEM_SNOWBALL]: '#FFFFFF',
+  [Particle.ITEM_SLIME]: '#66BB6A',
+  [Particle.HEART]: '#E53935',
+  [Particle.RAIN]: '#90CAF9',
+  [Particle.ELDER_GUARDIAN]: '#80CBC4',
+  [Particle.END_ROD]: '#F5F5F5',
+  [Particle.DAMAGE_INDICATOR]: '#D32F2F',
+  [Particle.SWEEP_ATTACK]: '#CFD8DC',
+  [Particle.TOTEM_OF_UNDYING]: '#FFD54F',
+  [Particle.SPIT]: '#A1887F',
+  [Particle.SQUID_INK]: '#263238',
+  [Particle.BUBBLE_POP]: '#B3E5FC',
+  [Particle.CURRENT_DOWN]: '#0277BD',
+  [Particle.BUBBLE_COLUMN_UP]: '#4DD0E1',
+  [Particle.NAUTILUS]: '#B39DDB',
+  [Particle.DOLPHIN]: '#4FC3F7',
+  [Particle.SNEEZE]: '#C5E1A5',
+  [Particle.CAMPFIRE_COSY_SMOKE]: '#BDBDBD',
+  [Particle.CAMPFIRE_SIGNAL_SMOKE]: '#757575',
+  [Particle.COMPOSTER]: '#8D6E63',
+  [Particle.FALLING_LAVA]: '#FF7043',
+  [Particle.LANDING_LAVA]: '#E64A19',
+  [Particle.FALLING_WATER]: '#81D4FA',
+  [Particle.DRIPPING_HONEY]: '#FFB300',
+  [Particle.FALLING_HONEY]: '#FFA000',
+  [Particle.LANDING_HONEY]: '#FF8F00',
+  [Particle.FALLING_NECTAR]: '#FFD54F',
+  [Particle.SOUL_FIRE_FLAME]: '#29B6F6',
+  [Particle.ASH]: '#B0BEC5',
+  [Particle.CRIMSON_SPORE]: '#C62828',
+  [Particle.WARPED_SPORE]: '#26A69A',
+  [Particle.SOUL]: '#64FFDA',
+  [Particle.DRIPPING_OBSIDIAN_TEAR]: '#5E35B1',
+  [Particle.FALLING_OBSIDIAN_TEAR]: '#512DA8',
+  [Particle.LANDING_OBSIDIAN_TEAR]: '#4527A0',
+  [Particle.REVERSE_PORTAL]: '#9575CD',
+  [Particle.WHITE_ASH]: '#ECEFF1',
+  [Particle.FALLING_SPORE_BLOSSOM]: '#F8BBD0',
+  [Particle.SPORE_BLOSSOM_AIR]: '#F48FB1',
+  [Particle.SMALL_FLAME]: '#FF8F00',
+  [Particle.SNOWFLAKE]: '#E1F5FE',
+  [Particle.DRIPPING_DRIPSTONE_LAVA]: '#FF5722',
+  [Particle.FALLING_DRIPSTONE_LAVA]: '#F4511E',
+  [Particle.DRIPPING_DRIPSTONE_WATER]: '#4FC3F7',
+  [Particle.FALLING_DRIPSTONE_WATER]: '#29B6F6',
+  [Particle.GLOW_SQUID_INK]: '#00E5FF',
+  [Particle.GLOW]: '#FFFF8D',
+  [Particle.WAX_ON]: '#FFD54F',
+  [Particle.WAX_OFF]: '#BDBDBD',
+  [Particle.ELECTRIC_SPARK]: '#76FF03',
+  [Particle.SCRAPE]: '#BCAAA4',
+  [Particle.SONIC_BOOM]: '#00B0FF',
+  [Particle.SCULK_SOUL]: '#00E676',
+  [Particle.SCULK_CHARGE_POP]: '#1DE9B6',
+  [Particle.CHERRY_LEAVES]: '#F48FB1',
+  [Particle.PALE_OAK_LEAVES]: '#A5D6A7',
+  [Particle.EGG_CRACK]: '#FFFDE7',
+  [Particle.DUST_PLUME]: '#D7CCC8',
+  [Particle.WHITE_SMOKE]: '#F5F5F5',
+  [Particle.GUST]: '#CFD8DC',
+  [Particle.SMALL_GUST]: '#ECEFF1',
+  [Particle.GUST_EMITTER_LARGE]: '#B0BEC5',
+  [Particle.GUST_EMITTER_SMALL]: '#CFD8DC',
+  [Particle.TRIAL_SPAWNER_DETECTION]: '#42A5F5',
+  [Particle.TRIAL_SPAWNER_DETECTION_OMINOUS]: '#D50000',
+  [Particle.VAULT_CONNECTION]: '#64B5F6',
+  [Particle.INFESTED]: '#7E7E7E',
+  [Particle.ITEM_COBWEB]: '#EEEEEE',
+  [Particle.FIREFLY]: '#FFF176',
+  [Particle.OMINOUS_SPAWNING]: '#B71C1C',
+  [Particle.RAID_OMEN]: '#C62828',
+  [Particle.TRIAL_OMEN]: '#AD1457',
+  [Particle.COPPER_FIRE_FLAME]: '#4DD0E1'
+};
+

frontend/src/app/pages/particles/particles.component.html

@@ -6,11 +6,13 @@
 </app-header>
 
 <main>
-  <section class="darkmodeSection">
+  <app-full-size [hideFooter]="true">
+    <section class="darkmodeSection full-height">
       <section class="column">
         <div class="renderer-section column">
-        <div class="flex row">
+          <div class="flex row spacing">
             <div class="flex side-column">
+              <app-particle></app-particle>
               <app-particle-properties></app-particle-properties>
             </div>
             <div class="flex middle-column">
@@ -24,17 +26,18 @@
               </div>
             </div>
             <div class="flex side-column">
-            <app-particle></app-particle>
+              <app-particle-manager>
-            <app-frames></app-frames>
+
-            <div>
+              </app-particle-manager>
-              <button mat-fab extended (click)="copyJson()">
+              <app-frames>
+                <button mat-icon-button matTooltip="Copy JSON to clipboard" (click)="copyJson()">
                   <mat-icon>content_copy</mat-icon>
-                Copy JSON to clipboard
                 </button>
-            </div>
+              </app-frames>
             </div>
           </div>
         </div>
       </section>
     </section>
+  </app-full-size>
 </main>

frontend/src/app/pages/particles/particles.component.scss

@@ -1,9 +1,14 @@
 .renderer-section {
+  margin-top: 15px;
   flex: 1;
   min-width: 300px;
   display: flex;
 }
 
+.spacing {
+  gap: 10px;
+}
+
 .side-column {
   flex: 1;
   flex-direction: column;

frontend/src/app/pages/particles/particles.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ParticlesComponent } from './particles.component';
-
-describe('ParticlesComponent', () => {
-  let component: ParticlesComponent;
-  let fixture: ComponentFixture<ParticlesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ParticlesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ParticlesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/particles.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component, ElementRef, inject, ViewChild} from '@angular/core';
 
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -23,6 +23,9 @@ import {FramesComponent} from './components/frames/frames.component';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {RenderContainerComponent} from './components/render-container/render-container.component';
 import {ParticlesService} from '@api';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
+import {ParticleManagerComponent} from '@pages/particles/components/particle-manager/particle-manager.component';
 
 @Component({
   selector: 'app-particles',
@@ -43,21 +46,21 @@ import {ParticlesService} from '@api';
     PropertiesComponent,
     ParticleComponent,
     FramesComponent,
-    RenderContainerComponent
+    RenderContainerComponent,
-],
+    MatTooltipModule,
+    FullSizeComponent,
+    ParticleManagerComponent
+  ],
   templateUrl: './particles.component.html',
   styleUrl: './particles.component.scss'
 })
 export class ParticlesComponent {
   @ViewChild('planeSlider') planeSlider!: ElementRef;
 
-  constructor(
+  private readonly intersectionPlaneService = inject(IntersectionPlaneService);
-    private intersectionPlaneService: IntersectionPlaneService,
+  private readonly particleManagerService = inject(ParticleManagerService);
-    private particleManagerService: ParticleManagerService,
+  private readonly matSnackBar = inject(MatSnackBar);
-    private matSnackBar: MatSnackBar,
+  private readonly particlesService = inject(ParticlesService);
-    private particlesService: ParticlesService,
-  ) {
-  }
 
   /**
    * Update plane position based on slider

frontend/src/app/pages/particles/services/frame-manager.service.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
+import {inject, Injectable} from '@angular/core';
-import { ParticleManagerService } from './particle-manager.service';
+import {ParticleManagerService} from './particle-manager.service';
 
 /**
  * Service responsible for managing animation frames
@@ -8,15 +8,14 @@ import { ParticleManagerService } from './particle-manager.service';
   providedIn: 'root'
 })
 export class FrameManagerService {
-
+  private readonly particleManager = inject(ParticleManagerService);
-  constructor(private particleManager: ParticleManagerService) {}
 
   /**
    * Adds a new frame
    */
   addFrame(): void {
     const frames = this.particleManager.getFrames();
-    const frameId = `frame${frames.length + 1}`;
+    const frameId = `frame-${frames.length}`;
 
     frames.push(frameId);
     this.particleManager.setFrames(frames);

frontend/src/app/pages/particles/services/intersection-plane.service.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 import * as THREE from 'three';
 import {RendererService} from './renderer.service';
+import {Subject} from 'rxjs';
 
 /**
  * Represents the possible orientations of the intersection plane
@@ -27,14 +28,103 @@ export class IntersectionPlaneService {
   private planeLocked: boolean = false;
   private opacity: number = 0.05;
 
+  // Grid overlay
+  private gridHelper?: THREE.GridHelper;
+  private gridVisible: boolean = true;
+  private gridDensity: number = 4;
+  private gridSnapEnabled: boolean = true;
+
+  // Emits whenever plane position, orientation, or lock-affecting orientation updates change visuals
+  public readonly planeChanged$ = new Subject<void>();
+  private lastPlaneSignature: string | null = null;
+
   constructor(private rendererService: RendererService) {
   }
 
+  public get stepSize() {
+    return 5
+  }
+
+  /**
+   * Creates or updates the grid helper attached to the intersection plane
+   * without affecting raycasting/placement.
+   */
+  private createOrUpdateGrid(): void {
+    if (!this.intersectionPlane) return;
+
+    if (this.gridHelper) {
+      this.intersectionPlane.remove(this.gridHelper);
+      (this.gridHelper.geometry as THREE.BufferGeometry).dispose();
+      if (this.gridHelper.material.dispose) {
+        this.gridHelper.material.dispose();
+      }
+      this.gridHelper = undefined;
+    }
+
+    const size = this.stepSize;
+    const divisions = Math.max(1, Math.floor(size * this.gridDensity));
+
+    this.gridHelper = new THREE.GridHelper(size, divisions, 0x888888, 0xcccccc);
+
+    this.gridHelper.rotation.x = Math.PI / 2;
+    this.gridHelper.position.z -= 0.005;
+
+    this.gridHelper.renderOrder = 2;
+    const gridMat = this.gridHelper.material as THREE.Material | THREE.Material[];
+    if (Array.isArray(gridMat)) {
+      gridMat.forEach(material => {
+        material.transparent = true;
+        material.depthWrite = false;
+        if (material.opacity !== undefined) {
+          material.opacity = 0.25;
+        }
+      });
+    } else {
+      gridMat.transparent = true;
+      gridMat.depthWrite = false;
+      gridMat.opacity = 0.25;
+    }
+
+    this.gridHelper.raycast = () => {
+    };
+
+    this.gridHelper.visible = this.gridVisible;
+    this.intersectionPlane.add(this.gridHelper);
+  }
+
+  public setGridVisible(visible: boolean): void {
+    this.gridVisible = visible;
+    if (this.gridHelper) this.gridHelper.visible = visible;
+  }
+
+  public getGridVisible(): boolean {
+    return this.gridVisible;
+  }
+
+  public setGridDensity(density: number): void {
+    this.gridDensity = Math.max(1, Math.min(64, Math.floor(density)));
+    if (this.intersectionPlane) {
+      this.createOrUpdateGrid();
+    }
+  }
+
+  public getGridDensity(): number {
+    return this.gridDensity;
+  }
+
+  public setGridSnapEnabled(enabled: boolean): void {
+    this.gridSnapEnabled = enabled;
+  }
+
+  public getGridSnapEnabled(): boolean {
+    return this.gridSnapEnabled;
+  }
+
   /**
    * Creates the intersection plane and adds it to the scene
    */
   createIntersectionPlane(): THREE.Mesh {
-    const planeGeometry = new THREE.PlaneGeometry(3, 3);
+    const planeGeometry = new THREE.PlaneGeometry(5, 5);
     const planeMaterial = new THREE.MeshBasicMaterial({
       color: 0x00AA00,
       transparent: true,
@@ -46,6 +136,10 @@ export class IntersectionPlaneService {
     this.intersectionPlane.position.z = 0;
     // Center the plane vertically with the player (player is about 2 blocks tall)
     this.intersectionPlane.position.y = 1;
+
+    // Add grid overlay as a child so it follows rotation/position
+    this.createOrUpdateGrid();
+
     this.rendererService.scene.add(this.intersectionPlane);
     this.intersectionPlane.renderOrder = 1;
 
@@ -119,17 +213,17 @@ export class IntersectionPlaneService {
     // Convert from 1/16th block to Three.js units
     const position = (this.planePosition / 16)
 
-    this.intersectionPlane.position.y = 0.8;
+    this.intersectionPlane.position.y = 1;
     this.intersectionPlane.position.x = 0;
     this.intersectionPlane.position.z = 0;
 
     // Position based on the current orientation
     switch (this.currentOrientation) {
       case PlaneOrientation.VERTICAL_ABOVE:
-        this.intersectionPlane.position.y = 0.8 - position;
+        this.intersectionPlane.position.y = position;
         break;
       case PlaneOrientation.VERTICAL_BELOW:
-        this.intersectionPlane.position.y = 0.8 + position;
+        this.intersectionPlane.position.y = position;
         break;
       case PlaneOrientation.HORIZONTAL_FRONT:
         this.intersectionPlane.position.z = position;
@@ -144,6 +238,13 @@ export class IntersectionPlaneService {
         this.intersectionPlane.position.x = -position;
         break;
     }
+
+    // Notify listeners only if signature changed to avoid spamming during animation frames
+    const signature = `${this.currentOrientation}|${this.planePosition}`;
+    if (signature !== this.lastPlaneSignature) {
+      this.lastPlaneSignature = signature;
+      this.planeChanged$.next();
+    }
   }
 
   /**

frontend/src/app/pages/particles/services/particle-manager.service.ts

@@ -1,7 +1,16 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import * as THREE from 'three';
 import {RendererService} from './renderer.service';
-import {Particle, ParticleData, ParticleInfo, ParticleType} from '../models/particle.model';
+import {
+  getDefaultParticleColor,
+  Particle,
+  ParticleData,
+  ParticleInfo,
+  ParticleType,
+  supportsColors
+} from '../models/particle.model';
+import {IntersectionPlaneService, PlaneOrientation} from './intersection-plane.service';
+import {deepCopy} from '../../../util/deep-copy.util';
 
 /**
  * Service responsible for managing particles in the scene
@@ -25,22 +34,42 @@ export class ParticleManagerService {
     random_offset: 0,
     stationary: true,
     frames: {
-      'frame1': []
+      'frame-0': []
     }
   };
-  private currentFrame: string = 'frame1';
+  private currentFrame: string = 'frame-0';
-  private frames: string[] = ['frame1'];
+  private frames: string[] = ['frame-0'];
   private selectedColor: string = '#ff0000';
   private selectedParticle: Particle = Particle.DUST;
+  private supports_color: boolean = true;
   private selectedSize: number = 1;
 
-  constructor(private rendererService: RendererService) {
+  private onlyIntersecting: boolean = false;
+  private readonly rendererService = inject(RendererService);
+  private readonly intersectionPlaneService = inject(IntersectionPlaneService);
+
+  constructor() {
+    this.intersectionPlaneService.planeChanged$.subscribe(() => {
+      if (this.onlyIntersecting) {
+        this.clearParticleVisuals();
+        this.renderFrameParticles(this.currentFrame);
+      }
+    });
   }
 
   /**
    * Adds a particle at the specified position
    */
   addParticle(x: number, y: number, z: number): void {
+    const planeSize = this.intersectionPlaneService.stepSize;
+    const divisions = Math.max(1, Math.floor(planeSize * this.intersectionPlaneService.getGridDensity()));
+    const gridStepPlane = planeSize / divisions;
+
+    if (this.intersectionPlaneService.getGridSnapEnabled()) {
+      x = Math.round(x / gridStepPlane) * gridStepPlane;
+      y = Math.round(y / gridStepPlane) * gridStepPlane;
+      z = Math.round(z / gridStepPlane) * gridStepPlane;
+    }
     // Create a visual representation of the particle
     const particleGeometry = new THREE.SphereGeometry(0.03 * this.selectedSize, 16, 16);
     const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});
@@ -54,6 +83,7 @@ export class ParticleManagerService {
     const hexColor = this.selectedColor.replace('#', '');
 
     //TODO make this work for more than just type DUST
+
     const particleInfo: ParticleInfo = {
       particle_type: this.selectedParticle,
       x: x,
@@ -88,7 +118,34 @@ export class ParticleManagerService {
   renderFrameParticles(frameId: string): void {
     if (!this.particleData.frames[frameId]) return;
 
+    const filter = this.onlyIntersecting;
+    const orientation = this.intersectionPlaneService.getCurrentOrientation();
+    const offset16 = this.intersectionPlaneService.getPlanePosition();
+    const planePos = offset16 / 16; // convert from 1/16th units to world units
+    const epsilon = 0.02; // tolerance for intersection
+
+    const isOnPlane = (p: ParticleInfo) => {
+      if (!filter) return true;
+      switch (orientation) {
+        case PlaneOrientation.VERTICAL_ABOVE:
+        case PlaneOrientation.VERTICAL_BELOW:
+          // Horizontal plane at y = 0.8 +/- planePos
+          return Math.abs(p.y - (0.8 + (orientation === PlaneOrientation.VERTICAL_BELOW ? planePos : -planePos))) <= epsilon;
+        case PlaneOrientation.HORIZONTAL_FRONT:
+          return Math.abs(p.z - planePos) <= epsilon;
+        case PlaneOrientation.HORIZONTAL_BEHIND:
+          return Math.abs(p.z + planePos) <= epsilon;
+        case PlaneOrientation.HORIZONTAL_RIGHT:
+          return Math.abs(p.x - planePos) <= epsilon;
+        case PlaneOrientation.HORIZONTAL_LEFT:
+          return Math.abs(p.x + planePos) <= epsilon;
+      }
+    };
+
     for (const particleInfo of this.particleData.frames[frameId]) {
+      if (!isOnPlane(particleInfo)) {
+        continue;
+      }
       const particleGeometry = new THREE.SphereGeometry(0.03 * (particleInfo.size ?? 1), 16, 16);
 
       const color = this.getColor(particleInfo);
@@ -174,6 +231,10 @@ export class ParticleManagerService {
     this.selectedColor = color;
   }
 
+  public get supportsColor(): boolean {
+    return this.supports_color;
+  }
+
   /**
    * Gets the selected color
    */
@@ -187,6 +248,13 @@ export class ParticleManagerService {
 
   public set particle(selectedParticle: Particle) {
     this.selectedParticle = selectedParticle;
+    this.supports_color = supportsColors(selectedParticle);
+    if (!this.supports_color) {
+      const defaultParticleColor = getDefaultParticleColor(selectedParticle);
+      if (defaultParticleColor) {
+        this.selectedColor = defaultParticleColor;
+      }
+    }
   }
 
   public get size(): number {
@@ -243,6 +311,29 @@ export class ParticleManagerService {
    * Generates JSON output of the particle data
    */
   generateJson(): string {
+    const particleData = deepCopy(this.particleData)
+    if (this.particleData.package_permission) {
+      particleData.package_permission = 'apart.set.' + this.particleData.package_permission.toLowerCase().replace(' ', '-');
+    } else {
+      particleData.package_permission = 'apart.set.none';
+    }
+    particleData.permission = 'apart.particle.' + this.particleData.permission.toLowerCase().replace(' ', '-');
     return JSON.stringify(this.particleData, null, 2);
   }
+
+  public get onlyIntersectingParticles(): boolean {
+    return this.onlyIntersecting;
+  }
+
+  public set onlyIntersectingParticles(value: boolean) {
+    this.onlyIntersecting = value;
+    this.clearParticleVisuals();
+    this.renderFrameParticles(this.currentFrame);
+  }
+
+  public loadParticleData(data: string): void {
+    this.particleData = JSON.parse(data);
+    this.setCurrentFrame('frame-0');
+    this.frames = Object.keys(this.particleData.frames);
+  }
 }

frontend/src/app/pages/particles/services/player-model.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import * as THREE from 'three';
 import {RendererService} from './renderer.service';
 
@@ -6,13 +6,13 @@ import {RendererService} from './renderer.service';
   providedIn: 'root'
 })
 export class PlayerModelService {
+  private readonly rendererService = inject(RendererService);
+
   private playerModel!: THREE.Group;
   private skinTexture!: THREE.Texture;
+  private characterVisible: boolean = true;
   private textureLoaded = false;
 
-  constructor(private rendererService: RendererService) {
-  }
-
   /**
    * Loads a Minecraft skin texture from a URL
    * @param textureUrl The URL of the skin texture to load
@@ -56,10 +56,20 @@ export class PlayerModelService {
     }
 
     this.playerModel.renderOrder = 0;
+    this.playerModel.position.y = 0.2;
     this.rendererService.scene.add(this.playerModel);
     return this.playerModel;
   }
 
+  public get showCharacter(): boolean {
+    return this.characterVisible;
+  }
+
+  public set showCharacter(showCharacter: boolean) {
+    this.playerModel.visible = showCharacter;
+    this.characterVisible = showCharacter;
+  }
+
   /**
    * Creates a simple colored player model (without textures)
    */

frontend/src/app/pages/particles/services/renderer.service.ts

@@ -21,7 +21,7 @@ export class RendererService {
     this.themeService.theme$.subscribe(theme => {
       this.currentTheme = theme;
       if (this.scene) {
-        this.setBackgroundColor(theme);
+        this.setBackgroundColor();
       }
     })
   }
@@ -32,7 +32,7 @@ export class RendererService {
   initializeRenderer(container: ElementRef): void {
     // Create scene
     this.scene = new THREE.Scene();
-    this.setBackgroundColor(this.currentTheme);
+    this.setBackgroundColor();
 
     // Get container dimensions
     const containerWidth = container.nativeElement.clientWidth;
@@ -66,7 +66,7 @@ export class RendererService {
     this.addLights();
   }
 
-  private setBackgroundColor(theme: THEME_MODE) {
+  private setBackgroundColor() {
     this.scene.background = new THREE.Color(this.currentTheme === THEME_MODE.DARK ? 0x242526 : 0xFBFBFE);
   }
 

frontend/src/app/pages/reference/lag/lag.component.html

@@ -60,6 +60,10 @@
             <li>Consider not raising pigs at all, as their meat is exactly the same as beef and they have no secondary
               drops
             </li>
+            <li>
+              A special rule applies to villagers, you can have 70 villagers and up to 30 of those can have their AI
+              enabled. This applies to the entire loaded area.
+            </li>
             <li>Do not fill your base with more vanilla pets than you need</li>
             <li>Never circumvent entity cramming. It is there because a lot of entities crammed into a small space is
               hard on the server.