.refine issue

frontend/src/components/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { HomeIcon } from "@/components/ui/home";
 import { HistoryIcon } from "@/components/ui/history-icon";
 import { SettingsIcon } from "@/components/ui/settings";
@@ -10,15 +11,30 @@ import { BadgeAlertIcon } from "@/components/ui/badge-alert";
 import { GithubIcon } from "@/components/ui/github";
 import { BlocksIcon } from "@/components/ui/blocks-icon";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { openExternal } from "@/lib/utils";
+
 export type PageType = "main" | "settings" | "debug" | "audio-analysis" | "audio-converter" | "file-manager" | "about" | "history";
 interface SidebarProps {
     currentPage: PageType;
     onPageChange: (page: PageType) => void;
 }
 export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
+    const [isIssuesDialogOpen, setIsIssuesDialogOpen] = useState(false);
+    const [hasIssueAgreement, setHasIssueAgreement] = useState(false);
+    const handleIssuesDialogChange = (open: boolean) => {
+        setIsIssuesDialogOpen(open);
+        if (!open) {
+            setHasIssueAgreement(false);
+        }
+    };
+    const handleOpenIssues = () => {
+        openExternal("https://github.com/afkarxyz/SpotiFLAC/issues");
+        handleIssuesDialogChange(false);
+    };
     return (<div className="fixed left-0 top-0 h-full w-14 bg-card border-r border-border flex flex-col items-center py-14 z-30">
             <div className="flex flex-col gap-2 flex-1">
                 <Tooltip delayDuration={0}>
@@ -96,16 +112,49 @@ export function Sidebar({ currentPage, onPageChange }: SidebarProps) {
             </div>
 
             <div className="mt-auto flex flex-col gap-2">
-                <Tooltip delayDuration={0}>
+                <Dialog open={isIssuesDialogOpen} onOpenChange={handleIssuesDialogChange}>
-                    <TooltipTrigger asChild>
+                    <Tooltip delayDuration={0}>
-                        <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => openExternal("https://github.com/afkarxyz/SpotiFLAC/issues")}>
+                        <TooltipTrigger asChild>
-                            <GithubIcon size={20}/>
+                            <Button variant="ghost" size="icon" className="h-10 w-10 hover:bg-primary/10 hover:text-primary" onClick={() => setIsIssuesDialogOpen(true)}>
-                        </Button>
+                                <GithubIcon size={20}/>
-                    </TooltipTrigger>
+                            </Button>
-                    <TooltipContent side="right">
+                        </TooltipTrigger>
-                        <p>Report Bugs or Request Features</p>
+                        <TooltipContent side="right">
-                    </TooltipContent>
+                            <p>Report Bugs or Request Features</p>
-                </Tooltip>
+                        </TooltipContent>
+                    </Tooltip>
+                    <DialogContent className="max-w-xl">
+                        <DialogHeader>
+                            <DialogTitle>Before Opening GitHub Issues</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+
+                        <div className="space-y-4 text-sm">
+                            <div className="rounded-lg border border-amber-500/40 bg-amber-500/10 p-4">
+                                <p className="font-semibold text-amber-900 dark:text-amber-200">Important</p>
+                                <p className="mt-1 text-amber-950/90 dark:text-amber-100/90">
+                                    Search existing issues first and use the issue template when opening a new report or request.
+                                </p>
+                            </div>
+
+                            <label className="flex cursor-pointer items-center gap-3 rounded-lg border p-4">
+                                <Checkbox className="shrink-0" checked={hasIssueAgreement} onCheckedChange={(checked) => setHasIssueAgreement(checked === true)}/>
+                                <span className="leading-5 text-foreground/90">
+                                    I understand that I should use the issue template and avoid duplicate issues.
+                                </span>
+                            </label>
+                        </div>
+
+                        <DialogFooter className="sm:justify-between gap-2">
+                            <Button variant="outline" onClick={() => handleIssuesDialogChange(false)}>
+                                Cancel
+                            </Button>
+                            <Button disabled={!hasIssueAgreement} onClick={handleOpenIssues}>
+                                Open Issues
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
 
                 <Tooltip delayDuration={0}>
                     <TooltipTrigger asChild>