Merge branch 'issue-6/layout' into 'develop'

FIX scroll user route

See merge request !14

src/routes/user/+layout.svelte

+<script>
+</script>
+
+<main>
+	<slot />
+</main>
+
+<style>
+ :global(html,body) {
+    margin: 0;
+    padding: 0;
+  }
+
+  main {
+    display: flex;
+    background-color: transparent;
+    color: white;
+    background-image: url('/background.png'); 
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed; 
+    background-repeat: no-repeat;
+    font-family: 'Rajdhani', 'Courier New', sans-serif;
+  }
+</style>

src/routes/user/+page.svelte

@@ -11,22 +11,17 @@
   let currentUser: { name: string; email: string; money: number; cyberpsychosis: number; cyberLimit: number } | null = null;
 
   let allPurchases: UserPurchase[] = [];
-  let displayedPurchases: UserPurchase[] = [];
   let loading = true;
   let error = '';
   let activeCategory = 'all';
-  let categories: string[] = [];
-  let currentUserId = -1;
-
-  let page = 1;
-  const perPage = 10;
+  let currentUserId = -1
 
   function getToken(): string | null {
     return localStorage.getItem('token');
   }
 
+  // Carrega dados ao montar o componente
   onMount(async () => {
-    window.addEventListener('scroll', handleScroll);
     try {
       const token = getToken();
       if (!token) throw new Error('Usuário não autenticado');
@@ -65,73 +60,43 @@
         implant: implants.find(i => i.id === t.implant_id)!
       }));
 
-      // categorias para filtro
-      categories = [...new Set(allPurchases.map(p => p.implant.bodyPart))];
-
-      // página inicial
-      displayedPurchases = allPurchases.slice(0, perPage);
     } catch (err) {
         error = err instanceof Error ? err.message : String(err);
     } finally {
         loading = false;
     }
-
-    return () => window.removeEventListener('scroll', handleScroll);
   });
 
-  // Carrega próxima “página” de items
-  function loadMore() {
-    const start = page * perPage;
-    const next = allPurchases.slice(start, start + perPage);
-    if (next.length > 0) {
-      displayedPurchases = [...displayedPurchases, ...next];
-      page += 1;
-    }
-  }
-
-  // Detecta fim da página e dispara loadMore
-  function handleScroll() {
-    if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100) {
-      loadMore();
-    }
-  }
+  // Categorias únicas (reativo)
+  $: categories = [...new Set(allPurchases.map(p => p.implant.bodyPart))];
   
-  // Filtra apenas o que vai ser mostrado
-  function getFiltered() {
-    return activeCategory === 'all'
-      ? displayedPurchases
-      : displayedPurchases.filter(p => p.implant.bodyPart === activeCategory);
-  }
+  // Lista filtrada (reativo)
+  $: filteredImplants = activeCategory === 'all' 
+    ? allPurchases 
+    : allPurchases.filter(p => p.implant.bodyPart === activeCategory);
 </script>
   
 <style>
-
-  :global(body) {
-    margin: 0;
-    padding: 0;
-    color: #00f7ff;
-    font-family: 'Rajdhani', 'Courier New', sans-serif;
-  }
-
   .error {
     color: #ff3e3e;
     text-align: center;
   }
 
-  /* Layout da janela principal */
   .window {
 		display: flex;
+    width: 100vw;
     min-height: 100vh;
-    width: 100%;
 	}
 
   /* Estilização do menu lateral */
   .navegation {
-    width: 17%;
     background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
     border-right: 1px solid #00f7ff;
     box-shadow: 2px 0 10px rgba(0, 247, 255, 0.2);
+    font-family: 'Rajdhani', 'Courier New', sans-serif;
+    width: 250px;
     padding: 20px 0;
+    display: block;
   }
 
   .nav-header h2 {
@@ -140,7 +105,7 @@
     text-shadow: 0 0 10px #ff073a;
     border-bottom: 1px solid #00f7ff;
     padding-bottom: 15px;
-    margin: 0 15px 20px;
+    margin: 20px 15px 20px;
   }
 
   .nav-section {
@@ -178,39 +143,37 @@
     cursor: pointer;
     text-align: left;
     font-family: 'Rajdhani', 'Courier New', sans-serif;
+    font-weight: 800;
   }
   
   .filter-btn:hover {
-    background-color: #9a9f17;
+    background-color: #fee801;
   }
   
   .filter-btn.active {
-    background-color: #9a9f17;
+    background-color:#fee801;
     border-left: 3px solid #ff073a;
   }
 
   .card-container {
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 10px;
-    padding: 1rem;
-    margin: 0.5rem;
-  }
-
-  .main-content {
 		flex: 1;
-    padding: 20px;
-    overflow-y: auto; /* Mantém o scroll funcionando */
-    background-image: url('/background.png');
+		padding: 2rem;
+		overflow-y: auto;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    margin: auto;
+    gap: 0.5rem;
   }
 
   p {
     margin-left: 10px;
   }
-</style>
 
+  span {
+    color: #00d0ff;
+    font-family: 'Rajdhani', 'Courier New', sans-serif;
+  }
+</style>
 
 <div class="window">
   <div class="navegation">
@@ -226,11 +189,11 @@
 
     <p>
       {#if currentUser}
-      Nome: {currentUser.name}<br>
-      Email: {currentUser.email}<br>
-      Money: {currentUser.money}<br>
-      Cyber Limit: {currentUser.cyberLimit}<br>
-      Cyberpsychosis: {currentUser.cyberpsychosis}<br>
+        <span>Nome:</span> {currentUser.name}<br>
+        <span>Email:</span> {currentUser.email}<br>
+        <span>Money:</span> {currentUser.money}<br>
+        <span>CyberLimit:</span> {currentUser.cyberLimit}<br>
+        <span>Cyberpsychosis:</span> {currentUser.cyberpsychosis}<br>
       {:else if loading}
         Carregando informações do usuário...
       {:else if error}
@@ -258,7 +221,7 @@
   </div>
   
   <!-- Cards dos Implantes -->
-  <div class="main-content">
+  <div class="card-container">
     {#if loading}
       <p>Carregando...</p>
     {:else if error}
@@ -266,8 +229,7 @@
     {:else if allPurchases.length === 0}
       <p>Você ainda não possui implantes comprados.</p>
     {:else}
-    <div class="card-container">
-        {#each getFiltered() as p (p.implant_id)}
+      {#each filteredImplants as p (p.implant_id)}
         <Card
           title={p.implant.name}
           bodyPart={p.implant.bodyPart}
@@ -278,7 +240,6 @@
           boughtIds={[]}
         />
       {/each}
-      </div>   
     {/if}
   </div>
 </div>
\ No newline at end of file