autostart info alert

macapp/src/app.tsx

@@ -45,7 +45,7 @@ export default function () {
         )}
         {step === Step.CLI && (
           <>
-            <div className='mx-auto flex flex-col space-y-28 text-center'>
+            <div className='mx-auto flex flex-col gap-y-28 text-center'>
               <h1 className='mt-4 text-2xl tracking-tight text-gray-900'>Install the command line</h1>
               <pre className='mx-auto text-4xl text-gray-400'>&gt; ollama</pre>
               <div className='mx-auto'>
@@ -74,35 +74,48 @@ export default function () {
         )}
         {step === Step.FINISH && (
           <>
-            <div className='mx-auto flex flex-col space-y-20 text-center'>
+            <div className='mx-auto flex flex-col gap-y-16 text-center'>
               <h1 className='mt-4 text-2xl tracking-tight text-gray-900'>Run your first model</h1>
-              <div className='flex flex-col'>
-                <div className='group relative flex items-center'>
-                  <pre className='language-none text-2xs w-full rounded-md bg-gray-100 px-4 py-3 text-start leading-normal'>
-                    {command}
-                  </pre>
-                  <button
-                    className={`no-drag absolute right-[5px] px-2 py-2 ${
-                      commandCopied
-                        ? 'text-gray-900 opacity-100 hover:cursor-auto'
-                        : 'text-gray-200 opacity-50 hover:cursor-pointer'
-                    } hover:font-bold hover:text-gray-900 group-hover:opacity-100`}
-                    onClick={() => {
-                      copy(command)
-                      setCommandCopied(true)
-                      setTimeout(() => setCommandCopied(false), 3000)
-                    }}
-                  >
-                    {commandCopied ? (
-                      <CheckIcon className='h-4 w-4 font-bold text-gray-500' />
-                    ) : (
-                      <DocumentDuplicateIcon className='h-4 w-4 text-gray-500' />
-                    )}
-                  </button>
+              <div>
+                <div className='flex flex-col'>
+                  <div className='group relative flex items-center'>
+                    <pre className='language-none text-2xs w-full rounded-md bg-gray-100 px-4 py-3 text-start leading-normal'>
+                      {command}
+                    </pre>
+                    <button
+                      className={`no-drag absolute right-[5px] px-2 py-2 ${
+                        commandCopied
+                          ? 'text-gray-900 opacity-100 hover:cursor-auto'
+                          : 'text-gray-200 opacity-50 hover:cursor-pointer'
+                      } hover:font-bold hover:text-gray-900 group-hover:opacity-100`}
+                      onClick={() => {
+                        copy(command)
+                        setCommandCopied(true)
+                        setTimeout(() => setCommandCopied(false), 3000)
+                      }}
+                    >
+                      {commandCopied ? (
+                        <CheckIcon className='h-4 w-4 font-bold text-gray-500' />
+                      ) : (
+                        <DocumentDuplicateIcon className='h-4 w-4 text-gray-500' />
+                      )}
+                    </button>
+                  </div>
+                  <p className='mx-auto my-4 w-[70%] text-xs text-gray-400'>
+                    Run this command in your favorite terminal.
+                  </p>
+                </div>
+                <div
+                  className='rounded-lg bg-blue-50 p-4 text-start text-sm text-blue-800 dark:bg-gray-800 dark:text-blue-400'
+                  role='alert'
+                >
+                  <span className='font-medium'>
+                    {app.getLoginItemSettings().openAtLogin
+                      ? 'Autostart is enabled by default.'
+                      : 'Autostart is disabled by default.'}
+                  </span>
+                  <p>You can modify this setting in the preferences menu.</p>
                 </div>
-                <p className='mx-auto my-4 w-[70%] text-xs text-gray-400'>
-                  Run this command in your favorite terminal.
-                </p>
               </div>
               <button
                 onClick={() => {

macapp/src/index.ts

@@ -70,11 +70,11 @@ app.on('ready', () => {
 function firstRunWindow() {
   // Create the browser window.
   welcomeWindow = new BrowserWindow({
-    width: 400,
+    width: 440,
     height: 500,
     frame: false,
     fullscreenable: false,
-    resizable: false,
+    resizable: true,
     movable: true,
     show: false,
     webPreferences: {

macapp/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {},
   plugins: [],