inter-hub-haskell/Web/View/AnnotationThreads/Index.hs

module Web.View.AnnotationThreads.Index where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude
import Web.Routes ()

data IndexView = IndexView
    { widget         :: !Widget
    , threads        :: ![AnnotationThread]
    , allAnnotations :: ![Annotation]
    }

instance View IndexView where
    html IndexView { .. } = [hsx|
        <div class="mb-6 flex items-center gap-2 text-sm text-gray-500">
            <a href={WidgetsAction} class="hover:text-gray-700">Widgets</a>
            <span>/</span>
            <a href={ShowWidgetAction (widget.id)} class="hover:text-gray-700">{widget.name}</a>
            <span>/</span>
            <span>Threads</span>
        </div>

        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-semibold">Annotation Threads</h1>
            <a href={NewAnnotationThreadAction (widget.id)}
               class="bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded hover:bg-indigo-700">
                New Thread
            </a>
        </div>

        {renderThreadsSection threads allAnnotations}
    |]

renderThreadsSection :: [AnnotationThread] -> [Annotation] -> Html
renderThreadsSection [] _ = [hsx|<p class="text-sm text-gray-500">No threads yet.</p>|]
renderThreadsSection threads allAnnotations = [hsx|
    <div class="space-y-3">
        {forEach threads (renderThreadRow allAnnotations)}
    </div>
|]

renderThreadRow :: [Annotation] -> AnnotationThread -> Html
renderThreadRow allAnnotations t =
    let members   = filter (\a -> a.threadId == Just t.id) allAnnotations
        count     = length members
        severityBreakdown = buildSeverityBreakdown members
    in [hsx|
    <div class="bg-white rounded-lg border border-gray-200 px-5 py-4">
        <div class="flex items-start justify-between">
            <div>
                <a href={ShowAnnotationThreadAction (t.id)}
                   class="font-medium text-indigo-600 hover:text-indigo-800">
                    {t.title}
                </a>
                {maybe mempty renderThreadDesc t.description}
            </div>
            <span class="text-xs text-gray-400 ml-4 whitespace-nowrap">{show t.createdAt}</span>
        </div>
        <div class="mt-3 flex items-center gap-3 text-xs text-gray-500">
            <span>{show count} annotation(s)</span>
            {renderSeverityBreakdown severityBreakdown}
        </div>
    </div>
|]

renderThreadDesc :: Text -> Html
renderThreadDesc d = [hsx|<p class="text-sm text-gray-500 mt-1">{d}</p>|]

buildSeverityBreakdown :: [Annotation] -> [(Text, Int)]
buildSeverityBreakdown annotations =
    [ ("low",      length $ filter (\a -> a.severity == "low")      annotations)
    , ("medium",   length $ filter (\a -> a.severity == "medium")   annotations)
    , ("high",     length $ filter (\a -> a.severity == "high")     annotations)
    , ("critical", length $ filter (\a -> a.severity == "critical") annotations)
    ]

renderSeverityBreakdown :: [(Text, Int)] -> Html
renderSeverityBreakdown pairs = [hsx|
    <span class="flex items-center gap-1">
        {forEach (filter (\(_, n) -> n > 0) pairs) renderSeverityPip}
    </span>
|]

renderSeverityPip :: (Text, Int) -> Html
renderSeverityPip (sev, n) = [hsx|
    <span class={severityClass sev <> " text-xs px-1.5 py-0.5 rounded"}>
        {sev}: {show n}
    </span>
|]

severityClass :: Text -> Text
severityClass "low"      = "bg-gray-100 text-gray-500"
severityClass "medium"   = "bg-blue-100 text-blue-700"
severityClass "high"     = "bg-yellow-100 text-yellow-800"
severityClass "critical" = "bg-red-100 text-red-800 font-semibold"
severityClass _          = "bg-gray-100 text-gray-500"