Swap CarbonEmissions sections to use persistentToggle

client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue

@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { GetComponentPropTypes } from "types/utilityTypes";
 import { computed, unref } from "vue";
 
+import { usePersistentToggle } from "@/composables/persistentToggle";
+
 import * as carbonEmissionsConstants from "./carbonEmissionConstants.js";
 
 import BarChart from "./BarChart.vue";
@@ -34,6 +36,8 @@ const props = withDefaults(defineProps<CarbonEmissionsProps>(), {
     memoryAllocatedInMebibyte: 0,
 });
 
+const { toggled, toggle } = usePersistentToggle("carbonEmissions");
+
 const carbonEmissions = computed(() => {
     const memoryPowerUsed = carbonEmissionsConstants.memoryPowerUsage;
     const runtimeInHours = props.jobRuntimeInSeconds / (60 * 60); // Convert to hours
@@ -270,9 +274,11 @@ function getEnergyNeededText(energyNeededInKiloWattHours: number) {
 
 <template v-if="carbonEmissions && carbonEmissionsComparisons">
     <div class="mt-4">
-        <Heading h2 separator size="md" inline> Carbon Footprint </Heading>
+        <Heading h2 separator size="md" inline collapsible :collapsed="toggled" @click="toggle()">
+            Carbon Footprint
+        </Heading>
 
-        <section class="carbon-emission-values my-4">
+        <section v-if="!toggled" class="carbon-emission-values my-4">
             <div class="emissions-grid">
                 <!-- Carbon Footprint Totals -->
                 <CarbonEmissionsCard