🎨 Refactor computed properties and method bindings for improved readability and maintainability

code/websites/pokedex.online/src/components/gamemaster/FileSelector.vue

@@ -46,28 +46,26 @@ const props = defineProps({
 const internalFilesState = useGamemasterFiles(props.client);
 const activeFilesState = computed(() => props.filesState || internalFilesState);
 
-const {
-  selectedFile,
-  fileContent,
-  fileLines,
-  uniqueFiles,
-  isLoading,
-  fileError,
-  loadStatus,
-  formatSize,
-  formatFileName,
-  getFileType
-} = activeFilesState.value;
+const selectedFile = computed(() => activeFilesState.value.selectedFile);
+const fileContent = computed(() => activeFilesState.value.fileContent);
+const fileLines = computed(() => activeFilesState.value.fileLines);
+const uniqueFiles = computed(() => activeFilesState.value.uniqueFiles);
+const isLoading = computed(() => activeFilesState.value.isLoading);
+const fileError = computed(() => activeFilesState.value.fileError);
+
+const formatSize = (...args) => activeFilesState.value.formatSize(...args);
+const formatFileName = (...args) => activeFilesState.value.formatFileName(...args);
+const getFileType = (...args) => activeFilesState.value.getFileType(...args);
 
 const selectedFileMeta = computed(() => {
-  if (!selectedFile.value) return null;
-  return uniqueFiles.value.find(
-    file => getFileType(file.filename) === selectedFile.value
+  if (!selectedFile.value.value) return null;
+  return uniqueFiles.value.value.find(
+    file => getFileType(file.filename) === selectedFile.value.value
   );
 });
 
 onMounted(() => {
-  loadStatus();
+  activeFilesState.value.loadStatus();
 });
 </script>