feat(app): added settings view

src/App.vue

@@ -6,7 +6,7 @@ import { RouterView } from "vue-router";
 
 <template>
     <main
-        class="relative min-w-[400px] aspect-[4/9] flex flex-col items-center gap-6 p-9 rounded-3xl overflow-hidden bg-background bg-center bg-cover border border-white/10"
+        class="relative w-[28rem] aspect-[4/9] flex flex-col items-center gap-6 p-9 rounded-3xl overflow-hidden bg-background bg-center bg-cover border border-white/10"
     >
         <RouterView />
         <NavigationBar />

src/assets/css/tailwind.css

@@ -30,3 +30,14 @@
         @apply bg-rasin-black font-display;
     }
 }
+
+@layer utilities {
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .no-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+}

src/components/module/OnlineModule.vue → src/components/module/messages/OnlineModule.vue

@@ -36,7 +36,7 @@ const users = [
 <template>
     <section class="flex flex-col gap-3">
         <h2 class="text-2xl font-semibold">Online</h2>
-        <aside class="flex gap-3 overflow-y-scroll">
+        <aside class="flex gap-3 overflow-x-hidden no-scrollbar">
             <img
                 v-for="user in users"
                 :key="user.avatar"

src/components/module/RecentChatsModule.vue → src/components/module/messages/RecentChatsModule.vue

@@ -90,7 +90,7 @@ const users = [
 <template>
     <section class="w-full flex flex-col gap-3">
         <h2 class="text-2xl font-semibold">Recent chats</h2>
-        <article class="overflow-y-scroll">
+        <article class="overflow-visible">
             <aside
                 v-for="user in users"
                 :key="user.fullname"

src/components/module/settings/HeaderModule.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+    title: string;
+}>();
+</script>
+
+<template>
+    <header class="w-full">
+        <h3>
+            {{ title }}
+        </h3>
+    </header>
+</template>

src/router/index.ts

@@ -9,6 +9,16 @@ const router = createRouter({
             name: "Messages",
             component: MessagesView,
         },
+        {
+            path: "/settings",
+            name: "Settings",
+            component: () => import("@/views/SettingsView.vue"),
+        },
+        {
+            path: "/:reciever_id",
+            name: "Conversation",
+            component: () => import("@/views/ConversationView.vue"),
+        },
     ],
 });
 

src/types/dayTime.ts

@@ -0,0 +1,8 @@
+enum DayTime {
+    Morning = "Morning! ⛅",
+    Afternoon = "Afternoon! 🌞",
+    Evening = "Evening! ⛺",
+    Night = "Night! 🌙",
+}
+
+export default DayTime;

src/types/language.ts

@@ -0,0 +1,6 @@
+enum Language {
+    Polish = "pl-PL",
+    English = "en-EN",
+}
+
+export default Language;

src/types/status.ts

@@ -0,0 +1,8 @@
+enum Status {
+    Offline,
+    Online,
+    Away,
+    DoNotDisturb,
+}
+
+export default Status;

src/types/theme.ts

@@ -0,0 +1,7 @@
+enum Theme {
+    System,
+    Light,
+    Dark,
+}
+
+export default Theme;

src/types/user.d.ts

@@ -0,0 +1,12 @@
+import Language from "@/types/language";
+import Status from "@/types/status";
+import Theme from "@/types/theme";
+
+interface User {
+    principal: any;
+    username: string;
+    avatar: string;
+    language: Language;
+    theme: Theme;
+    status: Status;
+}

src/views/ConversationView.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup></script>
+
+<template>
+    <section>
+        <h2>Conversation</h2>
+        <p>{{ $route.params.id }}</p>
+    </section>
+</template>

src/views/MessagesView.vue

@@ -1,41 +1,32 @@
 <script lang="ts" setup>
-import OnlineModule from "@/components/module/OnlineModule.vue";
-import RecentChatsModule from "@/components/module/RecentChatsModule.vue";
-import HeaderModule from "@/components/module/HeaderModule.vue";
+import OnlineModule from "@/components/module/messages/OnlineModule.vue";
+import RecentChatsModule from "@/components/module/messages/RecentChatsModule.vue";
+import HeaderModule from "@/components/module/messages/HeaderModule.vue";
 import SearchBarModule from "@/components/module/SearchBarModule.vue";
 
-enum Language {
-    Polish,
-    English,
-}
+import DayTime from "@/types/dayTime";
+import Language from "@/types/language";
+import Status from "@/types/status";
+import Theme from "@/types/theme";
 
-enum Theme {
-    Dark,
-    Light,
-    System,
-}
+const getTitle = (): string => {
+    const hours: number = new Date().getHours();
 
-enum Status {
-    Online,
-    Away,
-    DoNotDisturb,
-    Offline,
-}
-
-interface User {
-    principal: any2;
-    username: String;
-    password: String;
-    avatar: String;
-    language: Language;
-    theme: Theme;
-    status: Status;
-}
+    switch (true) {
+        case hours > 5 && hours < 12:
+            return `${DayTime.Morning}`;
+        case hours > 11 && hours < 17:
+            return `${DayTime.Afternoon}`;
+        case hours > 17 && hours < 22:
+            return `${DayTime.Evening}`;
+        default:
+            return `${DayTime.Night}`;
+    }
+};
 
 const user: User = {
     principal: null,
     username: "essiarz",
-    password: "Test123",
     avatar: "http://localhost:8080/test.jpg",
     language: Language.Polish,
     theme: Theme.Dark,
@@ -44,7 +35,7 @@ const user: User = {
 </script>
 
 <template>
-    <HeaderModule :name="user.username" title="Good morning! ⛅" />
+    <HeaderModule :name="user.username" :title="`Good ${getTitle()}`" />
     <SearchBarModule />
     <OnlineModule />
     <RecentChatsModule />

src/views/SettingsView.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import HeaderModule from "@/components/module/settings/HeaderModule.vue";
+import SearchBarModule from "@/components/module/SearchBarModule.vue";
+</script>
+
+<template>
+    <HeaderModule title="Settings" />
+    <SearchBarModule />
+    <h1>General</h1>
+    <ul>
+        <li>Your profile</li>
+        <li>Online status</li>
+        <li>Language</li>
+        <li>Theme</li>
+    </ul>
+
+    <h1>Privacy</h1>
+    <ul>
+        <li>Blocked users</li>
+        <li>Profile visibility</li>
+    </ul>
+
+    <h1>Security</h1>
+    <ul>
+        <li>Multi-factor authentication</li>
+        <li>Your devices</li>
+        <li>Account recovery</li>
+        <li>Profile visibility</li>
+    </ul>
+
+    <h1>Notifications</h1>
+    <ul>
+        <li>Do not disturb Mode</li>
+        <li>Notifications sound</li>
+        <li>Vibrations</li>
+    </ul>
+
+    <h1>About</h1>
+    <ul>
+        <li>Terms of Service</li>
+        <li>Privacy Policy</li>
+        <li>App version</li>
+    </ul>
+
+    <h1>Advanced</h1>
+    <ul>
+        <li>Developer Mode</li>
+        <li>Diagnostics data</li>
+    </ul>
+</template>

vite.config.ts

@@ -12,6 +12,6 @@ export default defineConfig({
         },
     },
     server: {
-        port: 3000,
+        port: 80,
     },
 });