feat(web): enhance ui interactions and improve code quality (#2078)

This PR enhances the web interface with improved keyboard navigation and
modal interactions, strengthens type safety by migrating from Svelte's
on:click to onclick handlers, fixes message count calculation in
partition view, adds the missing max_topic_size field to topic schema,
and removes unused imports for cleaner code organization.

Author: piotrziolko

web/package-lock.json

@@ -51,7 +51,7 @@ export function tooltip(
   let cleanup: VoidFunction | undefined;
 
   const unsub = openId.subscribe((val) => (val === id ? showTooltip() : hideTooltip()));
-  const openTooltip = () => openId.set(id);
+
   const closeTooltip = () => openId.set(null);
   const toggleOpen = () => openId.update((val) => (val === id ? null : id));
 

web/src/lib/actions/tooltip.ts

@@ -137,6 +137,7 @@ type Topics =
         name: string;
         message_expiry: number;
         compression_algorithm: number;
+        max_topic_size: number;
       };
     }
   | {

web/src/lib/api/ApiSchema.ts

@@ -1,6 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
-<!-- // TODO: check it - Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
   import { tooltip } from '$lib/actions/tooltip';
   import type { Placement } from '@floating-ui/dom';
@@ -33,49 +30,39 @@
     xl: 'px-7 py-4 text-lg'
   };
 
-  interface $$Props extends HTMLButtonAttributes {
+  interface Props extends HTMLButtonAttributes {
     variant: keyof typeof variants;
     tooltipPlacement?: Placement;
     size?: keyof typeof sizes;
     class?: string;
+    children?: import('svelte').Snippet;
+    tooltip?: import('svelte').Snippet;
   }
 
-  export let variant: keyof typeof variants;
-  export let tooltipPlacement: Placement = 'right';
-  export let size: keyof typeof sizes = 'md';
-  let className = '';
-  export { className as class };
+  let { 
+    variant, 
+    tooltipPlacement = 'right', 
+    size = 'md', 
+    class: className = '',
+    children,
+    tooltip: tooltipSnippet,
+    onclick,
+    ...restProps 
+  }: Props = $props();
 </script>
 
-<!-- <div use:tooltip={{ placement: tooltipPlacement }} class="w-full">
-  <button
-    on:click
-    data-trigger
-    class={twMerge(baseClasses, disabledClasses, variants[variant], sizes[size], className)}
-    {...$$restProps}
-  >
-    <slot />
-  </button>
-
-  {#if $$slots.tooltip}
-    <div role="tooltip" class="tooltip">
-      <slot name="tooltip" />
-    </div>
-  {/if}
-</div> -->
-
 <button
-  on:click
+  {onclick}
   data-trigger
   use:tooltip={{ placement: tooltipPlacement, isTrigger: true }}
   class={twMerge(baseClasses, variants[variant], sizes[size], disabledClasses, className, ' ')}
-  {...$$restProps}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 
-  {#if $$slots.tooltip}
+  {#if tooltipSnippet}
     <div role="tooltip" class="tooltip ring-bl">
-      <slot name="tooltip" />
+      {@render tooltipSnippet()}
     </div>
   {/if}
 </button>

web/src/lib/components/Button.svelte

@@ -12,6 +12,7 @@
     name?: string | undefined;
     bindGroup?: string[] | undefined;
     disabled?: boolean;
+    onclick?: (e: Event) => void;
   }
 
   let {
@@ -20,7 +21,8 @@
     id = '',
     name = undefined,
     bindGroup = $bindable(undefined),
-    disabled = false
+    disabled = false,
+    onclick
   }: Props = $props();
 
   function onChange(e: Event) {
@@ -47,6 +49,7 @@
     {id}
     {disabled}
     onchange={handlers(onChange, bubble('change'))}
+    onclick={onclick}
     onmousedown={() => (isMouseDown = true)}
     onmouseup={() => (isMouseDown = false)}
     onmouseleave={() => (isMouseDown = false)}

web/src/lib/components/Checkbox.svelte

@@ -67,7 +67,7 @@
 
 <div class="flex flex-col gap-2">
   {#if label}
-    <label class="text-sm ml-1 text-color">
+    <label for="combobox-input" class="text-sm ml-1 text-color">
       {label}
     </label>
   {/if}
@@ -77,6 +77,7 @@
       class="rounded-md dark:bg-shadeD400 ring-1 text-color ring-gray-300 dark:ring-gray-500 flex items-center h-[40px] text-color relative focus-within:ring-2 focus-within:ring-gray-400 transition group"
     >
       <input
+        id="combobox-input"
         use:combobox.input
         onselect={(e) => {
           selectedValue = noTypeCheck(e).detail.selected;

web/src/lib/components/Combobox.svelte

@@ -31,13 +31,13 @@
 </script>
 
 <div bind:this={wrapperRef} use:tooltip={{ placement: 'top' }}>
-  <Button variant="containedRed" on:click={() => (isTooltipOpen = true)}>Delete</Button>
+  <Button variant="containedRed" onclick={() => (isTooltipOpen = true)}>Delete</Button>
 
   <div class="tooltip">
     <div class="flex flex-col gap-4 items-center justify-center p-2">
       <span>Are you sure? </span>
       <div class="flex flex-row gap-2">
-        <Button variant="text" type="button" on:click={() => (isTooltipOpen = false)} size="sm"
+        <Button variant="text" type="button" onclick={() => (isTooltipOpen = false)} size="sm"
           >No</Button
         >
         <Button

web/src/lib/components/DeleteButtonWithConfirmation.svelte

@@ -36,7 +36,7 @@
   <div class="px-1 py-1">
     {#each group as { action, icon, className, label }}
       <button
-        on:click={() => {
+        onclick={() => {
           if (action) {
             action(() => tooltipRef.dispatchEvent(new Event('closeTooltip')));
           }

web/src/lib/components/DropdownMenu/DropdownMenu.svelte

@@ -1,65 +1,3 @@
-<!-- <script lang="ts">
-  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-  import { twMerge } from 'tailwind-merge';
-  import type { iconType } from './Icon.svelte';
-  import Icon from './Icon.svelte';
-
-  interface $$Props extends HTMLInputAttributes {
-    name: string;
-    id?: string;
-    label?: string;
-    value: string | number;
-    errorMessage?: string;
-    type?: HTMLInputTypeAttribute;
-  }
-
-  export let name: string;
-  export let id: string = crypto.randomUUID();
-  export let leadingIcon: iconType | undefined = undefined;
-  export let label: string | undefined = undefined;
-  export let value: string | number;
-  export let type: HTMLInputTypeAttribute = 'text';
-</script>
-
-<div class="flex flex-col gap-1">
-  {#if label}
-    <label for={id} class="text-sm ml-1 text-color">
-      {label}
-    </label>
-  {/if}
-
-  <div
-    class={twMerge(
-      'rounded-md border border-gray-300 dark:border-none outline-none dark:bg-shadeD400 text-color px-3 w-full relative',
-      error && 'border-red-600 text-red-600 border-none outline-red-600',
-      leadingIcon && 'pl-8',
-      $$restProps.class
-    )}
-  >
-    {#if leadingIcon}
-      <Icon
-        name={leadingIcon}
-        className="absolute text-gray-400 left-2 top-1/2 -translate-y-1/2 w-[18px]"
-      />
-    {/if}
-
-    <input
-      bind:value
-      {...$$restProps}
-      autocomplete="off"
-      {id}
-      {name}
-      class="w-full h-full bg-transparent py-2 outline-none"
-    />
-  </div>
-
-  {#if errorMe}
-    <span class="text-red-600 text-xs ml-1 mt-1">
-      {error}
-    </span>
-  {/if}
-</div> -->
-
 <script lang="ts">
   import { createBubbler } from 'svelte/legacy';
 

web/src/lib/components/Input.svelte

@@ -51,7 +51,7 @@
 </div>
 
 <div class="flex gap-12 border-b px-10">
-  {#each tabs as { icon, name, tab, href }, idx (idx)}
+  {#each tabs as { icon, name, href }, idx (idx)}
     {@const isActive = activeTab === href.split('/').slice(-1)[0]}
     <a
       {href}