feat(widgets): add documentation link and widget addition functionality

- Updated APP_VERSION to 0.0.2.
- Introduced a button for adding widgets in the WidgetsPage.
- Added a hyperlink for documentation in the YamlEditorDialog.
- Enhanced widget editor dialog to include a documentation link.

Author: amnweb

app/core/constants.py

@@ -5,7 +5,7 @@
 from pathlib import Path
 
 # Application metadata
-APP_VERSION = "0.0.1"
+APP_VERSION = "0.0.2"
 DEFAULT_SETTINGS = {"language": "en", "theme": "default", "backdrop": "mica"}
 
 # External URLs

app/core/locales/de.json

@@ -123,6 +123,7 @@
 	"widgets_center_desc": "Widgets zentriert",
 	"widgets_right_desc": "Widgets rechts ausgerichtet",
 	"widgets_yaml_error_title": "Ungültiges YAML",
+	"widgets_docs_link": "Widget Doku",
 
 	"styles_title": "Stile (CSS)",
 

app/core/locales/en.json

@@ -122,6 +122,7 @@
 	"widgets_center_desc": "Widgets centered in the bar",
 	"widgets_right_desc": "Widgets aligned to the right side of the bar",
 	"widgets_yaml_error_title": "Invalid YAML",
+	"widgets_docs_link": "Widget Docs",
 
 	"styles_title": "Styles (CSS)",
 

app/core/locales/pt_BR.json

@@ -123,6 +123,7 @@
 	"widgets_center_desc": "Componentes centralizados",
 	"widgets_right_desc": "Componentes alinhados à direita",
 	"widgets_yaml_error_title": "YAML Inválido",
+	"widgets_docs_link": "Widget Docs",
 
 	"styles_title": "Estilos (CSS)",
 

app/pages/widgets.py

@@ -46,6 +46,7 @@
     ContentDialogButton,
     FontIcon,
     Grid,
+    HyperlinkButton,
     InfoBar,
     MenuFlyout,
     MenuFlyoutItem,
@@ -106,10 +107,14 @@ def show(self):
             page_title = content.find_name("PageTitle").as_(TextBlock)
             select_bar_label = content.find_name("SelectBarLabel").as_(TextBlock)
             bar_selector = content.find_name("BarSelector").as_(ComboBox)
+            add_widget_button = content.find_name("AddWidgetButton").as_(Button)
+            add_widget_text = content.find_name("AddWidgetText").as_(TextBlock)
             self._sections_panel = content.find_name("SectionsPanel").as_(StackPanel)
 
             page_title.text = t("widgets_title")
             select_bar_label.text = t("bars_selection")
+            add_widget_text.text = t("widgets_add")
+            add_widget_button.add_click(lambda s, e: self._show_add_widget_dialog(None))
 
             self._create_sections()
 
@@ -582,12 +587,22 @@ def _show_edit_widget_dialog(self, widget_name, position):
         if not widget:
             warning(f"Widget not found: {widget_name}")
             return
+
+        # Get doc_link from registry by matching type_path
+        widget_type = widget.get("type", "unknown")
+        doc_link = ""
+        for wid, info in self._widget_registry.items():
+            if info.type_path == widget_type:
+                doc_link = getattr(info, "doc_link", "")
+                break
+
         self._show_widget_editor_dialog(
             widget_name=widget_name,
-            widget_type=widget.get("type", "unknown"),
+            widget_type=widget_type,
             options=widget.get("options", {}),
             position=position,
             is_new=False,
+            doc_link=doc_link,
         )
 
     def _show_new_widget_dialog(self, widget_info, position):
@@ -607,9 +622,10 @@ def _show_new_widget_dialog(self, widget_info, position):
             options=widget_info["defaults"].copy() if widget_info["defaults"] else {},
             position=position,
             is_new=True,
+            doc_link=widget_info.get("doc_link", ""),
         )
 
-    def _show_widget_editor_dialog(self, widget_name, widget_type, options, position, is_new):
+    def _show_widget_editor_dialog(self, widget_name, widget_type, options, position, is_new, doc_link=""):
         """Show dialog to edit or create a widget's options using Monaco editor.
 
         Args:
@@ -618,6 +634,7 @@ def _show_widget_editor_dialog(self, widget_name, widget_type, options, position
             options: Widget options dict
             position: Bar position ("left", "center", "right") or None
             is_new: True if creating new widget, False if editing existing
+            doc_link: URL to widget documentation (optional)
         """
         try:
             self._app._loading = True
@@ -650,6 +667,7 @@ def _show_widget_editor_dialog(self, widget_name, widget_type, options, position
             name_input = dialog_content.find_name("NameInput").as_(TextBox)
             name_error = dialog_content.find_name("NameError").as_(TextBlock)
             type_text = dialog_content.find_name("TypeText").as_(TextBlock)
+            docs_link = dialog_content.find_name("DocsLink").as_(HyperlinkButton)
             options_label = dialog_content.find_name("OptionsLabel").as_(TextBlock)
             webview = dialog_content.find_name("EditorWebView").as_(WebView2)
             loading_overlay = dialog_content.find_name("LoadingOverlay").as_(Grid)
@@ -658,6 +676,13 @@ def _show_widget_editor_dialog(self, widget_name, widget_type, options, position
             type_text.text = widget_type
             options_label.text = t("widgets_options")
 
+            # Set up docs link if available
+            if doc_link:
+                docs_link_text = dialog_content.find_name("DocsLinkText").as_(TextBlock)
+                docs_link_text.text = t("widgets_docs_link")
+                docs_link.add_click(lambda s, e, url=doc_link: __import__("webbrowser").open(url))
+                docs_link.visibility = Visibility.VISIBLE
+
             # Name validation state
             editor_state_name = {"valid": True, "original_name": widget_name}
 
@@ -929,6 +954,7 @@ def _setup_widget_data(self):
                         "description": info.description,
                         "type_path": info.type_path,
                         "defaults": getattr(info, "defaults", {}),
+                        "doc_link": getattr(info, "doc_link", ""),
                     }
                 )
             all_widgets.sort(key=lambda x: (x["category"], x["name"]))

app/xaml/dialogs/YamlEditorDialog.xaml

@@ -28,6 +28,12 @@
         <Border Background="{{ThemeResource SystemControlBackgroundBaseLowBrush}}" CornerRadius="4" Padding="6,2" VerticalAlignment="Center">
              <TextBlock x:Name="TypeText" FontFamily="Consolas, Courier New, monospace"/>
         </Border>
+        <HyperlinkButton x:Name="DocsLink" Padding="0" VerticalAlignment="Center" Visibility="Collapsed">
+            <StackPanel Orientation="Horizontal" Spacing="4">
+                <TextBlock x:Name="DocsLinkText"/>
+                <FontIcon Glyph="&#xE8A7;" FontSize="12"/>
+            </StackPanel>
+        </HyperlinkButton>
     </StackPanel>
     <TextBlock x:Name="OptionsLabel" Style="{{StaticResource BodyStrongTextBlockStyle}}"/>
     <Grid Height="420">

app/xaml/pages/WidgetsPage.xaml

@@ -16,6 +16,12 @@
                     <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
                         <TextBlock x:Name="SelectBarLabel" Text="Select bar" VerticalAlignment="Center"/>
                         <ComboBox x:Name="BarSelector" MinWidth="180"/>
+                        <Button x:Name="AddWidgetButton">
+                            <StackPanel Orientation="Horizontal" Spacing="6">
+                                <FontIcon Glyph="&#xE710;" FontSize="12"/>
+                                <TextBlock x:Name="AddWidgetText" Text="Add Widget" VerticalAlignment="Center"/>
+                            </StackPanel>
+                        </Button>
                     </StackPanel>
                 </Grid>
                 <StackPanel x:Name="SectionsPanel" Spacing="4"/>