move files around and abstract to DeprecationMessage

frontend/src/App.tsx

@@ -26,6 +26,7 @@ import { useAppStore } from "./store/app-store";
 import { useProjectStore } from "./store/project-store";
 import Sidebar from "./components/sidebar/Sidebar";
 import Preview from "./components/preview/Preview";
+import DeprecationMessage from "./components/messages/DeprecationMessage";
 
 function App() {
   const {
@@ -397,14 +398,8 @@ function App() {
             }
           />
 
-          {showBetterModelMessage && (
-            <div className="rounded-lg p-2 bg-fuchsia-200">
-              <p className="text-gray-800 text-sm">
-                We no longer support this model. Instead, code generation will
-                use GPT-4o or Claude Sonnet 3.5, the 2 state-of-the-art models.
-              </p>
-            </div>
-          )}
+          {/* Show auto updated message when older models are choosen */}
+          {showBetterModelMessage && <DeprecationMessage />}
 
           {appState !== AppState.CODE_READY && <TipLink />}
 

frontend/src/components/messages/DeprecationMessage.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+interface DeprecationMessageProps {}
+
+const DeprecationMessage: React.FC<DeprecationMessageProps> = () => {
+  return (
+    <div className="rounded-lg p-2 bg-fuchsia-200">
+      <p className="text-gray-800 text-sm">
+        We no longer support this model. Instead, code generation will use
+        GPT-4o or Claude Sonnet 3.5, the 2 state-of-the-art models.
+      </p>
+    </div>
+  );
+};
+
+export default DeprecationMessage;

frontend/src/components/preview/CodeTab.tsx

@@ -1,7 +1,7 @@
 import { FaCopy } from "react-icons/fa";
 import CodeMirror from "./CodeMirror";
-import { Button } from "./ui/button";
-import { Settings } from "../types";
+import { Button } from "../ui/button";
+import { Settings } from "../../types";
 import copy from "copy-to-clipboard";
 import { useCallback } from "react";
 import toast from "react-hot-toast";

frontend/src/components/preview/Preview.tsx

@@ -7,7 +7,7 @@ import {
   FaCode,
 } from "react-icons/fa";
 import { AppState, Settings } from "../../types";
-import CodeTab from "../CodeTab";
+import CodeTab from "./CodeTab";
 import { Button } from "../ui/button";
 import { useAppStore } from "../../store/app-store";
 import { useProjectStore } from "../../store/project-store";

frontend/src/components/sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { useAppStore } from "../../store/app-store";
 import { useProjectStore } from "../../store/project-store";
 import { AppState } from "../../types";
-import CodePreview from "../CodePreview";
+import CodePreview from "../preview/CodePreview";
 import Spinner from "../Spinner";
 import KeyboardShortcutBadge from "../core/KeyboardShortcutBadge";
 import TipLink from "../core/TipLink";