wip: learn nostr widget

src/app/chats/components/item.tsx

@@ -27,7 +27,7 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
           'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
           isActive
             ? 'border-fuchsia-500 bg-white/5 text-white'
-            : 'border-transparent text-white/80'
+            : 'border-transparent text-white/70'
         )
       }
     >

src/app/space/components/widgetList.tsx

@@ -8,6 +8,7 @@ import {
   FollowsIcon,
   GroupFeedsIcon,
   HashtagIcon,
+  ThreadsIcon,
   TrendingIcon,
 } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
@@ -46,8 +47,10 @@ export function WidgetList({ params }: { params: Widget }) {
         case WidgetKinds.nostrBand.trendingAccounts:
         case WidgetKinds.nostrBand.trendingNotes:
           return <TrendingIcon className="h-5 w-4 text-white" />;
+        case WidgetKinds.other.learnNostr:
+          return <ThreadsIcon className="h-5 w-4 text-white" />;
         default:
-          return '';
+          return null;
       }
     },
     [DefaultWidgets]
@@ -94,25 +97,25 @@ export function WidgetList({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden bg-white/10">
+    <div className="relative h-full shrink-0 grow-0 basis-[400px] bg-white/10">
       <TitleBar id={params.id} title="Add widget" />
-      <div className="flex flex-col gap-6 px-3">
+      <div className="scrollbar-hide h-full overflow-y-auto pb-20">
-        {DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
+        <div className="flex flex-col gap-6 px-3">
-      </div>
+          {DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
-      <div className="mt-6 px-3">
+          <div className="border-t border-white/5 pt-6">
-        <div className="border-t border-white/5 pt-6">
+            <button
-          <button
+              type="button"
-            type="button"
+              disabled
-            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"
-            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{' '}
-            Build your own widget{' '}
+              <div className="-rotate-3 transform rounded-md border border-white/20 bg-white/10 px-1.5 py-1">
-            <div className="-rotate-3 transform rounded-md border border-white/20 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">
-              <span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
+                  Coming soon
-                Coming soon
+                </span>
-              </span>
+              </div>
-            </div>
+            </button>
-          </button>
+          </div>
         </div>
       </div>
     </div>

src/app/space/index.tsx

@@ -10,6 +10,7 @@ import {
   GlobalArticlesWidget,
   GlobalFilesWidget,
   GlobalHashtagWidget,
+  LearnNostrWidget,
   LocalArticlesWidget,
   LocalFeedsWidget,
   LocalFilesWidget,
@@ -69,8 +70,10 @@ export function SpaceScreen() {
           return <XfeedsWidget key={widget.id} params={widget} />;
         case WidgetKinds.tmp.list:
           return <WidgetList key={widget.id} params={widget} />;
+        case WidgetKinds.other.learnNostr:
+          return <LearnNostrWidget key={widget.id} params={widget} />;
         default:
-          break;
+          return null;
       }
     },
     [widgets]

src/shared/accounts/more.tsx

@@ -19,7 +19,7 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
         </button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
+        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/20 p-2 backdrop-blur-3xl focus:outline-none">
           <DropdownMenu.Item asChild>
             <Link
               to={`/users/${pubkey}`}

src/shared/navigation.tsx

@@ -42,7 +42,7 @@ export function Navigation() {
                 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/80'
+                  : 'border-transparent text-white/70'
               )
             }
           >
@@ -59,7 +59,7 @@ export function Navigation() {
                 'flex h-10 items-center justify-between rounded-r-lg border-l-2 pl-4 pr-2',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/80'
+                  : 'border-transparent text-white/70'
               )
             }
           >
@@ -104,7 +104,7 @@ export function Navigation() {
                     'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
                     isActive
                       ? 'border-fuchsia-500 bg-white/5 text-white'
-                      : 'border-transparent text-white/80'
+                      : 'border-transparent text-white/70'
                   )
                 }
               >

src/shared/widgets/index.ts

@@ -11,3 +11,4 @@ export * from './nostrBand/trendingNotes';
 export * from './nostrBand/trendingAccounts';
 export * from './tmp/feeds';
 export * from './tmp/hashtag';
+export * from './other/learnNostr';

src/shared/widgets/other/learnNostr.tsx

@@ -0,0 +1,67 @@
+import { ArrowRightIcon } from '@shared/icons';
+import { TitleBar } from '@shared/titleBar';
+
+import { Widget } from '@utils/types';
+
+export function LearnNostrWidget({ params }: { params: Widget }) {
+  return (
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
+      <TitleBar id={params.id} title="The Joy of Nostr" />
+      <div className="flex h-full flex-col gap-6 px-3">
+        <div>
+          <h3 className="mb-2 font-medium text-white/50">The Basics</h3>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
+              <div className="inline-flex items-center gap-2.5">
+                <div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
+                <div className="flex flex-col gap-1">
+                  <h5 className="font-semibold leading-none">What is Nostr?</h5>
+                  <p className="text-sm leading-none text-white/70">Unread</p>
+                </div>
+              </div>
+              <button type="button">
+                <ArrowRightIcon className="h-5 w-5 text-white" />
+              </button>
+            </div>
+            <div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
+              <div className="inline-flex items-center gap-2.5">
+                <div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
+                <div className="flex flex-col gap-1">
+                  <h5 className="font-semibold leading-none">Understanding keys</h5>
+                  <p className="text-sm leading-none text-white/70">Unread</p>
+                </div>
+              </div>
+              <button type="button">
+                <ArrowRightIcon className="h-5 w-5 text-white" />
+              </button>
+            </div>
+            <div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
+              <div className="inline-flex items-center gap-2.5">
+                <div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
+                <div className="flex flex-col gap-1">
+                  <h5 className="font-semibold leading-none">What&apos;s a client?</h5>
+                  <p className="text-sm leading-none text-white/70">Unread</p>
+                </div>
+              </div>
+              <button type="button">
+                <ArrowRightIcon className="h-5 w-5 text-white" />
+              </button>
+            </div>
+            <div className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3">
+              <div className="inline-flex items-center gap-2.5">
+                <div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
+                <div className="flex flex-col gap-1">
+                  <h5 className="font-semibold leading-none">What are relays?</h5>
+                  <p className="text-sm leading-none text-white/70">Unread</p>
+                </div>
+              </div>
+              <button type="button">
+                <ArrowRightIcon className="h-5 w-5 text-white" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/stores/widgets.ts

@@ -32,6 +32,9 @@ export const WidgetKinds = {
     trendingAccounts: 1,
     trendingNotes: 2,
   },
+  other: {
+    learnNostr: 90000,
+  },
   tmp: {
     list: 10000,
     xfeed: 10001,
@@ -100,6 +103,16 @@ export const DefaultWidgets: Array<WidgetGroup> = [
       },
     ],
   },
+  {
+    title: 'Other',
+    data: [
+      {
+        kind: WidgetKinds.other.learnNostr,
+        title: 'Learn Nostr',
+        description: 'All things you need to know about Nostr',
+      },
+    ],
+  },
 ];
 
 export const useWidgets = create<WidgetState>()(