Implement own position highlighting in PoliticsView: Add functionality to load and display the user's own character ID, enhancing the UI by highlighting positions associated with the user. Update styles for better visibility of own positions in the table.

frontend/src/views/falukant/PoliticsView.vue

@@ -23,7 +23,7 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="pos in currentPositions" :key="pos.id">
+                            <tr v-for="pos in currentPositions" :key="pos.id" :class="{ 'own-position': isOwnPosition(pos) }">
                                 <td>{{ $t(`falukant.politics.offices.${pos.officeType.name}`) }}</td>
                                 <td>{{ pos.region.name }}</td>
                                 <td>
@@ -193,6 +193,7 @@ export default {
             elections: [],
             selectedCandidates: {},
             selectedApplications: [],
+            ownCharacterId: null,
             loading: {
                 current: false,
                 openPolitics: false,
@@ -210,6 +211,7 @@ export default {
         }
     },
     mounted() {
+        this.loadOwnCharacterId();
         this.loadCurrentPositions();
     },
     methods: {
@@ -330,6 +332,24 @@ export default {
             });
         },
 
+        async loadOwnCharacterId() {
+            try {
+                const { data } = await apiClient.get('/api/falukant/info');
+                if (data.character && data.character.id) {
+                    this.ownCharacterId = data.character.id;
+                }
+            } catch (err) {
+                console.error('Error loading own character ID', err);
+            }
+        },
+
+        isOwnPosition(pos) {
+            if (!this.ownCharacterId || !pos.character) {
+                return false;
+            }
+            return pos.character.id === this.ownCharacterId;
+        },
+
         async submitApplications() {
             try {
                 const response = await apiClient.post(
@@ -411,6 +431,11 @@ h2 {
     border: 1px solid #ddd;
 }
 
+.politics-table tbody tr.own-position {
+    background-color: #e0e0e0;
+    font-weight: bold;
+}
+
 .loading {
     text-align: center;
     font-style: italic;