refactor: Code conventions

src/lib/components/dashboard/profile/AdvancedSettings.svelte

@@ -0,0 +1 @@
+<h1>Advanced settings</h1>

src/lib/components/dashboard/profile/Credits.svelte

@@ -0,0 +1 @@
+<h1>Credits</h1>

src/lib/components/ui/profile/profilesettings.svelte → src/lib/components/dashboard/profile/ProfileSettings.svelte

@@ -1,16 +1,16 @@
 <script>
-    import { onMount } from 'svelte';
+    import { onMount } from 'svelte'
     import deffaultProfile from '$lib/assets/images/deffaultProfile.png'
 
-    let profilePicture = deffaultProfile;
-    let username = 'John Doe';
-    let email = '[email protected]';
-    let password = '********';
+    let profilePicture = deffaultProfile
+    let username = 'John Doe'
+    let email = '[email protected]'
+    let password = '********'
 
     onMount(() => {
         // Fetch profile picture and user data from API
         // and update the variables accordingly
-    });
+    })
 
     function changeProfilePicture() {
         // Logic to change the profile picture
@@ -32,26 +32,41 @@
                 Change Profile Picture
             </button>
         </div>
-    
+
         <div class="mt-8 border-b-4 pb-5">
             <div class="mb-4 ml-4 grid grid-cols-2 w-fit">
                 <label for="username" class="font-bold mb-2">Username</label>
-                <input type="text" id="username" class="p-2 rounded border border-slate text-slate-600" bind:value={username} />
+                <input
+                    type="text"
+                    id="username"
+                    class="p-2 rounded border border-slate text-slate-600"
+                    bind:value={username}
+                />
             </div>
-    
+
             <div class="mb-4 ml-4 grid grid-cols-2 w-fit">
                 <label for="email" class="font-bold mb-2">Email</label>
-                <input type="email" id="email" class="p-2 rounded border border-slate text-slate-600" bind:value={email} />
+                <input
+                    type="email"
+                    id="email"
+                    class="p-2 rounded border border-slate text-slate-600"
+                    bind:value={email}
+                />
             </div>
-    
+
             <div class="mb-4 ml-4 grid grid-cols-2 w-fit">
                 <label for="password" class="font-bold mb-2">Password</label>
-                <input type="password" id="password" class="p-2 rounded border border-slate text-slate-600" bind:value={password} />
+                <input
+                    type="password"
+                    id="password"
+                    class="p-2 rounded border border-slate text-slate-600"
+                    bind:value={password}
+                />
             </div>
-    
+
             <button class="bg-red-600 text-slate py-2 px-4 rounded ml-4" on:click={saveModifications}>
                 Save Modifications
             </button>
         </div>
-    </div>    
+    </div>
 </div>

src/lib/components/ui/profile/sidebar.svelte → src/lib/components/dashboard/profile/Sidebar.svelte

@@ -1,54 +1,51 @@
 <script>
-    import Logo from "../logo/logo.svelte"
-    import Advancedsettings from "./advancedsettings.svelte";
-    import Credits from "./credits.svelte";
-    import Profilesettings from "./profilesettings.svelte";
+    import DashLogo from '$lib/components/dashboard/DashLogo.svelte'
+    import AdvancedSettings from '$lib/components/dashboard/profile/AdvancedSettings.svelte'
+    import ProfileSettings from '$lib/components/dashboard/profile/ProfileSettings.svelte'
+    import Credits from '$lib/components/dashboard/profile/Credits.svelte'
 
-    export let activeTab = '';
+    export let activeTab = ''
 
     const tabs = [
         { id: 'profile', label: 'Profile' },
         { id: 'advanced', label: 'Advanced' },
         { id: 'upload', label: 'Upload' },
-        { id: 'credits', label: 'Credits' },
-    ];
+        { id: 'credits', label: 'Credits' }
+    ]
 </script>
 
 <div class="">
     <div class="flex h-screen">
         <div class="w-1/6 bg-slate-700">
             <div class="border-b-4 rounded-3xl flex m-2 pb-1">
-                <Logo />
-                <div class="mx-auto my-auto text-2xl">
-                    unideb.tech
-                </div>
-            </div> 
+                <DashLogo />
+                <div class="mx-auto my-auto text-2xl">unideb.tech</div>
+            </div>
             <ul class="py-4">
                 {#each tabs as tab}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                     <li
                         class="px-4 py-2 cursor-pointer hover:bg-gray-600"
                         class:selected={activeTab === tab.id}
-                        on:click={() => activeTab = tab.id}
+                        on:click={() => (activeTab = tab.id)}
                     >
                         {tab.label}
                     </li>
                 {/each}
             </ul>
         </div>
-        
+
         {#if activeTab === 'profile'}
-            <Profilesettings />
+            <ProfileSettings />
         {:else if activeTab === 'advanced'}
-            <Advancedsettings />
+            <AdvancedSettings />
         {:else if activeTab === 'credits'}
-                <Credits />
+            <Credits />
         {/if}
     </div>
 </div>
 
-
 <style>
     .selected {
         background-color: #4299e1;

src/routes/dash/settings/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-    import Sidebar from '$components/ui/profile/sidebar.svelte'
-
+    import Sidebar from '$components/dashboard/profile/Sidebar.svelte'
 </script>
+
 <slot />
 
 <Sidebar />
-