fix: Usagemeter not defined error [P0]

apps/web/components/add-document/index.tsx

@@ -311,27 +311,54 @@ export function AddDocument({
 				</div>
 
 				{isMobile && (
-					<div className="mt-3 grid grid-cols-2 gap-2">
-						<UsageMeter
-							label="Credits"
-							value={
-								isLoadingUsage
-									? "…"
-									: `${tokensToCredits(tokensUsed)} / ${tokensToCredits(tokensLimit)}`
-							}
-							percent={tokensPercent}
-							active={hasPaidPlan}
-						/>
-						<UsageMeter
-							label="Searches"
-							value={
-								isLoadingUsage
+					<div className="mt-3 flex flex-col gap-2">
+						<div className="flex justify-between items-center">
+							<span
+								className={cn(
+									"text-[#FAFAFA] text-sm font-medium",
+									dmSansClassName(),
+								)}
+							>
+								Plan usage
+							</span>
+							<span
+								className={cn(
+									"text-sm font-medium tabular-nums",
+									hasPaidPlan ? "text-[#4BA0FA]" : "text-[#737373]",
+									dmSansClassName(),
+								)}
+							>
+								{isLoadingUsage
 									? "…"
-									: `${formatUsageNumber(searchesUsed)} / ${formatUsageNumber(searchesLimit)}`
-							}
-							percent={searchesPercent}
-							active={hasPaidPlan}
-						/>
+									: `${planUsagePct < 1 && planUsagePct > 0 ? "< 1" : Math.round(planUsagePct)}% used`}
+							</span>
+						</div>
+						<div className="h-2 w-full rounded-[40px] bg-[#2E353D] p-px overflow-hidden">
+							<div
+								className="h-full rounded-[40px]"
+								style={{
+									width: `${planUsagePct}%`,
+									background:
+										planUsagePct > 80
+											? "#ef4444"
+											: hasPaidPlan
+												? "linear-gradient(to right, #4BA0FA 80%, #002757 100%)"
+												: "#0054AD",
+								}}
+								title={`${formatUsageNumber(tokensUsed)} tokens · ${formatUsageNumber(searchesUsed)} queries`}
+							/>
+						</div>
+						{!isLoadingUsage && (
+							<p
+								className={cn(
+									"text-xs text-[#737373] tabular-nums",
+									dmSansClassName(),
+								)}
+							>
+								{formatUsageNumber(tokensUsed)} tokens ·{" "}
+								{formatUsageNumber(searchesUsed)} queries
+							</p>
+						)}
 					</div>
 				)}