Redesign limits indicator

packages/ui/src/components/Progress.svelte

@@ -24,6 +24,7 @@
   export let color: number | undefined = undefined
   export let editable = false
   export let fallback: number = 0
+  export let small: boolean = false
 
   $: proc = (max - min) / 100
   $: if (value > max) value = max
@@ -61,14 +62,17 @@
   let drag: boolean = false
 
   $: position = proc !== 0 ? Math.round((value - min) / proc) : fallback
+  $: barWidth = small
+    ? `calc(calc(100% - 0.5rem) * ${position} / 100 + .25rem)`
+    : `calc(calc(100% - 1rem) * ${position} / 100 + .5rem)`
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="container" class:editable on:click={click} on:mousemove={move} on:mouseleave={save} on:mouseup={save}>
   <div
     class="bar"
-    style:width={`calc(calc(100% - 1rem) * ${position} / 100 + .5rem)`}
+    style:width={barWidth}
     style:background-color={color !== undefined
       ? getPlatformColor(color, $themeStore.dark)
       : 'var(--theme-toggle-on-bg-color)'}

plugins/billing-resources/src/components/LimitsIndicator.svelte

@@ -16,8 +16,7 @@
   import { onDestroy, onMount } from 'svelte'
   import { checkWorkspaceLimits, upgradePlan, calculateLimits } from '../utils'
   import { subscriptionStore, resetSubscriptionStore } from '../stores/subscription'
-  import { location, tooltip } from '@hcengineering/ui'
-  import UsageProgressBar from './UsageProgressBar.svelte'
+  import { location, PaletteColorIndexes, Progress, tooltip } from '@hcengineering/ui'
   import UsagePopup from './UsagePopup.svelte'
 
   let pollInterval: number | undefined
@@ -43,6 +42,9 @@
   $: storagePercent = limits.storageLimit > 0 ? Math.min(storageUsed / limits.storageLimit, 1) : 0
   $: bandwidthPercent = limits.trafficLimit > 0 ? Math.min(trafficUsed / limits.trafficLimit, 1) : 0
 
+  $: storageColor = storagePercent >= 0.9 ? PaletteColorIndexes.Firework : undefined
+  $: bandwidthColor = bandwidthPercent >= 0.9 ? PaletteColorIndexes.Firework : undefined
+
   onMount(() => {
     // Initialize with current workspace
     currentWorkspace = workspace
@@ -101,12 +103,11 @@
   }}
   on:click={handleClick}
 >
-  <div class="limit-item">
-    <UsageProgressBar percent={storagePercent} height="5px" />
+  <div class="progress-wrapper">
+    <Progress color={storageColor} value={storageUsed} max={limits.storageLimit} fallback={0} small={true} />
   </div>
-
-  <div class="limit-item">
-    <UsageProgressBar percent={bandwidthPercent} height="5px" />
+  <div class="progress-wrapper">
+    <Progress color={bandwidthColor} value={trafficUsed} max={limits.trafficLimit} fallback={0} small={true} />
   </div>
 </button>
 
@@ -115,11 +116,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.125rem;
-    border-radius: var(--small-BorderRadius);
+    border-radius: var(--extra-small-BorderRadius);
     cursor: pointer;
     transition: background-color 0.2s ease;
-    padding: 0.25rem;
-    border: none;
+    padding: 0.188rem;
+    width: 1.75rem;
+    border: 1px solid var(--theme-trans-color);
     background: none;
     outline: none;
 
@@ -128,13 +130,8 @@
       background-color: var(--theme-button-hovered);
     }
   }
-  .limit-item {
-    display: flex;
-    align-items: center;
-    padding: 0.0625rem;
-    border-radius: var(--small-BorderRadius);
-    transition: background-color 0.2s ease;
-    position: relative;
-    border: 1px solid var(--theme-trans-color);
+
+  .progress-wrapper {
+    width: 100%;
   }
 </style>

plugins/billing-resources/src/components/UsageExtension.svelte

@@ -0,0 +1,21 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import LimitsIndicator from './LimitsIndicator.svelte'
+</script>
+
+<div class="px-2">
+  <LimitsIndicator />
+</div>

plugins/billing-resources/src/index.ts

@@ -16,12 +16,12 @@
 import type { Resources } from '@hcengineering/platform'
 import Settings from './components/Settings.svelte'
 import WorkbenchExtension from './components/WorkbenchExtension.svelte'
-import LimitsIndicator from './components/LimitsIndicator.svelte'
+import UsageExtension from './components/UsageExtension.svelte'
 
 export default async (): Promise<Resources> => ({
   component: {
     Settings,
-    UsageExtension: LimitsIndicator,
+    UsageExtension,
     WorkbenchExtension
   }
 })