small fixes

src/app/space/index.tsx

@@ -27,6 +27,7 @@ export function SpaceScreen() {
 
   const renderItem = useCallback(
     (widget: Widget) => {
+      if (!widget) return;
       switch (widget.kind) {
         case 1:
           return <FeedWidget key={widget.id} params={widget} />;
@@ -60,7 +61,7 @@ export function SpaceScreen() {
       ) : (
         widgets.map((widget) => renderItem(widget))
       )}
-      <div className="flex w-[250px] shrink-0 flex-col">
+      <div className="flex w-[350px] shrink-0 flex-col">
         <div className="inline-flex h-full w-full flex-col items-center justify-center gap-1">
           <FeedModal />
           <ImageModal />

src/index.css

@@ -15,7 +15,7 @@ button {
 }
 
 .markdown {
-  @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
+  @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }
 
 .ProseMirror p.is-empty::before {

src/libs/storage/instance.ts

@@ -101,10 +101,11 @@ export class LumeStorage {
   }
 
   public async getWidgets() {
-    const result: Array<Widget> = await this.db.select(
-      `SELECT * FROM widgets WHERE account_id = "${this.account.id}" ORDER BY created_at DESC;`
+    const widgets: Array<Widget> = await this.db.select(
+      'SELECT * FROM widgets WHERE account_id = $1 ORDER BY created_at DESC;',
+      [this.account.id]
     );
-    return result;
+    return widgets;
   }
 
   public async createWidget(kind: number, title: string, content: string | string[]) {

src/shared/notes/index.tsx

@@ -23,5 +23,5 @@ export * from './kinds/sub';
 export * from './skeleton';
 export * from './actions';
 export * from './content';
-export * from './hashtag';
+export * from './mentions/hashtag';
 export * from './stats';

src/shared/notes/mentions/hashtag.tsx

@@ -1,14 +1,17 @@
+import { useStorage } from '@libs/storage/provider';
+
 import { widgetKinds } from '@stores/constants';
 import { useWidgets } from '@stores/widgets';
 
 export function Hashtag({ tag }: { tag: string }) {
+  const { db } = useStorage();
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
     <button
       type="button"
       onClick={() =>
-        setWidget({
+        setWidget(db, {
           kind: widgetKinds.hashtag,
           title: tag,
           content: tag.replace('#', ''),

src/shared/notes/mentions/user.tsx

@@ -1,3 +1,5 @@
+import { useStorage } from '@libs/storage/provider';
+
 import { widgetKinds } from '@stores/constants';
 import { useWidgets } from '@stores/widgets';
 
@@ -5,14 +7,16 @@ import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
 export function MentionUser({ pubkey }: { pubkey: string }) {
+  const { db } = useStorage();
   const { user } = useProfile(pubkey);
+
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
     <button
       type="button"
       onClick={() =>
-        setWidget({
+        setWidget(db, {
           kind: widgetKinds.user,
           title: user?.nip05 || user?.name || user?.display_name,
           content: pubkey,

src/stores/widgets.tsx

@@ -17,17 +17,18 @@ export const useWidgets = create<WidgetState>()(
     (set) => ({
       widgets: null,
       fetchWidgets: async (db: LumeStorage) => {
-        const widgets = await db.getWidgets();
+        const dbWidgets = await db.getWidgets();
+        console.log('db widgets: ', dbWidgets);
 
         // default: add network widget
-        widgets.unshift({
-          id: String(widgets.length + 1),
+        dbWidgets.unshift({
+          id: String(dbWidgets.length + 1),
           title: 'Network',
           content: '',
           kind: 9999,
         });
 
-        set({ widgets: widgets });
+        set({ widgets: dbWidgets });
       },
       setWidget: async (db: LumeStorage, { kind, title, content }: Widget) => {
         const widget: Widget = await db.createWidget(kind, title, content);