feat(ui): standardize design system, modals, sidebar, and form inputs

- Implement unified design system tokens, 10px radius, and IRANSans typography
- Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout
- Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions
- Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components
- Add draggable bottom-left QuickCreate floating action button

apps/web/src/components/ui/UiInput.vue

@@ -4,48 +4,122 @@ withDefaults(
     type?: string;
     placeholder?: string;
     disabled?: boolean;
+    readonly?: boolean;
     required?: boolean;
-    maxlength?: number;
-    minlength?: number;
+    error?: boolean | string;
+    size?: 'sm' | 'md' | 'lg';
+    maxlength?: number | string;
+    minlength?: number | string;
+    id?: string;
+    autocomplete?: string;
   }>(),
-  { type: 'text' },
+  {
+    type: 'text',
+    size: 'md',
+    disabled: false,
+    readonly: false,
+    required: false,
+  },
 );
 
-const model = defineModel<string>({ default: '' });
+const model = defineModel<string | number>({ default: '' });
 </script>
 
 <template>
-  <input
-    v-model="model"
-    class="ui-input"
-    :type="type"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :required="required"
-    :maxlength="maxlength"
-    :minlength="minlength"
-  />
+  <div class="ui-input-wrapper" :class="[size, { disabled, hasError: !!error }]">
+    <slot name="prefix" />
+    <input
+      :id="id"
+      v-model="model"
+      class="ui-input"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :maxlength="maxlength"
+      :minlength="minlength"
+      :autocomplete="autocomplete"
+      :aria-invalid="!!error"
+    />
+    <slot name="suffix" />
+  </div>
 </template>
 
 <style scoped>
-.ui-input {
+.ui-input-wrapper {
+  display: inline-flex;
+  align-items: center;
   width: 100%;
   min-width: 0;
-  min-height: var(--control-h);
-  padding: 0 0.85rem;
+  min-height: var(--control-h-md);
+  padding: 0 var(--sp-3);
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: #fff;
+  background: var(--surface);
   color: var(--ink);
-  font: inherit;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  box-sizing: border-box;
 }
 
-.ui-input:focus {
+.ui-input-wrapper.sm {
+  min-height: var(--control-h-sm);
+  padding: 0 var(--sp-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--fs-xs);
+}
+
+.ui-input-wrapper.md {
+  min-height: var(--control-h-md);
+  padding: 0 var(--sp-3);
+  border-radius: var(--radius);
+  font-size: var(--fs-base);
+}
+
+.ui-input-wrapper.lg {
+  min-height: var(--control-h-lg);
+  padding: 0 var(--sp-4);
+  border-radius: var(--radius-md);
+  font-size: var(--fs-md);
+}
+
+.ui-input {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+}
+
+.ui-input::placeholder {
+  color: var(--muted-light);
+}
+
+.ui-input-wrapper:focus-within {
   outline: 2px solid var(--accent-soft);
   border-color: var(--accent);
 }
 
+.ui-input-wrapper.hasError {
+  border-color: var(--danger);
+}
+
+.ui-input-wrapper.hasError:focus-within {
+  outline: 2px solid var(--danger-soft);
+  border-color: var(--danger);
+}
+
+.ui-input-wrapper.disabled {
+  background: var(--surface-subtle);
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
 .ui-input:disabled {
-  opacity: 0.6;
+  cursor: not-allowed;
 }
 </style>