Just a quick note that npm vite is the command if you don't have it in your paths. (Jeffrey uses just vite, which does nothing in Windows apparently.)

This will specifically fix if you're not seeing the black background/white text styles once he starts loading the site.

Here are the full CSS component files for those looking to copy:

resources/css/components/btn.css

button {
    cursor: pointer;
}

.btn {
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    color: var(--color-primary-foreground);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    height: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
    display: inline-block;
}

.btn.btn-outlined {
    background: transparent;
    border: 1px solid var(--color-border);
    border-color: var(--color-border);
    color: var(--color-foreground);
}

.btn.btn-outlined:hover {
    background: color-mix(in srgb, black 25%, var(--color-input));
}

.btn.btn-ghost {
    background: transparent;
}

.btn:has(> svg) {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
}

.btn:hover {
    background: color-mix(in srgb, black 10%, var(--color-primary));
    text-decoration: none;
}

resources/css/components/form.css

label {
    color: var(--color-foreground);
}

.input {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 10);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.input::placeholder {
    color: var(--color-muted-foreground);
}

.input:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

@media (min-width: var(--breakpoint-md)) {
    .input {
        font-size: var(--text-sm);
    }
}

.textarea {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 40);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.textarea::placeholder {
    color: var(--color-muted-foreground);
}

.textarea:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

.label {
    display: block;
    font-size: var(--text-sm);
}

input[type=file] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-foreground);
}

input[type=file]::file-selector-button {
    margin-right: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    border-radius: calc(var(--spacing) * 2);
    border-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: var(--color-primary);
    color: rgb(var(--color-background));
}

input[type=file]::file-selector-button:hover {
    opacity: 0.9;
}

.error {
    font-size: var(--text-sm);
    color: var(--color-red-600);
}

.form-muted-icon {
    color: var(--color-muted-foreground);
}

.form-muted-icon:hover {
    color: var(--color-foreground);
}

Hi @connor1231 ,

This is what is my cencept and I am open to discuss:

• If we want to apply authorization rule to page level, we should use a gate and if we want to apply authorization rule to a model we should use policy.
• As Jeffry had mentioned, gates are route closure equivalent of authorization and policies are controller equivalent of authorization for models.
• If I do not want to display a page to an user, irrespective of whether the page is tied to any model or not, I will reach for gate. For example, an admin can view all ideas of all users. This page should be accessible by only admin.
• If I want to restrict an user to update an idea created by another user, I will reach for policies. In this case, the update page is more specific to a model.

Regards, Anupam Bordoloi

@connor1231 I also agree that I was super muddy on why I would start out down one path or another (Gates vs Policies). Found this essay on the web to be useful. Also, towards the bottom, it has a specific paragraph related to this question.

https://www.twilio.com/en-us/blog/developers/community/what-are-laravel-policies-and-how-to-use-them-to-control-access

Here are some of the key comparisons between Gates and Policies:

• Scope: Gates are designed for simple authorization scenarios, where only a single check is required to determine whether a user has access to a particular resource. On the other hand, Policies are designed for more complex authorization scenarios, where multiple rules may be required to determine whether a user has access to a resource.
• Flexibility: Laravel Policies are generally more flexible than Gates, as they can be used to control access to any resource in a Laravel application, while Gates are typically used to control access to specific actions or routes.
• Syntax: The syntax for defining Gates and Policies is slightly different. Gates are defined using a callback function, while Policies are defined as a separate class with specific methods for each action.
• Granularity: Laravel Policies allow for finer-grained control over resource access, as they can be defined for specific models or model types. Gates are typically defined at the route or controller level, which may not provide the same level of granularity.

@cartman780 He changes the return type for the function in a lightning fast move with the keyboard mid-lecture at the start of where he sets it to return responses, lol. Basically at the top of the function change : bool to : Response.

I couldn't get Create New Idea to work until I added user_id to the $fillable list in the Idea model. Kept returning an error for user_id NOT NULL. I'm doing this in Laravel 13—no idea if that's related or not.

EDIT: Yeah, I think this is Laravel 13 related, because I remember I wasn't allowed to $guared = [] and had to use $fillable instead.

Something seems to have changed since this was created. You have to create the column nullable or php artisan migration returns an error:

"Cannot add a NOT NULL column with default volue NULL"

The fix for me:

$table->string('state')->nullable();

After that the migration works correctly.

EDIT: And $guarded = [] had to be replaced with $fillable = ['description', 'state'] too.

(Laravel 13 came out literally days ago, so I think maybe that's the issue?)