Block Kit improvements

apps/ui/src/app.css

@@ -392,13 +392,13 @@
   border-radius: 3px;
 }
 
-.mrkdwn .s-emoji {
+.mrkdwn .c-emoji {
   font-style: normal;
   position: relative;
   cursor: default;
 }
 
-.mrkdwn .s-emoji-tip {
+.mrkdwn .c-emoji__tooltip {
   visibility: hidden;
   opacity: 0;
   position: absolute;
@@ -422,7 +422,7 @@
   z-index: 10;
 }
 
-.mrkdwn .s-emoji-tip::after {
+.mrkdwn .c-emoji__tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
@@ -432,17 +432,17 @@
   border-top-color: #38393d;
 }
 
-.mrkdwn .s-emoji-big {
-  font-size: 48px;
+.mrkdwn .c-emoji__tooltip-big {
+  font-size: 64px;
   line-height: 1.2;
 }
 
-.mrkdwn .s-emoji-code {
+.mrkdwn .c-emoji__tooltip-code {
   font-size: 12px;
   color: #ababad;
 }
 
-.mrkdwn .s-emoji:hover .s-emoji-tip {
+.mrkdwn .c-emoji:hover .c-emoji__tooltip {
   visibility: visible;
   opacity: 1;
 }

apps/ui/src/components/blockkit/BlockKitRenderer.svelte

@@ -68,46 +68,55 @@
   }
 </script>
 
-<div class="flex flex-col">
+<div class="p-block_kit_renderer">
   {#each blocks as block, index (getBlockId(block, index))}
-    {#if block.type === 'section'}
-      <SectionBlock block={block as SlackSectionBlock} {onAction} />
-    {:else if block.type === 'input'}
-      <InputBlock
-        block={block as SlackInputBlock}
-        blockId={getBlockId(block, index)}
-        {values}
-        {fileValues}
-        {onInputChange}
-        {onFileChange}
-        {onCheckboxChange}
-        {onRadioChange}
-      />
-    {:else if block.type === 'actions'}
-      <ActionsBlock block={block as SlackActionsBlock} {onAction} />
-    {:else if block.type === 'divider'}
-      <DividerBlock />
-    {:else if block.type === 'context'}
-      <ContextBlock block={block as SlackContextBlock} />
-    {:else if block.type === 'image'}
-      <ImageBlock block={block as SlackImageBlock} {onImagePreview} />
-    {:else if block.type === 'header'}
-      <HeaderBlock block={block as SlackHeaderBlock} />
-    {:else if block.type === 'rich_text'}
-      <RichTextBlock block={block as SlackRichTextBlock} />
-    {:else if block.type === 'table'}
-      <TableBlock block={block as SlackTableBlock} />
-    {:else if block.type === 'context_actions'}
-      <ContextActionsBlock
-        block={block as SlackContextActionsBlock}
-        {onAction}
-      />
-    {:else}
-      <!-- Unknown block type -->
-      {@const unknownBlock = block as { type: string }}
-      <div class="text-xs text-slack-text-muted italic">
-        Unknown block type: {unknownBlock.type}
-      </div>
-    {/if}
+    <div class="p-block_kit_renderer__block_wrapper">
+      {#if block.type === 'section'}
+        <SectionBlock block={block as SlackSectionBlock} {onAction} />
+      {:else if block.type === 'input'}
+        <InputBlock
+          block={block as SlackInputBlock}
+          blockId={getBlockId(block, index)}
+          {values}
+          {fileValues}
+          {onInputChange}
+          {onFileChange}
+          {onCheckboxChange}
+          {onRadioChange}
+        />
+      {:else if block.type === 'actions'}
+        <ActionsBlock block={block as SlackActionsBlock} {onAction} />
+      {:else if block.type === 'divider'}
+        <DividerBlock />
+      {:else if block.type === 'context'}
+        <ContextBlock block={block as SlackContextBlock} />
+      {:else if block.type === 'image'}
+        <ImageBlock block={block as SlackImageBlock} {onImagePreview} />
+      {:else if block.type === 'header'}
+        <HeaderBlock block={block as SlackHeaderBlock} />
+      {:else if block.type === 'rich_text'}
+        <RichTextBlock block={block as SlackRichTextBlock} />
+      {:else if block.type === 'table'}
+        <TableBlock block={block as SlackTableBlock} />
+      {:else if block.type === 'context_actions'}
+        <ContextActionsBlock
+          block={block as SlackContextActionsBlock}
+          {onAction}
+        />
+      {:else}
+        <!-- Unknown block type -->
+        {@const unknownBlock = block as { type: string }}
+        <div class="text-xs text-slack-text-muted italic">
+          Unknown block type: {unknownBlock.type}
+        </div>
+      {/if}
+    </div>
   {/each}
 </div>
+
+<style>
+  .p-block_kit_renderer {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte

@@ -29,74 +29,83 @@
   let { block, onAction }: Props = $props()
 </script>
 
-<div class="flex flex-wrap gap-2 items-start max-w-[620px]">
-  {#each block.elements as element, i (i)}
-    {#if element.type === 'button'}
-      <Button element={element as SlackButtonElement} onClick={onAction} />
-    {:else if element.type === 'static_select'}
-      {@const sel = element as SlackStaticSelectElement}
-      <StaticSelect
-        element={sel}
-        compact
-        onChange={(value) => onAction?.(sel.action_id, value)}
-      />
-    {:else if element.type === 'users_select' || element.type === 'conversations_select' || element.type === 'channels_select' || element.type === 'external_select' || element.type === 'multi_users_select' || element.type === 'multi_conversations_select' || element.type === 'multi_channels_select' || element.type === 'multi_external_select'}
-      {@const ws = element as SlackWorkspaceSelectElement}
-      <WorkspaceSelect
-        placeholder={ws.placeholder}
-        compact
-        onChange={(value) => onAction?.(ws.action_id, value)}
-      />
-    {:else if element.type === 'overflow'}
-      {@const ovf = element as SlackOverflowElement}
-      <OverflowMenu
-        element={ovf}
-        onSelect={(option) => onAction?.(ovf.action_id, option.value)}
-      />
-    {:else if element.type === 'radio_buttons'}
-      {@const radio = element as SlackRadioButtonsElement}
-      <div class="w-full pt-2">
-        <RadioButtonGroup
-          element={radio}
-          onChange={(option) => onAction?.(radio.action_id, option.value)}
-        />
+<div class="p-actions_block">
+  <div class="p-actions_block_elements">
+    {#each block.elements as element, i (i)}
+      <div class="p-actions_block__action">
+        {#if element.type === 'button'}
+          <Button element={element as SlackButtonElement} onClick={onAction} />
+        {:else if element.type === 'static_select'}
+          {@const sel = element as SlackStaticSelectElement}
+          <StaticSelect
+            element={sel}
+            compact
+            onChange={(value) => onAction?.(sel.action_id, value)}
+          />
+        {:else if element.type === 'users_select' || element.type === 'conversations_select' || element.type === 'channels_select' || element.type === 'external_select' || element.type === 'multi_users_select' || element.type === 'multi_conversations_select' || element.type === 'multi_channels_select' || element.type === 'multi_external_select'}
+          {@const ws = element as SlackWorkspaceSelectElement}
+          <WorkspaceSelect placeholder={ws.placeholder} compact />
+        {:else if element.type === 'overflow'}
+          {@const ovf = element as SlackOverflowElement}
+          <OverflowMenu
+            element={ovf}
+            onSelect={(option) => onAction?.(ovf.action_id, option.value)}
+          />
+        {:else if element.type === 'radio_buttons'}
+          {@const radio = element as SlackRadioButtonsElement}
+          <RadioButtonGroup
+            element={radio}
+            onChange={(option) => onAction?.(radio.action_id, option.value)}
+          />
+        {:else if element.type === 'checkboxes'}
+          {@const cb = element as SlackCheckboxesElement}
+          <Checkboxes
+            element={cb}
+            selectedOptions={undefined}
+            onChange={(options) =>
+              onAction?.(
+                cb.action_id,
+                JSON.stringify(
+                  options.map((o) => ({ text: o.text, value: o.value }))
+                )
+              )}
+          />
+        {:else if element.type === 'datepicker'}
+          {@const dp = element as SlackDatePickerElement}
+          <DatePicker
+            element={dp}
+            compact
+            onChange={(val) => onAction?.(dp.action_id, val)}
+          />
+        {:else if element.type === 'timepicker'}
+          {@const tp = element as SlackTimePickerElement}
+          <TimePicker
+            element={tp}
+            compact
+            onChange={(val) => onAction?.(tp.action_id, val)}
+          />
+        {:else if element.type === 'datetimepicker'}
+          {@const dtp = element as SlackDateTimePickerElement}
+          <DateTimePicker
+            element={dtp}
+            compact
+            onChange={(val) => onAction?.(dtp.action_id, val)}
+          />
+        {/if}
       </div>
-    {:else if element.type === 'checkboxes'}
-      {@const cb = element as SlackCheckboxesElement}
-      <div class="w-full pt-2">
-        <Checkboxes
-          element={cb}
-          selectedOptions={undefined}
-          onChange={(options) =>
-            onAction?.(
-              cb.action_id,
-              JSON.stringify(
-                options.map((o) => ({ text: o.text, value: o.value }))
-              )
-            )}
-        />
-      </div>
-    {:else if element.type === 'datepicker'}
-      {@const dp = element as SlackDatePickerElement}
-      <DatePicker
-        element={dp}
-        compact
-        onChange={(val) => onAction?.(dp.action_id, val)}
-      />
-    {:else if element.type === 'timepicker'}
-      {@const tp = element as SlackTimePickerElement}
-      <TimePicker
-        element={tp}
-        compact
-        onChange={(val) => onAction?.(tp.action_id, val)}
-      />
-    {:else if element.type === 'datetimepicker'}
-      {@const dtp = element as SlackDateTimePickerElement}
-      <DateTimePicker
-        element={dtp}
-        compact
-        onChange={(val) => onAction?.(dtp.action_id, val)}
-      />
-    {/if}
-  {/each}
+    {/each}
+  </div>
 </div>
+
+<style>
+  .p-actions_block_elements {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    max-width: 620px;
+  }
+
+  .p-actions_block__action {
+    margin: 8px 8px 0 0;
+  }
+</style>

apps/ui/src/components/blockkit/blocks/ContextActionsBlock.svelte

@@ -18,7 +18,7 @@
   }
 </script>
 
-<div class="flex items-center gap-1 my-1">
+<div class="p-context_actions">
   {#each block.elements as element, i (i)}
     {#if element.type === 'feedback_buttons'}
       {@const fb = element as SlackFeedbackButtonsElement}
@@ -58,6 +58,13 @@
 </div>
 
 <style>
+  .p-context_actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 4px 0;
+  }
+
   .context-action-btn {
     display: inline-flex;
     align-items: center;

apps/ui/src/components/blockkit/blocks/HeaderBlock.svelte

@@ -9,6 +9,6 @@
   let { block }: Props = $props()
 </script>
 
-<h2 class="text-lg font-semibold text-slack-text">
+<h2 class="text-xl font-semibold text-slack-text">
   {renderText(block.text)}
 </h2>

apps/ui/src/components/blockkit/blocks/InputBlock.svelte

@@ -173,10 +173,7 @@
     />
   {:else if block.element.type === 'users_select' || block.element.type === 'conversations_select' || block.element.type === 'channels_select' || block.element.type === 'external_select' || block.element.type === 'multi_users_select' || block.element.type === 'multi_conversations_select' || block.element.type === 'multi_channels_select' || block.element.type === 'multi_external_select'}
     {@const ws = block.element as SlackWorkspaceSelectElement}
-    <WorkspaceSelect
-      placeholder={ws.placeholder}
-      onChange={(value) => onInputChange?.(blockId, ws.action_id, value)}
-    />
+    <WorkspaceSelect placeholder={ws.placeholder} />
   {/if}
 
   {#if block.hint}