Set up project configuration and base UI components

Initializes the project with necessary configurations, including Replit settings and a .gitignore file. It also introduces foundational UI components for the application, such as buttons, dialogs, and layout elements, likely for the Pomodoro timer application.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 59a5ae27-3c71-459b-b42f-fe14121bf9c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3007b6f6-d03b-45e1-9ed1-7ce8de18ea24/59a5ae27-3c71-459b-b42f-fe14121bf9c3/Uupe4F4

client/src/components/molecules/SuggestionChips.tsx

@@ -0,0 +1,89 @@
+import { useQuery } from "@tanstack/react-query";
+import { Lightbulb, ArrowRight } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/atoms/Button";
+import { useStore } from "@/lib/store";
+
+interface Suggestion {
+  minutes: number;
+  reason: string;
+}
+
+interface SuggestionChipsProps {
+  onSuggestionSelect: (minutes: number) => void;
+  className?: string;
+}
+
+export function SuggestionChips({ onSuggestionSelect, className = "" }: SuggestionChipsProps) {
+  const deviceId = useStore((state) => state.deviceId);
+
+  const { data: suggestions, isLoading } = useQuery<{ suggestions: Suggestion[] }>({
+    queryKey: ['/api/suggestions', { deviceId }],
+    enabled: !!deviceId,
+  });
+
+  if (isLoading) {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <Lightbulb className="text-accent mr-3" />
+            Smart Suggestions
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="p-4 border border-border rounded-lg animate-pulse">
+                <div className="h-4 bg-muted rounded mb-2"></div>
+                <div className="h-3 bg-muted rounded w-3/4"></div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const suggestionList = suggestions?.suggestions || [
+    { minutes: 25, reason: "Classic Pomodoro technique - great for starting out." },
+    { minutes: 15, reason: "Short sprints help build focus habits." },
+    { minutes: 40, reason: "Extended sessions for deep work." }
+  ];
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          <Lightbulb className="text-accent mr-3" />
+          Smart Suggestions
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {suggestionList.map((suggestion, index) => (
+            <Button
+              key={index}
+              variant="outline"
+              className="p-4 h-auto text-left group hover:border-primary hover:bg-primary/5 transition-all"
+              onClick={() => onSuggestionSelect(suggestion.minutes)}
+              data-testid={`button-suggestion-${suggestion.minutes}`}
+            >
+              <div className="w-full">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="font-medium group-hover:text-primary transition-colors">
+                    {suggestion.minutes} min {suggestion.minutes >= 30 ? 'Deep Work' : suggestion.minutes <= 15 ? 'Sprint' : 'Focus'}
+                  </span>
+                  <ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {suggestion.reason}
+                </p>
+              </div>
+            </Button>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}