refactor: restructure types/ folder and fix type definitions

Author: devinschumacher

app/filetypes/[slug]/page.tsx

@@ -3,9 +3,8 @@ import fs from 'fs';
 import path from 'path';
 import FileTypePageTemplate from '@/components/FileTypePageTemplate';
 import { transformFileTypeData } from '@/lib/filetype-transformer';
-import type { FileTypeRawData, FileTypeTemplateData } from '@/types/filetypes';
+import type { FileTypeRawData, FileTypeTemplateData } from '@/types';
 
-// Types are now imported from @/types/filetypes
 
 async function getFileTypeData(slug: string): Promise<FileTypeTemplateData | null> {
   try {

components/HeroConverter.tsx

@@ -241,7 +241,7 @@ export default function HeroConverter({
             <AlertTriangle className="h-4 w-4" />
             <AlertDescription>
               <strong>Note:</strong> Video conversion runs in your browser using WebAssembly. 
-              Large files (>50MB) may take several minutes. For MKV→MP4/MOV, we use fast remuxing when possible.
+              Large files (&gt;50MB) may take several minutes. For MKV→MP4/MOV, we use fast remuxing when possible.
             </AlertDescription>
           </Alert>
         )}

components/ToolPageTemplate.tsx

@@ -8,56 +8,25 @@ import { FAQSection } from "@/components/sections/FAQSection";
 import { ToolsLinkHub } from "@/components/sections/ToolsLinkHub";
 import { BlogSection } from "@/components/sections/BlogSection";
 import { ChangelogSection } from "@/components/sections/ChangelogSection";
-
-type ToolInfo = {
-  title: string;
-  subtitle: string;
-  from: string;
-  to: string;
-  accept?: string;
-};
+import type { 
+  ToolInfo, 
+  VideoSectionData,
+  FAQ,
+  AboutFormatsSection as AboutFormatsSectionData,
+  ChangelogEntry,
+  RelatedTool,
+  BlogPost 
+} from "@/types";
 
 type ToolPageProps = {
   tool: ToolInfo;
-  videoSection?: {
-    embedId?: string;
-  };
+  videoSection?: VideoSectionData;
   useTwoColumnLayout?: boolean;
-  faqs?: Array<{
-    question: string;
-    answer: string;
-  }>;
-  aboutSection?: {
-    title?: string;
-    fromFormat: {
-      name: string;
-      fullName: string;
-      description: string;
-      details?: string[];
-    };
-    toFormat: {
-      name: string;
-      fullName: string;
-      description: string;
-      details?: string[];
-    };
-  };
-  changelog?: Array<{
-    date: string;
-    changes: string[];
-  }>;
-  relatedTools?: Array<{
-    title: string;
-    href: string;
-  }>;
-  blogPosts?: Array<{
-    title: string;
-    subtitle: string;
-    description: string;
-    href: string;
-    category?: string;
-    image?: string;
-  }>;
+  faqs?: FAQ[];
+  aboutSection?: AboutFormatsSectionData;
+  changelog?: ChangelogEntry[];
+  relatedTools?: RelatedTool[];
+  blogPosts?: BlogPost[];
 };
 
 export default function ToolPageTemplate({

components/ToolsByCategory.tsx

@@ -1,18 +1,25 @@
 "use client";
 
-import { Tool } from '@/lib/tool-utils';
-import { categoryDefinitions, MainCategory } from '@/config/tool-categories';
+import type { Tool } from '@/types';
+import { tools } from '@/lib/tool-utils';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import Link from 'next/link';
-import { ArrowRightLeft, Minimize2, Combine, Edit, BarChart, Sparkles } from 'lucide-react';
+import { ArrowRightLeft, Minimize2, Combine, Download } from 'lucide-react';
 
 const categoryIcons = {
   convert: ArrowRightLeft,
   compress: Minimize2,
   combine: Combine,
-  edit: Edit,
-  analyze: BarChart,
-  generate: Sparkles,
+  download: Download,
+};
+
+type MainCategory = 'convert' | 'compress' | 'combine' | 'download';
+
+const categoryDefinitions = {
+  convert: { name: 'Convert', color: 'blue' },
+  compress: { name: 'Compress', color: 'green' },
+  combine: { name: 'Combine', color: 'purple' },
+  download: { name: 'Download', color: 'red' },
 };
 
 interface ToolsByCategoryProps {
@@ -23,16 +30,17 @@ interface ToolsByCategoryProps {
 export function ToolsByCategory({ tools, selectedCategory }: ToolsByCategoryProps) {
   // Group tools by category
   const toolsByCategory = tools.reduce((acc, tool) => {
-    if (!acc[tool.category]) {
-      acc[tool.category] = [];
+    const category = tool.operation as MainCategory;
+    if (!acc[category]) {
+      acc[category] = [];
     }
-    acc[tool.category].push(tool);
+    acc[category].push(tool);
     return acc;
   }, {} as Record<MainCategory, Tool[]>);
 
   // Sort tools by priority within each category
   Object.keys(toolsByCategory).forEach(category => {
-    toolsByCategory[category as MainCategory].sort((a, b) => 
+    toolsByCategory[category as MainCategory].sort((a: Tool, b: Tool) => 
       (b.priority || 0) - (a.priority || 0)
     );
   });
@@ -58,15 +66,14 @@ export function ToolsByCategory({ tools, selectedCategory }: ToolsByCategoryProp
               </div>
               <div>
                 <h2 className="text-2xl font-bold">{categoryInfo.name} Tools</h2>
-                <p className="text-muted-foreground">{categoryInfo.description}</p>
               </div>
               <span className="ml-auto px-3 py-1 rounded-full bg-muted text-sm font-medium">
                 {categoryTools.length} tools
               </span>
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {categoryTools.map(tool => (
+              {categoryTools.map((tool: Tool) => (
                 <Link key={tool.id} href={tool.route}>
                   <Card className="h-full hover:shadow-lg transition-all hover:-translate-y-0.5 cursor-pointer">
                     <CardHeader className="pb-3">
@@ -83,16 +90,11 @@ export function ToolsByCategory({ tools, selectedCategory }: ToolsByCategoryProp
                       <p className="text-sm text-muted-foreground line-clamp-2">
                         {tool.description}
                       </p>
-                      {tool.subcategory && (
+                      {tool.from && tool.to && (
                         <div className="mt-3 flex items-center gap-2">
-                          <span className="text-xs px-2 py-1 rounded-full bg-muted">
-                            {tool.subcategory.replace(/-/g, ' ')}
+                          <span className="text-xs text-muted-foreground">
+                            {tool.from.toUpperCase()} → {tool.to.toUpperCase()}
                           </span>
-                          {tool.from && tool.to && (
-                            <span className="text-xs text-muted-foreground">
-                              {tool.from.toUpperCase()} → {tool.to.toUpperCase()}
-                            </span>
-                          )}
                         </div>
                       )}
                     </CardContent>

components/ToolsByTaxonomy.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Tool, OperationType, MediaType } from '@/types/tools';
+import type { Tool, OperationType, MediaType } from '@/types';
 import { 
   operationDefinitions, 
   mediaTypeDefinitions, 
@@ -25,6 +25,13 @@ const mediaIcons = {
   text: FileText,
 };
 
+interface ToolWithMedia extends Tool {
+  mediaTypes?: {
+    source?: MediaType;
+    target?: MediaType;
+  };
+}
+
 interface ToolsByTaxonomyProps {
   tools: Tool[];
   groupBy?: 'operation' | 'media';
@@ -39,7 +46,7 @@ export function ToolsByTaxonomy({
   selectedMediaType 
 }: ToolsByTaxonomyProps) {
   // Add media types to tools
-  const toolsWithMedia = tools.map(tool => ({
+  const toolsWithMedia: ToolWithMedia[] = tools.map(tool => ({
     ...tool,
     mediaTypes: {
       source: tool.from ? formatToMediaType[tool.from.toLowerCase()] : undefined,
@@ -67,7 +74,7 @@ export function ToolsByTaxonomy({
       }
       acc[tool.operation].push(tool);
       return acc;
-    }, {} as Record<OperationType, Tool[]>);
+    }, {} as Record<OperationType, ToolWithMedia[]>);
 
     // Sort tools by priority within each operation
     Object.keys(toolsByOperation).forEach(operation => {

components/sections/BlogSection.tsx

@@ -1,7 +1,7 @@
 type BlogPost = {
   title: string;
-  subtitle: string;
-  description: string;
+  subtitle?: string;
+  description?: string;
   href: string;
   category?: string;
   image?: string;

lib/filetype-categories.ts

@@ -195,7 +195,6 @@ export const extensionToCategory: Record<string, FileCategory> = {
 
   // Developer Files
   'js': 'developer',
-  'ts': 'developer',
   'jsx': 'developer',
   'tsx': 'developer',
   'py': 'developer',

lib/filetype-transformer.ts

@@ -1,4 +1,4 @@
-import type { FileTypeRawData, FileTypeTemplateData } from '@/types/filetypes';
+import type { FileTypeRawData, FileTypeTemplateData } from '@/types';
 import toolsData from '@/data/tools.json';
 
 /**

lib/tool-content.ts

@@ -1,6 +1,6 @@
 // Helper to get tool content from the tools data
 import toolsData from '@/data/tools.json';
-import type { Tool, ToolContent } from '@/types/tools';
+import type { Tool, ToolContent } from '@/types';
 
 const tools = toolsData as Tool[];
 

lib/tool-utils.ts

@@ -1,5 +1,5 @@
-import type { Tool, OperationType, MediaType } from '@/types/tools';
-import type { OperationDefinitions, MediaTypeDefinitions } from '@/types/taxonomy';
+import type { Tool, OperationType, MediaType } from '@/types';
+import type { OperationDefinitions, MediaTypeDefinitions } from '@/types';
 import toolsData from '@/data/tools.json';
 
 // Cast the imported JSON to our Tool type
@@ -157,7 +157,7 @@ export const formatToMediaType: Record<string, MediaType> = {
   'wav': 'audio',
   'flac': 'audio',
   'aac': 'audio',
-  'ogg': 'audio',
+  'oga': 'audio',
   'wma': 'audio',
   'm4a': 'audio',
   'opus': 'audio',
@@ -236,7 +236,6 @@ export const formatToMediaType: Record<string, MediaType> = {
   'html': 'text',
   'css': 'text',
   'js': 'text',
-  'ts': 'text',
   'jsx': 'text',
   'tsx': 'text',
   'py': 'text',