inter-hub-haskell/Application/Helper/View.hs

module Application.Helper.View where

import IHP.ViewPrelude
import Generated.Types
import Web.Types

-- | Widget Envelope — wraps any widget's rendered content with IHF governance metadata.
--
-- Every interactive element that is part of the governed widget registry should
-- be wrapped with this helper. It injects the stable data-* attributes that the
-- client-side event capture script reads to identify the widget without coupling
-- to implementation details.
--
-- Usage:
--
-- @
-- widgetEnvelope widget [hsx|
--     <button>Click me</button>
-- |]
-- @
--
-- See docs/widget-envelope-convention.md for the full convention.
widgetEnvelope :: Widget -> Html -> Html
widgetEnvelope widget inner = [hsx|
    <div
        class="ihf-widget"
        data-widget-id={tshow widget.id}
        data-widget-type={widget.widgetType}
        data-hub-id={tshow widget.hubId}
        data-capability-ref={fromMaybe "" widget.capabilityRef}
        data-view-context={fromMaybe "" widget.viewContext}
        data-policy-scope={widget.policyScope}
        data-widget-version={tshow widget.version}
    >
        {inner}
        <div class="ihf-widget-controls mt-2">
            <a href={WidgetAnnotationsAction { widgetId = widget.id }}
               class="ihf-annotate-btn text-xs text-gray-400 hover:text-indigo-600 border border-gray-200
                      rounded px-2 py-0.5 hover:border-indigo-300">
                Annotate
            </a>
        </div>
    </div>
|]