From 089dc73abe12572c718595815eb1677b13df3b19 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 18:01:48 +0300
Subject: [PATCH] feat(StatusIndicator): Label wrapper for status display

---
 .../StatusIndicator.stories.svelte            | 80 +++++++++++++++++++
 .../ui/StatusIndicator/StatusIndicator.svelte | 45 +++++++++++
 2 files changed, 125 insertions(+)
 create mode 100644 src/shared/ui/StatusIndicator/StatusIndicator.stories.svelte
 create mode 100644 src/shared/ui/StatusIndicator/StatusIndicator.svelte

diff --git a/src/shared/ui/StatusIndicator/StatusIndicator.stories.svelte b/src/shared/ui/StatusIndicator/StatusIndicator.stories.svelte
new file mode 100644
index 0000000..95ecb23
--- /dev/null
+++ b/src/shared/ui/StatusIndicator/StatusIndicator.stories.svelte
@@ -0,0 +1,80 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import StatusIndicator from './StatusIndicator.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/StatusIndicator',
+    component: StatusIndicator,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Coloured dot with optional label. Dot can pulse for live states.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        status: {
+            control: 'select',
+            options: ['active', 'inactive', 'warning', 'error'],
+            description: 'Status type',
+        },
+        label: {
+            control: 'text',
+            description: 'Optional label text',
+        },
+        pulse: {
+            control: 'boolean',
+            description: 'Enable pulsing animation',
+            defaultValue: false,
+        },
+    },
+});
+</script>
+
+<Story
+    name="Active status"
+    args={{ status: 'active', label: 'Active' }}
+>
+    {#snippet template()}
+        <StatusIndicator status="active" label="Active" />
+    {/snippet}
+</Story>
+
+<Story
+    name="Inactive status"
+    args={{ status: 'inactive', label: 'Inactive' }}
+>
+    {#snippet template()}
+        <StatusIndicator status="inactive" label="Inactive" />
+    {/snippet}
+</Story>
+
+<Story
+    name="Warning status"
+    args={{ status: 'warning', label: 'Warning' }}
+>
+    {#snippet template()}
+        <StatusIndicator status="warning" label="Warning" />
+    {/snippet}
+</Story>
+
+<Story
+    name="Error status"
+    args={{ status: 'error', label: 'Error' }}
+>
+    {#snippet template()}
+        <StatusIndicator status="error" label="Error" />
+    {/snippet}
+</Story>
+
+<Story
+    name="With pulse"
+    args={{ status: 'active', label: 'Connected', pulse: true }}
+>
+    {#snippet template()}
+        <StatusIndicator status="active" label="Connected" pulse={true} />
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/StatusIndicator/StatusIndicator.svelte b/src/shared/ui/StatusIndicator/StatusIndicator.svelte
new file mode 100644
index 0000000..3b32a14
--- /dev/null
+++ b/src/shared/ui/StatusIndicator/StatusIndicator.svelte
@@ -0,0 +1,45 @@
+<!--
+    Component: StatusIndicator
+    Coloured dot with optional label. Dot can pulse for live states.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { Label } from '$shared/ui';
+
+type Status = 'active' | 'inactive' | 'warning' | 'error';
+
+const statusConfig: Record<Status, string> = {
+    active: 'bg-green-500',
+    inactive: 'bg-neutral-400',
+    warning: 'bg-yellow-500',
+    error: 'bg-brand',
+};
+
+interface Props {
+    status: Status;
+    label?: string;
+    pulse?: boolean;
+    class?: string;
+}
+
+let {
+    status,
+    label,
+    pulse = false,
+    class: className,
+}: Props = $props();
+</script>
+
+<div class={cn('flex items-center gap-2', className)}>
+    <span
+        class={cn(
+            'w-1.5 h-1.5 rounded-full',
+            statusConfig[status],
+            pulse && 'animate-pulse',
+        )}
+    ></span>
+
+    {#if label}
+        <Label variant="muted" size="xs">{label}</Label>
+    {/if}
+</div>