Add Resize the room sidepanel using a hoverable tool (#768)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description
Add the ability to resize the room sidebar, you can either do it in
settings as a number of the width of it, or using a hoverable thing.

Additionally you can now set whether and when do you want to show the
room's icon instead of the default symbol, mainly meant for when the
sidebar is not wide enough to display meaningful names to serve as an
aid to know which room you are in.

A good %age of the changes are just indentation from adding/removing one
object

(example of holding the bar to drag it)
<img width="1033" height="1080" alt="image"
src="https://github.com/user-attachments/assets/d7c6f47a-40a6-4199-9258-00f89119afd3"
/>

(example of smart looks)
<img width="1033" height="1080" alt="image"
src="https://github.com/user-attachments/assets/287ae643-1178-44b8-96e1-436185c93076"
/>
<img width="1060" height="1080" alt="image"
src="https://github.com/user-attachments/assets/3d915210-fa77-4844-8ce3-64afc244ae8c"
/>

(settings added here)
<img width="810" height="697" alt="image"
src="https://github.com/user-attachments/assets/fe925a68-63d7-4ad7-9c90-31243dd386d0"
/>
<img width="811" height="823" alt="image"
src="https://github.com/user-attachments/assets/c2266459-af86-4168-b8e5-aabacb057476"
/>

(example of the threads being resizeable)
<img width="918" height="1080" alt="image"
src="https://github.com/user-attachments/assets/d41d6749-489d-46ed-aa78-73aa54af8915"
/>
<img width="930" height="1080" alt="image"
src="https://github.com/user-attachments/assets/07677474-0ef3-4708-8eba-a64a68eac61c"
/>

<img width="816" height="1080" alt="image"
src="https://github.com/user-attachments/assets/23efa84d-c2e4-474b-a85f-d12fadc62b56"
/>

Fixes: #68 #102 #681 #694

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->
The Pisan cats have helped me implement this

Author: 7w1

.changeset/add_icons_to_room_sidebar.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add setting to show icons of the rooms in the Rooms sidebar

.changeset/add_resize-side-panel.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add Resize the sidepanels and the thread height of the original object using hoverable tools.

.changeset/add_toggle_to_not_join_room_on_initial_click.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add toggle to allow one to not join a call in a room by just clicking it in the sidebar.

src/app/components/nav/styles.css.ts

@@ -107,8 +107,8 @@ export const NavItem = recipe({
 
 export type RoomSelectorVariants = RecipeVariants<typeof NavItem>;
 export const NavItemContent = style({
-  paddingLeft: config.space.S200,
-  paddingRight: config.space.S300,
+  paddingLeft: config.space.S300,
+  paddingRight: config.space.S200,
   height: 'inherit',
   minWidth: 0,
   flexGrow: 1,

src/app/components/page/style.css.ts

@@ -6,6 +6,9 @@ import { DefaultReset, color, config, toRem } from 'folds';
 export const PageNav = recipe({
   variants: {
     size: {
+      '100%': {
+        width: '100%',
+      },
       '400': {
         width: toRem(256),
       },
@@ -15,7 +18,7 @@ export const PageNav = recipe({
     },
   },
   defaultVariants: {
-    size: '400',
+    size: '100%',
   },
 });
 export type PageNavVariants = RecipeVariants<typeof PageNav>;

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -1,26 +1,48 @@
-import { as, Chip, Icon, Icons, Text } from 'folds';
+import { as, Chip, Icon, IconButton, Icons, Text } from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 
 export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
-  ({ className, closed, children, ...props }, ref) => (
-    <Chip
-      className={classNames(css.CategoryButton, className)}
-      variant="Background"
-      radii="400"
-      after={
+  ({ className, closed, children, ...props }, ref) => {
+    if (children)
+      return (
+        <Chip
+          className={classNames(css.CategoryButton, className)}
+          variant="Background"
+          radii="400"
+          before={
+            <Icon
+              className={css.CategoryButtonIcon}
+              size="50"
+              src={closed ? Icons.ChevronRight : Icons.ChevronBottom}
+            />
+          }
+          {...props}
+          ref={ref}
+        >
+          {children && (
+            <Text size="B400" priority="300" truncate>
+              {children}
+            </Text>
+          )}
+        </Chip>
+      );
+    return (
+      <IconButton
+        className={classNames(css.CategoryButton, className)}
+        variant="Background"
+        radii="400"
+        {...props}
+        style={{ padding: '0' }}
+        ref={ref}
+      >
         <Icon
           className={css.CategoryButtonIcon}
           size="50"
+          style={{ padding: '0' }}
           src={closed ? Icons.ChevronRight : Icons.ChevronBottom}
         />
-      }
-      {...props}
-      ref={ref}
-    >
-      <Text size="B400" priority="300" truncate>
-        {children}
-      </Text>
-    </Chip>
-  )
+      </IconButton>
+    );
+  }
 );