aimond/sapiens-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve article view mode selection with tooltips

Browse Source 
Replace text labels on grid and list view buttons with tooltips and remove unnecessary text.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/16cZmxV
This commit is contained in:
kimjaehyeon0101
2025-09-30 05:53:35 +00:00
parent 73f9ad199e
commit dc2aa8cf28
2 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/src/pages/MediaOutlet.tsx
View File

@ -7,6 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit, Info } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast";
@ -467,27 +468,45 @@ export default function MediaOutlet() {
<div className="mb-4">
<div className="flex items-center justify-between mb-3">
<h2 className="text-xl font-bold">Latest Articles</h2>
<div className="flex items-center space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => setViewMode("grid")}
className={viewMode === "grid" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
data-testid="button-grid-view"
>
<Grid className="h-4 w-4 mr-2" />
Grid
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setViewMode("list")}
className={viewMode === "list" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
data-testid="button-list-view"
>
<List className="h-4 w-4 mr-2" />
List
</Button>
<div className="flex items-center space-x-2" role="group" aria-label="Article view mode">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => setViewMode("grid")}
className={viewMode === "grid" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
aria-label="Grid view"
aria-pressed={viewMode === "grid"}
data-testid="button-grid-view"
>
<Grid className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Grid view</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => setViewMode("list")}
className={viewMode === "list" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
aria-label="List view"
aria-pressed={viewMode === "list"}
data-testid="button-list-view"
>
<List className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>List view</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>