add link to the thread of a message

front/src/assets/svg/expand-left-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.4143 4.58594L10.4142 11.0003L16.0003 11.0004L16.0003 13.0004L10.4142 13.0003L10.4141 19.4144L3 12.0002L10.4143 4.58594ZM18.0002 19.0002V5.00018H20.0002V19.0002H18.0002Z"></path></svg>

front/src/components/structure/message/Message.vue

@@ -7,6 +7,7 @@ import Content from "./Content.vue";
 import Options from "./Options.vue";
 import { isSeenFc } from "@/utils/flagsUtils";
 import SvgLoader from "@/components/utils/SvgLoader.vue";
+import { useRouter } from "vue-router";
 
 export interface Props {
     msg: Message;
@@ -43,6 +44,8 @@ const classes = (): string => {
     }
     return "msg-basic";
 };
+
+const router = useRouter();
 </script>
 <!-- to if to is more than me
         cc -->
@@ -81,16 +84,34 @@ const classes = (): string => {
             />
             <Options class="options" :msg="props.msg" />
         </div>
+        <div id="thread-link" v-if="props.msg?.thread" @click="router.push(`/${props.msg?.thread}`)">
+            <SvgLoader svg="expand-left-fill" />
+            <!-- <SvgLoader svg="expand-left-fill" :loading="true" /> -->
+            <span>Go to the full conversation.</span>
+        </div>
     </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .message {
     width: auto;
     /* border: white 1px solid; */
     margin: 10px 5px 0px 5px;
 }
 
+#thread-link {
+    &:hover {
+        background-color: var(--selected);
+    }
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--quaternary-background);
+    padding: 3px 10px;
+    border-radius: 4px 4px 0 0;
+    cursor: pointer;
+}
+
 #context {
     display: flex;
     flex-direction: row;

front/src/components/utils/SvgLoader.vue

@@ -21,9 +21,11 @@ const classes = () => props.classes?.split(",") ?? "";
 
 <style lang="scss" scoped>
 .mainSvg {
+    display: flex;
     &.selectable {
         display: inline-block;
         border-radius: 6px;
+        cursor: pointer;
         &:hover,
         &.is-active {
             background-color: var(--selected);

front/src/store/models/model.ts

@@ -15,6 +15,7 @@ export interface Message {
     content: string;
     date: string;
     flags: string[];
+    threads: number | null;
 }
 
 export enum LoadingState {