# datdot.org wireframe

### nav component

`@todo`

- [ ] design app-bottom-navbar
- [ ] constraint to left side
- [ ] company logo and name btn
- [ ] calender icon btn
- [ ] logo icon btn
- [ ] terminal icon btn
- [ ] games icon btn
- [ ] contraint to right side
- [ ] time
- [ ] user profile image
- [ ] language
- [ ] notification bell
- [ ] theme

----

### notificaion pop-over component

`@todo`

- [ ] design notificaion pop-over
- [ ] pop-over header
- [ ] read all cta (contraint to right)
- [ ] content body
- [ ] info card

----

### info card

`@todo`

- [ ] design info card
- [ ] default state
- [ ] header
- [ ] text info
- [ ] time
- [ ] active state
- [ ] background to primary color

----

### profile popover component

`@todo`

- [ ] design profile popover component
- [ ] user profile
- [ ] contract/profile picture
- [ ] wallet address
- [ ] profile cta
- [ ] account settings cta
- [ ] signout cta with leading icon

----

### language popover component

`@todo`

- [ ] design language popover
- [ ] active state
- [ ] leading icon
- [ ] primary background color
- [ ] language name
- [ ] default state
- [ ] language name

----

### collapsed apps popover

`@todo`

- [ ] design apps popover
- [ ] leading icon
- [ ] application name

----

### app container component

`@todo`

- [ ] design app container
- [ ] header
- [ ] app title
- [ ] close icon btn
- [ ] minimize icon btn
- [ ] full-screen and window-screen icon btn
- [ ] body-content
- [ ] over-flow scroll
- [ ] set minimum and maximum width and height

----

### manager content component

`@todo`

- [ ] design manager content container
- [ ] header
- [ ] tab btns (constraint to left)
- [ ] text btns
- [ ] set active state on active tab
- [ ] search input
- [ ] trailing icon btn filled
- [ ] text-input field
- [ ] filter header
- [ ] "total items found" (contraint to left)
- [ ] install all cta (contraint to right)
- [ ] installed and not installed toggles (contraint to left)
- [ ] content grid
- [ ] application cards

----

### application card

`@todo`

- [ ] design application card
- [ ] error state
- [ ] close/remove app btn
- [ ] error icon
- [ ] error message
- [ ] default state
- [ ] app logo/icon
- [ ] app name
- [ ] app company name
- [ ] action grid (conditional)
- [ ] block app action
- [ ] pin app
- [ ] file
- [ ] play (conditional)
- [ ] folder
- [ ] leading icon "install" btn (conditional)
- [ ] installing
- [ ] leading icon "cancel btn"
- [ ] progress bar
- [ ] close/remove app btn

----

### datdot content component

`@todo`

- [ ] design datdot content container
- [ ] sidenav
- [ ] package panel
- [ ] documentation panel
- [ ] settings panel
- [ ] news panel
- [ ] about panel
- [ ] support chat panel
- [ ] supply tree panel

----

### sidenav component

`@todo`

- [ ] design side navbar
- [ ] navigation links with leading icons
- [ ] package btn
- [ ] documentation btn
- [ ] settings btn
- [ ] news btn
- [ ] about btn
- [ ] support chat btn
- [ ] supply tree btn
- [ ] toggle button (toggle's between icon and leading icon states)
- [ ] back button (contraint to bottom)

----

### package content component

`@todo`

- [ ] design package content panel
- [ ] header
- [ ] logo (constraint to left)
- [ ] download btn
- [ ] select version dropdown
- [ ] dropdown with all the options
- [ ] info doc

----

### document content component

`@todo`

- [ ] design document content panel
- [ ] info doc
- [ ] table of content
- [ ] content list
- [ ] sub-content list
- [ ] active and default states

----

### settings content component

`@todo`

- [ ] design settings content panel
- [ ] application grid
- [ ] application card

----

### theme content component

`@todo`

- [ ] design theme panel
- [ ] theme panel
- [ ] panel title
- [ ] theme grid
- [ ] theme preview picture
- [ ] theme name
- [ ] set height
- [ ] overflow-scroll
- [ ] customize theme input
- [ ] checkbox for JSON file requirement
- [ ] input field for JSON file link
- [ ] back cta
- [ ] get more theme cta
- [ ] apply cta
- [ ] download theme panel
- [ ] panel title
- [ ] application card
- [ ] set height
- [ ] overflow-scroll
- [ ] customize theme tutorial panel
- [ ] info doc
- [ ] table of content
- [ ] content list
- [ ] sub-content list
- [ ] active and default states

----

### language content component

`@todo`

- [ ] design language panel
- [ ] panel title
- [ ] switch tab tab
- [ ] install language grid
- [ ] language list
- [ ] back cta
- [ ] apply cta

----

### clock content component

`@todo`

- [ ] design clock setting panel
- [ ] panel title
- [ ] current time
- [ ] timezone select (dropdown with option)
- [ ] checkbox to set to local time
- [ ] display type
- [ ] back cta
- [ ] apply cta

----

### news content component

- [ ] design news content panel
- [ ] info doc
- [ ] table of content
- [ ] content list
- [ ] sub-content list
- [ ] active and default states

`@todo`

----

### about content component

`@todo`

- [ ] design about content panel
- [ ] info doc
- [ ] table of content
- [ ] content list
- [ ] sub-content list
- [ ] active and default states

----

### support chat component

`@todo`

- [ ] design support content panel
- [ ] chat container component
- [ ] start chatting cta
- [ ] sign in cta

----

### chat contianer component

`@todo`

- [ ] chat contianer design
- [ ] chat
- [ ] user profile
- [ ] chat header
- [ ] user name
- [ ] user id/tag
- [ ] chat sent time
- [ ] chat text

----

### supply tree component

`@todo`

- [ ] design supply tree content panel
- [ ] header block
- [ ] title
- [ ] open collective cta
- [ ] crypto donaiton cta
- [ ] contributors grid
- [ ] user profile
- [ ] user name

----