feat: letterboxd data in edit tab

package.json

@@ -1,6 +1,6 @@
 {
   "name": "movie-tier-list",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/SidebarComponent.vue

@@ -103,6 +103,8 @@ body {
   width: 400px;
   overflow: auto;
   max-height: 100vh;
+  z-index: 1000;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 }
 
 .addbutton {

src/components/EditEntryTab.vue

@@ -1,5 +1,6 @@
 <script>
 import {mapState} from "vuex";
+import {BASE_URL} from '../store/modules/letterboxd';
 
 export default {
   name: "EditEntryTab",
@@ -13,17 +14,29 @@ export default {
     saveEntry() {
       this.$store.dispatch('updateEntry', this.entry)
     },
+    fetchLetterboxdData() {
+      if (!this.entry?.letterboxdId) {
+        return;
+      }
+      fetch(`${BASE_URL}/api/film/${this.entry.letterboxdId}`)
+        .then(response => response.json())
+        .then(data => {
+          this.letterboxdData = data;
+        })
+    }
   },
   data() {
     return {
-      entry: null
+      entry: null,
+      letterboxdData: null
     }
   },
   watch: {
     selectedEntry: {
       immediate: true,
       handler(val) {
         this.entry = JSON.parse(JSON.stringify(val));
+        this.fetchLetterboxdData();
       }
     }
   }
@@ -50,6 +63,9 @@ export default {
     <div v-else class="flex-1 mt-3">
       Click on an entry to edit.
     </div>
+    <div>
+      {{ letterboxdData }}
+    </div>
     <button class="w-full addbutton pa-3 mt-2" @click="saveEntry" :class="{disable: !formValid}">Save</button>
   </div>
 </template>

src/server/proxy.js

@@ -78,6 +78,19 @@ app.get('/api/search', async (req, res) => {
     }
 });
 
+app.get('/api/film/:id', async (req, res) => {
+    console.log('GET /api/film/:id')
+    try {
+        const response = await axios.get(
+            `https://api.letterboxd.com/api/v0/film/${req.params.id}`
+        );
+        res.json(response.data);
+    } catch (error) {
+        console.error(error);
+        res.status(500).send('Internal Server Error');
+    }
+});
+
 app.get('/image_proxy', async (req, res) => {
     if (!req.query.url) {
         res.status(400).send('Bad Request');