Repository: mediar-ai/screenpipe
File: screenpipe-app-tauri/components/settings/disk-usage.tsx (TypeScript)

Code before:
            </AccordionItem>
          </Accordion>
        )}
        {diskUsage && diskUsage.total_data_size && diskUsage.avaiable_space && (
          <Accordion type="single" 
            className="w-[90%] border rounded-lg">
            <AccordionItem value="total-pipes-size">
              <AccordionTrigger className="mx-4 h-[120px] flex hover:no-underline">
                <div className="w-full">
                  <div className="mb-3 flex flex-row items-center justify-between">
                    <div className="flex flex-col !float-left items-start">
                      <span className="font-semibold">total space used by screenpipe</span>
                    </div>
                    <Badge 
                      variant={"outline"} 
                      className="mr-4 font-semibold min-w-[5.5rem] flex flex-row justify-center">
                      {diskUsage.total_data_size}
                    </Badge>
                  </div>
                  <div className="flex justify-center">
                    <div className="h-[1px] w-[250px] rounded-full bg-gradient-to-l from-slate-500/30 to-transparent"></div>
                    <div className="h-[1px] w-[250px] rounded-full bg-gradient-to-r from-slate-500/30 to-transparent"></div>
                  </div>
                  <div className="mt-3 flex flex-row items-center justify-between">
                    <div className="flex flex-col !float-left items-start">
                      <span className="font-semibold">avaiable space left on your system</span>
                    </div>
                    <Badge 
                      variant={"outline"} 
                      className="mr-4 font-semibold min-w-[5.5rem] flex flex-row justify-center">
                      {diskUsage.avaiable_space}
                    </Badge>
                  </div>
                </div>
              </AccordionTrigger>
            </AccordionItem>
          </Accordion>
        )}
      </div>
    </div>
  );
}



Review comment (suggestion):
```suggestion
                      <span className="font-semibold">avaiable space left on your disk</span>
```

Code after:
                    <span className="font-semibold">total data captured</span>
                    <span className="text-[14px] !font-normal text-muted-foreground">
                      amount of data captured by screenpipe over the time
                    </span>
                  </div>
                  <Badge 
                    variant={"outline"} 
                    className="mr-4 font-semibold min-w-[5.5rem] flex flex-row justify-center">
                    {diskUsage.media.total_media_size}
                  </Badge>
                </div>
              </AccordionTrigger>
              <AccordionContent className="w-full">
                <div key={"video"} className="flex items-center justify-between px-1 py-1">
                  <span className="text-base ml-8">video data</span>
                  <Badge 
                    variant={"outline"} 
                    className="mr-10 min-w-[5.5rem] flex flex-row justify-center">
                    {diskUsage.media.videos_size}
                  </Badge>
                </div>
                <div key={"audio"} className="flex items-center justify-between px-1 py-1">
                  <span className="text-base ml-8">audio data</span>
                  <Badge 
                    variant={"outline"} 
                    className="mr-10 min-w-[5.5rem] flex flex-row justify-center ">
                    {diskUsage.media.audios_size}
                  </Badge>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        )}
        {diskUsage && diskUsage.total_data_size && diskUsage.avaiable_space && (
          <Accordion type="single" 
            className="w-[90%] border rounded-lg">
            <AccordionItem value="total-pipes-size">
              <AccordionTrigger className="mx-4 h-[200px] flex hover:no-underline">
                <div className="w-full">
                  <BadgeItem 
                    label="screenpipe cache size" 
                    description="disk space used for models, frames..."
                    value={diskUsage.total_cache_size} />
                  <Divider />
                  <BadgeItem 
                    label="disk space used by screenpipe" 
                    description="total disk space utilized by the screenpipe application"
                    value={diskUsage.total_data_size} />
                  <Divider />
                  <BadgeItem 
                    label="available disk space"