Tried simplifying and spliting some of Movie component.

Simplified sidebar element to use props.
Replaced icons with feather icons.

Description gets it's own component & tries it best at figuring out if
description should be truncated or not. Now it adds a element at bottom
of body with the same description and compares the height to default
truncated text. If the dummy element is taller we show the truncate
button.

src/icons/IconArrowDown.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="12" y1="5" x2="12" y2="19"></line>
+    <polyline points="19 12 12 19 5 12"></polyline>
+  </svg>
+</template>

src/icons/IconInfo.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="2" y1="12" x2="22" y2="12"></line>
+    <path
+      d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+    ></path>
+  </svg>
+</template>

src/icons/IconMagnet.vue

@@ -0,0 +1,37 @@
+<template>
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24px"
+    height="24px"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    data-fill=""
+    stroke="none"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    preserveAspectRatio="xMidYMid meet"
+    style="transform: rotate(-45deg); margin-top: -7px"
+  >
+    <g transform="translate(0,512) scale(0.1,-0.1)">
+      <path
+        d="M1420 4173 c-956 -958 -1013 -1019 -1133 -1213 -401 -651 -377 -1492
+61 -2125 287 -415 711 -693 1222 -803 116 -24 143 -26 375 -27 236 0 257 2
+383 28 315 66 598 199 847 397 106 84 1920 1895 1936 1931 6 16 9 39 5 51 -3
+13 -149 167 -325 343 -301 299 -322 319 -356 319 -34 0 -80 -44 -963 -925
+-959 -958 -985 -981 -1127 -1044 -337 -149 -721 -96 -993 138 -367 315 -433
+848 -154 1247 27 40 401 422 963 985 866 867 919 923 919 955 0 33 -23 58
+-323 358 -315 315 -323 322 -362 322 -40 0 -46 -6 -975 -937z m1235 37 l-220
+-220 -240 240 -240 240 220 220 220 220 240 -240 240 -240 -220 -220z m-575
+-105 l234 -235 -605 -607 c-632 -635 -663 -669 -747 -838 -123 -251 -139 -591
+-37 -860 55 -148 142 -281 260 -397 378 -377 971 -423 1414 -111 38 27 320
+300 671 649 l605 604 240 -240 240 -241 -610 -608 c-623 -621 -710 -699 -885
+-801 -199 -116 -422 -195 -655 -231 -103 -16 -397 -16 -500 0 -403 63 -748
+241 -1025 527 -328 339 -500 764 -500 1234 0 434 143 821 429 1160 73 86 1213
+1230 1226 1230 5 0 116 -106 245 -235z m2615 -1935 l-220 -220 -240 240 -240
+240 220 220 220 220 240 -240 240 -240 -220 -220z"
+      />
+    </g>
+  </svg>
+</template>

src/icons/IconMail.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+    ></path>
+    <polyline points="22,6 12,13 2,6"></polyline>
+  </svg>
+</template>

src/icons/IconProfile.vue

@@ -9,7 +9,6 @@
     stroke-width="1"
     stroke-linecap="round"
     stroke-linejoin="round"
-    style="transition: stroke-width 0.5s ease"
   >
     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
     <circle cx="12" cy="7" r="4"></circle>

src/icons/IconThumbsDown.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+    ></path>
+  </svg>
+</template>

src/icons/IconThumbsUp.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+    ></path>
+  </svg>
+</template>