Enhance user experience by refining UI elements and voice command handling

Removes unused components, simplifies task sorting, and improves voice command display in `Sidebar.tsx`, `TasksPage.tsx`, and `VoicePage.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6bac2659-689a-442d-ae16-f45f8d1450c7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/efd72e37-9525-4be0-87be-f24a85519f34.jpg

client/src/components/layout/Sidebar.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
+
 import { Separator } from "@/components/ui/separator";
 import {
   Calendar,
@@ -126,7 +126,7 @@ const adminNavigation = [
   },
 ];
 
-export default function Sidebar({ className }: SidebarProps) {
+function Sidebar({ className }: SidebarProps) {
   const [location] = useLocation();
   const { user } = useAuth();
   const { t } = useTranslation();

client/src/pages/TasksPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Card, CardContent } from '@/components/ui/card';
+import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -22,8 +22,8 @@ export default function TasksPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [priorityFilter, setPriorityFilter] = useState('all');
-  const [sortBy, setSortBy] = useState('createdAt');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+  const [sortBy] = useState('createdAt');
+  const [sortOrder] = useState<'asc' | 'desc'>('desc');
   
   const [newTask, setNewTask] = useState({
     title: '',

client/src/pages/VoicePage.tsx

@@ -6,20 +6,22 @@ import { Badge } from "@/components/ui/badge";
 import { PageHeader } from "@/components/ui/page-header";
 import { useToast } from "@/hooks/use-toast";
 import Sidebar from "@/components/layout/Sidebar";
-import { Mic, MicOff, Volume2, Settings, PlayCircle, StopCircle } from "lucide-react";
+import { Mic, MicOff, Volume2, Settings, PlayCircle } from "lucide-react";
 import { useVoice } from "@/hooks/useVoice";
 
 export default function VoicePage() {
   const { toast } = useToast();
   const [isListening, setIsListening] = useState(false);
-  const { isEnabled, isSupported, startListening, stopListening } = useVoice();
+  const { isSupported, startListening, stopListening } = useVoice();
 
   const { data: commands = [], isLoading } = useQuery({
     queryKey: ["/api/voice/commands"],
+    select: (data: any) => Array.isArray(data) ? data : []
   });
 
-  const { data: status } = useQuery({
+  useQuery({
     queryKey: ["/api/voice/status"],
+    select: (data: any) => data || { enabled: true }
   });
 
   const handleToggleListening = () => {
@@ -188,7 +190,7 @@ export default function VoicePage() {
           </Card>
 
           {/* Recent Voice Commands */}
-          {!isLoading && commands.length > 0 && (
+          {!isLoading && Array.isArray(commands) && commands.length > 0 && (
             <Card className="mt-6">
               <CardHeader>
                 <CardTitle>Recent Commands</CardTitle>
@@ -198,7 +200,7 @@ export default function VoicePage() {
               </CardHeader>
               <CardContent>
                 <div className="space-y-3">
-                  {commands.slice(0, 10).map((command: any) => (
+                  {(commands as any[]).slice(0, 10).map((command: any) => (
                     <div key={command.id} className="flex items-center justify-between p-3 border rounded-lg">
                       <div>
                         <div className="font-medium">{command.transcription}</div>