Intention:

Code the following, with a focus on CSS and layout, use placeholder data.

Refer to website design/dashboard/iteration 1 in figma for design

• The top left logo & system info
• This instance list (create empty InstanceCard component for the actual cards)
  • Consider responsiveness, we want this vertical section to be resizable horizontally in the future
• The empty space at the top

Expected result:

• Create the "add new instance" button according to figma.
• Have it open a modal box (maybe look into the new "dialog" html element?

• Implement a border on each setting section and drop shadow on the settings
• Ping people in discord with a link to a preview so we can decide whether or not to keep this

https://www.figma.com/file/vXZDnPrgTFXCAYyBZEz8Sv/dashboard?node-id=2258%3A13887&t=wBuTT8rj0lKB5lMm-1

Have SetupNewCorePage.tsx somehow automatically login to owner after setting up a core.
backend changes may be required?

Intention:

Code this in a component named InstanceCard using placeholder data.
Consider responsiveness while writing the css. These cards might change width in the future.

Implement all 3 colors for the status indicator, using different css class names

Implement the hover, pressed, and selected state for the button and the entire card as needed.
Implement the

the card has a green border when selected

Why is it necessary:

The Problem

Edit InputBox.tsx and InputField.tsx

Steps

Either:

• Make the icons take up space, instead of floating on as absolute position
• Move the outline to the surrounding div instead of the input element

Or:

• Add auto calculated right padding to input fields, so the text can't reach the icons

In any case, the result should look like this:

Here's another example: https://tailwindui.com/components/application-ui/forms/input-groups

Intention:

Find a framework/library/design pattern to use for forms in the dashboard

Why is it necessary:

This is necessary before we get started on actually creating the form input components

Currently

Currently, first time setup experience for tauri is passable.

• The default address of localhost:16662 exists and makes sense
• Prompt pops up asking guiding the user through the first-time setup steps
• Setup key is auto filled

However, first time setup experience for web (lodestone.cc) is not very good.
We can split the user into 2 groups: ones who want to manage a remote server, and ones who want to manage a local server.
Remote server:

• Dashboard defaults to localhost:16662 even though there's no core there.
• It takes 5 seconds (timeout time) for the dashboard to show the user the Core Connection Error prompt
• After which, the user is redirected to the Select Existing Core page, which has no cores in the list

Local server:

• The user is never told how to setup their own core

Intention

• Create a first-time setup page.
  • Download button that redirects to github releases
  • "Connect" redirect to "Connect new core page"
  • If detects a tauri local core that is setup, auto redirect to dashboard
  • If detects a tauri local core that is not setup, auto redirect to setup page
• Improve Github Readme and surrounding documentation
• Improve Github Release readability
• Show the user a first-time setup prompt If there is no core in corelist
• Select core should auto redirect to the add new core page if no core is in corelist
• Add a download button in choose core page that redirects to github release
• Add a download button in add new core page

Warn the user about whether the port is in use but don't disable instance creation

Run port check when user attempts to start an instance and error accordingly

• Create a game icon component GameIcon in src/components/GameIcon.tsx
• Create a storybook for it in src/components/GameIcon.stories.tsx
• Replace the hard coded Minecraft grass block in InstanceCard and Dashboard with this game icon component

Some more info

The component should take a type : InstanceType prop, and return an <img> with one of the above images.

The InstanceType type is in InstanceList.ts

See Label.stories.tsx as an example for storybook

See readme for how to start the dev server for nextjs and the one for storybook

If the user is using our Tauri based desktop client, then the dashboard can use tauri commands to directly get the owner's token, setup owner account, etc.

• Add a hook for detecting whether or not the dashboard is running inside Tauri
• Edit SetupNewCorePage to detect Tauri and use Tauri commands to setup
• Edit login pages to detect tauri and offer the option of logging in with owner

Current Behavior

1. First time a user visits the dashboard, they try to connect to localhost:16662
2. When the user visits the dashboard, the currently described core from search param (?address=123.123.123.123) is added to the user's list of cores automatically with no feedback.
3. When connection to core fails, various UI elements error individually.
4. When the Event stream web socket disconnects, there are no direct visual feedback.

Expected Behavior

1. Dashboard should redirect the user to the first-time setup page if it's the user's first time visitng. First time setup page should try to search for a local core, and prompt user to setup if found.
2. First time dashboard connects to a new core, prompt the user to login, browse as guest, or go back and choose another core. Only store the core if the user does login/visit.
3. When connection to core fails, a dialog should pop up, giving the user 3 options: cancel, reload, choose another core.
4. Nav bar indicator should reflect event stream health.

Checklist

• Add first time setup dialog & redirect for new users
• Add a global repeated check for localhost:16662 if localhost not in corelist already, and try to prompt the user to set it up.
• Add prompt for when a new core is detected. Only allow adding the core if we can connect to it?
• Add dialog box for losing connection
• Somehow pass event processor health to the status indicator in the top nav.

Intention:

Have documentation that describes the purpose, scope, and architecture of the entire Lodestone project.

Why is it necessary:

This helps to keep things organized as the project and the team grows.

see figma for design

• Match design of dropdown to the new design in figma
• Add ability for each dropdown item to have an icon, with an action attached (new prop itemActionIcon and itemAction as a function that takes the currently selected option

• Implement a modal component using headless UI dialog (See figma for design)

There are 2 types of modal, "Dangerous" ones with a cancel and confirm, and a "Confirm" one, with just an ok button.

https://docs.craft.do/editor/d/29f71b6b-cf22-e814-7163-950f4fa38979/67ebe848-739a-44e8-83d5-6b8150effd85/b/562913e4-a8e2-4433-acb8-5e1faa99f7b7/Dec_20th/Modals#7FEAB0B1-5840-4CE6-84D2-DE3EEA085DFD

On Chrome, if the browser isn't full screen, one can't resize the notification panel.

Once the browser is full screen you can

Intention:

Design the dashboard and the components in figma.

Why is it necessary:

It's about time.

Currently we load fonts from fontshare's cdn
We should download the fonts and host it ourselves.

This way users who use our local Tauri desktop client won't require an internet connection

Intention:

Do the following:

• Setup new GitHub Repository with correct permissions
• Setup Netlify
• Setup the overall structure of the project

Why is it necessary:

So we can get started

• Create the Tabs component in src/
• Link the current tab with a query in the address
• Create storybook for it

Create a Tabs component and any subcomponents needed.
Tabs should be automatically generated from children using their label.
If this turns out to be hard, create a Tab component with label prop or find some other way.

IMPORTANT: only the selected tab should render, the rest should NOT display: none, they shouldn't be rendered.

Example:

<Tabs>
  <div label="Basic Settings">
  </div>
  <div label="Console">
  </div>
</Tabs>

Regarding "link current tab with query in address":
Example:
?tab=basic-settings opens the basic settings tab, clicking the console tab changes address to ?tab=console

Refer to figma for design, the active tab should be displayed and highlighted in blue.

Intention:

Add google analytics to the home page so we can track our traffic.

use something like https://gcanti.github.io/io-ts/ to do type guards

stop assuming API calls return the right type

On Windows, the path isn't truncated properly

Expected:

Firefox currently does not support container queries, causing lots of layout to default to their mobile view.

Currently Tauri uses https://tauri.localhost/ and blocks http since that's mixed content.
This blocks API calls to external cores since those are http for now.

Related information:

• tauri-apps/tauri#3007
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Currently, if a form has an error, the error can only be displayed on one input field.
An example is the core select page. If network connection fail, there's no one field to blame.

We should use something like this, and put the error on top

• Research how we can pass the error information around in FormIk
• Make a "error banner" component
• Add it to The new core setup page and core select page

• Set all text to gray 300 except for the blue button and small hard to read text
• Fix black text in light theme
• Update tailwind css with new colors
• Update components with new colors
• Add new red button

The Problem

A button's size changes when loading is set to true.
See a demo on storybook here: https://deploy-preview-14--lodestone-storybook.netlify.app/?path=/story/library-button--disabled&args=loading:true

Expected Behavior

The text should be hidden, a loading animation is shown instead, just like it currently does.
But the width of the button shouldn't change.

This can be accomplished by hiding instead of removing the text, then putting the loading animation on top using absolute position.

See figma for design details.
The status indicator is the "Ubuntu's Lodestone Core: Timeout Error" section.

Get rid of SelectCoreField, make SelectField more general with type templates.

Implement all the pages in Figma board "dashboard" page "login 1".

• "new core" detection to redirect to first time setup page
• first time setup pages and forms
• Update the design of the existing pages
• Add smooth transition between the pages

Intention:

This stuff. Use placeholder data for now.

Make the tab system as well, and have different things show up for each tab.

Why is it necessary:

See figma and craft for details

We should probably add a snackbar to indicate that the user has saved a setting successfully.

This is currently worst on the instance name. Clicking save offers no feedback at all, other than having the save icon flash to loading for a split second.

Need design for this too.

Notice the left side is cut off in Tauri.

Step to reproduce:

1. Open a file
2. Open the notification panel
3. Shrink the width of the application window

When client is hosted on Windows:

When client is hosted on Ubuntu:

1. Setting icon is a link to /settings
2. Don't worry about login/logout for now? (show some placeholder text if the user is logged out)
3. New color for icon bg-gray-faded/50
4. New text style

Chrome is auto filling almost every field in the dashboard. We should change our input/form components to disable autofill by default.
The expected behavior is that no autofill box should pop up when clicking on any text field.

Only copies the address, not the ip

When on the home page, if there isn't enough space to display the graph, a scrollbar appears and breaks the entire site

Add toasts/snackbar.
I was thinking of either react-toastify or radix ui.
need design on this too

Things that need toast:

• Fail to change instance name
• Failed to start/stop instance (through instance card)
• Copied text
  and more...

CI should produce the executable and the installer.

Make these cards, but empty. (same size)

These will be used while the actual data is loading to fill space.

Create a storybook for it too, see Label.stories.tsx as an example.