Version 1.0.0 - Ajout du design et début search bar

src/components/Layout/View.vue

@@ -0,0 +1,95 @@
+<template>
+    <Box v-if="deviceType === 'desktop'" padding="closed" class="view">
+        <IconAction @click="returnDefault()" v-if="!actualComponent.unclosable" icon="fa-solid fa-xmark" class="close"/>
+        <component :is="actualComponent.component" v-bind="actualComponent.props"/>
+    </Box>
+    <div v-else-if="deviceType === 'mobile' && !actualComponent.default" class="view-mobile">
+        <IconAction @click="returnDefault()" v-if="!actualComponent.unclosable" icon="fa-solid fa-xmark" class="close"/>
+        <component :is="actualComponent.component" v-bind="actualComponent.props"/>
+    </div>
+</template>
+<script setup>
+import Box from '../UI/Box.vue';
+import Events from '@/utils/Events';
+import { computed, ref, watch } from 'vue';
+import Loading from '@/components/Widget/View/LoadingView.vue'
+import SearchResults from '@/components/Widget/View/SearchResults.vue';
+import Default from '../Widget/View/Default.vue';
+import IconAction from '../UI/IconAction.vue';
+
+//TODO: Render compatibility with mobile
+//TODO: Make Default.vue a real default view
+//TODO: Make the search request
+//TODO: Make the medias
+
+const deviceType = ref((window.innerWidth < 768 || window.innerHeight < 607) ? 'mobile' : 'desktop');
+
+watch(() => window.innerWidth, () => {
+    deviceType.value = (window.innerWidth < 768 || window.innerHeight < 607) ? 'mobile' : 'desktop';
+});
+
+const defaultComponent = {
+    component: Default,
+    unclosable: true,
+    default: true,
+    props: {}
+};  
+
+function returnDefault() {
+    actualComponent.value = defaultComponent;
+}
+
+const actualComponent = ref(defaultComponent);
+
+Events.on("SEARCH_STARTED", () => {
+    setLoading("Recherche en cours ...")
+})
+Events.on("SEARCH_RESULT", (data) => {
+    console.log("Search results received:", data);
+    actualComponent.value = {
+        component: SearchResults,
+        props: {
+            results: data
+        }
+    };
+});
+
+    function setLoading(messageLoading) {
+        
+    actualComponent.value = {
+        component: Loading,
+        unclosable: true,
+        props: {
+            message: messageLoading
+        }
+    };
+
+}
+
+</script>
+<style scoped>
+
+.close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: var(--text-secondary);
+    cursor: pointer;
+}
+
+.view {
+    position: relative;
+}
+
+.view-mobile {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-secondary);
+    z-index: 1000;
+    border-radius: 0 !important;
+}   
+
+</style>