update widgets

src/app/auth/onboarding/step-3.tsx

@@ -118,10 +118,11 @@ export function OnboardStep3Screen() {
               <LoaderIcon className="h-4 w-4 animate-spin text-white" />
             </div>
           ) : relaysAsArray.length === 0 ? (
-            <div className="flex h-full w-full items-center justify-center">
+            <div className="flex h-full w-full items-center justify-center px-6">
               <p className="text-center text-white/50">
-                Can&apos;t found any relays, you can skip this step and use default relays
-                instead
+                Lume couldn&apos;t find any relays from your follows.
+                <br />
+                You can skip this step and use default relays instead.
               </p>
             </div>
           ) : (
@@ -145,7 +146,7 @@ export function OnboardStep3Screen() {
             ))
           )}
           {relays.size > 5 && (
-            <div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl backdrop-blur-xl">
+            <div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl">
               <p className="text-sm text-orange-400">
                 Using too much relay can cause high resource usage
               </p>

src/app/space/components/widgetList.tsx

@@ -25,11 +25,12 @@ export function WidgetList({ params }: { params: Widget }) {
       return (
         <div className="flex flex-col gap-3">
           <h3 className="font-medium text-white/50">{row.title}</h3>
-          <div className="grid grid-cols-3 gap-6">
+          <div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
             {row.data.map((item, index) => (
               <button onClick={() => openWidget(item)} key={index}>
-                <div className="inline-flex aspect-square h-full w-full transform-gpu flex-col items-center justify-center gap-2.5 rounded-2xl bg-white/5 hover:bg-white/10">
-                  <h5 className="text-sm font-medium">{item.title}</h5>
+                <div className="inline-flex h-14 w-full flex-col items-start justify-center gap-1 px-4 hover:bg-white/10">
+                  <h5 className="font-medium leading-none">{item.title}</h5>
+                  <p className="text-xs leading-none text-white/50">{item.description}</p>
                 </div>
               </button>
             ))}
@@ -41,11 +42,27 @@ export function WidgetList({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden">
+    <div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden bg-white/10">
       <TitleBar id={params.id} title="Add widget" />
       <div className="flex flex-col gap-8 px-3">
         {DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
       </div>
+      <div className="mt-6 px-3">
+        <div className="border-t border-white/5 pt-6">
+          <button
+            type="button"
+            disabled
+            className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-white/5 text-sm font-medium text-white/50"
+          >
+            Build your own widget{' '}
+            <div className="-rotate-3 transform rounded-md bg-white/10 px-1.5 py-1">
+              <span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
+                Coming soon
+              </span>
+            </div>
+          </button>
+        </div>
+      </div>
     </div>
   );
 }

src/shared/composer/composer.tsx

@@ -125,7 +125,7 @@ export function Composer() {
             autoCapitalize="off"
             className={twMerge(
               'scrollbar-hide markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none',
-              expand ? 'min-h-[500px]' : 'min-h-[120px]'
+              expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]'
             )}
           />
           {reply.id && (

src/stores/widgets.ts

@@ -46,18 +46,22 @@ export const DefaultWidgets = [
       {
         kind: WidgetKinds.tmp.xfeed,
         title: 'Group feeds',
+        description: 'All posts from specific people you want to keep up with',
       },
       {
         kind: WidgetKinds.local.files,
         title: 'Files',
+        description: 'All files shared by people in your network',
       },
       {
         kind: WidgetKinds.local.articles,
         title: 'Articles',
+        description: 'All articles shared by people in your network',
       },
       {
         kind: WidgetKinds.local.follows,
         title: 'Follows',
+        description: 'All posts from people you are following',
       },
     ],
   },
@@ -67,27 +71,32 @@ export const DefaultWidgets = [
       {
         kind: WidgetKinds.tmp.xhashtag,
         title: 'Hashtag',
+        description: 'All posts have a specific hashtag',
       },
       {
         kind: WidgetKinds.global.files,
         title: 'Files',
+        description: 'All files shared by people in your current relay set',
       },
       {
         kind: WidgetKinds.global.articles,
         title: 'Articles',
+        description: 'All articles shared by people in your current relay set',
       },
     ],
   },
   {
-    title: 'Trending (nostr.band)',
+    title: 'nostr.band',
     data: [
       {
         kind: WidgetKinds.nostrBand.trendingAccounts,
         title: 'Accounts',
+        description: 'Trending accounts from the last 24 hours',
       },
       {
         kind: WidgetKinds.nostrBand.trendingNotes,
         title: 'Notes',
+        description: 'Trending notes from the last 24 hours',
       },
     ],
   },

src/utils/types.d.ts

@@ -44,6 +44,7 @@ export interface WidgetGroup {
 
 export interface WidgetGroupItem {
   title: string;
+  description: string;
   kind: number;
 }