commit c42160c69578fd5671c56f02c1ca8fa0dd44e621 · cduck.me/statusphere-example-app-fork

+5 -2

src/pages/home.ts

···

       37
        
         statuses: Status[]

     

       38
        
         didHandleMap: Record<string, string>

     

       39
        
         profile?: { displayName?: string; handle: string }

     

       0
        
       
     

       40
        
       }

     

       41
        
       

     

       42
        
       export function home(props: Props) {

     
···

       46
        
         })

     

       47
        
       }

     

       48
        
       

     

       49
       -
       function content({ statuses, didHandleMap, profile }: Props) {

     

       50
        
         return html`<div id="root">

     

       51
        
           <div class="error"></div>

     

       52
        
           <div id="header">

     
···

       76
        
               ${STATUS_OPTIONS.map(

     

       77
        
                 (status) =>

     

       78
        
                   html`<div

     

       79
       -
                     class="status-option"

     

       0
        
       
     

       0
        
       
     

       80
        
                     data-value="${status}"

     

       81
        
                     data-authed=${profile ? '1' : '0'}

     

       82
        
                   >

···

       37
        
         statuses: Status[]

     

       38
        
         didHandleMap: Record<string, string>

     

       39
        
         profile?: { displayName?: string; handle: string }

     

       40
       +
         myStatus?: Status

     

       41
        
       }

     

       42
        
       

     

       43
        
       export function home(props: Props) {

     
···

       47
        
         })

     

       48
        
       }

     

       49
        
       

     

       50
       +
       function content({ statuses, didHandleMap, profile, myStatus }: Props) {

     

       51
        
         return html`<div id="root">

     

       52
        
           <div class="error"></div>

     

       53
        
           <div id="header">

     
···

       77
        
               ${STATUS_OPTIONS.map(

     

       78
        
                 (status) =>

     

       79
        
                   html`<div

     

       80
       +
                     class=${myStatus?.status === status

     

       81
       +
                       ? 'status-option selected'

     

       82
       +
                       : 'status-option'}

     

       83
        
                     data-value="${status}"

     

       84
        
                     data-authed=${profile ? '1' : '0'}

     

       85
        
                   >

+13 -1

src/public/styles.css

···

       5
        
         --gray-100: #fafafa;

     

       6
        
         --gray-500: #666;

     

       7
        
         --gray-700: #333;

     

       0
        
       
     

       0
        
       
     

       8
        
         --primary-400: #2e8fff;

     

       9
        
         --primary-500: #0078ff;

     

       10
        
         --primary-600: #0066db;

     
···

       146
        
       }

     

       147
        
       

     

       148
        
       .status-option:hover {

     

       149
       -
         background-color: var(--gray-100);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       150
        
       }

     

       151
        
       

     

       152
        
       .status-line {

···

       5
        
         --gray-100: #fafafa;

     

       6
        
         --gray-500: #666;

     

       7
        
         --gray-700: #333;

     

       8
       +
         --primary-100: #d2e7ff;

     

       9
       +
         --primary-200: #b1d3fa;

     

       10
        
         --primary-400: #2e8fff;

     

       11
        
         --primary-500: #0078ff;

     

       12
        
         --primary-600: #0066db;

     
···

       148
        
       }

     

       149
        
       

     

       150
        
       .status-option:hover {

     

       151
       +
         background-color: var(--primary-100);

     

       152
       +
         box-shadow: 0 0 0 1px var(--primary-400);

     

       153
       +
       }

     

       154
       +
       

     

       155
       +
       .status-option.selected {

     

       156
       +
         box-shadow: 0 0 0 1px var(--primary-500);

     

       157
       +
         background-color: var(--primary-100);

     

       158
       +
       }

     

       159
       +
       

     

       160
       +
       .status-option.selected:hover {

     

       161
       +
         background-color: var(--primary-200);

     

       162
        
       }

     

       163
        
       

     

       164
        
       .status-line {

+8 -1

src/routes/index.ts

···

       95
        
               .orderBy('indexedAt', 'desc')

     

       96
        
               .limit(10)

     

       97
        
               .execute()

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       98
        
             const didHandleMap = await ctx.resolver.resolveDidsToHandles(

     

       99
        
               statuses.map((s) => s.authorDid)

     

       100
        
             )

     
···

       104
        
             const { data: profile } = await agent.getProfile({ actor: session.did })

     

       105
        
             return res

     

       106
        
               .type('html')

     

       107
       -
               .send(page(home({ statuses, didHandleMap, profile })))

     

       108
        
           })

     

       109
        
         )

     

       110

···

       95
        
               .orderBy('indexedAt', 'desc')

     

       96
        
               .limit(10)

     

       97
        
               .execute()

     

       98
       +
             const myStatus = agent

     

       99
       +
               ? await ctx.db

     

       100
       +
                   .selectFrom('status')

     

       101
       +
                   .selectAll()

     

       102
       +
                   .where('authorDid', '=', agent.accountDid)

     

       103
       +
                   .executeTakeFirst()

     

       104
       +
               : undefined

     

       105
        
             const didHandleMap = await ctx.resolver.resolveDidsToHandles(

     

       106
        
               statuses.map((s) => s.authorDid)

     

       107
        
             )

     
···

       111
        
             const { data: profile } = await agent.getProfile({ actor: session.did })

     

       112
        
             return res

     

       113
        
               .type('html')

     

       114
       +
               .send(page(home({ statuses, didHandleMap, profile, myStatus })))

     

       115
        
           })

     

       116
        
         )

     

       117