added components Badge, TypeTitle, migrated existing code accordingly

src/components/type/Functions.astro

@@ -5,7 +5,8 @@ import type {
 } from "@config/io/types";
 import { getQMLTypeLink } from "@config/io/helpers";
 import { Tag } from "@icons";
-import TypeDetails from "./TypeDetails.astro"
+import TypeDetails from "./TypeDetails.astro";
+import TypeTitle from "./TypeTitle.astro";
 
 export interface Props {
   funcData: QuickshellFunction[];
@@ -16,17 +17,21 @@ const { funcData } = Astro.props;
 <ul class="typedata typefuncs">
   {
     funcData.map(item => {
-      const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : null
+      const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : undefined
       const retTypeLink = getQMLTypeLink(item.ret as unknown as QMLTypeLinkObject)
+      let genericType:string|undefined;
+      let genericTypeLink:string|undefined;
       return (
         <li id={item.name} class="typedata-root typefunc-root">
-          <p class="typedata-name typefunc-name">
-      {item.name}(<span class="typedata-param">{functionParams}</span>)
-      <span class="type-datatype">:&nbsp;<a
-                href={retTypeLink}
-                target="_blank"
-                >{item.ret.name || item.ret.type}</a></span>
-          </p>
+          <TypeTitle
+            typekind="func"
+            typename={item.name}
+            typelink={retTypeLink}
+            typelink_text={item.ret.name || item.ret.type.toString()}
+            typename_generic={genericType}
+            typelink_generic={genericTypeLink}
+            typedata_params={functionParams}
+          />
           {
             item.params.length > 0 ? (
               <p class="typedata-params typefunc-params">

src/components/type/Properties.astro

@@ -5,6 +5,7 @@ import type {
   QuickshellProps,
 } from "@config/io/types";
 import { Tag, Flag } from "@icons";
+import TypeTitle from "./TypeTitle.astro";
 
 import TypeDetails from "./TypeDetails.astro";
 
@@ -37,34 +38,15 @@ const { propsKeys, propsData } = Astro.props;
       }
       return (
         <li id={ item } class="typedata-root typeprop-root">
-          <div class="typedata-title typeprop-title">
-            <section class="typedata-name typeprop-name">
-            <Tag client:idle/>
-            { item }<span class="type-datatype">:&nbsp;<a
-              href={typeLink}
-            >{ linkText }</a>{genericType &&
-            (<span class="type-datatype">&lt;</span><a
-              href={genericTypeLink}>{genericType}</a
-              ><span class="type-datatype">&gt;</span>
-            )}</span>
-            </section>
-            {
-              propData.flags && propData.flags.length > 0 ? (
-                <p class="type-flags">
-                  {
-                    propData.flags.map((flag) => {
-                      return (
-                        <span class="type-flag">
-                          <Flag client:idle/>
-                          {flag}
-                        </span>
-                      )
-                    })
-                  }
-                </p>
-              ) : null
-            }
-          </div>
+          <TypeTitle
+            typekind="prop"
+            typename={item}
+            typelink={typeLink}
+            typelink_text={linkText}
+            typename_generic={genericType}
+            typelink_generic={genericTypeLink}
+            badges={propData.flags}
+          />
           {
             gadget ? (
               <p class="typedata-params typefunc-params">

src/components/type/Signals.astro

@@ -2,6 +2,7 @@
 import type { QuickshellSignal } from "@config/io/types";
 import { Tag, PowerCord } from "@icons";
 import TypeDetails from "./TypeDetails.astro";
+import TypeTitle from "./TypeTitle.astro";
 
 export interface Props {
   signalKeys: string[];
@@ -15,15 +16,19 @@ const { signalKeys, signalsData } = Astro.props;
     signalKeys.map(item => {
       const signalData = signalsData[item];
       const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
+      let genericType:string|undefined;
+      let genericTypeLink:string|undefined;
       return (
         <li id={ item } class="typedata-root typesignal-root">
-          <p class="typedata-name typesignal-name">
-            <PowerCord client:idle/>
-              { item }(<span class="typedata-param">{paramKeys}</span>)<span class="typesignal-doclink"><a
-              href="/docs/configuration/qml-overview#-signals"
-              target="_blank"
-            >?</a></span>
-          </p>
+          <TypeTitle
+            typekind="signal"
+            typename={item}
+            typelink="/docs/configuration/qml-overview#-signals"
+            typelink_text={"?"}
+            typename_generic={genericType}
+            typelink_generic={genericTypeLink}
+            typedata_params={paramKeys}
+          />
           {
             signalData.params && signalData.params.length > 0 ? (
               <p class="typedata-params typesignal-params">

src/components/type/TypeTitle.astro

@@ -0,0 +1,57 @@
+---
+import { Icon } from "astro-icon/components";
+import Badge from "@components/Badge.astro";
+
+export interface Props {
+  typekind: string;
+  typename: string;
+  typelink: string;
+  typelink_text: string;
+  typename_generic?: string;
+  typelink_generic?: string;
+  badges?: string[];
+  typedata_params?: string[];
+}
+
+const {
+  typekind,
+  typename,
+  typelink,
+  typelink_text,
+  typename_generic,
+  typelink_generic,
+  badges,
+  typedata_params,
+} = Astro.props;
+
+const iconSelector: { [key: string]: string } = {
+  prop: "tag",
+  func: "roundbrackets",
+  signal: "powercord",
+  variant: "fourdiamonds",
+};
+---
+<div class={`typedata-title type${typekind}-title`}>
+  <section class={`typedata-name type${typekind}-name`}>
+    {typekind !== "func" && <Icon name={iconSelector[typekind]}/>}
+    <span>{ typename }{ (typekind === "func" || typekind === "signal") ?
+      (<span>(</span><span class="typedata-param">{typedata_params}</span><span>)</span>)
+      :""}
+    </span>
+    { typekind !== "variant" &&
+    <span class=`type-datatype ${typekind === "signal" && "typesignal-doclink"}`>{typekind !== "signal" &&":"}&nbsp;
+      <a href={typelink}>{ typelink_text }</a>
+      {typename_generic &&
+        (
+          <span class="type-datatype">&lt;</span><a href={typelink_generic}>{typename_generic}</a><span class="type-datatype">&gt;</span>
+        )
+      }
+    </span>
+    }
+  </section>
+  <section class="type-badges">
+    {badges && badges.length > 0 ? (
+      badges.map(badgeText => <Badge badgeText={badgeText}/>)
+    ) : null}
+  </section>
+</div>

src/components/type/Variants.astro

@@ -2,6 +2,7 @@
 import type { QuickshellVariant } from "@config/io/types";
 import { FourDiamonds } from "../icons";
 import TypeDetails from "./TypeDetails.astro";
+import TypeTitle from "./TypeTitle.astro";
 
 export interface Props {
   variantKeys: string[];
@@ -19,10 +20,12 @@ const { variantKeys, variantsData } = Astro.props;
         : [];
       return (
         <li id={ item } class="typedata-root typevariant-root">
-          <p class="typedata-name typevariant-name">
-            <FourDiamonds client:idle/>
-          { item }
-          </p>
+          <TypeTitle 
+            typekind="variant"
+            typename={item}
+            typelink=""
+            typelink_text=""
+          />
           {
             paramKeys ? (
               <div class="typedata-params typevariant-params">