add exemple routing and store

front/src/App.vue

@@ -1,11 +1,19 @@
+<script setup>
+import { RouterView } from "vue-router";
+</script>
+
 <template>
-  <Sidebar />
-  <RoomView />
+  <div id="app">
+    <!-- <router-link to="/">Home</router-link> -->
+    <RouterView/>
+    <Sidebar />
+    <RoomView />
+  </div>
 </template>
 
 <script>
-import Sidebar from './components/sidebar/Sidebar';
-import RoomView from './components/room/RoomView';
+import Sidebar from './views/sidebar/Sidebar';
+import RoomView from './views/room/RoomView';
 
 export default {
   name: 'App',
@@ -22,4 +30,5 @@ export default {
   height: 100%;
   width: 100%;
 }
+
 </style>

front/src/main.js

@@ -1,20 +1,11 @@
 import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
+import router from './router'
 import App from './App.vue'
+import roomsStore from './store/rooms'
 
-const routes = [
-//   { path: '/', component: Home },
-//   { path: '/about', component: About },
-]
 
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes
-});
-
-const app = createApp({});
+const app = createApp(App);
 app.use(router);
+app.use(roomsStore);
 
-app.mount('#app');
-
-createApp(App).mount('#app')
+app.mount('#app');

front/src/router/index.js

@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "About",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

front/src/store/rooms.js

@@ -0,0 +1,52 @@
+import { createStore } from "vuex";
+
+const roomsStore = createStore({
+  state() {
+    return {
+      rooms: [
+        {
+          users: "clemnce",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 1,
+        },
+        {
+          users: "juliette",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 1,
+        },
+        {
+          users: "jean",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 2,
+        },
+        {
+          users: "luc",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 2,
+        },
+      ],
+      mailboxes: [
+        { mail: "mail@domain.com", id: 1 },
+        { mail: "name@example.com", id: 2 },
+      ],
+      activeMailbox: -1
+    };
+  },
+  mutations: {
+    setActiveMailbox(state, payload) {
+        state.activeMailbox = payload;
+    }
+  },
+  getters: {
+    folderRooms: (state) => () => {
+        if (state.activeMailbox == -1) return state.rooms;
+        return state.rooms.filter(room => room.mailbox == state.activeMailbox);
+    }
+  }
+});
+
+export default roomsStore;

front/src/views/About.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>About</h1>
+</template>

front/src/views/Home.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>home</h1>
+</template>

front/src/views/avatars/BaseAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <img :src="require('../../../assets/'+ url)" >
+    <img :src="require('../../assets/'+ url)" >
 </template>
 
 <script>

front/src/views/room/Header.vue

@@ -0,0 +1,26 @@
+<template>
+    <div id="main">
+        header -> sender
+                    -> thread
+                    -> single click open side
+                    -> double click open plain
+        is thread
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Header',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+#main {
+    background-color: blue;
+    width: 100%;
+    height: 51px;
+}
+</style>

front/src/views/room/RoomView.vue

@@ -1,23 +1,31 @@
 <template>
     <div>
-        Room
+        <Header></Header>
+        <div>
+           
+            Room
+            is thread
+        </div>
+
     </div>
 </template>
 
 <script>
+import Header from './Header.vue'
 
 export default {
   name: 'RoomView',
   components: {
+    Header
   }
 }
 </script>
 
 <style scoped>
 div {
-    flex-grow: 1;
     background-color: #1D1D23;
     color: white;
+    width: 100%;
 }
 </style>
 

front/src/views/sidebar/Sidebar.vue

@@ -26,6 +26,7 @@ div {
 
 #users {
   max-width: 300px;
+  min-width: 250px;
 }
 
 /* todo setup max size */

front/src/views/sidebar/folders/Account.vue

@@ -0,0 +1,23 @@
+<template>
+    <div id="main">
+        <div id="userMenu">
+          <!-- deconnect -->
+        </div>
+        <span class="divider"></span>
+        <!-- <h5>Accounts: </h5> -->
+        <span class="divider"></span>
+        <!-- <h5>Folders: </h5> -->
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Account',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

front/src/views/sidebar/folders/All.vue

@@ -0,0 +1,18 @@
+<template>
+    <div id="main">
+        jij
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'All',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

front/src/views/sidebar/folders/Folder.vue

@@ -0,0 +1,35 @@
+<template>
+    <div id="main" @click="setActiveMailbox(data.id)">
+        {{ data.mail }}
+    </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  name: 'Folder',
+  components: {
+  },
+  props: {
+    data: {mail: String, id: Number}
+  },
+  methods: {
+    ...mapMutations(['setActiveMailbox'])
+  }
+}
+</script>
+
+<style scoped>
+#main {
+  max-width: 32px;
+  white-space: normal;
+  word-wrap: break-word;
+  padding: 0px;
+  cursor: pointer;
+}
+
+div:hover {
+  background-color: aqua !important;
+}
+</style>

front/src/views/sidebar/folders/Folders.vue

@@ -1,20 +1,27 @@
 <template>
     <div id="main">
         <div id="userMenu">
-        
+          <!-- deconnect -->
         </div>
         <span class="divider"></span>
-        <!-- <h5>Accounts: </h5> -->
+        <Folder :data="{'id': -1, 'mail': 'all'}"/>
+        <Folder v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
         <span class="divider"></span>
         <!-- <h5>Folders: </h5> -->
     </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import Folder from './Folder.vue'
 
 export default {
   name: 'Folders',
   components: {
+    Folder
+  },
+  computed: {
+    ...mapState(['mailboxes'])
   }
 }
 </script>

front/src/views/sidebar/users/User.vue

@@ -1,18 +1,18 @@
 <template>
-    <div id="main">
-        <BaseAvatar url="vue.png"/>
-        <div id="content">
-            <div id="sender">{{ sender }}</div>
-            <div id="object">{{ object }}</div>
-        </div>
-    </div>
-    <ThreadList />
     <div>
+        <div id="user">
+            <BaseAvatar url="vue.png"/>
+            <div id="content">
+                <div id="sender">{{ sender }}</div>
+                <div id="object">{{ object }}</div>
+            </div>
+        </div>
+        <ThreadList />
     </div>
 </template>
 
 <script>
-import BaseAvatar from '../../views/avatars/BaseAvatar.vue'
+import BaseAvatar from '../../avatars/BaseAvatar.vue'
 import ThreadList from './threads/ThreadList.vue'
 
 export default {
@@ -29,16 +29,17 @@ export default {
 </script>
 
 <style scoped>
-#main {
+#user {
     box-sizing: border-box;
     contain: content;
     display: flex;
     margin-bottom: 4px;
     margin: 4px;
     padding: 4px;
+    cursor: pointer;
 }
 
-#main:hover {
+#user:hover {
     background-color: #41474f;;
     border-radius: 8px;
 }

front/src/views/sidebar/users/Users.vue

@@ -1,10 +1,11 @@
 <template>
     <div>
-      <User sender="Clemence" object="Proident sunt voluptate enim nisi duis fugiat veniam consequat do irure irure irure id. "/>
+      <User v-for="(room, index) in folderRooms()" :key="index" :sender="room.users" :object="room.object" />
     </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import User from './User'
 
 export default {
@@ -14,6 +15,9 @@ export default {
   },
   components: {
     User
+  },
+  computed: {
+    ...mapGetters(['folderRooms'])
   }
 }
 </script>