feat: add warning/alert component

AppWarning.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Rectangle {
+  id: warningAlert
+
+  // Customizable properties
+  property string alertTitle: "Warning"
+  property string alertMessage: "This is a warning message about a dangerous operation."
+  property bool showIcon: true
+  property bool closable: true
+  property bool showTitle: true
+
+  // Size properties
+  implicitHeight: contentLayout.implicitHeight + 24 // Padding
+  radius: Theme.radius
+
+  // Warning style colors - already had these
+  color: "#fffbe6"        // Light yellow background
+  border.color: "#ffe58f" // Yellow border
+  border.width: 1
+
+  RowLayout {
+    id: contentLayout
+    anchors {
+      left: parent.left
+      right: parent.right
+      top: parent.top
+      margins: 12
+    }
+    spacing: 12
+
+    // Warning icon
+    Rectangle {
+      id: iconContainer
+      visible: showIcon
+      width: 16
+      height: 16
+      color: "transparent"
+
+      Text {
+        anchors.centerIn: parent
+        text: "⚠️"
+        font.pixelSize: 16
+        color: "#faad14"
+      }
+    }
+
+    // Content area
+    ColumnLayout {
+      Layout.fillWidth: true
+      spacing: 4
+
+      // Title
+      Text {
+        id: titleText
+        visible: showTitle
+        text: alertTitle
+        font.bold: true
+        font.pixelSize: 14
+        color: "#613400"
+      }
+
+      // Message
+      Text {
+        id: messageText
+        text: alertMessage
+        wrapMode: Text.WordWrap
+        Layout.fillWidth: true
+        color: "#613400"
+        font.pixelSize: 12
+      }
+    }
+
+    // Close button
+    Rectangle {
+      id: closeButton
+      visible: closable
+      width: 16
+      height: 16
+      color: "transparent"
+
+      Text {
+        anchors.centerIn: parent
+        text: "×"
+        font.pixelSize: 16
+        color: "#613400"
+      }
+
+      MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: warningAlert.visible = false
+
+        // Hover effect
+        hoverEnabled: true
+        onEntered: closeButton.color = "#ffeeb5"
+        onExited: closeButton.color = "transparent"
+      }
+    }
+  }
+}

CMakeLists.txt

@@ -27,6 +27,7 @@ set(plain_qml_files
   AppTextField.qml
   AppImage.qml
   AppLink.qml
+  AppWarning.qml
 )
 set(qml_singletons
   Fonts.qml

gallery/Main.qml

@@ -120,5 +120,9 @@ AppWindow {
             width: 100
             radius: 20
         }
+
+        AppWarning {
+          Layout.fillWidth: true
+        }
     }
 }